/*
Theme Name: AB TEST Marketing
Theme URI: https://abtestmarketing.se
Author: Tony Edlund
Author URI: https://abtestmarketing.se
Description: Custom, production-grade theme for AB TEST Marketing - a B2B digital marketing consultancy. Editorial, premium B2B aesthetic built on the Attention/Business/Test model. Built from scratch, no page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abtestmarketing
*/

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1.  Design tokens (CSS variables) - brand colours, type, spacing
   2.  Reset & base elements
   3.  Typography
   4.  Layout helpers (container, grid, sections)
   5.  Buttons & links
   6.  Header / navigation
   7.  Footer
   8.  Hero sections
   9.  Cards & feature blocks
   10. Stats & quotes
   11. The Attention/Business/Test model components
   12. Forms (prisförslags-formulär)
   13. Utilities & accessibility
   14. Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   These CSS variables hold every brand value in one place. Change a colour
   here and it updates everywhere on the site. Values come straight from the
   brand guide in the project brief.
   ========================================================================== */
:root {

    /* --- Brand colours --- */
    --color-ink:        #0F0F10; /* Ink - headings, bold statement backgrounds */
    --color-ink-80:     #3A3A3C; /* Ink 80 - body text */
    --color-electric:   #1E5BFF; /* Electric - accent ONLY: links, CTAs, the "/" */
    --color-paper:      #F2F0EA; /* Paper - default warm surface (never pure white) */
    --color-paper-2:    #E8E5DC; /* Paper 2 - alternate surface for banding */

    /* --- Signal colours --- ONLY for data visualisation, never decoration --- */
    --color-win:        #2BD46B; /* Win  - passing/winning test variant */
    --color-lose:       #FF4D2E; /* Lose - failing test variant */

    /* --- Derived / utility colours --- */
    --color-line:       rgba(15, 15, 16, 0.14);  /* 1px border separators on Paper */
    --color-line-dark:  rgba(242, 240, 234, 0.18); /* 1px borders on Ink sections */
    --color-paper-70:   rgba(242, 240, 234, 0.72); /* muted text on Ink backgrounds */

    /* --- Typography --- */
    --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

    /* --- Spacing scale (used for consistent rhythm) --- */
    --space-xs:  0.5rem;   /*  8px */
    --space-sm:  1rem;     /* 16px */
    --space-md:  1.5rem;   /* 24px */
    --space-lg:  2.5rem;   /* 40px */
    --space-xl:  4rem;     /* 64px */
    --space-2xl: 6rem;     /* 96px */

    /* --- Layout --- */
    --container-max: 1180px; /* max content width */
    --radius: 4px;           /* subtle corner radius - premium, not rounded */
}


/* ==========================================================================
   2. RESET & BASE ELEMENTS
   A light reset so the theme looks the same across browsers.
   ========================================================================== */

/* Make box sizing predictable: padding/border included in element width. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins; we set spacing intentionally. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
}

html {
    /* Smooth scrolling for in-page anchor links (e.g. CTA jumps to form). */
    scroll-behavior: smooth;
    /* Account for the sticky header height when jumping to anchors. */
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--color-paper); /* Paper is the default surface */
    color: var(--color-ink-80);           /* Body text in Ink 80 */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;                 /* ~17px base for comfortable reading */
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;               /* sticky footer support */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Long Swedish compound words (e.g. "Halvmarknadsföringstestet") can be
       wider than a narrow phone screen. This lets them break cleanly instead
       of overflowing the layout at small widths like 375px. */
    overflow-wrap: break-word;
}

/* Apply the same safety to large headings, which are the most likely to hold
   a single very long word that could push past the screen edge on mobile. */
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

/* The main content area grows to push the footer down on short pages. */
.site-main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   3. TYPOGRAPHY
   Montserrat for headings (700/800), Lato for body (300/400/500).
   Sizes use clamp() so they scale smoothly between mobile and desktop.
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-ink);
    line-height: 1.1;
    letter-spacing: -0.02em;  /* tight kerning for an editorial look */
    font-weight: 800;
    /* Orphan control: 'balance' spreads a heading evenly across its lines so
       you never get a single stranded word on the last line. Works at every
       viewport width (desktop and mobile) and re-balances on resize. */
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem); /* 36px → 60px */
    font-weight: 800;
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);  /* 28px → 40px */
    font-weight: 800;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);    /* 20px → 24px */
    font-weight: 700;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1.125rem;                        /* 18px */
    font-weight: 700;
}

p {
    max-width: 68ch; /* keep line length readable */
    /* Orphan control for body copy: 'pretty' tells the browser to avoid
       leaving a single short word alone on the final line of a paragraph. */
    text-wrap: pretty;
}

/* Lead paragraph - used under headings for emphasis. */
.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    line-height: 1.55;
    color: var(--color-ink-80);
    font-weight: 400;
    text-wrap: pretty;
}

/* Small eyebrow label above headings (e.g. "METODEN"). */
.eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-electric); /* Electric used as a precise accent */
    display: inline-block;
    margin-bottom: var(--space-sm);
}


/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */

/* Centres content and adds responsive side gutters. */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md); /* 24px gutter on mobile */
}

/* Vertical rhythm for full-width page sections. */
.section {
    padding-block: var(--space-2xl);
}

.section--tight {
    padding-block: var(--space-xl);
}

/* A section painted in Ink - for bold statements and hero blocks. */
.section--ink {
    background-color: var(--color-ink);
    color: var(--color-paper-70);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
    color: var(--color-paper); /* headings flip to Paper on Ink */
}
/* Lead paragraphs on Ink use the same light print as the hero, instead of the
   dark .lead body colour which is only meant for Paper backgrounds. */
.section--ink .lead {
    color: var(--color-paper-70);
}

/* Alternate Paper banding to separate sections without hard lines. */
.section--alt {
    background-color: var(--color-paper-2);
}

/* Simple responsive grid utility. Columns collapse on mobile (see breakpoints). */
.grid {
    display: grid;
    gap: var(--space-md);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Section heading block with an eyebrow + intro, capped width and centred option. */
.section-head {
    max-width: 46rem;
    margin-bottom: var(--space-xl);
}
.section-head--center {
    margin-inline: auto;
    text-align: center;
}
.section-head p {
    margin-top: var(--space-md);
}


/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

/* In-content links use Electric (a brand-approved use of the accent).
   IMPORTANT: we exclude .btn here with :not(.btn). Without this, the link
   colour above would out-rank the button's own text colour (a CSS specificity
   quirk) and the primary CTA would show Electric text on its Electric
   background - invisible until hover. Buttons keep their own colours. */
.site-content a:not(.btn) {
    color: var(--color-electric);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.site-content a:not(.btn):hover {
    text-decoration: none;
}

/* Base button: shared sizing for every variant. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 1rem 1.6rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    text-decoration: none;          /* override the content-link underline */
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
    transform: translateY(-2px); /* subtle micro-interaction on hover */
}
.btn:focus-visible {
    outline: 3px solid var(--color-electric);
    outline-offset: 3px;
}

/* Primary CTA - Electric. This is the hard-conversion button.
   The label colour is set on both the normal and hover states so it is
   always visible, never dependent on hovering. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
    background-color: var(--color-electric);
    color: #ffffff;
}
.btn--primary:hover,
.btn--primary:focus {
    background-color: #1747cc; /* slightly darker Electric on hover */
    color: #ffffff;            /* keep the label white on hover too */
}

/* Secondary CTA on Paper - outlined Ink. */
.btn--ghost {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-ink);
}
.btn--ghost:hover {
    background-color: var(--color-ink);
    color: var(--color-paper);
}

/* Secondary CTA on Ink backgrounds - outlined Paper. */
.btn--ghost-light {
    background-color: transparent;
    color: var(--color-paper);
    border-color: var(--color-paper-70);
}
.btn--ghost-light:hover {
    background-color: var(--color-paper);
    color: var(--color-ink);
}

/* Group of buttons sitting side by side. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-lg);
}


/* ==========================================================================
   6. HEADER / NAVIGATION
   Sticky top bar on Paper with a 1px separator line.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 72px;
}

/* The logotype. The logo artwork is near-square, so we size it by HEIGHT and
   let the width follow automatically (width:auto) to avoid any distortion. */
.site-logo img {
    height: 48px;       /* larger, more present in the header */
    width: auto;        /* keep the natural aspect ratio - never stretch */
    display: block;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Primary navigation list. */
.primary-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
}
.primary-nav a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
    color: var(--color-electric); /* active/hover state uses the accent */
}

/* The header CTA button is a little smaller than in-page CTAs. */
.site-header .btn {
    padding: 0.7rem 1.1rem;
    font-size: 0.9375rem;
}

/* Mobile menu toggle button - hidden on desktop, shown on mobile. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin-inline: auto;
    background-color: var(--color-ink);
}


/* ==========================================================================
   7. FOOTER
   Ink surface with Paper logo and navigation.
   ========================================================================== */

.site-footer {
    background-color: var(--color-ink);
    color: var(--color-paper-70);
    padding-block: var(--space-xl);
    flex-shrink: 0;
}
.site-footer a {
    color: var(--color-paper);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--color-electric);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}
.site-footer__logo img {
    height: 44px;       /* matches the header's larger presence */
    width: auto;        /* THE FIX: without this the image stretched to the
                           width attribute and looked squished/broken */
    display: block;
    margin-bottom: var(--space-md);
}
.site-footer h4 {
    color: var(--color-paper);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.site-footer__bottom {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line-dark);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.875rem;
}


/* ==========================================================================
   8. HERO SECTIONS
   The home hero is painted Ink for maximum first-impression impact
   (the "Halo effect" - the first 50ms shape trust).
   ========================================================================== */

.hero {
    padding-block: var(--space-2xl);
}
/* The hero content now spans the full page container width (same as every
   other section) so it no longer looks boxed-in or narrower than the rest of
   the site. Individual elements below keep their own readable max-widths. */
.hero__inner {
    width: 100%;
}
.hero h1 {
    margin-bottom: var(--space-md);
    /* no width cap — the headline fills the full container so it uses the width */
}
.hero .lead {
    margin-bottom: var(--space-lg);
    color: var(--color-paper-70);
    max-width: 46ch; /* readable line length, a touch wider to match the broader hero */
}

/* Client trust bar inside the Ink hero — muted, uppercase wordmarks that read
   like a "trusted by" strip without needing logo image files. */
.hero-trust {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-line-dark); /* subtle divider from the CTAs */
}

/* The viewport clips whatever overflows sideways. */
.hero-trust__viewport {
    width: 100%;
    overflow: hidden;
}

/* --- STATIC (default, and what reduced-motion users always see) ---
   A centered row of names that wraps onto multiple lines on narrow screens
   so every name stays visible. No movement. --- */
.hero-trust__track {
    display: block;
}
.hero-trust__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;     /* CENTER the client names */
    /* Row-gap only (for when it wraps when static); horizontal spacing comes
       entirely from the "|" margins so it stays even across the loop seam. */
    gap: 0.3rem 0;
}
.hero-trust__list[aria-hidden="true"] {
    display: none;               /* hide the duplicate while static */
}
.hero-trust__list li {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-paper);
    opacity: 0.8;                /* recessed so the names support the headline */
    white-space: nowrap;         /* never break a name mid-word */
}
/* "|" separator after each name, like the LinkedIn banner. */
.hero-trust__list li::after {
    content: "|";
    margin: 0 var(--space-sm);
    color: var(--color-paper-70);
    font-weight: 400;
    opacity: 0.7;
}
/* No trailing pipe after the last name in the static, centered row. */
.hero-trust__track .hero-trust__list:first-child li:last-child::after {
    content: none;
}

/* --- MOTION OK: gentle, seamless side-scroll (marquee) --- */
@media (prefers-reduced-motion: no-preference) {
    .hero-trust__track {
        display: flex;
        width: max-content;          /* both copies sit in one long row */
        flex-wrap: nowrap;
        animation: hero-trust-marquee 32s linear infinite;
    }
    /* Pause on hover so anyone can stop and read the names. */
    .hero-trust__track:hover {
        animation-play-state: paused;
    }
    .hero-trust__list {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .hero-trust__list[aria-hidden="true"] {
        display: flex;               /* show the duplicate for a seamless loop */
    }
    /* Restore the trailing pipe so the join reads "...Jernhusen | SEB..." */
    .hero-trust__track .hero-trust__list:first-child li:last-child::after {
        content: "|";
    }
    /* Soft fade at both edges so names slide in and out gracefully. */
    .hero-trust__viewport {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }
}

/* Scroll exactly one copy's width. With three identical copies in the track,
   one copy is 1/3 (33.3333%) of the total, so when the animation resets the
   next copy already sits exactly where the first was — a seamless loop with
   no gap, regardless of how wide the hero is. */
@keyframes hero-trust-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.3333%); }
}

/* Page hero for interior pages (Method, Resources, Contact). */
.page-hero {
    padding-block: var(--space-xl);
    border-bottom: 1px solid var(--color-line-dark);
}
.page-hero .lead {
    margin-top: var(--space-md);
    max-width: 46ch;
}

/* About page hero: founder text beside Tony's portrait. The portrait's dark
   studio background blends into the Ink section. */
.about-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
    align-items: center;
}
.about-hero__portrait img,
.about-hero__placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;          /* stable portrait box regardless of the file */
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--color-line-dark);
    display: block;
}
/* Placeholder shown until the photo file is added to /assets/. */
.about-hero__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-md);
    background: rgba(242, 240, 234, 0.06);
    color: var(--color-paper-70);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* Stack on tablet and below; cap the portrait so it doesn't dominate. */
@media (max-width: 860px) {
    .about-hero {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .about-hero__portrait {
        max-width: 320px;
    }
}


/* ==========================================================================
   9. CARDS & FEATURE BLOCKS
   Grid-based layouts with 1px border separators between cards.
   ========================================================================== */

.card {
    background-color: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-lg);
}
.card h3 {
    margin-bottom: var(--space-sm);
}
.card p {
    margin-bottom: 0;
}

/* A card with a leading number/marker (e.g. model steps). */
.card__marker {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--color-electric);
    display: block;
    margin-bottom: var(--space-sm);
}


/* ==========================================================================
   10. STATS & QUOTES
   Key statistics from the brief, shown as large editorial numbers.
   ========================================================================== */

.stat {
    border-top: 2px solid var(--color-electric); /* accent line above each stat */
    padding-top: var(--space-md);
}
.stat__figure {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
    color: var(--color-ink);
    letter-spacing: -0.03em;
}
.section--ink .stat__figure {
    color: var(--color-paper);
}
.stat__label {
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Pull-quote / case result block. */
.pullquote {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    max-width: 22ch;
    text-wrap: balance;
}
.section--ink .pullquote {
    color: var(--color-paper);
}
.pullquote__cite {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--color-ink-80);
}
.section--ink .pullquote__cite {
    color: var(--color-paper-70);
}


/* ==========================================================================
   11. THE ATTENTION / BUSINESS / TEST MODEL
   Three labelled components shown as a connected set.
   ========================================================================== */

.model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;                       /* no gap so 1px borders read as separators */
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.model-cell {
    padding: var(--space-lg);
    border-right: 1px solid var(--color-line);
}
.model-cell:last-child {
    border-right: none;
}
.model-cell__tag {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-electric);
    margin-bottom: var(--space-sm);
    display: block;
}
.model-cell h3 {
    margin-bottom: var(--space-xs);
}
.model-cell__meta {
    font-size: 0.875rem;
    color: var(--color-ink-80);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

/* On Ink, the model cells use the light border colour. */
.section--ink .model-grid { border-color: var(--color-line-dark); }
.section--ink .model-cell  { border-color: var(--color-line-dark); }
.section--ink .model-cell__meta { color: var(--color-paper-70); }


/* ==========================================================================
   12. FORMS (PRISFÖRSLAGS-FORMULÄR)
   The primary hard-conversion form.
   ========================================================================== */

.form-card {
    background-color: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-lg);
}

/* "A real person reads this" — small round portrait + line above the form. */
.form-host {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-line);
}
.form-host__avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%; /* bias the crop toward the face */
    border: 1px solid var(--color-line);
}
.form-host__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-ink-80);
}

.form-field {
    margin-bottom: var(--space-md);
}
.form-field label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-ink);
    margin-bottom: var(--space-xs);
}
/* The small red asterisk marking required fields. */
.form-field .required {
    color: var(--color-lose);
    margin-left: 2px;
}

/* Shared styling for text inputs, selects and textareas. */
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-ink);
    background-color: #ffffff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 0.8rem 0.9rem;
}
.form-field textarea {
    min-height: 130px;
    resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-electric);
    box-shadow: 0 0 0 3px rgba(30, 91, 255, 0.18);
}

/* Micro-interaction: when a required text/email field becomes valid, show a
   small green checkmark (the Win signal). A subtle "you got it right" cue -
   one of the Peak-End micro-moments. Selects are left alone so the checkmark
   never collides with the browser's native dropdown arrow. */
.form-field input[type="text"]:required:valid,
.form-field input[type="email"]:required:valid {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232BD46B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 18px 18px;
    padding-right: 2.6rem;
}

/* Success message shown after the form submits. */
.form-success {
    background-color: var(--color-paper-2);
    border-left: 3px solid var(--color-win); /* Win signal - a passing action */
    padding: var(--space-md);
    border-radius: var(--radius);
}

/* A small "kommer snart" (coming soon) state for the placeholder quiz. */
.coming-soon {
    border: 1px dashed var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-lg);
    background-color: var(--color-paper-2);
}
.coming-soon__badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-80);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    margin-bottom: var(--space-md);
}


/* ==========================================================================
   13. UTILITIES & ACCESSIBILITY
   ========================================================================== */

/* Visually hidden but available to screen readers (e.g. skip link, labels). */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip-to-content link appears on keyboard focus for accessibility (WCAG). */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 200;
    background: var(--color-ink);
    color: var(--color-paper);
    padding: 0.75rem 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    left: var(--space-md);
    top: var(--space-md);
}

/* Wrapper for an embedded quiz (Thrive Quiz Builder etc.). The quiz controls
   its own internal layout; this just gives it the full container width. */
.quiz-slot {
    width: 100%;
}

.text-center { text-align: center; }

/* Highlights a word in Electric (used for key words in the hero headline,
   matching the LinkedIn banner). The span keeps its own colour even inside an
   Ink heading, where the heading text is otherwise Paper. */
.text-electric { color: var(--color-electric); }
.mt-lg { margin-top: var(--space-lg); }


/* ==========================================================================
   14. MICRO-INTERACTIONS - scroll reveal
   Elements fade and rise gently into place the first time they enter the
   viewport. JavaScript (interactions.js) adds the .js class to <html> and the
   .is-visible class as elements appear.

   Key safeguards:
   - The hidden starting state lives INSIDE prefers-reduced-motion: no-preference,
     so visitors who prefer reduced motion never see any movement - content is
     simply visible.
   - The rules are also gated on html.js, so if JavaScript fails to load,
     nothing is ever hidden. The site degrades gracefully.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* Starting (hidden) state - applied only when JS is active. */
    html.js .section-head,
    html.js .stat,
    html.js .card,
    html.js .model-cell,
    html.js .pullquote,
    html.js .form-card,
    html.js .coming-soon {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        /* Slightly stagger children inside a grid for a softer cascade. */
        will-change: opacity, transform;
    }

    /* Revealed state - added by the IntersectionObserver in interactions.js. */
    html.js .section-head.is-visible,
    html.js .stat.is-visible,
    html.js .card.is-visible,
    html.js .model-cell.is-visible,
    html.js .pullquote.is-visible,
    html.js .form-card.is-visible,
    html.js .coming-soon.is-visible {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   Mobile-first: base styles target mobile, these adjust upward/downward.
   ========================================================================== */

/* --- Tablet and below: collapse multi-column grids --- */
@media (max-width: 860px) {

    .grid--2,
    .grid--3,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    /* Stack the model into a single column with bottom borders. */
    .model-grid {
        grid-template-columns: 1fr;
    }
    .model-cell {
        border-right: none;
        border-bottom: 1px solid var(--color-line);
    }
    .model-cell:last-child {
        border-bottom: none;
    }
    .section--ink .model-cell {
        border-bottom: 1px solid var(--color-line-dark);
    }

    /* Show the hamburger toggle; hide the inline nav until opened. */
    .nav-toggle {
        display: flex;
        order: 3; /* push the toggle to the far right on mobile */
    }

    /* Hide the header CTA on mobile to keep the bar uncluttered - the same
       CTA still appears inside every page's content. */
    .site-header .btn {
        display: none;
    }

    /* On mobile the open menu drops below the whole header bar. */
    .primary-nav {
        order: 4;
    }
    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-paper);
        border-bottom: 1px solid var(--color-line);
        display: none;          /* hidden by default on mobile */
        padding: var(--space-md);
    }
    /* When JS adds .is-open, reveal the menu as a vertical stack. */
    .primary-nav.is-open {
        display: block;
    }
    .primary-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
}

/* --- Small phones: tighten section spacing --- */
@media (max-width: 520px) {
    .section {
        padding-block: var(--space-xl);
    }

    /* On narrow phones, drop the manual line break before "Test" so the
       heading can wrap naturally to the available width instead. */
    .break-before-test {
        display: none;
    }
    .btn {
        width: 100%;
        justify-content: center;
    }
    .btn-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Respect users who prefer reduced motion (accessibility) --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .btn:hover {
        transform: none;
    }
}


/* ==========================================================================
   16. EMBEDDED QUIZ INSULATION (Thrive Quiz Builder)
   The quiz renders inside .quiz-slot > .tqb-shortcode-wrapper and inherits the
   theme's fonts. Our global heading/paragraph rules (tight letter-spacing,
   text-wrap: balance/pretty, max-width) bled in and made the quiz text look
   off. Here we neutralise just those properties inside the quiz so it keeps the
   brand fonts (Montserrat/Lato) but uses its own spacing, wrapping and width.
   Scoped to the TQB wrapper, so the rest of the site is unaffected.
   ========================================================================== */
.tqb-shortcode-wrapper :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: normal;   /* undo the theme's tight -0.02em on big headings */
    text-wrap: wrap;          /* undo text-wrap: balance */
    text-transform: none;
}
.tqb-shortcode-wrapper p {
    max-width: none;          /* undo the 68ch reading-width cap */
    text-wrap: wrap;          /* undo text-wrap: pretty */
}


/* ==========================================================================
   17. COOKIE CONSENT BANNER (Complianz) — branded to Ink / Paper / Electric.
   Complianz colours come from CSS custom properties it defines on :root. We
   redefine them on the banner container instead. Custom properties inherit
   down the DOM, so a value set on a closer ancestor wins over the plugin's
   :root defaults regardless of stylesheet load order. Bulletproof + scoped.
   ========================================================================== */
.cmplz-cookiebanner-container,
#cmplz-manage-consent {
    --cmplz_banner_background_color: #0F0F10;              /* Ink surface */
    --cmplz_banner_border_color: rgba(242, 240, 234, 0.18);
    --cmplz_banner_border_width: 1px 1px 1px 1px;
    --cmplz_banner_border_radius: 8px 8px 8px 8px;
    --cmplz_text_color: #F2F0EA;                            /* Paper text */
    --cmplz_hyperlink_color: #1E5BFF;                       /* Electric links */
    --cmplz_button_accept_background_color: #1E5BFF;        /* Electric = primary action */
    --cmplz_button_accept_border_color: #1E5BFF;
    --cmplz_button_accept_text_color: #ffffff;
    --cmplz_button_deny_background_color: #F2F0EA;          /* solid: equally prominent as Accept (GDPR) */
    --cmplz_button_deny_border_color: #F2F0EA;
    --cmplz_button_deny_text_color: #0F0F10;
    --cmplz_button_settings_background_color: transparent;
    --cmplz_button_settings_border_color: rgba(242, 240, 234, 0.25);
    --cmplz_button_settings_text_color: #F2F0EA;
    --cmplz_button_border_radius: 4px 4px 4px 4px;          /* matches the theme's .btn */
    --cmplz_slider_active_color: #1E5BFF;
}
/* Brand fonts inside the banner. */
.cmplz-cookiebanner { font-family: var(--font-body); }
.cmplz-cookiebanner .cmplz-title { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
.cmplz-cookiebanner .cmplz-btn { font-family: var(--font-heading); font-weight: 700; }