/* ============================================================
   Maptoolkit.org — shared base styles
   Design tokens, reset, base typography, nav, footer.
   Used by every page; page-specific styles live in their own
   stylesheet (home.css / compare-hub.css / compare-detail.css /
   legal.css) loaded after this one.
   ============================================================ */
:root {
  --mtk-primary-100: #191F39;
  --mtk-primary-90:  #2A3561;
  --mtk-primary-80:  #303F7E;
  --mtk-primary-70:  #4054A5;
  --mtk-primary-60:  #536AC6;
  --mtk-primary-50:  #657ACD;
  --mtk-primary-40:  #8193DF;
  --mtk-primary-30:  #9DACE7;
  --mtk-primary-20:  #BAC6F7;
  --mtk-primary-10:  #E2E7FD;

  --mtk-secondary-100: #810803;
  --mtk-secondary-90:  #AE0B04;
  --mtk-secondary-80:  #C70C05;
  --mtk-secondary-70:  #EA0E06;
  --mtk-secondary-60:  #FA3F38;
  --mtk-secondary-50:  #F7655F;
  --mtk-secondary-40:  #FA847F;
  --mtk-secondary-30:  #FDA8A5;
  --mtk-secondary-20:  #FECAC7;
  --mtk-secondary-10:  #FFE6E6;

  --mtk-neutral-100: #282932;
  --mtk-neutral-90:  #393B46;
  --mtk-neutral-80:  #454654;
  --mtk-neutral-70:  #565867;
  --mtk-neutral-60:  #656776;
  --mtk-neutral-50:  #7E7F91;
  --mtk-neutral-40:  #9B9DB0;
  --mtk-neutral-30:  #CACBD8;
  --mtk-neutral-20:  #E1E2EA;
  --mtk-neutral-10:  #F6F6F9;

  --mtk-white: #FFFFFF;
  --mtk-black: #000000;

  --mtk-brand-red:   #FA3F38;
  --mtk-brand-slate: #454654;
  --mtk-brand-navy:  #191F39;

  --mtk-bg:            var(--mtk-white);
  --mtk-bg-subtle:     var(--mtk-neutral-10);
  --mtk-bg-muted:      var(--mtk-neutral-20);
  --mtk-bg-inverted:   var(--mtk-primary-100);

  --mtk-fg:            var(--mtk-neutral-80);
  --mtk-fg-strong:     var(--mtk-neutral-100);
  --mtk-fg-muted:      var(--mtk-neutral-60);
  --mtk-fg-subtle:     var(--mtk-neutral-60); /* WCAG AA — was neutral-50 (3.93:1 fails on white) */
  --mtk-fg-on-dark:    var(--mtk-white);
  --mtk-fg-link:       var(--mtk-primary-70);
  --mtk-fg-accent:     var(--mtk-brand-red);
  /* Brand red is decorative. For text < 18px or on light bg, use the AA-accessible variant. */
  --mtk-fg-accent-text: var(--mtk-secondary-80); /* #C70C05 — ~6.9:1 on white */

  --mtk-border:        var(--mtk-neutral-20);
  --mtk-border-strong: var(--mtk-neutral-30);
  --mtk-border-focus:  var(--mtk-primary-70);

  --mtk-danger:   var(--mtk-secondary-70);
  --mtk-warning:  #E8A13A;
  --mtk-success:  #2F8F5E;
  --mtk-info:     var(--mtk-primary-60);

  --mtk-font-sans:  "Mulish", "Helvetica Neue", Arial, sans-serif;
  --mtk-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mtk-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --mtk-fs-display: 56px;
  --mtk-fs-h1:      40px;
  --mtk-fs-h2:      30px;
  --mtk-fs-h3:      22px;
  --mtk-fs-h4:      18px;
  --mtk-fs-lead:    20px;
  --mtk-fs-body:    16px;
  --mtk-fs-small:   14px;
  --mtk-fs-caption: 12px;

  --mtk-lh-tight:   1.15;
  --mtk-lh-snug:    1.3;
  --mtk-lh-normal:  1.5;
  --mtk-lh-relaxed: 1.65;

  --mtk-fw-regular: 400;
  --mtk-fw-medium:  500;
  --mtk-fw-semi:    600;
  --mtk-fw-bold:    700;
  --mtk-fw-heavy:   800;

  --mtk-space-1:  4px;
  --mtk-space-2:  8px;
  --mtk-space-3:  12px;
  --mtk-space-4:  16px;
  --mtk-space-5:  24px;
  --mtk-space-6:  32px;
  --mtk-space-7:  48px;
  --mtk-space-8:  64px;
  --mtk-space-9:  96px;

  --mtk-radius-sm: 4px;
  --mtk-radius-md: 8px;
  --mtk-radius-lg: 14px;
  --mtk-radius-pill: 999px;

  --mtk-shadow-sm:  0 1px 2px rgba(25, 31, 57, 0.06), 0 1px 1px rgba(25, 31, 57, 0.04);
  --mtk-shadow-md:  0 4px 12px rgba(25, 31, 57, 0.08), 0 1px 2px rgba(25, 31, 57, 0.04);
  --mtk-shadow-lg:  0 12px 32px rgba(25, 31, 57, 0.12), 0 2px 6px rgba(25, 31, 57, 0.06);
  --mtk-shadow-map: 0 2px 8px rgba(25, 31, 57, 0.15), 0 0 0 1px rgba(25, 31, 57, 0.06);

  --mtk-focus-ring: 0 0 0 3px rgba(64, 84, 165, 0.35);

  --mtk-duration-fast: 120ms;
  --mtk-duration-base: 200ms;
  --mtk-duration-slow: 320ms;
  --mtk-ease:          cubic-bezier(.2, .7, .2, 1);
}

html { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  font-family: var(--mtk-font-serif);
  font-size: var(--mtk-fs-body);
  line-height: var(--mtk-lh-relaxed);
  color: var(--mtk-fg);
  background: var(--mtk-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; }

/* Inline icon sprite. Use as: <svg class="icon" aria-hidden="true"><use href="#i-name"/></svg> */
.icon { width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mtk-font-sans);
  color: var(--mtk-fg-strong);
  font-weight: var(--mtk-fw-regular);
  line-height: var(--mtk-lh-tight);
  letter-spacing: 0;
  text-wrap: balance;
  margin: 0;
}

a {
  color: var(--mtk-fg-link);
  text-decoration: none;
  transition: color var(--mtk-duration-fast) var(--mtk-ease);
}
a:hover { color: var(--mtk-primary-80); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--mtk-primary-20); color: var(--mtk-primary-100); }

/* ------------------------------------------------------- */
/* Layout primitives                                       */
/* ------------------------------------------------------- */
.wrap      { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.narrow    { max-width:  920px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--mtk-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mtk-fg-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--mtk-brand-red);
  display: inline-block;
}

/* ------------------------------------------------------- */
/* Nav                                                     */
/* ------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mtk-duration-base) var(--mtk-ease),
              box-shadow var(--mtk-duration-base) var(--mtk-ease);
}
.nav.scrolled {
  border-bottom-color: var(--mtk-border);
  box-shadow: 0 1px 0 rgba(25,31,57,.02);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--mtk-fg-strong);
  font-family: var(--mtk-font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.nav-brand:hover { text-decoration: none; color: var(--mtk-fg-strong); }
.nav-brand .brand-sub { color: var(--mtk-fg-muted); font-weight: 600; }
/* Desktop: single line */
.nav-brand .brand-main { display: inline; }
.nav-brand .brand-sub  { font-size: inherit; font-weight: 600; }

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer; padding: 4px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--mtk-fg-strong);
  border-radius: 2px;
  transition: transform var(--mtk-duration-base) var(--mtk-ease),
              opacity var(--mtk-duration-base) var(--mtk-ease);
  transform-origin: center;
}
.nav.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-pipe { width: 1px; height: 20px; background: var(--mtk-border); flex-shrink: 0; }
.nav-links a {
  font-family: var(--mtk-font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--mtk-fg-strong);
  text-decoration: none;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-links a:hover { color: var(--mtk-primary-70); text-decoration: none; }
.nav-links a svg { width: 14px; height: 14px; opacity: 0.7; }
.nav-links a .nav-icon-img {
  width: 14px; height: 14px;
  opacity: 0.85;
  object-fit: contain;
  display: inline-block;
}

/* ------------------------------------------------------- */
/* Footer                                                   */
/* ------------------------------------------------------- */
footer.foot {
  background: var(--mtk-neutral-100);
  color: rgba(255,255,255,.7);
  padding: 64px 0 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.foot-brand { display: flex; flex-direction: column; gap: 16px; }
.foot-brand img { height: 56px; width: auto; align-self: flex-start; }
.foot-brand p {
  font-family: var(--mtk-font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  max-width: 38ch;
  margin: 0;
}
.foot-h {
  font-family: var(--mtk-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mtk-white);
  margin: 0 0 16px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.foot-links-vertical { flex-direction: column; align-items: flex-start; gap: 8px; }
.foot-links a {
  font-family: var(--mtk-font-serif);
  font-size: 14px;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: 3px 0;
}
.foot-links a:hover { color: var(--mtk-white); text-decoration: underline; text-underline-offset: 3px; }
.foot-links a.active { color: var(--mtk-secondary-40); }
.foot-sep { color: rgba(255,255,255,.25); user-select: none; }
.foot-meta {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-family: var(--mtk-font-sans);
  font-size: 13px;
}
.foot-legal a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
}
.foot-legal a:hover { color: var(--mtk-white); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal .foot-sep { font-size: 12px; }
.foot-social {
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  transition: background var(--mtk-duration-base) var(--mtk-ease),
              color var(--mtk-duration-base) var(--mtk-ease);
}
.foot-social a:hover {
  background: rgba(255,255,255,.14);
  color: var(--mtk-white);
}
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--mtk-font-sans);
  font-size: 12px;
  color: rgba(255,255,255,.7); /* bump from .45 — 4.15:1 was below WCAG AA on neutral-100 */
}
.foot-bottom .credit { font-family: var(--mtk-font-serif); font-size: 13px; }
.foot-bottom .credit .heart { color: var(--mtk-secondary-50); }
.foot-bottom .credit a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------- */
/* Responsive — nav + footer only (page-specific responsive */
/* rules live in each page's own stylesheet)                */
/* ------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Hamburger visible, nav-links hidden by default */
  .nav-hamburger { display: flex; }
  /* Brand: two lines on mobile */
  .nav-brand .brand-main { display: block; line-height: 1.1; }
  .nav-brand .brand-sub  { display: block; font-size: 13px; line-height: 1.2; }
  .nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--mtk-bg);
    border-bottom: 1px solid var(--mtk-border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(25,31,57,.08);
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links a {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }
  .nav-pipe { display: none; }
}
@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
}