/* ============================================================================
   stk-docs.css — the shared heading system for STK's standalone document pages
   ----------------------------------------------------------------------------
   Used by every instructional / legal / guide page that renders outside the SPA
   shell: support/tos.php, support/privacy.php, support/scan-to-pack.php,
   connections/variant-labels-guide.php, connections/shopify/connect.php.

   Before this file each of those pages carried its own copy of the same rules,
   which is how the brand ended up with four different marks and three spellings
   of the wordmark at once. Change the heading here, not there.

   This file deliberately consumes tokens and never defines them — pages keep
   their own :root block. Since 2026-11-07 every standalone page is light only,
   matching the public homepage (warm cream canvas, white cards, charcoal ink).

   Brand rules this file encodes:
     - Diamond Pockets uses the canonical SVG; the Crumpet wordmark has no punctuation glyph.
     - Since 2026-11-08 the public pages use the warm Crumpet palette: --bs-primary is
       toasted orange and is spent on interactive elements, section labels and the
       brand glyph only. Butter (--stk-butter) is a highlight band, never text.
     - Headings are set in DM Sans, the wordmark face. The <b> accent in .doc-title is a
       clean butter underline under ink-coloured words, not a coloured word — permitted on THESE
       standalone pages only, never in application UI.
     - Links carry an underline so link-ness never depends on hue alone.
   ========================================================================= */

/* ── Page shell ──────────────────────────────────────────────────────────── */
.gw-shell {
    min-height: 100vh; padding: 48px 20px 64px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
}
.gw-shell::before {
    content: ""; position: fixed; inset: 0;
    /* Soft dot texture, as on the homepage hero. --stk-grid-line is the dot colour. */
    background-image: radial-gradient(circle, var(--stk-grid-line) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 50% 10%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 10%, #000 20%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.gw-inner { position: relative; z-index: 1; width: 100%; max-width: 800px; }

/* ── Brand lockup ────────────────────────────────────────────────────────── */
.gw-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 19px;
    color: var(--stk-ink); margin-bottom: 32px;
    text-decoration: none;
}
.gw-brand:hover { text-decoration: none; color: var(--stk-ink); }
.gw-brand .logo {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: transparent; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.gw-brand .logo img { display: block; }

.stk-wordmark {
    font-family: "DM Sans", "Source Sans 3", sans-serif;
    font-weight: 600; line-height: 1; letter-spacing: -.01em;
}


/* ── Return link ─────────────────────────────────────────────────────────── */
.gw-return {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600;
    color: var(--stk-muted); text-decoration: none;
    margin-bottom: 20px; background: var(--stk-panel);
    padding: 7px 14px; border: 1px solid var(--stk-divider); border-radius: 10px;
    transition: border-color .15s, color .15s;
}
.gw-return:hover { color: var(--stk-ink); border-color: var(--stk-muted); text-decoration: none; }

/* ── Heading block ───────────────────────────────────────────────────────── */
.doc-eyebrow {
    font-size: 13px; font-weight: 600; color: var(--stk-muted); margin-bottom: 8px;
}
.doc-title {
    font-family: "DM Sans", "Source Sans 3", sans-serif;
    font-size-adjust: from-font; text-wrap: balance;
    font-weight: 700; font-size: 34px; line-height: 1.1;
    letter-spacing: -.03em; color: var(--stk-ink); margin: 0 0 8px;
}
/* Highlighted accent words. Permitted here, never in app UI. */
.doc-title b {
    font-weight: 700; color: var(--stk-ink);
    text-decoration: underline; text-decoration-color: var(--stk-butter);
    text-decoration-thickness: .09em; text-underline-offset: .16em; text-decoration-skip-ink: auto;
}
.doc-meta {
    font-size: 14px; color: var(--stk-muted);
    margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 16px;
}

/* ── Anchor pills ────────────────────────────────────────────────────────── */
.doc-toc {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px;
    padding-bottom: 28px; border-bottom: 1px solid var(--stk-divider);
}
.doc-toc a, .doc-pill {
    font-size: 13px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--stk-divider); background: var(--stk-panel);
    color: var(--stk-muted); text-decoration: none;
    transition: border-color .15s, color .15s;
}
.doc-toc a:hover, .doc-pill:hover {
    border-color: var(--bs-primary); color: var(--bs-primary); text-decoration: none;
}

/* ── Section label ───────────────────────────────────────────────────────── */
/* Do not repeat the page's own H1 here. A label that restates the title spends
   blue on nothing and puts the same words on screen three times. */
.doc-section-label {
    font-size: 13px; font-weight: 700; color: var(--bs-primary); margin: 40px 0 16px;
    padding-bottom: 8px; border-bottom: 1px solid var(--stk-divider);
    display: flex; align-items: center; gap: 10px;
}
.doc-section-label::after { content: ""; flex: 1; height: 1px; }

/* Anchor with no visible label — for the first section, whose name the H1
   already carries. Keeps the #fragment target that the pill row links to
   without printing the same words a third time. */
.doc-anchor { scroll-margin-top: 24px; }

/* ── Links ───────────────────────────────────────────────────────────────── */
/* Underlined by default: colour alone must never be the only signal that
   something is a link (WCAG 1.4.1), and it is what keeps the large blue accent
   word in the H1 from competing with real links. */
.doc-card a {
    color: var(--bs-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
/* Pills are controls, not prose links — the border is their affordance, so they
   stay muted and unadorned. Both classes must be listed here, not only in the
   .doc-pill rule above: `.doc-card a` (0,1,1) outranks a bare `.doc-pill`
   (0,1,0) and would otherwise paint the whole pill row blue. */
.doc-card .doc-toc a,
.doc-card .doc-pill {
    color: var(--stk-muted);
    text-decoration: none;
}
.doc-card .doc-toc a:hover,
.doc-card .doc-pill:hover { color: var(--bs-primary); text-decoration: none; }

@media (max-width: 640px) {
    .doc-title { font-size: 26px; }
}