/* ═══════════════════════════════════════════
   STT SHARED STYLES — dark mode + auth
   ═══════════════════════════════════════════ */

/* ── LIGHT MODE OVERRIDES ── */
body.light {
  --bg:#FAF8F4;
  --bg2:#F3F0E8;
  --surface:#EDEAE2;
  --surface2:#E5E2DA;
  --txt:#1C1A14;
  --txt2:rgba(28,26,20,.65);
  --txt3:rgba(28,26,20,.4);
  --border:rgba(28,26,20,.1);
}
body.light nav {
  background:rgba(250,248,244,.9) !important;
  border-bottom-color:rgba(28,26,20,.08);
}
body.light #loader {
  background:var(--bg);
}
/* Per-page footer/testimonial-arrow/etc rules hardcode a dark colour
   directly (not a var), so override them here with higher specificity
   rather than editing every page's inline <style> block. */
body.light footer {
  background:var(--surface2) !important;
}
/* Promo banners (Code Blue teaser/banner, ECG teaser) hardcode a dark
   gradient background behind var(--txt)/var(--txt2) text, which goes
   near-black-on-near-black in light mode. Swap to the themed surface
   colour so the accent border/icon still carries the brand tint. */
body.light .cb-teaser,
body.light .cb-banner,
body.light .ecg-banner {
  background:var(--surface) !important;
}
/* The "coming soon" badge on blog/resource cards sits on a fixed dark
   overlay regardless of theme (it's over a card image, not the page
   background), so its text must stay fixed-light rather than following
   var(--txt2), which turns dark and unreadable in light mode. */
body.light .coming-soon-badge {
  color:rgba(255,255,255,.85) !important;
}

/* ── NAV ADDITIONS ── */
.nav-actions {
  display:flex;align-items:center;gap:8px;
}
.theme-toggle {
  height:34px;border-radius:100px;border:1px solid var(--border);
  background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;white-space:nowrap;
  transition:background .2s,border-color .2s;color:var(--txt);
  flex-shrink:0;
  font-size:12px;font-weight:700;font-family:'Inter',sans-serif;
}
.theme-toggle:hover{background:rgba(237,232,224,.08);border-color:rgba(237,232,224,.2)}
body.light .theme-toggle:hover{background:rgba(28,26,20,.06);border-color:rgba(28,26,20,.2)}
.theme-toggle #theme-icon{display:flex;align-items:center;gap:5px}
.theme-toggle #theme-icon svg{flex-shrink:0}

.nav-signup-btn {
  font-size:12.5px;font-weight:700;
  padding:8px 16px;border-radius:7px;
  border:1px solid var(--border);background:transparent;
  color:var(--txt2);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
  font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.nav-signup-btn:hover{color:var(--txt);border-color:rgba(237,232,224,.25);background:rgba(237,232,224,.06)}
body.light .nav-signup-btn:hover{color:var(--txt);border-color:rgba(28,26,20,.2);background:rgba(28,26,20,.04)}

/* user menu */
.nav-user-menu {
  position:relative;align-items:center;gap:8px;
}
.nav-user-btn {
  display:flex;align-items:center;gap:7px;
  background:none;border:none;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--txt2);
  font-family:'Inter',sans-serif;
  transition:color .2s;
}
.nav-user-btn:hover{color:var(--txt)}
.nav-user-av {
  width:28px;height:28px;border-radius:50%;
  background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.nav-user-dropdown {
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:6px;min-width:160px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:200;
}
.nav-user-dropdown.open{display:block}
.nav-user-dropdown a {
  display:block;padding:9px 12px;border-radius:6px;
  font-size:13px;font-weight:500;color:var(--txt2);
  text-decoration:none;transition:background .2s,color .2s;
}
.nav-user-dropdown a:hover{background:var(--surface2);color:var(--txt)}
.nav-user-dropdown .dd-logout{color:var(--coral)}
.nav-user-dropdown .dd-logout:hover{background:var(--coral-dim)}

/* ── AUTH MODAL ── */
.auth-overlay {
  position:fixed;inset:0;z-index:5000;
  background:rgba(6,14,8,.85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  padding:20px;
}
.auth-overlay.open{opacity:1;visibility:visible}

.auth-card {
  background:var(--bg2);border:1px solid var(--border);
  border-radius:16px;padding:36px;width:100%;max-width:420px;
  position:relative;
  transform:translateY(20px);transition:transform .25s ease;
}
.auth-overlay.open .auth-card{transform:translateY(0)}

.auth-close {
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);background:none;cursor:pointer;
  font-size:12px;color:var(--txt3);
  display:flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s;
}
.auth-close:hover{color:var(--txt);border-color:rgba(237,232,224,.25)}

.auth-logo {
  display:flex;align-items:center;gap:10px;margin-bottom:24px;
}
.auth-logo-orb {
  width:30px;height:30px;border-radius:50%;background:var(--coral);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 0 12px rgba(232,69,53,.4);
}
.auth-logo-orb svg{width:16px;height:9px}
.auth-logo-n{font-family:'Fraunces',Georgia,serif;font-size:13px;font-weight:800;color:var(--txt);letter-spacing:-.2px;line-height:1.1}
.auth-logo-t{font-size:10px;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}

.auth-tabs {
  display:flex;border-bottom:1px solid var(--border);margin-bottom:24px;
}
.auth-tab {
  flex:1;padding:10px;font-size:13.5px;font-weight:700;
  background:none;border:none;cursor:pointer;
  color:var(--txt3);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .2s,border-color .2s;
  font-family:'Inter',sans-serif;
}
.auth-tab.active{color:var(--txt);border-bottom-color:var(--coral)}

.auth-panel{display:none}
.auth-panel.active{display:block}

.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12px;font-weight:700;color:var(--txt3);margin-bottom:5px;letter-spacing:.3px}
.auth-field input {
  width:100%;padding:11px 14px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--txt);font-size:14px;font-family:'Inter',sans-serif;
  outline:none;transition:border-color .2s;
}
.auth-field input::placeholder{color:var(--txt3)}
.auth-field input:focus{border-color:rgba(232,69,53,.45)}

.auth-msg {
  min-height:20px;font-size:12.5px;margin:10px 0;border-radius:6px;
  padding:0;transition:all .2s;
}
.auth-msg.error{color:#E84535;background:rgba(232,69,53,.08);padding:8px 12px}
.auth-msg.success{color:#50B450;background:rgba(80,180,80,.08);padding:8px 12px}

.auth-submit {
  width:100%;padding:13px;border-radius:8px;border:none;cursor:pointer;
  background:var(--coral);color:#fff;font-size:14px;font-weight:700;
  font-family:'Inter',sans-serif;
  transition:background .2s,opacity .2s;margin-top:4px;
}
.auth-submit:hover{background:var(--coral-lt)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}

.auth-switch {
  text-align:center;font-size:12.5px;color:var(--txt3);margin-top:14px;
}
.auth-switch a{color:var(--coral);text-decoration:none;font-weight:600}
.auth-switch a:hover{text-decoration:underline}

.auth-divider{
  display:flex;align-items:center;gap:12px;margin:14px 0;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-divider span{font-size:11px;color:var(--txt3);white-space:nowrap}

/* ── TOAST NOTIFICATION ── */
#stt-toast {
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:13px 22px;font-size:13.5px;font-weight:600;color:var(--txt);
  box-shadow:0 8px 32px rgba(0,0,0,.3);z-index:6000;
  transition:transform .3s ease;white-space:nowrap;
}
#stt-toast.show{transform:translateX(-50%) translateY(0)}
#stt-toast.toast-success{border-left:3px solid #50B450}
#stt-toast.toast-error{border-left:3px solid var(--coral)}

/* ── ACCOUNT PAGE (for future use) ── */
.acct-badge {
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;
  text-transform:uppercase;letter-spacing:1px;
}
.acct-badge.registered{background:rgba(80,180,80,.1);color:#50B450}
.acct-badge.pending{background:var(--amber-dim);color:var(--amber)}

/* Narrow phones: the nav has ~zero spare width once the sun/moon
   icon joins the "Dark"/"Light" label, so claw the space back from
   the toggle and its neighbours rather than letting the nav overflow.
   Placed last in the file so it wins the cascade tie against the
   unconditional rules above it, regardless of source order. */
@media(max-width:480px){
  .theme-toggle{padding:0 6px}
  .theme-toggle #theme-icon{gap:3px}
  .theme-toggle #theme-icon svg{width:9px;height:9px}
  .nav-actions{gap:5px}
  .nav-signup-btn{padding:8px 10px;font-size:11.5px}
  .nav-user-btn{gap:4px;font-size:11.5px}
  .nav-user-av{width:24px;height:24px;font-size:10px}
  #nav-user-name{max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
}