/* === GBVisualizer — sluttbruker-tema === */

:root {
    --color-primary: #087992;        /* Teal fra logo (Visualizer.no-tekst). Overstyres per Tenant via inline <style> i layout. */
    /* Avledede primær-varianter beregnes fra --color-primary slik at de følger med
       når en kunde har egen primærfarge. Krever color-mix() (Chrome 111+, Safari 16.4+, FF 113+). */
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 78%, black);
    --color-primary-light: color-mix(in srgb, var(--color-primary) 88%, white);
    --color-accent: #922108;         /* CTA-farge (rødbrun default). Overstyres per Tenant. */
    --color-accent-dark: color-mix(in srgb, var(--color-accent) 78%, black);
    --color-text: #1a1d29;           /* Brødtekst — overstyres per Tenant. */
    --color-heading: var(--color-text);  /* Egen overskriftsfarge; default = body-tekst. Overstyres per Tenant. */
    /* color-mix mot bakgrunnen gir muted-tekst som leser fint i både lys- og mørk-modus. */
    --color-text-muted: color-mix(in srgb, var(--color-text) 70%, var(--color-bg));
    --color-bg: #f9ece5;             /* Body-bakgrunn — overstyres per Tenant. */
    --color-surface: #ffffff;        /* Kort/paneler over body-bg — overstyres per Tenant. */
    --color-bg-elevated: var(--color-surface); /* Alias for bakoverkompatibilitet. */
    --color-header-bg: var(--color-surface);  /* Topp-banner-bakgrunn — kan overstyres uavhengig. */
    --color-footer-bg: var(--color-surface);  /* Footer-bakgrunn — kan overstyres uavhengig. */
    --color-bg-soft: color-mix(in srgb, var(--color-bg) 88%, var(--color-text) 12%); /* Sekundærflater (features-grid etc.) */
    --color-border: color-mix(in srgb, var(--color-text) 14%, var(--color-bg));
    --color-success: #16824a;

    /* Typografi — overstyres per Tenant via Google Fonts. */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: var(--font-sans);
    --heading-text-transform: none;     /* "uppercase" når tenant har valgt det */
    --heading-letter-spacing: -.01em;   /* default tight for Inter; presets kan overstyre */

    --radius: 8px;
    --button-radius: var(--radius);  /* Overstyres per Tenant: 0 (square) / 8px (rounded) / 999px (pill). */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 14px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }

/* hidden-attributtet må vinne over display:flex/grid på samme element */
[hidden] { display: none !important; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
}
h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; margin: 2rem 0 1rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* === Layout === */
/* Standard tenant-bredde — Bjørns preferanse: 1280px sentrert. Header/footer/innhold
   sentreres til samme bredde, slik at en logo lastet opp som 1280×N fyller hele
   topp-området perfekt. Body-bg vises i gutters på bredere skjermer.
   Margin top/bottom gir luft mellom viewport-kanten og våre rammer. */
.site-header,
.tenant-banner {
    max-width: 1280px;
    margin: 2rem auto 0;
}
.tenant-footer {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* Edge-to-edge-modus: aktiveres når tenant har FullWidthHeaderFooter=true. Bakgrunnsfargene
   strekker seg fra kant til kant av viewport; innholdet inni sentreres med en inner-wrap.
   Margin top/bottom nulles ut fordi båndene møter viewport-kanten direkte. */
body[data-fullwidth="on"] .site-header,
body[data-fullwidth="on"] .tenant-banner,
body[data-fullwidth="on"] .tenant-footer {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
body[data-fullwidth="on"] .site-header,
body[data-fullwidth="on"] .tenant-banner {
    margin-top: 0;
}
body[data-fullwidth="on"] .tenant-footer {
    margin-top: 0;
    margin-bottom: 0;
    /* I full-bredde-modus eier aksent-båndet over footeren den visuelle separasjonen —
       border-top blir overflødig (skapte en synlig linje med ekstra mellomrom). */
    border-top: none;
    /* Reduser topp-padding så aksent-båndet sitter rett over kontaktinfo-tekst,
       matcher mockupens kompakte footer. */
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.site-header {
    padding: 0;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
    line-height: 0;
}

.site-header .logo {
    display: block;
    max-width: 566px;       /* logoens naturlige bredde — ikke blåses opp på PC */
    margin: 0 auto;         /* sentrert når skjerm er bredere enn logoen */
}

.site-header .logo img {
    width: 100%;            /* fyller bredden på smal skjerm (<566px) */
    height: auto;
    display: block;
}

/* Kundelogo / toppbar (white-label) — fast aspect-ratio 1280:270 (4.74:1) som beholder seg
   responsivt: 1280×270 på PC, naturlig nedskalert til 360×76 osv. på mobil. Cover-crop sørger
   for at en logo lastet opp i forventet format fyller hele området, og at avvik (eks. 1280×400)
   blir trimmet i topp/bunn i stedet for å sprenge høyden. Spec for admin: last opp 1280×270.
   max-width: none og margin/padding-overrides nuller ut .site-header .logo-reglene over
   (samme DOM-element har begge klasser — .tenant-logo må vinne). */
.site-header .tenant-logo {
    /* Display: block — kreves siden elementet er en <a> (inline by default), og vi trenger
       aspect-ratio og full bredde for å virke. */
    display: block;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 1280 / 270;
    background: var(--color-header-bg);
    overflow: hidden;
    /* Logo skal aldri vise underline på hover (det er en bildelenke, ikke tekstlenke). */
    text-decoration: none !important;
}
.site-header .tenant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tenant-banner {
    text-align: center;
    padding: 1.75rem 1.5rem 0.5rem;
    line-height: 1;
}

/* Rik header-tekst (Quill-output) under logoen eller navnet. Sentrert, samme bakgrunn som
   resten av header-flaten (surface) for visuell sammenheng. Lenker arver tenant-primær. */
.site-header .tenant-header-text,
.tenant-banner .tenant-header-text {
    background: var(--color-surface);
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
}

/* Flex-rad for HeaderText + tilbake-lenke. Brukes når BackLinkText/Url er satt — da skal
   tilbake-lenken stå til høyre, HeaderText (wordmark e.l.) til venstre.
   Max-width 1280px matcher .hero og .container slik at venstrekantene flukter. */
.tenant-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    background: var(--color-header-bg);
}
/* Inni flex-raden skal HeaderText være venstrejustert og uten egen padding/bg — flex-raden
   eier nå layouten. */
.tenant-header-row .tenant-header-text {
    background: transparent;
    padding: 0;
    text-align: left;
    flex: 1 1 auto;
}
.tenant-back-link {
    color: var(--color-text-muted, #999);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.tenant-back-link:hover { color: var(--color-text); text-decoration: none; }

/* Kompakt logo i header-flex-raden (FullWidthHeaderFooter-modus). Erstatter den store
   banner-stilen — beholdes liten og høydebegrenset slik at den fungerer som wordmark. */
.tenant-logo-compact {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
}
.tenant-logo-compact img {
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.site-header .tenant-header-text p,
.tenant-banner .tenant-header-text p {
    margin: 0 0 .5rem;
}
.site-header .tenant-header-text p:last-child,
.tenant-banner .tenant-header-text p:last-child {
    margin-bottom: 0;
}
.site-header .tenant-header-text a,
.tenant-banner .tenant-header-text a,
.tenant-footer .tenant-footer-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.tenant-banner-name {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.1;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.hero {
    padding: 4rem 1.5rem 3rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

/* Liten "eyebrow"-tekst over hero-overskriften. Bruker primærfargen og uppercase med
   sperret letter-spacing for et tagline-uttrykk. Skjules hvis admin-feltet er tomt. */
.hero-eyebrow {
    color: var(--color-primary, var(--color-accent));
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
}

.hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    /* Default: stort gap mellom h1 og det som kommer etter (typisk CTA-knappen). */
    margin: 0 0 2.5rem;
}
/* Hvis lead-tekst følger rett etter h1, skal h1 ha kortere gap (lead-en holder selv avstanden). */
.hero h1:has(+ .lead) { margin-bottom: 1rem; }

.hero .lead {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin: 0 0 2.5rem;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.75rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--button-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: all .15s ease;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--color-accent-dark);
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Shimmer-variant: aktiveres når tenant har ButtonShimmer=true (settes via data-shimmer="on"
   på <body> i layout). Gradient bruker AccentColor som mørke ender og PrimaryColor som lys
   senter — admin styrer begge eksplisitt fra Tema-siden, ingen utledning. */
@keyframes btn-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
body[data-shimmer="on"] .btn-primary,
body[data-shimmer="on"] .btn-primary:hover {
    background: linear-gradient(
        90deg,
        var(--color-accent),
        var(--color-primary, var(--color-accent)),
        var(--color-accent));
    background-size: 200% 100%;
    animation: btn-shimmer 5s ease-in-out infinite;
    /* Typografi-finpuss som matcher den moderne pille-CTA-en. Standard .btn-padding er nær
       men ikke identisk; vi overstyrer kun det som skiller seg fra mockupen. */
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .06em;
    transition: transform .2s ease;
    box-shadow: none;
}
body[data-shimmer="on"] .btn-primary:hover {
    transform: translateY(-2px);
}

/* Aksent-bånd: tynn gradient-stripe over header og under footer. Mørk → lys (accent → primary)
   for å matche mockup-rekkefølgen. Høyden styres av --accent-band-height (0 = av).
   Default: følger samme max-width som header (1280) så det visuelt henger sammen.
   I full-width-modus: edge-to-edge. */
.accent-band {
    height: var(--accent-band-height, 0);
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary, var(--color-accent)));
    max-width: 1280px;
    margin: 0 auto;
}
body[data-fullwidth="on"] .accent-band {
    max-width: none;
    margin: 0;
}

.btn-secondary {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-text-muted); }

.btn-lg { padding: 1.1rem 2.25rem; font-size: 1.1rem; }

/* CTA-knappen i hero får ekstra topp-margin slik at den visuelt sitter midt mellom
   hero-teksten over og steg-kortene under, i stedet for å henge tett under lead-en. */
.hero .btn-primary { margin-top: 2rem; }

/* === Features grid (landing) === */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 3rem auto;
    /* Fyller .container-bredden (1280px minus padding) — Bjørns preferanse: hele 1280-arealet
       brukes av innholdet, ikke bare topp/bunn. */
}

.feature {
    padding: 1.5rem;
    background: var(--color-bg-soft);
    border-radius: var(--radius);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.feature h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--color-primary); }
.feature p { margin: 0; font-size: .95rem; color: var(--color-text-muted); line-height: 1.5; }

/* 2 px gradient-stripe på toppen av hvert kort — samme aksent-farger som båndene over
   header og under footer. Aktiveres når tenant har AccentBandHeight > 0
   (signalisert via body[data-card-band="on"] fra _Layout). */
body[data-card-band="on"] .feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary, var(--color-accent)));
}

/* === Footer === */
.site-footer {
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: .85rem;
    color: var(--color-text-muted);
    margin-top: 4rem;
}

/* Per-tenant footer: bilde + flerlinjet tekst, sentrert. Bakgrunn settes uavhengig av header
   slik at admin kan ha forskjellige farger i topp og bunn. Skalerer ned pent på mobil. */
.tenant-footer {
    background: var(--color-footer-bg);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-text);
    font-size: .9rem;
    line-height: 1.55;
    margin-top: 4rem;
    border-top: 1px solid var(--color-border);
}
.tenant-footer .tenant-footer-image {
    margin-bottom: 1rem;
}
.tenant-footer .tenant-footer-image img {
    max-width: 240px;
    max-height: 80px;
    height: auto;
    width: auto;
    display: inline-block;
}
.tenant-footer .tenant-footer-text {
    /* Bruker hele tilgjengelig bredde — admin styrer linjebryting via Enter i Quill-editoren.
       Tidligere max-width: 640px tvang fram unødvendige linjebrytinger. */
    margin: 0 auto;
    white-space: normal;
}

/* === Mobilbryter === */
@media (max-width: 640px) {
    .hero { padding: 2.5rem 1rem 2rem; }
    .hero h1 { font-size: 2rem; }
    .hero .lead { font-size: 1.05rem; }
    .tenant-banner { padding: 1.25rem 1rem 0.25rem; }
    .tenant-banner-name { font-size: 1.75rem; }
    .btn-lg { padding: .95rem 1.75rem; font-size: 1rem; }
}