/*
 * D10 header states (Header.tsx). Loaded on body.td-new only (inc/scroll.php),
 * and every rule is keyed to the pilot header root (site part 13286, element
 * 292bf84d), so nothing here can reach the live header 11064.
 *
 * Site parts get no local Atomic CSS (open bug), so the states live here:
 * - default:  fixed, transparent, dark text, gradient logo (theme="light")
 * - body.td-header-dark (PHP list or a dark hero detected by scroll.js):
 *             white logo, links and burger until scrolled (theme="dark")
 * - .td-header--scrolled (scroll.js, scrollY > 80): white/80 + blur + shadow,
 *             tighter padding, dark text and gradient logo again.
 * Element classes (td-hdr-*) are global classes; the mobile panel's open
 * state comes from assets/js/header-menu.js.
 * If the header is rebuilt with a new root ID, change it here and in
 * td_scroll_config() (inc/scroll.php).
 */

body.td-new [data-id="292bf84d"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  margin: 0;
  padding: 1.5rem 1.5rem;
  background-color: transparent;
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease,
    -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

@media (min-width: 768px) {
  body.td-new [data-id="292bf84d"] {
    padding: 2rem 2.5rem;
  }
}

/* Keep the header below the WP admin bar for logged-in users. */
body.td-new.admin-bar [data-id="292bf84d"] {
  top: 32px;
}

@media (max-width: 782px) {
  body.td-new.admin-bar [data-id="292bf84d"] {
    top: 46px;
  }
}

/* Below 600px the admin bar is position: absolute and scrolls away, so once
   the header turns "scrolled" (scrollY > 80) it must sit at the very top. */
@media (max-width: 600px) {
  body.td-new.admin-bar [data-id="292bf84d"].td-header--scrolled {
    top: 0;
  }
}

/* Scrolled: bg-white/80 backdrop-blur-xl shadow-sm py-4 px-6 md:px-10 */
body.td-new [data-id="292bf84d"].td-header--scrolled {
  padding: 1rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  body.td-new [data-id="292bf84d"].td-header--scrolled {
    padding: 1rem 2.5rem;
  }
}

/*
 * Text colours. The default (dark text, gradient logo) lives in the global
 * classes td-hdr-logo / td-hdr-link / td-hdr-dot / td-hdr-bline (Elementor
 * kit). Only the body-class state is here: dark hero, not yet scrolled =
 * white logo, top-level links, dots and burger (Header.tsx theme="dark").
 * Dropdowns and the mobile panel keep their dark-on-white colours.
 */
body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-logo {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-image: none;
}

body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-logo a {
  color: inherit;
  -webkit-text-fill-color: #fff;
}

body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-link {
  color: #fff;
}

body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-link:hover,
body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-link:focus-visible {
  color: #E8247C;
}

body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-dot {
  background-color: rgba(255, 255, 255, 0.2);
}

body.td-new.td-header-dark [data-id="292bf84d"]:not(.td-header--scrolled) .td-hdr-bline {
  background-color: #fff;
}

/*
 * Mobile panel open (assets/js/header-menu.js adds td-header--menu-open): a
 * backdrop-filter on the header would make it the containing block of the
 * fixed panel, squeezing the panel into the header bar, so drop the blur.
 */
body.td-new [data-id="292bf84d"].td-header--menu-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body.td-new [data-id="292bf84d"] {
    transition: none;
  }
}