/*
 * Blue Lobster — designsystem.
 * Bygget 1:1 efter Lovable-projektet "Invest Easy" (Tailwind-tokens → almindelig CSS).
 * Farverne er oklch, præcis som i designet. Rækkefølge: tokens → base → layout → komponenter.
 */

/* ---- Tokens ------------------------------------------------------------- */
:root {
    --radius: 0.75rem;

    --background: oklch(0.985 0.005 240);
    --foreground: oklch(0.22 0.06 250);
    --card: oklch(1 0 0);

    /* Dyb navy (fra logoets wordmark) */
    --primary: oklch(0.28 0.08 250);
    --primary-foreground: oklch(0.985 0.005 240);

    --muted: oklch(0.96 0.01 240);
    /* Væsentligt mørkere end Lovables 0.48. Den bruges til ALT brødtekst —
       uddrag, footer, intro — og var for lys til at læse i længere stræk. */
    --muted-foreground: oklch(0.34 0.04 250);

    /* Hummer-teal (fra logoets krop) */
    --accent: oklch(0.68 0.12 220);
    --accent-foreground: oklch(0.985 0.005 240);

    --border: oklch(0.9 0.015 240);

    --up: oklch(0.85 0.14 155);
    --down: oklch(0.81 0.11 15);

    /* Tag-palette — dæmpede toner */
    --tag-realestate: oklch(0.93 0.04 150);
    --tag-realestate-fg: oklch(0.35 0.09 150);
    --tag-report: oklch(0.93 0.03 250);
    --tag-report-fg: oklch(0.32 0.09 250);
    --tag-stocks: oklch(0.93 0.05 60);
    --tag-stocks-fg: oklch(0.4 0.1 60);
    --tag-crowdlending: oklch(0.93 0.04 300);
    --tag-crowdlending-fg: oklch(0.38 0.1 300);
    --tag-bitcoin: oklch(0.93 0.05 40);
    --tag-bitcoin-fg: oklch(0.42 0.13 40);

    --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Archivo Black", "Work Sans", sans-serif;
}

/* ---- Base --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--border);
}

html {
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    font-feature-settings: "ss01", "cv11";
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-weight: 400;
    margin: 0;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---- Layout ------------------------------------------------------------- */
.shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
}

.wrap-5xl,
.wrap-4xl,
.wrap-3xl {
    margin-inline: auto;
    padding-inline: 1.5rem;
    width: 100%;
}

/* Spaltebredder. Alt er sat op i forhold til wrap-5xl, som header og
   statusbjælke bruger — så kanterne flugter ned gennem siden. */
.wrap-5xl { max-width: 72rem; }
.wrap-4xl { max-width: 72rem; }   /* forside + kategorier */
.wrap-3xl { max-width: 62rem; }   /* artikler: bredere, men stadig læsbar linjelængde */

.page {
    padding-block: 4rem;
}

main {
    position: relative;
    flex: 1;
}

/* Hummer-vandmærke — dekorativt, må aldrig fange klik */
.watermark {
    pointer-events: none;
    position: fixed;
    right: -10rem;
    top: 33%;
    z-index: -10;
    width: 45rem;
    max-width: none;
    user-select: none;
    opacity: 0.05;
    filter: blur(1px);
}

@media (min-width: 768px) {
    .watermark {
        right: -8rem;
        width: 55rem;
    }
}

/* ---- Header ------------------------------------------------------------- */
/* Ingen border-bottom: fanebladene skal møde statusbjælken direkte, og en
   streg imellem ville skille dem ad. Bjælkens mørke kant er skillelinjen. */
.site-header {
    background-color: var(--background);
}

.site-header-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Sitets vandrette logo-lockup (hummer + wordmark). Kildefilen er kun 193×51,
   så højden holdes moderat — skaleres den op, bliver den uskarp. */
.brand-logo {
    height: 2.25rem;
    width: auto;
}

/* Menuen som faneblade. Ingen understregning og ingen fed vægt — fladen
   markerer i stedet. Fanebladene sidder helt nede på headerens underkant,
   så de rører statusbjælken nedenunder. */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.nav-link {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--muted);
    /* Sitets navy frem for den grå: fanerne skal kunne læses, ikke gættes */
    color: var(--primary);
    transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover {
    background-color: color-mix(in oklch, var(--muted) 70%, var(--border));
}

/* Den aktive fane bruger statusbjælkens tone, så fanen ser ud til at være
   én flade med bjælken nedenunder. Bjælken har en diagonal fade, så farven
   her er dens tone omkring øverste højre hjørne — hvor fanerne sidder. */
.nav-link.is-active {
    background-color: oklch(0.29 0.08 251);
    color: var(--primary-foreground);
    border-color: transparent;
}

/* Ombrudt menu på mobil: fanebladene rører ikke noget, så de får hel afrunding
   frem for en flad underkant, der peger på ingenting. */
@media (max-width: 767px) {
    .nav-link {
        border-bottom: 1px solid transparent;
        border-radius: 0.5rem;
    }
}

@media (min-width: 768px) {
    .site-header-inner {
        flex-direction: row;
        /* flex-end + negativ margin på nav'en = fanebladene flugter med
           headerens underkant og møder statusbjælken */
        align-items: flex-end;
        justify-content: space-between;
    }

    .site-nav {
        /* Modsvarer .site-header-inner's padding-bottom */
        margin-bottom: -1.5rem;
    }

    .brand-logo {
        height: 2.75rem;
    }
}

/* ---- Statusbjælke ------------------------------------------------------- */
/* Kun tallene — ingen overskrift. Dybden kommer fra en diagonal fade plus et
   blødt teal-skær i højre side, så det matcher hummeren i logoet. */
.statusbar {
    display: block;
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(60rem 20rem at 88% 120%,
                        color-mix(in oklch, var(--accent) 28%, transparent) 0%,
                        transparent 70%),
        linear-gradient(135deg,
                        oklch(0.33 0.085 250) 0%,
                        oklch(0.24 0.07 254) 100%);
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Hummeren dybt nede i bjælken. Ligger som pseudo-element frem for et lag i
   background-image, fordi opacity ikke kan sættes på et enkelt baggrundslag. */
.statusbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/img/lobster/blue-lobster.png");
    background-repeat: no-repeat;
    background-position: right -4rem center;
    background-size: auto 190%;
    opacity: 0.07;
    pointer-events: none;
}

.statusbar-inner {
    position: relative;
    padding-block: 2.25rem;
}

/* Stille label centreret over tallene — tallene er pointen, ikke overskriften.
   Luften omkring den giver bjælken plads til at ånde. */
.statusbar-head {
    margin-bottom: 1.75rem;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--primary-foreground) 45%, transparent);
}

.statusbar-head span {
    color: color-mix(in oklch, var(--primary-foreground) 55%, transparent);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Hvert tal i sin egen boks: svagt gennemsigtigt glas oven på bjælkens fade,
   med et lyst skær i toppen, så boksen har en retning.
   Boksen er et link til den kategori, tallet handler om. */
.metric {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid color-mix(in oklch, var(--primary-foreground) 12%, transparent);
    border-radius: var(--radius);
    background-image: linear-gradient(160deg,
                                      oklch(1 0 0 / 0.1) 0%,
                                      oklch(1 0 0 / 0.03) 45%,
                                      oklch(1 0 0 / 0) 100%);
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}

.metric:hover {
    border-color: color-mix(in oklch, var(--accent) 45%, transparent);
    background-color: oklch(1 0 0 / 0.05);
    transform: translateY(-2px);
}

/* Teal-streg langs overkanten — samme accent som logoet */
.metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
                                color-mix(in oklch, var(--accent) 70%, transparent),
                                transparent 85%);
}

.metric-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklch, var(--accent) 75%, white);
    margin-bottom: 0.375rem;
}

.metric-value {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.metric-change {
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.metric-change.is-flat {
    font-weight: 500;
    color: color-mix(in oklch, var(--primary-foreground) 60%, transparent);
}

.metric-change.is-up { color: var(--up); }
.metric-change.is-down { color: var(--down); }

/* Undertekst: ejendomsværdi under antal lejemål, BTC-beholdning under kryptoværdien */
.metric-sub {
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklch, var(--primary-foreground) 62%, transparent);
}

@media (min-width: 640px) {
    .metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .statusbar-inner { padding-block: 2.75rem; }
    .statusbar-head { margin-bottom: 2rem; }
    .metrics { gap: 1rem; }
    .metric-value { font-size: 1.75rem; }
}

/* ---- Overskrifter / hero ------------------------------------------------ */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
}






.page-header {
    margin-bottom: 2.5rem;
}

.page-intro {
    margin-top: 1rem;
    max-width: 52rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

@media (min-width: 768px) {
    .hero h1,
    .page-title {
        font-size: 3rem;
    }
}

/* ---- Indlægsliste ------------------------------------------------------- */
.section-label {
    margin-bottom: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted-foreground);
}




.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.post-meta-sep {
    color: var(--border);
}

/* Forfatter-byline: linker til Om mig, så både læser og Google kan se,
   hvem der har skrevet det */
.byline-link {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.byline-link:hover {
    color: var(--primary);
}




.post-empty {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* ---- Fremhævet indlæg (forsidens nyeste) -------------------------------- */
.featured {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background-color: var(--card);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.featured:hover {
    border-color: color-mix(in oklch, var(--accent) 50%, transparent);
    box-shadow: 0 0.75rem 2rem oklch(0.28 0.08 250 / 0.1);
}

.featured-img {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background-color: var(--muted);
}

.featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured:hover .featured-img img {
    transform: scale(1.03);
}

.featured-body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-self: center;
    padding: 0 1.5rem 1.5rem;
}

.featured-title {
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--primary);
    transition: color 0.15s;
}

.featured:hover .featured-title {
    color: var(--accent);
}

.featured-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.featured-more {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
}

@media (min-width: 768px) {
    /* Billedet fylder venstre halvdel, teksten står ved siden af */
    .featured {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .featured-img {
        height: 100%;
        aspect-ratio: auto;
    }

    .featured-body {
        padding: 2rem;
    }

    .featured-title {
        font-size: 1.75rem;
    }
}

/* ---- Kategorivisning: kort grupperet efter årstal ------------------------ */
.year-group {
    margin-bottom: 3rem;
}

/* Årstal + antal, med en streg der løber ud til højre kant */
.year-heading {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.year-heading span {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--primary);
}

.year-heading small {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-foreground);
    white-space: nowrap;
}

/* Stregen udfylder resten af linjen */
.year-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--card);
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
    border-color: color-mix(in oklch, var(--accent) 50%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem oklch(0.28 0.08 250 / 0.08);
}

/* Miniature. Billederne er 870×425, så 2:1 rammer dem uden at beskære skævt. */
.post-card-img {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background-color: var(--muted);
}

.post-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.post-card:hover .post-card-img img {
    transform: scale(1.04);
}

.post-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem 1.125rem 1.125rem;
}

.post-card-date {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.post-card-title {
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--primary);
}

.post-card-excerpt {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    /* To linjer holder kortene i samme højde og siden scanbar */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Tag-pille ---------------------------------------------------------- */
.tag-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.tag-realestate { background-color: var(--tag-realestate); color: var(--tag-realestate-fg); }
.tag-report { background-color: var(--tag-report); color: var(--tag-report-fg); }
.tag-stocks { background-color: var(--tag-stocks); color: var(--tag-stocks-fg); }
.tag-crowdlending { background-color: var(--tag-crowdlending); color: var(--tag-crowdlending-fg); }
.tag-bitcoin { background-color: var(--tag-bitcoin); color: var(--tag-bitcoin-fg); }

/* ---- Intro-boks (forsidens øverste element) ----------------------------- */
/* Erstatter det gamle hero: portræt + kort præsentation af bloggen. */
.intro {
    display: grid;
    gap: 1.75rem;
    margin-bottom: 4rem;
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background-image: linear-gradient(135deg,
                                      var(--card) 0%,
                                      color-mix(in oklch, var(--accent) 6%, var(--card)) 100%);
}

.intro-portrait {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 13rem;
    border-radius: var(--radius);
    object-fit: cover;
}

.intro-body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-self: center;
    color: var(--muted-foreground);
    line-height: 1.65;
}

.intro-title {
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--primary);
}

.intro-cta {
    margin-top: 0.25rem;
}

@media (min-width: 768px) {
    .intro {
        grid-template-columns: 13rem 1fr;
        gap: 2.25rem;
        padding: 2rem 2.25rem;
    }

    .intro-title {
        font-size: 2rem;
    }
}

/* Links i brødtekst. Den mørke navy stod for hårdt i den grå tekst — teal'en
   siger "link" uden at slå hul i afsnittet. Størrelsen arves, så et link ikke
   bliver mindre end teksten omkring det. */
/* Links i brødtekst: tekstens egen farve, understreget. Farvede links stak
   ud af afsnittet i stedet for bare at være læselige. */
.text-link {
    font-weight: 500;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

.text-link:hover {
    text-decoration-color: currentColor;
}


@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 180px 1fr;
        align-items: start;
    }

    .about-box h2 {
        font-size: 1.875rem;
    }
}

/* ---- Om mig-side -------------------------------------------------------- */
.about-page-grid {
    display: grid;
    gap: 2rem;
}

.about-page-portrait {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.about-page-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.about-more {
    font-style: italic;
    color: color-mix(in oklch, var(--muted-foreground) 80%, transparent);
}

/* Ét billede frem for en stribe — resten var uden relation til bloggen */


@media (min-width: 768px) {
    .about-page-grid {
        grid-template-columns: 220px 1fr;
        align-items: start;
    }
}

/* ---- Artikel ------------------------------------------------------------ */
.article-header {
    margin-bottom: 2rem;
}

.article-title {
    margin-top: 0.75rem;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--primary);
}

.article-hero {
    margin-block: 2rem;
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

/* Advarsel på indlæg over 3 år — skal ses, men ikke overdøve overskriften */
.post-age-note {
    margin-top: 1.25rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 0.375rem 0.375rem 0;
    background-color: var(--muted);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

/* Indlægsteksten kommer fra databasen som rå HTML fra det gamle CMS,
   så her stiles på element-niveau frem for klasser. */
.article-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--foreground);
}

.article-body p {
    margin-block: 1.25rem;
}

.article-body h2,
.article-body h3 {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }

/* Links i indlæg: samme farve som teksten, understregningen markerer.
   Den lyse teal forsvandt i brødteksten frem for at fremhæve. */
.article-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
    text-underline-offset: 3px;
}

.article-body a:hover {
    text-decoration-color: currentColor;
}

.article-body img {
    margin-block: 1.5rem;
    border-radius: 0.75rem;
}

.article-body ul,
.article-body ol {
    margin-block: 1.25rem;
    padding-left: 1.5rem;
}

.article-body li {
    margin-block: 0.5rem;
}

.article-body blockquote {
    margin: 1.5rem 0;
    border-left: 3px solid var(--accent);
    padding-left: 1.25rem;
    color: var(--muted-foreground);
    font-style: italic;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 1.5rem;
    font-size: 0.9375rem;
}

.article-body th,
.article-body td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.article-body th {
    background-color: var(--muted);
    font-weight: 600;
}

/* Brede tabeller må rulle i sig selv frem for at sprænge siden */
.article-scroll {
    overflow-x: auto;
}

@media (min-width: 768px) {
    .article-title { font-size: 2.5rem; }
}

/* ---- Relaterede indlæg -------------------------------------------------- */
.related {
    margin-top: 4rem;
    border-top: 1px solid var(--border);
    padding-top: 2.5rem;
}

.related-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.related-links a {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    color: var(--primary);
    transition: color 0.15s;
}

.related-links a:hover {
    color: var(--accent);
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
    margin-top: 6rem;
    border-top: 1px solid var(--border);
}

.footer-cols {
    display: grid;
    gap: 2rem;
    padding-block: 3rem 2rem;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--foreground);
    margin-bottom: 0.75rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.footer-blurb {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* Alle links i footeren: samme farve som teksten omkring dem, understregningen
   markerer i stedet. Ellers stak to blå ord ud af en ellers rolig footer. */
.site-footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.site-footer a:hover {
    text-decoration-color: currentColor;
}

.footer-social {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
}


.footer-bottom {
    border-top: 1px solid var(--border);
    padding-block: 1.5rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}


@media (min-width: 768px) {
    .footer-cols {
        grid-template-columns: 1fr 1fr 1.5fr;
    }
}

/* ---- Lightbox ----------------------------------------------------------- */
/* Billeder i indlæg åbnes i fuld størrelse — se js/lightbox.js */
.is-zoomable {
    cursor: zoom-in;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background-color: oklch(0.18 0.04 250 / 0.94);
    backdrop-filter: blur(6px);
}

.lightbox.is-open {
    display: flex;
    animation: lightbox-in 0.18s ease-out;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
}

.lightbox-figure img {
    max-width: 100%;
    /* Plads til billedteksten under */
    max-height: calc(100vh - 8rem);
    width: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 1.5rem 3rem oklch(0 0 0 / 0.45);
    cursor: default;
}

.lightbox-figure figcaption {
    max-width: 42rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: oklch(0.985 0.005 240 / 0.65);
}

.lightbox-close,
.lightbox-nav {
    flex: 0 0 auto;
    border: 0;
    background-color: oklch(1 0 0 / 0.08);
    color: oklch(0.985 0.005 240);
    cursor: pointer;
    border-radius: 9999px;
    line-height: 1;
    transition: background-color 0.15s;
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background-color: oklch(1 0 0 / 0.18);
}

.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
}

.lightbox-nav {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
    padding-bottom: 0.25rem;
}

@media (max-width: 640px) {
    .lightbox { padding: 0.75rem; }

    /* Pilene ville stjæle bredden fra billedet på en lille skærm —
       her navigeres med swipe/luk i stedet */
    .lightbox-nav { display: none !important; }
}

/* ---- 404 ---------------------------------------------------------------- */
.notfound {
    display: flex;
    min-height: 60vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: 1rem;
}

.notfound h1 {
    font-size: 4.5rem;
    color: var(--primary);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    border-radius: 0.375rem;
    background-color: var(--primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-foreground);
    transition: background-color 0.15s;
}

.btn-primary:hover {
    background-color: color-mix(in oklch, var(--primary) 90%, white);
}