/* ==========================================================================
   layout.css — page shell, announcement bar, header, navigation, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.main {
  flex: 1;
}

/* Consistent vertical rhythm between every major section of every page. */
.section {
  padding-block: var(--section-gap);
}

.section + .section {
  padding-top: 0;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-7);
}

.section__head > div {
  min-width: 0;
}

.section__title {
  margin-top: var(--space-3);
}

.section__sub {
  margin-top: var(--space-3);
  max-width: 56ch;
  color: var(--text-dim);
  font-size: var(--fs-md);
}

/* Page header used by every page except the homepage. */
.page-head {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--space-8);
}

.page-head__title {
  margin-top: var(--space-3);
}

.page-head__sub {
  margin-top: var(--space-4);
  max-width: 62ch;
  color: var(--text-dim);
  font-size: var(--fs-md);
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.announce {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  border-bottom: 1px solid var(--border);
  background: var(--accent-wash);
  font-size: var(--fs-sm);
}

.announce__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  text-align: center;
}

.announce__text {
  color: var(--text);
}

.announce__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent-soft);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.announce__link:hover {
  border-bottom-color: currentColor;
}

.announce__close {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  color: var(--text-mute);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.announce__close:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    backdrop-filter var(--t-base) var(--ease);
}

/* Only frost the bar once the page has scrolled, so the hero stays clean.
   The blur is light and the background behind it is solid enough that the
   nav text keeps full contrast. */
.header.is-stuck {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Browsers without color-mix still get a readable solid bar. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .header.is-stuck {
    background: var(--bg);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* Brand ------------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.02em;
  border-radius: var(--r-sm);
}

.brand__logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: none;
}

/* Text fallback used when no logo file is present. */
.brand__fallback {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  color: var(--accent-contrast);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand__name span {
  color: var(--accent);
}

/* Desktop navigation ----------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.nav__link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav__link.is-active {
  color: var(--text);
}

/* Active state is an underline as well as a colour, so it does not rely on
   colour alone to communicate which page you are on. */
.nav__link.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0.25rem;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--accent);
}

.nav__link--accent {
  margin-left: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent-soft);
}

.nav__link--accent:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: #fff;
}

.nav__link--accent.is-active::after {
  display: none;
}

/* Header actions --------------------------------------------------------- */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* Theme switcher --------------------------------------------------------- */

.themer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-1);
}

.themer__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  transition: transform var(--t-fast) var(--ease);
}

.themer__btn:hover {
  transform: scale(1.12);
}

.themer__btn::before {
  content: '';
  width: 0.95rem;
  height: 0.95rem;
  border-radius: var(--r-full);
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  transition: box-shadow var(--t-fast) var(--ease);
}

/* Selected theme gets a ring — plus aria-pressed for assistive tech. */
.themer__btn[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--swatch);
}

.themer__btn[aria-pressed='true']::before {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* Mobile menu button ----------------------------------------------------- */

.burger {
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  transition: background var(--t-fast) var(--ease);
}

.burger:hover {
  background: var(--surface-2);
}

.burger__lines {
  position: relative;
  width: 1.05rem;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--text);
  transition: background var(--t-fast) var(--ease);
}

.burger__lines::before,
.burger__lines::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  transition: transform var(--t-base) var(--ease);
}

.burger__lines::before {
  transform: translateY(-6px);
}

.burger__lines::after {
  transform: translateY(6px);
}

/* The open/close morph. .is-close is the dedicated close button inside the
   mobile menu, which is always an X and never a toggle. */
.burger[aria-expanded='true'] .burger__lines,
.burger.is-close .burger__lines {
  background: transparent;
}

.burger[aria-expanded='true'] .burger__lines::before,
.burger.is-close .burger__lines::before {
  transform: rotate(45deg);
}

.burger[aria-expanded='true'] .burger__lines::after,
.burger.is-close .burger__lines::after {
  transform: rotate(-45deg);
}

/* The close button must stay visible at desktop widths too, because the menu
   can still be open while the viewport is being resized. */
.burger.is-close {
  display: grid;
}

/* Mobile menu ------------------------------------------------------------ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-base) var(--ease), visibility 0s;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--border);
}

.mobile-menu__body {
  overflow-y: auto;
  padding-block: var(--space-6) var(--space-10);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Comfortably past the 44px minimum touch target. */
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: var(--fs-lg);
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  background: var(--surface-2);
  color: var(--text);
}

.mobile-menu__link.is-active {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
}

.mobile-menu__link .chev {
  color: var(--text-mute);
}

.mobile-menu__foot {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.mobile-menu__label {
  margin-bottom: var(--space-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, var(--accent-wash));
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-8) var(--space-6);
  padding-block: var(--space-9) var(--space-7);
}

.footer__brandcol {
  max-width: 30ch;
}

.footer__tagline {
  margin-top: var(--space-4);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
}

.footer__social {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-dim);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.footer__social:hover {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
}

.footer__group h2 {
  margin-bottom: var(--space-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__links a {
  display: inline-block;
  /* Generous hit area for touch, without changing the visual rhythm. */
  padding-block: var(--space-1);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}

.footer__links a:hover {
  color: var(--accent-soft);
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: var(--fs-sm);
}

.footer__bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__bar a:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: calc(var(--z-toast) - 1);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--bg-elev);
  color: var(--text-dim);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
    visibility 0s linear var(--t-base), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
    visibility 0s, color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.to-top:hover {
  border-color: var(--accent);
  color: var(--accent-soft);
}

/* When toasts are on screen, lift the button clear of them. */
.toasts:not(:empty) ~ .to-top.is-visible {
  transform: translateY(-4.5rem);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Below this the horizontal nav starts to crowd the brand, so it becomes
   the mobile menu instead. */
@media (max-width: 62rem) {
  .nav {
    display: none;
  }

  .burger {
    display: grid;
  }
}

@media (max-width: 40rem) {
  :root {
    --header-h: 4rem;
  }

  /* The theme switcher lives in the mobile menu at this size, where there is
     room to label it properly. */
  .header__actions .themer {
    display: none;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .footer__bar {
    justify-content: center;
    text-align: center;
  }
}