/* ===========================================================================
   DKBS custom header — WordPress menu, no JetMenu/Elementor widgets.
   Dark = front/campaign, Light = rest. Sticky, dropdowns, mobile off-canvas.
   =========================================================================== */

.dkbs-header {
    position: fixed;            /* fixed, not sticky: the Elementor header
                                  wrappers are only the bar's height, which
                                  breaks position:sticky. A spacer reserves the
                                  in-flow height (see .dkbs-header__spacer). */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    font-family: 'Figtree', sans-serif;
    box-sizing: border-box;
    transition: box-shadow .3s ease;
    /* NB: no will-change/transform here — it would make the position:fixed
       drawer a child containing block and collapse its height. */
}
.dkbs-header * { box-sizing: border-box; }

/* in-flow placeholder so page content isn't hidden under the fixed bar
   (JS sets its height to the bar's full height) */
.dkbs-header__spacer { width: 100%; }

/* ── Announcement bar (optional, Customizer-controlled) ───────────────────── */
.dkbs-announce {
    background: #313F35;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.dkbs-announce__inner {
    max-width: 1364px;       /* same grid as the bar → text holds the content edge */
    margin: 0 auto;
    padding: 9px 32px;
    line-height: 1.4;
}

/* ── Sticky: pinned + a subtle shadow once scrolled (always visible) ───────── */
.dkbs-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .14); }

/* sit below the WP admin bar when it's present (32px desktop / 46px mobile) */
body.admin-bar .dkbs-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .dkbs-header { top: 46px; }
}

.dkbs-header--dark  { background: #394B3E; color: #FFFFFF; }
.dkbs-header--light { background: #FFFFFF; color: #222222; border-bottom: 1px solid #EAECE8; }

.dkbs-header__inner {
    /* align with the Elementor content grid: 1300px content inside a 32px
       gutter (1300 + 2×32 = 1364) → logo/CTA hold the page content edge */
    max-width: 1364px;
    margin: 0 auto;
    padding: 17px 32px;
    display: flex;
    align-items: center;
    /* fluid menu↔tools gap: this is the space that shrinks as it gets narrow
       (32px at ≥1320 → 14px by the 1160px breakpoint) */
    gap: clamp(14px, calc(14px + (100vw - 1160px) * 0.1125), 32px);
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.dkbs-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
.dkbs-header__logo-img { width: 112px; height: auto; display: block; }

/* ── Desktop nav ──────────────────────────────────────────────────────────── */
.dkbs-header__nav { flex: 1 1 auto; }

.dkbs-menu,
.dkbs-menu__sub { list-style: none; margin: 0; padding: 0; }

/* word spacing stays comfortable: 33px at ≥1320, never below 20px (the
   menu↔tools gap absorbs the shrink instead) */
.dkbs-menu { display: flex; align-items: center; gap: clamp(20px, calc(20px + (100vw - 1160px) * 0.08125), 33px); }

.dkbs-menu__item { position: relative; }

.dkbs-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.dkbs-menu__link:hover { opacity: .85; }

.dkbs-menu__caret { transition: transform .15s ease; }

/* Desktop dropdown */
.dkbs-menu__item--has-children > .dkbs-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin-top: 0;              /* flush under baren, som JetMegaMenu paa live */
    padding: 8px 0;
    background: #FFFFFF;
    color: #222222;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 10;
}
.dkbs-menu__item--has-children:hover > .dkbs-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dkbs-menu__item--has-children:hover > .dkbs-menu__link .dkbs-menu__caret { transform: rotate(180deg); }

.dkbs-menu__sub .dkbs-menu__item { display: block; }
.dkbs-menu__sub .dkbs-menu__link { display: block; padding: 20px 20px; color: #222222;
    font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: .16px; white-space: nowrap; }
    /* 24px linje + 2x20px = 64px raekkehojde, samme som JetMegaMenu paa live */
.dkbs-menu__sub .dkbs-menu__link:hover { background: #F4F6F2; opacity: 1; }
.dkbs-menu__sub .dkbs-menu__caret { display: none; }

/* mobile-only sub-toggle button: hidden on desktop */
.dkbs-menu__toggle { display: none; }

/* ── Tools (search / favourites / CTA / burger) ───────────────────────────── */
.dkbs-header__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; margin-left: auto; }

.dkbs-header__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.dkbs-header__icon-btn svg { width: 20px; height: 20px; }
.dkbs-header__icon-btn:hover { opacity: .8; }

/* favourites highlighted when there are saved venues (favorites.js adds .has-favs) */
.dkbs-header__fav.has-favs svg { color: #FF643E; fill: #FF643E; }

.dkbs-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: #FF643E;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s ease;
}
.dkbs-header__cta:hover { background: #e85530; color: #FFFFFF; }

.dkbs-header__burger { display: none; }
.dkbs-header__burger-open,
.dkbs-header__burger-close { display: inline-flex; align-items: center; justify-content: center; }

/* ── Drawer (mobile full-width panel below the bar — matches live) ─────────── */
.dkbs-header__drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* top is set in JS to the header bar's bottom edge */
    top: 72px;
    background: #FFFFFF;
    color: #222222;
    z-index: 9998;
    overflow-y: auto;
    padding: 22px 18px 40px;
    display: flex;
    flex-direction: column;
}
/* the [hidden] attribute must win over the display:flex above */
.dkbs-header__drawer[hidden] { display: none; }
body.dkbs-drawer-open { overflow: hidden; }

/* search field at the top — white input, magnifier on the right */
.dkbs-header__drawer-search-form { position: relative; display: block; margin: 0 0 6px; }
.dkbs-header__drawer-search-input {
    width: 100%;
    height: 56px;
    padding: 0 52px 0 18px;
    border: 1px solid #D9DDD6;
    border-radius: 8px;
    font-size: 16px;
    color: #222;
    background: #FFFFFF;
    outline: none;
}
.dkbs-header__drawer-search-input::placeholder { color: #6B7169; }
.dkbs-header__drawer-search-btn {
    position: absolute;
    top: 0; right: 0;
    width: 52px; height: 56px;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #394B3E !important;
}
.dkbs-header__drawer-search-btn svg { width: 22px; height: 22px; stroke: #394B3E; fill: none; }

/* menu — large items, chevrons on parents, no dividers */
.dkbs-header__drawer-nav { margin-top: 4px; }
.dkbs-header__drawer-nav .dkbs-menu { flex-direction: column; align-items: stretch; gap: 0; }
.dkbs-header__drawer-nav .dkbs-menu__item { position: relative; border: 0; }
.dkbs-header__drawer-nav .dkbs-menu__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 4px; font-size: 17px; font-weight: 500; color: #222;
}
.dkbs-header__drawer-nav .dkbs-menu__caret { display: none; }

/* chevron (›) on parents — also the tap target to expand the sub-menu */
.dkbs-header__drawer-nav .dkbs-menu__toggle {
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 56px; height: 60px;
    background: none; border: 0; cursor: pointer;
}
.dkbs-header__drawer-nav .dkbs-menu__toggle::after {
    content: '';
    position: absolute; top: 50%; right: 12px;
    width: 9px; height: 9px;
    border-top: 2px solid #394B3E; border-right: 2px solid #394B3E;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .2s ease;
}
.dkbs-header__drawer-nav .dkbs-menu__item.is-open > .dkbs-menu__toggle::after { transform: translateY(-50%) rotate(135deg); }

/* collapsible sub-menus — flow inline (reset the desktop-dropdown base rule) */
.dkbs-header__drawer-nav .dkbs-menu__sub {
    display: none;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 10px 16px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.dkbs-header__drawer-nav .dkbs-menu__item.is-open > .dkbs-menu__sub { display: block; }
.dkbs-header__drawer-nav .dkbs-menu__sub .dkbs-menu__link { padding: 12px 4px; font-size: 15px; font-weight: 400; }

/* outlined "Kontakt os" button at the bottom */
.dkbs-header__drawer-cta {
    display: flex; align-items: center; justify-content: center;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid #D9DDD6;
    border-radius: 8px;
    background: #FFFFFF;
    color: #222 !important;
    font-size: 16px; font-weight: 500;
    text-decoration: none;
}
.dkbs-header__drawer-cta:hover { background: #F4F6F2; }

/* ── Colours — scoped under .dkbs-header to beat the Elementor kit's global
   <a> colour (which otherwise turns links/CTA orange) ─────────────────────── */
.dkbs-header--dark  .dkbs-menu__link,
.dkbs-header--dark  .dkbs-header__icon-btn { color: #FFFFFF; }
.dkbs-header--light .dkbs-menu__link,
.dkbs-header--light .dkbs-header__icon-btn { color: #222222; }

.dkbs-header__icon-btn { background: none !important; border: 0 !important; }
.dkbs-header__icon-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
}

.dkbs-header .dkbs-header__cta,
.dkbs-header .dkbs-header__cta:hover { color: #FFFFFF !important; }

/* Desktop dropdowns: solid dark green (match live, fully opaque) */
/* Topniveau-punkterne fylder barens hoejde, saa dropdownen haenger fra dens
   underkant og ikke fra linkteksten (ellers starter panelet inde i baren).
   Hele kaeden skal straekkes: inner er align-items:center, saa nav og menu
   ville ellers kun vaere saa hoeje som deres indhold.
   KUN paa desktop — .dkbs-header__inner > .dkbs-header__nav har hoejere
   specificitet end ".dkbs-header__nav { display:none }" i mobil-breakpointet
   nedenfor, saa uden denne media query vandt straek-reglen ALTID og
   desktop-menuen forsvandt aldrig, uanset skaermbredde (bug fundet 2026-09-29). */
@media (min-width: 1161px) {
.dkbs-header__inner > .dkbs-header__nav { align-self: stretch; display: flex; align-items: center; }
.dkbs-header__nav .dkbs-menu { height: 100%; }
}
.dkbs-header__nav .dkbs-menu > .dkbs-menu__item {
    align-self: stretch;
    display: flex;
    align-items: center;
}
.dkbs-header__nav .dkbs-menu__sub {
    background: #394B3E;
    min-width: 250px;
    margin-top: 17px;          /* = .dkbs-header__inner padding-bottom → flush med baren */
    padding: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, .08);
}
/* 24px linje + 2x20px = 64px raekkehojde, samme som JetMegaMenu paa live */
.dkbs-header__nav .dkbs-menu__sub .dkbs-menu__link {
    color: #FFFFFF;
    padding: 20px 28px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .16px;
}
.dkbs-header__nav .dkbs-menu__sub .dkbs-menu__link:hover { background: rgba(255, 255, 255, .08); }

/* separator ONLY after the "Alle"/"All" item in the venue dropdown, inset from
   the edges (other dropdowns have no separator — matches live) */
.dkbs-header__nav .dkbs-menu__item--alle,
.dkbs-header__nav .dkbs-menu__item--all { position: relative; }
.dkbs-header__nav .dkbs-menu__item--alle::after,
.dkbs-header__nav .dkbs-menu__item--all::after {
    content: '';
    position: absolute;
    left: 28px; right: 28px; bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, .22);
}

/* light header → white dropdowns (not green) */
.dkbs-header--light .dkbs-header__nav .dkbs-menu__sub {
    background: #FFFFFF;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}
.dkbs-header--light .dkbs-header__nav .dkbs-menu__sub .dkbs-menu__link { color: #222222; }
.dkbs-header--light .dkbs-header__nav .dkbs-menu__sub .dkbs-menu__link:hover { background: #F4F6F2; }
.dkbs-header--light .dkbs-header__nav .dkbs-menu__item--alle::after,
.dkbs-header--light .dkbs-header__nav .dkbs-menu__item--all::after { background: rgba(0, 0, 0, .12); }

/* ── Search overlay (dark-green floating card, like live) ──────────────────── */
.dkbs-header__search-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(900px, 92vw);
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px;
    background: rgba(57, 75, 62, 0.97);
    border-radius: 12px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 9998;
}
.dkbs-header__search-panel.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dkbs-header__search-form { flex: 1 1 auto; display: flex; width: 100%; }
.dkbs-header__search-input {
    flex: 1 1 auto; height: 57px; padding: 0 18px;
    border: 1px solid #4B6653; border-right: 0; border-radius: 6px 0 0 6px;
    font-size: 16px; color: #FFFFFF; background: #394B3E; outline: none;
}
.dkbs-header__search-input::placeholder { color: rgba(255, 255, 255, .65); }
.dkbs-header__search-submit {
    flex: 0 0 auto; width: 57px; height: 57px;
    background: #FF643E; border: 0; border-radius: 0 6px 6px 0;
    color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dkbs-header__search-submit svg { width: 20px; height: 20px; stroke: #fff; fill: none; }

/* light header → white search card (matches live popup 49774) */
.dkbs-header--light .dkbs-header__search-panel {
    background: #FFFFFF;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.dkbs-header--light .dkbs-header__search-input {
    background: #FFFFFF;
    color: #222222;
    border-color: #DADED6;
}
.dkbs-header--light .dkbs-header__search-input::placeholder { color: #6B7169; }

/* Drawer is always a white panel → force dark text regardless of dark/light
   header context (which would otherwise make links white-on-white). */
.dkbs-header .dkbs-header__drawer .dkbs-menu__link { color: #222222 !important; }

/* burger ↔ X icon swap (close icon shown only while the drawer is open) */
.dkbs-header__burger-close { display: none; }
body.dkbs-drawer-open .dkbs-header__burger-open { display: none; }
body.dkbs-drawer-open .dkbs-header__burger-close { display: inline-flex; }

/* mobile-only CTA — hidden on desktop */
.dkbs-header__cta--mobile { display: none; }

/* phones: tighten the bar so "Send forespørgsel" + heart + burger fit */
@media (max-width: 600px) {
    .dkbs-header__inner { padding-left: 16px; padding-right: 16px; }
    .dkbs-header__tools { gap: 10px; }
    .dkbs-header__logo-img { width: 90px; }
    .dkbs-header__cta--mobile { padding: 9px 14px; font-size: 13px; }
    .dkbs-announce__inner { padding: 8px 16px; font-size: 13px; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* The menu↔tools gap shrinks fluidly toward 1160px (see clamp() above) while
   word spacing stays ≥20px, so the desktop menu holds until ~1160px. */
/* the mobile drawer + burger never appear on desktop */
@media (min-width: 1161px) {
    .dkbs-header__drawer { display: none !important; }
}
@media (max-width: 1160px) {
    .dkbs-header__nav { display: none; }
    /* desktop CTA + search icon hidden on mobile (search lives in the drawer) */
    .dkbs-header__tools .dkbs-header__cta:not(.dkbs-header__cta--mobile),
    .dkbs-header__search { display: none; }
    .dkbs-header__cta--mobile { display: inline-flex; padding: 9px 16px; font-size: 14px; }
    .dkbs-header__burger {
        display: inline-flex;
        width: 40px; height: 40px;
        border: 1px solid currentColor !important;
        border-radius: 6px;
    }
}