/* ============================================================
   layout.css — shared header + footer
   ============================================================ */

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9990;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
  background: var(--bg-header);
  -webkit-backdrop-filter: var(--blur-nav);
  backdrop-filter: var(--blur-nav);
  border-bottom: var(--border-header);
}
/* variant: header content aligned to the same .container as the page content */
.site-header.contained { padding-inline: 0; }
.site-header.contained .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

.site-logo {
  font-family: var(--f-display);
  font-size: var(--fs-logo);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-ink);
}

/* desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
.nav a {
  position: relative;
  z-index: 0;
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);     /* 500 on desktop (mobile menu stays 700) */
  letter-spacing: var(--ls-nav);
  color: var(--c-ink);
  line-height: 1;
  padding: 6px 6px;                  /* small box so the marker ≈ text width */
  transition: opacity var(--dur-fast) ease;
}
.nav a:hover { opacity: .6; }
/* active state — green marker BEHIND the label, offset to the right
   (matches the old project: "A" pokes out left, green extends past the text). */
.nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-radius: var(--r-xs);        /* from design system (4px, smallest) */
  background: var(--c-accent);
  transform: translateX(10px);
  transition: width .35s var(--ease-out);
}
.nav a.active::before { width: 100%; }

/* burger (hidden on desktop) */
.burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.burger span { display: block; width: 26px; height: 2px; background: var(--c-ink); border-radius: 2px; }

/* ---------- Mobile menu ---------- */
@media (max-width: 809.98px) {
  .nav { display: none; }
  .burger { display: flex; margin-right: -8px; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 9991;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: max(24px, env(safe-area-inset-top)) var(--gutter) max(32px, env(safe-area-inset-bottom));
    background: var(--c-ink);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s var(--ease-inout), visibility 0s linear .38s;
  }
  .mobile-menu.open { transform: translateX(0); visibility: visible; transition: transform .38s var(--ease-inout); }
  .mobile-menu .mm-top { display: flex; align-items: center; justify-content: space-between; }
  .mobile-menu .site-logo, .mobile-menu .mm-close { color: var(--c-bg); }
  .mm-close { font-size: 30px; line-height: 1; width: 44px; height: 44px; }
  .mobile-menu nav { display: flex; flex-direction: column; gap: 8px; }
  .mobile-menu nav a {
    display: block;
    font-size: clamp(34px, 9vw, 44px); font-weight: 700; line-height: 1.35; color: var(--c-bg);
    opacity: 0;
    transform: translateX(40px);           /* start off to the right */
    will-change: opacity, transform;
    /* fade + slide in from the right; delay is set per-item below (staggered) */
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
    transition-delay: 0s;                    /* reset when closing */
  }
  /* when open: each item eases into place, one after another from the right */
  .mobile-menu.open nav a { opacity: 1; transform: translateX(0); }
  .mobile-menu.open nav li:nth-child(1) a { transition-delay: .12s; }
  .mobile-menu.open nav li:nth-child(2) a { transition-delay: .20s; }
  .mobile-menu.open nav li:nth-child(3) a { transition-delay: .28s; }
  .mobile-menu.open nav li:nth-child(4) a { transition-delay: .36s; }
  .mobile-menu.open nav li:nth-child(5) a { transition-delay: .44s; }
  .mobile-menu nav a:active { color: var(--c-accent); }
  /* active item on mobile: green accent (matches old project) */
  .mobile-menu nav a.active { color: var(--c-accent); }
  .mm-footer { display: flex; flex-direction: column; gap: 10px; color: rgba(235,242,242,.72); font-size: 15px; }
}
@media (min-width: 810px) { .mobile-menu { display: none; } }

/* push page content below the fixed header */
main { padding-top: var(--nav-h); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-bg);
  padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer a { color: var(--c-bg); }
.footer-inner { display: grid; gap: var(--space-lg); }
.footer-social { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-social a { opacity: .8; transition: opacity var(--dur-fast) ease; }
.footer-social a:hover { opacity: 1; }
.footer-bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(235,242,242,.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
  font-size: var(--fs-small); color: rgba(235,242,242,.7);
}

/* back-to-top */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 9980;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: var(--c-on-primary);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }