/* =============================================
   THEME: Forest & Brass  —  Hair by Gerry
   Creative-colour studio with a retro-glam soul.
   Deep forest green + antique brass + plum spark on warm cream.
   The chrome stays elegant; Gerry's colour work supplies the colour.
   Font Pairing: Cormorant Garamond + Source Sans 3
   Aesthetic: Luxe (20px corners, deep soft shadows)
   ============================================= */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* --- Theme Variables --- */
:root {
  /* Colour Palette — forest anchor, brass fine-detail, plum spark */
  --color-primary: #2D4A3E;
  --color-primary-light: #3D6655;
  --color-primary-dark: #1A3028;
  --color-secondary: #e9b544;        /* brass/gold — decorative use (hairlines, icons, borders) */
  --color-secondary-light: #D4A832;
  --color-secondary-dark: #8B6508;   /* darker brass — safe for large text / emphasis */
  --color-accent: #6B3A5D;           /* plum spark — nods to his pink/purple colour work */
  --color-accent-light: #8E5580;

  --color-bg: #FAFAF7;               /* warm cream — never flat white */
  --color-bg-alt: #F0EFE8;
  --color-bg-dark: #1A3028;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F7F6F0;

  --color-text: #2C2C2C;
  --color-text-light: #5C5C5C;
  --color-text-inverse: #FAFAF7;
  --color-text-heading: #1A1A1A;

  --color-border: #DDD8CC;
  --color-border-light: #EBE8E0;

  --color-success: #2D6A4F;
  --color-error: #B33A3A;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Sizing overrides — Cormorant Garamond renders small, so scale headings up */
  --text-h1-desktop: 3.4rem;
  --text-h2-desktop: 2.5rem;
  --text-h3-desktop: 1.75rem;

  /* Aesthetic dials — Luxe preset */
  --aesthetic-radius: 20px;
  --aesthetic-shadow-card: 0 8px 32px rgba(26, 48, 40, 0.10), 0 2px 6px rgba(26, 48, 40, 0.05);
  --aesthetic-border-width: 1px;
}

/* ---------------------------------------------
   DECORATIVE LAYER — small touches, big premium signal
   --------------------------------------------- */

/* Hero text stays crisp over full-vibrancy colour photos */
.hero__heading,
.hero__text {
  text-shadow: 0 1px 6px rgba(26, 48, 40, 0.45);
}

/* Italic-serif emphasis on key words in headings, tinted brass.
   Large-text only, so brass passes AA contrast. Use <em> in headings. */
h1 em,
h2 em,
h3 em,
.hero__heading em,
.page-header h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-secondary-dark);
}

/* Eyebrow labels — refined letter-spacing + a short brass hairline flourish */
.section-label {
  letter-spacing: 0.16em;
  font-weight: 600;
}
.section-label::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 0.55em;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light));
  border-radius: 2px;
}
/* Centre the hairline when the label sits in a centred block */
.text-center .section-label::after,
.hero__content[style*="center"] .section-label::after {
  margin-left: auto;
  margin-right: auto;
}

/* Pull-quote / blockquote — larger, softer, on-brand */
.blockquote {
  border-radius: var(--aesthetic-radius);
}
.blockquote__text {
  font-size: var(--text-3xl);
  font-style: italic;
}

/* Gallery — luxe rounded frames + a refined hover lift on top of the
   component's built-in zoom (motion reads as quality) */
.gallery__item {
  border-radius: var(--aesthetic-radius);
  box-shadow: var(--aesthetic-shadow-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(26, 48, 40, 0.16);
}

/* Section-label / link accents pick up brass on hover */
.card__link:hover,
.footer__link:hover {
  color: var(--color-secondary-dark);
}

/* Portrait images a touch taller on desktop so single-figure shots read well */
@media (min-width: 768px) {
  .intro__image-wrap {
    min-height: 560px;
  }
}

/* ---------------------------------------------
   ACCESSIBILITY — gold/brass CTA contrast
   The brass fill (#B8860B) + cream text is only 3.1:1 (fails WCAG AA).
   These three contexts fill the CTA with brass: the transparent-dark
   homepage nav, the showcase hero, and the cta-banner accent button.
   Give them charcoal text (5.5:1) and BRIGHTEN on hover (lighter gold,
   8:1) instead of darkening — classic luxe gold-with-dark-label, and
   contrast holds in both states.
   --------------------------------------------- */
.nav--transparent-dark .btn--primary,
.hero--showcase-dark .btn--primary,
.hero--image .btn--primary,
.btn--accent {
  color: var(--color-text-heading);
}
.nav--transparent-dark .btn--primary:hover,
.hero--showcase-dark .btn--primary:hover,
.hero--image .btn--primary:hover,
.btn--accent:hover {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-text-heading);
}

/* Hero: breathing room between the tick-points and the buttons
   (the ticks sit directly above the actions and were cramped). */
.hero--showcase .hero__ticks,
.hero--image .hero__ticks {
  margin-bottom: var(--space-lg);
}

/* Image-overlay-right hero: the left of the photo stays clear, fading into a
   forest overlay on the right so the right-aligned text reads cleanly. A soft
   top vignette keeps the transparent nav legible across the top. */
.hero--image-right::before {
  background:
    linear-gradient(to bottom, rgba(26, 48, 40, 0.45) 0%, rgba(26, 48, 40, 0) 24%),
    linear-gradient(100deg, rgba(26, 48, 40, 0) 0%, rgba(26, 48, 40, 0) 40%, rgba(26, 48, 40, 0.35) 58%, rgba(26, 48, 40, 0.72) 78%, rgba(10, 12, 11, 0.9) 100%);
}

/* Hero heading emphasis: teal -> pink gradient text (client request), hero only */
.hero__heading em {
  background: linear-gradient(90deg, #33d9e3 0%, #ff9da6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ff9da6;
}

/* ---------------------------------------------
   LIGHT FROST HERO CARD (homepage)
   The frosted card sits on the calmer right side over the brick, with the
   photo shown at full vibrancy (no overlay) so the colour work pops.
   The pale card supplies its own contrast, so the text-over-photo shadow
   is dropped — it ghosted darkly behind the transparent-filled gradient em
   and muddied it. The teal->pink emphasis is deepened so it reads on the
   pale card, and the card is nudged a touch more opaque over the bright,
   textured brick. */
.hero--showcase-light .hero__heading,
.hero--showcase-light .hero__text {
  text-shadow: none;
}
.hero--showcase-light .hero__content {
  background: rgba(255, 255, 255, 0.8);
}
/* Body copy: 17px and no width cap, so it fills the wider card */
.hero--showcase .hero__text {
  font-size: 17px;
  max-width: none;
}
/* Keep the hero Book CTA gold (with charcoal text for AA) so it matches the
   gold nav Book button right above it and the site-wide CTA — the frost-light
   default recolours .btn--primary to forest green, which would clash. */
.hero--showcase-light .btn--primary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-heading);
}
.hero--showcase-light .btn--primary:hover {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-text-heading);
}
.hero--showcase-light .hero__heading em {
  background: linear-gradient(90deg, #1f9bb0 0%, #d65a86 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #d65a86;
}

/* Widen the image-right hero so the heading + the 3 tick-pills sit on tidy rows */
@media (min-width: 768px) {
  .hero--image-right .hero__content { max-width: 860px; }
  .hero--image .hero__heading { font-size: 3rem; }
  .hero--image .hero__ticks { flex-wrap: nowrap; }
}

/* Frost card sizing: hold the heading at the approved 3rem (the theme scales
   H1 to 3.4rem for Cormorant, which gets cramped) and widen the card so the
   three trust ticks sit on a single row (right-aligned via the -right variant). */
@media (min-width: 768px) {
  .hero--showcase .hero__heading { font-size: 3rem; }
  .hero--showcase .hero__content { max-width: 650px; }
  .hero--showcase .hero__ticks { flex-wrap: nowrap; }
}

/* --- Mobile: stack the hero — photo as a ~400px banner, text below it ---
   The desktop layout floats a frosted card over the photo; on a phone that
   crops the colour work and crams the text. Instead, show Hair-1.jpg as a
   400px banner at the top (the transparent nav still floats over it) and drop
   the text underneath as a plain block on the cream background — no frost is
   needed with no photo behind it. NOTE: the banner image URL is hardcoded
   here because the section photo is set via an inline background-image; keep
   this in sync if the hero image ever changes. */
@media (max-width: 767px) {
  .hero--showcase {
    display: block;
    min-height: 0;
    padding: 0;
    background-image: none !important;   /* drop the full-bleed inline photo */
    background-color: var(--color-bg);
  }
  body:has(.nav--transparent) .hero--showcase { padding-top: 0; }

  .hero--showcase::before {
    content: "";
    display: block;
    height: 400px;
    background-image: url('../images/Hair-1.jpg');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
  }

  .hero--showcase .hero__inner {
    padding: var(--space-xl) var(--space-md);
  }

  .hero--showcase-light .hero__content {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    max-width: 100%;
    text-align: left;
  }
}

/* Full-bleed split images sit edge-to-edge: square corners, no drop shadow */
.split--bleed .split__image {
  border-radius: 0;
  box-shadow: none;
}

/* Products / accreditation logo bar — keep brand logos tidy and tonal */
.trust-bar__logo {
  max-height: 38px;
  width: auto;
  opacity: 0.85;
}

/* Nav logo mark (placeholder monogram until the real logo lands) */
.nav__logo {
  max-height: 44px;
  border-radius: 9px;
}

/* Pill eyebrow on image page-headers: drop the decorative hairline so the
   white pill reads as one clean element (the ::after looked like a stray bar). */
.page-header--image .section-label::after { display: none; }

/* Price figures read in the clean sans body face, not the display serif */
.treatment-list__price { font-family: var(--font-body); }

/* Keep the duration on its own muted line so it never mushes into the price
   (markup nests it inside the price as "£67.50<duration>1 hr 30 mins</duration>") */
.treatment-list__duration {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* Pricing accordions: tidy the category triggers + price rows inside them */
.pricing-accordion .accordion__trigger {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}
.pricing-accordion .treatment-list { margin-top: var(--space-sm); }