/* =============================================================
   Jari Kuikanmäki — Custom Stylesheet
   -------------------------------------------------------------
   This file ONLY holds the custom design tokens, fonts, and a
   few helper classes that Tailwind (loaded via CDN in the HTML
   files) cannot do out of the box.

   Most layout, spacing, and responsiveness is handled by
   Tailwind utility classes directly inside index.html and
   origins.html. So if you want to tweak a layout, look there.

   Tweak THIS file when you want to change:
     • Brand colors
     • Fonts
     • The accent / underline used by .eyebrow
     • The shadow under the book cover
   ============================================================= */


/* -------------------------------------------------------------
   1. WEB FONTS
   -------------------------------------------------------------
   We load two Google Fonts:
     • Inter         → body text (clean, neutral)
     • Space Grotesk → headlines (slightly more characterful)
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');


/* -------------------------------------------------------------
   2. DESIGN TOKENS (CSS variables)
   -------------------------------------------------------------
   Change a value here and it updates everywhere on the site.
   Colors are written as HSL triplets (no `hsl()` wrapper) so
   they can be used with opacity like  hsl(var(--accent) / 0.2)
   ------------------------------------------------------------- */
:root {
  --background:          0 0% 100%;   /* page background — white       */
  --foreground:          0 0% 8%;     /* primary text — near black     */
  --muted-foreground:    0 0% 38%;    /* secondary text — gray         */
  --card:                0 0% 97%;    /* light gray section background */
  --border:              0 0% 88%;    /* hairline borders              */
  --accent:              0 75% 45%;   /* brand red (eyebrows, accents) */

  --amazon-yellow:       #FF9900;     /* "Pre-order on Amazon" button  */
  --radius:              0.375rem;    /* default rounded-corner size   */
}


/* -------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: hsl(var(--background));
  color:      hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}


/* -------------------------------------------------------------
   4. UTILITY CLASSES
   -------------------------------------------------------------
   These small reusable classes are referenced from the HTML.
   ------------------------------------------------------------- */

/* Centered page-width container with side padding.
   Mobile: 1.5rem padding. Tablet+: 2rem padding. */
.container-narrow {
  width: 100%;
  max-width: 72rem;        /* ~1152px — comfortable reading width */
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 640px) {
  .container-narrow { padding-inline: 2rem; }
}

/* Small uppercase label with a short red underline before it
   (used above section titles, e.g. "About the Book"). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
.eyebrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: hsl(var(--accent));
}
/* Variant: centers the eyebrow's underline + text (used in CTA blocks) */
.eyebrow-center { justify-content: center; }


/* -------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------
   The .btn-* classes give us shadcn-style buttons in plain CSS.
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;            /* matches "lg" size from the React app */
  padding: 0 1.5rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  cursor: pointer;
  white-space: nowrap;
}

/* Solid black primary button */
.btn-primary {
  background: hsl(var(--foreground));
  color:      hsl(var(--background));
  border: 1px solid hsl(var(--foreground));
}
.btn-primary:hover { background: hsl(var(--foreground) / 0.9); }

/* Outlined / secondary button */
.btn-outline {
  background: transparent;
  color:      hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
.btn-outline:hover { background: hsl(var(--card)); }

/* Amazon-branded yellow button with black text */
.btn-amazon {
  background: var(--amazon-yellow);
  color: #000;
  border: 1px solid var(--amazon-yellow);
}
.btn-amazon:hover { background: #e68a00; border-color: #e68a00; }


/* -------------------------------------------------------------
   6. BOOK COVER SHADOW
   -------------------------------------------------------------
   Soft, slightly red-tinted shadow that sits under the book.
   ------------------------------------------------------------- */
.book-cover-shadow {
  box-shadow: 0 25px 60px -15px hsl(var(--foreground) / 0.45);
  border: 1px solid hsl(var(--border) / 0.4);
}


/* -------------------------------------------------------------
   7. STICKY HEADER STATE
   -------------------------------------------------------------
   JavaScript adds the .scrolled class once the user has scrolled
   more than 8px down the page. We use it to fade in a subtle
   background + bottom border on the header.
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid transparent;
  background: hsl(var(--background));
  transition: background-color 300ms, border-color 300ms, backdrop-filter 300ms;
}
.site-header.scrolled {
  border-bottom-color: hsl(var(--border));
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* -------------------------------------------------------------
   8. MOBILE MENU
   -------------------------------------------------------------
   The mobile menu starts hidden (display:none) and the JS
   toggles `.open` to show it. We only need this on small screens
   because Tailwind's `md:flex` shows the desktop nav from 768px+.
   ------------------------------------------------------------- */
.mobile-menu        { display: none; }
.mobile-menu.open   { display: block; }

/* Hamburger -> X animation */
.hamburger span {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: hsl(var(--foreground));
  transition: transform 200ms, opacity 200ms;
}
.hamburger span + span { margin-top: 5px; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg);  }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* -------------------------------------------------------------
   9. IMAGE SAFETY NET
   -------------------------------------------------------------
   Make sure NO image ever overflows or stretches its container,
   regardless of the width/height attributes set in the HTML.
   This is what fixes the "1800px tall image" bug.
   ------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------
   10. SOURCES
   -------------------------------------------------------------

    /* ---------- Chapter index list (inline, "|"-separated) ---------- */
    #chapter-list {
      margin: 0 0 2rem;
      padding: 0.75rem 0;
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      line-height: 1.9;       /* breathing room when links wrap to new lines */
      word-spacing: 0.15rem;  /* small visual gap around the "|" separators */
    }
    
    #chapter-list a {
      color: #0645ad;
      text-decoration: none;
    }
    
    #chapter-list a:hover,
    #chapter-list a:focus {
      text-decoration: underline;
    }
    
    #chapter-list a.active {
      font-weight: 600;
      color: #111;
    }

    /* ---------- Sources output ---------- */
    #sources-output {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid #e5e5e5;
      word-wrap: break-word;
    }
    #sources-output a { color: #0645ad; text-decoration: none; }
    #sources-output a:hover { text-decoration: underline; }
    .status { color: #666; font-style: italic; }
    .error { color: #b00020; }