/* ProTruck — dokumenter.css
   Dokument-siden /dokumenter/ (page-id 176) — tidl. §18.
   Flyttet fra css/custom.css (runde 5d); sektionsnummer og indhold
   er bevaret. Indlæses betinget i <head> — lige efter custom.css —
   af inc/pt-assets.php, på siden PAGE_DOKUMENTER
   (inc/pt-config.php).
   Cache-bustes via filemtime (ingen manuel versions-bump). */

/* =============================================================
   18. Dokument-siden — /dokumenter/ (page-id 176) · oplæg B
   Ren CSS mod uændret builder-markup (5 muted sektioner m. h2 +
   stablede uk-cards). Kort: hvid flade m. rød topkant (spec-kort-
   sproget fra §17, css/maskine-single.css), "Åben dokument"-knappen omstyles til ghost-link
   m. pil ("kun pilen er rød"-hover). Heroen er standard foto-hero
   (urørt — eyebrow/intro-eksperimentet fjernet på brugerønske).
   JS (js/dokumenter.js §11) sætter .pt-docsec--N-klasser (kategori-ikoner), bygger
   chip-baren (.pt-doc-chips) og indsætter sprog-metalinjen
   (.pt-doc-meta). UDEN JS er siden stadig fuldt restylet — kun
   ikoner/chips/meta udebliver.
   !important bruges KUN mod UIkits egne utility-!importants
   (uk-text-center, uk-margin-top) — markeret i kommentarer.
   ============================================================= */

/* Heroen er standard foto-hero som sitets øvrige (fx /kontakt/) —
   eyebrow/intro-pseudoelementerne + ekstra scrim fjernet 2026-08-25
   på brugerønske; H1 arver temaets uk-heading-2xlarge urørt. */

/* ── Kategori-chips (bygges af js/dokumenter.js §11) ───────────────── */
/* sticky under den ~80px header — samme mønster som maskine-singlens
   sektionsnav (.pt-mnav-section); baren er direkte barn af <main>,
   så den følger med gennem hele siden */
.pt-doc-chips {
    position: sticky;
    top: var(--pt-header-height, 80px);
    z-index: 50;
    background: #f7f7f7;
    border-bottom: 1px solid #e2e2e2;
}

.pt-doc-chips__inner {
    max-width: 900px; /* = sektionernes uk-container-small (officielt trin) */
    margin: 0 auto;
    padding: 16px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (min-width: 640px)  { .pt-doc-chips__inner { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px)  { .pt-doc-chips__inner { padding-left: 40px; padding-right: 40px; } }

/* mobil: én vandret scrollbar række i stedet for 5-6 stablede rækker */
@media (max-width: 639px) {
    .pt-doc-chips__inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pt-doc-chip { flex: none; white-space: nowrap; }
}

.pt-doc-chip {
    display: inline-block;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-left: 3px solid transparent;
    color: #444;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.pt-doc-chip:hover,
.pt-doc-chip.pt-doc-chip--on {
    border-color: #c4c4c4;
    border-left-color: var(--protruck-red);
    color: #111;
    text-decoration: none;
}

.pt-doc-chip:focus-visible {
    outline: 2px solid var(--protruck-red);
    outline-offset: 2px;
}

/* ── Sektioner: hvid flade, bredere indhold, anker-offset ───── */
.page-id-176 .uk-section-muted { background: #fff; }

/* sektionerne bruger builder-sidens egen uk-container-small (900) —
   KONVENTION (bruger, 2026-08-25): brug altid temaets officielle
   containertrin (750/900/1200/1400/1600), aldrig custom mellembredder */

.pt-docsec {
    /* ankerscroll lander under sticky header + sticky chip-bar (~66px) */
    scroll-margin-top: calc(var(--pt-header-height, 80px) + 86px);
}

/* ── Kategori-overskrift m. stregikon i mist-boks ───────────── */
.page-id-176 .uk-section-muted h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 22px;
    line-height: 1.25;
    margin: 0;
}

/* ikon-boksen findes kun når JS har sat .pt-docsec--N (bg-billedet
   sættes pr. kategori nedenfor — uden JS ingen tom boks) */
.pt-docsec h2::before {
    content: "";
    flex: none;
    width: 44px;
    height: 44px;
    background-color: #f3f3f3;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

.pt-docsec--1 h2::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf0921' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12'/%3E%3Cpath d='M3.5 10h17M8 14h4'/%3E%3C/svg%3E"); }
.pt-docsec--2 h2::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf0921' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.pt-docsec--3 h2::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf0921' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v11H4z'/%3E%3Cpath d='M9 7V5h6v2M4 12h16'/%3E%3C/svg%3E"); }
.pt-docsec--4 h2::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf0921' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l6-2v18M10 21h10V9l-6-2'/%3E%3Cpath d='M6.5 8h1M6.5 11.5h1M6.5 15h1M14 12h2M14 15.5h2'/%3E%3C/svg%3E"); }
.pt-docsec--5 h2::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf0921' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17'/%3E%3Cpath d='M8 12l3 3 6-7'/%3E%3C/svg%3E"); }

/* ── Kortgrid: h2 + kort ligger i samme .uk-width-1-1-kolonne ── */
.page-id-176 .uk-section-muted .uk-width-1-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.page-id-176 .uk-section-muted .uk-width-1-1 > h2 { grid-column: 1 / -1; }

/* ── Dokumentkort: rød topkant + hover-løft (spec-kort-sproget) ─ */
.page-id-176 .uk-section-muted .uk-card {
    display: flex; /* så inderste uk-grid kan strække til fuld korthøjde */
    margin: 0;
    background: #fff;
    box-shadow: none;
    border: 1px solid #e2e2e2;
    border-top: 3px solid var(--protruck-red);
    border-radius: 0;
    padding: 20px 22px 18px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.page-id-176 .uk-section-muted .uk-card:hover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

/* pdf.svg-kolonnen væk — ikonet bæres nu af kategori-overskriften */
.page-id-176 .uk-section-muted .uk-card [class*="uk-width-auto"] { display: none; }

/* indre gutter nulstilles (kolonne 1 er skjult) og kortindholdet
   stables som flex-kolonne så knappen kan bundforankres */
/* [uk-grid]-ATTRIBUTTEN bruges — .uk-grid-KLASSEN sættes først af
   UIkit ved init og kan derfor ikke bære styling her */
.page-id-176 .uk-section-muted .uk-card > [uk-grid] {
    display: flex; /* egen flex — UIkits .uk-grid{display:flex} kommer først ved JS-init */
    flex: 1;
    margin-left: 0;
    align-items: stretch; /* slår uk-flex-middle — ellers kan knappen ikke bundforankres */
}

.page-id-176 .uk-section-muted .uk-card .uk-width-expand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
}

.page-id-176 .uk-section-muted .uk-card .el-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 !important; /* slår uk-margin-top{!important} på titlen */
}

/* sprog-metalinje (indsættes af js/dokumenter.js §11) */
.pt-doc-meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a9a9a;
}

/* knappen bundforankres i kortet (:not(.el-title) — titlen bærer
   OGSÅ uk-margin-top-klassen og skal ikke skubbes ned) */
.page-id-176 .uk-section-muted .uk-card .uk-width-expand > .uk-margin-top:not(.el-title) {
    margin-top: auto !important; /* slår uk-margin-top{20px !important} */
}

/* ── "Åben dokument"-knap → ghost-link m. pil ───────────────── */
.page-id-176 .uk-section-muted a.el-link.uk-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
    line-height: 1.4;
    color: #212121;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

.page-id-176 .uk-section-muted a.el-link.uk-button-primary:hover,
.page-id-176 .uk-section-muted a.el-link.uk-button-primary:focus {
    background: transparent;
    color: #000;
}

.page-id-176 .uk-section-muted a.el-link.uk-button-primary::after {
    content: "→";
    color: #9a9a9a;
    transition: transform .18s ease, color .18s ease;
}

.page-id-176 .uk-section-muted .uk-card:hover a.el-link.uk-button-primary::after,
.page-id-176 .uk-section-muted a.el-link.uk-button-primary:focus-visible::after {
    color: var(--protruck-red);
    transform: translateX(4px);
}

.page-id-176 .uk-section-muted a.el-link.uk-button-primary:focus-visible {
    outline: 2px solid var(--protruck-red);
    outline-offset: 3px;
}

/* ── Mobil: én kolonne, mere luft mellem rækkerne, mindre typo ── */
@media (max-width: 959px) {
    .page-id-176 .uk-section-muted .uk-width-1-1 {
        grid-template-columns: 1fr;
        gap: 24px; /* 18 → 24: kortene stod for tæt i én kolonne */
    }
    /* mere luft mellem kategorierne (sidste kort → næste H2) */
    .page-id-176 .uk-section-muted { padding-top: 48px; }
    .page-id-176 .uk-section-muted h2 { font-size: 18px; gap: 12px; }
    .pt-docsec h2::before { width: 38px; height: 38px; background-size: 19px 19px; }
    .page-id-176 .uk-section-muted .uk-card { padding: 18px 18px 16px; }
    .page-id-176 .uk-section-muted .uk-card .el-title { font-size: 14px; }
    .page-id-176 .uk-section-muted a.el-link.uk-button-primary { font-size: 11.5px; }
    .pt-doc-meta { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-doc-chip,
    .page-id-176 .uk-section-muted .uk-card,
    .page-id-176 .uk-section-muted a.el-link.uk-button-primary::after { transition: none; }
    .page-id-176 .uk-section-muted .uk-card:hover { transform: none; }
}