/* design-tokens.css
 * Token + base stylesheet for standalone pages (auth, profile, subscribe, setup, etc.)
 * that link it directly via <link> rather than going through a shell. The canonical
 * v3 shell loads design-tokens-v3.css (a superset).
 */

/* ─── Self-hosted fonts ─── */

/* Lora — variable woff2 covers weights 400, 600, 700 */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/webfonts/lora/lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/webfonts/lora/lora-italic-latin.woff2') format('woff2');
}

/* Source Sans 3 — variable woff2 covers weights 300, 400, 500, 600 */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/webfonts/source-sans-3/source-sans-3-latin.woff2') format('woff2');
}

/* ─── Design tokens ─── */
:root {
  --blue-900: #0d2e52;
  --blue-800: #1a4a7a;
  --blue-700: #1e5fa0;
  --blue-600: #2672b8;
  --blue-100: #ddeaf7;
  --blue-50:  #f0f6fc;
  --gold:     #b8924a;
  --gold-lt:  #f5edd8;

  --text-900: #1a1e26;
  --text-700: #3c4352;
  --text-500: #6b7280;
  --text-300: #adb5bd;

  --bg:       #fafbfc;
  --bg-alt:   #f2f5f9;
  --bg-card:  #ffffff;
  --border:   #e2e8f0;

  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}

/* ─── Base typography ─── */
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text-900);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  color: var(--blue-900);
}

a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-900); text-decoration: underline; }

main { display: block; }

/* ─── Slim site nav (legacy — header-new.php markup deleted in plan 068 Pass 7) ─── */
/* `isolation: isolate` ensures the nav owns its own stacking context, so the
 * dropdown-menu (z:1000 inside the nav) sits above hero/page content without
 * competing with Bootstrap modal layers (1050+). */
.site-nav-new {
  background: var(--blue-900);
  padding: 10px 0;
  position: relative;
  z-index: 100;
  isolation: isolate;
}
.site-nav-new .container {
  flex-wrap: wrap;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav-brand:hover { text-decoration: none; }
.nav-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.nav-toggler {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 1rem;
  line-height: 1;
}
.nav-toggler:focus { outline: 2px solid rgba(255,255,255,.4); }

.nav-collapse-new {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.nav-links li { margin: 0; }

.nav-link-new {
  display: inline-block;
  color: rgba(255,255,255,.75);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .875rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nav-link-new:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.nav-link-new.active { color: #fff; background: rgba(255,255,255,.10); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-signin {
  color: rgba(255,255,255,.85);
  padding: 6px 4px;
}
.nav-signin:hover { color: #fff; text-decoration: none; }

.btn-nav-join {
  background: var(--gold);
  color: #fff;
  border: none;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .875rem;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s;
}
.btn-nav-join:hover { background: #a07840; color: #fff; text-decoration: none; }

.nav-user-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .875rem;
  padding: 4px 12px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.nav-user-btn:hover, .nav-user-btn:focus { background: rgba(255,255,255,.08); color: #fff; }
.nav-user-btn::after { color: rgba(255,255,255,.7); }
.nav-user-btn .fa-user-circle { font-size: 1.4rem; }
.nav-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

/* Mobile collapse (< lg) */
@media (max-width: 991.98px) {
  .nav-collapse-new {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
  }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-link-new {
    padding: 10px 12px;
    border-radius: 6px;
  }
  .nav-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Desktop (>= lg): force the collapse-target to render as a row regardless of
 * Bootstrap's `.collapse:not(.show)` hide-by-default. Mirrors Bootstrap's own
 * `.navbar-expand-lg .navbar-collapse` rule, which we don't get because the
 * markup uses `.site-nav-new` instead of `.navbar.navbar-expand-lg`.
 *
 * Without this, the nav links are display:none on initial desktop load and
 * only become visible after the hamburger is toggled (which adds .show).
 *
 * Also resets any flex/margin set by the mobile media query so a window that
 * was once narrow + toggled-open lays out cleanly when widened back. */
@media (min-width: 992px) {
  .site-nav-new .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }
  .site-nav-new .nav-links {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .site-nav-new .nav-link-new {
    padding: 6px 12px;
  }
  .site-nav-new .nav-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

/* ─── Site footer (legacy — footer-new.php markup deleted in plan 068 Pass 7) ─── */
.site-footer-new {
  background: var(--blue-900);
  color: rgba(255,255,255,.7);
  padding: 48px 0 0;
  margin-top: 60px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .92rem;
}
.site-footer-new .footer-top { padding-bottom: 32px; }

.footer-brand-new {
  display: inline-block;
  margin-bottom: 16px;
}
.footer-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-tagline {
  color: rgba(255,255,255,.65);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 32em;
  margin-bottom: 18px;
}

.footer-social-row {
  display: flex;
  gap: 10px;
}
.footer-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.footer-social-btn:hover { background: var(--gold); color: #fff; text-decoration: none; }

.footer-section-title {
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-link-list li { margin-bottom: 8px; }
.footer-link-list a {
  color: rgba(255,255,255,.7);
  font-size: .92rem;
  text-decoration: none;
  transition: color .15s;
}
.footer-link-list a:hover { color: #fff; text-decoration: none; }

.footer-bottom-new {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 12px;
  padding: 18px 0;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  text-align: center;
}

/* ─── Bootstrap dropdown tweak (used by user menu) ─── */
.site-nav-new .dropdown-menu {
  font-family: 'Source Sans 3', sans-serif;
  font-size: .9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 6px;
  margin-top: 6px;
}
.site-nav-new .dropdown-menu .dropdown-item {
  border-radius: 6px;
  padding: 6px 10px;
}
.site-nav-new .dropdown-menu .dropdown-item:hover { background: var(--blue-50); color: var(--blue-900); }
.site-nav-new .dropdown-header {
  color: var(--text-500);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}