/*
Theme Name: Promote Media Child
Template: astra
Version: 2.3.0
Description: Astra child-tema for promotemedia.dk – global liquid-glass nav + custom footer.
*/

/* ════════════════════════════════════════════════════════════
   PROMOTE MEDIA – GLOBALE STILE (hele sitet)
   ------------------------------------------------------------
   Indeholder:
     • Farve-/radius-tokens (:root)            → deles af alle sider
     • Liquid-glass sticky nav + dropdown       → #masthead site-wide
     • Custom burger + mobil glas-bar + overlay → site-wide
     • Genbrugs-komponenter (.pm-btn, .pm-card, .pm-ico, .pm-section, .pm-eyebrow)
     • Custom footer (.pm-footer …)

   Tlf./mail spores via data-gtm-click="phone|email" (samme konvention
   på alle sider). Opret en Click-trigger i GTM på de attributter → GA4.
   ════════════════════════════════════════════════════════════ */

/* ── Typografi (overskrifter + UI/brødtekst) ──
   Fonts indlæses nu via functions.php (wp_enqueue_style + preconnect)
   i stedet for @import her. @import blokerer rendering, fordi browseren
   først skal hente style.css og DEREFTER font-CSS'en (serielt).
   Enqueue = parallel download => hurtigere LCP/FCP. */

/* ── Farve- og radius-tokens (globale) ── */
:root {
    --pm-bg:        #ffffff;
    --pm-bg-soft:   #f1f5fb;      /* blue-tinted soft */
    --pm-dark:      #070e1c;      /* deepest navy */
    --pm-dark-soft: #0b1a30;      /* mid navy */
    --pm-ink:       #091526;      /* dark navy text */
    --pm-muted:     #4e6580;      /* blue-gray muted */
    --pm-line:      #d8e4ef;      /* blue-tinted dividers */
    --pm-accent:    #2563eb;      /* brand accent (blå) */
    --pm-accent-d:  #1d4ed8;
    --pm-accent-sf: linear-gradient(150deg, #f0f6ff 0%, #dde9ff 100%);  /* blød gradient-chip (bruges kun som background:) */
    --pm-blue:      #2563eb;      /* accent blue til gradients */
    --pm-blue-s:    #1d4ed8;
    --pm-radius:    16px;
    --pm-maxw:      1160px;
}

/* ════════════════════════════════════════════════════════════
   GENBRUGS-KOMPONENTER
   ════════════════════════════════════════════════════════════ */

/* ── Inner-wrapper ── */
.pm-inner { max-width: var(--pm-maxw); margin: 0 auto; padding: 0 24px; }

/* ── Eyebrow ── */
.pm-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--pm-accent-d); }
.pm-eyebrow::before { content:""; width:24px; height:2px; background: var(--pm-accent); display:inline-block; border-radius:2px; }
.pm-eyebrow.on-dark { color:#6ea8ff; }
.pm-eyebrow.on-dark::before { background:#6ea8ff; }

/* ── Sections ── */
.pm-section { padding: 96px 0; }
.pm-section h2 { font-size: clamp(28px, 4vw, 44px); line-height:1.1; font-weight:800; letter-spacing:-0.022em; margin:16px 0 0; }
.pm-lead { font-size: 18px; color: var(--pm-muted); max-width: 720px; margin: 18px 0 0; line-height:1.7; font-weight:400; }

/* ── Knapper ── */
.pm-btn { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; text-decoration:none; padding:14px 26px; border-radius:999px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; letter-spacing:.01em; will-change:transform; }
.pm-btn-primary { background: linear-gradient(135deg, #2f6bf0 0%, #1d4ed8 100%); color:#fff; box-shadow: 0 6px 20px rgba(37,99,235,.34), 0 2px 6px rgba(29,78,216,.22); }
.pm-btn-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #2563eb 0%, #1a44bd 100%); box-shadow: 0 12px 32px rgba(37,99,235,.42), 0 4px 10px rgba(29,78,216,.28); }
.pm-btn-ghost { background: transparent; color: var(--pm-ink); border:1.5px solid var(--pm-line); }
.pm-btn-ghost:hover { border-color: var(--pm-accent); color: var(--pm-accent-d); transform: translateY(-2px); }
.pm-btn-light { background:#fff; color: var(--pm-dark); font-weight:800; }
.pm-btn-light:hover { transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.28); }
.pm-btn-outline-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.28); }
.pm-btn-outline-light:hover { border-color:#fff; transform: translateY(-2px); background:rgba(255,255,255,.07); }

/* Lås knappernes farver mod Astras blå link-farve (højere specificity) */
a.pm-btn,
a.pm-btn:visited { text-decoration:none; }
.pm-btn-primary,
.pm-btn-primary:hover,
.pm-btn-primary:focus,
.pm-btn-outline-light,
.pm-btn-outline-light:hover { color:#ffffff !important; }
.pm-btn-light,
.pm-btn-light:hover { color: var(--pm-dark) !important; }
.pm-btn-ghost { color: var(--pm-ink) !important; }
.pm-btn-ghost:hover { color: var(--pm-accent-d) !important; }

/* ── Cards ── */
.pm-grid { display:grid; gap:20px; margin-top:52px; }
.pm-grid-2 { grid-template-columns:repeat(2,1fr); }
.pm-grid-3 { grid-template-columns:repeat(3,1fr); }
.pm-grid-4 { grid-template-columns:repeat(4,1fr); }

.pm-card {
    background:var(--pm-bg);
    border:1px solid var(--pm-line);
    border-radius:var(--pm-radius);
    padding:28px;
    transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease;
    position:relative;
    overflow:hidden;
    will-change:transform;
}
.pm-card::before {
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(37,99,235,.04),transparent 60%);
    opacity:0;
    transition:opacity .3s ease;
}
.pm-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(9,21,38,.1); border-color:#c8dce8; }
.pm-card:hover::before { opacity:1; }
.pm-card .pm-ico { width:46px; height:46px; border-radius:12px; background:var(--pm-accent-sf); color:var(--pm-accent-d); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0; }
.pm-card h3 { font-size:16px; font-weight:700; margin:0 0 8px; letter-spacing:-0.02em; color:var(--pm-ink); }
.pm-card p { font-size:15px; color:var(--pm-muted); margin:0; line-height:1.65; }

.pm-card-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.pm-card-link p { margin-bottom:24px; }
.pm-card-link .pm-more { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--pm-accent-d) !important; text-decoration:none; background:var(--pm-accent-sf); padding:10px 18px; border-radius:999px; transition:background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease; }
.pm-card-link:hover .pm-more { background:linear-gradient(135deg,#2f6bf0 0%,#1d4ed8 100%); color:#fff !important; box-shadow:0 8px 20px rgba(37,99,235,.32); transform:translateY(-1px); }
.pm-card-link .pm-more svg { transition:transform .2s ease; }
.pm-card-link:hover .pm-more svg { transform:translateX(4px); }

/* Generel typografi for pm-komponenter */
.pm-card h3, .pm-step h3 { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; }
.pm-num, .pm-count, .pm-step-num { font-feature-settings: "tnum" 1; }

/* ════════════════════════════════════════════════════════════
   STICKY GLASS PILL NAV  (site-wide via #masthead)
   ════════════════════════════════════════════════════════════ */

/* Base: header altid fixed + helt transparent. Vi floater ÉN glas-pille
   og nulstiller alle Astras indlejrede wrappere så vi aldrig får
   "pille-i-pille". */
#masthead {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9998;
    transition: background .3s ease, box-shadow .3s ease;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Nulstil ALLE niveauer inde i headeren (fjerner dobbeltkanter/ringe) */
#masthead .main-header-bar-wrap,
#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap,
#masthead .site-header-primary-section-wrap,
#masthead .main-header-bar-wrap > div,
#masthead .ast-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Nulstil Astras LODRETTE padding på hele wrapper-kæden, så indholdet
   sidder præcist centreret i glaspillen. */
#masthead .main-header-bar-wrap,
#masthead .main-header-bar,
#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap,
#masthead .site-header-primary-section-wrap,
#masthead .site-primary-header-wrap > div,
#masthead .ast-builder-grid-row-container,
#masthead .ast-builder-grid-row-container-inner,
#masthead .ast-builder-grid-row,
#masthead .ast-builder-layout-element {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (min-width: 1180px) {
    /* ── Liquid Glass Pille ── */
    #masthead .pm-glass-pill,
    #masthead .pm-glass-pill.pm-glass-pill {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 12px auto !important;
        max-width: 1180px !important;
        width: calc(100% - 40px) !important;
        border-radius: 999px !important;
        min-height: 62px !important;
        height: 62px !important;
        padding: 0 !important;
        background: linear-gradient(180deg, rgba(20,30,52,.60) 0%, rgba(8,14,28,.50) 100%) !important;
        backdrop-filter: blur(22px) saturate(185%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(185%) !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        box-shadow: 0 10px 34px rgba(4,9,20,.42), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.16) !important;
    }

    #masthead .pm-glass-pill .ast-container {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 28px !important;
    }
    #masthead .pm-glass-pill .pm-nav-row { height: 62px !important; }
    #masthead .pm-glass-pill .pm-nav-cell,
    #masthead .pm-glass-pill .pm-nav-cell *,
    #masthead .pm-glass-pill .main-navigation,
    #masthead .pm-glass-pill .ast-builder-menu,
    #masthead .pm-glass-pill .site-header-primary-section-left,
    #masthead .pm-glass-pill .site-header-primary-section-center,
    #masthead .pm-glass-pill .site-header-primary-section-right {
        min-height: 0 !important;
    }

    #masthead .pm-glass-pill::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 46%);
        pointer-events: none;
        z-index: 0;
    }

    #masthead .pm-glass-pill .ast-builder-grid-row,
    #masthead .pm-glass-pill .main-header-bar {
        min-height: 54px !important;
        height: 54px !important;
        align-items: center !important;
        display: flex !important;
        width: 100% !important;
    }

    /* -- 3-zone layout: logo venstre · menu centreret · knap højre -- */
    #masthead .pm-glass-pill .pm-nav-row {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 54px !important;
        gap: 18px !important;
    }
    #masthead .pm-glass-pill .pm-nav-left {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
    }
    #masthead .pm-glass-pill .pm-nav-center {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #masthead .pm-glass-pill .pm-nav-right {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
    }
    #masthead .pm-nav-center .main-header-menu,
    #masthead .pm-nav-center .ast-nav-list,
    #masthead .pm-nav-center ul.menu {
        margin: 0 !important;
        width: auto !important;
    }

    /* Fallback hvis JS ikke når at køre: brug Astras egne sektioner */
    #masthead .pm-glass-pill .site-header-primary-section-left   { margin-right: auto !important; }
    #masthead .pm-glass-pill .site-header-primary-section-center { flex: 1 !important; justify-content: center !important; }
    #masthead .pm-glass-pill .site-header-primary-section-right  { margin-left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; }

    /* Logo */
    #masthead .pm-glass-pill .site-branding img,
    #masthead .pm-glass-pill .custom-logo,
    #masthead .pm-glass-pill .pm-nav-left img {
        max-height: 34px !important;
        width: auto !important;
    }

    /* Menu links */
    #masthead .main-header-menu > li > a,
    #masthead .ast-nav-list > li > a {
        padding: 8px 14px !important;
        font-size: 15px !important;
    }

    /* CTA-knap (i højre-cellen, flush mod kanten) */
    #masthead a[href*="gratis-kontogennemgang"] {
        background: linear-gradient(135deg, #2f6bf0 0%, #1d4ed8 100%) !important;
        color: #fff !important;
        padding: 9px 24px !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 14px rgba(37,99,235,.4) !important;
        margin: 0 !important;
    }
}

/* Slank afstand mellem menupunkterne + pæn hover-pille */
@media (min-width: 1180px) {
    #masthead .ast-nav-list,
    #masthead .main-header-menu {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    #masthead .ast-nav-list > li,
    #masthead .main-header-menu > li {
        margin: 0 !important;
    }
    #masthead .main-header-menu > li > a,
    #masthead .main-header-menu > li > .menu-link,
    #masthead .ast-nav-list > li > a {
        padding: 7px 14px !important;
        border-radius: 999px !important;
        line-height: 1.2 !important;
    }
    #masthead .main-header-menu > li > a:hover,
    #masthead .main-header-menu > li > .menu-link:hover,
    #masthead .ast-nav-list > li > a:hover {
        background: rgba(255,255,255,.07) !important;
        color: #ffffff !important;
    }
}
#masthead .ast-nav-list > li > a:hover,
#masthead .main-header-menu .menu-link:hover {
    color: #6ea8ff !important;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP DROPDOWN (Ydelser) – integreret glas-panel
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1180px) {

    /* Sørg for at INTET led mellem pillen og menupunktet klipper dropdownen */
    #masthead .pm-glass-pill,
    #masthead .pm-glass-pill .ast-container,
    #masthead .pm-nav-row,
    #masthead .pm-nav-cell,
    #masthead .pm-nav-center,
    #masthead .pm-nav-center nav,
    #masthead .pm-nav-center .main-navigation,
    #masthead .pm-nav-center .ast-builder-menu,
    #masthead .ast-nav-list,
    #masthead .main-header-menu,
    #masthead .menu-item-has-children {
        overflow: visible !important;
    }

    /* Parent-li = positions-kontekst for panel + bro */
    #masthead .main-header-menu .menu-item-has-children,
    #masthead .ast-nav-menu .menu-item-has-children {
        position: relative !important;
    }

    /* Glas-panelet */
    #masthead .main-header-menu .sub-menu,
    #masthead .ast-nav-menu .sub-menu,
    #masthead .main-navigation ul.children {
        display: block !important;
        position: absolute !important;
        top: calc(50% + 39px) !important;
        left: calc(-6px + var(--pm-sub-shift, 0px)) !important;
        right: auto !important;
        transform: translateY(-6px) scale(.98) !important;
        transform-origin: top left !important;
        min-width: 232px !important;
        width: max-content !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 6px !important;
        list-style: none !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(20,30,52,.66) 0%, rgba(8,14,28,.56) 100%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(185%) !important;
        backdrop-filter: blur(22px) saturate(185%) !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        box-shadow:
            0 16px 40px rgba(4,9,20,.5),
            inset 0 1px 0 rgba(255,255,255,.20),
            inset 0 -1px 1px rgba(0,0,0,.16) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .24s ease,
                    transform .28s cubic-bezier(.22,1,.36,1),
                    visibility 0s linear .3s !important;
        z-index: 10000 !important;
    }

    /* Top-highlight som pillen */
    #masthead .main-header-menu .sub-menu::after,
    #masthead .ast-nav-menu .sub-menu::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 44%);
        pointer-events: none;
        z-index: 0;
    }

    /* Usynlig bro der dækker mellemrummet mellem pille og panel */
    #masthead .main-header-menu .menu-item-has-children > .sub-menu::before,
    #masthead .ast-nav-menu .menu-item-has-children > .sub-menu::before {
        content: "";
        position: absolute;
        top: -12px; left: -10px; right: -10px; height: 18px;
    }

    /* ÅBEN: hover, tastatur-fokus ELLER .pm-open (JS-forsinkelse) */
    #masthead .main-header-menu .menu-item-has-children:hover > .sub-menu,
    #masthead .main-header-menu .menu-item-has-children:focus-within > .sub-menu,
    #masthead .main-header-menu .menu-item-has-children.pm-open > .sub-menu,
    #masthead .ast-nav-menu .menu-item-has-children:hover > .sub-menu,
    #masthead .ast-nav-menu .menu-item-has-children:focus-within > .sub-menu,
    #masthead .ast-nav-menu .menu-item-has-children.pm-open > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
        transition: opacity .24s ease,
                    transform .28s cubic-bezier(.22,1,.36,1),
                    visibility 0s !important;
    }

    /* Links i dropdown */
    #masthead .main-header-menu .sub-menu li,
    #masthead .ast-nav-menu .sub-menu li {
        margin: 0 !important;
        width: 100% !important;
        border: 0 !important;
    }
    #masthead .main-header-menu .sub-menu li a,
    #masthead .ast-nav-menu .sub-menu li a,
    #masthead .main-header-menu .sub-menu li .menu-link,
    #masthead .ast-nav-menu .sub-menu li .menu-link {
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        margin: 1px 0 !important;
        padding: 10px 14px !important;
        border: 0 !important;
        border-radius: 11px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: rgba(232,240,255,.82) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        background: transparent !important;
        transition: background .18s ease, color .18s ease !important;
    }
    #masthead .main-header-menu .sub-menu li a:hover,
    #masthead .ast-nav-menu .sub-menu li a:hover,
    #masthead .main-header-menu .sub-menu li a:focus,
    #masthead .ast-nav-menu .sub-menu li a:focus {
        background: rgba(255,255,255,.09) !important;
        color: #ffffff !important;
    }

    #masthead .sub-menu .ast-menu-toggle,
    #masthead .sub-menu .ast-header-navigation-arrow { color: inherit !important; background: transparent !important; }
}

/* ════════════════════════════════════════════════════════════
   CUSTOM BURGER + MOBIL MENU  (site-wide)
   ════════════════════════════════════════════════════════════ */

/* Skjul Astras standard mobile trigger OG off-canvas menu under 1180px */
@media (max-width: 1179px) {
    .ast-mobile-menu-trigger,
    .ast-mobile-menu-trigger-fill,
    .ast-mobile-menu-trigger-minimal,
    .ast-button-wrap .menu-toggle,
    .ast-header-break-point .menu-toggle,
    button.menu-toggle,
    .main-header-menu-toggle,
    #ast-mobile-header,
    .ast-mobile-header-wrap,
    .main-navigation .menu-toggle {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
    }
    .ast-mobile-header-wrap .main-header-menu,
    .ast-mobile-menu-buttons {
        display: none !important;
    }
    /* Skjul først Astra-headeren, NÅR JS faktisk har bygget glas-baren.
       Hvis JS er langsom eller fejler, bevares en brugbar header i stedet
       for et tomt eller halvfærdigt område. */
    body.pm-mobile-nav-ready #masthead {
        display: none !important;
    }
}

/* ── Mobil glas-bar (logo + burger samlet, fast i toppen) ── */
.pm-mobile-bar {
    display: none;
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 10002;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 60px;
    padding: 0 10px 0 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(20,30,52,.62) 0%, rgba(8,14,28,.54) 100%);
    backdrop-filter: blur(22px) saturate(185%);
    -webkit-backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        0 10px 30px rgba(4,9,20,.42),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -1px 1px rgba(0,0,0,.16);
    overflow: hidden;
    transition: opacity .3s ease, transform .3s ease;
}
.pm-mobile-bar::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 48%);
    pointer-events: none;
}
.pm-mobile-bar-logo {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.pm-mobile-bar-logo img {
    height: 38px;
    width: auto;
    max-width: 168px;
    object-fit: contain;
    display: block;
}
@media (max-width: 1179px) {
    body.pm-mobile-nav-ready .pm-mobile-bar { display: flex; }
}
@media (min-width: 1180px) {
    .pm-mobile-bar { display: none !important; }
}
body.pm-nav-open .pm-mobile-bar {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Burger inde i glas-baren ── */
.pm-burger {
    display: none;
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    flex-shrink: 0;
    transition: background .25s ease, border-color .25s ease;
}
.pm-burger:hover { background: rgba(37,99,235,.30); border-color:rgba(125,170,255,.4); }
.pm-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, width .3s ease;
    transform-origin: center;
}
.pm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pm-burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.pm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1179px) {
    .pm-burger { display: flex; }
}
@media (min-width: 1180px) {
    .pm-burger { display: none !important; }
}

/* ── Mobil glass menu overlay ── */
.pm-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.pm-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition-delay: 0s;
}
.pm-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,8,18,.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pm-mobile-menu-inner {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    background: rgba(7,14,28,.88);
    backdrop-filter: blur(36px) saturate(200%);
    -webkit-backdrop-filter: blur(36px) saturate(200%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 24px 24px 28px;
    box-shadow:
        0 32px 80px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 0.5px rgba(37,99,235,.10);
    transform: translateY(-10px) scale(.97);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}
.pm-mobile-menu-inner::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.18), transparent 70%);
    pointer-events: none;
}
.pm-mobile-menu.is-open .pm-mobile-menu-inner {
    transform: translateY(0) scale(1);
}
.pm-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.pm-mobile-menu-logo {
    height: 30px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}
.pm-mobile-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 0;
    transition: background .2s ease, border-color .2s ease;
}
.pm-mobile-close svg { width: 16px; height: 16px; display: block; }
.pm-mobile-close:hover { background: rgba(37,99,235,.28); border-color: rgba(125,170,255,.4); }
.pm-mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pm-mobile-nav-list li a {
    display: block;
    padding: 13px 16px;
    color: rgba(255,255,255,.85) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
    letter-spacing: -.005em;
}
.pm-mobile-nav-list li a:hover {
    background: rgba(255,255,255,.06);
    color: #6ea8ff !important;
}
.pm-mobile-has-children > .pm-mobile-parent {
    font-weight: 700 !important;
}
.pm-mobile-sub {
    list-style: none;
    margin: 0 0 6px 14px;
    padding: 2px 0 2px 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 2px solid rgba(95,150,255,.40);
}
.pm-mobile-sub li a {
    display: block;
    padding: 11px 14px;
    color: rgba(255,255,255,.66) !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
}
.pm-mobile-sub li a:hover {
    background: rgba(255,255,255,.06);
    color: #6ea8ff !important;
}
.pm-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
}
.pm-mobile-cta a {
    display: block; text-align: center; padding: 15px;
    border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pm-mobile-cta a:first-child {
    background: linear-gradient(135deg, #2f6bf0 0%, #1d4ed8 100%);
    color: #fff; box-shadow: 0 6px 20px rgba(37,99,235,.36);
}
.pm-mobile-cta a:first-child:hover { background: linear-gradient(135deg, #2563eb 0%, #1a44bd 100%); transform: translateY(-1px); }
.pm-mobile-cta a:not(:first-child) {
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.12); font-weight: 600;
}
.pm-mobile-cta a:not(:first-child):hover { background: rgba(255,255,255,.1); }
.pm-mobile-contact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}
.pm-mobile-contact a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 14px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    color: rgba(255,255,255,.85);
    font-weight: 600; font-size: 12.5px; line-height: 1.3;
    text-decoration: none; text-align: center;
    transition: background .2s ease, border-color .2s ease;
}
.pm-mobile-contact a span { white-space: nowrap; }
.pm-mobile-contact a[href^="mailto:"] span { font-size: 11.5px; letter-spacing: -0.01em; }
.pm-mobile-contact a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.pm-mobile-contact svg { color: #6ea8ff; flex-shrink: 0; }

/* Body no-scroll når menuen er åben */
body.pm-nav-open { overflow: hidden !important; }

/* ════════════════════════════════════════════════════════════
   CUSTOM FOOTER  (site-wide, erstatter Astras footer)
   ════════════════════════════════════════════════════════════ */

/* Skjul Astras footer */
.site-footer,
#colophon,
.ast-small-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap { display:none !important; }

.pm-footer {
    position: relative;
    background: linear-gradient(160deg, #070e1c 0%, #0a1530 55%, #0c2052 100%);
    color: #fff;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pm-footer .pm-inner { position: relative; z-index: 3; }
.pm-footer .pm-deco img { opacity:.08; }
.pm-footer .pm-fd1 { height:120px; top:12%; left:4%; }
.pm-footer .pm-fd2 { height:84px; top:54%; right:8%; }
.pm-footer .pm-fd3 { height:70px; bottom:14%; left:38%; }
.pm-footer .pm-fd4 { height:92px; top:24%; right:30%; }

.pm-footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding: 76px 0 54px;
}
.pm-footer-brand-logo { height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; margin-bottom: 20px; }
.pm-footer-tagline { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 320px; margin: 0 0 22px; }

.pm-footer-col h4 {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #6ea8ff; margin: 4px 0 18px;
}
.pm-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pm-footer-col ul li a {
    color: rgba(255,255,255,.72) !important;
    text-decoration: none; font-size: 14.5px;
    transition: color .2s ease, padding-left .2s ease;
}
.pm-footer-col ul li a:hover { color: #6ea8ff !important; padding-left: 4px; }

.pm-footer-contact { display: flex; flex-direction: column; gap: 14px; }
.pm-footer-contact a, .pm-footer-contact span {
    display: inline-flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,.78) !important; text-decoration: none; font-size: 14.5px;
    transition: color .2s ease;
}
.pm-footer-contact a:hover { color: #6ea8ff !important; }
.pm-footer-contact svg { flex: 0 0 auto; color: #6ea8ff; }

.pm-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    padding: 22px 0 30px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: 13.5px; color: rgba(255,255,255,.5);
}
.pm-footer-bottom-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pm-footer-bottom-links a { color: rgba(255,255,255,.55) !important; text-decoration: none; transition: color .2s ease; }
.pm-footer-bottom-links a:hover { color: #6ea8ff !important; }

/* Dekorative svævende logoer (footer bruger .pm-deco/.pm-float) */
.pm-footer .pm-deco { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.pm-footer .pm-deco img { position:absolute; width:auto; will-change:transform; }

@media (max-width: 900px) {
    .pm-footer-top { grid-template-columns: 1fr 1fr; gap: 36px 28px; padding: 56px 0 40px; }
    .pm-footer-brand { grid-column: 1 / -1; }
    .pm-footer .pm-fd3 { display: none; }
}
@media (max-width: 560px) {
    .pm-footer-top { grid-template-columns: 1fr; gap: 32px; }
    .pm-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) {
    .pm-float { transform: none !important; }
}


/* =================================================================== */
/* ===========  VIDEN-ARTIKLER — delt CSS (tilføjet)  ================ */
/* ===========  Scoped under .pm-google-lp .pm-art      ============== */
/* =================================================================== */
/* =============================================================
   VIDEN-ARTIKLER — delt CSS (indsæt ÉN gang i style.css)
   Scoped under .pm-google-lp så den deler tokens med resten.
   Bruges af alle /viden/[slug]/ artikel-templates.
   ============================================================= */

.pm-google-lp .pm-art .pm-inner{max-width:760px;margin:0 auto;padding:0 24px}
.pm-google-lp .pm-art .pm-inner--wide{max-width:1100px}

/* Brødkrumme */
.pm-bc{padding:26px 0 0;font-size:.85rem;color:var(--pm-muted)}
/* Skub artikel-indholdet ned under den fixed glas-header, så brødkrummen
   ikke længere lægger sig OP i menu-zonen (så det lignede, at "stien"
   havde erstattet menuen). Rammer kun artikel-sider (.pm-wrap > .pm-bc),
   ikke forside/hub/cluster som selv har top-luft via deres hero. */
.pm-google-lp .pm-wrap > .pm-bc{padding-top:104px !important}
@media (max-width:1179px){ .pm-google-lp .pm-wrap > .pm-bc{padding-top:84px !important} }
.pm-bc a{color:var(--pm-muted);text-decoration:none}
.pm-bc a:hover{color:var(--pm-accent)}
.pm-bc span{margin:0 7px;opacity:.5}

/* Artikel-hero */
.pm-art-hero{padding:22px 0 8px}
.pm-art-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pm-accent)}
.pm-art-hero h1{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0}
.pm-art-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0 0;font-size:.88rem;color:var(--pm-muted)}
.pm-art-meta .pm-dot{width:4px;height:4px;border-radius:50%;background:var(--pm-line);display:inline-block}
.pm-art-lead{font-size:1.18rem;line-height:1.6;color:var(--pm-ink);margin:22px 0 0;font-weight:500}

/* Prosa */
.pm-prose{padding:8px 0 0;font-size:1.06rem;line-height:1.72;color:#243244}
.pm-prose h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.02em;color:var(--pm-ink);margin:44px 0 14px;scroll-margin-top:90px}
.pm-prose h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:1.22rem;color:var(--pm-ink);margin:30px 0 10px}
.pm-prose p{margin:0 0 18px}
.pm-prose a{color:var(--pm-accent-d);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.pm-prose a:hover{color:var(--pm-accent)}
.pm-prose strong{font-weight:700;color:var(--pm-ink)}
.pm-prose ul,.pm-prose ol{margin:0 0 18px;padding-left:24px}
.pm-prose li{margin:0 0 9px}
.pm-prose ul li::marker{color:var(--pm-accent)}
.pm-prose blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--pm-accent);font-size:1.12rem;font-style:italic;color:var(--pm-ink)}

/* Nøglepunkter-boks */
.pm-keys{background:var(--pm-accent-sf);border:1px solid #cfe0fb;border-radius:var(--pm-radius);padding:22px 24px;margin:8px 0 30px}
.pm-keys h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:1.05rem!important;font-weight:800;margin:0 0 12px!important;color:var(--pm-accent-d)}
.pm-keys ul{margin:0;padding-left:20px}
.pm-keys li{margin:0 0 8px;font-size:.98rem;color:#1f3350}
.pm-keys li::marker{color:var(--pm-accent)}

/* Callout / tip */
.pm-callout{background:#fff;border:1px solid var(--pm-line);border-left:4px solid var(--pm-accent);border-radius:12px;padding:18px 22px;margin:24px 0;font-size:.99rem;color:#243244}
.pm-callout strong{color:var(--pm-ink)}

/* Tabel */
.pm-prose .pm-table-wrap{overflow-x:auto;margin:22px 0}
.pm-prose table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:460px}
.pm-prose th,.pm-prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--pm-line)}
.pm-prose thead th{background:var(--pm-bg-soft);font-weight:700;color:var(--pm-ink);font-size:.9rem}
.pm-prose tbody tr:hover{background:#fafcff}

/* Inline CTA-boks */
.pm-cta-box{background:linear-gradient(135deg,#f3f8ff,#eaf1ff);border:1px solid #cfe0fb;border-radius:var(--pm-radius);padding:26px;margin:32px 0;text-align:center}
.pm-cta-box h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:1.25rem;margin:0 0 8px;color:var(--pm-ink)}
.pm-cta-box p{margin:0 0 18px;color:var(--pm-muted);font-size:1rem}
.pm-cta-box .pm-btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--pm-accent);color:#fff;font-weight:600;padding:13px 24px;border-radius:12px;text-decoration:none;box-shadow:0 8px 22px rgba(37,99,235,.3)}
.pm-cta-box .pm-btn-primary:hover{transform:translateY(-2px)}

/* FAQ (deler mønster med cluster-sider) */
.pm-art .pm-faq{margin:14px 0 0}
.pm-art .pm-faq details{border:1px solid var(--pm-line);border-radius:12px;margin:0 0 12px;background:#fff;overflow:hidden}
.pm-art .pm-faq summary{cursor:pointer;padding:17px 20px;font-weight:700;font-size:1.02rem;color:var(--pm-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.pm-art .pm-faq summary::-webkit-details-marker{display:none}
.pm-art .pm-faq summary::after{content:"+";font-size:1.4rem;color:var(--pm-accent);font-weight:400;transition:transform .2s ease}
.pm-art .pm-faq details[open] summary::after{transform:rotate(45deg)}
.pm-art .pm-faq-a{padding:0 20px 18px;margin:0;color:#3a4a5e;line-height:1.65}
.pm-art .pm-faq-cta{margin:18px 0 0;font-size:.97rem;color:var(--pm-muted)}

/* Relateret-læsning kort */
.pm-relread{padding:8px 0 0}
.pm-relread h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:1.4rem;margin:0 0 18px;color:var(--pm-ink)}
.pm-rel-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-rel-link{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border:1px solid var(--pm-line);border-radius:12px;padding:15px 18px;text-decoration:none;color:var(--pm-ink);font-weight:600;font-size:.98rem;transition:border-color .16s,transform .16s}
.pm-rel-link:hover{border-color:var(--pm-accent);transform:translateY(-2px)}
.pm-rel-ar{color:var(--pm-accent);flex:0 0 auto}

/* Afsluttende CTA-band (deler mønster med cluster-sider) */
.pm-art .pm-band{position:relative;margin:64px 0 88px;overflow:hidden}
.pm-art .pm-band .pm-inner{position:relative;overflow:hidden;background:linear-gradient(135deg, var(--pm-dark) 0%, var(--pm-dark-soft) 60%, #0d2256 100%);border-radius:24px;padding:48px 40px;text-align:center;max-width:1100px;margin:0 auto}
.pm-art .pm-band .pm-deco{position:absolute;inset:0;pointer-events:none;opacity:.7}
.pm-art .pm-band .pm-deco span{position:absolute;border-radius:50%;filter:blur(60px)}
.pm-art .pm-band .pm-deco span:nth-child(1){width:240px;height:240px;background:rgba(58,123,247,.4);top:-70px;right:-30px}
.pm-art .pm-band .pm-deco span:nth-child(2){width:200px;height:200px;background:rgba(58,123,247,.25);bottom:-80px;left:-20px}
.pm-art .pm-band h2{position:relative;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;color:#fff;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin:0}
.pm-art .pm-band p{position:relative;color:#b9c8de;font-size:1.03rem;line-height:1.6;margin:13px auto 0;max-width:500px}
.pm-art .pm-band-cta{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.pm-art .pm-band-cta .pm-btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--pm-accent);color:#fff;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(37,99,235,.34)}
.pm-art .pm-band-cta .pm-tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:1.03rem;text-decoration:none;padding:13px 22px;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;background:transparent}
.pm-art .pm-band-cta .pm-tel span{color:#8fb4f5;font-weight:600}

/* Reveal (SEO-sikker: indhold synligt uden JS) */
.pm-anim .pm-reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.pm-anim .pm-reveal.is-in{opacity:1;transform:none}

@media(max-width:620px){
  .pm-rel-grid2{grid-template-columns:1fr}
  .pm-prose{font-size:1.02rem}
  /* Kompakt bund-CTA på mobil (var alt for stor / passede ikke designet) */
  .pm-art .pm-band{margin:44px 0 56px}
  .pm-art .pm-band .pm-inner{padding:30px 22px;border-radius:18px;margin-left:16px;margin-right:16px}
  .pm-art .pm-band h2{font-size:1.32rem}
  .pm-art .pm-band p{font-size:.97rem;line-height:1.55;margin-top:11px}
  .pm-art .pm-band-cta{flex-direction:column;gap:11px;margin-top:20px}
  .pm-art .pm-band-cta .pm-btn-primary,
  .pm-art .pm-band-cta .pm-tel{width:100%;justify-content:center;padding:13px 20px;font-size:.97rem}
}

/* =================================================================== */
/* ===  NITROPACK — SKJUL BRANDING-BADGE PÅ ALLE SIDER            === */
/* =================================================================== */
#nitropack-badge,
.nitropack-badge,
[id^="nitropack"],
[class^="nitropack"],
a[href*="nitropack.io"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =================================================================== */
/* Tvinger Astras content-wrappers til fuld bredde på ALLE .pm-google-lp
   sider (forside, cluster, viden-hub OG viden-artikler). Uden denne
   regel beholdt artikel-siderne Astras boksede/flydende layout, så den
   globale footer "hoppede op" ved siden af indholdet i stedet for under.
   Forside/cluster/hub havde reglen inline — den lå bare ikke i den delte
   artikel-CSS. Nu gælder den globalt for alle viden-sider. */
.pm-google-lp #page,
.pm-google-lp .site,
.pm-google-lp #content,
.pm-google-lp .site-content,
.pm-google-lp #content .ast-container,
.pm-google-lp #content .ast-container-fluid,
.pm-google-lp #primary,
.pm-google-lp .content-area,
.pm-google-lp .site-content .ast-container,
.pm-google-lp .entry-content,
.pm-google-lp .ast-article-single,
.pm-google-lp .ast-article-post {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    float: none !important;
}
.pm-google-lp #content .ast-container { display: block !important; }
.pm-google-lp #primary { clear: both !important; }
html, body.pm-google-lp { overflow-x: hidden !important; max-width: 100% !important; }
.pm-google-lp .entry-header,
.pm-google-lp .ast-single-post-order,
.pm-google-lp .post-thumb { display: none !important; }

/* =================================================================== */
/* ===  GLAS-NAV CSS-DREVET (uafhængig af JS) — fix: menu forsvinder === */
/* =================================================================== */
/* Tidligere blev HELE glas-udseendet kun tilføjet, når pm-nav.js nåede at
   sætte .pm-glass-pill på baren. Hvis JS blev forsinket/optimeret væk
   (fx NitroPack), stod headeren bar+transparent → den hvide menu blev
   USYNLIG på lyse artikel-sider og lignede "Astra-menuen" på hubben.
   Her gør vi Astras EGEN primær-bar til glas-pillen direkte i CSS, så
   menuen ALTID er synlig og ens på alle sider — også før/uden JS.
   pm-nav.js centrerer stadig menuen bagefter som forbedring, men
   udseende + læsbarhed afhænger ikke længere af JS. */
@media (min-width: 1180px) {
    #masthead .ast-primary-header-bar.main-header-bar,
    #masthead .main-header-bar {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 12px auto !important;
        max-width: 1180px !important;
        width: calc(100% - 40px) !important;
        border-radius: 999px !important;
        min-height: 62px !important;
        height: 62px !important;
        background: linear-gradient(180deg, rgba(20,30,52,.60) 0%, rgba(8,14,28,.50) 100%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(185%) !important;
        backdrop-filter: blur(22px) saturate(185%) !important;
        border: 1px solid rgba(255,255,255,.13) !important;
        box-shadow: 0 10px 34px rgba(4,9,20,.42), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.16) !important;
    }

    /* Logo holdes i pille-størrelse ALLEREDE FØR pm-nav.js kører, så der
       ikke er et glimt af Astras store standard-logo (FOUC) ved sideskift.
       Tidligere lå 34px-grænsen kun bag .pm-glass-pill, som først sættes
       af JS — derfor det korte glimt. Her gælder den med det samme. */
    #masthead .custom-logo,
    #masthead .site-logo-img img,
    #masthead .site-branding img,
    #masthead .ast-site-identity img,
    #masthead .site-title img {
        max-height: 34px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Menupunkter er ALTID hvide og læsbare på den mørke pille
       (uanset Astras egne indstillinger og uanset sidens baggrund). */
    #masthead .main-header-menu > li > a,
    #masthead .main-header-menu > li > .menu-link,
    #masthead .ast-nav-list > li > a,
    #masthead .ast-nav-menu > li > a,
    #masthead .site-title a {
        color: #ffffff !important;
    }

    /* ── FØR-JS LAYOUT (anti-hop) ────────────────────────────────────
       Placér logo, menu og knap PRÆCIS hvor pm-nav.js senere placerer
       dem i 3-zone-rækken, så menutekst og knap ikke "hopper", når
       scriptet overtager. JS-rækken har indholdet i .ast-container med
       28px indrykning: logo flush venstre (28px), menu centreret over
       pillen, knap flush højre (28px). Det matcher vi her med absolut
       placering ift. pillen (position:relative). Menuens flex + gap:2px
       arves fra den globale regel, så punkt-afstanden er identisk
       før/efter. Gælder kun før .pm-nav-built er sat — JS-rækken vinder. */

    /* Neutralisér Astras indre wrappere som positionerings-kontekst, så
       de absolutte elementer forankres til selve pillen (ikke en wrapper). */
    #masthead .main-header-bar:not(.pm-nav-built) .ast-container,
    #masthead .ast-primary-header-bar:not(.pm-nav-built) .ast-container,
    #masthead .main-header-bar:not(.pm-nav-built) .site-primary-header-wrap,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-builder-grid-row,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-builder-grid-row-container,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-builder-grid-row-container-inner,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-builder-layout-element,
    #masthead .main-header-bar:not(.pm-nav-built) .site-header-primary-section-left,
    #masthead .main-header-bar:not(.pm-nav-built) .site-header-primary-section-center,
    #masthead .main-header-bar:not(.pm-nav-built) .site-header-primary-section-right,
    #masthead .main-header-bar:not(.pm-nav-built) .main-navigation,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-builder-menu {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Logo: absolut, 28px fra venstre (= JS-rækkens venstre-celle). */
    #masthead .main-header-bar:not(.pm-nav-built) .site-branding,
    #masthead .ast-primary-header-bar:not(.pm-nav-built) .site-branding {
        position: absolute !important;
        left: 28px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    /* Menu: absolut, fuld bredde, punkter centreret (= JS-rækkens center).
       display:flex + gap:2px arves fra den globale menu-regel ovenfor, så
       afstanden mellem punkterne er identisk før/efter JS. */
    #masthead .main-header-bar:not(.pm-nav-built) .main-header-menu,
    #masthead .main-header-bar:not(.pm-nav-built) .ast-nav-menu,
    #masthead .main-header-bar:not(.pm-nav-built) ul.menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        justify-content: center !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Knap (sidste menupunkt): absolut, 28px fra højre (= JS-højre-celle). */
    #masthead .main-header-bar:not(.pm-nav-built) .main-header-menu > li:has(> a[href*="gratis-kontogennemgang"]),
    #masthead .main-header-bar:not(.pm-nav-built) .ast-nav-menu > li:has(> a[href*="gratis-kontogennemgang"]),
    #masthead .main-header-bar:not(.pm-nav-built) .main-header-menu > li:last-child {
        position: absolute !important;
        right: 28px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 3 !important;
    }

    /* Knappens link: fuld pille-størrelse også før JS (= JS-rækken), så den
       ikke skifter størrelse. Overrider menu-link-paddingen via specificitet. */
    #masthead .main-header-bar:not(.pm-nav-built) .main-header-menu > li > a[href*="gratis-kontogennemgang"],
    #masthead .ast-primary-header-bar:not(.pm-nav-built) .main-header-menu > li > a[href*="gratis-kontogennemgang"] {
        display: inline-flex !important;
        align-items: center !important;
        background: linear-gradient(135deg, #2f6bf0 0%, #1d4ed8 100%) !important;
        color: #fff !important;
        padding: 9px 24px !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 14px rgba(37,99,235,.4) !important;
        margin: 0 !important;
    }
}

/* =================================================================== */
/* ===  KONVERTERING & POLISH (v2) — site-wide                     === */
/* =================================================================== */

/* ── Tastatur-fokus (tilgængelighed + professionelt indtryk) ──
   Synligt fokus KUN ved tastatur-navigation (:focus-visible),
   så mus-klik ikke efterlader en ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(37,99,235,.55) !important;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Blød scroll til ankre — respekterer reduced motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Markering i brandfarve i stedet for browser-standard */
::selection { background: rgba(37,99,235,.16); color: inherit; }

/* Mere balancerede linjeskift i overskrifter (ingen "enkelt-ords-linjer") */
.pm-wrap h1, .pm-wrap h2, .pm-section h2, .pm-art-hero h1 { text-wrap: balance; }

/* Tryk-feedback på alle knapper (taktil fornemmelse, især mobil) */
.pm-btn:active { transform: translateY(0) scale(.98) !important; }

/* Sticky mobil CTA-dock: FJERNET (juli 2026) — dock'en vises ikke
   længere på mobil. Markup + hooks er fjernet fra functions.php og
   initDock() er fjernet fra pm-nav.js. */

/* =================================================================== */
/* ===  IKON-SYSTEM v2 — gradient-strokes + poleret chip-look      === */
/* =================================================================== */
/* Alle inline-ikoner i .pm-ico/.pm-stat-ico bruger stroke="currentColor"
   og viewBox="0 0 24 24". Her males stregerne med en fælles blå gradient
   (defineret som skjult <svg><defs> via functions.php → wp_body_open).
   userSpaceOnUse over 0→24 sikrer at gradienten også virker på helt
   lige linjer (objectBoundingBox fejler på degenererede bboxes).
   Fallback-farven (#1d4ed8) bruges hvis defs-elementet mangler. */
.pm-ico svg [stroke="currentColor"],
.pm-stat-ico svg [stroke="currentColor"] {
    stroke: url(#pm-ico-grad) #1d4ed8;
}

/* Brand-logoer (SVG-filer via <img>) i ikon-chips — samme størrelse og
   placering som de inline-tegnede stroke-ikoner, så alt ser ensartet ud. */
.pm-ico img,
.pm-stat-ico img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

/* Chip-poleret: fin kant, indre highlight og blød brand-skygge.
   (Baggrunds-gradienten kommer fra --pm-accent-sf-tokenet.) */
.pm-ico,
.pm-stat-ico {
    border: 1px solid #d6e4fb;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 6px rgba(37,99,235,.08);
    transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease;
}

/* Ikonet løfter sig let sammen med kortet */
.pm-card:hover .pm-ico,
.pm-card-link:hover .pm-ico {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 6px 14px rgba(37,99,235,.16);
}