/**
 * ======================================================================
 * FINAL CUSTOM STYLESHEET (style.css)
 * Five Rivers Rotisserie — production-ready (CSS v1.1.1)
 * ======================================================================
 *
 * TABLE OF CONTENTS
 *  0) Build/Reset note (FYI)
 *  1) Fonts & Design Tokens (all variables in one :root) .......................... [TOKENS]
 *  2) Utilities (brand color helpers) ............................................. [UTILS]
 *  3) Buttons (primary & glass) ................................................... [BUTTONS]
 *  4) Shared Components (hero etc.) ............................................... [SHARED]
 *  5) Typography & Prose .......................................................... [PROSE]
 *  6) Navigation / Subnav / Cookie Banner (positioning) ........................... [NAV]
 *  7) Helpers (newsletter, links, TOC mobile fade, legal pages )................... [HELPERS]
 *  8) A11y Focus Rings ............................................................ [A11Y]
 *  9) Diet Pills .................................................................. [PILLS]
 * 10) Menu Filter Bar ............................................................. [FILTER]
 * 11) Heat Meter .................................................................. [HEAT]
 * 12) Card Images & Cards (base) .................................................. [CARDS-BASE]
 * 13) Sticky "Order Now" Bar (with cookie offset) ................................. [STICKY]
 * 14) Pager Polish ................................................................ [PAGER]
 * 15) Reveal Animations & Global Scroll (PRM-respect) ............................. [REVEAL]
 * 16) Card Interaction Enhancements ............................................... [CARDS-INTERACT]
 * 17) Cookie Banner THEME (Option B – earthy footer tone) ......................... [COOKIE-BANNER THEME]
 * 18) Print Safety (hide UI chrome in print) ...................................... [PRINT]
 * 19) Debug Helpers + V2 Ready (commented utilities for future) ................... [DEBUG HELPERS + V2 READY]
 *
 * CHANGE LOG (high level)
 * - NEW: Safe-area + cookie-banner variables for fixed elements
 * - UPDATED: Cookie banner fixed bottom + slide-in/out
 * - NEW: Sticky order bar offset above cookie banner via --cookie-banner-h
 * - UPDATED (v1.1): Sticky bar gap fix (no double safe-area + only offset when banner visible)
 * - UPDATED (v1.1): Cookie banner links follow global style (no underline)
 * - UPDATED (v1.1.1): Use :has() to offset sticky bar (no display:none); neutral prose heading colours; dedup hover rules
 *
 * NOTE (0): This file assumes a modern normalize (Tailwind base or equivalent).
 *           No hard resets included here to avoid fighting Tailwind preflight.
 */

/* ==================================================================== [TOKENS] */
:root {
  /* Brand colours */
  --brand-primary: #BA3100;
  --brand-hover: #933E3B;          /* maroon hover accent */
  --brand-primary-hover: #A62C00;  /* darker orange hover for .btn-primary */

  /* Corners */
  --cta-radius: 6px;               /* CTA buttons */
  --card-radius: 8px;              /* Cards/images */

  /* Diet pill colours (global defaults) */
  --pill-veg-bg: #85B60A;
  --pill-veg-fg: #ffffff;
  --pill-gf-bg:  #DAA604;
  --pill-gf-fg:  #ffffff;
  --pill-hot-bg: #B60A0A;
  --pill-hot-fg: #ffffff;

  /* Diet pill layout */
  --pill-gap: 0.25rem;
  --pill-mt:  0.5rem;
  --pill-w:   28px;
  --pill-h:   18px;
  --pill-fs:  10px;

  /* Heat meter */
  --heat-active: var(--pill-hot-bg);
  --heat-inactive: #e5e7eb;

  /* Fixed-element offsets (used by sticky bar, etc.) */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* iOS/Android safe area */
  --cookie-banner-h: 0px;                          /* updated by JS at runtime */

  /* Optional surface shadow token (shared by cards & modals) */
  --surface-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Fonts */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.header-font {
  font-family: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
}

/* Global card radius application */
.card,
.card-raise { border-radius: var(--card-radius); overflow: hidden; }
.card img,
.card-raise img { border-radius: inherit; }

/* ==================================================================== [UTILS] */
/* Tailwind-like helpers for brand colours */
.text-brand-primary { color: var(--brand-primary); }
.bg-brand-primary   { background-color: var(--brand-primary); }
.hover\:text-brand-primary:hover { color: var(--brand-primary); }
.hover\:bg-brand-hover:hover     { background-color: var(--brand-hover); }

/* Brand link (earthy default, warmer on hover) */
.link-brand { color: var(--brand-hover); text-decoration: none; }
.link-brand:hover,
.link-brand:focus-visible { color: var(--brand-primary); }

/* ==================================================================== [BUTTONS] */
/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: var(--cta-radius);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
  outline-offset: 2px;
}
.btn:active { transform: translateY(0); }

/* Primary (solid brand) */
.btn-primary {
  background-color: var(--brand-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--brand-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

/* Glass (for dark backgrounds/hero banners) */
.btn-glass {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-glass:hover,
.btn-glass:focus-visible {
  background: rgba(147,62,59,.90);
  border-color: rgba(147,62,59,.95);
  color:#fff;
  transform: translateY(-1px);
}

/* Glass light variant (use on light backgrounds, e.g. 404) */
.btn-glass--light {
  color: #1f2937; /* stone-800 */
  background: transparent;
  border: 1px solid #d6d3d1; /* stone-300 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn-glass--light:hover,
.btn-glass--light:focus-visible {
  background: #f5f5f4; /* stone-100 */
  color: #1f2937;
  transform: translateY(-1px);
}

/* Outline secondary (generic visible option on light backgrounds) */
.btn-outline {
  color: #1f2937;
  background: transparent;
  border: 1px solid #d6d3d1;
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: #f5f5f4;
  transform: translateY(-1px);
}

/* ==================================================================== [SHARED] */
/* Hide scrollbar for testimonial scroller, keep swipe/scroll behaviour */
#social-proof-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/old Edge */
}
#social-proof-scroll::-webkit-scrollbar {
  display: none;              /* WebKit */
}

/* Page hero – shared layout */
.page-hero {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  position:relative;
}

.page-hero h1 {
  position:relative;
  z-index:10;
  font-weight:700;
  font-size:2.5rem;
  line-height:1.15;           /* prevent overlap on wrap */
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media (min-width:768px){
  .page-hero h1{
    font-size:3.25rem;        /* slightly smaller than 3.75rem */
    line-height:1.15;         /* keep generous line-height on tablet/desktop */
  }
}

/* Home (index) hero – deeper */
.page-hero--home {
  min-height:52svh;
}
@media (min-width:768px){
  .page-hero--home {
    min-height:64vh;
  }
}

/* Standard hero – menu, about, contact, guides, rewards, FAQ, legal */
.page-hero--standard {
  min-height:24svh;
}
@media (min-width:640px){
  .page-hero--standard {
    min-height:32svh;
  }
}
@media (min-width:768px){
  .page-hero--standard {
    min-height:40vh;
  }
}

/* ===================================================================== [PROSE] */
.prose { line-height: 1.7; }
.prose h2 {
  font-size:1.5rem;
  font-weight:600;
  margin:2.5rem 0 1rem;
  font-family:'Inter','Century Gothic','Futura',sans-serif;
}
.prose h3 {
  font-size:1.25rem;
  font-weight:600;
  margin:2rem 0 .75rem;
  font-family:'Inter','Century Gothic','Futura',sans-serif;
}
.prose a {
  color:var(--brand-primary);
  text-decoration:none;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.prose a:hover,
.prose a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
}

/* ==================================================================== [NAV] */
.active-subnav-link { background:#f3f4f6; color:var(--brand-primary); }
.subnav-links {
  padding-inline:.75rem;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.subnav-links::before,
.subnav-links::after {
  content:"";
  display:block;
  width:.5rem;
  flex:0 0 auto;
}
.subnav-links::-webkit-scrollbar { display:none; }
.subnav-links > a { margin-inline:.125rem; }

/* Cookie banner — POSITIONING ONLY here (theme is in [COOKIE-BANNER THEME]).
   Fixed to bottom; JS toggles .show and updates --cookie-banner-h via ResizeObserver. */
#cookie-banner {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  transform: translateY(100%);
  transition: transform 0.5s ease-in-out;
  z-index:90; /* below modal(100), above sticky(95) */
}
#cookie-banner.show { transform: translateY(0); }

/* ==================================================================== [HELPERS] */
.mobile-nav-separator {
  width:40%;
  margin:0 auto;
  border-color:#e5e7eb;
}

.footer-newsletter form { display:flex; flex-wrap:nowrap; gap:.75rem; }
.footer-newsletter input[type="email"] { flex:1 1 auto; min-width:0; }
.footer-newsletter button,
.footer-newsletter a,
.newsletter-signup button,
.newsletter-signup a,
button.signup-cta,
a.signup-cta {
  flex:0 0 auto;
  white-space:nowrap;
}
@media (max-width:480px){
  .footer-newsletter form{ flex-wrap:wrap; }
  .footer-newsletter input[type="email"]{ flex:1 1 100%; }
}

#menu-tabs {
  padding-inline-start: max(.75rem, env(safe-area-inset-left));
  padding-inline-end:   max(.75rem, env(safe-area-inset-right));
}
#menu-subnav { margin-top:-1px; }

.link-quiet {
  color:var(--brand-primary);
  text-decoration:none;
  font-weight:600;
}
.link-quiet:hover { color:var(--brand-hover); }
.rounded-half { border-radius: 9999px; }
.rounded-cta  { border-radius: var(--cta-radius); }

.link-inline {
  color:var(--brand-primary);
  text-decoration:none;
  transition: color .2s ease;
}
.link-inline:hover,
.link-inline:focus-visible { color:var(--brand-hover); }
.link-inline:visited { color:var(--brand-primary); }
.link-inline:focus {
  outline:none;
  box-shadow:0 0 0 2px rgba(186,49,0,.3);
  border-radius:.375rem;
}

@media (max-width:767px){
  #toc .toc-panel { transition: opacity .2s ease; }
  #toc .toc-panel[style*="display: none"] { opacity:0; }
}

/* ==================================================================== [HELPERS: LEGAL PAGES] */
.legal-section {
  padding-top: 2rem;         /* ~pt-8 */
  padding-bottom: 4rem;      /* ~pb-16 */
}
@media (min-width: 768px) {
  .legal-section {
    padding-top: 2.5rem;     /* ~md:pt-10 */
    padding-bottom: 5rem;    /* ~md:pb-20 */
  }
}

/* ==================================================================== [A11Y] */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* ==================================================================== [PILLS] */
.diet-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  inline-size:var(--pill-w);
  block-size:var(--pill-h);
  padding:0;
  font-size:var(--pill-fs);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.02em;
  border-radius:9999px;
}
.diet-pill--veg { background:var(--pill-veg-bg); color:var(--pill-veg-fg); }
.diet-pill--gf  { background:var(--pill-gf-bg);  color:var(--pill-gf-fg); }
.diet-pill--hot { background:var(--pill-hot-bg); color:var(--pill-hot-fg); }

.pill-row {
  margin-top:var(--pill-mt);
  display:flex;
  gap:var(--pill-gap);
}
.diet-legend-dot {
  width:.75rem;
  height:.75rem;
  border-radius:9999px;
}

/* Screen-reader utility (kept local so we don't rely on Tailwind's version) */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==================================================================== [FILTER]
   Menu filter panel + controls
*/
#menu-filter-form {
  background-color: #DBDBDB;            /* subtle grey panel */
}

/* Search bar wrapper */
#menu-filter-form .search-wrap {
  background-color: #ffffff;            /* white pill inside grey panel */
  padding-block: .4rem;
  padding-inline: .6rem;
  border-radius: .75rem;
  min-height: 38px;
}
#menu-filter-form .search-wrap svg {
  width:18px;
  height:18px;
}

/* Search input */
#menu-filter-form .search-input {
  padding-block: .35rem;
  font-size: .95rem;
  padding-left: 0;                      /* remove excessive left indent */
}

/* Layout for tools row */
#menu-filter-form .tools-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:wrap;
}

/* Dietary toggle group */
#menu-filter-form .dietary{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:0;
  min-width:0;
  border:0;
  flex:1 1 auto;
}

/* Dietary filter "pills" */
#menu-filter-form .diet-toggle{
  padding:.35rem .8rem;
  border-radius:9999px;
  font-size:.875rem;
  line-height:1;
  border:1px solid #d1d5db;
  background-color:#f3f4f6;
}
#menu-filter-form .diet-toggle .diet-legend-dot{
  width:.55rem;
  height:.55rem;
}
#menu-filter-form .diet-toggle:hover{
  background-color:#e5e7eb;
}

/* Sort + reset controls */
#menu-filter-form .tools-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;
}
#menu-filter-form .menu-sort{
  appearance:auto;
  border:1px solid #d1d5db;
  background:#fff;
  border-radius:.5rem;
  padding:.35rem .6rem;
  font-size:.875rem;
  line-height:1.1;
  min-height:34px;
  cursor:pointer;
}
#menu-filter-form .btn-reset{
  border:1px solid #d1d5db;
  background:#fff;
  border-radius:.5rem;
  padding:.35rem .75rem;
  font-size:.875rem;
  line-height:1.1;
  min-height:34px;
  cursor:pointer;
}

/* Active filter "chips" */
#menu-filter-form #active-chips button{
  padding:.3rem .55rem;
  font-size:.85rem;
  border-radius:9999px;
}

/* Results count text */
#menu-filter-form #results-count{
  font-size:.9rem;
}

/* Inner grid spacing */
#menu-filter-form .grid { gap:.5rem; }
@media (min-width:1024px){
  #menu-filter-form .grid { gap:.75rem; }
}
@media (min-width:640px){
  #menu-filter-form .tools-row{ flex-wrap:nowrap; }
  #menu-filter-form .dietary{ flex:1 1 auto; }
  #menu-filter-form .tools-right{ flex:0 0 auto; justify-content:flex-end; }
}
/* Tweak spacing: search panel ↔ first menu heading */
#menu-tools {
  margin-bottom: 1.5rem; /* was mb-10 (~2.5rem via utility); this feels tighter on mobile */
}

/* ==================================================================== [HEAT] */
.heat-meter {
  display:inline-grid;
  grid-auto-flow:column;
  gap:2px;
  align-items:center;
  vertical-align:middle;
  margin-left:.25rem;
}
.heat-meter i {
  width:6px;
  height:6px;
  border-radius:9999px;
  background:var(--heat-inactive);
  display:inline-block;
}
.heat-meter[data-level="1"] i:nth-child(-n+1),
.heat-meter[data-level="2"] i:nth-child(-n+2),
.heat-meter[data-level="3"] i:nth-child(-n+3){
  background:var(--heat-active);
}

/* ==================================================================== [CARDS-BASE] */
.card-img {
  aspect-ratio: 3 / 2;
  object-fit:cover;
  object-position:center;
  transition: transform .35s ease;
  background-color:#f3f4f6;
}
.card-raise {
  position:relative;
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
  /* will-change removed to avoid exceeding browser budget globally */
}
.card-raise img {
  transition: transform .35s ease, filter .35s ease;
  /* will-change removed */
}
@media (prefers-reduced-motion: reduce) {
  .card-raise,
  .card-img { transition:none !important; }
}

/* ==================================================================== [STICKY] */
.order-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95; /* modal sits at z-100; cookie banner z-90 below this */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .125rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom));
  background: #111827;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 -4px 16px rgba(0,0,0,.18);
  transform: translateY(0);
  transition: transform .25s ease, opacity .25s ease, bottom .25s ease;
}
.order-sticky__label { font-size: .95rem; line-height: 1; }
.order-sticky__sub   { font-size: .75rem; line-height: 1; opacity: .75; }

/* When a modal is open, slide the sticky bar down so it never overlaps */
body.modal-open .order-sticky { transform: translateY(120%); }

/* Default placement (no banner) */
#order-sticky-bar { bottom: 0; }

/* LIFT ABOVE COOKIE BANNER when it is visible (no double safe-area) */
body:has(#cookie-banner.show) #order-sticky-bar {
  bottom: calc(var(--cookie-banner-h) + 12px);
}

@media (prefers-reduced-motion: reduce){
  .order-sticky { transition: none; }
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
  /* JS will toggle .cookie-banner-visible on <body> */
  body.cookie-banner-visible #order-sticky-bar {
    bottom: calc(var(--cookie-banner-h) + 12px);
  }
}

/* ==================================================================== [PAGER] */
.pager a,
.pager span[aria-disabled="true"] {
  border-radius:.5rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.pager a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){
  .pager a { transition:none !important; }
}

/* ==================================================================== [REVEAL] */
.reveal,
.scroll-reveal {
  opacity:0;
  transform: translateY(16px);
  /* will-change removed: too many elements share these classes */
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.reveal-visible,
.scroll-reveal.is-visible {
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal,
  .scroll-reveal {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Global smooth scroll + sticky header padding */
html {
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
/* Respect reduced motion: disable forced smooth scrolling */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
}

/* Extra prose link + heading polish (neutral headings) */
#toc .toc-link {
  color:inherit;
  text-decoration:none;
}
#toc .toc-link:hover { text-decoration:underline; }
.prose h2,
.prose h3 { color:#373737; } /* neutral tone */
.prose h2 a,
.prose h3 a {
  color:var(--brand-primary);
  text-decoration:underline;
}
.prose h2 {
  position:relative;
}
.prose h2::before {
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  bottom:.2em;
  width:3px;
  border-radius:2px;

}

/* ==================================================================== [FAQ] */
/* Page-agnostic accordion styles (scoped to .faq-accordion) */
.faq-accordion .faq-btn { cursor: pointer; }
.faq-accordion .faq-icon {
  display:inline-block;
  width:1ch;
  text-align:center;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
  line-height:1;
}
.faq-accordion .faq-btn[aria-expanded="true"] .faq-icon {
  transform: rotate(0.001deg); /* micro nudge to engage GPU, no visual rotation */
}
.faq-accordion .faq-btn .faq-icon::before { content: "+"; }
.faq-accordion .faq-btn[aria-expanded="true"] .faq-icon::before { content: "–"; }

/* Panel animation: JS toggles max-height for smooth open/close */
.faq-accordion .faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease, opacity .2s ease;
  opacity: 0;
}
.faq-accordion .faq-panel.is-open { opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-accordion .faq-panel,
  .faq-accordion .faq-icon {
    transition: none !important;
  }
}

/* ==================================================================== [CARDS-INTERACT] */
/* Subtle lift + brightness cue on hover (progressive enhancement) */
.card-raise:hover {
  transform: translateY(-6px);
  box-shadow: var(--surface-shadow);
}
.card-raise:hover img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* Text overlay gradient that lightens slightly on hover
   (Add class="overlay-gradient" to the gradient layer inside .card-raise) */
.card-raise .overlay-gradient {
  background: linear-gradient(to top, rgba(0,0,0,.60), rgba(0,0,0,.30), rgba(0,0,0,0)) !important;
  transition: background .25s ease;
}
.card-raise:hover .overlay-gradient {
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.20), rgba(0,0,0,0)) !important;
}
@media (prefers-reduced-motion: reduce){
  .card-raise,
  .card-raise img,
  .card-raise .overlay-gradient {
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}

/* Keyboard focus ring on interactive cards (wins over hover styles) */
.menu-card:focus-visible,
.card-raise:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px #f59e0b,         /* amber ring for visibility */
    0 0 0 4px rgba(0,0,0,.22), /* subtle contrast halo */
    var(--surface-shadow);     /* keep the nice elevation */
}

/* ==================================================================== [COOKIE-BANNER THEME]
   Option B: earthy tones to match footer
*/
#cookie-banner {
  /* POSITION is defined in [NAV]; this block sets the THEME only */
  background: #1C1917;                  /* stone-900-like surface (earthy) */
  color: #E7E5E4;                       /* light text for contrast */
  border-top: 1px solid #292524;        /* subtle divider (stone-800-ish) */
  padding: 0.875rem max(1rem, env(safe-area-inset-left))
           calc(0.875rem + var(--safe-bottom))
           max(1rem, env(safe-area-inset-right));
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* Banner links follow global style (no underline; color-only hover) */
#cookie-banner a {
  color: var(--brand-primary);
  text-decoration: none;
}
#cookie-banner a:hover,
#cookie-banner a:focus-visible {
  color: var(--brand-primary-hover);
}

/* Layout for the action buttons inside the banner */
#cookie-banner .cookie-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Primary = Accept */
#accept-cookies {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--cta-radius);
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  border: 1px solid transparent;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#accept-cookies:hover,
#accept-cookies:focus-visible {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Secondary = Decline */
#decline-cookies {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--cta-radius);
  background: transparent;
  color: #E7E5E4;
  border: 1px solid rgba(231,229,228,.35);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
#decline-cookies:hover,
#decline-cookies:focus-visible {
  background: rgba(255,255,255,0.06);
  border-color: rgba(231,229,228,.55);
  transform: translateY(-1px);
}

/* Reduced motion friendliness */
@media (prefers-reduced-motion: reduce) {
  #accept-cookies,
  #decline-cookies {
    transition: none;
  }
}

/* ==================================================================== [PRINT] */
@media print {
  .order-sticky,
  #cookie-banner,
  nav,
  footer {
    display: none !important;
  }
}

/* ==================================================================== [DEBUG HELPERS + V2 READY] */
/*
.debug-outline * { outline: 1px solid rgba(0,255,0,.2); }
.debug-fixed [style*="position:fixed"],
.debug-fixed .order-sticky,
.debug-fixed #cookie-banner { outline: 2px dashed magenta; }
.debug-safe { background: rgba(255,200,0,.15); }
*/
/*
@media (prefers-color-scheme: dark) {
  :root {
    --surface-bg: #111827;
    --surface-fg: #f9fafb;
  }
}
*/
/*
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}
*/
/*
.motion-safe   { transition: all .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .motion-safe   { transition: none !important; }
  .motion-reduce { transition: none !important; }
}
*/
/*
img[data-loaded="true"] { opacity: 1; transition: opacity .4s ease; }
img:not([data-loaded="true"]) { opacity: 0; }
*/
/*
body.contrast-test * { filter: grayscale(1) contrast(1.4); }
*/