/* Unwrap the header template-part box so sticky resolves against the page,
   not the short ~147px wrapper (else nav releases immediately on scroll) */
.wp-block-template-part:has(> .cg-header-bar) {
    display: contents;
}

/* Sticky nav bar (top blue strip scrolls away) — translucent, blurred */
.cg-header-bar {
    /* 85% White token over transparent — keeps the translucency without a literal hex */
    background-color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent) !important;
}

/* backdrop-filter only on desktop: it makes the bar a containing block for
   position:fixed, which would otherwise trap the mobile nav overlay inside it */
@media (min-width: 782px) {
    .cg-header-bar {
        backdrop-filter: saturate(1.4) blur(12px);
        -webkit-backdrop-filter: saturate(1.4) blur(12px);
    }
}

/* Header bar row is left-justified so the primary nav sits next to the logo.
   On desktop the CTA buttons are pushed to the right edge instead. */
@media (min-width: 782px) {
    .cg-header-bar .wp-block-buttons.cg-hide-mobile {
        margin-left: auto;
    }
}

/* Mobile: keep only phone in the strip + logo/hamburger in the bar (matches reference) */
@media (max-width: 781px) {
    .cg-hide-mobile {
        display: none !important;
    }

    /* CTA buttons are hidden, so the nav is the last item in the row — push its
       hamburger toggle to the right edge instead of leaving it beside the logo. */
    .cg-header-bar .cg-primary-nav {
        margin-left: auto;
    }

    /* When the overlay is open, surface the CTAs pinned at the bottom
       (native overlay only renders the nav links) */
    .cg-header-bar:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-buttons.cg-hide-mobile {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100001;
        flex-direction: column;
        gap: 12px;
        padding: 16px var(--wp--preset--spacing--70);
        background: var(--wp--preset--color--white);
        border-top: 1px solid var(--wp--preset--color--border-gray);
    }

    .cg-header-bar:has(.is-menu-open) .wp-block-buttons.cg-hide-mobile .wp-block-button,
    .cg-header-bar:has(.is-menu-open) .wp-block-buttons.cg-hide-mobile .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }
}

/* Top strip links brighten to full white on hover (base color = white-70 via block;
   underline reset is global via theme.json elements.link) */
.cg-topbar a:hover,
.cg-topbar a:focus {
    color: var(--wp--preset--color--white);
}

.cg-primary-nav .wp-block-navigation-item__content {
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Doubled class outranks core's .wp-block-navigation-item__content{color:inherit} (0,3,0)
   and the theme.json link-hover underline — menu items only recolour, no underline. */
.cg-primary-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.cg-primary-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

/* ===== Navigation megamenu ===== */

/* No default outline on mouse click. Clicking a (linkless) submenu moves focus
   to the <li> itself, so it must be covered too — not just the content/toggle.
   Keyboard focus gets a clean primary ring instead. */
.cg-primary-nav .wp-block-navigation-item:focus,
.cg-primary-nav .wp-block-navigation-item__content:focus,
.cg-primary-nav .wp-block-navigation-submenu__toggle:focus,
.cg-primary-nav .wp-block-navigation__submenu-icon:focus {
    outline: none;
}

.cg-primary-nav .wp-block-navigation-item:focus-visible,
.cg-primary-nav .wp-block-navigation-item__content:focus-visible,
.cg-primary-nav .wp-block-navigation-submenu__toggle:focus-visible,
.cg-primary-nav .wp-block-navigation__submenu-icon:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.cg-primary-nav .wp-block-navigation-item.has-child.is-style-megamenu {
    position: relative;
}

/* A linkless top-level item renders an <a> with no href → default cursor is
   the text I-beam. It's not a link, so show the plain arrow on the label and
   its toggle. Scoped to items whose content has no href. */
.cg-primary-nav
    .wp-block-navigation-item:has(> a.wp-block-navigation-item__content:not([href]))
    > a.wp-block-navigation-item__content,
.cg-primary-nav
    .wp-block-navigation-item:has(> a.wp-block-navigation-item__content:not([href]))
    > .wp-block-navigation-submenu__toggle {
    cursor: default;
}

.cg-primary-nav .is-style-megamenu > .wp-block-navigation__submenu-container {
    display: grid;
    grid-template-columns: repeat(2, 310px);
    gap: 8px;
    padding: 18px;
    background: var(--wp--preset--color--white);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(18, 33, 51, 0.16); /* decorative ambient shadow */
    border: none;
    top: 100%;
    left: 0;
    max-height: calc(100vh - 140px); /* never taller than the viewport; scroll a long menu */
    overflow-y: auto;
}

.cg-primary-nav .is-style-megamenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    display: block;
}

/* Item card: icon tile (placeholder) + label/desc stack */
.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    align-items: center;
    align-content: center;
    height: 100%; /* fill the grid row so icons line up across unequal-height neighbors */
    box-sizing: border-box;
    padding: 14px;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
    white-space: normal; /* let the description wrap (base pill rule sets nowrap) */
}

/* Icon tile — defaults below, per-item palette via has-*-color preset classes */
.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content
    > .cg-nav-link__icon {
    grid-row: 1 / span 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background-color: var(--wp--preset--color--tertiary);
    color: var(--wp--preset--color--secondary);
}

.cg-primary-nav .is-style-megamenu .cg-nav-link__icon svg {
    width: 24px;
    height: 24px;
}

.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content:hover,
.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.wp-block-navigation-item__content:focus-visible {
    background: var(--wp--preset--color--section-gray);
}

.cg-primary-nav .is-style-megamenu .cg-nav-link__kicker {
    grid-column: 2;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
}

.cg-primary-nav .is-style-megamenu .cg-nav-link__label {
    grid-column: 2;
    font-size: 16px;
    font-weight: 800;
    color: var(--wp--preset--color--secondary);
    white-space: nowrap;
}

.cg-primary-nav .is-style-megamenu .cg-nav-link__desc {
    grid-column: 2;
    font-size: 12.5px;
    color: var(--wp--preset--color--slate);
    font-weight: 400;
}

/* ===== Megamenu text-link columns =====
   Lower band of the megamenu: a full-width section divider heading followed by
   text-link columns. A column is a nested submenu inside the megamenu — its
   toggle becomes the column header (icon + uppercase label) and its always-open
   container holds plain text links. */

/* Full-width divider heading (link with isSectionHeading) — span the grid on
   the list item (the grid child), style the anchor for the label. */
.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item:has(> a.cg-nav-section) {
    grid-column: 1 / -1;
}

.cg-primary-nav
    .is-style-megamenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > a.cg-nav-section.wp-block-navigation-item__content {
    grid-column: 1 / -1;
    display: block;
    height: auto;
    margin-top: 6px;
    padding: 14px 14px 0;
    border-top: 1px solid var(--wp--preset--color--border-gray);
    border-radius: 0;
    color: var(--wp--preset--color--slate);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
    cursor: default;
}

@media (min-width: 782px) {
    /* Column = nested submenu inside the megamenu */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child {
        display: block;
        position: static;
        align-self: start;
    }

    /* Column header (the submenu toggle) — override the card grid */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 14px 8px;
        padding: 0 0 8px;
        border-radius: 0;
        border-bottom: 1px solid var(--wp--preset--color--border-gray); /* same hr as the section divider */
        color: var(--wp--preset--color--secondary);
        font-size: 14px;
        font-weight: 800;
        white-space: normal;
        background: transparent;
        pointer-events: none; /* header is a label, not a link — no click, no hover */
        cursor: default;
    }

    /* Header icon — small, muted, no tile */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation-item__content
        .cg-nav-link__icon,
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation-item__content
        .cg-nav-link__icon {
        width: auto;
        height: auto;
        background: transparent;
        color: var(--wp--preset--color--primary);
    }

    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation-item__content
        .cg-nav-link__icon svg {
        width: 18px;
        height: 18px;
    }

    /* Hide the chevron on column headers */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-icon {
        display: none;
    }

    /* Force the column's submenu open and inline (kill the flyout) */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: auto !important;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 14px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    /* Column list items flow as a block stack (core makes them flex) */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item {
        display: block;
        margin: 0;
    }

    /* Plain text links inside a column — strip the base pill.
       Extra .wp-block-navigation-item + a element outrank the simple-dropdown
       rule (.has-child:not(.is-style-megamenu) … a) that also matches a column. */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content {
        display: block;
        margin: 0;
        padding: 3px 14px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        white-space: normal;
        color: var(--wp--preset--color--slate);
    }

    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content:hover,
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content:focus-visible {
        color: var(--wp--preset--color--primary);
        background: var(--wp--preset--color--section-gray);
    }
}

/* ===== Simple dropdown (non-megamenu submenu, e.g. Standorte) =====
   Same white card as the megamenu but single-column and compact; items are
   icon (20px, muted, no tile) + bold label. Desktop only — the mobile
   overlay keeps the native list and hides icons below. */

@media (min-width: 782px) {
    .cg-primary-nav
        .wp-block-navigation-item.has-child:not(.is-style-megamenu)
        > .wp-block-navigation__submenu-container {
        min-width: 240px;
        padding: 10px;
        background: var(--wp--preset--color--white);
        border: none;
        border-radius: 24px;
        box-shadow: 0 18px 48px rgba(18, 33, 51, 0.16); /* decorative ambient shadow */
        top: 100%;
    }

    .cg-primary-nav
        .wp-block-navigation-item.has-child:not(.is-style-megamenu)
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 12px;
        transition: background-color 0.15s ease;
    }

    .cg-primary-nav
        .wp-block-navigation-item.has-child:not(.is-style-megamenu)
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content:hover,
    .cg-primary-nav
        .wp-block-navigation-item.has-child:not(.is-style-megamenu)
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content:focus-visible {
        background: var(--wp--preset--color--section-gray);
    }

    .cg-primary-nav .has-child:not(.is-style-megamenu) .cg-nav-link__icon {
        display: inline-flex;
        color: var(--wp--preset--color--slate);
    }

    .cg-primary-nav .has-child:not(.is-style-megamenu) .cg-nav-link__icon svg {
        width: 20px;
        height: 20px;
    }

    .cg-primary-nav
        .has-child:not(.is-style-megamenu)
        a.wp-block-navigation-item__content:hover
        .cg-nav-link__icon,
    .cg-primary-nav
        .has-child:not(.is-style-megamenu)
        a.wp-block-navigation-item__content:focus-visible
        .cg-nav-link__icon {
        color: var(--wp--preset--color--primary);
    }

    .cg-primary-nav .has-child:not(.is-style-megamenu) .cg-nav-link__label {
        font-size: 15px;
        font-weight: 700;
        color: var(--wp--preset--color--secondary);
    }
}

/* ===== Mobile overlay menu — full-screen accordion =====
   Each parent row collapses behind a chevron (› closed, ⌄ open) and expands
   inline on tap, driven by the toggle's aria-expanded state. Full-width rows
   with a faint divider between them; opened submenus indent on a tinted band. */
@media (max-width: 781px) {
    /* Collapse every submenu until its toggle is expanded */
    .cg-primary-nav
        .wp-block-navigation-submenu__toggle[aria-expanded="false"]
        + .wp-block-navigation__submenu-container {
        display: none !important;
    }

    /* Single full-width column */
    .cg-primary-nav .wp-block-navigation__responsive-container-content,
    .cg-primary-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
        width: 100%;
        align-items: stretch;
        gap: 0;
    }

    .cg-primary-nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        width: 100%;
    }

    /* Divider between the top-level rows */
    .cg-primary-nav
        .wp-block-navigation__responsive-container-content
        > .wp-block-navigation__container
        > .wp-block-navigation-item {
        border-bottom: 1px solid var(--wp--preset--color--border-gray);
    }

    /* Every row label: full-width tap target, no pill, natural case */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item__content {
        display: block;
        width: 100%;
        margin: 0;
        padding: 12px 0;
        border-radius: 0;
        color: var(--wp--preset--color--secondary);
        font-weight: 700;
        white-space: normal;
    }

    /* Parent rows: label on the left, chevron pinned to the right (one line).
       The is-menu-open prefix outranks core's column-direction overlay rule. */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child
        > .wp-block-navigation-item__content {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Re-show + style the chevron toggle (core hides it in the overlay) */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child
        > .wp-block-navigation-submenu__toggle.wp-block-navigation__submenu-icon {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        padding: 8px;
        background: transparent;
        border: 0;
        color: var(--wp--preset--color--secondary);
    }

    /* Chevron drawn with CSS — a rotated "›": points down when closed, up when
       open. The block's own SVG glyph is hidden. */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-submenu__toggle svg {
        display: none !important;
    }

    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child
        > .wp-block-navigation-submenu__toggle::after {
        content: "›";
        display: block;
        font-size: 1.25rem;
        line-height: 1;
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child
        > .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
        transform: rotate(-90deg);
    }

    /* Opened submenu: full-width block, faint tinted band. A small indent per
       nesting step (kept small so three levels deep don't run off the edge).
       The is-menu-open prefix outranks core's global-padding on the panel. */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation-item.has-child
        > .wp-block-navigation__submenu-container {
        flex-basis: 100%;
        width: 100%;
        display: block;
        min-width: 0;
        margin: 0;
        padding: 0 0 0 10px !important;
        background: var(--wp--preset--color--section-gray);
        box-shadow: none;
        border: 0;
        border-radius: 0;
    }

    /* Kill the desktop megamenu 2-column grid → plain stacked list */
    .cg-primary-nav .is-style-megamenu > .wp-block-navigation__submenu-container {
        display: block;
        grid-template-columns: none;
    }

    /* Megamenu item content: plain block label (drop the icon-tile card grid).
       Matches the desktop card selector's specificity and wins by order. */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.wp-block-navigation-item__content {
        display: block;
        grid-template-columns: none;
        margin: 0;
        padding: 9px 0;
    }

    /* Text-link columns collapse like the top level (override the unscoped
       `> .wp-block-navigation-item { display: block }` base rule) */
    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item.has-child
        > a.wp-block-navigation-item__content {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Divider between submenu rows */
    .cg-primary-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item {
        border-top: 1px solid var(--wp--preset--color--border-gray);
    }

    .cg-primary-nav
        .wp-block-navigation__responsive-container.is-menu-open
        .wp-block-navigation__submenu-container
        .wp-block-navigation-item__content {
        padding: 9px 0;
        border-radius: 0;
        background: transparent;
        font-weight: 600;
        font-size: 0.9375rem;
    }

    /* Megamenu: drop icon tiles and descriptions (keep the eyebrow) */
    .cg-primary-nav .wp-block-navigation__submenu-container .cg-nav-link__icon,
    .cg-primary-nav .is-style-megamenu .cg-nav-link__desc {
        display: none !important;
    }

    /* Big item: title with its eyebrow inline — "Label · EYEBROW". The eyebrow
       keeps the desktop accent colour; a centred dot separates them. */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item:not(.has-child)
        > a.wp-block-navigation-item__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .cg-primary-nav .is-style-megamenu .cg-nav-link__kicker {
        order: 1;
        display: inline-flex;
        align-items: center;
    }

    .cg-primary-nav .is-style-megamenu .cg-nav-link__label {
        order: 2;
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
    }

    /* Megamenu section labels (e.g. "Weitere Klassen") — small muted heading,
       left-aligned with the items (full path outranks the desktop padding). */
    .cg-primary-nav
        .is-style-megamenu
        > .wp-block-navigation__submenu-container
        > .wp-block-navigation-item
        > a.cg-nav-section.wp-block-navigation-item__content {
        padding: 14px 0 4px;
        color: var(--wp--preset--color--slate);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

}