/*
 * layout.css — DayAfter shared layout components
 *
 * This file is the single source of truth for:
 *   - Sticky nav bar
 *   - Nav wordmark, links, and CTA button area
 *   - Theme toggle (dark mode switch)
 *   - Footer — both single-row (content pages) and multi-column (homepage)
 *   - Responsive breakpoints (mobile-first, rem-based)
 *
 * Loaded by every page AFTER base.css.
 * Page-specific component styles live in content.css or inline.
 *
 * Breakpoint system (mobile-first):
 *   base       — 0 to 767px  (phones)
 *   48rem      — 768px+      (tablets, small laptops)
 *   64rem      — 1024px+     (desktops)
 *   112.5rem   — 1800px+     (ultrawide cap)
 *
 * Last updated: 2026-04-27
 */


/* ═══════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════ */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}


nav .container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*
 * Nav links live inside .nav-links wrapper.
 * On mobile: hidden by default, revealed as a dropdown
 * when #nav-toggle checkbox is checked (CSS-only, no JS).
 * On tablet+: displayed inline, hamburger hidden.
 */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-link:hover {
  color: var(--ink);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   HAMBURGER MENU — MOBILE ONLY (CSS-only, checkbox hack)
   Hidden checkbox (#nav-toggle) controls .nav-links visibility.
   ═══════════════════════════════════════════════════════════ */

/* Hidden checkbox — drives the toggle state */
#nav-toggle {
  display: none;
}

/* Hamburger button — visible on mobile only */
.nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: var(--ink-soft);
  transition: color 0.15s;
}
.nav-hamburger:hover {
  color: var(--ink);
}

/* Three-line icon (hamburger) */
.nav-hamburger-icon {
  display: block;
  width: 1.125rem;
  height: 0.125rem;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: background 0.2s;
}
.nav-hamburger-icon::before,
.nav-hamburger-icon::after {
  content: '';
  display: block;
  width: 1.125rem;
  height: 0.125rem;
  background: currentColor;
  border-radius: 1px;
  position: absolute;
  left: 0;
  transition: transform 0.2s, top 0.2s;
}
.nav-hamburger-icon::before { top: -0.375rem; }
.nav-hamburger-icon::after  { top:  0.375rem; }

/* Animate to ✕ when open */
#nav-toggle:checked ~ .nav-right .nav-hamburger-icon {
  background: transparent;
}
#nav-toggle:checked ~ .nav-right .nav-hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
#nav-toggle:checked ~ .nav-right .nav-hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Mobile drawer ─────────────────────────────────────── */
/*
 * The .nav-links container is positioned below the nav bar
 * as an absolute dropdown. Hidden by default, revealed when
 * #nav-toggle is checked.
 */
.nav-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem 1rem;
  flex-direction: column;
  gap: 0.125rem;
}

#nav-toggle:checked ~ .nav-right .nav-links {
  display: flex;
}

/* Links inside the drawer get full-width tap targets */
.nav-links .nav-link {
  display: block;
  padding: 0.625rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.nav-links .nav-link:hover {
  background: var(--bg-warm);
}


/* ═══════════════════════════════════════════════════════════
   THEME TOGGLE
   ═══════════════════════════════════════════════════════════ */

.theme-toggle {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.theme-toggle:hover {
  color: var(--ink);
  background: var(--bg-warm);
}

/* Sun/moon icon visibility — controlled by html.dark class */
.icon-moon { display: none; }
html.dark .icon-sun { display: none; }
html.dark .icon-moon { display: block; }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   Shared across nav CTA, inline CTAs, and forms.
   ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 2.75rem;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink-on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-warm); }

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Smaller nav button on mobile */
.nav-right .btn {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  min-height: 2.25rem;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER — SHARED BASE
   Background, wordmark, and copyright line used by all pages.
   ═══════════════════════════════════════════════════════════ */

footer {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding: 2.5rem 0 1.5rem;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}
.footer-wordmark:hover { text-decoration: none; }

.footer-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}


/* ── Footer variant A: single-row nav (content pages) ────── */
/*
 * Used by: blog, updates, privacy, terms, roadmap.
 * Structure: wordmark + inline nav links on one row,
 * copyright + email on a second row below a divider.
 */

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 0.8125rem;
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-nav a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-bottom-bar {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-email {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-email:hover {
  color: var(--ink-on-dark);
  text-decoration: none;
}


/* ── Footer variant B: multi-column grid (homepage) ──────── */
/*
 * Used by: index.html only.
 * Structure: brand + tagline spanning full width,
 * then 2-col grid on mobile → 4-col on desktop.
 * Contains Product, Guides, and Company columns.
 */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-brand {
  margin-bottom: 0.5rem;
  grid-column: 1 / -1;
}

.footer-tagline {
  font-size: 0.8125rem;
  color: var(--ink-on-dark);
  line-height: 1.5;
}

.footer-col h3 {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li { margin-bottom: 0.5rem; }

.footer-col a {
  font-size: 0.8125rem;
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover {
  color: #fff;
  text-decoration: none;
}

/* Homepage footer bottom row (copyright + links) */
.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-bottom-links {
  display: flex;
  gap: 1rem;
}

.footer-bottom-links a {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-bottom-links a:hover {
  color: var(--ink-on-dark);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (768px+) ───────────────────────────────────── */
@media (min-width: 48rem) {

  /* Containers get more breathing room */
  .container { padding: 0 1.5rem; }
  .container-wide { padding: 0 1.5rem; }

  /* Nav grows slightly */
  nav .container-wide { min-height: 3.75rem; }
  .nav-wordmark { font-size: 1.25rem; }
  .nav-right { gap: 1rem; }
  .nav-right .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    min-height: 2.75rem;
  }

  /* Hamburger hidden at tablet — links go inline */
  .nav-hamburger { display: none; }
  .nav-links {
    display: flex;
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 0;
    flex-direction: row;
    gap: 0;
  }
  .nav-links .nav-link {
    display: inline;
    padding: 0;
    font-size: 0.875rem;
    border-radius: 0;
    margin-right: 1.5rem;
  }
  .nav-links .nav-link:last-child {
    margin-right: 0;
  }
  .nav-links .nav-link:hover {
    background: none;
  }

  /* Buttons scale up */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
  }

  /* Homepage footer bottom row goes horizontal */
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ── Desktop (1024px+) ─────────────────────────────────── */
@media (min-width: 64rem) {

  /* Containers at full desktop padding */
  .container { padding: 0 2rem; }
  .container-wide { padding: 0 2rem; }

  /* Homepage footer expands to 4 columns:
     brand sits in the wider first column,
     3 link columns fill the rest. */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand {
    grid-column: 1;
  }
}


/* ── Ultrawide cap (1800px+) ───────────────────────────── */
@media (min-width: 112.5rem) {
  .container { max-width: 50rem; }
  .container-wide { max-width: 67.5rem; }
}