/* Afklaring pages (TASK-161): hero with price facts, text + sticky quote form, mobile quote bar.
   Markup comes from scripts/afklaring-layout.py. Uses the site's tokens from style.css. */

.afk {
    --afk-ink: var(--color-text-dark, #111827);
    --afk-muted: #4b5563;
    --afk-tint: #eef4ff;
    --afk-warm: #fff7ea;
    --afk-warm-line: #f2c97d;
    --afk-line: var(--color-border, #e5e7eb);
    --afk-radius: 14px;
    margin: 0;
    color: var(--afk-ink);
}

/* ---------- Hero ---------- */
.afk-hero {
    background:
        radial-gradient(900px 320px at 85% -10%, rgba(37, 99, 235, .14), transparent 70%),
        linear-gradient(180deg, var(--afk-tint) 0%, #fff 100%);
    border-bottom: 1px solid var(--afk-line);
}
.afk-hero .container { padding-top: 0; padding-bottom: 0; }
.afk-hero__inner {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding-block: 2.5rem 1.75rem !important;
}
.afk-hero--media .afk-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.afk-eyebrow { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.afk-eyebrow a { color: var(--color-primary); text-decoration: none; }
.afk-eyebrow a::before { content: "← "; }
.afk .afklaring-page__title {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.afk-lead { font-size: 1.125rem; line-height: 1.65; color: #1f2937; max-width: 62ch; }
.afk-lead p { margin: 0 0 .6rem; }
.afk-byline { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 0; }
.afk-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.afk-byline p { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--afk-muted); }
.afk-byline a { color: var(--afk-ink); font-weight: 600; }
.afk-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.afk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 1.25rem; border-radius: 999px;
    font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.afk-btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-primary); }
.afk-btn--primary:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); }
.afk-btn--ghost { background: #fff; color: var(--afk-ink); border: 1px solid var(--color-border-dark, #d1d5db); }
.afk-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.afk-hero__media { margin: 0; position: relative; }
.afk-hero__media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 20px; box-shadow: 0 18px 40px -18px rgba(17, 24, 39, .45);
}
.afk-hero__media::after {
    content: ""; position: absolute; inset: auto -12px -12px auto; width: 45%; height: 45%;
    border-radius: 20px; background: var(--color-primary-light); z-index: -1;
}

/* Price facts */
.afk-facts {
    list-style: none; margin: 0; padding: 0 0 2rem;
    display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.afk-facts a {
    display: grid; gap: .15rem; height: 100%; box-sizing: border-box;
    padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--afk-line); border-radius: var(--afk-radius);
    text-decoration: none; color: var(--afk-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.afk-facts a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-primary); }
.afk-facts__name { font-size: .8125rem; font-weight: 600; color: var(--afk-muted); }
.afk-facts__value { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.afk-facts__note { font-size: .8125rem; color: var(--afk-muted); }

/* ---------- Layout ---------- */
.afk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 2.5rem;
    gap: 3rem;
    align-items: start;
}
.afk-main { min-width: 0; max-width: 720px; }
.afk-side { align-self: stretch; }
.afk-side__sticky { position: sticky; top: 88px; }

/* Table of contents */
.afk-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--afk-line); border-radius: var(--afk-radius); background: var(--color-bg-secondary, #f9fafb); }
.afk-toc__title { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--afk-muted); }
.afk-toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .3rem; columns: 2; }
.afk-toc a { color: var(--afk-ink); text-decoration: none; }
.afk-toc a:hover { color: var(--color-primary); text-decoration: underline; }

/* Price box (generated by fix-site-answers.py, inline style overridden) */
.afk-offer { scroll-margin-top: 90px; }
.afk .lc-guide-price {
    max-width: none !important; margin: 0 0 2rem !important; padding: 1.25rem 1.5rem !important;
    border-radius: var(--afk-radius); background: var(--afk-warm); border: 1px solid var(--afk-warm-line);
    scroll-margin-top: 90px;
}
.afk .lc-guide-price h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.afk .lc-guide-price h2::before { content: "\f53a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .5rem; color: #b7791f; }
.afk .lc-guide-price ul { margin: 0 0 .75rem; padding-left: 1.1rem; display: grid; gap: .5rem; }
.afk .lc-guide-price p { margin: 0; font-size: .9375rem; color: #374151; }

/* Category cards: compact, image left */
.afk .afklaring-page__categories { margin: 0 0 2.5rem; padding: 0; background: none; scroll-margin-top: 90px; }
.afk .afklaring-page__categories-title { font-size: 1.375rem; margin: 0 0 .25rem; }
.afk .afklaring-page__categories-subtitle { margin: 0 0 1rem; color: var(--afk-muted); font-size: .9375rem; }
.afk .afklaring-page__categories-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.afk .category-card {
    position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .85rem; align-items: center;
    padding: .6rem; border: 1px solid var(--afk-line); border-radius: var(--afk-radius); background: #fff; box-shadow: none;
    transition: border-color .15s ease, transform .15s ease;
}
.afk .category-card:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.afk .category-card__image { margin: 0; height: auto; }
.afk .category-card__image img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; display: block; }
.afk .category-card__content { padding: 0; }
.afk .category-card__title { font-size: 1rem; margin: 0 0 .15rem; }
.afk .category-card__title a { color: var(--afk-ink); text-decoration: none; }
.afk .category-card__title a::after { content: ""; position: absolute; inset: 0; }
.afk .category-card__headline, .afk .category-card__intro { display: none; }
.afk .category-card__button { all: unset; font-size: .8125rem; font-weight: 600; color: var(--color-primary); }
.afk .category-card__button::after { content: " →"; }

/* ---------- Text ---------- */
.afk .afklaring-page__body { font-size: 1.0625rem; line-height: 1.75; }
.afk .afklaring-page__body > p { max-width: 68ch; }
.afk .afklaring-page__body h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.75rem 0 .85rem; letter-spacing: -.01em; scroll-margin-top: 90px; }
.afk .afklaring-page__body h3 { font-size: 1.125rem; }
.afk .who-its-for { font-size: .9375rem; color: var(--afk-muted); border-left: 3px solid var(--color-primary-light); padding-left: .85rem; }
.afk-step { display: flex; gap: .75rem; align-items: flex-start; }
.afk-step__n {
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-top: -.1rem;
    border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 1rem; font-weight: 700;
}
.afk-related { margin: -.25rem 0 1rem; font-size: .875rem; }
.afk-related a { font-weight: 600; }

.afk-check { margin: 1rem 0 1.25rem; padding: 1rem 1.25rem; border-radius: var(--afk-radius); background: var(--color-bg-secondary, #f9fafb); border: 1px solid var(--afk-line); }
.afk-check__title { margin: 0 0 .5rem !important; font-weight: 600; font-size: .9375rem; }
.afk-check ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: .45rem; }
.afk-check li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.55; }
.afk-check li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem;
    position: absolute; left: 0; top: .2rem; width: 1.15rem; height: 1.15rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark);
}

.afk-callout { padding: .85rem 1.1rem; border-radius: 10px; font-size: 1rem; line-height: 1.6; }
.afk-callout--tip { background: var(--afk-tint); border-left: 4px solid var(--color-primary); }
.afk-callout--warn { background: var(--afk-warm); border-left: 4px solid #e8a33d; }

.afk-mistakes { list-style: none; padding: 0 !important; display: grid; gap: .75rem; counter-reset: afk; }
.afk-mistakes li { position: relative; padding: .9rem 1rem .9rem 3.25rem; border: 1px solid var(--afk-line); border-radius: var(--afk-radius); background: #fff; counter-increment: afk; }
.afk-mistakes li::before {
    content: counter(afk); position: absolute; left: 1rem; top: .9rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
    border-radius: 50%; background: #fde8e8; color: #b42318; font-weight: 700; font-size: .875rem;
}

.afk .faq-block { display: grid; gap: .6rem; margin: 0 0 1rem; }
.afk-faq { border: 1px solid var(--afk-line); border-radius: var(--afk-radius); background: #fff; }
.afk-faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.15rem; font-weight: 600; position: relative; line-height: 1.45; }
.afk-faq summary::-webkit-details-marker { display: none; }
.afk-faq summary::after { content: "+"; position: absolute; right: 1.15rem; top: .8rem; font-size: 1.4rem; font-weight: 400; color: var(--color-primary); }
.afk-faq[open] summary::after { content: "–"; }
.afk-faq__a { padding: 0 1.15rem 1rem; color: #374151; }
.afk-faq__a p { margin: 0 0 .5rem; }

.afk-chips { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .5rem; }
.afk-chips a { display: inline-block; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--afk-line); background: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.afk-chips a:hover { border-color: var(--color-primary); }

.afk .afklaring-page__ready-when {
    margin: 2.5rem 0 0; padding: 1.5rem 1.75rem; border-radius: var(--afk-radius);
    background: #ecfdf3; border: 1px solid #abefc6;
}
.afk .afklaring-page__ready-when h2 { margin: 0 0 .75rem; font-size: 1.25rem; color: #05603a; }
.afk .afklaring-page__ready-when ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* Quick answer / price table used by rewritten pages (TASK-162) */
.afk-answer { margin: 0 0 2rem; padding: 1.25rem 1.5rem; border-radius: var(--afk-radius); background: #fff; border: 2px solid var(--color-primary); box-shadow: var(--shadow-primary); }
.afk-answer__label { margin: 0 0 .35rem !important; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); }
.afk-answer p { margin: 0 0 .5rem; }
.afk-answer p:last-child { margin-bottom: 0; }
.afk-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--afk-line); border-radius: var(--afk-radius); }
.afk-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.afk-table th, .afk-table td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--afk-line); vertical-align: top; }
.afk-table th { background: var(--color-bg-secondary, #f9fafb); font-size: .8125rem; font-weight: 600; color: var(--afk-muted); }
.afk-table tr:last-child td { border-bottom: 0; }
.afk-rule { margin: 1rem 0 1.25rem; padding: .85rem 1.1rem; border-radius: 10px; background: var(--afk-tint); border-left: 4px solid var(--color-primary); }
.afk-rule strong:first-child { display: block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: .15rem; }

/* ---------- Quote form in the sidebar ---------- */
.afk-side .agent-cta { margin: 0; padding: 0; background: none; border: 0; scroll-margin-top: 90px; }
.afk-side .agent-cta__inner { display: block; max-width: none; padding: 0; }
.afk-side .agent-cta__pitch { display: none; }
.afk-side .agent-hero-card { box-shadow: 0 18px 40px -20px rgba(17, 24, 39, .35); border: 1px solid var(--afk-line); }

/* ---------- Expertise banner (author) ---------- */
.afk ~ .afklaring-page__expertise-banner, .afklaring-page__expertise-banner { margin-top: 3rem; padding: 2.5rem 0; background: #0f172a; color: #e5e7eb; }
.afklaring-page__expertise-inner { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; }
.afklaring-page__expertise-image { flex: 0 0 120px; max-width: 160px; }
.afklaring-page__expertise-image img { display: block; width: 100%; height: auto; border-radius: 999px; border: 3px solid rgba(248, 250, 252, .8); }
.afklaring-page__expertise-content { flex: 1 1 220px; font-size: .95rem; line-height: 1.6; }
.afklaring-page__expertise-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; color: #e5e7eb; }
.afklaring-page__expertise-banner a { color: #bfdbfe; text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- Mobile quote bar ---------- */
.afk-mobilebar { display: none; }

@media (max-width: 960px) {
    .afk-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .afk-main { max-width: none; }
    .afk-side__sticky { position: static; }
    .afk-side .agent-cta__pitch { display: block; margin-bottom: 1rem; }
}
@media (max-width: 760px) {
    .afk-hero--media .afk-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .afk-hero__media { order: -1; }
    .afk-hero__media img { aspect-ratio: 16 / 9; border-radius: 16px; }
    .afk-hero__media::after { display: none; }
    .afk-hero__inner { padding-block: 1.25rem 1.25rem !important; gap: 1.25rem; }
    .afk-toc ol { columns: 1; }
    .afk .afklaring-page__categories-grid { grid-template-columns: minmax(0, 1fr); }
    .afk .afklaring-page__body { font-size: 1rem; }
    .afk .afklaring-page__body h2 { font-size: 1.3rem; }
    .afk-mobilebar {
        display: flex; position: fixed; z-index: 50; left: 12px; right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        min-height: 52px; align-items: center; justify-content: center;
        border-radius: 999px; background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none;
        box-shadow: 0 12px 28px -10px rgba(37, 99, 235, .7); transition: opacity .2s ease, transform .2s ease;
    }
    .afk-mobilebar.is-hidden { opacity: 0; transform: translateY(150%); pointer-events: none; }
    .afklaring-page__expertise-inner { flex-direction: column; align-items: flex-start; }
    .afklaring-page__expertise-image { flex-basis: auto; max-width: 120px; }
    body:has(.afk-mobilebar) .site-footer { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .afk-btn, .afk-facts a, .afk .category-card, .afk-mobilebar { transition: none; }
}

/* Guide template v2 (TASK-265): compact tables, price details */
.afk-table--compact th, .afk-table--compact td { padding: .4rem .75rem; }
.price-facts__table.afk-table--compact td:last-child { white-space: nowrap; }
.afk-pricedetails { margin: 1rem 0 1.5rem; }
.afk-pricedetails > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.afk-pricedetails .price-facts { padding: .5rem 0 0; margin: 0; background: none; border: 0; }
.afk-pricedetails .price-facts__title { font-size: 1.125rem; margin: 0 0 .5rem; }
.afk-pricedetails > summary::before { content: "▸"; display: inline-block; margin-right: .5rem; transition: transform .15s ease; }
.afk-pricedetails[open] > summary::before { transform: rotate(90deg); }

/* ---- Visuelt system (TASK-1320, 2026-10-03): guiderne beholder den lyse læseflade, men får forsidens
   overskrift (Bricolage), lyskæde-knappen og navy accenter. Tokens i energy.css. ---- */
.afk, .afk-hero, .afk-mobilebar { --lc-night: #14224a; --lc-night-2: #1c2f63; --lc-amber: #ffb627; --lc-amber-hover: #ffc54f; --lc-mist: #f3f6fb; --lc-radius: 14px; --lc-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.afk .afklaring-page__title { font-family: var(--lc-display, inherit); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--lc-night, #14224a); }
.afk h2, .afk .afk-toc__title, .afk .afk-check__title { font-family: var(--lc-display, inherit); font-weight: 800; letter-spacing: -.01em; color: var(--lc-night, #14224a); }
.afk-hero { background: radial-gradient(900px 320px at 85% -10%, rgba(255, 182, 39, .18), transparent 65%), linear-gradient(180deg, #f3f6fb 0%, #fff 100%); }
.afk-hero__media::after { background: var(--lc-amber, #ffb627); opacity: .85; }
.afk-btn--primary { background: var(--lc-amber, #ffb627); color: var(--lc-night, #14224a); font-weight: 800; box-shadow: 0 6px 18px -8px rgba(255, 182, 39, .9); }
.afk-btn--primary:hover { background: var(--lc-amber-hover, #ffc54f); color: var(--lc-night, #14224a); }
.afk-btn:focus-visible { outline: 3px solid var(--lc-amber, #ffb627); outline-offset: 3px; }
.afk-facts a { border-top: 4px solid var(--lc-amber, #ffb627); }
.afk-facts a:hover { border-color: var(--lc-night, #14224a); border-top-color: var(--lc-amber, #ffb627); box-shadow: 0 10px 24px -18px rgba(20, 34, 74, .5); }
.afk-facts__value { font-family: var(--lc-display, inherit); font-weight: 800; color: var(--lc-night, #14224a); }
.afk-answer { border-color: var(--lc-night, #14224a); box-shadow: 0 18px 40px -26px rgba(20, 34, 74, .5); }
.afk-answer__label { color: var(--lc-night, #14224a); }
.afk .agent-hero-card__button--primary, a.afk-mobilebar { background: var(--lc-amber, #ffb627); border-color: var(--lc-amber, #ffb627); color: var(--lc-night, #14224a); font-weight: 800; border-radius: 999px; }