/*
 * shared-design.css
 * Design tokens and utility classes shared across all Sideline Captions pages.
 * Mirrors the visual language established in index.html:
 *   - JetBrains Mono eyebrow labels
 *   - Subtle grid background overlays on dark sections
 *   - Consistent dark section styling
 */

:root {
    --font-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    --color-primary: #6279e6;
    --color-primary-dark: #3842ba;
    --color-bg-deep: #050a12;
    --color-bg-base: #020617;
    --color-bg-card: #09090b;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text-muted: #64748b;
    --color-text-dim: #94a3b8;
}

/* ── Eyebrow label ─────────────────────────────────────── */

.page-eyebrow {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.page-eyebrow--light {
    color: rgba(255, 255, 255, 0.85);
}

.page-eyebrow--accent {
    color: var(--color-primary);
}

/* ── Background grid overlay ──────────────────────────── */

.page-gridfx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 36px, rgba(71, 85, 105, 0.06) 36px, rgba(71, 85, 105, 0.06) 37px),
        repeating-linear-gradient(90deg, transparent, transparent 36px, rgba(71, 85, 105, 0.06) 36px, rgba(71, 85, 105, 0.06) 37px);
}

/* ── Dark section with grid ────────────────────────────── */

.page-section-dark {
    position: relative;
    background: var(--color-bg-deep);
}

.page-section-dark > .page-gridfx ~ * {
    position: relative;
    z-index: 1;
}

/* Ensure children above the grid are stacked */
.page-section-dark > *:not(.page-gridfx) {
    position: relative;
    z-index: 1;
}

/* ── Label font utility ────────────────────────────────── */

.label-font {
    font-family: var(--font-label);
}

/* ── Section kicker (alias for eyebrow) ────────────────── */

.section-kicker {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin: 0 0 0.85rem;
}

/* ── Gradient text (shared) ────────────────────────────── */

.gradient-text {
    background: linear-gradient(135deg, #6279e6 0%, #3842ba 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, #6279e6 0%, #3842ba 100%);
}

/* ── Mobile: prevent section eyebrows / split headlines clipping ── */

@media (max-width: 767px) {
    .page-eyebrow,
    .section-kicker,
    [class*="__eyebrow"] {
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        line-height: 1.45;
        max-width: 100%;
    }

    [class*="__title"],
    [class*="__headline"] {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .product-tools__title,
    .hiw-v2__headline {
        font-size: clamp(1.625rem, 8.2vw, 2.25rem);
        line-height: 1.15;
    }

    [class*="__title-accent"],
    [class*="__headline-accent"],
    [class*="__title"] .label-font,
    [class*="__headline"] .label-font {
        white-space: normal !important;
    }

    [class*="__lede"] {
        max-width: 100%;
    }

    /* Tailwind split headlines (homepage + marketing pages) */
    h1 .label-font,
    h2 .label-font,
    h3 .label-font,
    h1 .bg-clip-text,
    h2 .bg-clip-text,
    h3 .bg-clip-text {
        white-space: normal !important;
    }

    h1,
    h2,
    h3 {
        min-width: 0;
        max-width: 100%;
    }

    h1.whitespace-nowrap,
    h2.whitespace-nowrap,
    h3.whitespace-nowrap,
    h1 .whitespace-nowrap,
    h2 .whitespace-nowrap,
    h3 .whitespace-nowrap {
        white-space: normal !important;
    }

    .hiw-v2,
    .product-tools,
    .page-section-dark {
        overflow-x: visible;
    }
}

@media (min-width: 1024px) {
    [class*="__title-accent"],
    [class*="__headline-accent"] {
        white-space: nowrap;
    }
}