/* ==========================================================================
   Header — topbar, primary nav, mobile menu
   ========================================================================== */

.ab-header { position: sticky; top: 0; z-index: 1000; background: var(--ab-white); }
.ab-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ab-line); pointer-events:none; }

/* Keep every direct container inside header constrained */
.ab-header .ab-container { width: 100%; }

/* Topbar */
.ab-topbar {
    background: var(--ab-petrol-600);
    color: var(--ab-ice-100);
    font-size: 0.82rem;
    padding: 10px 0;
    letter-spacing: 0.04em;
}
.ab-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ab-topbar__usps { display: flex; align-items: center; flex-wrap: wrap; }
/* LI is intentionally NOT a flex container — keeps inline whitespace inside (e.g. "Op til <strong>10 års</strong>") */
.ab-topbar__usps li {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.70);
}
/* Separator dot — sits BETWEEN items, not before them */
.ab-topbar__usps li:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--ab-orange-500);
    border-radius: 50%;
    margin: 0 16px;
    vertical-align: middle;
}
.ab-topbar__usps strong { color: var(--ab-white); font-weight: 600; }
.ab-topbar__phone { display:flex; align-items:center; gap:8px; color:var(--ab-white); font-size: 0.85rem; }
.ab-topbar__phone:hover { color: var(--ab-ice-300); }
.ab-topbar__phone strong { font-weight: 600; letter-spacing: 0.02em; }
.ab-topbar__phone svg { color: var(--ab-ice-brand); }
.ab-topbar__phone-label { opacity: 0.65; }

/* Main nav row */
.ab-nav-wrap { background: var(--ab-white); }
.ab-nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    /* IMPORTANT: only top/bottom padding here — left/right comes from .ab-container */
    padding-top: 20px;
    padding-bottom: 20px;
    min-width: 0;
}
.ab-nav__brand { display:flex; align-items:center; flex-shrink:0; }
.ab-nav__brand .ab-logo { height: 32px; width: auto; display: block; }

/* Menu */
.ab-nav__menu { min-width: 0; }
.ab-menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ab-menu__item { position: relative; }
.ab-menu__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-family: var(--ab-font-display);
    font-size: 1.02rem;
    letter-spacing: 0.05em;
    color: var(--ab-ink-700);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 280ms ease;
}
.ab-menu__link::after {
    content:'';
    position:absolute;
    left:16px; right:16px; bottom:6px;
    height:2px;
    background: var(--ab-orange-500);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-menu__item:hover .ab-menu__link::after,
.ab-menu__item.is-current .ab-menu__link::after { transform: scaleX(1); }
.ab-menu__caret { transition: transform var(--ab-dur) var(--ab-ease); flex-shrink: 0; }
.ab-menu__item.has-sub:hover .ab-menu__caret { transform: rotate(180deg); }

/* Sub-toggle button — caret lives in here, separate from the link so it
   can be a clickable target on mobile. On desktop the dropdown opens on
   hover via CSS, so the button is just visual/decorative there. */
.ab-menu__sub-toggle {
    background: transparent;
    border: 0;
    padding: 12px 12px 12px 4px;
    margin-left: -12px;
    color: var(--ab-ink-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 280ms ease;
}
.ab-menu__sub-toggle:hover { color: var(--ab-ink-900); }
.ab-menu__sub-toggle[aria-expanded="true"] .ab-menu__caret { transform: rotate(180deg); }

/* ───── Sub-menu — stylish dropdown ───── */
.ab-menu .sub-menu {
    position: absolute;
    left: -8px;
    top: calc(100% - 2px);
    min-width: 280px;
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--ab-white);
    border: 1px solid var(--ab-line);
    box-shadow: 0 30px 60px -10px rgba(10, 30, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 280ms;
    z-index: 100;
}
.ab-menu .has-sub:hover > .sub-menu,
.ab-menu .has-sub:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ab-menu .sub-menu li { margin: 0; padding: 0; list-style: none; }
.ab-menu .sub-menu .ab-menu__link {
    display: flex;
    padding: 14px 22px;
    font-size: 0.92rem;
    color: var(--ab-ink-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--ab-font-display);
    border-left: 4px solid transparent;
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease, padding-left 220ms ease;
}
.ab-menu .sub-menu .ab-menu__link::after { display: none; }
.ab-menu .sub-menu .ab-menu__link:hover {
    background: var(--ab-frost);
    border-left-color: var(--ab-orange-500);
    color: var(--ab-ink-900);
    padding-left: 22px;
}

/* CTA */
.ab-nav__cta { margin-left: auto; }

/* Mobile toggle */
.ab-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-sm);
}
.ab-nav__toggle span { display:block; width: 22px; height: 2px; background: var(--ab-ink-900); transition: var(--ab-dur); }
.ab-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ab-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ab-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.ab-mobile-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 30, 42, 0.5);
    backdrop-filter: blur(6px);
    z-index: 1100;
    opacity: 0; visibility: hidden;
    transition: opacity var(--ab-dur), visibility var(--ab-dur);
}
.ab-mobile-overlay.is-open { opacity: 1; visibility: visible; }

.ab-mobile-menu {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: min(360px, 88vw);
    background: var(--ab-petrol-600);
    color: var(--ab-ice-100);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.45s var(--ab-ease-out);
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.ab-mobile-menu.is-open { transform: translateX(0); }
.ab-mobile-menu__head { display:flex; justify-content:space-between; align-items:center; padding: 22px 22px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ab-mobile-menu__brand .ab-logo { height: 32px; }
.ab-mobile-menu__close { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--ab-white); font-size: 1.3rem; }
.ab-mobile-menu__body { padding: 22px; display:flex; flex-direction:column; gap: 16px; flex: 1; }

/* Mobile primary list — each top-level item is a flex row (link + caret) with
   the submenu rendered below; submenu is collapsed by default. */
.ab-mobile-menu__list { display: flex; flex-direction: column; }
.ab-mobile-menu__list .ab-menu__item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ab-mobile-menu__list .ab-menu__link {
    flex: 1;
    padding: 14px 12px;
    font-family: var(--ab-font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ab-white);
    transition: color 220ms ease;
}
.ab-mobile-menu__list .ab-menu__link::after { display: none; }
.ab-mobile-menu__list .ab-menu__link:hover { color: var(--ab-ice-300); }

/* Caret button — separate clickable area that toggles the submenu */
.ab-mobile-menu__list .ab-menu__sub-toggle {
    background: transparent;
    border: 0;
    padding: 0 18px;
    margin-left: auto;
    color: var(--ab-ice-300);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 220ms ease, background 220ms ease;
}
.ab-mobile-menu__list .ab-menu__sub-toggle:hover {
    color: var(--ab-white);
    background: rgba(255, 255, 255, 0.04);
}
.ab-mobile-menu__list .ab-menu__sub-toggle .ab-menu__caret {
    width: 14px; height: 8px;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed submenu — animates open via max-height */
.ab-mobile-menu__list .sub-menu {
    width: 100%;
    flex-basis: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-mobile-menu__list .ab-menu__item.is-open > .sub-menu { max-height: 560px; }

.ab-mobile-menu__list .sub-menu .ab-menu__item {
    display: flex;
    border-bottom: 0;
}
.ab-mobile-menu__list .sub-menu .ab-menu__link {
    flex: 1;
    padding: 12px 0 12px 18px;
    margin-left: 12px;
    margin-bottom: 2px;
    font-size: 0.92rem;
    color: var(--ab-ice-200);
    border-left: 3px solid rgba(255, 106, 26, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ab-mobile-menu__list .sub-menu .ab-menu__link:hover {
    color: var(--ab-white);
    border-left-color: var(--ab-orange-500);
}
.ab-mobile-menu__contact { margin-top: auto; display:flex; flex-direction:column; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.92rem; }
.ab-mobile-menu__contact a { color: var(--ab-ice-200); display: inline-flex; align-items: center; gap: 10px; }
.ab-mobile-menu__contact svg { width: 16px; height: 16px; color: var(--ab-orange-500); flex-shrink: 0; }

/* Responsive */
@media (max-width: 1120px) {
    .ab-nav__brand .ab-logo { height: 26px; }
}
@media (max-width: 991px) {
    .ab-nav__menu { display: none; }
    .ab-nav__cta .ab-btn { display: none; }
    .ab-nav__toggle { display: flex; }
    .ab-topbar__usps { display: none; }
    .ab-topbar__inner { justify-content: center; }
}