/* ============================================================================
   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--theme {
  background-color: var(--accent, var(--color-accent));
  color: var(--btn-theme-fg, #1d1d1f);
}
.btn--theme:hover {
  color: var(--btn-theme-fg, #1d1d1f);
  filter: brightness(1.08);
  box-shadow: 0 8px 24px -6px var(--glow, var(--accent, 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); }

/* Brand action buttons (Twitch / YouTube / Canva) — solid fill + brand glow. */
.btn--twitch,
.btn--youtube,
.btn--canva {
  color: #ffffff;
}
.btn--twitch svg,
.btn--youtube svg,
.btn--canva svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  display: block;
}
.btn--twitch {
  background-color: #9146ff;
  box-shadow: 0 6px 18px -6px rgba(145, 70, 255, 0.75);
}
.btn--twitch:hover {
  background-color: #772ce8;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(145, 70, 255, 0.9), 0 0 22px -2px rgba(145, 70, 255, 0.65);
}
.btn--youtube {
  background-color: #ff0000;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 0, 0.75);
}
.btn--youtube:hover {
  background-color: #e60000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(255, 0, 0, 0.9), 0 0 22px -2px rgba(255, 0, 0, 0.65);
}
/* Canva brand — cyan → purple gradient (not flat Twitch-purple / not flat teal). */
.btn--canva {
  background-color: #3e77da;
  background-image: linear-gradient(135deg, #00c4cc 0%, #3e77da 48%, #7d2ae8 100%);
  box-shadow: 0 6px 18px -6px rgba(62, 119, 218, 0.85);
}
.btn--canva:hover {
  background-color: #3569c4;
  background-image: linear-gradient(135deg, #00b0b8 0%, #3569c4 48%, #6b21d4 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(62, 119, 218, 0.95), 0 0 22px -2px rgba(0, 196, 204, 0.45);
}
.btn--canva .btn__brand-icon {
  width: 1.25em;
  height: 1.25em;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
}

/* 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-stack {
  position: relative;
  z-index: var(--z-announce);
}
.announce {
  position: relative;
  background-color: var(--color-announce-bg);
  color: var(--color-announce-text);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  text-align: center;
}
.announce + .announce { border-top: 1px solid var(--color-border); }
.announce__text { color: var(--color-announce-text); }
.announce a,
.announce__cta {
  position: relative;
  z-index: 1;
  font-weight: var(--weight-semibold, 600);
}
.announce a {
  pointer-events: auto;
  cursor: pointer;
}
.announce a:hover { text-decoration: underline; }
.announce--cofounder {
  --announce-pulse-color: var(--announce-cofounder-dot);
}
.announce--cofounder .announce__dot { background-color: var(--announce-cofounder-dot); }
.announce--cofounder a,
.announce--cofounder .announce__cta { color: var(--announce-cofounder-dot); }
.announce--cofounder a:hover { color: var(--announce-cofounder-dot); }
.announce--roles {
  --announce-pulse-color: var(--announce-roles-dot, var(--announce-dot));
}
.announce--roles .announce__dot { background-color: var(--announce-roles-dot, var(--announce-dot)); }
.announce--roles a,
.announce--roles .announce__cta { color: var(--announce-roles-dot, var(--announce-dot)); }
.announce--roles a:hover { color: var(--announce-roles-dot, var(--announce-dot)); }
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-2xs) calc(var(--content-gutter) + 3.25rem) var(--space-2xs) var(--content-gutter);
  min-height: 36px;
}
.announce__dot {
  flex-shrink: 0;
  width: 8.4px;
  height: 8.4px;
  border-radius: var(--radius-circle);
  animation: announce-pulse 1.71s var(--ease-out) infinite;
}
@keyframes announce-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--announce-pulse-color) 65%, transparent); }
  45%  { transform: scale(1.18); box-shadow: 0 0 0 5px color-mix(in srgb, var(--announce-pulse-color) 35%, transparent); }
  70%  { transform: scale(1); box-shadow: 0 0 0 8.4px color-mix(in srgb, var(--announce-pulse-color) 0%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--announce-pulse-color) 0%, transparent); }
}
.announce__close {
  position: absolute;
  right: calc(var(--content-gutter) + 0.85rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border-radius: var(--radius-circle);
  border: 1.5px solid var(--announce-pulse-color);
  background-color: color-mix(in srgb, var(--announce-pulse-color) 22%, var(--color-announce-bg));
  color: var(--announce-pulse-color);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  transition: background-color var(--speed-fast) var(--ease-out), box-shadow var(--speed-fast) var(--ease-out);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--announce-pulse-color) 35%, transparent);
}
.announce__close:hover {
  background-color: color-mix(in srgb, var(--announce-pulse-color) 34%, var(--color-announce-bg));
  box-shadow: 0 0 10px color-mix(in srgb, var(--announce-pulse-color) 45%, transparent);
}

/* ----------------------------------------------------------------- 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: 0% center; }
  to   { background-position: 66.666667% center; }
}
/* One-shot sweep for hover-only header/footer/eyebrow (not tiled). */
@keyframes text-shimmer-hover {
  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 a.is-footer-hover { --_shimmer: var(--footer-accent, var(--color-accent)); }
.brand:hover,
.nav__link:hover,
.footer-col a:hover,
.footer-col a.is-footer-hover {
  color: #ffffff;
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 6%,
    var(--_shimmer) 24%,
    var(--_shimmer) 50%,
    var(--_shimmer) 76%,
    currentColor 94%, currentColor 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px var(--_shimmer), 0 0 36px var(--_shimmer);
  animation: text-shimmer-hover 1.15s linear infinite;
}
.brand:hover,
.nav__link:hover {
  text-shadow:
    0 0 16px var(--_shimmer),
    0 0 40px var(--_shimmer),
    0 0 72px var(--_shimmer);
}

.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);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.75rem); }
.nav__link {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  color: var(--color-header-text);
  /* 1ch = one character of the current font (scales with drawer heading size). */
  padding: 0.4em 1ch;
  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), height var(--speed-normal) var(--ease-out), box-shadow var(--speed-normal) var(--ease-out);
}
.nav__link:hover { opacity: 1; color: #ffffff; }
.nav__link:hover::after {
  transform: scaleX(1);
  height: 3px;
  box-shadow:
    0 0 10px var(--nav-accent, var(--color-accent)),
    0 0 22px var(--nav-accent, var(--color-accent)),
    0 0 40px var(--nav-accent, var(--color-accent));
}
.nav__link--active { opacity: 1; font-weight: var(--weight-bold); }
.nav__link--active::after {
  transform: scaleX(1); height: 4px; bottom: -3px;
  box-shadow:
    0 0 10px var(--nav-accent, var(--color-accent)),
    0 0 22px var(--nav-accent, var(--color-accent)),
    0 0 40px var(--nav-accent, var(--color-accent));
}
.brand:hover { color: #ffffff; }

/* Empty half-viewport spacer (hiring, bio, …) */
.hiring-spacer,
.page-spacer {
  min-height: 50vh;
  width: 100%;
}

/* 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); }

/* Compact/hamburger mode — toggled by JS when brand + nav no longer fit
   on one line (not a hardcoded viewport breakpoint). */
.site-header--compact {
  /* CRITICAL: backdrop-filter makes the header the containing block for
     position:fixed descendants, collapsing the full-screen menu to the bar.
     Solid bg + no filter lets the drawer resolve against the viewport. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--color-header-bg-solid);
}
.nav-open .site-header--compact { z-index: calc(var(--z-announce) + 2); }

.site-header--compact .nav__toggle {
  display: inline-flex;
  position: relative;
  z-index: 2;
}
.site-header--compact .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);
}
.site-header--compact .nav.is-open .nav__list { transform: translateX(0); }
.site-header--compact .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 {
  align-self: stretch;
  min-height: 100%;
}
.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);
  --_shimmer: var(--footer-accent, var(--color-accent));
  background-image: linear-gradient(
    100deg,
    currentColor 0%, currentColor 6%,
    var(--_shimmer) 24%,
    var(--_shimmer) 50%,
    var(--_shimmer) 76%,
    currentColor 94%, currentColor 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px var(--_shimmer), 0 0 36px var(--_shimmer);
  animation: text-shimmer-hover 1.15s linear infinite;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a { color: var(--color-footer-link); }
.footer-col a:hover,
.footer-col a.is-footer-hover { color: var(--color-footer-link-hover); }
.footer-col--brand .t-muted { color: var(--color-footer-text); }
.site-footer__bottom .t-muted { color: var(--color-footer-text); }
.footer-col__roles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--color-footer-text);
}
/* Hairline between roles and Other: same air above and below the line. */
.footer-col h4.footer-col__legal-head {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--section-divider);
}
.footer-col__legal { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col__legal a { color: var(--color-footer-link); }
.footer-col__legal a:hover,
.footer-col__legal a.is-footer-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);
}