/* ==================================================================
   Frida Camden — V1 Camden Terracotta theme (site-wide)
   ------------------------------------------------------------------
   Adopted as the official site palette (replacing legacy Fiesta).
   Loaded on every page via includes/header.php and overrides the
   :root tokens defined in css/style.css plus a handful of selectors
   that hardcode the previous navy hex.
   Three layers of work:
     1. Token map  → swaps :root vars (rosa/naranja/amarillo/etc.)
     2. Surfaces   → multi-layer gradients on body/hero-dark/menu-hall/footer
     3. Polish     → em-gradient, eyebrow color, depth shadows, hairlines,
                     card surfaces, footer crown, hero drop shadow
================================================================== */

/* ============================================================ */
/* 1. TOKEN MAP — V1 Camden Terracotta tokens override Fiesta   */
/* ============================================================ */
body{
  --rosa:#D85A30;
  --rosa-dk:#A53D1B;
  --rosa-lt:#E87A55;
  --naranja:#A53D1B;
  --naranja-lt:#C45F3A;
  --amarillo:#E8B547;
  --turquesa:#1F4D4A;
  --turquesa-dk:#163634;
  --morado:#1B3A6B;
  --cream:#F4DCC0;
  --warm:#EFD0AE;
  --bg:#F4DCC0;
  --panel:#FFFFFF;
  --ink:#1A1714;
  --ink-2:#2A2520;
  --muted:#6b5d50;
  --line:#E0C39E;
  --gradient-fiesta:linear-gradient(135deg,#D85A30 0%,#A53D1B 55%,#E8B547 100%);
  --ann-bg-fiesta:linear-gradient(135deg,#D85A30 0%,#A53D1B 55%,#E8B547 100%);
  --ann-bg-rosa:linear-gradient(135deg,#A53D1B 0%,#D85A30 100%);
  --ann-bg-naranja:linear-gradient(135deg,#A53D1B 0%,#D85A30 100%);
  --ann-bg-amarillo:linear-gradient(135deg,#D69A2A 0%,#E8B547 100%);
  --ann-bg-turquesa:linear-gradient(135deg,#163634 0%,#1F4D4A 100%);
}

/* ============================================================ */
/* 2. SURFACES — orange-themed gradients replace hardcoded navy */
/* ============================================================ */

/* Pages that opt into the dark hero theme (body.hero-dark on every
   non-home page) — full-page multi-layer orange substance with a
   spotlight at the top. background-attachment:fixed anchors the
   gradient to the viewport so it survives long-scroll pages. */
body.hero-dark{
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,180,120,.22) 0%, transparent 55%) fixed,
    linear-gradient(180deg,#D5673B 0%,#A53D1B 45%,#5C1F0E 100%) fixed;
}

/* Menu page tall hall (separate scroll-attached gradient because
   .menu-hall has its own collage stack and the body gradient is
   hidden behind it). */
.menu-hall{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,180,120,.20) 0%, transparent 60%),
    linear-gradient(180deg,#D5673B 0%,#A53D1B 50%,#5C1F0E 100%);
}

/* Menu hall overlay — terracotta tint with darker bookends, replaces
   the original navy-fiesta-pink gradient. */
.menu-hall-overlay{
  background:linear-gradient(180deg,
    rgba(26,23,20,.55) 0%,
    rgba(165,61,27,.30) 25%,
    rgba(216,90,48,.42) 60%,
    rgba(26,23,20,.7) 100%);
}

/* Menu page — Breakfast & Lunch banner glass card (V1).
   Replaces the original 8% Fiesta pink/yellow gradient that was
   nearly invisible on the V1 terracotta hall. Cream→marigold tint
   at moderate opacity + blur lets the side-collage photos read as
   warm atmospheric glow behind the card while keeping the small
   eyebrow + h2 + paragraph copy clearly legible. Uses the same
   border-top marigold accent as legal-page + band-card--catering. */
.menu-bl-banner{
  background:
    linear-gradient(135deg, rgba(244,220,192,.16) 0%, rgba(232,181,71,.12) 100%);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(244,220,192,.42);
  border-top:1.5px solid rgba(232,181,71,.6);
  box-shadow:
    0 12px 32px rgba(26,23,20,.32),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Home dark bands (KOKO + Catering, See-the-Menu, Marquee) — each
   gets its own per-section multi-layer gradient so the page reads
   as a stack of lit terracotta panels rather than a flat slab. */
.home-band{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,180,120,.18) 0%, transparent 70%),
    linear-gradient(180deg,#B14828 0%,#A53D1B 50%,#5C1F0E 100%);
}
.home-menu-band{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,180,120,.16) 0%, transparent 65%),
    linear-gradient(180deg,#8E3414 0%,#A53D1B 50%,#5C1F0E 100%);
}
.marquee{
  background:linear-gradient(90deg,#7A2A14 0%,#B14828 50%,#7A2A14 100%);
  color:#F4DCC0;
}

/* Catering page — top carousel hero (covered by image slides; visible at
   edges + gaps) + bottom enquiry form section (large slab). Both used
   hardcoded navy. */
.catering-marquee-section{
  background:linear-gradient(180deg,#A53D1B 0%,#5C1F0E 100%);
}
.catering-form-section{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,180,120,.20) 0%, transparent 60%),
    linear-gradient(180deg,#D5673B 0%,#A53D1B 50%,#5C1F0E 100%);
}

/* Story page — section had hardcoded `background-color:#1a1a2e` (old navy)
   that masked body.hero-dark's terracotta. Override to V1 multi-layer
   terracotta. The Frida-logo watermark (::before, opacity .55) remains
   on top via z-index:0. The ::after overlay's navy/rosa gradient gets
   swapped to ink/terracotta tones so the page reads V1 end-to-end.
   (Brightness toned down vs others: top stop #B14828 instead of #D5673B,
   radial highlight .14 instead of .20, ::after slightly denser at top.) */
.story-bg-section{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,180,120,.14) 0%, transparent 60%),
    linear-gradient(180deg,#B14828 0%,#8E3414 55%,#5C1F0E 100%);
}
.story-bg-section::after{
  background:linear-gradient(180deg,
    rgba(26,23,20,.45) 0%,
    rgba(92,31,14,.30) 50%,
    rgba(26,23,20,.65) 100%);
}

/* "Our Events" cards section — `--events-bg` URL inline'da set edilmemiş,
   sadece hardcoded navy görünüyordu. V1 multi-layer terracotta + warm overlay. */
.events-grid-section{
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,180,120,.20) 0%, transparent 60%),
    linear-gradient(180deg,#D5673B 0%,#A53D1B 50%,#5C1F0E 100%);
}
.events-grid-section::after{
  background:linear-gradient(180deg,
    rgba(26,23,20,.35) 0%,
    rgba(165,61,27,.20) 50%,
    rgba(26,23,20,.55) 100%);
}

/* Legal pages (Privacy + Terms) — wrap content in a glass card on the V1
   terracotta bg so they harmonize with the rest of the site (used to be
   plain dark text on cream — felt out of theme). The body now has class
   `legal-page-body hero-dark` (set in index.php) so the orange-gradient
   page bg already kicks in via body.hero-dark; here we restyle the inner
   `.legal-page` content area into a glass card with white-cream text. */
body.legal-page-body .legal-page{
  padding:clamp(60px,8vh,100px) 0 clamp(80px,10vh,140px);
}
body.legal-page-body .legal-page .container{
  max-width:820px;
  background:rgba(255,248,225,.10);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  border-top:2px solid rgba(232,181,71,.55);
  border-radius:24px;
  padding:clamp(28px,4vw,56px);
  box-shadow:0 22px 55px rgba(26,23,20,.4), inset 0 1px 0 rgba(255,255,255,.18);
}
body.legal-page-body .legal-page p,
body.legal-page-body .legal-page li{
  color:rgba(255,255,255,.92);
}
body.legal-page-body .legal-page h2{
  color:#fff;
}
body.legal-page-body .legal-page .legal-head{
  text-align:center;
  margin:0 0 2.4rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid rgba(244,220,192,.22);
}
body.legal-page-body .legal-page .legal-head .eyebrow{
  color:#F4DCC0;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:600;
  display:inline-block;
  margin-bottom:.4rem;
}
body.legal-page-body .legal-page .legal-head h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  color:#fff;
  margin:.2rem 0 .6rem;
  line-height:1.1;
}
body.legal-page-body .legal-page .legal-head h1 em{
  font-style:italic;
  background:linear-gradient(135deg,#FAF6EE 0%,#E8B547 50%,#FAF6EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.legal-page-body .legal-page .legal-updated{
  color:rgba(255,255,255,.65);
  font-size:.88rem;
  margin:0;
}
body.legal-page-body .legal-page strong{
  color:#E8B547;
}
body.legal-page-body .legal-page a{
  color:#F4DCC0;
  border-bottom:1px solid rgba(244,220,192,.45);
  text-decoration:none;
  transition:.18s ease;
}
body.legal-page-body .legal-page a:hover{
  color:#E8B547;
  border-bottom-color:#E8B547;
}

/* Menu page mobile — collage food photos (cg-3..cg-10) were invisible because:
   1. `.menu-glass{ margin:0 -6px }` extended glass past viewport, covering ALL
      peek zones (no gutter for photos).
   2. `backdrop-filter:blur(14px)` dissolved any photo behind glass.
   3. Food photos (warm red/orange tones) blended into V1 terracotta bg.
   4. `.menu-hall-overlay` rgba(26,26,46,.42) at 60% darkened photos to invisibility.
   Layered fix: wider gutter, lighter blur, photo outline + saturation boost,
   softer overlay so peek zones read as actual food. */
@media (max-width:768px){
  /* Photos peek along the entire menu-hall scroll length (mobile accordion
     stacks single-column so the hall is ~3-4× taller than desktop). Use
     percentages of menu-collage so all 6 rows distribute across the full
     scroll height instead of clustering in the first viewport. */

  .menu-glass{
    margin:0 36px;
    backdrop-filter:blur(6px) saturate(160%);
    -webkit-backdrop-filter:blur(6px) saturate(160%);
  }
  /* Photos: high-contrast outline + saturation boost so they pop against the
     warm V1 bg even with the residual blur from the glass card. Opacity .72
     so they read as atmospheric warm shapes without competing with the menu
     text inside the glass card. */
  .menu-collage .cg{
    filter:saturate(1.3) brightness(1.08) contrast(1.06);
    box-shadow:0 8px 24px rgba(0,0,0,.55), 0 0 0 3px rgba(244,220,192,.45);
    opacity:.72;
  }
  /* Un-hide the photos that were `display:none` on mobile so we can show
     all 6 rows like desktop does (12 photos: 6 left + 6 right).
     cg-3/4 + cg-9/10 specifically un-hidden at ≤480px (style.css:1165
     hides them there) so we get full coverage: row-3/4 fills the gap
     between top (cg-1/2) and Salads (cg-5/6) — banner / Main Menu /
     chips zone — and row-9/10 fills between Grills (cg-7/8) and the
     bottom (cg-11/12). */
  .cg-3, .cg-4, .cg-5, .cg-6, .cg-9, .cg-10, .cg-11, .cg-12{display:block !important}
  /* All side photos pulled to peek past the glass card gutter. */
  .cg-1, .cg-3, .cg-5, .cg-7, .cg-9,  .cg-11{left:-14% !important}
  .cg-2, .cg-4, .cg-6, .cg-8, .cg-10, .cg-12{right:-14% !important}
  /* 6 rows distributed across the full menu-hall height (% of collage,
     which spans the whole hall via base inset:0). Photos peek at side
     gutters at every scroll depth — top of page → middle → bottom. */
  .cg-1,  .cg-2  {top: 4%  !important}
  .cg-3,  .cg-4  {top: 21% !important}
  .cg-5,  .cg-6  {top: 38% !important}
  .cg-7,  .cg-8  {top: 55% !important}
  .cg-9,  .cg-10 {top: 72% !important}
  .cg-11, .cg-12 {top: 88% !important}
  /* Soften the mid-range overlay tint that was washing photos into the bg. */
  .menu-hall-overlay{
    background:linear-gradient(180deg,
      rgba(26,23,20,.45) 0%,
      rgba(165,61,27,.18) 25%,
      rgba(165,61,27,.22) 60%,
      rgba(26,23,20,.55) 100%);
  }
}

/* Footer (global) — vertical gradient descending into deep umber.
   The site's existing fiesta-gradient border-image painted on top. */
footer{
  background:#A53D1B;
  background-image:linear-gradient(180deg,#A53D1B 0%,#5C1F0E 100%),var(--gradient-fiesta);
}

/* Hero video overlay (home only — element scoped) — Mezcal-Black
   bookends with subtle orange middle so video poster + buttons read. */
.hero-overlay{
  background:linear-gradient(180deg,
    rgba(26,23,20,.18) 0%,
    rgba(165,61,27,0)  35%,
    rgba(26,23,20,.35) 65%,
    rgba(26,23,20,.85) 100%);
}

/* ============================================================ */
/* 3. POLISH — readability + visual depth (site-wide)           */
/* ============================================================ */

/* Heading em-gradient — replace the orange-orange-marigold gradient
   (which becomes invisible on Deep Frida sections at the middle
   stop) with a cream→marigold→cream sweep that reads on every
   surface (light cream pages, dark orange sections, photo-bg heroes). */
.band-card h2 em,
.band-card h3 em,
.home-menu-band em,
.menu-intro h1 em,
.menu-section-title h2 em,
.menu-bl-banner h2 em,
.menu-glass em,
.story-glass--prose h1 em,
.story-glass--prose h2 em,
.reservation-intro h1 em,
.mesa-hero h1 em,
.events-intro h1 em,
.contact-intro h1 em,
.page-hero h1 em{
  background:linear-gradient(135deg,#FAF6EE 0%,#E8B547 50%,#FAF6EE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Eyebrow / small uppercase labels on dark surfaces — Marigold on
   Deep Frida is ~3.4:1 (AA-fail). Warm peach cream → ~11:1. */
body.hero-dark .eyebrow,
.band-card .eyebrow,
.home-menu-band .eyebrow,
.menu-intro .eyebrow,
.menu-bl-banner .eyebrow,
.story-glass--prose .eyebrow,
.reservation-intro .eyebrow,
.mesa-hero .eyebrow,
.events-intro .eyebrow,
.contact-intro .eyebrow{
  color:#F4DCC0;
  opacity:.92;
}

/* Body copy on dark sections — bump from .85 to .92 for sharper
   read on saturated terracotta. */
.band-card .lead,
.home-band p:not(.band-note){
  color:rgba(255,255,255,.92);
}
.band-card p,
.home-menu-band p{
  color:rgba(255,255,255,.86);
}

/* Catering / Breakfast card surface — recessed burnt-orange panel
   with warm-peach hairline + marigold top edge so the card visually
   separates from the surrounding band. */
.band-card--catering{
  background:rgba(92,31,14,.55);
  border:1px solid rgba(244,220,192,.35);
  border-top:2px solid rgba(232,181,71,.7);
  box-shadow:0 12px 32px rgba(26,23,20,.35);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

/* ============================================================ */
/* DEPTH — section dividers + transitional shadows              */
/* ============================================================ */

/* Inset shadow at TOP + bottom of each major orange section
   (home bands + menu hall) — sections feel "set into" the page
   rather than painted on a flat wall. */
.home-band,
.home-menu-band,
.menu-hall{
  position:relative;
  box-shadow:
    inset 0  14px 32px -14px rgba(26,23,20,.65),
    inset 0 -14px 32px -14px rgba(0,0,0,.40);
}

/* Marigold hairline accents at section boundaries — gradient-fade
   so they don't read as hard rules. */
.home-band::after,
.home-menu-band::after,
.marquee::after,
.marquee::before{
  content:'';
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(232,181,71,.55) 30%,
    rgba(232,181,71,.55) 70%,
    transparent 100%);
  pointer-events:none;
}
.home-band::after,
.home-menu-band::after,
.marquee::after{ bottom:0; }
.marquee::before{ top:0; }

/* Carousel on home — drop the crude peach borders, use layered
   shadows for a "lifted band" feel between the dark hero and the
   orange CTA below. */
.gallery-hero--home{
  position:relative;
  box-shadow:
    0 -10px 30px rgba(122,42,20,.45),
    0  10px 30px rgba(122,42,20,.45);
}

/* Footer top edge — bolder marigold/cream crown marking the end
   of the page content, layered above the existing fiesta border. */
footer{
  position:relative;
}
footer::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    #E8B547 25%,
    #FAF6EE 50%,
    #E8B547 75%,
    transparent 100%);
  z-index:2;
  pointer-events:none;
}

/* Hero video bottom — soft Mezcal Black drop into the marquee for
   layered transition (no hard line between video edge + ticker). */
.hero--video{
  position:relative;
}
.hero--video::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:48px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(26,23,20,.45) 100%);
  pointer-events:none;
  z-index:2;
}

/* ============================================================ */
/* FOOTER LINK + BAND-NOTE polish                               */
/* ============================================================ */

/* Footer column links — quiet warm-peach default, marigold glow on
   hover. Applies to every page since footer is global. */
footer .footer-col a{
  color:rgba(244,220,192,.85);
}
footer .footer-col a:hover{
  color:#E8B547;
}

/* Band-note phone link (home KOKO band) — warm peach with clearer
   underline so it reads as tappable. */
.band-note a{
  color:#F4DCC0;
  border-bottom-color:rgba(244,220,192,.55);
}
.band-note a:hover{
  color:#E8B547;
  border-bottom-color:#E8B547;
}