/* ============================================================================
   MedMasters themes  ·  /theme.css
   Loaded AFTER each page's own stylesheet. Golden Premium (the default) needs
   no overrides: its values already live in each page's :root.
   Themes: gold (default) · official (calm teal with slate and sage) · navy · bw (black and white) · sepia
   ========================================================================== */

/* ---------- OFFICIAL (teal, light) ---------- */
html[data-theme="official"]{
  --gold:#247682; --gold-bright:#3894A1; --gold-dim:#8FB3B8; --gold2:#3894A1; --gold-glow:rgba(56,148,161,.22);
  --acc-rgb:36,118,130; --acc2-rgb:56,148,161;
  --bg:#F0F1EE; --card:#FFFFFF; --card2:#E6EEEA; --surf-a:#F6F7F5; --surf-b:#E9EFEC;
  --border:rgba(56,148,161,.30); --border-soft:rgba(47,64,79,.12);
  --white:#1F2D3A; --cream:#2F404F; --text:#536571; --text-mid:#44566A;
  --green:#15803D; --ok:#15803D; --ok-rgb:21,128,61; --ok-dark:#166534; --ok-dark-rgb:22,101,52;
  --red:#B91C1C; --bad:#B91C1C; --bad-rgb:185,28,28; --bad-dark:#991B1B; --bad-dark-rgb:153,27,27;
  --warn:#B45309; --warn-rgb:180,83,9; --amber-rgb:180,83,9;
  --bg-rgb:240,241,238; --bg2-rgb:230,238,234; --ov-rgb:0,0,0; --white-rgb:31,45,58;
  --on-acc:#FFFFFF; --nav-bg:#2B7F8B; --menu-bg:#226A75; --nav-med:#FFFFFF; --nav-masters:#C7EEF2;
  --surf-c:#FFFFFF; --surf-d:#FFFFFF; --surf-e:#F6F7F5; --gold-light:#2F8896; --gold-light2:#247682; --read-q:#1F2D3A; --read-opt:#2F404F; --read-mcq:#2F404F; --read-exp:#44566A; --read-note:#536571;
  --bg2:#E6EEEA; --surf-h:#FFFFFF; --ok-text:#166534; --info-text:#3342B8;
  --err-text:#7F1D1D; --info-note:#2F3C8F; --surf-i:#F6F7F5;
}
/* ---------- NAVY (light) ---------- */
html[data-theme="navy"]{
  --gold:#1D4ED8; --gold-bright:#2563EB; --gold-dim:#7C97DB; --gold2:#2563EB; --gold-glow:rgba(29,78,216,.22);
  --acc-rgb:29,78,216; --acc2-rgb:37,99,235;
  --bg:#F4F6FA; --card:#FFFFFF; --card2:#ECF0F7; --surf-a:#F7F9FC; --surf-b:#EEF2F8;
  --border:rgba(29,78,216,.22); --border-soft:rgba(29,78,216,.10);
  --white:#0F172A; --cream:#1E293B; --text:#5B6577; --text-mid:#3B4659;
  --green:#15803D; --ok:#15803D; --ok-rgb:21,128,61; --ok-dark:#166534; --ok-dark-rgb:22,101,52;
  --red:#B91C1C; --bad:#B91C1C; --bad-rgb:185,28,28; --bad-dark:#991B1B; --bad-dark-rgb:153,27,27;
  --warn:#B45309; --warn-rgb:180,83,9; --amber-rgb:180,83,9;
  --bg-rgb:244,246,250; --bg2-rgb:236,240,247; --ov-rgb:0,0,0; --white-rgb:15,23,42;
  --on-acc:#FFFFFF; --nav-bg:#1E3A8A; --menu-bg:#172F73; --nav-med:#FFFFFF; --nav-masters:#93C5FD;
  --surf-c:#FFFFFF; --surf-d:#FFFFFF; --surf-e:#F7F9FC; --gold-light:#3B6BE6; --gold-light2:#2B58D6; --read-q:#0F172A; --read-opt:#1E293B; --read-mcq:#1E293B; --read-exp:#3B4659; --read-note:#5B6577;
  --bg2:#ECF0F7; --surf-h:#FFFFFF; --ok-text:#166534; --info-text:#3342B8;
  --err-text:#7F1D1D; --info-note:#2F3C8F; --surf-i:#F7F9FC;
}
/* ---------- BLACK AND WHITE (light, paper-like) ---------- */
html[data-theme="bw"]{
  --gold:#111111; --gold-bright:#000000; --gold-dim:#777777; --gold2:#000000; --gold-glow:rgba(0,0,0,.18);
  --acc-rgb:17,17,17; --acc2-rgb:0,0,0;
  --bg:#FFFFFF; --card:#FFFFFF; --card2:#F3F3F3; --surf-a:#F8F8F8; --surf-b:#F0F0F0;
  --border:rgba(0,0,0,.42); --border-soft:rgba(0,0,0,.16);
  --white:#000000; --cream:#111111; --text:#555555; --text-mid:#333333;
  --green:#15803D; --ok:#15803D; --ok-rgb:21,128,61; --ok-dark:#166534; --ok-dark-rgb:22,101,52;
  --red:#B91C1C; --bad:#B91C1C; --bad-rgb:185,28,28; --bad-dark:#991B1B; --bad-dark-rgb:153,27,27;
  --warn:#B45309; --warn-rgb:180,83,9; --amber-rgb:180,83,9;
  --bg-rgb:255,255,255; --bg2-rgb:243,243,243; --ov-rgb:0,0,0; --white-rgb:0,0,0;
  --on-acc:#FFFFFF; --nav-bg:#000000; --menu-bg:#111111; --nav-med:#FFFFFF; --nav-masters:#C8C8C8;
  --surf-c:#FFFFFF; --surf-d:#FFFFFF; --surf-e:#F8F8F8; --gold-light:#444444; --gold-light2:#2A2A2A; --read-q:#000000; --read-opt:#111111; --read-mcq:#111111; --read-exp:#333333; --read-note:#444444;
  --bg2:#F3F3F3; --surf-h:#FFFFFF; --ok-text:#166534; --info-text:#3342B8;
  --err-text:#7F1D1D; --info-note:#2F3C8F; --surf-i:#F8F8F8;
}
/* ---------- SEPIA (light, warm paper) ---------- */
html[data-theme="sepia"]{
  --gold:#8C4A1E; --gold-bright:#A8601F; --gold-dim:#B58A63; --gold2:#A8601F; --gold-glow:rgba(140,74,30,.22);
  --acc-rgb:140,74,30; --acc2-rgb:168,96,31;
  --bg:#F4ECD8; --card:#FBF6E9; --card2:#EFE4C9; --surf-a:#F8F1DF; --surf-b:#F1E7CD;
  --border:rgba(140,74,30,.26); --border-soft:rgba(140,74,30,.13);
  --white:#3A2E1F; --cream:#4A3B28; --text:#6F5F47; --text-mid:#5E4E38;
  --green:#2F7D32; --ok:#2F7D32; --ok-rgb:47,125,50; --ok-dark:#276629; --ok-dark-rgb:39,102,41;
  --red:#B3261E; --bad:#B3261E; --bad-rgb:179,38,30; --bad-dark:#8F1D17; --bad-dark-rgb:143,29,23;
  --warn:#9A5B00; --warn-rgb:154,91,0; --amber-rgb:154,91,0;
  --bg-rgb:244,236,216; --bg2-rgb:239,228,201; --ov-rgb:0,0,0; --white-rgb:58,46,31;
  --on-acc:#FFFFFF; --nav-bg:#4A3320; --menu-bg:#3B2918; --nav-med:#FFFFFF; --nav-masters:#E8B873;
  --surf-c:#FBF6E9; --surf-d:#FBF6E9; --surf-e:#F8F1DF; --gold-light:#A8601F; --gold-light2:#B5712A; --read-q:#3A2E1F; --read-opt:#4A3B28; --read-mcq:#4A3B28; --read-exp:#5E4E38; --read-note:#6F5F47;
  --bg2:#EFE4C9; --surf-h:#FBF6E9; --ok-text:#276629; --info-text:#3342B8;
  --err-text:#7F1D1D; --info-note:#2F3C8F; --surf-i:#F8F1DF;
}

/* ---------- light themes: the top bar and footer stay deep so the white "Med" is always readable ---------- */
html[data-mode="light"] nav .nav-links a,
html[data-mode="light"] .seo-nav-links a:not(.seo-nav-cta){color:rgba(255,255,255,.92)}
html[data-mode="light"] nav .nav-links a:hover,
html[data-mode="light"] .seo-nav-links a:not(.seo-nav-cta):hover{color:#fff}
html[data-mode="light"] .hamburger span{background:#fff}
html[data-mode="light"] nav .nav-code-btn,
html[data-mode="light"] .seo-nav-cta{background:#fff!important;color:var(--nav-bg)!important;border-color:#fff}
html[data-mode="light"] .mobile-menu a{color:rgba(255,255,255,.92);border-bottom-color:rgba(255,255,255,.14)}
html[data-mode="light"] .mobile-menu a:hover{color:#fff}
html[data-mode="light"] .mobile-menu .mm-sub{color:rgba(255,255,255,.6)}
html[data-mode="light"] footer,
html[data-mode="light"] .seo-footer{background:var(--nav-bg);border-top-color:rgba(255,255,255,.14)}
html[data-mode="light"] footer .footer-tagline,
html[data-mode="light"] footer .footer-bottom,
html[data-mode="light"] footer .footer-bottom *,
html[data-mode="light"] footer p,
html[data-mode="light"] .seo-footer p{color:rgba(255,255,255,.9)}
html[data-mode="light"] footer p[style]{color:rgba(255,255,255,.9)!important}
html[data-mode="light"] footer h4,
html[data-mode="light"] .seo-footer h4{color:var(--nav-masters)}
html[data-mode="light"] footer a,
html[data-mode="light"] .seo-footer a{color:rgba(255,255,255,.92)}
html[data-mode="light"] footer a:hover,
html[data-mode="light"] .seo-footer a:hover{color:#fff}
html[data-mode="light"] footer .footer-wa a{color:#86EFAC}

/* ---------- theme picker (palette button + sheet) ---------- */
.mmt-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;padding:0;flex:none;margin-left:8px}
.mmt-btn:hover{background:rgba(255,255,255,.18)}
.mmt-btn:focus-visible,.mmt-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:480px){.mmt-btn{width:32px;height:32px;margin-left:4px}.mmt-btn svg{width:16px;height:16px}}
nav .nav-right .mmt-btn{margin-left:0}
.mmt-btn svg{width:18px;height:18px;display:block}
.mmt-float{position:fixed;left:14px;bottom:14px;z-index:1500;margin:0;background:var(--nav-bg);border-color:rgba(255,255,255,.3);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.mmt-ov{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center;padding:0}
.mmt-sheet{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--card);color:var(--white);
  border:1px solid var(--border);border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));font-family:'Poppins',system-ui,sans-serif}
@media(min-width:640px){.mmt-ov{align-items:center}.mmt-sheet{border-radius:22px}}
.mmt-sheet h2{font-size:18px;font-weight:800;margin:0 0 4px;color:var(--white)}
.mmt-sheet p.mmt-sub{font-size:13px;color:var(--text);margin:0 0 14px;line-height:1.5}
.mmt-x{position:absolute;right:14px;top:12px;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer;line-height:1}
.mmt-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--bg);color:var(--white);
  border:1.5px solid var(--border-soft);border-radius:14px;padding:11px 12px;margin-top:9px;cursor:pointer;font:inherit}
.mmt-card:hover{border-color:var(--gold)}
.mmt-card[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.18)}
.mmt-sw{display:flex;flex:none;border-radius:10px;overflow:hidden;border:1px solid rgba(128,128,128,.4)}
.mmt-sw i{display:block;width:16px;height:34px}
.mmt-tx{flex:1;min-width:0}.mmt-tx b{display:block;font-size:14px;font-weight:700;color:var(--white)}
.mmt-tx span{display:block;font-size:12px;color:var(--text);margin-top:1px}
.mmt-ck{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;color:transparent;font-size:13px;font-weight:800}
.mmt-card[aria-pressed="true"] .mmt-ck{background:var(--gold);border-color:var(--gold);color:var(--on-acc)}

/* ---------- USMLE pages and member app: bars that sit on the deep top bar ---------- */
html[data-mode="light"] header.nav .links a{color:rgba(255,255,255,.9)}
html[data-mode="light"] header.nav .links a:hover,html[data-mode="light"] header.nav .links a[aria-current="page"]{color:#fff}
html[data-mode="light"] header.nav .brand small{color:rgba(255,255,255,.72);border-left-color:rgba(255,255,255,.32)}
html[data-mode="light"] header.nav summary{color:#fff}
html[data-mode="light"] .top .chip-btn{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
html[data-mode="light"] .top .timer{color:#fff}
html[data-mode="light"] .top .brand small{color:rgba(255,255,255,.72)}

/* ---------- narrow phones: the main app's top bar keeps its original layout; the theme picker lives in the menu instead ---------- */
.mmt-menu-item{display:none!important}
@media(max-width:430px){
  .mobile-menu .mmt-menu-item{display:flex!important;cursor:pointer}
  .mmt-cur{font-size:11px;font-weight:600;color:var(--gold);margin-left:8px}
}
html[data-mode="light"] .mmt-cur{color:var(--nav-masters)}

@media(max-width:430px){
  html.mmt-nav nav{padding:0 3%}
  html.mmt-nav .nav-logo{gap:8px}
  html.mmt-nav .nav-logo img{width:32px;height:32px}
  html.mmt-nav .nav-brand{font-size:17px}
  html.mmt-nav .nav-right{gap:6px}
  html.mmt-nav .nav-code-btn{padding:7px 10px}
}
.mmt-hint{position:fixed;z-index:4900;background:var(--card);color:var(--white);border:1.5px solid var(--gold);border-radius:12px;
  padding:9px 14px;font:600 13px 'Poppins',system-ui,sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer;max-width:70vw}
.mmt-hint:after{content:"";position:absolute;top:-7px;right:14px;width:12px;height:12px;background:var(--card);border-left:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:rotate(45deg)}

html[data-mode="light"] header.nav .back{color:#fff;border-color:rgba(255,255,255,.4)}