/* =====================================================================
   global.css — Site-wide design system extension
   Loaded after main.css on every page.
   Fills gaps in main.css: font polish, full button states, link styles,
   heading completeness, prose, accessibility utilities, reduced motion.
   ===================================================================== */

/* ================================================================== */
/* FONT POLISH                                                           */
/* ================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ================================================================== */
/* SELECTION                                                             */
/* ================================================================== */

::selection {
    background: rgba(26, 86, 219, 0.18);
    color: var(--text, #0A0F1E);
}

/* ================================================================== */
/* HEADINGS — complete the size scale (h4/h5/h6 missing from main.css)  */
/* ================================================================== */

h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
h5 { font-size: 1rem;     font-weight: 700; line-height: 1.4; }
h6 { font-size: 0.82rem;  font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }

/* ================================================================== */
/* PROSE INLINE ELEMENTS                                                 */
/* ================================================================== */

strong, b   { font-weight: 700; color: var(--text, #0A0F1E); }
em, i       { font-style: italic; }
small       { font-size: 0.82em; }
s, del      { text-decoration: line-through; color: var(--text-3, #6B7280); }
sub         { vertical-align: sub; font-size: 0.75em; }
sup         { vertical-align: super; font-size: 0.75em; }
mark        { background: var(--gold-l, #FEF3C7); color: var(--text, #0A0F1E); border-radius: 3px; padding: 0 3px; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

kbd {
    font-family: var(--f-mono, monospace);
    font-size: 0.82em;
    background: var(--cream-2, #EDF1F7);
    border: 1px solid var(--border-dk, #C3CFE0);
    border-radius: 5px;
    padding: 2px 7px;
    box-shadow: 0 1px 0 var(--border-dk, #C3CFE0);
    white-space: nowrap;
}

code {
    font-family: var(--f-mono, monospace);
    font-size: 0.88em;
    background: var(--cream-2, #EDF1F7);
    border-radius: 5px;
    padding: 2px 6px;
    color: #be185d;
    word-break: break-word;
}

pre {
    font-family: var(--f-mono, monospace);
    font-size: 0.9rem;
    line-height: 1.72;
    background: var(--navy, #0C1A35);
    color: #e2e8f0;
    border-radius: var(--r-md, 12px);
    padding: 20px 24px;
    overflow-x: auto;
    margin: 1.4em 0;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
    border-radius: 0;
}

/* ================================================================== */
/* HR                                                                    */
/* ================================================================== */

hr {
    border: 0;
    border-top: 1px solid var(--border, #DDE4F0);
    margin: 2em 0;
}

/* ================================================================== */
/* LINKS — global base (component styles override as needed)             */
/* ================================================================== */

a {
    color: var(--blue, #1A56DB);
    text-decoration: none;
    transition: color 0.18s ease;
}

a:hover {
    color: var(--blue-mid, #2563EB);
}

a:focus-visible {
    outline: 2px solid var(--blue, #1A56DB);
    outline-offset: 3px;
    border-radius: 3px;
    text-decoration: none;
}

/* Prose link — underline style for links inside readable content */
.sb-prose a,
.entry-content a,
.wp-block-post-content a,
.sb-help-art-body a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(26, 86, 219, 0.35);
}

.sb-prose a:hover,
.entry-content a:hover,
.wp-block-post-content a:hover,
.sb-help-art-body a:hover {
    text-decoration-color: var(--blue, #1A56DB);
}

/* Nav and footer links should not inherit prose underline */
.sb-nav a,
.sb-nav-mobile a,
.sb-footer a,
.sb-lp-bar a {
    text-decoration: none;
}

/* ================================================================== */
/* BUTTON SYSTEM — complete all states                                   */
/* main.css defines .btn base + variants. This adds missing states.     */
/* ================================================================== */

/* Universal focus ring for all .btn */
.btn:focus-visible {
    outline: 2px solid var(--blue, #1A56DB);
    outline-offset: 3px;
}

/* Universal disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading state */
.btn.is-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.75;
}

/* --- Primary --- */
.btn-primary:active                 { background: var(--blue-dk, #1140AA); box-shadow: none; transform: none; }
.btn-primary:focus-visible          { outline-color: var(--blue, #1A56DB); }
.btn-primary:visited                { color: #fff; }

/* --- Dark --- */
.btn-dark:active                    { background: #000010; box-shadow: none; transform: none; }
.btn-dark:focus-visible             { outline-color: var(--navy, #0C1A35); }
.btn-dark:visited                   { color: #fff; }

/* --- Gold --- */
.btn-gold:active                    { background: #b45309; box-shadow: none; transform: none; }
.btn-gold:focus-visible             { outline-color: var(--gold, #F59E0B); }
.btn-gold:visited                   { color: var(--navy, #0C1A35); }

/* --- Outline --- */
.btn-outline:active                 { background: var(--blue-l, #EBF2FF); border-color: var(--blue, #1A56DB); transform: none; }
.btn-outline:focus-visible          { outline-color: var(--blue, #1A56DB); }
.btn-outline:visited                { color: var(--text, #0A0F1E); }

/* --- Outline White --- */
.btn-outline-white:active           { background: rgba(255, 255, 255, 0.22); transform: none; }
.btn-outline-white:focus-visible    { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.btn-outline-white:visited          { color: #fff; }

/* --- Ghost --- */
.btn-ghost:active                   { background: var(--blue-l, #EBF2FF); color: var(--blue, #1A56DB); transform: none; }
.btn-ghost:focus-visible            { outline-color: var(--blue, #1A56DB); }

/* ---- New variants ---- */

.btn-mint {
    background: var(--mint, #059669);
    color: #fff;
    box-shadow: 0 3px 14px rgba(5, 150, 105, 0.28);
}
.btn-mint:hover         { background: #047857; box-shadow: 0 6px 24px rgba(5, 150, 105, 0.4); }
.btn-mint:active        { background: #065f46; box-shadow: none; transform: none; }
.btn-mint:focus-visible { outline-color: var(--mint, #059669); }
.btn-mint:visited       { color: #fff; }

.btn-white {
    background: #fff;
    color: var(--blue, #1A56DB);
    box-shadow: 0 3px 14px rgba(10, 15, 30, 0.1);
}
.btn-white:hover         { background: var(--blue-l, #EBF2FF); box-shadow: 0 6px 24px rgba(10, 15, 30, 0.15); }
.btn-white:active        { background: var(--blue-l, #EBF2FF); box-shadow: none; transform: none; }
.btn-white:focus-visible { outline-color: var(--blue, #1A56DB); }
.btn-white:visited       { color: var(--blue, #1A56DB); }

.btn-danger {
    background: var(--error, #B91C1C);
    color: #fff;
    box-shadow: 0 3px 14px rgba(185, 28, 28, 0.28);
}
.btn-danger:hover         { background: #991b1b; box-shadow: 0 6px 24px rgba(185, 28, 28, 0.4); }
.btn-danger:active        { background: #7f1d1d; box-shadow: none; transform: none; }
.btn-danger:focus-visible { outline-color: var(--error, #B91C1C); }
.btn-danger:visited       { color: #fff; }

.btn-navy-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.btn-navy-outline:hover         { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-navy-outline:active        { background: rgba(255, 255, 255, 0.14); transform: none; }
.btn-navy-outline:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 3px; }

/* Extra size token */
.btn-xl { padding: 20px 40px; font-size: 1.125rem; }

/* ================================================================== */
/* FORM ACCESSIBILITY                                                    */
/* ================================================================== */

.sb-form-input:focus-visible,
.sb-form-select:focus-visible,
.sb-form-textarea:focus-visible {
    outline: none;
    border-color: var(--blue, #1A56DB);
    box-shadow: 0 0 0 3px var(--blue-dim, rgba(26, 86, 219, 0.12));
}

/* ================================================================== */
/* PROSE BLOCK — use .sb-prose wrapper on any rich-text container       */
/* ================================================================== */

.sb-prose {
    font-family: var(--f-body, 'Poppins', sans-serif);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-2, #374151);
    max-width: 72ch;
}

.sb-prose h2,
.sb-prose h3,
.sb-prose h4 {
    color: var(--text, #0A0F1E);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

.sb-prose p { margin-bottom: 1.1em; }

.sb-prose ul,
.sb-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.1em;
}

.sb-prose li + li { margin-top: 0.35em; }

.sb-prose blockquote {
    margin: 1.4em 0;
    padding: 16px 20px;
    border-left: 4px solid var(--blue, #1A56DB);
    background: var(--blue-l, #EBF2FF);
    border-radius: 0 var(--r-md, 12px) var(--r-md, 12px) 0;
    color: var(--text-2, #374151);
    font-style: italic;
}

.sb-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md, 12px);
    margin: 1.4em 0;
}

.sb-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    margin: 1.2em 0;
}

.sb-prose th {
    background: var(--cream-2, #EDF1F7);
    font-weight: 700;
    padding: 10px 14px;
    text-align: left;
    color: var(--text, #0A0F1E);
    border-bottom: 2px solid var(--border, #DDE4F0);
}

.sb-prose td {
    padding: 10px 14px;
    color: var(--text-2, #374151);
    border-bottom: 1px solid var(--border, #DDE4F0);
    vertical-align: top;
}

/* ================================================================== */
/* ACCESSIBILITY UTILITIES                                               */
/* ================================================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -999px;
    left: 20px;
    z-index: 10000;
    padding: 10px 20px;
    background: var(--blue, #1A56DB);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 0 0 var(--r-sm, 8px) var(--r-sm, 8px);
    text-decoration: none;
    transition: top 0.1s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ================================================================== */
/* HELPER UTILITIES                                                      */
/* ================================================================== */

.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2      { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3      { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mt-0              { margin-top: 0 !important; }
.mb-0              { margin-bottom: 0 !important; }
.visually-hidden   { visibility: hidden; }

/* ================================================================== */
/* REDUCED MOTION                                                        */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Un-hide scroll-reveal elements immediately */
    .rev,
    .sb-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ================================================================== */
/* PRINT — global                                                        */
/* ================================================================== */

@media print {
    .sb-nav,
    .sb-nav-mobile,
    .sb-announce,
    .sb-footer,
    .sb-back-top {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
        background: #fff;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    /* Suppress URL display for nav/icon links */
    .sb-nav a::after,
    .sb-footer a::after,
    [aria-hidden="true"]::after {
        content: none;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: #000;
    }

    p, blockquote, table, ul, ol {
        page-break-inside: avoid;
    }
}