/*
 * ChillingCafe brand system
 * One palette for the entire site: capybara navy, warm ivory, logo gold,
 * and copper only for actions and states that need attention.
 */
:root {
  color-scheme: light;
  --order-sticky-nav-height: 0px;

  --brand-navy: #071A2C;
  --brand-navy-soft: #123650;
  --brand-ivory: #F5EFE4;
  --brand-ivory-bright: #FFF9EF;
  --brand-sand: #E7D9C4;
  --brand-gold: #D1A050;
  --brand-copper: #B55232;
  --brand-copper-deep: #87351F;
  --brand-muted: #625F59;
  --brand-rule: rgb(7 26 44 / .2);
  --brand-shadow: 0 24px 60px rgb(7 26 44 / .14);
  --brand-control-radius: .625rem;
  --brand-motion-fast: 160ms;
  --brand-motion-standard: 220ms;
  --brand-motion-ease: cubic-bezier(.2, .75, .25, 1);
  --brand-focus-ring: 0 0 0 3px rgb(209 160 80 / .38);

  /* Legacy shared stylesheet. */
  --paper: var(--brand-ivory);
  --paper-soft: var(--brand-ivory-bright);
  --paper-deep: var(--brand-sand);
  --olive: var(--brand-navy);
  --olive-soft: var(--brand-navy-soft);
  --olive-mist: #E9DECD;
  --copper: var(--brand-copper);
  --copper-soft: var(--brand-gold);
  --muted: var(--brand-muted);
  --line: var(--brand-rule);
  --shadow: var(--brand-shadow);

  /* Florentine and cinematic layers. */
  --florentine-ivory: var(--brand-ivory);
  --florentine-navy: var(--brand-navy);
  --florentine-gold: var(--brand-gold);
  --florentine-cocoa: var(--brand-copper-deep);
  --florentine-rule: rgb(209 160 80 / .72);
  --florentine-shadow: rgb(7 26 44 / .16);
  --cinematic-navy: var(--brand-navy);
  --cinematic-ink: #04111E;
  --cinematic-ivory: var(--brand-ivory);
  --cinematic-gold: var(--brand-gold);
  --cinematic-copper: var(--brand-copper);
  --cinematic-mist: #DDD2C0;
}

::selection {
  background: var(--brand-gold);
  color: var(--brand-navy);
}

body {
  background: var(--brand-ivory);
  color: var(--brand-navy);
}

:focus-visible {
  outline-color: var(--brand-gold);
}

/* Self-contained concept pages use the same night surface as the capybara mark. */
.immersive-body,
.story-body,
.hover-body {
  background: var(--brand-navy);
  color: var(--brand-ivory);
}

.immersive-page {
  background:
    radial-gradient(circle at 62% 42%, rgb(181 82 50 / .28), transparent 23%),
    radial-gradient(circle at 18% 82%, rgb(209 160 80 / .14), transparent 28%),
    var(--brand-navy);
}

.immersive-vignette {
  background:
    radial-gradient(circle at center, transparent 25%, rgb(4 17 30 / .16) 70%, rgb(4 17 30 / .72) 100%),
    linear-gradient(90deg, rgb(4 17 30 / .42), transparent 42%, rgb(4 17 30 / .26));
}

.immersive-button--primary {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-navy);
}

.immersive-button--quiet:hover {
  background: var(--brand-ivory);
  color: var(--brand-navy);
}

/* Ciao stays warm on light surfaces; the former green variables become navy. */
.ciao-body {
  background: var(--brand-ivory);
  color: var(--brand-navy);
}

.ciao-page {
  --ciao-ink: var(--brand-navy);
  --ciao-cream: var(--brand-ivory);
  --ciao-copper: var(--brand-copper);
  --ciao-rule: rgb(7 26 44 / .2);
  --ciao-quiet: rgb(7 26 44 / .72);
}

.ciao-opening::before { border-color: rgb(181 82 50 / .26); }
.ciao-opening::after { background: rgb(209 160 80 / .2); }
.ciao-button--secondary:hover { background: rgb(7 26 44 / .08); }
.ciao-opening__visual::before,
.ciao-chapter__visual::before { background: var(--ciao-scene, #E7D9C4); }
.ciao-rail { background: rgb(245 239 228 / .96); box-shadow: 0 8px 25px rgb(7 26 44 / .08); }
.ciao-chapter { --ciao-scene: #E6D7BE; }
.ciao-chapter[data-ciao-tone="espresso"] { --ciao-scene: #D7B27A; }
.ciao-chapter[data-ciao-tone="tea"] { --ciao-scene: #D5DDBE; }
.ciao-chapter[data-ciao-tone="bakery"] { --ciao-scene: #EAD2A5; }

/* Originkit previews and menu coverflow. */
.story-page {
  --story-ink: var(--brand-navy);
  --story-paper: var(--brand-ivory);
  --story-copper: var(--brand-gold);
  --story-muted: rgb(245 239 228 / .74);
}

.story-chapter--midday { background: var(--brand-navy-soft); }
.story-button:hover { background: var(--brand-gold); color: var(--brand-navy); }

.hover-page {
  --hover-ink: var(--brand-navy);
  --hover-ink-soft: var(--brand-navy-soft);
  --hover-paper: var(--brand-ivory);
  --hover-copper: var(--brand-gold);
  --hover-muted: rgb(245 239 228 / .72);
  --hover-line: rgb(245 239 228 / .22);
}

.hover-header__order:hover,
.hover-menu__all:hover { background: var(--brand-gold); color: var(--brand-navy); }
.hover-menu__image figcaption { background: rgb(7 26 44 / .9); }

.menu-hero:has(.menu-coverflow) { background: var(--brand-navy); }
.menu-coverflow {
  --coverflow-ink: var(--brand-navy);
  --coverflow-paper: var(--brand-ivory);
  --coverflow-copper: var(--brand-gold);
}

.menu-coverflow__controls a:hover {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-navy);
}

/* Menu/order hub is the dark anchor, now aligned with the navy logo field. */
.order-hub {
  border-color: rgb(209 160 80 / .56);
  background: var(--brand-navy);
  color: var(--brand-ivory);
  box-shadow: 0 14px 36px rgb(7 26 44 / .18);
}

/* Ordering-first menu header: a compact two-tier retail layout. */
.order-site-header {
  position: relative;
  z-index: 60;
  --order-control-surface: var(--brand-ivory);
  --order-control-hover: #EFE1C5;
  --order-control-border: rgb(7 26 44 / .22);
  --order-control-transition: var(--brand-motion-standard) var(--brand-motion-ease);
  background: var(--brand-ivory-bright);
  border-bottom: 1px solid rgb(7 26 44 / .18);
}

.order-site-top {
  display: grid;
  grid-template-columns: minmax(13rem, .78fr) minmax(18rem, 1.45fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3.5rem);
  min-height: 5.5rem;
}

.order-site-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: max-content;
  color: var(--brand-navy);
  border-radius: var(--brand-control-radius);
  text-decoration: none;
  transition: color var(--order-control-transition), transform var(--order-control-transition);
}

.order-site-brand:hover { color: var(--brand-copper); transform: translateY(-1px); }

.order-site-brand .brand-logo-mark {
  display: grid;
  width: 3.9rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--brand-gold);
  border-radius: 50%;
  background: var(--brand-navy);
}

.order-site-brand .brand-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.order-site-brand__wordmark { font-family: var(--font-display); font-size: clamp(1.15rem, 1.55vw, 1.5rem); font-weight: 700; letter-spacing: -.04em; }

.order-site-search { position: relative; max-width: 39rem; }
.order-site-search input {
  width: 100%;
  min-height: 2.9rem;
  padding: .75rem 3.4rem .75rem 1rem;
  border: 1px solid var(--order-control-border);
  border-radius: var(--brand-control-radius);
  background: var(--order-control-surface);
  color: var(--brand-navy);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
  transition: border-color var(--order-control-transition), background-color var(--order-control-transition), box-shadow var(--order-control-transition);
}

.order-site-search input::placeholder { color: rgb(7 26 44 / .58); }
.order-site-search:focus-within input,
.order-site-header[data-order-search-state="query"] .order-site-search input {
  border-color: var(--brand-gold);
  background: var(--brand-ivory-bright);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .72), var(--brand-focus-ring);
}
.order-site-search::after {
  position: absolute;
  top: 50%;
  right: .95rem;
  width: .65rem;
  height: .65rem;
  border: 2px solid var(--brand-copper);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translateY(-62%);
}

.order-site-search::before {
  position: absolute;
  z-index: 1;
  top: 57%;
  right: .75rem;
  width: .5rem;
  height: 2px;
  background: var(--brand-copper);
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.order-site-search .clear-search {
  right: 2.8rem;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-copper);
  transition: background-color var(--order-control-transition), color var(--order-control-transition), transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.order-site-search .clear-search:hover { background: rgb(181 82 50 / .12); }
.order-site-search .clear-search:active { transform: scale(.94); }

.order-site-utilities,
.order-site-nav__inner,
.order-site-nav__links {
  display: flex;
  align-items: center;
}

.order-site-utilities { justify-content: flex-end; gap: clamp(.8rem, 1.6vw, 1.5rem); }
.order-site-utilities > a:not(.order-hub__cart) {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.7rem;
  color: var(--brand-navy);
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--order-control-transition), transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.order-site-utilities > a:not(.order-hub__cart) span[aria-hidden="true"] { color: var(--brand-copper); font-size: 1.15rem; }
.order-site-utilities > a:not(.order-hub__cart):hover { color: var(--brand-copper); transform: translateY(-1px); }
.order-site-header .order-hub__cart {
  min-height: 2.7rem;
  padding: .55rem .9rem;
  border-radius: var(--brand-control-radius);
  background: var(--brand-navy);
  color: var(--brand-ivory);
  font-size: .8rem;
  transition: background-color var(--order-control-transition), border-color var(--order-control-transition), color var(--order-control-transition), transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.order-site-header .order-hub__cart[data-cart-state="filled"] {
  border-color: var(--brand-copper);
  background: var(--brand-copper);
}

.order-site-header .order-hub__cart:hover,
.order-site-header .order-hub__cart:focus-visible {
  border-color: var(--brand-gold);
  background: var(--brand-gold);
  color: var(--brand-navy);
  transform: translateY(-1px);
}

.order-site-header .order-hub__cart:active { transform: translateY(0) scale(.98); }

.order-site-header .order-hub { position: relative; z-index: 1; box-shadow: none; }
.order-site-nav {
  position: relative;
  transition: transform var(--brand-motion-standard) var(--brand-motion-ease), opacity var(--brand-motion-standard) var(--brand-motion-ease);
}
.order-site-nav__inner { min-height: 4.15rem; gap: clamp(1.1rem, 3vw, 3.5rem); }
.order-site-nav .order-hub__categories { flex: 0 0 min(18rem, 26vw); }
.order-site-nav .order-hub__categories > summary {
  display: flex;
  min-height: 4.15rem;
  align-items: center;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--brand-ivory);
  color: var(--brand-navy);
  transition: background-color var(--order-control-transition), box-shadow var(--order-control-transition), color var(--order-control-transition);
}

.order-site-nav .order-hub__categories > summary:hover,
.order-site-nav .order-hub__categories[open] > summary,
.order-site-nav .order-hub__categories[data-category-menu-state="open"] > summary {
  background: var(--order-control-hover);
  box-shadow: inset 4px 0 0 var(--brand-copper);
}

.order-site-nav__links { gap: clamp(1rem, 2.6vw, 2.6rem); }
.order-site-nav__links a,
.order-site-nav__order {
  color: var(--brand-ivory);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .025em;
  white-space: nowrap;
}

.order-site-nav__links a,
.order-site-nav__order {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  text-decoration: none;
  transition: color var(--order-control-transition), transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.order-site-nav__links a:hover,
.order-site-nav__links a[aria-current="page"],
.order-site-nav__order:hover { color: var(--brand-gold); transform: translateY(-1px); }
.order-site-nav__order { margin-left: auto; color: var(--brand-gold); }
.order-site-nav__order span { margin-left: .35rem; }

/* The brand/search row scrolls away; the existing ordering controls then stay
   available as one compact row without duplicating navigation. */
.order-site-header[data-order-header-state="compact"] .order-site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  border-bottom: 1px solid rgb(209 160 80 / .72);
  background: var(--brand-navy);
  box-shadow: 0 .65rem 1.7rem rgb(7 26 44 / .2);
  animation: order-nav-settle var(--brand-motion-standard) var(--brand-motion-ease) both;
}

.menu-hero,
#menu-list,
[id^="menu-"] {
  scroll-margin-top: calc(var(--order-sticky-nav-height) + 1rem);
}

@keyframes order-nav-settle {
  from { opacity: .92; transform: translate3d(0, -.35rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The legacy commerce theme styles every link in an order hub in ivory.
   Keep the compact retail controls explicit so contrast remains reliable. */
.cinematic-commerce .order-site-header .order-site-nav .order-hub__categories > summary {
  background: var(--brand-ivory);
  color: var(--brand-navy);
}

.cinematic-commerce .order-site-header .order-site-nav .order-hub__categories[open] > summary,
.cinematic-commerce .order-site-header .order-site-nav .order-hub__categories[data-category-menu-state="open"] > summary,
.cinematic-commerce .order-site-header .order-site-nav .order-hub__categories > summary:hover {
  background: var(--order-control-hover);
  box-shadow: inset 4px 0 0 var(--brand-copper);
}

.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab {
  min-height: 2.6rem;
  border-color: rgb(7 26 44 / .18);
  border-radius: calc(var(--brand-control-radius) - .15rem);
  background: var(--brand-ivory);
  color: var(--brand-navy);
  text-decoration: none;
  transition: background-color var(--order-control-transition), border-color var(--order-control-transition), color var(--order-control-transition), transform var(--brand-motion-fast) var(--brand-motion-ease);
}

.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab:hover,
.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab:focus-visible {
  border-color: var(--brand-gold);
  background: var(--order-control-hover);
  color: var(--brand-navy);
  transform: translateY(-1px);
}

.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab[aria-current="true"],
.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab[aria-pressed="true"],
.cinematic-commerce .order-site-header .order-hub__categories .category-tabs .category-tab.is-active {
  border-color: var(--brand-copper);
  background: var(--brand-copper);
  color: var(--brand-ivory);
}

.cinematic-commerce .order-site-header .order-site-nav__order {
  color: var(--brand-gold);
}

.cinematic-commerce .order-site-header .order-site-utilities .order-hub__cart {
  background: var(--brand-navy);
  border-color: var(--brand-gold);
  color: var(--brand-ivory);
}

.cinematic-commerce .order-site-header .order-site-utilities .order-hub__cart[data-cart-state="filled"] {
  border-color: var(--brand-copper);
  background: var(--brand-copper);
}

.cinematic-commerce .order-site-header .order-site-utilities .order-hub__cart:hover,
.cinematic-commerce .order-site-header .order-site-utilities .order-hub__cart:focus-visible {
  background: var(--brand-gold);
  color: var(--brand-navy);
}

.order-site-header :where(.order-site-brand, .order-site-utilities > a, .order-site-nav__links a, .order-site-nav__order, .order-hub__categories > summary, .category-tab, .clear-search):focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
}

.order-site-header :where(.order-site-brand, .order-site-utilities > a, .order-site-nav__links a, .order-site-nav__order, .order-hub__categories > summary, .category-tab, .clear-search):active {
  transform: translateY(0) scale(.98);
}

/* Keep the home gallery light: the cards should be the visual focus, not a
   competing navy panel behind them. */
.cinematic-home .home-hero {
  background: var(--brand-ivory);
  color: var(--brand-navy);
}

.cinematic-home .home-hero-copy h1 {
  color: var(--brand-navy);
}

.cinematic-home .home-hero-copy > p:not(.home-editorial-kicker):not(.home-hero-scene-index) {
  color: color-mix(in srgb, var(--brand-navy) 76%, var(--brand-ivory));
}

.cinematic-home .home-hero .hero-text-link {
  color: var(--brand-navy);
}

.cinematic-home .home-hero-glow {
  opacity: .2;
}

.cinematic-home .home-hero-steam {
  border-inline-start-color: rgb(7 26 44 / .15);
}

/* The navy surface belongs to the legacy Florentine gallery skin. Keep only
   the cards and their motion on the light home hero. */
.cinematic-home.florentine-home .originkit-coverflow-shell--home,
.cinematic-home.florentine-home .originkit-coverflow-shell--home .originkit-coverflow-fallback {
  background: transparent !important;
}

@media (prefers-reduced-motion: no-preference) {
  .cinematic-home.is-cinematic-ready .originkit-coverflow-shell--home {
    animation: brand-coverflow-arrival 900ms var(--cinematic-ease) both;
  }
}

@keyframes brand-coverflow-arrival {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0) scale(.975);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.order-site-header + main .menu-hero { min-height: clamp(35rem, 66vh, 48rem); }
.order-site-header + main .menu-hero-grid { min-height: clamp(35rem, 66vh, 48rem); padding-top: clamp(3.5rem, 8vh, 6rem); }

@media (max-width: 960px) {
  .order-site-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; }
  .order-site-brand__wordmark,
  .order-site-utilities > a:not(.order-hub__cart) span:last-child,
  .order-site-nav__links { display: none; }
  .order-site-nav .order-hub__categories { flex-basis: min(20rem, 56vw); }
}

@media (max-width: 720px) {
  .order-site-top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 4.5rem;
    gap: .65rem;
  }
  .order-site-brand .brand-logo-mark { width: 2.85rem; }
  .order-site-search input { min-height: 2.65rem; padding-left: .75rem; }
  .order-site-utilities { gap: 0; }
  .order-site-header .order-hub__cart { min-height: 2.65rem; padding-inline: .7rem; }
  .order-site-header .order-hub__cart span:not([data-cart-count]) { display: none; }
  .order-site-nav__inner { min-height: 3.7rem; }
  .order-site-nav .order-hub__categories { flex-basis: 100%; }
  .order-site-nav .order-hub__categories > summary { min-height: 3.7rem; font-size: .9rem; }
  .order-site-nav__order { display: none; }
  .order-site-header + main .menu-hero,
  .order-site-header + main .menu-hero-grid { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .order-site-nav { transition: none; }
  .order-site-header[data-order-header-state="compact"] .order-site-nav { animation: none; }
}