/* ============================================================
   divinelore.com — components.css
   All 10 components from the brief. Each component pulls from
   tokens.css; section accent is themed via --section-accent so
   placing data-section="…" on a parent re-skins everything.
   ============================================================ */

/* ============================================================
   1. SITE HEADER
   ============================================================ */
.dl-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--nav-h-desktop);
  background: color-mix(in srgb, var(--color-base-bg) 97%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out);
}
.dl-header[data-scrolled="true"] { border-bottom-color: var(--color-base-border); }
.dl-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
}
.dl-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.dl-logo__mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-text-primary);
}
.dl-nav {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
}
.dl-nav__item {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.dl-nav__item:hover { color: var(--color-text-primary); }
.dl-nav__item[aria-current="page"] {
  color: var(--color-text-primary);
}
.dl-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--section-accent);
}
@media (max-width: 1024px) {
  .dl-nav { display: none; }
  .dl-header { height: var(--nav-h-mobile); }
  .dl-header__inner { grid-template-columns: auto 1fr auto; }
}

/* ============================================================
   2. SECTION ACCENT TOP BAR
   3px full-width strip on every inner page.
   ============================================================ */
.dl-section-bar {
  height: 3px;
  width: 100%;
  background: var(--section-accent);
}

/* ============================================================
   3. SECTION BADGE
   Dot + label, accent-tinted bg, used on cards and breadcrumbs.
   ============================================================ */
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--section-accent-soft);
  border: 1px solid var(--section-accent-line);
  border-radius: var(--radius-sm);
  color: var(--section-accent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.dl-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--section-accent);
  flex: none;
}
.dl-badge--plain { background: transparent; border-color: transparent; padding: 0; }

/* ============================================================
   4. BREADCRUMB
   ============================================================ */
.dl-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.dl-crumb__sep { color: var(--color-text-tertiary); opacity: 0.6; }
.dl-crumb a { color: var(--color-text-tertiary); transition: color var(--dur-fast); }
.dl-crumb a:hover { color: var(--color-text-primary); }
.dl-crumb__current { color: var(--color-text-primary); }
.dl-crumb__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--section-accent);
  margin-right: 2px;
}

/* ============================================================
   5. CONTENT CARD (encyclopedia entry preview)
   ============================================================ */
.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-base-surface);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.dl-card:hover {
  border-color: var(--section-accent-hover, var(--section-accent-line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dl-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}
.dl-card__desc {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}
.dl-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-1);
  color: var(--section-accent);
  font-size: 14px;
  font-weight: 500;
  transition: gap var(--dur-fast) var(--ease-out);
}
.dl-card__cta::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.dl-card:hover .dl-card__cta { gap: 10px; }

/* Section card (homepage 8-card grid) — option-0 layout:
   badge top-left, title, body, link */
.dl-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: var(--color-base-surface);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.dl-section-card::before {
  /* hairline accent stripe along the top — subtle section signal */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--section-accent);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.dl-section-card:hover {
  border-color: var(--section-accent-hover, var(--section-accent-line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dl-section-card:hover::before { opacity: 1; }
.dl-section-card__num {
  font-family: var(--font-numeral);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.05em;
}
.dl-section-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}
.dl-section-card__desc {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.7;
  flex: 1;
}
.dl-section-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--section-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: gap var(--dur-fast) var(--ease-out);
}
.dl-section-card__cta::after { content: "→"; }
.dl-section-card:hover .dl-section-card__cta { gap: 10px; }

/* ============================================================
   6. TOOL PANEL
   ============================================================ */
.dl-tool {
  position: relative;
  padding: var(--space-6);
  background: var(--color-base-bg);
  border: 1.5px solid var(--section-accent-line);
  border-left: 3px solid var(--section-accent);
  border-radius: var(--radius-xl);
}
@media (max-width: 640px) {
  .dl-tool { padding: var(--space-5) var(--space-4); }
}
.dl-tool__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--section-accent);
}
.dl-tool__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-2);
  color: var(--color-text-primary);
}
.dl-tool__desc {
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  font-size: 15px;
  line-height: 1.7;
}
.dl-tool__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dl-tool__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dl-input {
  height: 48px;
  padding: 0 14px;
  background: var(--color-base-bg);
  border: 1px solid var(--color-base-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.dl-input:focus {
  outline: none;
  border-color: var(--section-accent);
  box-shadow: 0 0 0 3px var(--section-accent-soft);
}
@media (max-width: 640px) {
  .dl-input { height: 52px; font-size: 16px; }
}
.dl-tool__result {
  margin-top: var(--space-5);
  padding: var(--space-6);
  background: var(--color-base-surface);
  border-radius: var(--radius-lg);
  text-align: center;
}
.dl-tool__result-num {
  font-family: var(--font-numeral);
  font-weight: 300;
  font-size: var(--text-tool-num);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--section-accent);
}

/* ============================================================
   7. CTA BUTTONS
   ============================================================ */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
  white-space: nowrap;
}
.dl-btn:active { transform: scale(0.98); }

.dl-btn--primary {
  background: var(--section-accent);
  color: var(--color-text-inverse);
  border: 1px solid var(--section-accent);
}
.dl-btn--primary:hover {
  background: color-mix(in srgb, var(--section-accent) 88%, black);
}

.dl-btn--secondary {
  background: transparent;
  color: var(--section-accent);
  border: 1px solid var(--section-accent);
}
.dl-btn--secondary:hover { background: var(--section-accent-soft); }

.dl-btn--ghost {
  background: transparent;
  color: var(--section-accent);
  border: 1px solid transparent;
}
.dl-btn--ghost:hover { background: var(--section-accent-soft); }

.dl-btn--global {
  background: var(--color-accent-global);
  color: var(--color-base-bg);
  border: 1px solid var(--color-accent-global);
}
.dl-btn--global:hover { background: color-mix(in srgb, var(--color-accent-global) 88%, black); }

.dl-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ============================================================
   8. NAVIGATION DROPDOWN
   ============================================================ */
.dl-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  padding: var(--space-3);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.dl-dropdown[data-open="true"] {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.dl-dropdown__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast);
  align-items: flex-start;
}
.dl-dropdown__item:hover { background: var(--color-base-surface); }
.dl-dropdown__item-title { font-weight: 500; font-size: 14px; color: var(--color-text-primary); }
.dl-dropdown__item-desc  { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

/* ============================================================
   9. LANGUAGE SWITCHER
   ============================================================ */
.dl-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.dl-lang:hover { border-color: var(--color-base-border-strong); color: var(--color-text-primary); }
.dl-lang__chev { width: 10px; height: 10px; opacity: 0.6; }

/* ============================================================
   10. SEARCH
   ============================================================ */
.dl-search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  min-width: 36px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.dl-search:hover { border-color: var(--color-base-border-strong); }
.dl-search__icon { width: 14px; height: 14px; flex: none; }

/* ============================================================
   11. TOPIC GRID CARD (3:4 portrait)
   ============================================================ */
.dl-topic {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-5) var(--space-3);
  background: var(--color-base-surface);
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color var(--dur-med), transform var(--dur-med);
  gap: var(--space-3);
}
.dl-topic:hover {
  border-color: var(--section-accent-line);
  transform: scale(1.02);
}
.dl-topic__symbol {
  width: 44px; height: 44px;
  color: var(--section-accent);
  margin-bottom: var(--space-2);
}
.dl-topic__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}
.dl-topic__sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
}

/* ============================================================
   12. ARTICLE LAYOUT
   ============================================================ */
.dl-article {
  max-width: var(--content-max);
  margin-inline: auto;
}
.dl-article h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}
.dl-article p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-primary);
  margin-top: var(--space-3);
}
.dl-article p.lede {
  font-weight: 300;
  font-size: 19px;
  line-height: 1.7;
  color: var(--color-text-primary);
}
.dl-article blockquote {
  margin: var(--space-6) 0 var(--space-6) 0;
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--section-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--color-text-primary);
}
.dl-info {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-base-surface);
  border-left: 3px solid var(--section-accent);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text-secondary);
}
.dl-info__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--section-accent);
  margin-bottom: 4px;
}

/* ============================================================
   13. FOOTER
   ============================================================ */
.dl-footer {
  margin-top: var(--space-10);
  padding: var(--space-8) 0 var(--space-7);
  background: var(--color-base-surface);
  border-top: 1px solid var(--color-base-border);
}
.dl-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 1024px) { .dl-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .dl-footer__grid { grid-template-columns: 1fr; } }
.dl-footer__heading {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}
.dl-footer__link {
  display: block;
  padding: 4px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  transition: color var(--dur-fast);
}
.dl-footer__link:hover { color: var(--color-text-primary); }
.dl-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-base-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* ============================================================
   14. MOBILE BOTTOM NAV
   ============================================================ */
.dl-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--bottom-nav-h);
  background: var(--color-base-bg);
  border-top: 1px solid var(--color-base-border);
}
.dl-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast);
}
.dl-bottom-nav__item svg { width: 20px; height: 20px; }
.dl-bottom-nav__item[aria-current="page"] { color: var(--section-accent); }

/* ============================================================
   15. SACRED GEOMETRY BACKGROUND TEXTURE
   ============================================================ */
.dl-geometry-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--geometry-opacity);
  color: var(--color-text-primary);
  overflow: hidden;
}

/* ============================================================
   11. FAQ ACCORDION (entry pages)
   ============================================================ */
.faq { margin: var(--space-5) 0 var(--space-4); display: grid; gap: var(--space-3); }
.faq__item {
  border: 1px solid var(--color-base-border);
  border-radius: var(--radius-md);
  background: var(--color-base-surface);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--section-accent, var(--color-accent-global)); }
.faq__q {
  list-style: none; cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-weight: 600; color: var(--color-text-primary);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; font-size: 1.25em; line-height: 1;
  color: var(--section-accent, var(--color-accent-global));
  transition: transform .2s ease; flex: none;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--section-accent, var(--color-accent-global)); }
.faq__a { padding: 0 var(--space-4) var(--space-3); color: var(--color-text-secondary); }
.faq__a p { margin: 0; }

/* clickable compatibility rows (sign pages link to pair pages) */
a.compat-row { text-decoration: none; transition: border-color var(--dur-fast), transform var(--dur-fast); }
a.compat-row:hover { border-color: var(--section-accent); transform: translateY(-1px); }

/* related-reading: stack category over title (spans are inline by default,
   so per-page margin-top on the title was a no-op and the two ran together) */
.side-rel__cat, .side-rel__t { display: block; }

/* ============================================================
   SHARED "soft-UI / attached" card finish — site-wide.
   Cards read as the same soft material as the page, gently raised
   from it: a light elevated fill, a hairline lit top-edge, and a
   soft, diffuse, same-hue shadow (no accent tint, no hard ring).
   "depth, not glow" — see CLAUDE.md. Centralized so every section
   inherits it; the `body ` prefix lets it override per-page card
   backgrounds/borders without editing each page.
   ============================================================ */
:root {
  /* page field sits a touch BELOW the card surface so cards read as raised */
  --neu-field: #ECE6DB;
  --neu-shadow:
    0 1px 2px rgba(70, 60, 48, 0.05),
    0 10px 26px rgba(70, 60, 48, 0.08);
  --neu-shadow-hover:
    0 2px 6px rgba(70, 60, 48, 0.07),
    0 18px 40px rgba(70, 60, 48, 0.12);
  --neu-edge: rgba(255, 255, 255, 0.85);
}

/* darken the page field on section/encyclopedia pages (body.pg) so the
   warm surface cards sit visibly raised on it — homepage + tools keep
   their own field. Overrides the per-page `body{background}` declaration. */
body.pg { background-color: var(--neu-field); }

body .dl-card,
body .dl-section-card,
body .tarot-card,
body .crystal-card,
body .topic-card,
body .symbol-card,
body .related-card,
body .herb-card,
body .muhurat-card,
body .pancha-card,
body .element-card,
body .dosha-card,
body .lp-card,
body .small-card {
  position: relative;
  background: var(--color-base-surface);
  border: 1px solid color-mix(in srgb, var(--color-base-border) 55%, transparent);
  box-shadow: var(--neu-shadow);
}
/* hairline lit top-edge — the soft-UI highlight */
.dl-card::before,
.dl-section-card::before,
.tarot-card::before,
.crystal-card::before,
.topic-card::before,
.symbol-card::before,
.related-card::before,
.herb-card::before,
.muhurat-card::before,
.pancha-card::before,
.element-card::before,
.dosha-card::before,
.lp-card::before,
.small-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 1px 0 var(--neu-edge);
}
/* keep card content above the highlight layer */
.dl-card > *,
.dl-section-card > *,
.tarot-card > *,
.crystal-card > *,
.topic-card > *,
.symbol-card > *,
.related-card > *,
.herb-card > *,
.muhurat-card > *,
.pancha-card > *,
.element-card > *,
.dosha-card > *,
.lp-card > *,
.small-card > * { position: relative; z-index: 2; }
/* gentle raise on hover — stays soft + same-hue */
body .dl-card:hover,
body .dl-section-card:hover,
body .tarot-card:hover,
body .crystal-card:hover,
body .topic-card:hover,
body .symbol-card:hover,
body .related-card:hover,
body .herb-card:hover,
body .muhurat-card:hover,
body .pancha-card:hover,
body .element-card:hover,
body .dosha-card:hover,
body .lp-card:hover,
body .small-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--section-accent) 22%, var(--color-base-border));
  box-shadow: var(--neu-shadow-hover);
}

/* ============================================================
   CANONICAL SITE NAV — one nav across every page.
   Core 4 section pills (Astrology, Numerology, Tarot, Crystals)
   + a "More" dropdown for the rest + a uniform "Tools" CTA, plus
   a real mobile drawer (the pill bar collapses <=1024px).
   Single source of truth; behaviour in assets/nav.js. Selectors
   are .v3-nav-scoped so they win over any leftover inline page CSS.
   ============================================================ */
.v3-nav {
  position: sticky; top: 0; z-index: var(--z-header);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--color-base-bg) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-border) 60%, transparent);
}
.v3-nav .v3-nav__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-5); height: 72px;
}
.v3-nav .v3-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--color-text-primary); text-decoration: none;
}
.v3-nav .v3-logo svg { width: 26px; height: 26px; color: var(--section-accent); flex: none; }

.v3-nav .v3-pillnav {
  display: flex; align-items: center; gap: 2px; justify-self: center;
  background: var(--color-base-surface); border: 1px solid var(--color-base-border);
  padding: 4px; border-radius: var(--radius-full);
}
.v3-nav .v3-pillnav > a,
.v3-nav .v3-more__btn {
  padding: 8px 16px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary); text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.v3-nav .v3-pillnav > a:hover,
.v3-nav .v3-more__btn:hover { color: var(--color-text-primary); background: var(--color-base-bg); }
.v3-nav .v3-pillnav > a[aria-current] { background: var(--section-accent); color: #fff; }

/* "More" dropdown */
.v3-nav .v3-more { position: relative; display: flex; }
.v3-nav .v3-more__btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
}
.v3-nav .v3-more__btn svg { transition: transform var(--dur-fast); }
.v3-nav .v3-more__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.v3-nav .v3-more__menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 196px;
  display: none; flex-direction: column;
  background: var(--color-base-elevated); border: 1px solid var(--color-base-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: var(--z-overlay);
}
.v3-nav .v3-more__menu.open { display: flex; }
.v3-nav .v3-more__menu a {
  padding: 9px 14px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--color-text-primary); text-decoration: none; white-space: nowrap;
}
.v3-nav .v3-more__menu a:hover { background: var(--color-base-surface); }
.v3-nav .v3-more__menu a[aria-current] { color: var(--section-accent); font-weight: 600; }

/* CTA + pill button */
.v3-nav .v3-nav__cta { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.v3-nav .v3-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 9px 18px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: filter var(--dur-fast), background var(--dur-fast);
}
.v3-nav .v3-pill--solid { background: var(--section-accent); color: #fff; border: 1px solid transparent; }
.v3-nav .v3-pill--solid:hover { filter: brightness(0.94); }
.v3-nav .v3-pill--ghost { background: transparent; border: 1px solid var(--color-base-border-strong); color: var(--color-text-primary); }
/* Brand pages (homepage, /tools/ hub, about, policy) have no section accent,
   so the solid CTA would fall back to near-black ink. Use the sanctioned
   lavender signature gradient instead — these are cross-section brand surfaces. */
.v3-nav--brand .v3-pill--solid { background: var(--grad-signature-deep); color: #fff; }
.v3-nav--brand .v3-pill--solid:hover { filter: brightness(1.05); }

/* hamburger + mobile drawer */
.v3-nav .v3-nav__menu-btn {
  display: none; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--color-base-border-strong);
  border-radius: var(--radius-md); padding: 7px; cursor: pointer; color: var(--color-text-primary);
}
.v3-nav .v3-drawer {
  display: none; flex-direction: column;
  padding: var(--space-3) 0; border-top: 1px solid var(--color-base-border);
  background: var(--color-base-bg);
}
.v3-nav .v3-drawer a {
  padding: 11px var(--space-5);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--color-text-primary); text-decoration: none;
}
.v3-nav .v3-drawer a:hover { background: var(--color-base-surface); }
.v3-nav .v3-drawer a[aria-current] { color: var(--section-accent); font-weight: 700; }

@media (max-width: 1024px) {
  .v3-nav .v3-pillnav { display: none; }
  .v3-nav .v3-nav__menu-btn { display: inline-flex; }
  .v3-nav.open .v3-drawer { display: flex; }
}