/* GraceNote Collective — Design System Tokens
   All pages link to this file for shared custom properties.
   ──────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

:root {
  /* ── Typography ─────────────────────────────────────── */
  --font-display:  'Montserrat', system-ui, sans-serif;
  --font-eyebrow:  'Montserrat', system-ui, sans-serif;
  --font-body:     'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-quote:    'Georgia Pro Condensed Light', 'Georgia Pro Condensed', 'Georgia Pro', Georgia, serif;

  --fs-eyebrow: 11px;

  /* ── Cream palette ──────────────────────────────────── */
  --cream-50:  #FAF5EA;
  --cream-100: #F0EBE0;
  --cream-200: #E8E3D8;
  --cream-300: #D9D4CA;

  /* ── Gold palette ───────────────────────────────────── */
  --gold-50:  #FDF9EE;
  --gold-200: #FFEC80;
  --gold-300: #FFE14D;
  --gold-400: #FFD700;
  --gold-500: #F5C000;
  --gold-600: #D4A017;
  --gold-700: #A07820;

  /* ── Ink palette (warm dark) ────────────────────────── */
  --ink-500: #8A847B;
  --ink-600: #7C766D;
  --ink-700: #5C5750;
  --ink-800: #3A3835;
  --ink-900: #2B2A28;
  --ink-950: #1C1B1A;

  /* ── Green palette ──────────────────────────────────── */
  --green-50:  #F0FDF4;
  --green-500: #22C55E;

  /* ── Semantic surface tokens ────────────────────────── */
  --surface:         #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--cream-100);

  /* ── Semantic text tokens ───────────────────────────── */
  --text-body:   var(--ink-700);
  --text-muted:  var(--ink-500);
  --text-strong: var(--ink-900);

  /* ── Semantic border / divider tokens ───────────────── */
  --border:        var(--cream-300);
  --border-strong: var(--ink-700);
  --divider:       var(--cream-200);

  /* ── Link ───────────────────────────────────────────── */
  --link: var(--gold-700);

  /* ── Border radii ───────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(28, 27, 26, 0.10);
  --shadow-sm: 0 2px 6px rgba(28, 27, 26, 0.12);
  --shadow-md: 0 4px 16px rgba(28, 27, 26, 0.14);
  --shadow-lg: 0 8px 32px rgba(28, 27, 26, 0.18);

  /* ── Motion ─────────────────────────────────────────── */
  --dur:      200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.gn-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────
   Mobile responsiveness layer
   The site uses React inline styles, so we override common
   desktop-only patterns here using attribute selectors. These
   rules only apply at ≤768px — desktop layout is unchanged.
   ───────────────────────────────────────────────────────────── */

/* Header mobile-nav scaffolding — always present in DOM, visibility flipped per breakpoint. */
.gn-mobile-menu-btn { display: none; }
.gn-mobile-drawer { display: none; }

@media (max-width: 768px) {
  /* Never let images push the page wider than the viewport. */
  img { max-width: 100%; height: auto; }

  /* Long unbroken strings (emails, URLs) should wrap on narrow screens. */
  body { overflow-wrap: break-word; word-wrap: break-word; }
  body, #root { overflow-x: hidden; }

  /* Inline whiteSpace:nowrap (e.g. the home-hero eyebrow) overflows on phones — let it wrap. */
  [style*="nowrap"] { white-space: normal !important; }

  /* Collapse hardcoded 2-column inline grids to a single column.
     These match the fr-ratio patterns used on Home / Auditions / Booking /
     About / Program. repeat(auto-fit, minmax(...)) grids already collapse on
     their own. */
  [style*="grid-template-columns"][style*="1.3fr"],
  [style*="grid-template-columns"][style*="1.4fr"],
  [style*="grid-template-columns"][style*="1.25fr"],
  [style*="grid-template-columns"][style*="0.6fr"],
  [style*="grid-template-columns"][style*="0.85fr"],
  [style*="grid-template-columns"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Header: swap the inline horizontal nav for the hamburger drawer. */
  .gn-nav-desktop { display: none !important; }
  .gn-mobile-menu-btn { display: inline-flex !important; }
  .gn-mobile-drawer.gn-open { display: flex !important; }

  /* Footer top row stacks naturally (flex-wrap already set); center the copy block on phones. */
  footer [style*="space-between"] { justify-content: center !important; text-align: center; }
  footer [style*="space-between"] > div { max-width: 100% !important; }
  footer [style*="flex-direction:column"][style*="flex-start"],
  footer [style*="flex-direction: column"][style*="flex-start"] { align-items: center !important; }

  /* Schedule card date column gets a little tighter so two-digit dates breathe. */
  [style*="border-right"][style*="cream-300"] { padding-right: 12px !important; }

  /* Home > Who Are We: when the 2-col grid collapses, leave the left-column
     paragraphs in their natural left-aligned reading flow, and keep the right
     column (quote + button) center-aligned. The quote font also clamps smaller
     so it can't overflow the viewport. */
  .gn-who-grid > div:first-child { text-align: left !important; }
  .gn-who-grid > div:last-child { text-align: center !important; }
  .gn-who-grid .gn-quote {
    font-size: clamp(1.25rem, 5.5vw, 1.8rem) !important;
    line-height: 1.3;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Hide purely decorative absolutely-positioned bits that overlap content
     once the columns stack (e.g. the dotted-triangle on Home > What to Know). */
  [aria-hidden="true"][style*="position: absolute"][style*="right: 0"][style*="bottom"],
  [aria-hidden="true"][style*="position:absolute"][style*="right:0"][style*="bottom"] {
    display: none !important;
  }
  /* Belt-and-suspenders for the DottedTriangle (the SVG/div wrapper has no
     aria-hidden in some renderings — match by its right/bottom anchoring inline). */
  section [style*="position: absolute"][style*="right: 0"][style*="bottom: -10px"],
  section [style*="position:absolute"][style*="right:0"][style*="bottom:-10px"] {
    display: none !important;
  }

  /* Long body copy / quotes: force wrapping inside any container, so nothing
     bleeds past the section's right padding on narrow phones. */
  p, h1, h2, h3, h4, .gn-quote, blockquote, li {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Defensive: in the unlikely event a clamped grid-template-columns string
     uses spaces the attribute selector didn't anticipate, also force any
     element styled with two inline-defined grid columns of fr units down to one. */
  [style*="minmax(0, 1.3fr)"],
  [style*="minmax(0, 1.4fr)"],
  [style*="minmax(0, 1.25fr)"],
  [style*="minmax(0, 0.6fr)"],
  [style*="minmax(0, 0.85fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Very small phones (<400px): trim section side padding further so cards don't feel cramped. */
@media (max-width: 400px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
}