/* ============================================================
   MARYAM RAFIEE — BASE STYLES
   Shared by every page. Page-specific rules live in their own
   file under /css/ (home.css, books-page.css, essays-page.css,
   post.css, about-page.css, contact-page.css) and are loaded
   alongside this one.
   ============================================================ */

:root {
  --cream:        #f7f5f0;
  --warm-white:   #fdfcfa;
  --sand:         #e8e4db;
  --sand-mid:     #d4cfc5;
  --text-dark:    #2a2826;
  --text-mid:     #5a5652;
  --text-light:   #8a8278;
  --accent:       #2aabe8;
  --accent-dark:  #1a8bc4;
  --accent-text:  #0c6f99; /* WCAG AA-safe accent for small/normal text on light backgrounds */
  --accent-light: rgba(42,171,232,0.10);
  --border:       #ddd9d2;
  --serif:        'Playfair Display', Georgia, serif;
  --sans:         'Lato', system-ui, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--warm-white);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* ── ACCESSIBILITY: visible keyboard focus ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,252,250,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between; height: 64px;
}
.logo {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  color: var(--text-dark); text-decoration: none; letter-spacing: -0.02em;
}
.main-nav { display: flex; gap: 2.5rem; list-style: none; }
.main-nav a {
  font-size: 0.875rem; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mid); text-decoration: none; transition: color 0.2s;
}
.main-nav a:hover, .main-nav a.active { color: var(--accent-text); }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
  margin-right: -10px;
}
.hamburger:hover { background: var(--sand); }
.hamburger span,
.hamburger span::before,
.hamburger span::after {
  display: block;
  background: var(--text-dark);
  height: 1.5px;
  border-radius: 2px;
  position: absolute;
  transition: all 0.3s ease;
}
.hamburger span       { width: 22px; top: 50%; transform: translateY(-50%); }
.hamburger span::before { content: ''; width: 22px; top: -7px; }
.hamburger span::after  { content: ''; width: 14px; top: 7px; }
.hamburger.open span            { background: transparent; }
.hamburger.open span::before    { top: 0; transform: rotate(45deg); width: 22px; }
.hamburger.open span::after     { top: 0; transform: rotate(-45deg); width: 22px; }


/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 0.8rem 1.8rem; border-radius: 4px; border: 2px solid var(--accent);
  transition: all 0.2s; cursor: pointer;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-secondary {
  display: inline-block; background: transparent; color: var(--text-dark);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 0.8rem 1.8rem; border-radius: 4px; border: 2px solid var(--border);
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--text-mid); }

.btn-outline {
  display: inline-block; border: 2px solid var(--border); color: var(--text-dark);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none; padding: 0.8rem 1.8rem;
  border-radius: 4px; transition: all 0.2s;
}
.btn-outline:hover { border-color: var(--text-mid); }

.btn-retailer {
  display: inline-block; background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.8rem 1.8rem;
  border-radius: 4px; border: 2px solid var(--accent); transition: all 0.2s;
  min-width: 130px; text-align: center;
}
.btn-retailer:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-buy {
  display: flex; justify-content: center; align-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 0.65rem 1.25rem; border-radius: 4px; border: 2px solid var(--accent);
  transition: all 0.2s; cursor: pointer; flex: 1; text-align: center;
}
.btn-buy:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-buy-ghost {
  display: inline-block; background: transparent; color: var(--text-mid);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 0.65rem 1.25rem; border-radius: 4px;
  border: 2px solid var(--border); transition: all 0.2s; cursor: pointer;
}
.btn-buy-ghost:hover { border-color: var(--text-mid); color: var(--text-dark); }

.btn-disabled {
  display: inline-block; background: var(--sand); color: var(--text-light);
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.65rem 1.25rem;
  border-radius: 4px; border: 2px solid var(--sand); cursor: not-allowed;
}

/* "Send a note" submit button — deliberately NOT the purchase-blue.
   Uses the dark palette color instead so it reads as a distinct action
   from "buy this book" buttons elsewhere on the site. */
.form-submit {
  width: 100%; background: var(--text-dark); color: #fff; border: none;
  border-radius: 4px; padding: 0.9rem 1.5rem; font-family: var(--sans);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; transition: background 0.2s; margin-top: 0.5rem;
}
.form-submit:hover { background: #000; }


/* ── UTILITY ── */
.divider { width: 48px; height: 3px; background: var(--accent); border-radius: 2px; }

.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.section-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.75rem;
}
.section-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.02em; color: var(--text-dark);
}


/* ── FOOTER ── */
.site-footer {
  background: var(--text-dark); color: rgba(255,255,255,0.5);
  padding: 2rem; text-align: center; font-size: 0.8rem;
}
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }


/* ── CTA STRIP ── */
.cta-strip {
  background: var(--cream); border-top: 1px solid var(--border);
  padding: 4rem 2rem; text-align: center;
}
.cta-strip h2 {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 0.75rem;
}
.cta-strip p {
  font-size: 1rem; color: var(--text-light); margin-bottom: 1.75rem;
  max-width: 500px; margin-left: auto; margin-right: auto;
}
.cta-strip .cta-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}


/* ── PAGE HEADER (sub-pages) ── */
.page-header {
  background: var(--cream); padding: 3.5rem 2rem 3rem;
  border-bottom: 1px solid var(--border);
}
.page-header-inner { max-width: 1100px; margin: 0 auto; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-light);
  text-decoration: none; margin-bottom: 1.75rem; transition: color 0.2s;
}
.back-link:hover { color: var(--accent-text); }
.page-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.6rem;
}
.page-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; letter-spacing: -0.02em; color: var(--text-dark);
  margin-bottom: 0.75rem; line-height: 1.15;
}


/* ── SHARED RESPONSIVE: buttons/actions rows always centered on mobile ──
   Several different components (CTA strips, book purchase buttons, post
   footer links) use a "row of buttons" pattern. On mobile they should
   all behave the same way: centered as a group, no lopsided left-hugging. */
@media (max-width: 900px) {
  .main-nav  { display: flex !important; flex-direction: column; }
  .hamburger { display: flex; }
  .main-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;

    position: absolute;
    top: calc(64px + 8px);
    left: 12px;
    right: 12px;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 8px;
    gap: 0;
    z-index: 99;
  }
   .main-nav:not(.mobile-open) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
  .main-nav.mobile-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
   .main-nav a {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-mid);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    min-height: 44px;
    transition: background 0.15s, color 0.15s;
  }
   .main-nav a:hover      { background: var(--cream); color: var(--text-dark); }
   .main-nav a.active     { color: var(--accent-text); background: var(--accent-light); font-weight: 700; }
   .main-nav li { list-style: none; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0 1.25rem; }
  .page-header { padding: 2.5rem 1.25rem 2rem; }
  .page-header-inner { padding: 0 1.2rem; }
}