/*
 * ============================================================
 * Bestand: public_html/assets/themes/lodewijkhosting/css/theme.css
 * ============================================================
 *
 * Thema lodewijkhosting. De kleurvariabelen hieronder komen letterlijk uit de
 * goedgekeurde blauwdruk (lodewijkhosting-thema-blauwdruk.zip); die is de bron
 * van waarheid voor het uiterlijk. Drie lagen, in deze volgorde:
 *
 *   1. :root                         donker (de standaard van het ontwerp)
 *   2. html[data-theme="light"]      expliciete keuze van de bezoeker
 *   3. @media (prefers-color-scheme) systeemvoorkeur, alleen zolang er geen
 *                                    expliciete keuze staat (html:not([data-theme]))
 *
 * De fonts zijn zelf gehost. Dat is geen detail: deze site belooft bezoekers dat
 * er niemand meekijkt, en een Google Fonts-verzoek zou hun IP alsnog naar buiten
 * sturen. Er hoort dus geen enkele externe verbinding in dit thema te staan.
 * ============================================================
 */

/* ── Kleurtokens uit de blauwdruk ─────────────────────────────────────────── */
:root{color-scheme:dark;--bg:#090D18;--bg-deep:#070B14;--surface-solid:#0D1322;--input-bg:#0A101F;--on-badge:#0A0F1E;--text:#EAF0FB;--text-strong:#FFFFFF;--text-1:#D7E1F5;--text-2:#B9C4DA;--text-3:#93A0B8;--muted:#566482;--muted-2:#3E4A63;--accent:#6C9EFF;--accent-hover:#9BBCFF;--accent-g1:#5E8FFF;--accent-strong:#3D6EF7;--accent-pale:#CFE0FF;--green:#43E5A0;--green-soft:#8FD9B8;--red:#FF8B8B;--nav-bg:rgba(9,13,24,0.82);--bg-1:rgba(9,13,24,1);--surface:rgba(13,19,34,0.9);--surface-1:rgba(13,19,34,1);--shadow:rgba(0,0,0,0.45);--a126-04:rgba(126,160,255,0.04);--a126-05:rgba(126,160,255,0.05);--a126-08:rgba(126,160,255,0.08);--a126-1:rgba(126,160,255,0.1);--a126-12:rgba(126,160,255,0.12);--a126-14:rgba(126,160,255,0.14);--a126-18:rgba(126,160,255,0.18);--a126-2:rgba(126,160,255,0.2);--a126-22:rgba(126,160,255,0.22);--a126-25:rgba(126,160,255,0.25);--a126-3:rgba(126,160,255,0.3);--a126-35:rgba(126,160,255,0.35);--a108-03:rgba(108,158,255,0.03);--a108-08:rgba(108,158,255,0.08);--a108-1:rgba(108,158,255,0.1);--a108-12:rgba(108,158,255,0.12);--a108-16:rgba(108,158,255,0.16);--a108-18:rgba(108,158,255,0.18);--a108-4:rgba(108,158,255,0.4);--a108-5:rgba(108,158,255,0.5);--a61-04:rgba(61,110,247,0.04);--a61-05:rgba(61,110,247,0.05);--a61-06:rgba(61,110,247,0.06);--a61-14:rgba(61,110,247,0.14);--a61-16:rgba(61,110,247,0.16);--a61-18:rgba(61,110,247,0.18);--a61-2:rgba(61,110,247,0.2);--a61-22:rgba(61,110,247,0.22);--g67-08:rgba(67,229,160,0.08);--g67-12:rgba(67,229,160,0.12);--g67-22:rgba(67,229,160,0.22);--red-tint:rgba(255,107,107,0.1);}

html[data-theme="light"]{color-scheme:light;--bg:#F4F7FD;--bg-deep:#E9EEF8;--surface-solid:#FFFFFF;--input-bg:#F1F5FC;--on-badge:#FFFFFF;--text:#17233B;--text-strong:#0C1730;--text-1:#253654;--text-2:#3E4E6E;--text-3:#55668A;--muted:#7D8CA8;--muted-2:#9AA9C4;--accent:#2F62E9;--accent-hover:#1E4FD6;--accent-g1:#4E80F5;--accent-strong:#2F62E9;--accent-pale:#1C3E9E;--green:#0E9F6E;--green-soft:#0B7A55;--red:#C94040;--nav-bg:rgba(247,250,255,0.85);--bg-1:#F4F7FD;--surface:rgba(255,255,255,0.92);--surface-1:#FFFFFF;--shadow:rgba(23,35,59,0.14);--a126-04:rgba(47,98,233,0.05);--a126-05:rgba(47,98,233,0.05);--a126-08:rgba(47,98,233,0.09);--a126-1:rgba(47,98,233,0.10);--a126-12:rgba(47,98,233,0.14);--a126-14:rgba(47,98,233,0.16);--a126-18:rgba(47,98,233,0.20);--a126-2:rgba(47,98,233,0.22);--a126-22:rgba(47,98,233,0.25);--a126-25:rgba(47,98,233,0.30);--a126-3:rgba(47,98,233,0.35);--a126-35:rgba(47,98,233,0.40);--a108-03:rgba(47,98,233,0.04);--a108-08:rgba(47,98,233,0.07);--a108-1:rgba(47,98,233,0.08);--a108-12:rgba(47,98,233,0.10);--a108-16:rgba(47,98,233,0.12);--a108-18:rgba(47,98,233,0.15);--a108-4:rgba(47,98,233,0.45);--a108-5:rgba(47,98,233,0.5);--a61-04:rgba(47,98,233,0.04);--a61-05:rgba(47,98,233,0.04);--a61-06:rgba(47,98,233,0.06);--a61-14:rgba(47,98,233,0.10);--a61-16:rgba(47,98,233,0.10);--a61-18:rgba(47,98,233,0.12);--a61-2:rgba(47,98,233,0.14);--a61-22:rgba(47,98,233,0.16);--g67-08:rgba(14,159,110,0.10);--g67-12:rgba(14,159,110,0.14);--g67-22:rgba(14,159,110,0.30);--red-tint:rgba(201,64,64,0.12);}

@media (prefers-color-scheme: light){ html:not([data-theme]){color-scheme:light;--bg:#F4F7FD;--bg-deep:#E9EEF8;--surface-solid:#FFFFFF;--input-bg:#F1F5FC;--on-badge:#FFFFFF;--text:#17233B;--text-strong:#0C1730;--text-1:#253654;--text-2:#3E4E6E;--text-3:#55668A;--muted:#7D8CA8;--muted-2:#9AA9C4;--accent:#2F62E9;--accent-hover:#1E4FD6;--accent-g1:#4E80F5;--accent-strong:#2F62E9;--accent-pale:#1C3E9E;--green:#0E9F6E;--green-soft:#0B7A55;--red:#C94040;--nav-bg:rgba(247,250,255,0.85);--bg-1:#F4F7FD;--surface:rgba(255,255,255,0.92);--surface-1:#FFFFFF;--shadow:rgba(23,35,59,0.14);--a126-04:rgba(47,98,233,0.05);--a126-05:rgba(47,98,233,0.05);--a126-08:rgba(47,98,233,0.09);--a126-1:rgba(47,98,233,0.10);--a126-12:rgba(47,98,233,0.14);--a126-14:rgba(47,98,233,0.16);--a126-18:rgba(47,98,233,0.20);--a126-2:rgba(47,98,233,0.22);--a126-22:rgba(47,98,233,0.25);--a126-25:rgba(47,98,233,0.30);--a126-3:rgba(47,98,233,0.35);--a126-35:rgba(47,98,233,0.40);--a108-03:rgba(47,98,233,0.04);--a108-08:rgba(47,98,233,0.07);--a108-1:rgba(47,98,233,0.08);--a108-12:rgba(47,98,233,0.10);--a108-16:rgba(47,98,233,0.12);--a108-18:rgba(47,98,233,0.15);--a108-4:rgba(47,98,233,0.45);--a108-5:rgba(47,98,233,0.5);--a61-04:rgba(47,98,233,0.04);--a61-05:rgba(47,98,233,0.04);--a61-06:rgba(47,98,233,0.06);--a61-14:rgba(47,98,233,0.10);--a61-16:rgba(47,98,233,0.10);--a61-18:rgba(47,98,233,0.12);--a61-2:rgba(47,98,233,0.14);--a61-22:rgba(47,98,233,0.16);--g67-08:rgba(14,159,110,0.10);--g67-12:rgba(14,159,110,0.14);--g67-22:rgba(14,159,110,0.30);--red-tint:rgba(201,64,64,0.12);} }

/* ── Maximale inhoudsbreedte ──────────────────────────────────────────────────
 * Eén knop voor de breedte van de pagina-inhoud. De sectie-achtergronden lopen
 * altijd van rand tot rand; deze waarde bepaalt alleen hoe breed de inhoud
 * daarbinnen wordt. De koppen en tekstkolommen hebben hun eigen, smallere
 * maxima voor leesbaarheid, dus dit breder zetten rekt geen tekstregels op.
 * Verander alleen dit getal om de hele site smaller of breder te maken. */
:root{ --lh-maxw:1800px; }

/* ── Basisopmaak en responsive regels uit de blauwdruk ────────────────────── */
body{transition:background-color .35s ease,color .35s ease;}

  body { margin:0; background:var(--bg); color:var(--text); font-family:'Instrument Sans',sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:var(--accent); text-decoration:none; }
  a:hover { color:var(--accent-hover); }
  /* Uitloggen is sinds v014.10.579 een POST-formulier. De knop staat tussen de accountlinks en moet dus
     precies een link zijn: zelfde kleur, zelfde hover. `display:contents` maakt hem een gewoon flex-kind
     van de nav, zodat de tussenruimte klopt. Geen `font`-afkorting: die zet ook grootte en dikte op
     inherit en dan wijkt de knop alsnog af zodra de nav er een eigen waarde voor krijgt. */
  .lh-auth-links form { display:contents; }
  .lh-auth-links button { background:none; border:0; padding:0; margin:0; font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; color:var(--accent); text-decoration:none; cursor:pointer; }
  .lh-auth-links button:hover { color:var(--accent-hover); }
  ::selection { background:var(--accent-strong); color:#fff; }
  input::placeholder { color:var(--muted); }
  @keyframes floatUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  @keyframes glowPulse { 0%,100% { opacity:.45; } 50% { opacity:.9; } }
  html, body { overflow-x: clip; }

  /* Toegankelijkheid: verspringlink, alleen zichtbaar bij toetsenbordfocus. */
  .lh-skip { position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:100; }
  .lh-skip:focus { left:0; }

  /* Navigatie: brede balk of hamburger. */
  burger-menu { display: none; }
  install-app { display: none; }            /* JS toont de knop zodra installeren kan */
  lh-bottom-nav { display: none; }           /* alleen op smal scherm (zie hieronder) */
  /* Header-binnenbalk: op smalle schermen minder zijmarge zodat logo + knoppen ruim passen;
     op de allersmalste toestellen klapt de HOSTING-badge in (logo + beeldmerk blijven). */
  .lh-header-inner { padding: 0 24px; }
  @media (max-width: 560px){ .lh-header-inner { padding: 0 14px; } }
  @media (max-width: 340px){ .lh-brand-badge { display: none; } }
  @media (max-width: 920px){
    /* Op smal scherm verzorgt de onderbalk de navigatie, het mandje en het account. */
    .nav-links, .lh-hide-narrow { display: none !important; }
    /* Paneelcontainer: vast, over de hele viewport, ónder de onderbalk (z-index 80)
       zodat de balk boven blijft en het paneel er van achteren onder vandaan schuift. */
    burger-menu {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 78;
      align-items: flex-end;
      visibility: hidden;
      pointer-events: none;
      transition: visibility 0s .32s;
    }
    burger-menu.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; }
  }

  /* "Installeer als app"-knop (boven, naast de dag/nacht-toggle). */
  .lh-install-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 13px; border:1px solid var(--a108-4); border-radius:11px; background:var(--a108-08); color:var(--accent); font:600 13px 'Instrument Sans',sans-serif; cursor:pointer; white-space:nowrap; }
  .lh-install-btn:hover { background:var(--a108-12); }
  @media (max-width: 480px){ .lh-install-label { display:none; } .lh-install-btn { padding:0 10px; } }

  /* App-onderbalk (mobiel): Home · Menu · Mandje · Account. */
  @media (max-width: 920px){
    lh-bottom-nav { display:block; }
    body.lh-body { padding-bottom: 62px; }   /* ruimte zodat de vaste balk niets afdekt */
    .lh-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:stretch; background:var(--nav-bg); backdrop-filter:blur(14px); border-top:1px solid var(--a126-14); padding-bottom:env(safe-area-inset-bottom, 0px); }
    .lh-bn-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:9px 4px 8px; background:transparent; border:none; cursor:pointer; color:var(--text-3); text-decoration:none; font:600 11px 'Instrument Sans',sans-serif; }
    .lh-bn-item.is-active { color:var(--accent); }
    .lh-bn-item:active { background:var(--a126-05); }
    .lh-bn-ico { position:relative; display:inline-flex; }
    .lh-bn-label { line-height:1; }
    .lh-bn-badge { position:absolute; top:-6px; right:-9px; background:var(--accent-strong); color:#fff; font:600 10px 'JetBrains Mono',monospace; min-width:16px; height:16px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; box-sizing:border-box; }
  }

  /* Mobiel hoofdmenu (bottom-sheet). Zelfde gedrag en positie als de portal-thema's:
     vast in de DOM, schuift vloeiend van onderen op en zit strak tegen de onderrand
     (de achtergrond loopt door achter de onderbalk, geen zwevende naad). */
  .lh-menu-backdrop { position:absolute; inset:0; background:rgba(3,6,12,.5); opacity:0; transition:opacity .26s cubic-bezier(.25,.46,.45,.94); cursor:pointer; }
  burger-menu.is-open .lh-menu-backdrop { opacity:1; }
  .lh-menu-body { position:relative; width:100%; max-height:86dvh; display:flex; flex-direction:column; background:var(--surface-solid); border-top:1px solid var(--a126-18); border-radius:18px 18px 0 0; box-shadow:0 -24px 60px var(--shadow); padding:6px 24px calc(70px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); will-change:transform; }
  burger-menu.is-open .lh-menu-body { transform:translateY(0); }
  .lh-menu-handle { width:38px; height:4px; flex-shrink:0; border-radius:999px; background:var(--a126-25); margin:6px auto 8px; padding:8px 0; box-sizing:content-box; touch-action:none; cursor:grab; }
  .lh-menu-body:focus { outline:none; }   /* container krijgt programmatische focus; geen ring om het hele paneel */
  .lh-menu-body nav { display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
  .lh-menu-link { padding:15px 4px; font-size:16px; font-weight:600; text-decoration:none; color:var(--text-1); border-bottom:1px solid var(--a126-08); }
  .lh-menu-link.is-current { color:var(--accent); }
  .lh-menu-link:last-child { border-bottom:0; }
  @media (prefers-reduced-motion: reduce) {
    burger-menu { transition:none; }
    .lh-menu-backdrop, .lh-menu-body { transition-duration:.01ms; }
  }

  /* Mobiel compacter: kleinere koppen (de blauwdruk-clamps hebben een te hoge
     ondergrens voor smalle schermen) en compactere domein-chips. Kaart-titels zijn
     divs of h3 (geen h1/h2), dus die blijven ongemoeid. */
  @media (max-width: 600px){
    .lh-body main h1 { font-size: clamp(27px, 8.2vw, 36px) !important; line-height: 1.08 !important; }
    .lh-body main h2 { font-size: clamp(22px, 6.4vw, 30px) !important; line-height: 1.14 !important; }
    .lh-body main .lh-sec { padding-top: 34px !important; padding-bottom: 34px !important; }
    [data-lh-checker-chip] { padding: 5px 10px !important; font-size: 11.5px !important; }
  }

  /* Responsive collapses — bewust klasse-gebaseerd. De blauwdruk gebruikte
     [style*="..."]-selectors op de inline-styles; die matchen alleen bij exact
     dezelfde spatiëring en breken stil zodra een template de stijl net anders
     schrijft. Deze klassen doen hetzelfde, robuust. */
  @media (max-width: 860px){
    .lh-split { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 760px){
    .lh-compare-row { grid-template-columns: 1fr !important; gap: 4px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
    .lh-sticky-aside { position: static !important; }
  }
  @media (max-width: 640px){
    .lh-checker-card { padding: 20px 16px 16px !important; }
    .lh-checker-field { flex-wrap: wrap; }
    .lh-checker-field .lh-checker-go { flex: 1 1 100%; }
  }
  @media (max-width: 560px){
    .lh-cols-2 { grid-template-columns: 1fr !important; }
    .lh-domain-row { grid-template-columns: 74px 1fr 96px !important; gap: 10px !important; }
    .lh-extra-row { grid-template-columns: 1fr auto !important; gap: 10px !important; }
  }

  /* ── "Waarom Lodewijk Hosting": tien voordelen als één ontworpen raster ──────
     Vervangt de losse inline-kaarten. Vijf per rij op desktop (twee nette rijen),
     twee op tablet, één op mobiel. Nummering 01-10 als vast ontwerp-element met een
     fijne aflopende accentlijn; een zachte accentgloed bindt de kaarten tot een geheel.
     Alleen bestaande huisstijl-tokens, geen nieuwe kleuren. */
  .lh-why { position: relative; }
  .lh-why::before {
    content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: min(760px, 92%); height: 320px; pointer-events: none; z-index: 0;
    background: radial-gradient(60% 100% at 50% 0%, var(--a108-08), transparent 72%);
  }
  .lh-why > * { position: relative; z-index: 1; }

  .lh-why-head { max-width: 620px; margin: 0 0 34px; }
  .lh-why-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
  .lh-why-title { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--text); }
  .lh-why-intro { color: var(--text-3); font-size: 16.5px; line-height: 1.6; margin: 14px 0 0; }

  .lh-why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

  .lh-why-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--a126-04); border: 1px solid var(--a126-12); border-radius: 16px;
    padding: 20px 20px 22px;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
  }
  .lh-why-index { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
  .lh-why-num { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-strong); }
  .lh-why-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--a126-25), transparent); }
  .lh-why-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16.5px; line-height: 1.25; margin: 0 0 7px; color: var(--text); overflow-wrap: break-word; hyphens: auto; }
  .lh-why-text { margin: 0; color: var(--text-3); font-size: 14px; line-height: 1.55; overflow-wrap: break-word; hyphens: auto; }

  .lh-why-card:hover { transform: translateY(-3px); border-color: var(--a126-25); background: var(--a126-05); box-shadow: 0 12px 32px -20px var(--shadow); }
  .lh-why-card:hover .lh-why-line { background: linear-gradient(90deg, var(--accent), transparent); }

  /* Tablet: twee per rij. Tien deelt netjes door twee, dus geen wees-kaart en geen gat. */
  @media (max-width: 1140px){ .lh-why-grid { grid-template-columns: repeat(2, 1fr); } }
  /* Mobiel: één per rij, ruime tussenruimte. */
  @media (max-width: 560px){ .lh-why-grid { grid-template-columns: 1fr; } }

  /* Rustige beweging: wie reduced-motion kiest, krijgt geen verschuiving of schaduw. */
  @media (prefers-reduced-motion: reduce){
    .lh-why-card { transition: border-color .16s ease, background-color .16s ease; }
    .lh-why-card:hover { transform: none; box-shadow: none; }
  }

  /* Compacte hero: minder verticale ruimte, zodat de checker sneller in beeld komt.
     Op desktop iets minder ruimte; op mobiel flink compacter (checker boven de vouw). */
  .lh-hero { padding: 60px 24px 56px; }
  .lh-hero-eyebrow { margin-bottom: 16px; }
  .lh-hero-title { margin: 0 0 16px; }
  .lh-hero-sub { max-width: 620px; margin: 0 auto 32px; }
  .lh-hero-badges { margin-top: 26px; }
  @media (max-width: 600px){
    .lh-hero { padding: 24px 20px 30px; }
    .lh-hero-eyebrow { margin-bottom: 10px; }
    .lh-hero-title { margin: 0 0 12px; }
    .lh-hero-sub { font-size: 15.5px; margin-bottom: 20px; }
    .lh-hero-badges { margin-top: 16px; gap: 7px; }
  }

  /* Herkenbaar info-knopje bij een dienst; opent een modal met uitleg (theme.js). */
  .lh-info-btn { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex:0 0 auto; border-radius:50%; border:1px solid var(--a126-25); background:var(--a126-05); color:var(--accent); font-family:'JetBrains Mono',monospace; font-style:italic; font-weight:700; font-size:12px; line-height:1; cursor:pointer; padding:0; transition:background-color .14s ease, border-color .14s ease; }
  .lh-info-btn:hover { background:var(--a108-16); border-color:var(--accent); }
  .lh-info-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }