/**
 * css/themes/outback-theme.css
 * ==============================
 * Quy Nhon Sports Bar -- Brand Theme
 *
 * ROLE: Overrides --theme-* token slots with Outback brand values.
 *   This is the ONLY file that changes per brand deployment.
 *
 * LOADING ORDER (enforced by core/header.html):
 *   1. css/core/design-tokens.css  ← base tokens (loaded first)
 *   2. css/core/reset.css
 *   3. css/core/layout.css
 *   4. css/core/typography.css
 *   5. css/core/nav.css
 *   6. css/core/footer.css
 *   7. css/core/components.css
 *   8. THIS FILE                   ← brand colour overrides (loaded last, wins)
 *   9. css/pages/{page}.css        ← page-specific layout
 *
 * TO CREATE A NEW BRAND:
 *   1. Copy this file to css/themes/{brand}-theme.css
 *   2. Override only the --theme-* tokens in Section 1
 *   3. Update config.js with the new themeFile value
 *   4. Do not modify css/core/ files
 *
 * Design spec -- Quy Nhon Sports Bar:
 *   Primary:   #0A2540  (Navy)
 *   Secondary: #E10600  (Red)
 *   Text:      #1A1A1A
 *   BG:        #FFFFFF
 */


/* ============================================================
   1. BRAND COLOUR TOKENS
   Override the --theme-* slots defined in design-tokens.css.
   ============================================================ */

:root {
   /* Primary brand colour */
   --theme-primary: #0A2540;
   --theme-primary-hover: #07192b;

   /* Secondary / accent colour */
   --theme-secondary: #E10600;
   --theme-secondary-hover: #b30500;

   /* Backgrounds */
   --theme-bg: #FFFFFF;
   --theme-bg-alt: #F5F5F5;
   --theme-surface: #FFFFFF;

   /* Borders */
   --theme-border: #E0E0E0;

   /* Text */
   --theme-text: #1A1A1A;
   --theme-text-muted: #555555;
   --theme-text-light: #888888;

   /* Typography -- brand font stack */
   --theme-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
   --theme-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

   /* Radius overrides (optional -- defaults from design-tokens.css are fine) */
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 16px;

   /* Nav */
   --nav-height: 72px;

   /* -- Spacing scale -- targeted overrides only -----------------------------
       --space-md raised slightly (24px → 32px) for category filter bar
       and subtitle breathing room.
       --space-lg and --space-xl kept at design-tokens defaults because
       page CSS files (index.css, about.css, gallery.css) use them directly
       for grid gaps -- raising them would blow out card grid spacing.
       Grid gap is controlled per-grid via Section 10 instead.
    ------------------------------------------------------------------------ */
   --space-md: 2rem;
   /* 32px  (was 24px) */
   /* --space-lg and --space-xl: stay at 2.5rem / 4rem (design-tokens defaults) */

   /* Section padding token consumed by layout.css .layout-section */
   --layout-section-padding: 5rem 0;

   /* Hero image -- single path token for all hero background rules */
   --hero-image: url("/assets/images/qnsb/hero/hero-bar.webp");
}


/* ============================================================
   2. LAYOUT VARIANT BODY CLASS
   Applied by brand-injector.js: body.layout-sports-bar
   Used as a hook for variant-specific CSS overrides if needed.
   ============================================================ */

/* Section 2 removed - empty ruleset */


/* ============================================================
   3. LEGACY COMPATIBILITY ALIASES
   These map old design system tokens (--belle-*, --artisan-*) to
   current --theme-* values. Pages still reference these in inline
   styles and JS-generated HTML. Remove section by section as pages
   are migrated to --theme-* tokens.
   ============================================================ */

:root {

   /* -- belle-* engine layout tokens ----------------------------------------
       Referenced in layout-controller.js token maps and page inline styles.
       --belle-space-* and --belle-radius-* are safe to keep long-term as
       they are engine spacing concepts, not brand colours.
    ------------------------------------------------------------------------ */

   --belle-space-xs: 0.5rem;
   /*  8px */
   --belle-space-sm: 1rem;
   /* 16px */
   --belle-space-md: 1.5rem;
   /* 24px */
   --belle-space-lg: 2.5rem;
   /* 40px */
   --belle-space-xl: 4rem;
   /* 64px */
   --belle-space-2xl: 5.5rem;
   /* 88px */

   --belle-radius-sm: 4px;
   --belle-radius-md: 8px;
   --belle-radius-lg: 12px;

   --belle-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
   --belle-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
   --belle-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
   --belle-shadow-xl: 0 16px 48px rgba(44, 36, 22, 0.16);

   --belle-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

   --belle-font-sans: 'Inter', sans-serif;
   --belle-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
   --belle-font-serif: 'Barlow Condensed', 'Arial Narrow', sans-serif;

   /* -- belle-* colour tokens -- remapped to --theme-* ----------------------
       MIGRATION STATUS:
         --belle-wine         ✅ remapped to --theme-primary
         --belle-botanical    ✅ remapped to --theme-primary
         --belle-cream        ⏳ still used in index.html sections (use --theme-bg-alt)
         --belle-ivory        ⏳ still used in index.html sections (use --theme-bg)
         --belle-parchment    ⏳ still used in index.html, testimonials (use --theme-bg-alt)
         --belle-text-dark    ⏳ still used in contact, events (use --theme-text)
         --belle-text-medium  ⏳ still used in menu, shop (use --theme-text-muted)
         --belle-text-light   ⏳ still used in index (use --theme-text-light)
    ------------------------------------------------------------------------ */

   --belle-wine: var(--theme-primary);
   /* was #6B2C3E */
   --belle-botanical: var(--theme-primary);
   /* was #428104 */
   --belle-botanical-light: var(--theme-primary-hover);
   /* was #5BA302 */

   /* Background tones -- kept as-is; remap to --theme-bg/bg-alt during page migration */
   --belle-cream: #F5F5F5;
   /* mapped to nearest --theme-bg-alt equivalent */
   --belle-ivory: #FAFAFA;
   /* mapped to near-white */
   --belle-parchment: #F0F0F0;
   /* mapped to light grey */
   --belle-wood: #5C4A37;
   /* no theme equivalent -- keep value */
   --belle-gold: #C9A961;
   /* no theme equivalent -- keep value */

   /* Text tones -- remap progressively to --theme-text-* */
   --belle-text-dark: var(--theme-text);
   /* was #2C2416 */
   --belle-text-medium: var(--theme-text-muted);
   /* was #4A4235 */
   --belle-text-light: var(--theme-text-light);
   /* was #8B8275 */

   /* Borders */
   --belle-border: var(--theme-border);
   /* was rgba(92,74,55,0.15) */
   --belle-border-light: rgba(0, 0, 0, 0.06);

   /* -- artisan-* token aliases ---------------------------------------------
       From L'Artisans D'Indochine -- referenced in about, careers, press,
       locations inline styles. Colour tokens use HSL channel format because
       pages call them via hsl(var(--artisan-*)).
    ------------------------------------------------------------------------ */

   /* Colour tokens -- HSL channels (H S% L%) */
   --artisan-fg: 0 0% 10%;
   /* #1A1A1A */
   --artisan-fg-light: 0 0% 33%;
   /* #555555 */
   --artisan-bg-alt: 0 0% 96%;
   /* #F5F5F5 */
   --artisan-primary: 145 100% 26%;
   /* #00843D */

   /* Spacing tokens -- length values */
   --artisan-spacing-xs: var(--belle-space-xs);
   --artisan-spacing-sm: var(--belle-space-sm);
   --artisan-spacing-md: var(--belle-space-md);
   --artisan-spacing-lg: var(--belle-space-lg);
   --artisan-spacing-xl: var(--belle-space-xl);

   /* Structural tokens */
   --artisan-border: var(--theme-border);
   --artisan-radius: var(--radius-md, 12px);

   /* Font alias -- required by about.html inline styles */
   --artisan-font-serif: var(--theme-font-display);
}

/* ============================================================
   4. HERO BACKGROUNDS
   Page-specific hero image rules. Each page class loads a
   unique hero. All fall back to the brand gradient so the
   hero is NEVER blank, even if an image fails to load.
   ============================================================ */

/* Base hero -- fallback gradient + shared image token.
   All page-specific rules inherit from here; only override
   what genuinely differs (e.g. background-position). */
.hero {
   background: linear-gradient(135deg, #0A2540 0%, #051220 100%);
   /* background-image: var(--hero-image); -- Removed to fix double-load glitch; hero is rendered by <img> tag in HTML */
   background-size: cover;
   background-position: center;
}

/* Page-specific overrides -- anchored to top to show key image content */
body.page-gallery .hero {
   background-position: center top;
   min-height: 70vh;
}

body.page-shop .hero,
body.page-about .hero,
body.page-events .hero {
   background-position: center top;
}

/* Ensure hero-image <img> element covers its container */
.hero-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}


/* ============================================================
   5. MENU TABS
   The Food / Drinks tab switcher on menu.html.
   ============================================================ */

.menu-tabs {
   display: flex;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
}

.menu-tab {
   padding: 0.5rem 1.25rem;
   border: 2px solid var(--theme-primary);
   background: transparent;
   color: var(--theme-primary);
   cursor: pointer;
   font-family: var(--theme-font-display);
   font-weight: 600;
   font-size: 0.9rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   border-radius: var(--radius-sm, 4px);
   transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-tab:hover {
   background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
}

.menu-tab.active {
   background: var(--theme-primary);
   color: #FFFFFF;
}

@supports not (color: color-mix(in srgb, red, blue)) {
   .menu-tab:hover {
      background: rgba(0, 132, 61, 0.08);
   }
}

@media (max-width: 768px) {
   .menu-tabs {
      gap: 0.5rem;
   }

   .menu-tab {
      padding: 0.4rem 0.9rem;
      font-size: 0.85rem;
   }
}


/* ============================================================
   6. INLINE LINK HELPER
   For inline sentence links (e.g. shop hero "Contact" link).
   Never use .nav-link for inline text.
   ============================================================ */

.inline-link {
   color: var(--theme-primary);
   text-decoration: none;
   border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 40%, transparent);
   transition: border-color 0.15s ease;
}

.inline-link:hover {
   border-bottom-color: var(--theme-primary);
}

@supports not (color: color-mix(in srgb, red, blue)) {
   .inline-link {
      border-bottom-color: rgba(0, 132, 61, 0.4);
   }
}


/* ============================================================
   7. NAV LINK GAP OVERRIDE
   Increase spacing between nav links for a more balanced bar.
   Overrides --nav-link-gap token from nav.css.
   ============================================================ */

.nav-menu {
   --nav-link-gap: 1rem;
   gap: 1rem;
}


/* ============================================================
   8. MOBILE POLISH
   ============================================================ */

@media (max-width: 768px) {
   .footer-content {
      text-align: center;
   }

   .footer-contact-item,
   .footer-social-links {
      justify-content: center;
   }

   /* Reduce hero-content vertical padding on mobile.
      components.css sets 5.5rem top/bottom which is excessive
      inside a 52vh hero. Bring it down to keep title, tagline,
      and buttons from feeling cramped. */
   .hero .hero-content {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
   }

}

/* hero-minimal interior pages (about, gallery) include .hero-content
   whose 5.5rem padding stacks on top of .hero-minimal's own 3rem/2rem.
   Scope it down so the green header band stays compact. */
.hero-minimal .hero-content {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
}


/* ============================================================
   9. THEME POLISH -- Visual Refinement Pass
   Overrides engine defaults in components.css for a more
   premium Quy Nhon Sports Bar presentation.
   Scope: hero sizing, gradient overlay, nav polish,
          button balance, mobile typography scale.
   Engine files (layout-controller.js, hero-renderer.js,
   nav-renderer.js, brand-injector.js, config.js) UNTOUCHED.
   ============================================================ */

/* Tasks 1 + 5 -- Hero height, title spacing, mobile scale.
   Cinematic but not overwhelming: 70vh desktop, tapering to 52vh mobile.
   font-size floor raised to 2.4rem to feel bold on small screens. */
.hero {
   min-height: 70vh;
}

@media (max-width: 1024px) {
   .hero {
      min-height: 60vh;
   }
}

@media (max-width: 768px) {
   .hero {
      min-height: 52vh;
   }
}

.hero-title {
   letter-spacing: 0.08em;
   line-height: 1.1;
   font-size: clamp(2.4rem, 5vw, 4rem);
   margin-bottom: 1rem;
}

/* .hero-subtitle sits below the title on full-bleed heroes.
   Absent from engine defaults -- added here as a theme class. */
.hero-subtitle {
   max-width: 640px;
   margin-top: 1rem;
   opacity: 0.9;
   color: rgba(255, 255, 255, 0.92);
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
   text-align: center;
}

/* Task 2 -- Gradient overlay for text readability.
   NOTE: .hero-image is an <img> (replaced element) -- ::after
   pseudo-elements do not render on replaced elements. We override
   the existing .hero-overlay div (already in the DOM) to use a
   directional gradient instead of the flat rgba scrim, and mark
   it pointer-events: none so it never blocks text interaction. */
.hero-overlay {
   background: linear-gradient(to bottom,
         rgba(0, 0, 0, 0.35),
         rgba(0, 0, 0, 0.55));
   pointer-events: none;
}

/* Task 3 -- Tighten vertical nav link padding slightly.
   letter-spacing already set to 0.05em in nav.css; restated
   here for theme self-documentation. gap moved to Section 7. */
.nav-link {
   padding: 0.35rem 0.6rem;
}

/* Task 4 -- Button balance: narrower horizontal padding,
   slightly sharper radius vs. the 6px engine default.
   .btn-sm retains its own padding from components.css. */
.btn,
.btn-primary,
.btn-outline,
.btn-outline-light,
.cta-button {
   padding: 0.7rem 1.3rem;
   border-radius: 4px;
}

/* Breakpoint coverage -- hero text stays centred, no overlap.
   480px: hero floor hits 2.4rem (clamp), single-column layout.
   768px: mobile nav drawer active (nav.css handles this).
   1024px / 1440px: desktop layout, handled in hero height block above. */
@media (max-width: 480px) {
   .hero-subtitle {
      font-size: 0.9375rem;
   }

   .hero-buttons {
      flex-direction: column;
      align-items: center;
   }
}


/* ============================================================
   10. GRID & CARD POLISH
   Overrides engine defaults for premium card presentation.
   Grid gap tightened from var(--space-lg / 40px) to 28px.
   Cards in grids use flex column so content stacks cleanly.
   Container max-width enforced at 1200px (matches token).
   ============================================================ */

/* Card grids -- tighter, premium gap.
   Overrides --grid-gap token so ALL grid variants (.grid, .grid-2, .grid-3,
   .grid-4, .tile-grid) pick up the new value automatically. */
:root {
   --grid-gap: 1.75rem;
   /* 28px -- tighter than the 40px engine default */
}

@media (max-width: 768px) {
   :root {
      --grid-gap: 1.25rem;
      /* 20px on mobile */
   }
}

/* Cards inside grids: flex column so all cards reach full cell height */
.grid>.card,
.grid>.layout-card {
   display: flex;
   flex-direction: column;
}

/* Card image area: consistent aspect ratio, never squashes */
.grid>.card .image-container,
.grid>.layout-card .image-container {
   flex-shrink: 0;
}

/* Card description grows to fill available height, pushing CTA to bottom */
.grid>.card .card-description,
.grid>.layout-card .card-description {
   flex: 1;
   margin-bottom: var(--space-sm, 1rem);
}

/* ============================================================
   11. TYPOGRAPHY RHYTHM
   Heading sizes and spacing that feel bold but balanced.
   Overrides engine typography.css values via the cascade.
   ============================================================ */

h1 {
   font-size: clamp(2.4rem, 5vw, 4rem);
   line-height: 1.1;
   margin-bottom: 1rem;
}

h2 {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   line-height: 1.15;
   margin-bottom: 0.75rem;
}

h3 {
   line-height: 1.2;
   margin-bottom: 0.5rem;
}

p {
   line-height: 1.65;
   margin-bottom: 1rem;
}

/* Section headings -- additional breathing room below */
.section-title {
   margin-bottom: 0.75rem;
}

.section-subtitle {
   margin-bottom: var(--space-md, 2rem);
   max-width: 640px;
}

/* Hero content vertical rhythm */
.hero-content {
   gap: 0;
   /* space set by individual child margins, not flex gap */
}

/* ============================================================
   12. TILE SYSTEM
   --tile-style documents the active preset (string token, not
   evaluated by CSS -- for readability and tooling only).
   --tile-* tokens encode the preset's visual values.
   body.layout-sports-bar is the theme scope applied by
   brand-injector.js at runtime.
   To switch tile style for a new brand: override --tile-* only.
   ============================================================ */

:root {
   --tile-style: elevated;
   --tile-bg: #ffffff;
   --tile-radius: 12px;
   --tile-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
   --tile-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
   --tile-border: transparent;
}

body.layout-sports-bar .card,
body.layout-sports-bar .layout-card {
   background: var(--tile-bg);
   border-radius: var(--tile-radius);
   box-shadow: var(--tile-shadow);
   border-color: var(--tile-border);
}

body.layout-sports-bar .card:hover,
body.layout-sports-bar .layout-card:hover {
   box-shadow: var(--tile-shadow-hover);
   transform: translateY(-2px);
}