/* ═══════════════════════════════════════════════════════════
   WealthHub X — whx-all.css  v1.1.0
   Single merged stylesheet — no @imports, no split-file issues
   ═══════════════════════════════════════════════════════════ */

/* ── 1. BASE ─────────────────────────────────────────────── */
/* ============================================================
   WEALTHHUB X — MAIN STYLESHEET v2
   Font: Open Sans only (300/400/500/600/700)
   Design: Dark editorial finance — gold × charcoal
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:        #09090E;
  --bg-2:      #0E0E15;
  --bg-3:      #13131C;
  --bg-4:      #18181F;
  --gold:      #E8A020;
  --gold-2:    #C47E10;
  --gold-pale: rgba(232,160,32,0.08);
  --gold-glow: rgba(232,160,32,0.18);
  --cream:     #F0EDE4;
  --cream-2:   #B8B5AE;
  --cream-3:   #8A877F;
  --border:    rgba(255,255,255,0.06);
  --border-2:  rgba(255,255,255,0.10);
  --green:     #22C55E;
  --red:       #EF4444;
  --blue:      #3B82F6;
  --ff:        'Open Sans', system-ui, sans-serif;
  --ff-mono:   'Courier New', Courier, monospace;
  --r:         6px;
  --r-lg:      12px;
  --r-xl:      20px;
  --t:         0.2s ease;
  --max:       1260px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  /* overflow-x:hidden removed from body — setting it here breaks position:fixed
     on iOS Safari (turns body into a scroll container). Kept on html only. */
  -webkit-font-smoothing: antialiased;
  padding-top: 62px; /* fixed nav height */
  /* Sticky footer: body fills at least full viewport height.
     footer.site-footer gets margin-top:auto to push to bottom
     on short-content pages (about, empty courses, etc.)       */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
footer.site-footer {
  margin-top: auto;
}
img, video, svg, canvas, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: var(--ff); }
::selection { background: var(--gold); color: #000; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ── UTILITIES ───────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem,5vw,2.5rem); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
.gold  { color: var(--gold); }
.green { color: var(--green); }
.red   { color: var(--red); }
.text-center { text-align: center; }
.mt-2 { margin-top: 1rem; }   .mt-3 { margin-top: 1.5rem; }  .mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

/* ── READING PROGRESS ────────────────────────────────────── */
#whx-progress { position:fixed;top:0;left:0;right:0;z-index:9999;height:2px;background:transparent; }
#whx-progress-fill { height:100%;background:var(--gold);width:0%;transition:width .1s linear; }



/* ── 2. NAV ──────────────────────────────────────────────── */
/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  height: 62px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.site-nav.scrolled {
  background: rgba(9,9,14,0.94);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.nav-inner { display:flex; align-items:center; height:62px; }
.nav-logo  { display:flex; align-items:center; gap:10px; margin-right:auto; flex-shrink:0; }
.nav-logo img { height:28px; width:auto; }
.nav-links { display:flex; list-style:none; }
.nav-links a {
  display:flex; align-items:center; height:62px; padding:0 14px;
  font-size:0.74rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--cream-2); border-bottom:2px solid transparent;
  transition:color var(--t), border-color var(--t); white-space:nowrap;
}
.nav-links a:hover,
.nav-links a.current-menu-item { color:var(--gold); border-bottom-color:var(--gold); }
.nav-cta {
  margin-left:16px; padding:9px 20px;
  background:var(--gold); color:#000;
  font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  border:none; border-radius:var(--r); cursor:pointer;
  transition:background var(--t), transform var(--t); flex-shrink:0;
}
.nav-cta:hover { background:var(--gold-2); transform:translateY(-1px); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; margin-left:auto; }
.nav-hamburger span { display:block; width:22px; height:1.5px; background:var(--cream); transition:all var(--t); }
.nav-mobile {
  display:none; position:fixed; inset:0; z-index:800;
  background:var(--bg-2); padding:80px 1.5rem 2rem;
  flex-direction:column;
}
.nav-mobile.open { display:flex; }
.nav-mobile a {
  display:block; padding:14px 0; font-size:1.1rem; font-weight:600;
  color:var(--cream-2); border-bottom:1px solid var(--border); transition:color var(--t);
}
.nav-mobile a:hover { color:var(--gold); }
.nav-mobile-cta {
  margin-top:20px; display:block; padding:14px; text-align:center;
  background:var(--gold); color:#000; font-weight:700; font-size:0.86rem;
  border-radius:var(--r); text-transform:uppercase; letter-spacing:0.06em;
}
@media(max-width:860px) { .nav-links,.nav-cta{display:none;} .nav-hamburger{display:flex;} }

/* ============================================================
/* ── NAV: MOBILE IMPROVEMENTS ──────────────────────────── */
@media(max-width:860px) {
    /* Nav pill (Courses) + fire link still visible on mobile through hamburger */
    .nav-hamburger { display: flex; }
}

/* Mobile nav overlay: full screen, touch-friendly links */
.nav-mobile {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 62px; left: 0; right: 0; bottom: 0;
    background: rgba(9,9,14,0.97);
    backdrop-filter: blur(20px);
    z-index: 800;
    padding: 1.5rem 1.25rem;
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cream-2);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    min-height: 56px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.nav-mobile a:hover, .nav-mobile a:focus { color: var(--gold); }
.nav-mobile a:last-child { border-bottom: none; }

/* Prevent body scroll when mobile nav is open */
body.nav-open, body.search-open { overflow: hidden; }


/* ── 3. COMPONENTS (light mode, logos, search, mode toggle) ─ */
/* ── LIGHT MODE OVERRIDES ───────────────────────────────── */

/* ── DUAL LOGO: dark shown by default, light hidden ────── */
/* JS (applyLogoForTheme) swaps display. CSS matches default dark theme. */
.whx-logo-dark  { display: block; }
.whx-logo-light { display: none;  }
[data-theme="light"] .whx-logo-dark  { display: none;  }
[data-theme="light"] .whx-logo-light { display: block; }

[data-theme="light"] {
  --bg:        #F8F6F0;
  --bg-2:      #F0EDE5;
  --bg-3:      #E8E4DA;
  --bg-4:      #DDD9CE;
  --cream:     #1A1816;
  --cream-2:   #3D3A34;
  --cream-3:   #6B6760;
  --border:    rgba(0,0,0,0.08);
  --border-2:  rgba(0,0,0,0.14);
  --gold-pale: rgba(180,100,10,0.08);
}

/* Light mode nav */
[data-theme="light"] .site-nav.scrolled {
  background: rgba(248,246,240,0.95);
  border-bottom: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
[data-theme="light"] .nav-links a { color: var(--cream-2); }
[data-theme="light"] .nav-links a:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
[data-theme="light"] .nav-hamburger span { background: var(--cream); }
[data-theme="light"] .nav-mobile { background: var(--bg-2); }



/* Light mode hero bg */
[data-theme="light"] .hero { background: var(--bg); }
[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 72% 38%, rgba(180,100,10,0.06) 0%,transparent 65%),
    var(--bg);
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
}
[data-theme="light"] .hero-heading { color: var(--cream); }
[data-theme="light"] .hero-stat-val { color: var(--cream); }

/* Light mode cards */
[data-theme="light"] .cat-card,
[data-theme="light"] .post-card,
[data-theme="light"] .feature-card { background: var(--bg-2); }
[data-theme="light"] .cat-card:hover,
[data-theme="light"] .post-card:hover,
[data-theme="light"] .feature-card:hover { background: var(--bg-3); }
[data-theme="light"] .post-card-title { color: var(--cream); }
[data-theme="light"] .post-card:hover .post-card-title { color: var(--gold-2); }

/* Light mode single post */
[data-theme="light"] .single-hero { background: var(--bg); }
[data-theme="light"] .post-content { color: var(--cream-2); }
[data-theme="light"] .post-content h2, [data-theme="light"] .post-content h3 { color: var(--cream); }
[data-theme="light"] .sidebar-widget { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .sw-header { border-color: var(--border); }

/* Light mode course / membership */
[data-theme="light"] .course-preview { background: var(--bg-2); border-color: var(--border); }
[data-theme="light"] .ctp-header { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .membership-section { background: var(--bg-2); }
[data-theme="light"] .tier-card { background: var(--bg-2); }

/* Light mode footer */
[data-theme="light"] .site-footer { background: var(--bg-3); border-color: var(--border); }
[data-theme="light"] .footer-bottom { border-color: var(--border); }

/* ── MODE TOGGLE BUTTON ──────────────────────────────────── */
.mode-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background var(--t), border-color var(--t), transform var(--t);
  margin-left: 10px;
  flex-shrink: 0;
}
.mode-toggle:hover { border-color: var(--gold); transform: rotate(20deg); }
/* Icon label: JS sets data-mode on button */
.mode-toggle::after { content: '🌙'; display: block; line-height: 1; }
[data-theme="light"] .mode-toggle::after { content: '☀️'; }

/* ── ADDITIONAL STRUCTURAL CLASSES ──────────────────────── */
/* footer brand column */
.footer-brand { display:flex; flex-direction:column; }

/* newsletter text column */
.nl-text { flex:1; min-width:0; }

/* post main content area */
.post-main {
    min-width: 0;
    /* Explicit zero — prevents WordPress block-library CSS from
       adding left margin to <main> on some WP versions. */
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* TOC list */
.toc-list { list-style:none; display:flex; flex-direction:column; gap:0; }

/* breadcrumbs (if not already defined above) */
.whx-breadcrumbs { margin-bottom:.75rem; }
.whx-breadcrumbs ol { display:flex; align-items:center; gap:5px; list-style:none; flex-wrap:wrap; }
.whx-breadcrumbs li, .whx-breadcrumbs a { font-size:.7rem; font-weight:500; color:var(--cream-3); }
.whx-breadcrumbs a:hover { color:var(--gold); }
.bc-sep { color:var(--cream-3); font-size:.65rem; margin:0 2px; }
.course-stat-item { display:flex; flex-direction:column; gap:2px; }
.ep-info { flex:1; min-width:0; }
/* ── BROKERAGE SEGMENT BUTTON (page-tools.php) ─────────── */
.bseg-btn { transition: all 0.15s ease; }

@media(max-width:500px) {
  .nl-form { flex-direction:column; }
  .nl-input { min-width:0;width:100%; }
  .nl-form .btn-primary { width:100%;justify-content:center; }
}
/* ── WHX POST BODY SEO ELEMENTS ────────────────────────── */
.whx-seo-intro,
.whx-seo-footer { font-family: var(--ff); line-height: 1.7; }
.whx-seo-intro ul { padding-left: 1.2rem; font-size: .9rem; margin-bottom: .75rem; }
.whx-seo-intro p  { font-size: .92rem; }
.whx-related      { margin-top: 1.5rem; }
.whx-related a    { color: var(--gold); border-bottom: 1px dotted rgba(232,160,32,.4); text-decoration: none; }
.whx-related a:hover { border-color: var(--gold); }
/* ── INTERACTIVE POST CONTAINER ───────────────────────── */
.post-iframe-container { width: 100%; overflow: hidden; }
.post-iframe-container iframe { min-height: 44px; }
/* ── TOUCH TARGETS + OVERFLOW SAFETY ──────────────────── */
button, .btn, .btn-primary, .q-opt { min-height: 44px; }
.c-out-val { font-size: clamp(.85rem,3.5vw,1.4rem); word-break: break-all; overflow-wrap: break-word; }

/* ── NAV HIGHLIGHT STYLES — Courses accent + Prop Deals fire ─── */
.nav-links .nav-fire-link {
    color: #E8A020 !important;
    font-weight: 700;
    font-size: 0.88rem;
    position: relative;
    letter-spacing: 0.01em;
    animation: fire-pulse 3s ease-in-out infinite;
}
.nav-links .nav-fire-link:hover {
    color: #fff !important;
}
/* Light mode: gold→black hover for visibility on bright background */
[data-theme="light"] .nav-links .nav-fire-link:hover {
    color: #111 !important;
    text-shadow: none;
}
@keyframes fire-pulse {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 12px rgba(232,160,32,0.6); }
}

/* Mobile nav highlight items */
.nav-mobile .nav-mobile-highlight {
    color: var(--gold) !important;
    font-weight: 700;
}
.nav-mobile .nav-mobile-fire {
    color: #E8A020 !important;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Active nav link indicator */
.nav-links a.nav-active {
    color: var(--gold) !important;
}
/* ── SEARCH BUTTON — plain, matches nav link style ─────── */
.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0 12px;
    background: none;
    border: none;
    color: var(--cream-2);
    cursor: pointer;
    transition: color 0.15s;
    flex-shrink: 0;
}
.nav-search-btn:hover { color: var(--gold); }
@media(max-width:860px) { .nav-search-btn { display: none; } }

/* ── SEARCH OVERLAY — full-screen modal ─────────────────── */
.whx-search-overlay {
    display: none;                /* JS adds .open to show */
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(9,9,14,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-items: flex-start;
    justify-content: center;
    padding: clamp(80px,15vh,140px) 1rem 0;
}
.whx-search-overlay.open {
    display: flex;
}
.whx-search-inner { width: 100%; max-width: 620px; }
.whx-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a24;
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    padding: 0 1rem;
    height: 56px;
}
.whx-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 1.05rem;
    color: #fff;
    font-family: inherit;
    min-width: 0;
}
.whx-search-input::placeholder { color: rgba(255,255,255,0.35); }
.whx-search-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.whx-search-close:hover { color: #fff; }
.whx-search-hint {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
}
.whx-search-hint kbd {
    display: inline-block;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-family: monospace;
}

/* Mobile search inside hamburger menu */
.nav-mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-4);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.nav-mobile-search svg { color: var(--cream-3); flex-shrink: 0; }
.nav-mobile-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: var(--cream);
    font-family: var(--ff);
    min-width: 0;
}
.nav-mobile-search-input::placeholder { color: var(--cream-3); }

@media(max-width:860px) {
    .nav-search-icon { display: none; } /* hidden on mobile — search is inside the hamburger */
}


/* ── 4. HOME PAGE ────────────────────────────────────────── */
/* ============================================================
   HERO
   ============================================================ */
.hero { min-height:calc(100svh - 62px); display:flex; align-items:center; position:relative; overflow:hidden; padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,7vw,5rem); }
.hero-bg { position:absolute;inset:0;z-index:0; background:radial-gradient(ellipse 70% 60% at 72% 38%, rgba(232,160,32,0.055) 0%,transparent 65%), radial-gradient(ellipse 55% 70% at 8% 82%, rgba(59,130,246,0.035) 0%,transparent 60%), var(--bg); }
.hero-grid { position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.28) 18%,rgba(0,0,0,.28) 82%,transparent); }
.hero-content { position:relative;z-index:1;max-width:780px; }
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.hero-eyebrow::before {
    content: '';
    display: block;
    width: 20px;
    min-width: 20px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
@media(max-width:640px) {
    .hero-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        gap: 6px;
    }
    .hero-eyebrow::before { width: 14px; min-width: 14px; }
}
@media(max-width:420px) {
    .hero-eyebrow {
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }
}
.hero-heading { font-size:clamp(2.4rem,6.5vw,5rem); font-weight:700; line-height:1.1; color:var(--cream); letter-spacing:-0.025em; margin-bottom:1.25rem; }
.hero-heading em { font-style:normal; color:var(--gold); }
.hero-sub { font-size:clamp(0.95rem,1.8vw,1.1rem); font-weight:400; color:var(--cream-2); line-height:1.75; max-width:540px; margin-bottom:2.25rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:3rem; }
.btn-primary { display:inline-flex;align-items:center;gap:8px; padding:12px 26px; background:var(--gold);color:#000; font-size:0.8rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase; border-radius:var(--r);border:none;cursor:pointer; transition:background var(--t),transform var(--t); }
.btn-primary:hover { background:var(--gold-2);transform:translateY(-2px); }
.btn-outline { display:inline-flex;align-items:center;gap:8px; padding:12px 26px; background:transparent;color:var(--cream); font-size:0.8rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase; border-radius:var(--r);border:1px solid var(--border-2);cursor:pointer; transition:border-color var(--t),color var(--t); }
.btn-outline:hover { border-color:var(--gold);color:var(--gold); }
.hero-stats { display:flex;flex-wrap:wrap;gap:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-3); width:fit-content; }
.hero-stat { padding:13px 22px; border-right:1px solid var(--border); min-width:110px; }
.hero-stat:last-child { border-right:none; }
.hero-stat-val { font-size:1.7rem; font-weight:700; color:var(--cream); line-height:1; }
.hero-stat-val span { color:var(--gold); }
.hero-stat-lbl { font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--cream-3);margin-top:4px; }
@media(max-width:600px) {
  .hero-stats { width:100%; }
  .hero-stat { flex:1 1 calc(50% - 1px); border-right:1px solid var(--border); }
  .hero-stat:nth-child(2n) { border-right:none; }
  .hero-stat:nth-child(3),.hero-stat:nth-child(4) { border-top:1px solid var(--border); }
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section { padding:clamp(2.5rem,7vw,5.5rem) 0; }
.section-label { display:inline-flex;align-items:center;gap:8px; font-size:0.66rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:0.65rem; }
.section-label::before { content:'';display:block;width:18px;height:1px;background:var(--gold); }
.section-title { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:700; line-height:1.15; color:var(--cream); letter-spacing:-0.02em; margin-bottom:0.65rem; }
.section-title em { font-style:normal; color:var(--gold); }
.section-sub { font-size:0.95rem; color:var(--cream-2); line-height:1.7; max-width:500px; }
.section-header-row { display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1.75rem;gap:1rem;flex-wrap:wrap; }
.view-all { font-size:0.72rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--gold); display:flex;align-items:center;gap:5px; transition:gap var(--t); flex-shrink:0; }
.view-all:hover { gap:9px; }
.view-all svg { width:13px;height:13px; }

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.cats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.cat-card { background:var(--bg-3); padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:0.7rem; transition:background var(--t); cursor:pointer; }
.cat-card:hover { background:var(--bg-4); }
.cat-icon { width:38px;height:38px; display:flex;align-items:center;justify-content:center; border-radius:var(--r); font-size:1.2rem; }
.cat-name { font-size:0.88rem; font-weight:700; color:var(--cream); line-height:1.25; }
.cat-count { font-size:0.68rem; font-weight:600; color:var(--cream-3); letter-spacing:0.04em; }

/* ============================================================
   POST CARDS
   ============================================================ */
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.post-card { background:var(--bg-3); display:flex; flex-direction:column; transition:background var(--t); }
.post-card:hover { background:var(--bg-4); }
.post-card-thumb { aspect-ratio:16/9; overflow:hidden; background:var(--bg-4); position:relative; }
.post-card-thumb img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; }
.post-card:hover .post-card-thumb img { transform:scale(1.04); }
.post-card-no-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,var(--bg-4),var(--bg-2)); display:flex;align-items:center;justify-content:center; }
.post-card-no-thumb-icon { font-size:2.2rem; opacity:0.18; }
.post-card-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.post-card-meta { display:flex;align-items:center;gap:8px;margin-bottom:0.65rem;flex-wrap:wrap; }
.post-cat-tag { font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold); padding:2px 7px; border:1px solid rgba(232,160,32,0.3); border-radius:3px; }
.post-card-date { font-size:0.66rem;font-weight:500;color:var(--cream-3); }
.post-card-title { font-size:1.02rem;font-weight:700;color:var(--cream);line-height:1.35;margin-bottom:0.55rem;transition:color var(--t); }
.post-card:hover .post-card-title { color:var(--gold); }
.post-card-excerpt { font-size:0.84rem;color:var(--cream-2);line-height:1.65;margin-bottom:1.1rem;flex:1; }
.post-card-footer { display:flex;align-items:center;justify-content:space-between; padding-top:0.9rem;border-top:1px solid var(--border); }
.post-card-read { font-size:0.68rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:4px; }
.post-read-time { font-size:0.66rem;font-weight:500;color:var(--cream-3); }
.post-card-featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
.post-card-featured .post-card-thumb { aspect-ratio:unset;min-height:260px; }
@media(max-width:660px) { .post-card-featured{grid-template-columns:1fr;} .post-card-featured .post-card-thumb{min-height:210px;} }

/* ============================================================
   COURSE SECTION
   ============================================================ */
.course-preview { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; }
.course-preview-inner { display:grid;grid-template-columns:1fr 1fr;min-height:480px; }
.course-info { padding:clamp(1.75rem,4.5vw,3.5rem); display:flex;flex-direction:column;justify-content:center; border-right:1px solid var(--border); }
.course-badge { display:inline-flex;align-items:center;gap:6px; background:var(--gold-pale);border:1px solid rgba(232,160,32,0.18); border-radius:20px;padding:4px 12px; font-size:0.66rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold); width:fit-content;margin-bottom:1.1rem; }
.course-title { font-size:clamp(1.25rem,2.5vw,1.9rem); font-weight:700; line-height:1.25; color:var(--cream); margin-bottom:0.85rem; }
.course-desc { font-size:0.88rem;color:var(--cream-2);line-height:1.72;margin-bottom:1.4rem; }
.course-stats-row { display:flex;gap:1.4rem;margin-bottom:1.4rem;flex-wrap:wrap; }
.csi-val { font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1; }
.csi-lbl { font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--cream-3);margin-top:2px; }
.course-langs { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1.75rem; }
.lang-badge { font-size:0.68rem;font-weight:500;padding:3px 10px; background:var(--bg-3);border:1px solid var(--border-2); border-radius:var(--r);color:var(--cream-2); }
.course-toc { padding:1.5rem;overflow-y:auto;max-height:480px; }
.course-toc::-webkit-scrollbar { width:2px; } .course-toc::-webkit-scrollbar-thumb { background:var(--gold); }
.course-toc-phase { margin-bottom:4px; }
.ctp-header { display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer; background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);transition:border-color var(--t);user-select:none; }
.ctp-open .ctp-header { border-color:rgba(232,160,32,0.3); }
.ctp-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.ctp-name { font-size:0.78rem;font-weight:600;flex:1;color:var(--cream); }
.ctp-count { font-size:0.65rem;font-weight:500;color:var(--cream-3); }
.ctp-chev { font-size:0.6rem;color:var(--cream-3);transition:transform var(--t);flex-shrink:0; }
.ctp-open .ctp-chev { transform:rotate(180deg); }
.ctp-body { display:none;padding-left:3px;margin-top:2px; }
.ctp-open .ctp-body { display:block; }
.ctp-ep { display:flex;align-items:flex-start;gap:9px;padding:7px 10px;border-radius:var(--r);cursor:pointer;transition:background var(--t); }
.ctp-ep:hover { background:var(--bg-3); }
.ep-num { font-size:0.62rem;font-weight:600;color:var(--cream-3);min-width:32px;padding-top:2px; }
.ep-title { font-size:0.77rem;font-weight:600;color:var(--cream);line-height:1.3; }
.ep-sub { font-size:0.7rem;color:var(--cream-3);margin-top:1px;line-height:1.3; }
.ep-dur { font-size:0.62rem;font-weight:500;color:var(--cream-3);padding-top:2px;white-space:nowrap; }
@media(max-width:768px) { .course-preview-inner{grid-template-columns:1fr;} .course-info{border-right:none;border-bottom:1px solid var(--border);} .course-toc{max-height:360px;} }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
}
@media(max-width:1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:540px) {
    .features-grid { grid-template-columns: 1fr; }
}
.feature-card { background:var(--bg-3);padding:1.75rem;transition:background var(--t); }
.feature-card:hover { background:var(--bg-4); }
.feature-icon { width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.1rem;border:1px solid var(--border-2); }
.feature-title { font-size:0.95rem;font-weight:700;color:var(--cream);margin-bottom:0.45rem; }
.feature-desc { font-size:0.82rem;color:var(--cream-2);line-height:1.7; }

/* ============================================================
   TOOLS STRIP
   ============================================================ */
.tools-strip { display:flex;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin:1.5rem 0; }
.tool-item { flex:1;background:var(--bg-3);padding:1.25rem 1rem;text-align:center;transition:background var(--t);cursor:pointer;min-width:0; }
.tool-item:hover { background:var(--bg-4); }
.tool-icon { font-size:1.5rem;margin-bottom:0.4rem; }
.tool-name { font-size:0.74rem;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tool-desc { font-size:0.65rem;color:var(--cream-3);margin-top:2px;line-height:1.3; }
@media(max-width:600px) { .tools-strip{flex-wrap:wrap;} .tool-item{flex:1 1 calc(50% - 1px);} }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.newsletter-strip { background:linear-gradient(135deg,var(--bg-3),rgba(232,160,32,0.055)); border:1px solid rgba(232,160,32,0.14); border-radius:var(--r-xl); padding:clamp(1.75rem,4.5vw,3rem); display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap; }
.nl-form { display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;width:100%; }
.nl-input { background:var(--bg);border:1px solid var(--border-2);border-radius:var(--r);padding:11px 16px;color:var(--cream);font-size:0.86rem;min-width:230px;flex:1;outline:none;transition:border-color var(--t); }
.nl-input:focus { border-color:var(--gold); }
.nl-input::placeholder { color:var(--cream-3); }

/* ── HOME PAGE: MOBILE OVERRIDES ───────────────────────── */
@media(max-width:640px) {
    /* Hero */
    .hero-content { padding: 2rem 0 2.5rem; }
    .hero-heading { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
    .hero-sub { font-size: 0.9rem; }
    .hero-actions { flex-direction: column; gap: 0.75rem; }
    .hero-actions a, .hero-actions button {
        width: 100%; justify-content: center; text-align: center;
    }
    /* Cards grid: 1 column on mobile */
    .posts-grid { grid-template-columns: 1fr; }
    .cats-grid { grid-template-columns: repeat(2, 1fr); }
    /* Featured post: single column */
    .post-card-featured { grid-template-columns: 1fr; }
}

@media(max-width:420px) {
    .cats-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
    .cat-card { padding: 1.2rem 1rem; }
    .cat-icon { width: 32px; height: 32px; font-size: 1rem; }
    .cat-name { font-size: 0.82rem; }
    .section { padding: 2rem 0; }
    .section-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
}


/* ── 5. SINGLE POST / ARCHIVE ────────────────────────────── */
/* ============================================================
   SINGLE POST
   ============================================================ */
.single-hero {
    padding-top: clamp(1.75rem,4vw,3.5rem);
    padding-bottom: 0;
    /* Alignment guarantee: hero content sits at exactly the same
       horizontal edge as the grid below it.
       How: negative margin pulls hero to container border-box edge;
       matching padding-left brings content back to container CONTENT edge.
       Both cancel precisely — no vw units, no scrollbar-width risk. */
    padding-left:  clamp(1rem,5vw,2.5rem);
    padding-right: clamp(1rem,5vw,2.5rem);
    margin-left:   calc(-1 * clamp(1rem,5vw,2.5rem));
    margin-right:  calc(-1 * clamp(1rem,5vw,2.5rem));
    border-bottom: 1px solid var(--border);
}
.single-hero-meta { display:flex;align-items:center;gap:9px;margin-bottom:1.1rem;flex-wrap:wrap; }
.single-hero-title { font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:700;line-height:1.18;color:var(--cream);letter-spacing:-0.02em;margin-bottom:1rem; }
.single-hero-excerpt { font-size:1rem;color:var(--cream-2);line-height:1.75;max-width:680px;margin-bottom:1.75rem; }
.single-post-meta-bar { display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0.9rem 0;border-top:1px solid var(--border); }
.spm-item { display:flex;align-items:center;gap:5px;font-size:0.75rem;color:var(--cream-3); }
.spm-item strong { color:var(--cream-2);font-weight:600; }
.single-post-wrap { display:grid;grid-template-columns:1fr 272px;gap:2.5rem;padding:2.5rem 0; }
@media(max-width:960px) { .single-post-wrap{grid-template-columns:1fr;} }

/* Iframe post */
.post-iframe-container { background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.5rem; }
.post-iframe-container iframe { width:100%;border:none;display:block;min-height:400px; }

/* Regular post content */
.post-content { font-size:0.97rem;color:var(--cream-2);line-height:1.82; }
.post-content h2 { font-size:1.5rem;font-weight:700;color:var(--cream);margin:1.9rem 0 0.65rem;letter-spacing:-0.01em; }
.post-content h3 { font-size:1.18rem;font-weight:700;color:var(--cream);margin:1.5rem 0 0.5rem; }
.post-content p { margin-bottom:1.2rem; }
.post-content a { color:var(--gold);border-bottom:1px solid rgba(232,160,32,0.28);transition:border-color var(--t); }
.post-content a:hover { border-color:var(--gold); }
.post-content ul,.post-content ol { padding-left:1.4rem;margin-bottom:1.2rem; }
.post-content li { margin-bottom:0.35rem; }
.post-content blockquote { border-left:3px solid var(--gold);padding:0.9rem 1.25rem;background:var(--bg-3);margin:1.4rem 0;color:var(--cream);font-style:italic; }
.post-content code { font-size:0.85em;background:var(--bg-3);padding:1px 5px;border-radius:3px;color:var(--gold); }
.post-content pre { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;overflow-x:auto;margin:1.4rem 0; }
.post-content pre code { background:none;padding:0;color:var(--cream-2); }
.post-content strong { color:var(--cream);font-weight:700; }
.post-content img { border-radius:var(--r);margin:1.4rem 0; }
.post-content table { width:100%;border-collapse:collapse;margin:1.4rem 0; }
.post-content th { background:var(--bg-3);padding:9px 13px;text-align:left;font-size:0.74rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cream-2);border-bottom:2px solid var(--border-2); }
.post-content td { padding:9px 13px;border-bottom:1px solid var(--border);font-size:0.86rem;color:var(--cream-2); }
.post-content tr:last-child td { border-bottom:none; }

/* Sidebar */
.post-sidebar { display:flex;flex-direction:column;gap:1.25rem; }
.sidebar-widget { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden; }
.sw-header { padding:0.8rem 1.1rem;border-bottom:1px solid var(--border);font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cream-3); }
.sw-body { padding:1.1rem; }
.toc-item a { display:block;padding:5px 0;font-size:0.79rem;color:var(--cream-2);border-bottom:1px solid var(--border);transition:color var(--t); }
.toc-item:last-child a { border-bottom:none; }
.toc-item a:hover { color:var(--gold); }
.toc-item a.active { color:var(--gold); }
.related-post-link { display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);align-items:flex-start; }
.related-post-link:last-child { border-bottom:none; }
.rpl-thumb { width:50px;height:34px;border-radius:3px;overflow:hidden;background:var(--bg-4);flex-shrink:0; }
.rpl-thumb img { width:100%;height:100%;object-fit:cover; }
.rpl-title { font-size:0.76rem;color:var(--cream-2);line-height:1.3;transition:color var(--t); }
.related-post-link:hover .rpl-title { color:var(--gold); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-header { padding:clamp(2rem,5vw,4.5rem) 0 1.75rem;border-bottom:1px solid var(--border); }
.archive-filter-btn { padding:6px 13px;background:var(--bg-3);border:1px solid var(--border);color:var(--cream-2);font-size:0.72rem;font-weight:600;border-radius:var(--r);cursor:pointer;transition:all var(--t); }
.archive-filter-btn:hover,.archive-filter-btn.active { border-color:var(--gold);color:var(--gold); }

/* ============================================================
   PAGINATION
   ============================================================ */
.whx-pagination { display:flex;justify-content:center;align-items:center;gap:4px;padding:2rem 0; }
.whx-pagination a,.whx-pagination span { display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);font-size:0.8rem;color:var(--cream-2);transition:all var(--t); }
.whx-pagination a:hover { border-color:var(--gold);color:var(--gold); }
.whx-pagination .current { background:var(--gold);border-color:var(--gold);color:#000;font-weight:700; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.whx-breadcrumbs ol { display:flex;align-items:center;gap:6px;list-style:none;flex-wrap:wrap; }
.whx-breadcrumbs li,.whx-breadcrumbs a { font-size:0.72rem;font-weight:500;color:var(--cream-3); }
.whx-breadcrumbs a:hover { color:var(--gold); }
.bc-sep { color:var(--cream-3);font-size:0.65rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--bg-2);border-top:1px solid var(--border);padding:clamp(2.25rem,5.5vw,4rem) 0 0; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem; }
.footer-brand img { height:26px;margin-bottom:0.9rem; }
.footer-tagline { font-size:0.84rem;color:var(--cream-3);line-height:1.7;max-width:270px;margin-bottom:1.1rem; }
.footer-socials { display:flex;gap:8px; }
.footer-social-link { width:32px;height:32px;border-radius:var(--r);background:var(--bg-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--cream-2);font-size:0.76rem;transition:all var(--t); }
.footer-social-link:hover { border-color:var(--gold);color:var(--gold); }
.footer-col-title { font-size:0.64rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream-3);margin-bottom:0.9rem; }
.footer-links { list-style:none;display:flex;flex-direction:column;gap:7px; }
.footer-links a { font-size:0.82rem;font-weight:500;color:var(--cream-3);transition:color var(--t); }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid var(--border);padding:1.1rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem; }
.footer-copy { font-size:0.75rem;color:var(--cream-3); }
.footer-legal { display:flex;gap:14px; }
.footer-legal a { font-size:0.72rem;color:var(--cream-3);transition:color var(--t); }
.footer-legal a:hover { color:var(--gold); }
@media(max-width:860px) { .footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem;} }
@media(max-width:540px) { .footer-grid{grid-template-columns:1fr;gap:1.5rem;} .footer-bottom{flex-direction:column;text-align:center;} }

/* ============================================================
   404
   ============================================================ */
.page-404 { min-height:80vh;display:flex;align-items:center;text-align:center;padding:4rem 0; }
.p404-code { font-size:clamp(5rem,14vw,9rem);font-weight:800;color:var(--gold);opacity:0.12;line-height:1;margin-bottom:-0.8rem; }
.p404-title { font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;color:var(--cream);margin-bottom:0.65rem; }

/* ============================================================
   DIVIDERS & HELPERS
   ============================================================ */
.whx-divider { height:1px;background:var(--border);margin:clamp(1.25rem,3.5vw,2.5rem) 0; }
@media(max-width:640px) { .hide-mobile { display:none !important; } }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.anim-fade-up { animation:fadeUp 0.5s ease both; }
.anim-delay-1 { animation-delay:.08s; }
.anim-delay-2 { animation-delay:.16s; }
.anim-delay-3 { animation-delay:.24s; }
.anim-delay-4 { animation-delay:.32s; }

/* ============================================================
   DARK / LIGHT MODE SYSTEM
   Default: dark. Toggle adds data-theme="light" to <html>
   ============================================================ */

/* ── LIGHT MODE OVERRIDES ───────────────────────────────── */
/* ── SINGLE POST: MOBILE OVERRIDES ─────────────────────── */

/* Iframe container — always full width, never clips */
.post-iframe-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.post-iframe-container iframe {
    min-width: 0;
    width: 100% !important;
}

/* SVG inside iframes — scrollable wrapper */
/* Note: SVGs in generated posts use overflow-x:auto on their wrapper */
/* This affects the WordPress theme shell around the iframe */

/* Sidebar: stacks BELOW content on mobile at 960px */
@media(max-width:960px) {
    .single-post-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
    .post-sidebar {
        /* On mobile: show after content, only essentials visible */
        order: 2;
    }
    /* Hide TOC on mobile (screen too small, content scrolls past anyway) */
    #whx-toc-widget { display: none; }
}

/* Single hero: tighter padding on small screens */
@media(max-width:640px) {
    .single-hero { padding-top: 1.25rem; }
    .single-hero-title { font-size: clamp(1.35rem, 5.5vw, 2rem); }
    .single-post-meta-bar { gap: 10px; flex-wrap: wrap; }
    .post-content h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
    .post-content h3 { font-size: 1.05rem; }
    .post-content p { font-size: 0.92rem; }
    /* Tables: horizontal scroll on mobile */
    .post-content table, .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media(max-width:480px) {
    .single-hero-title { font-size: 1.35rem; }
    .single-hero-excerpt { font-size: 0.9rem; }
    .sw-header { font-size: 0.62rem; }
    .sw-body { padding: 0.9rem; }
    /* Post nav prev/next: stack vertically */
    .post-nav-prev-next { flex-direction: column; gap: 0.5rem; }
}

@media(max-width:360px) {
    .single-hero { padding-top: 0.75rem; }
    .single-hero-title { font-size: 1.25rem; letter-spacing: -0.01em; }
    .post-content { font-size: 0.88rem; }
    .post-content h2 { font-size: 1.1rem; }
}

/* Touch target minimum for all interactive elements */
.sidebar-widget a, .toc-item a, .related-post-link,
.btn, button, input[type=submit], .q-opt {
    min-height: 44px;
}
.toc-item a {
    display: flex;
    align-items: center;
    min-height: 36px;  /* TOC items can be slightly smaller */
}


/* ============================================================
   LOVE / REACT BUTTON
   ============================================================ */
.whx-love-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-4);
    border: 1.5px solid var(--border-2);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
    color: var(--cream-3);
    font-family: var(--ff);
    margin: 0 auto;
    min-height: unset; /* override the global 44px min-height — circle needs fixed size */
}
.whx-love-btn:hover:not(:disabled) {
    border-color: rgba(239,68,68,0.45);
    background: rgba(239,68,68,0.07);
    color: #EF4444;
    transform: scale(1.06);
}
.whx-love-btn.loved {
    border-color: #EF4444;
    background: rgba(239,68,68,0.12);
    color: #EF4444;
}
.whx-love-btn.loved .love-icon path {
    fill: #EF4444;
    stroke: #EF4444;
}
.whx-love-btn:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
}
.love-icon {
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.whx-love-btn.loved .love-icon {
    transform: scale(1.14);
}
.love-count {
    display: none; /* count display removed per user request */
    color: inherit;
    transition: color 0.22s ease;
}

/* ============================================================
   LIVE SEARCH RESULTS
   (#whx-live-results inside the search overlay)
   ============================================================ */
#whx-live-results {
    margin-top: 8px;
    border-radius: 10px;
    overflow: hidden;
    background: #1c1c28;
    border: 1px solid rgba(232,160,32,0.2);
}
#whx-live-results:empty { display: none; }

.slr-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    color: var(--cream);
    transition: background 0.15s;
}
.slr-item:last-of-type { border-bottom: none; }
.slr-item:hover,
.slr-item:focus { background: rgba(232,160,32,0.08); outline: none; }

.slr-cat {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1px;
}
.slr-title {
    font-size: 0.855rem;
    font-weight: 500;
    color: #F0EDE4;
    line-height: 1.35;
}

.slr-loading,
.slr-empty {
    padding: 14px 16px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.32);
    text-align: center;
}

.slr-viewall {
    display: block;
    padding: 10px 16px;
    background: rgba(232,160,32,0.07);
    border-top: 1px solid rgba(232,160,32,0.15);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
}
.slr-viewall:hover,
.slr-viewall:focus { background: rgba(232,160,32,0.14); outline: none; }

/* ============================================================
   TUTOR LMS — COMPREHENSIVE DARK MODE + SPACING FIX
   
   Why nuclear approach: Tutor LMS 3.x uses dozens of class
   names and inline styles with hardcoded light-theme colours
   (#1D2026, #fff, etc.). Targeting specific class names misses
   too many elements. Instead we target ALL descendants of the
   Tutor page wrapper when dark mode is active, then carve out
   exceptions for buttons and images.
   ============================================================ */

/* ── 1. GLOBAL: force all text light in dark mode ─────────── */
html[data-theme="dark"] .tutor-page-wrap,
html[data-theme="dark"] .tutor-single-course-wrapper,
html[data-theme="dark"] .tutor-course-archive,
html[data-theme="dark"] #tutor-course-details-page {
    background: var(--bg) !important;
    color: var(--cream)   !important;
}

/* Every text node inside Tutor pages */
html[data-theme="dark"] .tutor-page-wrap *,
html[data-theme="dark"] .tutor-single-course-wrapper *,
html[data-theme="dark"] .tutor-course-archive *,
html[data-theme="dark"] #tutor-course-details-page * {
    color: var(--cream) !important;
    border-color: var(--border) !important;
}

/* ── 2. EXCEPTIONS: buttons keep dark text on gold bg ──────── */
html[data-theme="dark"] .tutor-page-wrap .tutor-btn-primary,
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-btn"].is-primary,
html[data-theme="dark"] .tutor-page-wrap .tutor-course-enroll-wrap a,
html[data-theme="dark"] #tutor-course-details-page .tutor-btn-primary {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        #000        !important;
}

/* ── 3. CARD / BOX BACKGROUNDS ─────────────────────────────── */
/* Any element Tutor gives a white or light background */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-bg-white"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-white"],
html[data-theme="dark"] .tutor-page-wrap .tutor-card,
html[data-theme="dark"] .tutor-page-wrap .tutor-course-card,
html[data-theme="dark"] .tutor-page-wrap .tutor-loop-course__card,
html[data-theme="dark"] .tutor-page-wrap .tutor-sidebar-card,
html[data-theme="dark"] .tutor-page-wrap .tutor-single-course-sidebar,
html[data-theme="dark"] .tutor-page-wrap .tutor-course-details-widget,
html[data-theme="dark"] #tutor-course-details-page .tutor-card,
html[data-theme="dark"] #tutor-course-details-page .tutor-sidebar-card {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

/* ── 4. TAB BAR (Course Info / Reviews) ─────────────────────── */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-tab"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-nav"] {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

/* Active tab gets gold underline */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-tab"][class*="active"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-tab"][aria-selected="true"] {
    color:             var(--gold)   !important;
    border-bottom-color: var(--gold) !important;
    background:        transparent   !important;
}

/* ── 5. ACCORDION / COURSE CONTENT LIST ─────────────────────── */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-accordion"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-course-content"] {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

/* ── 6. GRADIENT OVERLAY (blocks About Course text) ─────────── */
/* Tutor fades long descriptions with a ::after pseudo overlay.
   In dark mode we must fade to --bg instead of white/light.   */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-course-about"]::after,
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-content-collapse"]::after,
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-description"]::after,
html[data-theme="dark"] #tutor-course-details-page [class*="about"]::after {
    background: linear-gradient(
        to bottom,
        transparent    0%,
        var(--bg) 100%
    ) !important;
}

/* Show More button */
html[data-theme="dark"] .tutor-page-wrap [class*="show-more"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-more-btn"],
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-course-about-btn"] {
    background:   var(--bg)   !important;
    color:        var(--gold) !important;
    border-color: var(--gold) !important;
}

/* ── 7. COURSE LISTING PAGE (/courses) ─────────────────────── */
/* Backgrounds for cards on listing page */
html[data-theme="dark"] .tutor-loop-course__card,
html[data-theme="dark"] .tutor-course-card,
html[data-theme="dark"] .tutor-card {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

/* TEXT inside every Tutor card — regardless of which page or wrapper */
html[data-theme="dark"] .tutor-card *,
html[data-theme="dark"] .tutor-course-card *,
html[data-theme="dark"] .tutor-loop-course__card * {
    color: var(--cream) !important;
}

/* Exception: button text inside cards stays dark */
html[data-theme="dark"] .tutor-card [class*="tutor-btn"],
html[data-theme="dark"] .tutor-course-card [class*="tutor-btn"],
html[data-theme="dark"] .tutor-loop-course__card [class*="tutor-btn"] {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        #000        !important;
}

/* ── 7b. SIDEBAR — ALL CHILD CARDS (including "A course by") ── */
/*  Previous class-name selectors missed the author card because
    Tutor renders it as a plain <div> with no instructor/author class.
    The `> *` child combinator catches EVERY direct child regardless
    of what class name Tutor happens to use.                        */
html[data-theme="dark"] .tutor-single-course-sidebar,
html[data-theme="dark"] .tutor-single-course-sidebar > *,
html[data-theme="dark"] .tutor-single-course-sidebar > div {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

/* All text inside sidebar — cream */
html[data-theme="dark"] .tutor-single-course-sidebar *:not(img):not(svg):not(iframe) {
    color: var(--cream) !important;
}

/* Re-apply gold button inside sidebar */
html[data-theme="dark"] .tutor-single-course-sidebar [class*="tutor-btn"],
html[data-theme="dark"] .tutor-single-course-sidebar a[class*="btn"],
html[data-theme="dark"] .tutor-single-course-sidebar button[class*="btn"] {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        #000        !important;
}

/* Keep nested backgrounds transparent so child cards don't stack bg-2 on bg-2 */
html[data-theme="dark"] .tutor-single-course-sidebar > div > div,
html[data-theme="dark"] .tutor-single-course-sidebar > div > section,
html[data-theme="dark"] .tutor-single-course-sidebar > div > aside {
    background: transparent !important;
}

/* ── 7c. SORT / FILTER DROPDOWN PANEL ─────────────────────── */
/*  Tutor LMS renders the course sort as a custom JS dropdown,
    NOT a native <select>. Structure:
      .tutor-dropdown              wrapper
        button.tutor-dropdown-toggle  (the visible button)
        .tutor-dropdown-list         the PANEL that opens
          ul.tutor-dropdown-items
            li.tutor-dropdown-item > a

    Previous fix had: [class*="tutor-dropdown"] * { background-color:transparent }
    — that rule also matched .tutor-dropdown-list (child containing "tutor-dropdown"),
    making the panel transparent and showing white page behind it.
    Fixed below: button only gets transparent bg; list/panel gets solid dark bg.  */

/* Dropdown wrapper */
html[data-theme="dark"] [class*="tutor-dropdown"] {
    background:   transparent !important;
    border-color: var(--border) !important;
    color:        var(--cream) !important;
}

/* The trigger button inside the dropdown */
html[data-theme="dark"] [class*="tutor-dropdown"] > button,
html[data-theme="dark"] [class*="tutor-dropdown-toggle"] {
    background:   var(--bg-2)  !important;
    border:       1px solid var(--border) !important;
    border-radius: var(--r);
    color:        var(--cream) !important;
}
html[data-theme="dark"] [class*="tutor-dropdown-toggle"] svg,
html[data-theme="dark"] [class*="tutor-dropdown"] > button svg {
    color: var(--cream-2) !important;
    fill:  var(--cream-2) !important;
}

/* THE OPEN PANEL — must have solid dark bg, not transparent */
html[data-theme="dark"] [class*="tutor-dropdown-list"],
html[data-theme="dark"] [class*="tutor-dropdown-menu"],
html[data-theme="dark"] [class*="tutor-dropdown-content"],
html[data-theme="dark"] [class*="tutor-popover"],
html[data-theme="dark"] [class*="tutor-popover-content"] {
    background:   var(--bg-2)   !important;
    border:       1px solid var(--border) !important;
    border-radius: var(--r-lg)  !important;
    box-shadow:   0 8px 32px rgba(0,0,0,0.7) !important;
}

/* Items inside the panel */
html[data-theme="dark"] [class*="tutor-dropdown-list"] li,
html[data-theme="dark"] [class*="tutor-dropdown-list"] a,
html[data-theme="dark"] [class*="tutor-dropdown-item"],
html[data-theme="dark"] [class*="tutor-dropdown-items"] *,
html[data-theme="dark"] [class*="tutor-popover"] li,
html[data-theme="dark"] [class*="tutor-popover"] a {
    background:   transparent !important;
    color:        var(--cream-2) !important;
}

/* Hover state for panel items */
html[data-theme="dark"] [class*="tutor-dropdown-list"] li:hover,
html[data-theme="dark"] [class*="tutor-dropdown-list"] a:hover,
html[data-theme="dark"] [class*="tutor-dropdown-item"]:hover,
html[data-theme="dark"] [class*="tutor-popover"] li:hover,
html[data-theme="dark"] [class*="tutor-popover"] a:hover {
    background:   rgba(232,160,32,0.1) !important;
    color:        var(--gold)          !important;
}

/* Active/selected item gets gold */
html[data-theme="dark"] [class*="tutor-dropdown-item"][class*="active"],
html[data-theme="dark"] [class*="tutor-dropdown-item"][class*="selected"],
html[data-theme="dark"] [class*="tutor-dropdown-item"][aria-selected="true"] {
    background:   rgba(232,160,32,0.08) !important;
    color:        var(--gold)           !important;
}

/* Native <select> fallback in case Tutor uses it */
html[data-theme="dark"] .tutor-page-wrap select,
html[data-theme="dark"] #whx-courses-grid select,
html[data-theme="dark"] [class*="tutor-filter"] select {
    background:   var(--bg-2)  !important;
    color:        var(--cream) !important;
    border:       1px solid var(--border) !important;
    border-radius: var(--r);
}
html[data-theme="dark"] .tutor-page-wrap option,
html[data-theme="dark"] #whx-courses-grid option {
    background: var(--bg-2);
    color:      var(--cream);
}

/* ── 8. GOLD ACCENTS ACROSS ALL MODES ─────────────────────── */
/* Buttons always gold regardless of light/dark */
.tutor-btn-primary,
.tutor-course-enroll-wrap .tutor-btn,
.tutor-single-course-btn-wrap .tutor-btn,
.tutor-course-loop-btn,
.tutor-loop-course__body .tutor-btn {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        #000        !important;
    font-weight:  700         !important;
    width:        100%        !important;
}
.tutor-btn-primary:hover { background: #C4860F !important; border-color: #C4860F !important; }

/* Star ratings */
.tutor-ratings-stars svg,
.tutor-star-rating svg { color: var(--gold) !important; fill: var(--gold) !important; }

/* Tags */
html[data-theme="dark"] .tutor-page-wrap [class*="tutor-tag"] {
    background:   rgba(232,160,32,0.1)  !important;
    border-color: rgba(232,160,32,0.25) !important;
}

/* ── 9. SPACING: push content away from footer ─────────────── */
/* Individual course page */
body.single-courses .tutor-page-wrap,
body.single-courses #tutor-course-details-page,
body.single-courses .tutor-single-course-wrapper {
    padding-bottom: 6rem !important;
}

/* Courses archive / listing page */
body.post-type-archive-courses .tutor-page-wrap,
body.post-type-archive-courses .tutor-course-archive,
body.page-template-page-templates-page-courses-lms .tutor-page-wrap {
    padding-bottom: 6rem !important;
}

/* Direct container used by page-courses-lms.php template */
#whx-courses-grid {
    padding-bottom: 5rem !important;
}

/* Tutor loop shortcode output gets bottom margin */
.tutor-course-filter-and-loop,
.tutor-loop-course-list,
ul.tutor-loop-course-list {
    margin-bottom: 3rem !important;
}

/* Catch-all for any Tutor page not matched above */
body[class*="tutor"] .tutor-page-wrap:last-of-type {
    margin-bottom: 4rem !important;
}

/* ── 10. COURSE CARDS — DARK MODE (archive/loop context) ───── */
/*  Cards rendered by the shortcode inside #whx-courses-grid are
    outside .tutor-page-wrap. Target both the loop wrapper class
    AND the actual card element class (.tutor-card) directly.    */

html[data-theme="dark"] [class*="tutor-loop-course"],
html[data-theme="dark"] .tutor-card,
html[data-theme="dark"] .tutor-course-card {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] [class*="tutor-loop-course"] *:not(img):not(svg):not(iframe),
html[data-theme="dark"] .tutor-card *:not(img):not(svg):not(iframe),
html[data-theme="dark"] .tutor-course-card *:not(img):not(svg):not(iframe) {
    color:        var(--cream) !important;
    border-color: var(--border) !important;
}

/* Re-apply gold to buttons inside all card types */
html[data-theme="dark"] [class*="tutor-loop-course"] [class*="tutor-btn"],
html[data-theme="dark"] [class*="tutor-loop-course"] a[class*="btn"],
html[data-theme="dark"] [class*="tutor-loop-course"] .tutor-course-loop-btn,
html[data-theme="dark"] .tutor-card [class*="tutor-btn"],
html[data-theme="dark"] .tutor-course-card [class*="tutor-btn"] {
    background:   var(--gold) !important;
    border-color: var(--gold) !important;
    color:        #000        !important;
}

/* Star ratings inside all card types */
html[data-theme="dark"] [class*="tutor-loop-course"] svg,
html[data-theme="dark"] .tutor-card svg,
html[data-theme="dark"] .tutor-course-card svg {
    color: var(--gold) !important;
    fill:  var(--gold) !important;
}

/* Filter/sort bar above course grid + open dropdown panel */
html[data-theme="dark"] [class*="tutor-course-archive-filter"],
html[data-theme="dark"] [class*="tutor-course-filter"] {
    background:   var(--bg-2)  !important;
    border-color: var(--border) !important;
    color:        var(--cream) !important;
}

/* Nuclear: every descendant of the filter container gets dark bg.
   The dropdown panel — whatever class Tutor uses — is inside this
   container, so it will be covered regardless of class name.      */
html[data-theme="dark"] [class*="tutor-course-archive-filter"] *,
html[data-theme="dark"] [class*="tutor-course-filter"] * {
    background-color: var(--bg-2)  !important;
    color:            var(--cream) !important;
    border-color:     var(--border) !important;
}

/* List items/links get transparent bg so panel colour shows through */
html[data-theme="dark"] [class*="tutor-course-archive-filter"] li,
html[data-theme="dark"] [class*="tutor-course-archive-filter"] a,
html[data-theme="dark"] [class*="tutor-course-filter"] li,
html[data-theme="dark"] [class*="tutor-course-filter"] a {
    background-color: transparent !important;
    color:            var(--cream-2) !important;
}

/* Hover: gold tint on options */
html[data-theme="dark"] [class*="tutor-course-archive-filter"] li:hover,
html[data-theme="dark"] [class*="tutor-course-archive-filter"] a:hover,
html[data-theme="dark"] [class*="tutor-course-filter"] li:hover,
html[data-theme="dark"] [class*="tutor-course-filter"] a:hover {
    background-color: rgba(232,160,32,0.1) !important;
    color:            var(--gold)          !important;
}

/* SVG icons inside filter (chevron arrow etc) */
html[data-theme="dark"] [class*="tutor-course-archive-filter"] svg,
html[data-theme="dark"] [class*="tutor-course-filter"] svg {
    color:            var(--cream-2) !important;
    fill:             var(--cream-2) !important;
    background-color: transparent   !important;
}