/* ═══════════════════════════════════════════════════════════
   Mystical Dark Template  -  NumroQ White-Label
   Loaded from public/uploads/template.css after site.css.
   Uses CSS custom properties already set by the admin theme
   (--color-primary, --color-secondary, --font-heading, etc.)
   and adds its own dark-cosmos design tokens on top.
═══════════════════════════════════════════════════════════ */

/* ── Imports ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────── */
:root {
    --navy:        #080C18;
    --navy2:       #0D1222;
    --navy3:       #121830;
    --navy4:       #1A2245;
    --navy5:       #1F2B55;
    --gold:        var(--color-primary, #C9A84C);
    --gold2:       #E5C46A;
    --gold3:       #F0D080;
    --gold-dim:    rgba(201,168,76,0.12);
    --gold-glow:   rgba(201,168,76,0.06);
    --cream:       #F2EBD9;
    --cream2:      #D4C9A8;
    --border-gold: rgba(201,168,76,0.20);
    --border-dim:  rgba(201,168,76,0.08);
    --muted-dark:  #7A7468;
    --shadow-gold: 0 4px 32px rgba(201,168,76,0.08);

    /* Re-map the base theme variables (declared LIGHT in site.css :root) to
       dark-cosmos values. Every component that uses var(--bg / --bg-alt /
       --text / --muted / --border) - all 130 calculator outputs, result
       tables, summary cards, the .numroq-calc container, dropdowns, etc. -
       now turns dark automatically instead of needing a per-element override.
       The inline <style> after this only sets --color-* / fonts, so these
       survive. */
    --bg:      #0D1222;
    --bg-alt:  #121830;
    --text:    #F2EBD9;
    --muted:   #7A7468;
    --border:  rgba(201,168,76,0.20);
}

/* ── Base ───────────────────────────────────────────────── */
body {
    background:  var(--navy) !important;
    color:       var(--cream) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size:   17px !important;
    line-height: 1.7 !important;
    overflow-x:  hidden;
}

/* Grid background */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* The cosmic background (.nmq-cosmos) and the cycling card accent are defined
   site-wide in public/assets/site.css so they work on every template. This
   template only sets the cosmos colour to its signature gold (below). */
.nmq-cosmos { --cosmos-color: #e5c46a; }

*, *::before, *::after { box-sizing: border-box; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .card-title {
    font-family: 'Cinzel', serif !important;
    color: var(--cream) !important;
    letter-spacing: 0.04em;
}

a {
    color: var(--gold) !important;
    text-decoration: none;
}
a:hover { color: var(--gold2) !important; }

p, li { color: var(--cream2); }

/* ── Navigation / Header ────────────────────────────────── */
header,
.site-header,
nav.main-nav {
    background: rgba(8,12,24,0.95) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
}

nav a,
.main-nav a,
header a {
    font-family: 'Cinzel', serif !important;
    font-size: 10.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--muted-dark) !important;
    transition: color 0.2s;
}
nav a:hover,
.main-nav a:hover,
header a:hover,
nav a.active,
.main-nav a.active {
    color: var(--gold) !important;
}
/* The My Account / Log In button has a gold background, so the generic gold
   hover above turned its label gold-on-gold (invisible). Keep it white on hover. */
header .nav-account:hover,
.nav-account:hover,
.nav-account:focus {
    color: #fff !important;
    text-decoration: none !important;
    filter: brightness(1.08);
}

.nav-logo,
.site-logo,
header .logo {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 20px !important;
    color: var(--gold) !important;
    letter-spacing: 0.06em !important;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary,
.nmq-btn-primary,
button[type="submit"],
input[type="submit"] {
    background:    transparent !important;
    border:        1px solid var(--gold) !important;
    border-radius: 999px !important;
    color:         var(--gold) !important;
    font-family:   'Cinzel', serif !important;
    font-size:     11px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding:       12px 32px !important;
    cursor:        pointer !important;
    transition:    background 0.2s, color 0.2s !important;
}
.btn-primary:hover,
.nmq-btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--gold) !important;
    color:      var(--navy) !important;
}

.btn-secondary {
    background:    transparent !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 999px !important;
    color:         var(--cream2) !important;
    font-family:   'Cinzel', serif !important;
    font-size:     11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding:       10px 24px !important;
    transition:    border-color 0.2s, color 0.2s !important;
}
.btn-secondary:hover {
    border-color: var(--gold) !important;
    color:        var(--gold) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.card,
.tool-card,
.blog-card,
.category-card,
.nmq-card {
    background:    var(--navy3) !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 8px !important;
    color:         var(--cream) !important;
    box-shadow:    var(--shadow-gold) !important;
    transition:    border-color 0.2s, box-shadow 0.2s !important;
    position:      relative;
    overflow:      hidden;
}
.card:hover,
.tool-card:hover,
.blog-card:hover,
.category-card:hover,
.nmq-card:hover {
    border-color: rgba(201,168,76,0.45) !important;
    box-shadow:   0 8px 40px rgba(201,168,76,0.12) !important;
}

/* The coloured cycling card accent (::before) is defined site-wide in site.css. */

.card h2, .card h3, .card h4,
.tool-card h2, .tool-card h3,
.category-card h2, .category-card h3 {
    color: var(--cream) !important;
}
.card p, .card .text-muted,
.tool-card p, .tool-card .description {
    color: var(--cream2) !important;
}

/* ── Hero Section ───────────────────────────────────────── */
.nmq-hero,
.hero-section,
section.hero {
    min-height:      80vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         100px 24px 80px;
    position:        relative;
    overflow:        hidden;
}

/* Animated rings */
.nmq-hero::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 600px; height: 600px;
    border: 1px solid rgba(201,168,76,0.08);
    border-radius: 50%;
    animation: nmq-spin 90s linear infinite;
    pointer-events: none;
}
.nmq-hero::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 420px; height: 420px;
    border: 1px solid rgba(201,168,76,0.13);
    border-radius: 50%;
    animation: nmq-spin 50s linear infinite reverse;
    pointer-events: none;
}

@keyframes nmq-spin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}

.nmq-hero-eyebrow {
    display:     inline-flex;
    align-items: center;
    gap:         14px;
    font-family: 'Cinzel', serif;
    font-size:   10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color:       var(--gold);
    margin-bottom: 24px;
    position:    relative; z-index: 2;
}
.nmq-hero-eyebrow::before,
.nmq-hero-eyebrow::after {
    content: ''; display: block;
    width: 40px; height: 1px;
    background: var(--gold); opacity: 0.5;
}

.nmq-hero-title {
    font-family: 'Cinzel Decorative', serif !important;
    font-size:   clamp(32px, 6vw, 76px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    color:       var(--cream) !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 80px rgba(201,168,76,0.15) !important;
    position: relative; z-index: 2;
}
.nmq-gold { color: var(--gold) !important; }

.nmq-hero-sub {
    font-size:   clamp(16px, 2vw, 20px) !important;
    color:       var(--cream2) !important;
    max-width:   640px !important;
    margin:      0 auto 36px !important;
    font-weight: 300 !important;
    position: relative; z-index: 2;
}

/* ── Section Eyebrows ───────────────────────────────────── */
.section-eyebrow,
.nmq-eyebrow {
    display:     inline-flex;
    align-items: center;
    gap:         12px;
    font-family: 'Cinzel', serif;
    font-size:   10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:       var(--gold);
    margin-bottom: 12px;
}
.section-eyebrow::before,
.section-eyebrow::after,
.nmq-eyebrow::before,
.nmq-eyebrow::after {
    content: ''; display: block;
    width: 28px; height: 1px;
    background: var(--gold); opacity: 0.55;
}

/* ── Tool Result Output ─────────────────────────────────── */
.nmq-result-box,
.result-panel,
.calculator-result {
    background:    var(--navy4) !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 8px !important;
    padding:       24px !important;
    margin-top:    20px !important;
    color:         var(--cream) !important;
}

.nmq-summary-item {
    background:    var(--navy3) !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 6px !important;
    padding:       16px 20px !important;
    text-align:    center !important;
    color:         var(--cream) !important;
}
.nmq-summary-item .value {
    font-family: 'Cinzel', serif !important;
    font-size:   26px !important;
    font-weight: 700 !important;
    color:       var(--gold) !important;
    display:     block !important;
}
.nmq-summary-item .label {
    font-size:   12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color:       var(--muted-dark) !important;
    margin-top:  4px !important;
    display:     block !important;
}

/* ── Forms & Inputs ─────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
    background:    var(--navy4) !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 6px !important;
    color:         var(--cream) !important;
    padding:       10px 14px !important;
    font-family:   'Cormorant Garamond', serif !important;
    font-size:     16px !important;
    outline:       none !important;
    width:         100%;
    transition:    border-color 0.2s;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--gold) !important;
    box-shadow:   0 0 0 3px rgba(201,168,76,0.1) !important;
}

input::placeholder,
textarea::placeholder { color: var(--muted-dark) !important; }

label {
    font-family: 'Cinzel', serif !important;
    font-size:   11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:       var(--cream2) !important;
    display:     block !important;
    margin-bottom: 6px !important;
}

/* ── Tool Calculator Card ───────────────────────────────── */
.calculator-wrap,
.nmq-calculator {
    background:    var(--navy3) !important;
    border:        1px solid var(--border-gold) !important;
    border-radius: 10px !important;
    padding:       32px !important;
}

/* ── Category Badges / Pills ────────────────────────────── */
.category-badge,
.tag,
.badge {
    background:    var(--gold-dim) !important;
    border:        1px solid var(--border-gold) !important;
    color:         var(--gold) !important;
    font-family:   'Cinzel', serif !important;
    font-size:     9px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding:       3px 10px !important;
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination a,
.page-link {
    background:    transparent !important;
    border:        1px solid var(--border-gold) !important;
    color:         var(--cream2) !important;
    border-radius: 4px !important;
    padding:       6px 14px !important;
    transition:    border-color 0.2s, color 0.2s !important;
}
.pagination a:hover,
.page-link:hover,
.pagination a.active,
.page-link.active {
    border-color: var(--gold) !important;
    color:        var(--gold) !important;
}

/* ── Tables ─────────────────────────────────────────────── */
table {
    border-collapse: collapse !important;
    width: 100% !important;
    color: var(--cream) !important;
}
th {
    background:    var(--navy4) !important;
    color:         var(--gold) !important;
    font-family:   'Cinzel', serif !important;
    font-size:     10px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding:       10px 14px !important;
    border-bottom: 1px solid var(--border-gold) !important;
}
td {
    padding:     10px 14px !important;
    border-bottom: 1px solid var(--border-dim) !important;
    color:       var(--cream2) !important;
}
tr:hover td { background: var(--gold-glow) !important; }

/* ── Alerts / Flash Messages ────────────────────────────── */
.alert {
    border-radius: 6px !important;
    padding:       14px 18px !important;
    font-family:   'Cinzel', serif !important;
    font-size:     12px !important;
    letter-spacing: 0.08em !important;
}
.alert-success {
    background: rgba(26,90,82,0.3) !important;
    border:     1px solid rgba(26,90,82,0.8) !important;
    color:      #5ecba1 !important;
}
.alert-error {
    background: rgba(139,42,42,0.3) !important;
    border:     1px solid rgba(139,42,42,0.8) !important;
    color:      #e88 !important;
}

/* ── Footer ─────────────────────────────────────────────── */
footer,
.site-footer {
    background:    var(--navy2) !important;
    border-top:    1px solid var(--border-gold) !important;
    color:         var(--muted-dark) !important;
    padding:       48px 0 24px !important;
}
footer a,
.site-footer a {
    color:   var(--muted-dark) !important;
    font-size: 13px !important;
}
footer a:hover,
.site-footer a:hover { color: var(--gold) !important; }

footer h4,
.site-footer h4 {
    font-family: 'Cinzel', serif !important;
    font-size:   11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color:       var(--gold) !important;
    margin-bottom: 14px !important;
}

/* ── Page Content ───────────────────────────────────────── */
.page-content,
.nmq-page-content,
article.content {
    max-width: 800px;
    margin:    0 auto;
}
.nmq-lead {
    font-size:   1.2em !important;
    font-weight: 300 !important;
    color:       var(--cream) !important;
    margin-bottom: 32px !important;
}

/* ── Dividers ───────────────────────────────────────────── */
hr,
.divider {
    border: none !important;
    border-top: 1px solid var(--border-gold) !important;
    margin: 40px 0 !important;
}

/* ── Container ──────────────────────────────────────────── */
.container { position: relative; z-index: 1; }

/* ── Search Input ───────────────────────────────────────── */
.search-box,
.search-input-wrap input {
    background:    var(--navy4) !important;
    border:        1px solid var(--border-gold) !important;
    color:         var(--cream) !important;
}

/* ── Breadcrumbs ────────────────────────────────────────── */
.breadcrumb,
.breadcrumbs {
    font-family: 'Cinzel', serif !important;
    font-size:   10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:       var(--muted-dark) !important;
}
.breadcrumb a { color: var(--muted-dark) !important; }
.breadcrumb a:hover { color: var(--gold) !important; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy2); }
::-webkit-scrollbar-thumb {
    background:    var(--navy5);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── New Sections: Ticker, Pillars, FAQ, About ──────────── */

/* Tradition ticker */
.nmq-ticker {
    background:    var(--navy2) !important;
    border-color:  var(--border-dim) !important;
}
.nmq-ticker-pill { color: var(--muted-dark) !important; border-color: var(--border-dim) !important; }
.nmq-ticker-dot  { background: var(--gold) !important; }

/* Section subtitle */
.nmq-section-sub { color: var(--muted-dark) !important; }

/* Category card enhancements */
.category-card-name { color: var(--cream) !important; font-family: 'Cinzel', serif !important; }
.category-card-desc { color: var(--muted-dark) !important; font-style: italic; }

/* Quality pillars */
.nmq-pillar {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.nmq-pillar h3 { color: var(--cream) !important; font-family: 'Cinzel', serif !important; }
.nmq-pillar p  { color: var(--cream2) !important; }

/* FAQ items */
.nmq-faq-item {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.nmq-faq-item h3 { color: var(--cream) !important; font-family: 'Cinzel', serif !important; }
.nmq-faq-item p  { color: var(--cream2) !important; }

/* About page */
.nmq-mission-card, .nmq-trust-item {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.nmq-mission-card h3, .nmq-trust-item h3 {
    color: var(--cream) !important; font-family: 'Cinzel', serif !important;
}
.nmq-mission-card p, .nmq-trust-item p { color: var(--cream2) !important; }

.nmq-about ul li, .nmq-traditions-list li, .nmq-standards li, .nmq-contact-options li {
    border-color: var(--border-dim) !important;
    color: var(--cream2) !important;
}

.nmq-cta-band {
    background: var(--navy3) !important;
    border:     1px solid var(--border-gold) !important;
}
.nmq-cta-band h2 { color: var(--cream) !important; }
.nmq-cta-band p  { color: var(--muted-dark) !important; }

/* Category page */
.nmq-trad-intro {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.nmq-trad-intro p { color: var(--cream2) !important; }

.nmq-trad-link {
    background:   var(--navy3) !important;
    border:       1px solid var(--border-dim) !important;
}
.nmq-trad-link:hover { border-color: var(--gold) !important; }
.nmq-trad-link-name  { color: var(--cream) !important; }
.nmq-trad-link-count { color: var(--muted-dark) !important; }

/* Page content (privacy, terms) */
.nmq-page-content a { color: var(--gold) !important; }

/* Stats band */
.stat-item {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.stat-number { color: var(--gold) !important; font-family: 'Cinzel Decorative', serif !important; }
.stat-label  { color: var(--muted-dark) !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* Step cards */
.step-card {
    background: var(--navy3) !important;
    border:     1px solid var(--border-dim) !important;
}
.step-card h3 { color: var(--cream) !important; font-family: 'Cinzel', serif !important; }
.step-card p  { color: var(--muted-dark) !important; }
.step-number  { background: var(--gold) !important; color: var(--navy) !important; font-family: 'Cinzel Decorative', serif !important; }

/* CTA band */
.cta-band {
    background: var(--navy3) !important;
    border:     1px solid var(--border-gold) !important;
}
.cta-band h2 { color: var(--cream) !important; }
.cta-band p  { color: var(--muted-dark) !important; }

/* ── Tier cards (dark overrides) ───────────────────────── */
.nmq-tier-card { background: var(--navy3); border-color: var(--border-dim); }
.nmq-tier-premium { border-color: var(--gold) !important; }
.nmq-tier-badge { background: var(--gold); color: var(--navy1); }
.nmq-tier-name { color: var(--cream); }
.nmq-tier-desc { color: var(--muted-dark); }
.nmq-tier-features li { color: var(--cream); }
.nmq-tier-features li::before { color: var(--gold); }

/* ── Pricing page (dark overrides) ─────────────────────── */
.nmq-plan-card {
    background: var(--navy3);
    border-color: var(--border-dim);
    color: var(--cream);
}
.nmq-plan-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.45); }
.nmq-plan-featured { border-color: var(--gold) !important; }
.nmq-plan-badge { background: var(--gold); color: var(--navy1); }
.nmq-plan-tier { color: var(--gold); }
.nmq-price-amount { color: var(--cream); }
.nmq-price-period,
.nmq-plan-tagline { color: var(--muted-dark); }
.nmq-plan-features li { color: var(--cream); }
.nmq-plan-features li::before { color: var(--gold); }
.nmq-plan-free .nmq-plan-features li::before { color: var(--muted-dark); }
.nmq-compare-table th { background: var(--navy2); color: var(--cream); }
.nmq-compare-table td { color: var(--muted-dark); border-color: var(--border-dim); }
.nmq-compare-table td:first-child { color: var(--cream); }
.nmq-chk { color: var(--gold) !important; }
.nmq-alert-success { background: rgba(110,231,183,.1); color: #6ee7b7; border-color: rgba(110,231,183,.3); }
.template-color-preview .tcp-title { color: var(--gold); }

/* ── Tools listing page ─────────────────────────────────── */
.nmq-tool-search {
    background: var(--navy3) !important;
    border-color: var(--border-gold) !important;
    color: var(--cream) !important;
}
.nmq-cat-btn {
    background: var(--navy3) !important;
    border-color: var(--border-gold) !important;
    color: var(--cream2) !important;
}
.nmq-cat-btn:hover,
.nmq-cat-btn.active {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--navy) !important;
}
.nmq-tools-cat-heading {
    color: var(--cream) !important;
    border-bottom-color: var(--border-gold) !important;
}
.nmq-tools-cat-badge {
    background: var(--navy4) !important;
    border-color: var(--border-gold) !important;
    color: var(--cream2) !important;
}

/* ── Auth / account pages (login, register, profile) ──── */
.auth-card,
.auth-container .card {
    background: var(--navy3) !important;
    border-color: var(--border-gold) !important;
    color: var(--cream) !important;
}
.auth-card h1, .auth-card h2,
.auth-container h1, .auth-container h2 { color: var(--cream) !important; }

/* ── Referrals / stats dashboard ────────────────────────── */
.stat-grid { gap: 16px; }
.stat-card {
    background: var(--navy3) !important;
    border: 1px solid var(--border-gold) !important;
    color: var(--cream) !important;
}
.stat-card .stat-value { color: var(--gold) !important; }
.stat-card .stat-label { color: var(--cream2) !important; }

.referral-link-row {
    background: var(--navy4) !important;
    border-color: var(--border-gold) !important;
    color: var(--cream) !important;
}
.referral-link-row input,
.referral-link-row code {
    background: var(--navy2) !important;
    border-color: var(--border-gold) !important;
    color: var(--gold2) !important;
}
.badge-ok  { background: rgba(110,231,183,.15) !important; color: #6ee7b7 !important; border: 1px solid rgba(110,231,183,.3) !important; }
.badge-muted { background: var(--navy4) !important; color: var(--muted-dark) !important; }

/* ── Account nav / profile card ─────────────────────────── */
.account-nav a {
    color: var(--cream2) !important;
    border-color: var(--border-gold) !important;
}
.account-nav a:hover,
.account-nav a.active {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    background: var(--gold-dim) !important;
}

/* ── Ticket pages ────────────────────────────────────────── */
.ticket-thread,
.ticket-message {
    background: var(--navy3) !important;
    border-color: var(--border-gold) !important;
}
.ticket-message-admin { background: var(--navy4) !important; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .nmq-hero {
        padding: 80px 16px 60px !important;
        min-height: 70vh !important;
    }
    .nmq-hero::before,
    .nmq-hero::after { display: none !important; }

    .nmq-hero-title {
        font-size: clamp(26px, 9vw, 44px) !important;
    }

    nav a,
    .main-nav a {
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
    }

    .card,
    .tool-card,
    .category-card {
        margin-bottom: 16px;
    }
}

/* ── Star Rating Widget ──────────────────────────────────── */
/* The widget sits inside .page-hero, whose background is a gold→purple
   gradient. The old inactive colour (var(--border-gold) = 20% gold alpha)
   washed out completely on the gold half. Use a crisp white with a dark
   text-shadow so inactive stars read on BOTH the gold and purple ends; the
   shadow keeps them visible even on light backgrounds. */
.nmq-rating-widget { gap: 8px; justify-content: center; }
.nmq-star {
    color: rgba(255,255,255,0.72) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.nmq-star:hover,
.nmq-star.hover,
.nmq-star.active {
    color: var(--gold3, #F0D080) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.nmq-rating-summary { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.nmq-rating-summary strong { color: var(--gold3, #F0D080) !important; }

/* ── Social Share Bar ────────────────────────────────────── */
.nmq-share-bar {
    border-top-color: var(--border-gold, #2a2010) !important;
}
.nmq-share-label { color: var(--muted-gold, #a89068) !important; }
.nmq-share-btn.copy {
    background: var(--navy2, #0d1829) !important;
    color: var(--gold, #C9A84C) !important;
    border-color: var(--border-gold, #2a2010) !important;
}

/* ── Cookie Consent Banner ───────────────────────────────── */
.nmq-cookie-banner {
    background: var(--navy1, #080C18) !important;
    border-top: 1px solid var(--border-gold, #2a2010) !important;
}
.nmq-cookie-accept { background: var(--gold, #C9A84C) !important; color: #000 !important; }

/* ── Newsletter Band ─────────────────────────────────────── */
.nmq-newsletter-band {
    background: var(--navy2, #0d1829) !important;
    border-top: 1px solid var(--border-gold, #2a2010) !important;
}
.nmq-newsletter-band h2 { color: var(--gold, #C9A84C) !important; }
.nmq-newsletter-form button {
    background: var(--gold, #C9A84C) !important;
    color: #000 !important;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.nmq-breadcrumb {
    border-bottom-color: var(--border-gold, #2a2010) !important;
    background: transparent !important;
}
.nmq-breadcrumb a { color: var(--gold, #C9A84C) !important; }
.nmq-breadcrumb li:last-child span { color: var(--muted-gold, #a89068) !important; }

/* ── Related Tools ───────────────────────────────────────── */
.nmq-related {
    border-top-color: var(--border-gold, #2a2010) !important;
}
.nmq-related-heading { color: var(--gold, #C9A84C) !important; }

/* ── Testimonials ────────────────────────────────────────── */
.nmq-testimonials {
    background: var(--navy2, #0d1829) !important;
}
.nmq-testimonials h2 { color: var(--gold, #C9A84C) !important; }
.nmq-testimonial-card {
    background: var(--navy3, #111e35) !important;
    border-color: var(--border-gold, #2a2010) !important;
}
.nmq-testimonial-stars { color: var(--gold, #C9A84C) !important; }
.nmq-testimonial-content { color: var(--text-light, #e2ddd0) !important; }
.nmq-testimonial-author strong { color: var(--gold-light, #e2c97e) !important; }
.nmq-testimonial-author span { color: var(--muted-gold, #a89068) !important; }

/* Layout - centered, balanced 3-column (reference) */
.container{max-width:1180px}
.page-hero .container{text-align:center}
.tool-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}