/* DNS-AID shared site styles. Page-specific styles stay inline per page. */

/* ─── Design tokens ─── */
:root {
  --bg: #111111;
  --bg2: #181818;
  --card: #ffffff;
  --card-border: #e8e8e8;
  --text-on-dark: #ffffff;
  --text-muted-dark: #999999;
  --text-on-card: #1a1a1a;
  --text-muted-card: #6b6b6b;
  --accent: #d4553a;
  --accent-light: #fdf0ed;
  --accent-text: #c04a32;
  --green: #1a8a5c;
  --green-light: #e8f5ee;
  --blue: #2d6bcf;
  --blue-light: #edf2fc;
  --radius: 14px;
  --radius-sm: 8px;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'DM Sans', sans-serif;
}

.light {
  --bg: #f5f5f5;
  --bg2: #eaeaea;
  --text-on-dark: #1a1a1a;
  --text-muted-dark: #666666;
}

/* ─── Global reset & base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-on-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); }
.container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }

/* ─── Site nav ─── */
nav {
  padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1120px; margin: 0 auto;
}
.nav-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display);
  font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em;
}
.nav-brand .logo-dot {
  width: 30px; height: 30px; border-radius: 7px;
  background: #fff;
  border: 1.5px solid var(--accent);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: .95rem; color: #1a1a1a; font-weight: 700;
  flex-shrink: 0;
}
.nav-brand .logo-dot::after {
  content: ''; position: absolute;
  right: 3px; bottom: 3px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent);
}
.nav-center { display: flex; gap: .3rem; min-width: 0; }
.nav-center a {
  padding: .45rem .9rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500;
  color: var(--text-muted-dark); transition: all .15s;
  white-space: nowrap;
}
.nav-center a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-center a.nav-active { color: var(--accent); background: rgba(212,85,58,.12); }
.nav-right { display: flex; align-items: center; gap: .6rem; }
.nav-gh {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff;
  padding: .5rem 1.1rem; border-radius: 8px;
  font-size: .85rem; font-weight: 600; transition: all .15s;
}
.nav-gh:hover { background: var(--accent-text); }

.theme-toggle {
  background: rgba(255,255,255,.1);
  border: 1.5px solid #444;
  border-radius: 8px;
  padding: .4rem .6rem;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
}
.theme-toggle:hover { border-color: #888; }

/* ─── Buttons ─── */
.btn-accent {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff;
  padding: .7rem 1.5rem; border-radius: 24px;
  font-weight: 600; font-size: .9rem; transition: all .15s;
}
.btn-accent:hover { background: var(--accent-text); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: var(--text-on-dark);
  padding: .7rem 1.5rem; border-radius: 24px;
  font-weight: 600; font-size: .9rem;
  border: 1.5px solid #444; transition: all .15s;
}
.btn-ghost:hover { border-color: #888; }

/* ─── Footer ─── */
footer {
  border-top: 1px solid #2a2a2a;
  padding: 1.5rem 2rem;
  display: flex; justify-content: space-between;
  gap: 1rem;
  font-size: .78rem; color: #666;
  max-width: 1120px; margin: 0 auto;
}
footer a { color: #888; }
footer a:hover { color: var(--accent); }

/* ─── Eyebrow label (used by one-pager + looking-glass) ─── */
.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}

/* ─── Section heads (used by index + policy) ─── */
.section-head { margin-bottom: 2rem; }
.section-head h2 {
  font-family: var(--display);
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: .45rem;
}
.section-head p { color: var(--text-muted-dark); font-size: .98rem; }

/* ─── Light-mode overrides for shared components ─── */
.light nav a, .light .nav-brand { color: #1a1a1a; }
.light .nav-center a { color: #666; }
.light .nav-center a:hover { color: #1a1a1a; background: rgba(0,0,0,.05); }
.light footer { border-top-color: #ddd; color: #999; }
.light footer a { color: #666; }
.light .btn-ghost { color: #1a1a1a; border-color: #ccc; }
.light .btn-ghost:hover { border-color: #999; }
.light .theme-toggle { background: rgba(0,0,0,.05); border-color: #ccc; }
.light .theme-toggle:hover { border-color: #999; }

/* ─── Responsive: nav and footer collapse ─── */
@media (max-width: 640px) {
  nav {
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-start;
  }
  .nav-center {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-center::-webkit-scrollbar { display: none; }
  footer {
    flex-direction: column;
    align-items: flex-start;
  }
}