/* WristPay shared base + chrome (header + footer). Page-specific styles stay inline. */
:root { --wp-bg:#0B0F14; --wp-surface:#11161D; --wp-card:#141B24; --wp-border:#1F2935; --wp-gold:#D4AF37; --wp-text:#E8EEF5; --wp-text-dim:#8A9AAE; }
* { box-sizing: border-box; }
body { margin:0; background:var(--wp-bg); color:var(--wp-text); font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }

/* Header */
.wp-header { background:rgba(17,22,29,.92); border-bottom:1px solid var(--wp-border); position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); }
.wp-header-inner { max-width:82rem; margin:0 auto; padding:.875rem clamp(1rem,3vw,2rem); display:flex; align-items:center; gap:2rem; }
.wp-logo { display:inline-flex; align-items:center; gap:.5rem; color:var(--wp-text); text-decoration:none; font-family:'Bricolage Grotesque',sans-serif; font-size:1.25rem; font-weight:700; }
.wp-logo strong { color:var(--wp-gold); font-weight:800; }
.wp-nav { display:flex; gap:1.5rem; font-size:.8125rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; margin-left:auto; }
.wp-nav a { color:var(--wp-text-dim); text-decoration:none; transition:color .15s; }
.wp-nav a:hover { color:var(--wp-gold); }
@media (max-width:900px) { .wp-nav { display:none; } }

/* Footer */
.wp-footer { background:var(--wp-surface); border-top:1px solid var(--wp-border); padding:3rem 0 1.5rem; margin-top:4rem; }
.wp-footer-inner { max-width:82rem; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
.wp-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
@media (max-width:680px) { .wp-footer-grid { grid-template-columns:1fr; gap:2rem; } }
.wp-footer-col { min-width:0; }
.wp-footer-brand { font-family:'Bricolage Grotesque',sans-serif; font-size:1.375rem; font-weight:700; color:var(--wp-text); margin-bottom:.5rem; }
.wp-footer-brand strong { color:var(--wp-gold); font-weight:800; }
.wp-footer-desc { font-size:.875rem; color:var(--wp-text-dim); max-width:28rem; margin:0; }
.wp-footer-col h3, .wp-footer-col .wp-footer-h { font-size:.6875rem; font-weight:700; color:var(--wp-gold); text-transform:uppercase; letter-spacing:.12em; margin:0 0 .75rem; }
.wp-footer-col ul { margin:0; padding:0; list-style:none; }
.wp-footer-col li { margin-bottom:.5rem; }
.wp-footer-col a { color:var(--wp-text-dim); text-decoration:none; font-size:.875rem; transition:color .15s; }
.wp-footer-col a:hover { color:var(--wp-gold); }
.wp-footer-bottom { border-top:1px solid var(--wp-border); padding-top:1.5rem; font-size:.75rem; color:var(--wp-text-dim); text-align:center; }

/* ── Print-friendly CSS ────────────────────────────────────────────────── */
@media print {
    /* Reset layout for A4 */
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }
    /* Hide UI chrome */
    header, nav, footer, aside,
    .gx-hdr, .gx-ftr, .gx-hamburger, .gx-cta, .gx-nav, .gx-mobile-menu,
    .site-header, .site-footer, .main-nav, .mobile-menu,
    .social-share, .share-buttons, .share-section,
    .comments-section, .leave-comment, .cm_form, #cm_form,
    .related-articles, .cross-category, .newsletter, .cookie-banner,
    .ad, .ads, .advertisement, [class*="ad-"], [class*="banner"],
    .breadcrumb, .sn-breadcrumb,
    .search, .search-form,
    button, input[type=button], input[type=submit] {
        display: none !important;
    }
    /* Article body — full width, no max constraints */
    main, article, .article, .article-content, .wp-article, .wp-article-main,
    .post, .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
        float: none !important;
    }
    /* Headings */
    h1 { font-size: 20pt !important; margin: 0 0 8pt 0 !important; }
    h2 { font-size: 14pt !important; margin: 12pt 0 6pt 0 !important; page-break-after: avoid; }
    h3 { font-size: 12pt !important; margin: 10pt 0 4pt 0 !important; page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
    p { margin: 0 0 6pt 0 !important; }
    blockquote { border-left: 3pt solid #666 !important; margin: 6pt 12pt !important; padding-left: 6pt !important; }
    img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }
    pre, code { font-size: 9pt !important; background: #f4f4f4 !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    table { page-break-inside: avoid; border-collapse: collapse !important; }
    th, td { border: 1px solid #666 !important; padding: 4pt !important; }
    /* Show URLs inline after links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Don't expand relative/anchor links */
    a[href^="/"]::after, a[href^="#"]::after { content: ""; }
    /* Page setup */
    @page { margin: 1.5cm 1.8cm; }
}

/* ── Dark Mode (localStorage-driven) ────────────────────────────────────── */
html[data-theme="dark"] {
    --bg: #0d1117;
    --bg-card: #161b22;
    --bg-nav: #010409;
    --text: #e6edf3;
    --text-dim: #8b949e;
    --border: #30363d;
    --link: #58a6ff;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] header,
html[data-theme="dark"] nav,
html[data-theme="dark"] footer,
html[data-theme="dark"] .gx-hdr,
html[data-theme="dark"] .gx-ftr,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer {
    background: var(--bg-nav) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] a {
    color: var(--link) !important;
}
html[data-theme="dark"] .gx-nav-link,
html[data-theme="dark"] .nav-link {
    color: var(--text) !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .gx-card,
html[data-theme="dark"] main > *,
html[data-theme="dark"] article,
html[data-theme="dark"] .article-content {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--text) !important;
}
html[data-theme="dark"] .meta,
html[data-theme="dark"] .date,
html[data-theme="dark"] .author,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .excerpt {
    color: var(--text-dim) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background: var(--bg-nav) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] blockquote {
    border-left-color: var(--border) !important;
    color: var(--text-dim) !important;
}
html[data-theme="dark"] img {
    opacity: 0.92;
}
html[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Toggle button — always positioned in header, cycles 3 states */
.ph-theme-toggle {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.5rem;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.ph-theme-toggle:hover {
    background: rgba(128,128,128,0.15);
    transform: scale(1.08);
}
.ph-theme-toggle svg {
    width: 18px;
    height: 18px;
}
.ph-theme-toggle .ph-icon-dark { display: none; }
html[data-theme="dark"] .ph-theme-toggle .ph-icon-light { display: none; }
html[data-theme="dark"] .ph-theme-toggle .ph-icon-dark  { display: block; }

/* ── Light mode override for dark-default sites ─────────────────────────
   When user explicitly sets data-theme="light", force light palette even
   on sites whose native CSS hardcodes dark backgrounds. This makes the
   toggle work bidirectionally on all site themes. */
html[data-theme="light"] {
    --bg: #ffffff;
    --bg-card: #f8f9fa;
    --bg-nav: #ffffff;
    --text: #1a1a1a;
    --text-dim: #6a737d;
    --border: #e1e4e8;
    --link: #0366d6;
    color-scheme: light;
}
html[data-theme="light"] body,
html[data-theme="light"] main {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
html[data-theme="light"] header,
html[data-theme="light"] nav,
html[data-theme="light"] footer,
html[data-theme="light"] .gx-topbar,
html[data-theme="light"] .gx-hdr,
html[data-theme="light"] .gx-ftr,
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .gx-mobile-menu,
html[data-theme="light"] .df-header,
html[data-theme="light"] .df-footer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] .gx-nav-link,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .gx-brand,
html[data-theme="light"] a {
    color: #1a1a1a !important;
}
html[data-theme="light"] a[href]:not(.gx-cta):not(.gx-brand):not(.nav-link):not(.gx-nav-link) {
    color: #0366d6 !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .article-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .gx-card,
html[data-theme="light"] article,
html[data-theme="light"] .article-content,
html[data-theme="light"] .wp-article,
html[data-theme="light"] .wp-article-main {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
    color: #1a1a1a !important;
}
html[data-theme="light"] .meta,
html[data-theme="light"] .date,
html[data-theme="light"] .author,
html[data-theme="light"] .byline,
html[data-theme="light"] .excerpt,
html[data-theme="light"] .gx-meta {
    color: #6a737d !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e1e4e8 !important;
}
html[data-theme="light"] code,
html[data-theme="light"] pre {
    background: #f6f8fa !important;
    color: #24292e !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] blockquote {
    border-left-color: #d1d5da !important;
    color: #586069 !important;
}
html[data-theme="light"] .gx-topbar-inner,
html[data-theme="light"] .gx-hero,
html[data-theme="light"] .gx-section {
    background: #ffffff !important;
}