/**
 * DKBS Plugin — Global CSS Fixes
 *
 * Fix 1 (DKSU-190): Text left-alignment in new text module on Innovationslegat page.
 * Fix 2 (DKSU-190): FAQ/accordion answer text: darker color + support for bullet points and line breaks.
 * Fix 3 (DKSU-190 + DKSU-182): Timeline/icon-list: remove orphan gray bar at the bottom of the module.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Fix 1 — Text left-alignment in text-editor widget
   The Elementor text-editor widget can inherit center-alignment from the kit.
   This ensures content within those widgets is left-aligned by default.
   ──────────────────────────────────────────────────────────────────────────── */
.elementor-widget-text-editor .elementor-widget-container {
    text-align: left;
}
.elementor-widget-text-editor .elementor-widget-container p,
.elementor-widget-text-editor .elementor-widget-container li {
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fix 2 — FAQ / Accordion: darker text color + line breaks + bullet points
   Targets both Elementor Pro native accordion and DCE accordion.
   ──────────────────────────────────────────────────────────────────────────── */

/* Elementor Pro native accordion */
.elementor-widget-accordion .elementor-tab-content {
    color: #333333;
    white-space: pre-line;
}
.elementor-widget-accordion .elementor-tab-content ul,
.elementor-widget-accordion .elementor-tab-content ol {
    padding-left: 1.5em;
    list-style: disc;
    margin: 0.5em 0;
}
.elementor-widget-accordion .elementor-tab-content ul li {
    list-style: disc;
    margin-bottom: 4px;
}

/* Elementor Pro toggle widget */
.elementor-widget-toggle .elementor-tab-content {
    color: #333333;
    white-space: pre-line;
}
.elementor-widget-toggle .elementor-tab-content ul,
.elementor-widget-toggle .elementor-tab-content ol {
    padding-left: 1.5em;
    list-style: disc;
    margin: 0.5em 0;
}

/* DCE accordion (dce-acf-repeater accordion format) */
.acc-content {
    color: #333333;
}
.acc-content p,
.acc-content p.repeater-item {
    color: #333333;
    white-space: pre-line;
}
.acc-content ul,
.acc-content ol {
    padding-left: 1.5em;
    list-style: disc;
    margin: 0.5em 0;
}

/* Repeater item paragraphs (FAQ answers before acc-content class is applied by JS) */
li.item > div > p.repeater-item {
    color: #333333;
    white-space: pre-line;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fix 3 — Spacing after #how-to-guide section on Innovationslegat page
   The timeline template (#how-to-guide) has padding-bottom:0 on its outer
   container and the following section has padding-top:0 — no gap between them.
   Add top spacing to whatever section follows #how-to-guide.
   ──────────────────────────────────────────────────────────────────────────── */
.page-id-59563 .scroll-div + .e-con-boxed {
    margin-top: 56px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fix 4 — Timeline horizontal scrollbar on Windows browsers
   .scroll-div has overflow-x:auto from Elementor. Windows browsers always show
   visible scrollbars (unlike Mac overlay scrollbars), causing a scrollbar to
   appear on desktop even when content fits. Hide it on desktop only.
   Mobile keeps overflow-x:auto so the timeline can scroll horizontally.
   ──────────────────────────────────────────────────────────────────────────── */
/* Hide scrollbar visually on all viewports but keep scroll functionality intact */
.scroll-div {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge legacy */
}
.scroll-div::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari/Edge */
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fix — Light header (Standard Header, template 4343) desktop layout.
   Unlike the dark header (logo+menu and icons split into 67%/33% containers,
   logo fixed 112px non-shrinking), the light header lays logo + mega menu +
   icons + CTA in ONE flat justify-content:space-between row, with the logo image
   at width:100% and the mega menu set to flex-grow. So when the menu widened
   (POWER UP item added) the logo got squeezed/scaled and the spacing went uneven
   (big gap logo→menu, search icon glued to the last menu item).
   Scoped to the light header's element IDs, desktop only (≥1025px), so the dark
   header and mobile/tablet are untouched.
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    /* Logo: fixed size, never grow/shrink (match dark header) */
    .elementor-element-39454ac {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .elementor-element-39454ac img {
        width: 112px !important;
        max-width: 112px !important;
    }
    /* Predictable left alignment instead of space-between */
    .elementor-element-67b1d07 {
        justify-content: flex-start !important;
    }
    /* Menu sits right after the logo (don't stretch to fill the row) */
    .elementor-element-e95be62 {
        flex-grow: 0 !important;
    }
    /* Push the search / favorites / CTA group to the far right */
    .elementor-element-7a40274 {
        margin-left: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Fix — Dark header (Standard Mørk Header) "Kontakt os" not clickable.
   The dark header uses a fixed 67%/33% split: logo+menu container #1af7ba4e and
   the right-hand icons/CTA container #425f6ae0. After the POWER UP menu item
   widened the nav, the last menu item ("Kontakt os") overflows under #425f6ae0,
   which paints on top (later in DOM) and swallows the click. Let clicks fall
   through the container's empty area to the menu link underneath, while keeping
   the buttons/icons themselves clickable. Scoped to the dark header container.
   ──────────────────────────────────────────────────────────────────────────── */
.elementor-element-425f6ae0 {
    pointer-events: none;
}
.elementor-element-425f6ae0 > * {
    pointer-events: auto;
}