/* ============================================================================
   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. Redefining --stk-* / --bs-* in component CSS breaks
   dark mode (see the theme rule in AGENTS.md).

   Brand rules this file encodes:
     - The fallen-box glyph is DRAWN (.stk-glyph), never taken from the font.
       Its geometry intentionally repeats the rotated fourth box in the symbol.
     - Blue (--bs-primary) is for interactive elements, the eyebrow label, and
       the brand glyph. The two-tone <b> heading is permitted on THESE standalone pages
       only — never in application UI, where blue stays purely interactive.
     - Links carry an underline so link-ness never depends on hue alone. Keeping
       a large blue accent word in the H1 is only safe because of this.
   ========================================================================= */

/* ── 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;
    background-image:
        linear-gradient(to right, var(--stk-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--stk-grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
    opacity: .5; 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-family: var(--stk-mono); font-weight: 600; font-size: 14px;
    color: var(--stk-ink); letter-spacing: .02em; 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: 7px; flex: 0 0 auto;
    background: transparent; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.gw-brand .logo svg { display: block; }

.stk-wordmark {
    font-family: "DM Sans", "Source Sans 3", sans-serif;
    font-weight: 600; line-height: 1; letter-spacing: .02em;
}
/* Keep the glyph inside the wordmark span. As a direct child of .gw-brand it
   would become a flex item and inherit the lockup's 10px gap. */
.stk-glyph {
    display: inline-block;
    width: .203em; height: .203em;
    margin-left: .02em;
    border-radius: .02em;
    background: var(--bs-primary);
    vertical-align: baseline;
    transform: translateY(.112em) rotate(45deg);
    transform-origin: center;
}

/* ── Return link ─────────────────────────────────────────────────────────── */
.gw-return {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--stk-mono); font-size: 12px;
    color: var(--stk-muted); text-decoration: none;
    margin-bottom: 20px;
    padding: 7px 14px; border: 1px solid var(--stk-divider); border-radius: 8px;
    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-family: var(--stk-mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--stk-muted); margin-bottom: 8px;
}
.doc-title {
    font-weight: 300; font-size: 32px; line-height: 1.1;
    letter-spacing: -.02em; color: var(--stk-ink); margin: 0 0 6px;
}
/* Two-tone heading. Permitted here, never in app UI. */
.doc-title b { font-weight: 700; color: var(--bs-primary); }
.doc-meta {
    font-family: var(--stk-mono); font-size: 12px; 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-family: var(--stk-mono); font-size: 11.5px;
    padding: 5px 12px; border-radius: 20px;
    border: 1px solid var(--stk-divider);
    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-family: var(--stk-mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .14em; 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; }
}