/* ============================================================================
   DICE design tokens — foundation (ticket D1)
   Brand-derived from explore.diceverse.io; all pairings AA-verified.
   Loaded LAST (after navbar.css) so it wins the cascade. Each var() is
   preceded by a literal hex fallback for browsers without custom-property
   support. Presentation only — no behaviour, routing, or markup changes.
   ============================================================================ */

/* ---- self-hosted Open Sans (Apache-2.0), latin subset, paths relative to this file ---- */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-700-normal.woff2") format("woff2");
}

/* ---- token definitions ---- */
:root {
    --navy:#071E32;        /* category bar, hero, primary surfaces — white on it 16.7:1 */
    --ink:#0B1B2B;         /* headings — ~15:1 on #fff (kills grey 300-wt titles) */
    --text:#3D4754;        /* body copy — ~9:1 on #fff */
    --muted:#595959;       /* secondary text + NAV LINKS — 7.0:1 #fff / 6.6:1 #f8f8f8 (A6 fix) */
    --accent:#0B599C;      /* links, primary buttons — 7.2:1 on #fff (brand blue) */
    --accent-strong:#094B82; /* darker accent for text/fill hover+active states — AA on/with #fff */
    --accent-2:#1F80BE;    /* large elements / focus ring ONLY — NOT normal text (4.29:1 on #fff) */
    --accent-ink:#FFFFFF;
    --success:#157A23;     /* darkened from brand green #009F15 — ~4.6:1 */
    --danger:#C62828;
    --warning:#8A6D00;
    --info:#0B599C;
    --bg:#FFFFFF;
    --bg-subtle:#F8F8F8;

    --font:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --fs-base:16px; --fs-sm:14px;
    --fs-h6:16px; --fs-h5:20px; --fs-h4:24px; --fs-h3:28px; --fs-h2:36px; --fs-h1:44px; --fs-display:52px;
    --fw-heading:600; --fw-strong:700; --lh-body:1.5; --lh-heading:1.2;

    --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px;
}

/* ---- base typography ---- */
body {
    font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-family:var(--font);
    font-size:16px;
    font-size:var(--fs-base);
    line-height:1.5;
    line-height:var(--lh-body);
    color:#3D4754;
    color:var(--text);
}

/* Headings: kill the light-grey 300-weight titles — heavier + ink colour */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-family:var(--font);
    font-weight:600;
    font-weight:var(--fw-heading);
    line-height:1.2;
    line-height:var(--lh-heading);
    color:#0B1B2B;
    color:var(--ink);
}
h1, .h1 { font-size:44px; font-size:var(--fs-h1); }
h2, .h2 { font-size:36px; font-size:var(--fs-h2); }
h3, .h3 { font-size:28px; font-size:var(--fs-h3); }
h4, .h4 { font-size:24px; font-size:var(--fs-h4); }
h5, .h5 { font-size:20px; font-size:var(--fs-h5); }
h6, .h6 { font-size:16px; font-size:var(--fs-h6); }

/* One display style for marketing headers (opt-in via .dice-display, no markup change forced) */
.dice-display {
    font-size:52px;
    font-size:var(--fs-display);
    font-weight:700;
    font-weight:var(--fw-strong);
    line-height:1.2;
    line-height:var(--lh-heading);
    color:#0B1B2B;
    color:var(--ink);
}

strong, b { font-weight:700; font-weight:var(--fw-strong); }
small, .small { font-size:14px; font-size:var(--fs-sm); }

/* ---- links + buttons (one accent) ---- */
a {
    color:#0B599C;
    color:var(--accent);
}
a:hover, a:focus {
    color:#094B82;
    color:var(--accent-strong);
}
.btn-primary {
    background-color:#0B599C;
    background-color:var(--accent);
    border-color:#0B599C;
    border-color:var(--accent);
    color:#FFFFFF;
    color:var(--accent-ink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color:#094B82;
    background-color:var(--accent-strong);
    border-color:#094B82;
    border-color:var(--accent-strong);
    color:#FFFFFF;
    color:var(--accent-ink);
}
/* focus ring uses accent-2 — a non-text element, AA text threshold n/a */
.btn-primary:focus, .btn-primary.focus {
    outline:none;
    box-shadow:0 0 0 3px rgba(31,128,190,0.5);
}

/* ---- semantic state colours (AA on white) ---- */
.text-success { color:#157A23 !important; color:var(--success) !important; }
.text-danger  { color:#C62828 !important; color:var(--danger)  !important; }
.text-warning { color:#8A6D00 !important; color:var(--warning) !important; }
.text-info    { color:#0B599C !important; color:var(--info)    !important; }

/* ----------------------------------------------------------------------------
   NAV-LINK CONTRAST (A6 dependency) — MUST win by SPECIFICITY, not load order.
   Bootstrap default is `.navbar-default .navbar-nav>li>a {color:#777}` -> (0,2,2).
   The id-scoped selector below is (1,1,2): the id guarantees it wins even if
   the in-body stylesheet includes are ever reordered. Both store and
   marketplace headers use the same `#store-navbar` id, so this covers both.
   ---------------------------------------------------------------------------- */
#store-navbar .navbar-nav > li > a {
    color:#595959;
    color:var(--muted);
}
#store-navbar .navbar-nav > li > a:hover,
#store-navbar .navbar-nav > li > a:focus {
    color:#0B1B2B;
    color:var(--ink);
}

/* ============================================================================
   PAGE-SCOPED OVERRIDES (D1 apply) — 8px-grid spacing on existing hooks
   ============================================================================ */

/* Content detail (store-magazine.php): kill the arbitrary dead-zone (a stray
   <br/>) between the content body and the "Related" tabs. Replaced with a
   single 48px grid step. Hook: one JS-safe class `dice-related-section` added
   to the previously class-less wrapper div. */
.dice-related-section {
    margin-top:48px;
    margin-top:var(--space-6);
}

/* Footer copyright/legal muted text — AA fix (D1 carry-over, live-unfixed on prod).
   Bootstrap default .text-muted is #777 (4.1:1 on the #f5f5f5 footer = AA fail).
   Footer-scoped selector footer.footer .text-muted = (0,2,1) beats .text-muted
   (0,1,0) and, loaded last, survives include reordering — same pattern as the
   D1 nav rule. #595959 = 4.6:1 on #f5f5f5, AA pass. */
footer.footer .text-muted {
    color:#595959;
    color:var(--muted);
}

/* A6 — "Skip to content" link: visually hidden until keyboard-focused, then
   slides into the top-left. Targets #site-container (the main content wrapper). */
.dice-skip-link {
    position:absolute;
    left:8px;
    top:-48px;
    z-index:3000;
    background:#071E32;
    background:var(--navy);
    color:#FFFFFF;
    color:var(--accent-ink);
    padding:8px 16px;
    border-radius:0 0 4px 4px;
    text-decoration:none;
    transition:top .15s ease;
}
.dice-skip-link:focus {
    top:0;
    color:#FFFFFF;
    color:var(--accent-ink);
    outline:2px solid #1F80BE;
    outline:2px solid var(--accent-2);
}

/* ============================================================================
   A3 — keep the Pipedrive LeadBooster chat BELOW the Bootstrap modal layer
   (.modal-backdrop=1040, .modal=1050) so it can never cover a modal's primary
   action (e.g. the Search/Filter "Apply" button).

   Live-prod fact (Cowork re-inspected go.diceverse.io): Pipedrive's rule is
   `html body #LeadboosterContainer{...z-index:2147483647 !important}` = (1,0,2).
   Batch-3's `html #LeadboosterContainer` = (1,0,1) LOST the specificity race.
   We now OUT-SPECIFY at (1,1,2) by matching the proactive-chat class too:
   html body #LeadboosterContainer.proactiveChat — beats (1,0,2) regardless of
   load order. 1030 < modal-backdrop 1040, so an open modal covers the chat.
   If Pipedrive bumps their selector again, switch to a JS/MutationObserver cap
   (flagged). This rule rides dice-tokens.css, linked in both buyer layouts
   (store + marketplace headers) — every page where the Search/Filter modal
   appears, reaching the GTM-injected widget there. */
html body #LeadboosterContainer.proactiveChat,
html body iframe[src*="leadbooster-chat.pipedrive.com"].proactiveChat {
    z-index:1030 !important;
}

/* ============================================================================
   diceToast (A5) — reusable toast, paired with assets/store/js/dice-toast.js
   ============================================================================ */
.dice-toast {
    position:fixed;
    left:50%;
    bottom:24px;
    bottom:var(--space-4);
    transform:translateX(-50%) translateY(12px);
    z-index:2000;
    max-width:90%;
    background:#071E32;
    background:var(--navy);
    color:#FFFFFF;
    color:var(--accent-ink);
    font-family:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-family:var(--font);
    font-size:14px;
    font-size:var(--fs-sm);
    line-height:1.4;
    padding:12px 16px;
    border-radius:6px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    display:flex;
    align-items:center;
    gap:12px;
    opacity:0;
    transition:opacity .25s ease, transform .25s ease;
}
.dice-toast.dice-toast-in {
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.dice-toast-msg { flex:1 1 auto; }
.dice-toast-action {
    color:#FFFFFF;
    color:var(--accent-ink);
    font-weight:700;
    font-weight:var(--fw-strong);
    text-decoration:underline;
    white-space:nowrap;
}
.dice-toast-action:hover, .dice-toast-action:focus {
    color:#FFFFFF;
    color:var(--accent-ink);
    opacity:.85;
}
.dice-toast-close {
    background:none;
    border:0;
    color:#FFFFFF;
    color:var(--accent-ink);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    opacity:.8;
    padding:0 0 0 4px;
}
.dice-toast-close:hover { opacity:1; }