/*
 * ════════════════════════════════════════════════════════════════════════════
 * D2 DESIGN TOKENS  —  Lag 1 (Distribuerbart, centralt)
 * ════════════════════════════════════════════════════════════════════════════
 *
 * Fil:        digital2-childtheme/css/d2-tokens.css
 * Enqueues:   via functions.php i digital2-childtheme (priority 1, global)
 * Version:    1.1.1
 * Maintainer: Digital2 ApS
 *
 * FORMÅL:
 *   Én kilde til sandhed for alle CSS-variabler, knapper, hero og
 *   section-mønstre på tværs af alle Digital2 WordPress-projekter.
 *
 * ARKITEKTUR:
 *   Dette er Lag 1. Alle plugins og feature-filer bruger disse tokens
 *   og base-klasser — de definerer aldrig egne farver, fonts eller
 *   radius-værdier med hardkodede værdier.
 *
 * BRUG I PLUGINS:
 *   Erstat altid hardkodede værdier med tokens:
 *     ✅  color: var(--d2-orange);
 *     ❌  color: #fc8902;
 *
 * PLUGIN-NAVNERUM (Lag 2):
 *   .d2pt-  →  d2-product-table
 *   .d2sf-  →  d2-shop-front (del af d2-product-table)
 *   .d2ci-  →  d2-category-index (del af d2-product-table)
 *   .d2pl-  →  digital2-pricelists
 *   .d2f-   →  d2-forms
 *   .d2q-   →  d2-quote-engine
 *   .d2pi-  →  d2-post-index
 *
 * VERSIONHISTORIK:
 *   1.1.1 (2026-05-03) — Fix: .d2-hero-split mistede `margin-right` igen.
 *                        v1.1.0 introducerede `margin-right: calc(50% - 50vw)`
 *                        som sammen med `margin-left` gav dobbelt-fullbleed.
 *                        Plugins der overrider fullbleed (fx d2-product-table
 *                        v3.0.5 shop-front med `margin-left: 0`) ramte kun
 *                        `margin-left` — `margin-right`'s outdent forskød boxen
 *                        til højre. `margin-left` alene + `width: 100vw` er
 *                        nok til fullbleed; `margin-right` fjernes fra base.
 *                        Plugins der vil have ekstra sikkerhed kan tilføje den
 *                        i deres egen kopi.
 *
 *   1.1.0 (2026-05-03) — Hero-mønster opdateret iht. reference-implementation
 *                        i digital2-pricelists v0.5.11:
 *                        • Sort baggrund flyttet fra .d2-hero-split (outer/
 *                          fullbleed) til .d2-hero-split__inner (boxed kort
 *                          med radius). Forhindrer at hero "lækker" til kanten
 *                          af viewport på fullbleed feature-sider.
 *                        • Outer får eksplicit padding (60px/40px/32px)
 *                          så fullbleed-sider får navbar-breath uden at
 *                          afhænge af parent-section-padding.
 *                        • __lead font-size 16px → 18px (DS body-standard).
 *                        • __lead line-height 1.65 → 1.55.
 *                        • __eyebrow font-size 12px → 13px.
 *                        • __heading line-height 1.15 → 1.12.
 *                        • Mobile breakpoints justeret til pricelist-spec.
 *                        Eksisterende plugin-overrides (fx d2-product-table
 *                        v3.0.5's .d2pt-sf-hero med eget background, padding,
 *                        border-radius) er sikre — deres specificity (0,2,0)
 *                        slår base (0,1,0).
 *
 *   1.0.0 (2026-04-30) — Initial release.
 *
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ── 1. CSS-VARIABLER (design tokens) ──────────────────────────────────── */

:root {

    /* Brand — farver */
    --d2-orange:            #fc8902;
    --d2-orange-hover:      #e57a00;
    --d2-orange-tint:       rgba(252, 137, 2, 0.12);
    --d2-orange-soft:       rgba(252, 137, 2, 0.06);
    --d2-red-link:          #990000;

    /* Ink — tekst-skala */
    --d2-ink-strong:        #1a1a1a;
    --d2-ink:               #222222;
    --d2-ink-body:          #292929;
    --d2-ink-muted:         #444444;
    --d2-ink-faint:         #666666;

    /* Surfaces */
    --d2-surface:           #ffffff;
    --d2-surface-alt:       #f7f7f7;
    --d2-line:              #e8e8e8;
    --d2-line-strong:       #d8d8d8;

    /* Typografi */
    --d2-font-display:      'Montserrat', Arial, Helvetica, sans-serif;
    --d2-font-body:         Arial, Helvetica, sans-serif;

    /* Radius */
    --d2-radius-sm:         4px;
    --d2-radius-md:         6px;
    --d2-radius-lg:         12px;
    --d2-radius-xl:         16px;

    /* Motion */
    --d2-ease:              cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ── 2. KNAP-SYSTEM (.d2-btn) ───────────────────────────────────────────── */
/*
 * HTML-mønster:
 *   <a href="..." class="d2-btn d2-btn--primary">Primær</a>
 *   <a href="..." class="d2-btn d2-btn--ghost">På mørk baggrund</a>
 *   <a href="..." class="d2-btn d2-btn--ghost-dark">På lys baggrund</a>
 */

.d2-btn {
    display:          inline-block;
    padding:          14px 28px;
    border-radius:    var(--d2-radius-md);
    font-family:      var(--d2-font-display);
    font-size:        15px;
    font-weight:      700;
    letter-spacing:   0.01em;
    line-height:      1;
    text-decoration:  none;
    cursor:           pointer;
    border:           2px solid transparent;
    transition:       background 0.2s var(--d2-ease),
                      color      0.2s var(--d2-ease),
                      border-color 0.2s var(--d2-ease);
}

/* Primær — orange fyld, hvid tekst */
.d2-btn--primary {
    background:   var(--d2-orange);
    color:        #fff;
    border-color: var(--d2-orange);
}

.d2-btn--primary:hover,
.d2-btn--primary:focus {
    background:   var(--d2-orange-hover);
    border-color: var(--d2-orange-hover);
    color:        #fff;
    text-decoration: none;
}

/* Ghost — hvid border, hvid tekst — til mørk baggrund */
.d2-btn--ghost {
    background:   transparent;
    color:        #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.d2-btn--ghost:hover,
.d2-btn--ghost:focus {
    background:   rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color:        #fff;
    text-decoration: none;
}

/* Ghost-dark — grå border, mørk tekst — til lys baggrund */
.d2-btn--ghost-dark {
    background:   transparent;
    color:        var(--d2-ink-body);
    border-color: var(--d2-line-strong);
}

.d2-btn--ghost-dark:hover,
.d2-btn--ghost-dark:focus {
    border-color: var(--d2-orange);
    color:        var(--d2-orange);
    text-decoration: none;
}


/* ── 3. HERO-MØNSTER (.d2-hero-split) ──────────────────────────────────── */
/*
 * HTML-mønster:
 *   <section class="d2-hero-split">
 *     <div class="d2-hero-split__inner">
 *       <div class="d2-hero-split__content">
 *         <p class="d2-hero-split__eyebrow">EYEBROW · KONTEKST</p>
 *         <h1 class="d2-hero-split__heading">Titel med <em>accent</em></h1>
 *         <p class="d2-hero-split__lead">Lead-tekst.</p>
 *         <div class="d2-hero-split__ctas">
 *           <a class="d2-btn d2-btn--primary">Primær</a>
 *           <a class="d2-btn d2-btn--ghost">Sekundær</a>
 *         </div>
 *       </div>
 *       <div class="d2-hero-split__visual">
 *         <!-- billede, stat-blokke, illustration -->
 *       </div>
 *     </div>
 *   </section>
 *
 * STRUKTUR:
 *   - .d2-hero-split (outer):  fullbleed bredde, padding for navbar-breath,
 *                              ingen baggrund (transparent).
 *   - .d2-hero-split__inner:   boxed (max 1200px), sort baggrund + radius,
 *                              grid-layout med content + visual.
 *
 *   Plugins der vil have anden outer-opførsel (fx boxed shop-template med
 *   eget max-width-container) overrider .d2-hero-split via egen modifier-
 *   klasse — fx .d2pt-sf-hero.d2-hero-split { padding: 0; ... }.
 */

.d2-hero-split {
    width:         100vw;
    margin-left:   calc(50% - 50vw);
    padding:       60px 24px 20px;
    box-sizing:    border-box;
    color:         #fff;
}

.d2-hero-split__inner {
    max-width:     1200px;
    margin:        0 auto;
    padding:       48px 60px;
    background:    var(--d2-ink-strong);
    border-radius: var(--d2-radius-xl);
    overflow:      hidden;
    display:       grid;
    grid-template-columns: 1.15fr 1fr;
    gap:           50px;
    align-items:   center;
    box-sizing:    border-box;
}

.d2-hero-split__content {
    color:     #fff;
    min-width: 0;
}

.d2-hero-split__eyebrow {
    font-family:    var(--d2-font-display);
    font-size:      13px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color:          var(--d2-orange);
    margin:         0 0 16px;
}

.d2-hero-split__heading {
    font-family:    var(--d2-font-display);
    font-size:      44px;
    font-weight:    800;
    line-height:    1.12;
    letter-spacing: -0.015em;
    color:          #fff;
    margin:         0 0 20px;
    padding:        0;
}

.d2-hero-split__heading em {
    font-style:  italic;
    font-weight: 800;
    color:       var(--d2-orange);
}

.d2-hero-split__lead {
    font-family: var(--d2-font-body);
    font-size:   18px;
    line-height: 1.55;
    color:       rgba(255, 255, 255, 0.78);
    max-width:   560px;
    margin:      0 0 28px;
}

.d2-hero-split__ctas {
    display:   flex;
    gap:       14px;
    flex-wrap: wrap;
}

.d2-hero-split__visual {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      220px;
    min-width:       0;
}

/* Mobil: < 980px — enkelt kolonne, visual øverst */
@media (max-width: 980px) {
    .d2-hero-split {
        padding: 40px 20px 16px;
    }

    .d2-hero-split__inner {
        grid-template-columns: 1fr;
        padding: 40px 32px;
    }

    .d2-hero-split__heading {
        font-size: 34px;
    }

    .d2-hero-split__visual {
        order: -1;
    }
}

/* Smal mobil: < 720px */
@media (max-width: 720px) {
    .d2-hero-split {
        padding: 32px 16px 12px;
    }

    .d2-hero-split__inner {
        padding:       32px 24px;
        border-radius: var(--d2-radius-lg);
    }

    .d2-hero-split__heading {
        font-size: 28px;
    }
}


/* ── 4. SECTION-CONTAINERE (.d2-section) ───────────────────────────────── */
/*
 * HTML-mønster:
 *   <section class="d2-section">
 *     <div class="d2-section__inner">...</div>
 *   </section>
 *
 *   <section class="d2-section d2-section--alt">   ← grå baggrund
 *   <section class="d2-section d2-section--wide">  ← bredere inner
 */

.d2-section {
    padding:    56px 24px;
    background: var(--d2-surface);
}

.d2-section--alt {
    background: var(--d2-surface-alt);
}

.d2-section__inner {
    max-width: 780px;
    margin:    0 auto;
}

.d2-section--wide .d2-section__inner {
    max-width: 1080px;
}


/* ── 5. KORT (.d2-card) ─────────────────────────────────────────────────── */
/*
 * Generisk kortkomponent — bruges som base for plugin-specifikke kort.
 * Plugins kan arve og extende med eget præfiks.
 */

.d2-card {
    background:    var(--d2-surface);
    border:        1px solid var(--d2-line);
    border-radius: var(--d2-radius-lg);
    padding:       24px;
    transition:    box-shadow 0.2s var(--d2-ease),
                   border-color 0.2s var(--d2-ease),
                   transform 0.2s var(--d2-ease);
}

.d2-card:hover {
    border-color: var(--d2-orange-tint);
    box-shadow:   0 4px 20px rgba(0, 0, 0, 0.08);
    transform:    translateY(-2px);
}