/* ============================================================
   SocratesQ — shared.css  (v2 — matched to the site's real tokens)
   Loaded by every page together with nav.js.
   ============================================================ */

:root {
  --sq-ink:            #14181a;
  --sq-surface:        #1d2326;
  --sq-surface-edge:   #2a3236;
  --sq-parchment:      #ece5d4;
  --sq-parchment-dim:  #b9b3a3;
  --sq-gold:           #c9a24b;
  --sq-gold-soft:      #d9bd7e;
  --sq-dim:            #676d68;

  --sq-font-serif: 'EB Garamond', Georgia, serif;
  --sq-font-ui:    'Inter', sans-serif;
  --sq-font-hand:  'Patrick Hand', cursive;

  --sq-nav-h: 48px;
}

/* ============================================================
   SITE-WIDE — Socrates speaks in his own hand.
   Replaces ALL italics with Patrick Hand. font-style:normal is
   essential: Patrick Hand has no italic variant, and without it
   browsers synthesize a blurry fake slant (the cause of the
   poor-looking mobile italics).
   Covers the site's italic classes (.lead, .method-card) as well
   as em/i/blockquote. Add .sq-hand to anything else in Socrates'
   voice (rotating greeting, daily question, his dialogue lines).
   ============================================================ */
em, i, blockquote, .sq-hand,
.lead, .method-card p {
  font-family: var(--sq-font-hand);
  font-style: normal;
  font-size: 1.05em;
  letter-spacing: 0.01em;
}
/* Opt-out for anything that must stay a true serif italic: */
.sq-serif-italic { font-family: var(--sq-font-serif); font-style: italic; font-size: 1em; }

body.sq-no-scroll { overflow: hidden; }

/* ============================================================
   HEADER — same visual language as the current site-topnav:
   fixed 48px bar, blurred ink background, hairline bottom edge,
   Inter links, gold pill CTA. Plus: animated logo mark, active
   underline, and a proper mobile overlay menu.
   nav.js injects a spacer so page content is not overlapped.
   ============================================================ */

.sq-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(20, 24, 26, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sq-surface-edge);
}
.sq-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--sq-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sq-nav-spacer { height: var(--sq-nav-h); }

/* Logo — mark draws itself once on load, then rests */
.sq-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  perspective: 400px;
}
.sq-logo-word {
  font-family: var(--sq-font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sq-parchment);
  white-space: nowrap;
}
.sq-logo-word-q { color: var(--sq-gold); }

/* The site's rotating logo — same animation as the Socratic Method
   page hero (logo-spin-y), sized for the 48px bar */
.sq-logo-img {
  width: 30px; height: auto; display: block;
  animation: sq-logo-spin-y 14s linear infinite;
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.sq-logo-fallback {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--sq-gold);
  align-items: center; justify-content: center;
  animation: sq-logo-spin-y 14s linear infinite;
}
.sq-logo-fallback span {
  font-family: var(--sq-font-serif);
  font-size: 17px; color: var(--sq-gold); line-height: 1;
}
@keyframes sq-logo-spin-y { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sq-logo-img, .sq-logo-fallback { animation: none; }
}

/* Page hero logo — the large spinning mark at the top of each page */
.sq-page-logo-wrap { perspective: 900px; text-align: center; padding-top: 24px; margin-bottom: 6px; }
.sq-page-logo { width: 84px; height: auto; display: block; margin: 0 auto; animation: sq-logo-spin-y 14s linear infinite; transform-style: preserve-3d; backface-visibility: visible; }
.sq-page-logo-fallback { width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--sq-gold); display: none; align-items: center; justify-content: center; margin: 0 auto; animation: sq-logo-spin-y 14s linear infinite; }
.sq-page-logo-fallback span { font-family: var(--sq-font-serif); font-size: 38px; color: var(--sq-gold); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .sq-page-logo, .sq-page-logo-fallback { animation: none; } }
@media (max-width: 520px) { .sq-page-logo { width: 68px; } }

/* Desktop links */
.sq-nav-links { display: flex; align-items: center; flex: 1; justify-content: center; }
.sq-nav-link {
  font-family: var(--sq-font-ui);
  font-size: 12px;
  color: var(--sq-parchment-dim);
  text-decoration: none;
  padding: 4px 10px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.sq-nav-link:hover { color: var(--sq-gold); }
.sq-nav-link.is-active { color: var(--sq-gold); border-bottom-color: var(--sq-gold); }

/* Gold pill CTA — same as the current .site-topnav-cta */
.sq-nav-count {
  font-family: var(--sq-font-ui);
  font-size: 11px;
  color: var(--sq-gold);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}
.sq-nav-count:empty { display: none; }
.sq-cta {
  font-family: var(--sq-font-ui);
  font-size: 12px;
  color: var(--sq-gold);
  text-decoration: none;
  border: 1px solid rgba(201, 162, 75, 0.35);
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.sq-cta:hover { border-color: var(--sq-gold); background: rgba(201, 162, 75, 0.08); }
.sq-cta:focus-visible,
.sq-nav-link:focus-visible,
.sq-burger:focus-visible { outline: 2px solid var(--sq-gold); outline-offset: 3px; }

/* Hamburger — hidden on desktop */
.sq-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  padding: 11px;
  flex-shrink: 0;
}
.sq-burger span { display: block; height: 1.5px; width: 100%; background: var(--sq-parchment); }

/* ---------------- MOBILE ---------------- */

@media (max-width: 640px) {
  .sq-nav-links { display: none; }
  .sq-burger { display: flex; }
  /* Hide the top-bar CTA on mobile — it crowds and covers the burger.
     The same action still lives inside the burger overlay (.sq-overlay-cta). */
  .sq-nav .sq-cta { display: none; }
}

/* Full-screen overlay — a deliberate pause, not a drawer */
.sq-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 24, 26, 0.97);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sq-overlay[hidden] { display: none !important; }
.sq-overlay.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sq-overlay { transition: none; } }

.sq-overlay-close {
  position: absolute; top: 8px; right: 16px;
  font-size: 38px; line-height: 1;
  color: var(--sq-parchment-dim);
  background: none; border: none; cursor: pointer;
  width: 48px; height: 48px;
}
.sq-overlay-links {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center;
}
.sq-overlay-link {
  font-family: var(--sq-font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--sq-parchment);
  text-decoration: none;
  padding: 9px 16px;          /* comfortable thumb targets */
}
.sq-overlay-link.is-active { color: var(--sq-gold); }
.sq-overlay-authlink, .sq-overlay-forum, .sq-overlay-signout { color: var(--sq-parchment-dim); font-size: 21px; }
.sq-overlay-cta { margin-top: 22px; font-size: 14px; padding: 9px 22px; }

/* ---------------- FOOTER — same voice as the current .disc ---------------- */

.sq-footer {
  margin-top: 52px;
  padding: 24px 24px 60px;
  border-top: 1px solid var(--sq-surface-edge);
  font-family: var(--sq-font-ui);
  font-size: 12px;
  color: var(--sq-dim);
  line-height: 1.7;
  text-align: center;
}
.sq-footer a { color: var(--sq-dim); text-decoration: none; }
.sq-footer a:hover { color: var(--sq-gold); }
.sq-footer a.is-active { color: var(--sq-gold); }
.sq-footer-note { margin-top: 12px; }

/* ---------------- PAGE HELPERS (used by membership & dialogues) ---------------- */

.sq-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 52px 24px 0;
  font-family: var(--sq-font-serif);
  color: var(--sq-parchment);
  font-size: 19px;
  line-height: 1.75;
}
.sq-page h1 { font-size: 34px; font-weight: 500; line-height: 1.25; margin-bottom: 12px; }
.sq-page h2 {
  font-family: var(--sq-font-ui);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sq-gold);
  margin: 40px 0 16px;
}
.sq-page p { margin-bottom: 1.1em; }
.sq-page a { color: var(--sq-gold); text-decoration: none; }
.sq-page a:hover { text-decoration: underline; }
.sq-page strong { font-weight: 500; }

.sq-tier {
  background: var(--sq-surface);
  border: 1px solid var(--sq-surface-edge);
  border-left: 3px solid var(--sq-gold);
  border-radius: 10px;
  padding: 22px 26px;
  margin: 28px 0;
}
.sq-tier h2 { margin: 0 0 10px; }
.sq-tier .sq-price {
  font-family: var(--sq-font-serif);
  font-size: 17px;
  letter-spacing: 0; text-transform: none;
  color: var(--sq-parchment-dim);
  margin-left: 8px;
}
.sq-tier p:last-child { margin-bottom: 0; }
.sq-tier-cta {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sq-font-ui);
  font-size: 14px;
  color: var(--sq-gold);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--sq-gold) 45%, transparent);
  padding: 10px 22px;
  border-radius: 24px;
  transition: border-color .2s, background .2s, color .2s;
}
.sq-tier-cta:hover { border-color: var(--sq-gold); background: color-mix(in srgb, var(--sq-gold) 10%, transparent); }
.sq-tier-cta-gold {
  background: var(--sq-gold);
  color: var(--sq-ink);
  border-color: var(--sq-gold);
  font-weight: 500;
}
.sq-tier-cta-gold:hover { background: var(--sq-gold-soft); color: var(--sq-ink); }

@media (max-width: 520px) {
  .sq-page { font-size: 17px; }
  .sq-page h1 { font-size: 26px; }
}