/* ==========================================================================
   FestivalLuts — Apple HIG & Universal Workstation Design System
   Grounded in apple1.md & apple2.md guidelines.
   ========================================================================== */

:root {
  /* Dark Colorist Slate Palette & Deep Zinc Base */
  --bg-base: #09090B;
  --bg-surface: #18181B;
  --bg-elevated: #27272A;
  --bg-card: #18181B;
  --bg-glass: rgba(0, 0, 0, 0.4);
  
  /* Border & Light Catching Accents */
  --border-light: rgba(255, 255, 255, 0.1);
  --border-active: rgba(255, 255, 255, 0.22);
  --border-accent: rgba(10, 132, 255, 0.4);
  
  /* Text & Readability Tokens */
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  /* Was #71717A: 4.12:1 on the page and 3.67:1 on a card — under the 4.5:1 that
     google-accessibility.md and apple1.md both require for text under 18pt. It
     carries the breadcrumb (12.8px), the Academy note prose (14px), the footer
     titles and tagline, and .card-meta on /browse, so it failed in six places at
     once. #8A8A93 measures 5.81:1 and 5.18:1. */
  --text-muted: #8A8A93;
  --text-accent: #0A84FF;
  
  /* Accents & Status */
  --accent-blue: #0A84FF;
  /* A filled surface carrying WHITE text needs a different blue from a blue used as
     text on a dark ground. #0A84FF under white measures 3.65:1 — below the 4.5:1
     google-accessibility.md and apple1.md both require for text under 18pt — and it was
     the fill on every primary button: Search, 28 download buttons on /browse, the CTA on
     every detail page. Apple's own #007AFF does not fix it either (4.02:1). #0A6FD0
     gives the label 5.00:1 and still clears 3:1 against the page ground for 1.4.11.
     --accent stays #0A84FF for text and borders, where it measures 5.45:1. */
  --accent-fill: #0A6FD0;
  --accent-fill-hover: #0961B8;
  --accent-cyan: #64D2FF;
  --accent-green: #30D158;
  --accent-purple: #BF5AF2;
  
  /* Translucent Glass Material (Apple Blur 24px) */
  --glass-backdrop: blur(24px) saturate(150%);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  
  /* Springs & Motion Defaults */
  --spring-duration: 0.35s;
  --spring-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --press-duration: 100ms;
}

/* Exact Design Token Utility Classes */
.kicker-sublabel {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  color: #71717A !important;
}

.heading-tight {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.08;
}

.bg-deep-zinc {
  background-color: #09090B !important;
}

.glass-navbar-blur {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Base Body Workstation Styling */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* Glass Navigation Bar */
.apple-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-glass);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--spring-duration) var(--spring-easing);
}

.apple-nav-container {
  /* 1200 to match .container in style.css. At 1280 the nav sat 40px wider than
     every content container on the site, so the logo never lined up with the
     content beneath it — three different left edges on one page (nav 77px,
     content 167px, footer 117px at a 1440 viewport). google-layout.md calls these
     rulers: "global alignment lines that create consistent focal points and keep
     content aligned across a product." */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apple-logo {
  display: flex;
  align-items: center;
  /* No `gap` here: "Festival" is a bare text node, so flex makes it its own
     anonymous item and the gap opened up between "Festival" and <span>Luts</span>
     as well as after the mark. The mark gets its own margin instead. */
  gap: 0;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
}

.apple-logo svg {
  color: var(--accent-blue);
}

.apple-nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.apple-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 150ms ease;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.apple-nav-links a:hover {
  color: var(--text-primary);
}

/* Hero & Workstation Section */
.apple-hero {
  position: relative;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.apple-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(10, 132, 255, 0.12);
  border: 1px solid rgba(10, 132, 255, 0.3);
  color: var(--accent-cyan);
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}

.apple-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  /* Solid, not a white→grey background-clip gradient. The gradient read as a
     generic template treatment and washed the title to mid-grey at the descenders. */
  color: var(--text-primary, #FAFAFA);
}

.apple-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 2rem;
  font-weight: 400;
}

/* Monospaced HUD Badge Token */
.hud-tag {
  font-family: "SF Mono", "JetBrains Mono", monospace;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Apple Buttons & Touch Feedback */
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  /* font-family/line-height/box-sizing are set explicitly so a <button> and an
     <a> with the same class render identically. A bare <button> does NOT inherit
     the page font, so "Upload" was rendering in the UA sans-serif — wider than
     the <a> "Browse" beside it, which is what made the hero pair mismatch. */
  font-family: inherit;
  line-height: 1;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform var(--press-duration) ease-out, background var(--spring-duration) var(--spring-easing), box-shadow 200ms ease;
  user-select: none;
}

.apple-btn:active {
  transform: scale(0.97);
}

.apple-btn-primary {
  background: var(--accent-fill);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
}

.apple-btn-primary:hover {
  background: var(--accent-fill-hover);
  box-shadow: 0 6px 20px rgba(10, 132, 255, 0.5);
}

.apple-btn-glass {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  backdrop-filter: var(--glass-backdrop);
}

.apple-btn-glass:hover {
  border-color: var(--border-active);
  background: var(--bg-elevated);
}

.apple-btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1.02rem;
}

/* Hero CTA pair — secondary to the search box above them, so they stay small
   and side by side at every width. Stacking them full-width is what pushed the
   search field off a 375px screen. */
.hero-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: -1.4rem 0 2rem;
}

.hero-actions .apple-btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  gap: 0.45rem;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .hero-actions .apple-btn { padding: 0.55rem 0.8rem; font-size: 0.82rem; }
}

/* ── Compact hero buttons ──
   Scoped to .hero-actions and placed after the rules above on purpose: a bare
   .apple-btn--sm is (0,1,0) and would lose to .hero-actions .apple-btn (0,2,0)
   no matter which stylesheet it lived in. Same specificity, later source, so
   these win — including inside the 380px query. */
.hero-actions .apple-btn--sm {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  gap: 6px;
}

.hero-actions--compact {
  gap: 0.5rem;
}

@media (max-width: 380px) {
  .hero-actions .apple-btn--sm { padding: 0.42rem 0.8rem; font-size: 0.78rem; }
}

/* Filter Bar & Camera Pills */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  padding: 0.5rem 1rem;
  border-radius: 99px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
}

.filter-pill:hover, .filter-pill.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

/* Card Grid & Workstation Surface */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.apple-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-shadow);
  transition: transform var(--spring-duration) var(--spring-easing), border-color 200ms ease, box-shadow 200ms ease;
}

.apple-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-active);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.card-preview-container {
  position: relative;
  width: 100%;
  height: 200px;
  background: #000;
  overflow: hidden;
}

.card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 1.1rem;
  /* 600, not 700. The ladder above a card title is .section-title--sub at 20px/700, and
     17.6px/700 sat only 2.4px below it at the SAME weight — a step you have to measure
     rather than see. apple2.md section 15: "Build hierarchy from weight + size + leading
     as a set, not size alone. Emphasize with weight." Dropping the weight separates the
     two ranks without moving a single box, which resizing would have done on every card
     on the site. */
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 1rem;
  flex: 1;
}

.card-hud-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-light);
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #FFD60A;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Bento Box Grid Layout System */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-backdrop);
  transition: transform var(--spring-duration) var(--spring-easing), border-color 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-active);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.bento-card-large {
  grid-column: span 2;
}

.bento-card-tall {
  grid-row: span 2;
}

@media (max-width: 992px) {
  .bento-card-large {
    grid-column: span 1;
  }
}

.bento-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.5rem 0 0.6rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.bento-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1;
}

/* Scrollytelling & Compatibility Matrix */
.compatibility-matrix {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.matrix-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.matrix-badge svg {
  color: var(--accent-blue);
}

/* Toast Notifications */
.apple-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-active);
  color: var(--text-primary);
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter: var(--glass-backdrop);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 2000;
  animation: toastIn 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Mobile nav — collapses to a hamburger under 768px. The toggle is driven by
   the existing #mobile-toggle handler in animations.js, which flips `.open`
   on #nav-links and maintains aria-expanded.
   ========================================================================== */
.apple-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
}

.apple-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
}

/* Bars morph into an X while the panel is open */
.apple-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apple-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apple-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .apple-nav-toggle { display: flex; }

  .apple-nav-container {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Collapsed by default; `.open` is added by animations.js */
  .apple-nav-links {
    order: 3;
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light, rgba(255,255,255,0.1));
  }

  .apple-nav-links.open { display: flex; }

  .apple-nav-links a {
    padding: 0.85rem 0.25rem;
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .apple-nav-links a + a {
    border-top: 1px solid var(--border-light, rgba(255,255,255,0.08));
  }
}

@media (min-width: 769px) {
  /* Never let a stale .open leak into the desktop layout */
  .apple-nav-links.open { display: flex; }
}


/* ─── Academy cards ───────────────────────────────────────────────────────────
   Used on the homepage Academy section and by /academy. Appended at the end of
   this file deliberately: apple-design.css loads after style.css and wins, and
   these modify .apple-card, so they must come after the rule they modify
   (SITE.md section 5).

   Colour discipline: --band names the workflow stage (blue exposure, purple the
   conversion mechanism, cyan computed figures, orange the catalogue and
   publishing, green the stills side). It appears only in a 2px top rule, the
   hover border, the hovered title and the tint behind a computed figure — never
   as a fill, never as body text. Nothing depends on hue alone to be legible.
   ------------------------------------------------------------------------- */
.home-academy-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 0; }
.home-academy-card { position: relative; padding: 1.2rem 1.3rem; gap: 0.4rem; text-decoration: none; color: inherit; }
/* No coloured bar across the top. Four saturated rules side by side on a landing page
   is decoration — the reader cannot tell what any of them means, which is the failure
   mode colour-as-category always has without a visible label. The hue now sits on a
   named kicker instead: the word carries the meaning, the colour only reinforces it,
   and a reader scanning the row reads Exposure / Conversion / Measured / Publishing
   rather than blue / purple / cyan / orange. */
/* Sentence case, not caps. google-writing.md is blunt about it — "Never title case.
   Never caps blocks (they aren't accessible)" — and at 10.9px caps strip the word-shape
   cues a reader scanning a four-card row relies on. The clincher is internal: the guide
   pages already render this label sentence-case ("Conversion", "Photography"), so the
   two surfaces disagreed. Tracking drops with the caps, per apple2.md: positive tracking
   is for small caps, not for sentence-case text. */
.home-academy-card .card-kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--band, var(--accent-blue)); display: inline-flex;
  align-items: center; gap: 0.4rem; margin-bottom: 0.15rem; }
.home-academy-card .card-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.9; }
.home-academy-card:hover { border-color: color-mix(in srgb, var(--band, #0A84FF) 45%, var(--border-light)); }
.home-academy-card .card-title { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.home-academy-card:hover .card-title { color: var(--band, var(--accent-blue)); }
.home-academy-card .card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; }
.home-academy-card .card-fact { margin-top: 0.55rem; align-self: flex-start; font-family: var(--font-mono); font-size: 0.7rem;
  /* Apple's system hues are not tone-matched — blue sits at L* 55.9, cyan at 79.6 — so
     one alpha recipe cannot serve all seven. Setting the text to the raw --band on a 12%
     --band tint measured 4.26:1 for blue and 4.37:1 for purple: both under AA, while
     orange/green/mint/cyan passed comfortably. Mixing 20% white into the text lifts the
     two failures to 5.51 and 5.65 without touching the tint, so the badge still reads as
     its band colour. google-color.md is explicit that a container fill value must never
     also be used for the text on it. */
  color: color-mix(in srgb, var(--band, #0A84FF) 80%, #FFFFFF);
  background: color-mix(in srgb, var(--band, #0A84FF) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--band, #0A84FF) 26%, transparent);
  padding: 0.22rem 0.45rem; border-radius: 6px; }

/* ─── Reduced motion for the Academy cards ───────────────────────────────────
   style.css already carries a global block that clamps animation and transition
   durations, and it explicitly nulls the hover lift for .lut-card:

       @media (prefers-reduced-motion: reduce) { .lut-card:hover { transform: none } }

   The Academy cards were added after that and were never covered, so under
   "reduce" they still translated 4px on hover — just faster. apple2.md section 14
   is explicit: under reduce, replace slides and springs with static or opacity
   transitions and drop overshoot. Same treatment as .lut-card, so the two card
   families behave identically, which is the Familiarity principle in section 16:
   things that look the same must behave the same.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .academy-card:hover,
  .home-academy-card:hover { transform: none; }
  .academy-card, .home-academy-card,
  .academy-card::before, .home-academy-card::before { transition: none; }
}

/* ─── Focus ─────────────────────────────────────────────────────────────────
   The site had ten :focus rules and every one was component-scoped — the preview
   canvas, the slider handle, form inputs. Nothing covered links, nav links or the
   Academy cards, so keyboard focus fell back to whatever the browser draws. That
   is not a WCAG 2.4.7 failure (UA rings are visible) but it is undesigned, and a
   default ring on a near-black page is both generic and, in Firefox, an amber that
   collides with the orange band.

   Ring colour is --band where one is in scope and --accent otherwise. Measured
   against both surfaces the ring can land on, the worst case is blue at 4.86:1 on
   a card — comfortably past the 3:1 that WCAG 1.4.11 asks of a focus indicator.

   :focus-visible, not :focus, so a pointer click does not paint a ring.
   ------------------------------------------------------------------------- */
.academy-card:focus-visible,
.home-academy-card:focus-visible,
.guide-content a:focus-visible,
.academy-hub a:focus-visible,
.nav-link:focus-visible,
.apple-logo:focus-visible {
  outline: 2px solid var(--band, var(--accent-blue));
  outline-offset: 3px;
  border-radius: 4px;
}
/* Cards already carry a 16px radius; match it so the ring hugs the shape. */
.academy-card:focus-visible,
.home-academy-card:focus-visible { border-radius: 16px; }