/* ============================================================================
   WeQonnect merkfundament  ·  wq-brand.css
   ----------------------------------------------------------------------------
   Eén tokenlaag voor de hele merkfamilie:

     weqonnect.nl      hoofdmerk          dichtheid: comfortable
     wifimeting.nu     label              dichtheid: comfortable
     itprijzen.nl      label              dichtheid: comfortable + compact (tool)

   Toon: zakelijk maar toegankelijk voor het Nederlandse MKB.
   Nuchter, rustig, geen opsmuk. Koraal doet het werk, grijs houdt de rust.

   Alle klassen en variabelen zijn geprefixt met `wq-` / `--wq-`, zodat dit
   bestand naast bestaande site-CSS kan staan zonder botsingen. Migreren kan
   dus pagina voor pagina.

   Laadvolgorde:
     1. wq-brand.css        (dit bestand: tokens, reset, typografie, layout)
     2. wq-components.css   (knoppen, kaarten, nav, footer, formulieren)
     3. <site>/css/…        (alleen wat écht site-eigen is)

   Versie 1.0 · 2026-11-13
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {

    /* ── Merkkleur ─────────────────────────────────────────────────────────
       Koraal is het enige merksignaal. Gebruik het voor CTA's, accenten en
       actieve staten — nooit voor hele vlakken of voor lange tekst.         */

    --wq-coral:          #FE564A;
    --wq-coral-dark:     #C93E1E;   /* hover / actief                        */
    --wq-coral-light:    #FF8678;   /* koraal op donkere vlakken             */
    --wq-coral-08:       rgba(254, 86, 74, 0.08);
    --wq-coral-15:       rgba(254, 86, 74, 0.15);
    --wq-coral-25:       rgba(254, 86, 74, 0.25);

    --wq-amber:          #FFB333;   /* warm secundair accent, spaarzaam      */
    --wq-amber-12:       rgba(255, 179, 51, 0.12);

    /* ── Grijstinten ───────────────────────────────────────────────────────
       Slate draagt de koppen, ink de donkere vlakken. Dit is wat de sites
       hun zakelijke rust geeft.                                             */

    --wq-slate:          #54595F;   /* koppen, secundaire knoppen            */
    --wq-slate-light:    #6B7076;
    --wq-ink:            #33383D;   /* donkere secties                       */
    --wq-ink-dark:       #222222;   /* nav en footer                         */
    --wq-ink-hover:      #44484D;

    /* ── Tekst ─────────────────────────────────────────────────────────────  */

    --wq-text:           #333333;   /* bodytekst                             */
    --wq-text-muted:     #6B7076;   /* ondersteunend                         */
    --wq-text-faint:     #9A9EA3;   /* labels, placeholders                  */
    --wq-text-on-dark:   #F0F0F0;
    --wq-text-on-dark-m: rgba(240, 240, 240, 0.72);
    --wq-text-on-dark-f: rgba(240, 240, 240, 0.42);

    /* ── Vlakken en lijnen ─────────────────────────────────────────────────  */

    --wq-white:          #FFFFFF;
    --wq-bg:             #F4F4F4;   /* paginabodem                           */
    --wq-bg-soft:        #EDEDEC;
    --wq-surface:        #FFFFFF;   /* kaarten                               */
    --wq-surface-alt:    #FAFAFA;   /* velden, zebra                         */
    --wq-border:         #E3E4E6;
    --wq-border-light:   #F0F0F1;
    --wq-border-dark:    rgba(255, 255, 255, 0.08);  /* lijnen op donker     */
    --wq-row-hover:      #FAF6F5;

    /* ── Functionele kleuren ───────────────────────────────────────────────
       Alleen voor status, nooit decoratief.                                  */

    --wq-ok:             #1E7A3C;
    --wq-ok-bg:          #E9F7ED;
    --wq-ok-border:      #BFE6CA;
    --wq-warn:           #92400E;
    --wq-warn-bg:        #FFFBEB;
    --wq-warn-border:    #FDE68A;
    --wq-danger:         #DC2626;
    --wq-danger-bg:      #FEF2F2;
    --wq-danger-border:  #FECACA;
    --wq-info:           #0A5FB4;
    --wq-info-bg:        #EFF6FF;
    --wq-info-border:    #BFDBFE;
    --wq-link:           #0A5FB4;

    /* ── Typografie ────────────────────────────────────────────────────────
       Eén familie: Inter. DM Mono uitsluitend voor SKU's, prijzen en
       andere cijfers die uitgelijnd moeten staan.                           */

    --wq-font:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wq-font-mono:      'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Handschrift. Uitsluitend voor de naam van de collega in het CTA-blok:
       daar werkt het als een handtekening onder een persoonlijke uitnodiging.
       Nergens anders — niet in koppen, niet in lopende tekst, niet als
       sfeeraccent. Eén woord of twee, meer niet. */
    --wq-font-hand:      'Caveat', 'Segoe Script', cursive;

    /* Vloeiende schaal. De hero is bewust getemperd: groot genoeg om te
       dragen, klein genoeg om zakelijk te blijven.                          */
    --wq-fs-display:     clamp(34px, 4.8vw, 54px);
    --wq-fs-h1:          clamp(29px, 3.8vw, 42px);
    --wq-fs-h2:          clamp(24px, 2.9vw, 33px);
    --wq-fs-h3:          clamp(19px, 1.9vw, 22px);
    --wq-fs-h4:          17px;
    --wq-fs-lead:        18px;      /* introparagraaf onder een kop          */
    --wq-fs-body:        16px;
    --wq-fs-sm:          14px;
    --wq-fs-xs:          12.5px;
    --wq-fs-micro:       10.5px;    /* kickers, veldlabels                   */

    --wq-fw-regular:     400;
    --wq-fw-medium:      500;
    --wq-fw-semi:        600;
    --wq-fw-bold:        700;
    --wq-fw-heavy:       800;       /* zwaarste gewicht in de huisstijl      */

    --wq-lh-tight:       1.15;      /* display en koppen                     */
    --wq-lh-snug:        1.3;
    --wq-lh-body:        1.65;      /* leestekst                             */

    --wq-ls-display:     -1px;
    --wq-ls-heading:     -0.5px;
    --wq-ls-kicker:      1.6px;     /* uppercase micro                       */
    --wq-ls-button:      0.3px;

    /* ── Vorm ──────────────────────────────────────────────────────────────  */

    --wq-r-xs:           3px;
    --wq-r-sm:           4px;
    --wq-r:              6px;       /* standaard: knoppen, velden            */
    --wq-r-md:           8px;
    --wq-r-lg:           12px;      /* kaarten, panelen                      */
    --wq-r-pill:         999px;

    /* ── Diepte ────────────────────────────────────────────────────────────
       Neutrale schaduwen op basis van ink, niet van zwart. Koraalschaduw
       alleen onder primaire CTA's.                                          */

    --wq-shadow-sm:      0 2px 6px rgba(34, 34, 34, 0.06);
    --wq-shadow:         0 10px 24px rgba(34, 34, 34, 0.08);
    --wq-shadow-lg:      0 14px 34px rgba(34, 34, 34, 0.12);
    --wq-shadow-xl:      0 20px 48px rgba(34, 34, 34, 0.16);
    --wq-shadow-coral:   0 4px 14px rgba(254, 86, 74, 0.30);
    --wq-shadow-coral-h: 0 6px 20px rgba(254, 86, 74, 0.45);
    --wq-shadow-nav:     0 2px 20px rgba(0, 0, 0, 0.35);
    --wq-ring:           0 0 0 3px var(--wq-coral-25);  /* focus             */

    /* ── Ruimte (4px-raster) ───────────────────────────────────────────────  */

    --wq-sp-1:           4px;
    --wq-sp-2:           8px;
    --wq-sp-3:           12px;
    --wq-sp-4:           16px;
    --wq-sp-5:           20px;
    --wq-sp-6:           24px;
    --wq-sp-8:           32px;
    --wq-sp-10:          40px;
    --wq-sp-12:          48px;
    --wq-sp-16:          64px;
    --wq-sp-20:          80px;
    --wq-sp-24:          96px;

    /* ── Layout ────────────────────────────────────────────────────────────  */

    --wq-maxw:           1200px;
    --wq-maxw-narrow:    760px;     /* leeskolom: artikelen, formulieren     */
    --wq-gutter:         24px;
    --wq-nav-h:          64px;   /* strak, maar met lucht rond het logo */
    --wq-section-y:      80px;      /* verticale sectieruimte                */

    /* ── Beweging ──────────────────────────────────────────────────────────
       Kort en functioneel. Niets zweeft of stuitert.                        */

    --wq-t-fast:         0.15s ease;
    --wq-t:              0.25s ease;
    --wq-t-slow:         0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Stapelorde ────────────────────────────────────────────────────────  */

    --wq-z-nav:          400;
    --wq-z-dropdown:     450;
    --wq-z-overlay:      950;
    --wq-z-drawer:       1000;
    --wq-z-modal:        1100;
}


/* ── Dichtheid: compact ──────────────────────────────────────────────────────
   Voor gereedschap: de configurator en prijstabellen van ITPrijzen.nl.
   Zelfde kleuren, zelfde componenten — alleen strakker gezet en kleinere
   hoeken, zodat er meer regels in beeld passen. Zet `data-wq-density="compact"`
   op <html> of op een losse sectie.
   -------------------------------------------------------------------------- */

[data-wq-density="compact"] {
    --wq-fs-body:        14px;
    --wq-fs-lead:        15px;
    --wq-fs-sm:          13px;
    --wq-fs-xs:          11.5px;
    --wq-fs-h3:          17px;
    --wq-fs-h4:          15px;
    --wq-lh-body:        1.55;

    --wq-r:              4px;
    --wq-r-md:           6px;
    --wq-r-lg:           8px;

    --wq-nav-h:          64px;   /* gelijk aan comfortable; de sub-balk en de
                                    werkruimte van de configurator rekenen met
                                    dit token, dus die schuiven mee */
    --wq-section-y:      56px;
    --wq-gutter:         20px;
}


/* ============================================================================
   2. RESET
   ============================================================================ */

.wq *,
.wq *::before,
.wq *::after { box-sizing: border-box; }

html.wq-root {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body.wq {
    margin: 0;
    padding: 0;
    font-family: var(--wq-font);
    font-size: var(--wq-fs-body);
    font-weight: var(--wq-fw-regular);
    line-height: var(--wq-lh-body);
    color: var(--wq-text);
    background: var(--wq-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* De reset staat in :where(), zodat hij specificiteit 0 heeft en dus NOOIT
   een componentklasse overschrijft.

   Zonder :where() is `.wq a` (0,1,1) sterker dan `.wq-btn--primary` (0,1,0):
   elke knop, menulink en drawerlink die een <a> is, erfde dan de tekstkleur
   van de pagina in plaats van wit. Donkergrijs op koraal — onleesbaar.
   Hetzelfde gold voor `.wq button` bij knoppen die een <button> zijn.       */

:where(.wq img),
:where(.wq svg),
:where(.wq video) { display: block; max-width: 100%; height: auto; }

:where(.wq a) { color: inherit; text-decoration: none; }

:where(.wq button),
:where(.wq input),
:where(.wq select),
:where(.wq textarea) { font: inherit; color: inherit; }

/* Zichtbare focus, maar alleen bij toetsenbordnavigatie. */
.wq :focus-visible {
    outline: 2px solid var(--wq-coral);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html.wq-root { scroll-behavior: auto; }
    .wq *,
    .wq *::before,
    .wq *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================================
   3. TYPOGRAFIE
   ----------------------------------------------------------------------------
   Koppen staan in slate, niet in zwart — dat leest rustiger en laat koraal
   het enige felle element op de pagina zijn. Maximaal gewicht 800.
   ============================================================================ */

.wq-display,
.wq h1.wq-display {
    font-size: var(--wq-fs-display);
    font-weight: var(--wq-fw-heavy);
    line-height: var(--wq-lh-tight);
    letter-spacing: var(--wq-ls-display);
    color: var(--wq-ink);
    margin: 0 0 var(--wq-sp-5);
}

.wq-h1 {
    font-size: var(--wq-fs-h1);
    font-weight: var(--wq-fw-bold);
    line-height: var(--wq-lh-tight);
    letter-spacing: var(--wq-ls-heading);
    color: var(--wq-ink);
    margin: 0 0 var(--wq-sp-4);
}

.wq-h2 {
    font-size: var(--wq-fs-h2);
    font-weight: var(--wq-fw-bold);
    line-height: var(--wq-lh-snug);
    letter-spacing: var(--wq-ls-heading);
    color: var(--wq-slate);
    margin: 0 0 var(--wq-sp-4);
}

.wq-h3 {
    font-size: var(--wq-fs-h3);
    font-weight: var(--wq-fw-semi);
    line-height: var(--wq-lh-snug);
    letter-spacing: -0.2px;
    color: var(--wq-slate);
    margin: 0 0 var(--wq-sp-3);
}

.wq-h4 {
    font-size: var(--wq-fs-h4);
    font-weight: var(--wq-fw-semi);
    line-height: var(--wq-lh-snug);
    color: var(--wq-slate);
    margin: 0 0 var(--wq-sp-2);
}

/* Eén woord of zinsdeel in koraal, binnen een kop. */
.wq-display em,
.wq-h1 em,
.wq-h2 em,
.wq-h3 em {
    font-style: normal;
    color: var(--wq-coral);
}

/* Introparagraaf direct onder een kop. */
.wq-lead {
    font-size: var(--wq-fs-lead);
    line-height: 1.7;
    color: var(--wq-text-muted);
    margin: 0 0 var(--wq-sp-6);
    max-width: 62ch;
}

.wq-body    { font-size: var(--wq-fs-body); margin: 0 0 var(--wq-sp-4); }
.wq-small   { font-size: var(--wq-fs-sm); }
.wq-muted   { color: var(--wq-text-muted); }
.wq-faint   { color: var(--wq-text-faint); }
.wq-mono    { font-family: var(--wq-font-mono); font-variant-numeric: tabular-nums; }

/* Kicker: het kleine hoofdletterlabel boven een sectiekop. Het enige plekje
   waar koraal als tekstkleur mag staan. */
.wq-kicker {
    display: block;
    font-size: var(--wq-fs-micro);
    font-weight: var(--wq-fw-semi);
    letter-spacing: var(--wq-ls-kicker);
    text-transform: uppercase;
    color: var(--wq-coral-dark);
    margin: 0 0 var(--wq-sp-3);
}

/* Tekstlink in bodytekst. */
.wq-link {
    color: var(--wq-coral-dark);
    font-weight: var(--wq-fw-medium);
    border-bottom: 1px solid var(--wq-coral-25);
    transition: border-color var(--wq-t-fast), color var(--wq-t-fast);
}
.wq-link:hover { color: var(--wq-coral); border-bottom-color: var(--wq-coral); }

/* Op donkere vlakken. */
.wq-on-dark                { color: var(--wq-text-on-dark); }
.wq-on-dark .wq-display,
.wq-on-dark .wq-h1,
.wq-on-dark .wq-h2,
.wq-on-dark .wq-h3,
.wq-on-dark .wq-h4         { color: var(--wq-white); }
.wq-on-dark .wq-lead,
.wq-on-dark .wq-muted      { color: var(--wq-text-on-dark-m); }
.wq-on-dark .wq-kicker     { color: var(--wq-coral-light); }
.wq-on-dark .wq-display em,
.wq-on-dark .wq-h1 em,
.wq-on-dark .wq-h2 em      { color: var(--wq-coral-light); }


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

.wq-container {
    width: 100%;
    max-width: var(--wq-maxw);
    margin: 0 auto;
    padding: 0 var(--wq-gutter);
}

.wq-container--narrow { max-width: var(--wq-maxw-narrow); }

.wq-section {
    padding: var(--wq-section-y) 0;
}
.wq-section--tight  { padding: calc(var(--wq-section-y) * 0.6) 0; }
.wq-section--white  { background: var(--wq-surface); }
.wq-section--soft   { background: var(--wq-bg-soft); }

/* Donkere sectie: subtiel koraalgloed rechtsboven, zoals de hero van
   ITPrijzen.nl. Houdt donkere vlakken levendig zonder gradientfeest. */
.wq-section--dark {
    background:
        radial-gradient(circle at 82% 18%, rgba(254, 86, 74, 0.18), transparent 55%),
        linear-gradient(180deg, #3A3F45 0%, var(--wq-ink) 100%);
    color: var(--wq-text-on-dark);
}

/* Sectiekop: kicker + titel + introtekst. */
.wq-section-head        { margin-bottom: var(--wq-sp-12); }
.wq-section-head--center{ text-align: center; }
.wq-section-head--center .wq-lead { margin-left: auto; margin-right: auto; }

/* Rasters. Vallen terug naar één kolom op mobiel. */
.wq-grid   { display: grid; gap: var(--wq-sp-6); }
.wq-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wq-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wq-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wq-stack       { display: flex; flex-direction: column; gap: var(--wq-sp-4); }
.wq-row         { display: flex; align-items: center; gap: var(--wq-sp-3); flex-wrap: wrap; }
.wq-row--center { justify-content: center; }

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

/* Scheidslijn. */
.wq-rule {
    border: none;
    border-top: 1px solid var(--wq-border);
    margin: var(--wq-sp-8) 0;
}

/* Anker-offset onder de vaste navigatiebalk. */
.wq [id] { scroll-margin-top: calc(var(--wq-nav-h) + 16px); }

/* Alleen voor schermlezers. */
.wq-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    :root { --wq-section-y: 64px; --wq-gutter: 20px; }
    .wq-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    :root { --wq-section-y: 52px; --wq-gutter: 18px; }
    .wq-grid-2,
    .wq-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .wq-section-head { margin-bottom: var(--wq-sp-8); }
}

@media (max-width: 560px) {
    .wq-grid-4 { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================================
   5. PRINT
   ============================================================================ */

@media print {
    .wq-nav, .wq-footer, .wq-drawer, .wq-overlay { display: none !important; }
    body.wq { background: #fff; color: #000; font-size: 11pt; }
    .wq-section { padding: 12pt 0; }
}