/* ==========================================================================
   TODO•IT brandlag — 2026
   Indlæses sidst blandt de globale stylesheets, så det kan rette op på det
   gamle mørke tema uden at alle ældre regler skal skrives om.

   Retning: lyst, varmt og roligt. Knoglehvid bund, hvide kort, dyb blå
   reserveret til handlinger og enkelte mørke bånd — ikke til hele sider.
   ========================================================================== */

:root {
    /* Flader */
    --canvas: #FBFBF9;      /* varm knoglehvid — sidens bund */
    --surface: #FFFFFF;     /* kort og paneler */
    --surface-2: #F3F4EF;   /* varmt sandbånd til alternerende sektioner */
    --surface-3: #E7EBE2;   /* dæmpet salviegrøn accent, bruges sparsomt */

    /* Tekst */
    --ink: #18222B;
    --ink-2: #414E5B;
    /* Mørk nok til at ramme WCAG AA (4.5:1) på den knoglehvide bund. */
    --ink-muted: #5F6B78;

    /* Brand */
    --brand: #14568F;
    --brand-strong: #0E406B;
    --brand-soft: #E8F0F7;

    --hairline: #E5E7E0;

    /* Blødere skygger — det gamle tema brugte tunge, mørke skygger. */
    --shadow-sm: 0 1px 2px rgba(24, 34, 43, 0.05);
    --shadow-md: 0 6px 18px rgba(24, 34, 43, 0.07);
    --shadow-lg: 0 18px 40px rgba(24, 34, 43, 0.10);

    --border-radius: 14px;
}

body {
    background: var(--canvas);
    color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Typografi — roligere end det gamle tema: medium vægt frem for 800, og en
   let negativ knibning der får store overskrifter til at hænge bedre sammen.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 { font-weight: 600; }

.section-title,
.section-header h2 {
    font-weight: 600;
    letter-spacing: -0.025em;
}

.section-subtitle,
.subtitle {
    color: var(--ink-muted);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Sektionsflader — skiftevis knoglehvid og hvid frem for mørke gradienter.
   -------------------------------------------------------------------------- */

section { background: transparent; }

.section-light,
.services,
.faq { background: var(--surface); }

.section-warm,
.solutions,
.partners { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Kort
   -------------------------------------------------------------------------- */

.card,
.service-card,
.guarantee,
.solution-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius);
}

.card:hover,
.service-card:hover,
.guarantee:hover,
.solution-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Knapper — flad, rolig udgave uden glans og tunge skygger.
   -------------------------------------------------------------------------- */

.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Ekstra klasse i selektoren, så reglen slår Blazors scoped CSS, der ellers
   vinder på specificitet (.btn-primary[b-hash]) og indlæses efter dette lag. */
.btn.btn-primary,
.btn-primary {
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
}

.btn-primary:hover:not(:disabled) {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    transform: none;
    box-shadow: none;
}

/* Sekundær er nu en rolig kontur i stedet for endnu en fyldt blå flade. */
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--hairline);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: #D5D8D1;
    color: var(--ink);
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Header — lys og gennemsigtig frem for mørk.
   -------------------------------------------------------------------------- */

.site-header,
.header {
    background: rgba(251, 251, 249, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
}

.site-header a,
.header a,
.nav-menu a {
    color: var(--ink-2);
}

.site-header a:hover,
.header a:hover,
.nav-menu a:hover {
    color: var(--brand);
}

.logo,
.site-logo {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Farvede bånd — det gamle tema havde tre store blå gradientblokke på
   forsiden. Vi beholder ét kraftigt bånd som konverteringspunkt (.cta) og
   gør de to andre lyse, så siden får luft og rytme frem for at hamre.
   -------------------------------------------------------------------------- */

.local-area,
.footer-support {
    background: var(--surface-2);
    color: var(--ink-2);
}

.local-area h3,
.footer-support h3 { color: var(--ink); }

.local-area p,
.footer-support p { color: var(--ink-muted); }

.local-area i,
.footer-support i { color: var(--brand); }

.local-badge {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--hairline);
}

/* Det ene kraftige bånd: rolig, mættet flade frem for tredelt gradient. */
.cta {
    background: var(--brand-strong);
    color: rgba(255, 255, 255, 0.9);
}

.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.82); }

/* Lys knap på det mørke bånd. */
.cta .btn-light {
    background: #fff;
    color: var(--brand-strong);
    border: 1px solid #fff;
}

.cta .btn-light:hover {
    background: var(--brand-soft);
    color: var(--brand-strong);
}

/* --------------------------------------------------------------------------
   Footer — ét mørkt bånd er fint som afslutning, men i den nye dybe tone.
   -------------------------------------------------------------------------- */

.site-footer,
.footer {
    background: var(--ink);
    color: rgba(255, 255, 255, 0.72);
}

.site-footer a,
.footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover,
.footer a:hover { color: #fff; }

.footer-heading { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   Klaro samtykkebanner — Klaros egne CSS-variabler sættes til brandpaletten,
   så banneret ikke ligner et fremmedelement på siden.
   -------------------------------------------------------------------------- */

#klaro {
    --green1: var(--brand);
    --green2: var(--brand-strong);
    --green3: var(--brand-strong);
    --dark1: var(--ink);
    --dark2: #2A3540;
    --dark3: #3A4650;
    --light1: var(--surface);
    --light2: var(--surface-2);
    --light3: var(--hairline);
    --font-family: var(--font-sans);
    --border-radius: 12px;
    --button-text-color: #fff;
}

#klaro .cookie-notice,
#klaro .cookie-modal .cm-modal {
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
}

#klaro .cookie-notice .cn-ok a.cm-link,
#klaro .cookie-modal a {
    color: var(--brand);
}