/* =============================================================================
   Org Website Header - Transparent Overlay + Whole-Header Hover Tint
   Loaded by views/layouts/website.php only when the org enabled the overlay
   and/or hover-tint header settings. Companion to website-header-strips.css.
   ============================================================================= */

/* ---------- Transparent overlay header ---------------------------------- */

/* Float the header over the first full-bleed section. Scoped under the body
   class so this wins over the sticky `:has()` rule in website-header-strips.css
   when an org has both sticky and overlay enabled. */
.website-body--overlay-header .website-header-overlay {
    position: fixed;
    top: var(--wb-trial-banner-h, 0px);
    left: 0;
    right: 0;
    z-index: 1040;
}

/* While transparent, the per-strip background fills must drop out so the hero
   shows through. Intentionally overrides the admin's per-strip bg choice -
   that is the whole point of overlay mode. */
.website-header-overlay:not(.website-header-overlay-solid)
    .website-header-strip[class*="website-header-strip-bg-"] {
    background: transparent !important;
    border-bottom: none;
}

/* Text colour while transparent at the top of the page.
 *
 * SCOPE: only the text-bearing brand + navigation widgets follow the overlay
 * colour. Control widgets that own their own appearance - the theme switcher
 * and language switcher - are deliberately NOT recoloured (their icons/state
 * shouldn't flip with the hero text colour). We therefore target brand + nav
 * explicitly instead of blanketing the whole header (no header-element color,
 * no bare `a`/`button`/`i`/`[class^=website-header-section-]`).
 *
 * `!important` is REQUIRED: the main-app theme.css (present on org sites via
 * the theme switcher) declares `.navbar-brand, .nav-link { color:
 * var(--text-primary) !important }`, which otherwise wins on every link.
 *
 * The CSS-variable overrides feed website-theme.css's own nav rules and the
 * mobile drawer; they also cascade to nav-link icons (which have no own
 * colour). The brand wordmark/combo use `color: inherit`, so colouring their
 * wrappers carries the text. */
.website-header-overlay-text-light:not(.website-header-overlay-solid) {
    --website-nav-link-color: #fff;
    --website-nav-link-hover: rgba(255, 255, 255, 0.82);
    --website-nav-link-active: #fff;
}
.website-header-overlay-text-light:not(.website-header-overlay-solid) .nav-link,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .navbar-brand,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .website-nav-brand-text,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .website-header-section-logo,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .website-header-section-wordmark,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .website-header-section-brand-combo {
    color: var(--website-nav-link-color) !important;
}

.website-header-overlay-text-dark:not(.website-header-overlay-solid) {
    --website-nav-link-color: #1a1a1a;
    --website-nav-link-hover: rgba(26, 26, 26, 0.7);
    --website-nav-link-active: #1a1a1a;
}
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .nav-link,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .navbar-brand,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .website-nav-brand-text,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .website-header-section-logo,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .website-header-section-wordmark,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .website-header-section-brand-combo {
    color: var(--website-nav-link-color) !important;
}

/* Nav-link hover/focus over a hero. The default nav hover paints a solid pill
   (`--color-primary-50` in light theme, `--color-neutral-800` in dark theme) -
   the dark pill reads as a blob over the hero. Replace it with a subtle
   translucent wash matching the overlay text colour and keep the text legible. */
.website-header-overlay-text-light:not(.website-header-overlay-solid) .nav-link:hover,
.website-header-overlay-text-light:not(.website-header-overlay-solid) .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--website-nav-link-color) !important;
}
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .nav-link:hover,
.website-header-overlay-text-dark:not(.website-header-overlay-solid) .nav-link:focus {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--website-nav-link-color) !important;
}

/* Selected-item pill over a hero. An org that set a custom "Menu Selected
   Background" would otherwise paint a solid blob over the image. Drop it while
   transparent so the current item reads via the overlay text colour (bold)
   instead - auto-contrast wins over the hero. */
.website-header-overlay:not(.website-header-overlay-solid) .nav-link.active {
    background-color: transparent !important;
}

/* Control widgets over the hero. The language switcher flag circles and the
   theme toggle pill carry their own solid var(--bg-tertiary) backgrounds, which
   read as messy blocks floating on the hero. While transparent, drop their
   backgrounds + borders so they sit cleanly over the image like the nav links.
   Hover/focus (and the checked "on" track on the theme toggle) are pinned
   transparent too so nothing repaints a fill - the lift/scale micro-interaction
   stays, only the background is removed. The knob (::before) keeps its own
   color, so the toggle still reads as on/off via the slider position. */
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-flag,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-flag:hover,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-flag:focus,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-link,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-link:hover,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .language-link:focus,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .theme-toggle-slider,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .theme-toggle-switch:hover .theme-toggle-slider,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .theme-toggle-input:checked + .theme-toggle-slider,
/* The control widgets sit inside .nav-link wrappers, which otherwise pick up
   the translucent .nav-link:hover wash defined above. Pin those wrappers (and
   the icon-button / toggle-switch triggers) transparent in both sections so
   hovering a flag or the toggle never flashes a highlight block. */
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .nav-link:hover,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .nav-link:focus,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .theme-icon-button:hover,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-theme .theme-icon-button:focus,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .nav-link:hover,
.website-header-overlay:not(.website-header-overlay-solid) .website-header-section-language .nav-link:focus {
    background: transparent !important;
    border-color: transparent !important;
}

/* Solid state - toggled by JS once the visitor scrolls past the threshold.
   Paints the header's own background (full theme-aware fallback chain, since
   --website-bg is not always defined) and restores readable text. */
.website-header-overlay.website-header-overlay-solid {
    background: var(--website-bg, var(--bg-primary, var(--bs-body-bg, #fff)));
    color: var(--website-fg, var(--text-primary, inherit));
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Strips stay transparent in the solid state too, so the header element's own
   background (above) is what shows. */
.website-header-overlay.website-header-overlay-solid
    .website-header-strip[class*="website-header-strip-bg-"] {
    background: transparent !important;
}

/* First-section clearance. The first rendered section carries an explicit
   `website-section--overlay-first` marker (set server-side by the section
   loop, with a JS safety-net in the overlay script for the rare case where
   the first section is empty and early-returns). A class is required because
   `:first-of-type` matches the first <div> by tag, not the first element of
   this class - and the org background widget can emit a leading <div>.
   The hero image still fills the whole wrapper (incl. this padding) so it
   stays full-bleed behind the floating header; only the content is pushed down. */
.website-body--overlay-header .website-section--overlay-first {
    padding-top: calc(var(--website-section-padding-top, var(--website-section-padding-y)) + var(--website-header-height, 96px));
}

/* ---------- Whole-header hover tint ------------------------------------- */

/* A wash over the entire header band on hover. Defaults to the org's brand
   colour so the highlight reads as intentional and on-brand; falls back to the
   design-token primary, then to currentColor (theme-aware) when no brand colour
   resolves. Override per site with --website-header-hover-tint-color.
   pointer-events:none + the strip-row z-index keep links clickable above it. */
.website-header-hover-tint {
    --website-header-hover-tint-color: var(--website-primary, var(--color-primary-500, currentColor));
}

/* The tint is painted per-strip, not as one overlay behind the strips. A
   single header-level ::after sits at z-index 0, but a sticky strip is
   positioned at z-index 1030 and paints above it: an opaque strip bg
   (surface/primary/dark/light) then occludes the tint while a transparent
   one lets it show through. Tinting each strip individually - above its own
   background, below its own content - keeps the wash visible on every
   background type and every special case (sticky / glass / shrink).

   Each strip needs to be a containing block for its own ::after. Skip sticky
   strips: they are already positioned (position: sticky) and re-asserting
   position here would clobber that. */
.website-header-hover-tint .website-header-strip:not(.website-header-strip-sticky) {
    position: relative;
}

.website-header-hover-tint .website-header-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--website-header-hover-tint-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 0;
}

/* Hover anywhere in the header lights every strip's tint together. */
.website-header-hover-tint:hover .website-header-strip::after {
    opacity: 0.1;
}

/* Keep strip content (logo, nav, icons) painting above the tint overlay. */
.website-header-hover-tint .website-header-strip-row {
    position: relative;
    z-index: 1;
}