/* ============================================================================
   LAYOUT  —  announcement bar, header/nav, footer, buttons.
   Variables only. Markup is injected by js/components.js so it stays identical
   across every page.
   ============================================================================ */

/* ---------------------------------------------------------------- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  transition: transform var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out),
              box-shadow var(--speed-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

/* Button colors come from the component the button sits in (--btn-bg / --btn-fg
   / --btn-bg-hover / --btn-ghost), each set with an explicit hex in theme.css.
   The values after the comma are only a last resort if a button is dropped
   somewhere without a component block. */
.btn--primary {
  background-color: var(--btn-bg, var(--color-accent));
  color: var(--btn-fg, var(--color-accent-contrast));
}
.btn--primary:hover {
  background-color: var(--btn-bg-hover, var(--color-accent-hover));
  color: var(--btn-fg, var(--color-accent-contrast));
  box-shadow: 0 8px 24px -6px var(--btn-bg, var(--color-accent));
}

.btn--ghost {
  background-color: transparent;
  color: var(--btn-ghost, var(--accent, var(--color-accent)));
  border: 1px solid color-mix(in srgb, var(--btn-ghost, var(--accent, var(--color-accent))) 45%, transparent);
}
.btn--ghost:hover { background-color: color-mix(in srgb, var(--btn-ghost, var(--accent, var(--color-accent))) 10%, transparent); }

.btn--solid-dark {
  background-color: var(--color-surface-dark);
  color: var(--color-text-invert);
}
.btn--solid-dark:hover { opacity: 0.85; color: var(--color-text-invert); }

/* Inline text link with chevron */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  color: var(--accent, var(--color-accent));
}
.link-arrow::after { content: "›"; font-size: 1.25em; line-height: 0; transition: transform var(--speed-fast) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------- ANNOUNCEMENT BAR ----- */
.announce {
  position: relative;
  z-index: var(--z-announce);
  background-color: var(--color-announce-bg);
  color: var(--color-announce-text);
  font-size: var(--fs-small);
  text-align: center;
}
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-2xs) var(--content-gutter);
  min-height: 36px;
}
.announce a { color: var(--announce-dot); font-weight: var(--weight-medium); }
.announce a:hover { text-decoration: underline; }
.announce__dot {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background-color: var(--announce-dot);
  animation: announce-pulse 2.4s var(--ease-out) infinite;
}
@keyframes announce-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--announce-dot) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--announce-dot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--announce-dot) 0%, transparent); }
}
.announce__close {
  position: absolute; right: var(--content-gutter); top: 50%; transform: translateY(-50%);
  color: var(--color-announce-text); opacity: 0.6; font-size: 1.1rem; line-height: 1;
}
.announce__close:hover { opacity: 1; }

/* ----------------------------------------------------------------- HEADER -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(var(--backdrop-blur));
  backdrop-filter: saturate(180%) blur(var(--backdrop-blur));
  border-bottom: 1px solid var(--color-header-border);
  transition: var(--theme-transition);
}
.site-header__inner {
  max-width: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--content-gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }


/* Moving line-of-light shimmer over text on hover.
   Uses the theme accent as the glow band — nothing hardcoded. */
@keyframes text-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
.brand:hover { --_shimmer: var(--brand-accent, var(--color-accent)); }
.nav__link:hover { --_shimmer: var(--nav-accent, var(--color-accent)); }
.footer-col a:hover,
.footer-col h4:hover { --_shimmer: var(--footer-accent, var(--color-accent)); }
.brand:hover,
.nav__link:hover,
.footer-col a:hover,
.footer-col h4:hover {
  /* Wide, bright band with a near-white core so the sweeping line-of-light is
     unmistakable over grey header/footer text, in both light and dark. */
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 8%,
    var(--_shimmer) 28%,
    color-mix(in srgb, var(--_shimmer) 45%, var(--title-shimmer)) 50%,   /* bright moving core */
    var(--_shimmer) 72%,
    currentColor 92%, currentColor 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Accent halo so the hovered text actually glows, not just shimmers. */
  text-shadow: 0 0 16px var(--_shimmer);
  animation: text-shimmer 1.15s linear infinite;
}

/* Dark / light toggle — sliding switch with sun + moon icons inside the track.
   Persists, never navigates. All colors come from the --switch-* theme variables. */
.theme-switch {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 58px; height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--switch-track-off);
  box-shadow: inset 0 0 0 1px var(--color-header-border);
  transition: background-color var(--speed-normal) var(--ease-out),
              box-shadow var(--speed-normal) var(--ease-out);
}
[data-theme="dark"] .theme-switch { background-color: var(--switch-track-on); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }

/* Faint guide icons at the two ends of the track (sun left, moon right). */
.theme-switch__icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  transition: opacity var(--speed-normal) var(--ease-out);
}
.theme-switch__icon svg { width: 100%; height: 100%; display: block; }
.theme-switch__icon--sun  { left: 8px;  color: var(--switch-icon-sun); }
.theme-switch__icon--moon { right: 8px; color: var(--switch-icon-moon); }
:root:not([data-theme="dark"]) .theme-switch__icon--moon { opacity: 0.3; }
[data-theme="dark"] .theme-switch__icon--sun { opacity: 0.3; }

/* The sliding knob carries the ACTIVE icon (sun in light, moon in dark). */
.theme-switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: var(--radius-circle);
  background-color: var(--switch-knob);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--speed-normal) cubic-bezier(0.34, 1.56, 0.64, 1),
              width var(--speed-fast) var(--ease-out);
}
.theme-switch__knob svg { width: 13px; height: 13px; display: block; }
.theme-switch__knob .knob-sun  { color: var(--switch-knob-icon); }
.theme-switch__knob .knob-moon { color: var(--switch-knob-icon); display: none; }
[data-theme="dark"] .theme-switch__knob .knob-sun  { display: none; }
[data-theme="dark"] .theme-switch__knob .knob-moon { display: block; }
.theme-switch:hover .theme-switch__knob { width: 27px; }
.theme-switch:active .theme-switch__knob { width: 30px; }
[data-theme="dark"] .theme-switch .theme-switch__knob { transform: translateX(28px); }
[data-theme="dark"] .theme-switch:hover .theme-switch__knob { transform: translateX(25px); }
[data-theme="dark"] .theme-switch:active .theme-switch__knob { transform: translateX(22px); }
.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.15rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-header-text);
}
.brand:hover { color: var(--color-header-text-hover); }

.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--color-header-text);
  padding: 0.4em 0;
  opacity: 0.85;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background-color: var(--nav-accent, var(--color-accent)); border-radius: var(--radius-pill);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--speed-normal) var(--ease-out);
}
.nav__link:hover { opacity: 1; color: var(--color-header-text-hover); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--active { opacity: 1; font-weight: var(--weight-bold); }
.nav__link--active::after { transform: scaleX(1); }

/* Mobile nav toggle */
.nav__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 1.5px;
  background-color: var(--color-header-text); transition: transform var(--speed-fast) var(--ease-out), opacity var(--speed-fast);
}
.nav__toggle span::before { position: absolute; transform: translateY(-6px); }
.nav__toggle span::after  { position: absolute; transform: translateY(6px); }
.nav.is-open .nav__toggle span { background-color: transparent; }
.nav.is-open .nav__toggle span::before { transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: rotate(-45deg); }

@media (max-width: 860px) {
  /* CRITICAL: the header uses backdrop-filter, which makes it the containing
     block for position:fixed descendants. That collapsed the full-screen menu
     down to the header bar's box — so it had no background and the links spilled
     over the page. Removing the filter on mobile lets the fixed menu resolve
     against the VIEWPORT and cover the whole screen. Use a solid bar instead. */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--color-header-bg-solid);
  }
  /* While the menu is open, raise the WHOLE header above the announcement bar
     (which lives in a higher root stacking context) so the menu covers it. */
  .nav-open .site-header { z-index: calc(var(--z-announce) + 2); }

  .nav__toggle { display: inline-flex; position: relative; z-index: 2; }
  .nav__list {
    position: fixed;
    inset: 0;
    z-index: 1;                              /* below the toggle(2)/switch(3) so they stay tappable */
    flex-direction: column;
    align-items: center;
    /* TOP-aligned (NOT centered): centering a tall list clips the first items
       off the top with no way to reach them. Starting from the top means the
       first link always sits just below the bar and nothing is ever cut off. */
    justify-content: flex-start;
    gap: var(--space-sm);
    /* Clear the top bar, then list the items straight down. overflow-y is a
       safety net for short screens (extra items scroll DOWN, never off the top). */
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* GUARANTEED-opaque solid sheet (the *-solid token is a hard hex, never
       translucent) so nothing bleeds through, in light AND dark. */
    background-color: var(--color-header-bg-solid);
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--speed-normal) var(--ease-out);
  }
  .nav.is-open .nav__list { transform: translateX(0); }
  .nav__link { font-size: var(--fs-heading); }
}

/* ----------------------------------------------------------------- FOOTER -- */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  border-top: 1px solid var(--section-divider);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: var(--fs-small);
  transition: var(--theme-transition);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-footer-border);
}
.footer-col--pages { padding-left: var(--space-2xl); }   /* nudge middle column right */
.footer-col h4 {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-footer-heading);
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a { color: var(--color-footer-link); }
.footer-col a:hover { color: var(--color-footer-link-hover); }
/* "Legal" heading sits lower in the column with a hairline above it (line spans
   only this column), and carries the group's 4th colour. */
/* "Legal" heading sits lower with a hairline above it (spans only this column).
   Colour stays the normal footer tone at rest; the red is the hover ANIMATION
   accent (via --footer-accent below), matching the other columns. */
.footer-col h4.footer-col__legal-head {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--section-divider);
}
.footer-col__legal { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-sm); }
.footer-col__legal a { color: var(--color-footer-link); }
.footer-col__legal a:hover { color: var(--color-footer-link-hover); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding-top: var(--space-md);
}