/* ==========================================================================
   Tonecraft Piano Works — Header theme states (adapted for this theme's
   real header markup — see template-parts/site-header.php)
   assets/css/tcp-header-theme.css

   Pairs with assets/js/tcp-header-theme.js. The JS only ever sets two
   things on .tcp-header:
     - data-theme="dark" | "light"
     - the .is-solid class
   Everything below reacts to those two, replacing the old
   body.theme-dark / body.theme-light header rules (removed from
   style.css) — the header now themes correctly on every template, not
   just the front page. body.theme-dark/light itself is still set (by
   assets/js/front-page-interactions.js, front-page only) purely to
   drive .tcp-tick-nav's dot coloring — see style.css.

   Nav-link hover color still fixes a real contrast bug: gold-on-cream
   measures 2.97:1, below the 3:1 WCAG floor for UI elements — nearly
   invisible on the light header. The light header hovers to burgundy
   (11.05:1) instead; gold stays on the dark header, where it measures
   4.93:1 and holds up fine.

   Removed: the per-theme box-shadow hairline that used to sit under
   .is-solid (gold on dark, burgundy on light). It was showing up as a
   stray gold line even on light-header pages where it should never
   render, so rather than keep chasing the cause it's been dropped —
   solid state now reads purely from the background/blur change. If a
   hairline divider is wanted back, add it as one neutral, always-the-
   same-color border rather than a per-theme color swap, so it can't
   show the wrong color on the wrong page again.
   ========================================================================== */

.tcp-header.is-solid[data-theme="dark"] {
  background: var(--tcp-charcoal-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.tcp-header.is-solid[data-theme="light"] {
  background: var(--tcp-cream-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* v1.3.5: circle-repeat pattern — light header theme only. Base
   positioning/sizing for .tcp-header-bg-pattern lives in style.css;
   this is just the "turn it on, and only for this theme" switch, kept
   here with the rest of the data-theme rules. Currently this means
   every inner page (Contact, Services, About, etc.), since those start
   on data-theme="light" immediately — plus the homepage header itself,
   any time it flips to data-theme="light" while scrolling past one of
   its light sections. The dark-theme rule below is a defensive
   explicit hide, not strictly required since .tcp-header-bg-pattern
   is display:none by default in style.css.
   v1.3.8: opacity now reads from --tcp-header-pattern-opacity (was a
   hardcoded .12) — see the HEADER OPACITY & PATTERN CONTROLS block in
   style.css's :root for where to change it. */
.tcp-header.is-solid[data-theme="light"] .tcp-header-bg-pattern {
  display: block;
  background-image: url("../images/bg-circle-repeat-x3px-XY.png");
  opacity: var(--tcp-header-pattern-opacity);
}

.tcp-header[data-theme="dark"] .tcp-header-bg-pattern {
  display: none;
}

/* Logo swap — both lockups always live in the markup (site-header.php),
   this just shows the correct one. No JS image-swap, no flash. */
.tcp-header[data-theme="dark"] .tcp-logo-img.tcp-logo-on-dark { display: block; }
.tcp-header[data-theme="dark"] .tcp-logo-img.tcp-logo-on-light { display: none; }
.tcp-header[data-theme="light"] .tcp-logo-img.tcp-logo-on-dark { display: none; }
.tcp-header[data-theme="light"] .tcp-logo-img.tcp-logo-on-light { display: block; }

/* Primary nav — dark/cream is the base state in style.css already;
   only the light override is needed here. */
.tcp-header[data-theme="light"] .tcp-primary-nav .tcp-menu a { color: var(--tcp-charcoal); opacity: .78; }
.tcp-header[data-theme="light"] .tcp-primary-nav .tcp-menu a:hover { color: var(--tcp-burgundy); }
.tcp-header[data-theme="light"] .tcp-primary-nav .tcp-menu a::after { background: var(--tcp-burgundy); }

/* Hamburger icon */
.tcp-header[data-theme="light"] .tcp-menu-toggle { color: var(--tcp-charcoal); }

/* Header "Book a Visit" CTA
   FIX (Aug 6, 2026): this rule previously read
     .tcp-header-cta .tcp-btn-primary
   — a descendant selector. But .tcp-header-cta and .tcp-btn-primary are
   BOTH classes on the same <a> tag (see site-header.php:
   class="tcp-btn tcp-btn-primary tcp-header-cta"), not nested elements,
   so that selector never matched anything. On top of that, the color
   it was trying to apply was charcoal, not the brand burgundy used for
   every other CTA on the site. Fixed to a compound selector (no space)
   with the correct color, explicitly for both header themes:
   dark chrome (over the hero) = solid burgundy fill.
   light chrome (inner pages / scrolled) = burgundy outline, fills on
   hover — matches the About-page reference screenshot. */
.tcp-header[data-theme="dark"] .tcp-header-cta.tcp-btn-primary {
  background: var(--tcp-burgundy) !important;
  border-color: var(--tcp-burgundy) !important;
  color: var(--tcp-cream) !important;
}
.tcp-header[data-theme="dark"] .tcp-header-cta.tcp-btn-primary:hover {
  border-color: var(--tcp-gold) !important;
}
.tcp-header[data-theme="light"] .tcp-header-cta.tcp-btn-primary {
  background: transparent !important;
  border-color: var(--tcp-burgundy) !important;
  color: var(--tcp-burgundy) !important;
}
.tcp-header[data-theme="light"] .tcp-header-cta.tcp-btn-primary:hover {
  background: var(--tcp-burgundy) !important;
  color: var(--tcp-cream) !important;
}
.tcp-header-cta.tcp-btn-primary::before {
  background: var(--tcp-gold);
}

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