/* ============================================================
   Greitt / Streiting — marketing + help pages (Razor + Bootstrap)
   ------------------------------------------------------------
   Brand tokens mirror web/app/src/app.css (the SPA's source of
   truth) so the marketing pages, the app, and the logo share one
   identity: the logo's violet on warm paper, set in Schibsted
   Grotesk + Hanken Grotesk. Keep these values + the @font-face
   families in sync with app.css. site.css loads AFTER
   bootstrap.min.css, so the --bs-* overrides re-theme Bootstrap.

   Fonts are self-hosted from /fonts (no Google CDN — GDPR-clean),
   latin subset only: these pages are fixed Norwegian copy and the
   latin range covers æ/ø/å.

   NB: this file and the /fonts woff2 are duplicated byte-for-byte
   in the Streiting and Greitt hosts — edit both together.
   ============================================================ */

@font-face {
    font-family: "Schibsted Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 400 900;
    src: url(../fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Typography (self-hosted above; mirrors app.css --font-* tokens) */
    --font-display:
        "Schibsted Grotesk Variable", system-ui, -apple-system, "Segoe UI",
        Roboto, sans-serif;
    --font-sans:
        "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI",
        Roboto, Helvetica, sans-serif;

    /* Brand violet (logo #7E14FF) */
    --violet-100: #ede6ff;
    --violet-300: #c4a3ff;
    --violet-500: #7e14ff;
    --violet-600: #6a10e0;
    --violet-700: #5b21b6;

    /* Neutral gray (mirrors app.css — personality comes from the violet + type) */
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-heading: #18181b;
    --color-text: #27272a;
    --color-text-muted-strong: #52525b;
    --color-border: #e5e5e7;
    --color-eyebrow: var(--color-primary-strong); /* violet brand accent */

    /* Semantic accent */
    --color-primary: var(--violet-500);
    --color-primary-hover: var(--violet-600);
    --color-primary-strong: var(--violet-700);
    --color-link: var(--violet-700);
    --color-focus: rgba(126, 20, 255, 0.4);
    --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06), 0 1px 1px rgba(24, 24, 27, 0.04);

    /* Calm info band */
    --color-success-bg: #eef6f1;
    --color-success-border: #cfe3d5;

    /* Bootstrap theme -> brand violet + brand font */
    --bs-body-font-family: var(--font-sans);
    --bs-primary: var(--violet-500);
    --bs-primary-rgb: 126, 20, 255;
    --bs-link-color: var(--violet-700);
    --bs-link-color-rgb: 91, 33, 182;
    --bs-link-hover-color: var(--violet-600);
    --bs-link-hover-color-rgb: 106, 16, 224;
    --bs-focus-ring-color: var(--color-focus);
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Brand-violet primary buttons (Bootstrap 5 component variables). */
.btn-primary {
    --bs-btn-bg: var(--violet-500);
    --bs-btn-border-color: var(--violet-500);
    --bs-btn-hover-bg: var(--violet-600);
    --bs-btn-hover-border-color: var(--violet-600);
    --bs-btn-active-bg: var(--violet-700);
    --bs-btn-active-border-color: var(--violet-700);
    --bs-btn-disabled-bg: var(--violet-500);
    --bs-btn-disabled-border-color: var(--violet-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 126, 20, 255;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--color-focus);
}

.form-control:focus {
    border-color: var(--color-primary);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

.navbar-brand {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-primary-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hero {
    padding: 4rem 0 3rem;
    max-width: 760px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 0.95;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    color: var(--color-heading);
}

.eyebrow,
.label {
    color: var(--color-eyebrow);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lead {
    max-width: 620px;
    color: var(--color-text-muted-strong);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.preview-grid,
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 2rem 0 3rem;
}

.preview-card,
.help-card {
    display: block;
    min-height: 11rem;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preview-card:hover,
.help-card:hover {
    color: inherit;
    border-color: var(--color-primary);
    box-shadow: 0 0.75rem 2rem rgba(126, 20, 255, 0.12);
}

.preview-card h2,
.help-card h2 {
    margin: 0.55rem 0 0.5rem;
    font-size: 1.15rem;
    color: var(--color-heading);
}

.preview-card p,
.help-card p {
    margin: 0;
    color: var(--color-text-muted-strong);
}

.help-intro {
    max-width: 720px;
    padding: 3rem 0 1rem;
}

.help-band {
    margin: 2rem 0 3rem;
    padding: 1.25rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: 0.5rem;
}