/* =========================================================
   HEADER COLOUR — drop-in override
   ---------------------------------------------------------
   This file changes ONLY the top header bar. Nothing else on
   the site is affected.

   TO USE IT (one line, once):
   In index.html, just below this existing line…

       <link rel="stylesheet" href="styles.css">

   …add this line:

       <link rel="stylesheet" href="header-color.css">

   TO CHANGE THE COLOUR:
   Edit the values in the ACTIVE PALETTE block below — or copy
   one of the ready-made presets at the bottom over it.
   Only --header-bg is essential; the others keep text, the
   button and the logo readable against whatever background
   you choose.
   ========================================================= */


/* ─────────────── ACTIVE PALETTE (edit here) ─────────────── */
:root{
  --header-bg:        #24352C;   /* header background colour            */
  --header-text:      #F3EFE6;   /* nav links + hamburger lines         */
  --header-accent:    #C08A5E;   /* link underline + last mobile link   */
  --header-border:    rgba(243,239,230,.16); /* hairline when scrolled  */

  --header-cta-bg:    #C08A5E;   /* "Book a consultation" button        */
  --header-cta-text:  #24352C;   /* button label                        */
  --header-cta-hover: #F3EFE6;   /* button on hover                     */

  /* Logo that suits the background:
     dark header → assets/logo-light.png · light header → assets/logo.png */
  --header-logo:      url('assets/logo-light.png');
}


/* ─────────── APPLICATION (no need to edit below) ─────────── */

.site-header{
  background:var(--header-bg) !important;
  backdrop-filter:none;
}
.site-header.is-stuck{ border-bottom-color:var(--header-border) !important; }

/* swaps the logo image while keeping its alt text for screen readers
   (modern browsers; older ones simply keep the original logo) */
.brand img{ content:var(--header-logo); }

/* desktop nav */
.nav a{ color:var(--header-text) !important; }
.nav a::after{ background:var(--header-accent) !important; }

.nav .nav-cta{
  background:var(--header-cta-bg) !important;
  color:var(--header-cta-text) !important;
}
.nav .nav-cta:hover{
  background:var(--header-cta-hover) !important;
  color:var(--header-bg) !important;
}

/* mobile hamburger + dropdown */
.menu-toggle span{ background:var(--header-text) !important; }
.mobile-nav{
  background:var(--header-bg) !important;
  border-top-color:var(--header-border) !important;
}
.mobile-nav a{
  color:var(--header-text) !important;
  border-bottom-color:var(--header-border) !important;
}
.mobile-nav a:last-child{ color:var(--header-accent) !important; }


/* =========================================================
   READY-MADE PRESETS
   To use one, copy its block over the ACTIVE PALETTE above.
   =========================================================

   ── Deep forest (currently active) — bookends with the footer
   --header-bg:#24352C; --header-text:#F3EFE6; --header-accent:#C08A5E;
   --header-border:rgba(243,239,230,.16);
   --header-cta-bg:#C08A5E; --header-cta-text:#24352C; --header-cta-hover:#F3EFE6;
   --header-logo:url('assets/logo-light.png');

   ── Solid warm ivory — subtle, clean, keeps the copper logo
   --header-bg:#F3EFE6; --header-text:#24352C; --header-accent:#C08A5E;
   --header-border:rgba(36,53,44,.12);
   --header-cta-bg:#24352C; --header-cta-text:#F3EFE6; --header-cta-hover:#97572F;
   --header-logo:url('assets/logo.png');

   ── Rose-gold band — warm and soft
   --header-bg:#E9D8C7; --header-text:#3B2A1C; --header-accent:#97572F;
   --header-border:rgba(59,42,28,.14);
   --header-cta-bg:#3B2A1C; --header-cta-text:#F3EFE6; --header-cta-hover:#97572F;
   --header-logo:url('assets/logo.png');

   ── Charcoal — neutral and modern
   --header-bg:#1E1E1C; --header-text:#F3EFE6; --header-accent:#C08A5E;
   --header-border:rgba(243,239,230,.16);
   --header-cta-bg:#C08A5E; --header-cta-text:#1E1E1C; --header-cta-hover:#F3EFE6;
   --header-logo:url('assets/logo-light.png');

   ========================================================= */