/* ============================================================
   Theme: HERITAGE  -  classic traditional gentleman's barber
   ------------------------------------------------------------
   For: old-school established barbershops / traditional cuts &
   straight-razor shaves / Perth CBD - Guildford. Mood: a deep
   navy room in timber panelling and antique mirrors, brass and
   cream, with a barber-pole red. A classic high-contrast serif
   (Playfair Display) carries the display voice; Inter keeps the
   body clean. Refined, established, traditional.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

.theme-heritage {
  /* -------- Surfaces (deep navy, layered) ---------------- */
  --bg:        #0F1A2B;
  --bg-2:      #16243A;
  --surface:   #1D2C44;

  /* -------- Text (warm cream on navy) ------------------- */
  --fg:            #F2EDE1;
  --fg-muted:      #9FB0C4;
  --heading-color: #F2EDE1;

  /* -------- Accent (barber-pole red) -------------------- */
  --accent:        #C0392B;
  --accent-bright: #D6493A;   /* readable links/prices on dark  */
  --accent-hover:  #9C2C20;
  --accent-2:      #D9C08A;   /* cream-gold dots, badges, pop   */
  --on-accent:     #F2EDE1;   /* cream ink on red               */

  --hairline:   rgba(217, 192, 138, 0.16);
  --hairline-2: rgba(217, 192, 138, 0.30);

  /* -------- Hero (deep navy veil, faint red wash) ------- */
  --hero-ink: #F2EDE1;
  --hero-min-h: 92vh;
  --hero-overlay:
    radial-gradient(120% 95% at 50% 38%, rgba(15,26,43,0.34) 0%, rgba(15,26,43,0.66) 66%, rgba(11,20,34,0.92) 100%),
    linear-gradient(180deg, rgba(15,26,43,0.54) 0%, rgba(15,26,43,0.42) 42%, rgba(11,20,34,0.94) 100%),
    linear-gradient(100deg, rgba(192,57,43,0.14) 0%, transparent 58%);

  /* -------- Footer (deepest navy) ----------------------- */
  --footer-bg:     #0A1322;
  --footer-fg:     rgba(242, 237, 225, 0.74);
  --footer-strong: #F2EDE1;
  --footer-head:   #D9C08A;

  /* -------- Type ---------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.8rem, 6.5vw + 1rem, 6rem);
  --heading-weight: 700;
  --heading-tracking: 0.005em;
  --eyebrow-tracking: 0.30em;

  /* -------- Traditional corners + generous rhythm ------- */
  --radius-1: 3px;
  --radius-2: 8px;
  --radius-3: 14px;
  --radius-pill: 999px;
  --section-pad: var(--space-10);
  --rule-color: var(--accent);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.45), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-2: 0 18px 48px rgba(0,0,0,0.58);
}

/* ---- Structural personality: refined, traditional --------- */

/* Tall, formal serif headings - let the display face breathe */
.theme-heritage h1,
.theme-heritage h2,
.theme-heritage .hero__title,
.theme-heritage .intro__lede,
.theme-heritage .menu-group__title h3,
.theme-heritage .footer__wordmark { letter-spacing: 0.01em; }

/* Barber-pole rule: red core with cream-gold flanks */
.theme-heritage .rule {
  height: 3px;
  width: 72px;
  background: linear-gradient(90deg,
    var(--accent-2) 0 18%, var(--accent) 18% 82%, var(--accent-2) 82% 100%);
}

/* Menu cards: matte navy panels with a hairline gold edge */
.theme-heritage .menu-group {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1);
}
.theme-heritage .menu-group__title { border-bottom: 1.5px solid var(--accent); }
.theme-heritage .menu-group__title h3 { font-size: 1.7rem; }
.theme-heritage .menu-row__price { color: var(--accent-2); }

/* Hero lede in italic serif reads as a tailored sub-line */
.theme-heritage .hero__lede { font-style: italic; }

/* A subtle barber-pole stripe accent above the hero ledes */
.theme-heritage .hero__tagline { color: var(--accent-2); }

/* Gold-circle socials warm to red on hover */
.theme-heritage .socials a { border-color: var(--hairline-2); color: var(--accent-2); }
.theme-heritage .socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Ghost button: cream outline that fills with red on hover */
.theme-heritage .btn--ghost { border-color: color-mix(in srgb, var(--hero-ink) 60%, transparent); color: var(--hero-ink); }
.theme-heritage .btn--ghost:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Solid button: cream ink on barber-pole red */
.theme-heritage .btn { color: var(--on-accent); }