/* ==========================================================================
   KB Header Widget — scoped to .kb-header
   No border radius. No heavy shadow. Editorial.
   All values driven by tokens.css (design-system source of truth).
   ========================================================================== */

.kb-header {
    width: 100%;
    height: var(--kb-header-height-desktop);
    background: var(--kb-porcelain);
    border-bottom: var(--kb-border);
    box-shadow: none;
    border-radius: 0;
    position: relative;
}

/* === Sticky owner: .elementor-location-header ======================
   .kb-header was previously position: sticky, but it is deeply nested:
     .elementor-location-header > .e-con > .e-con-inner >
     .elementor-widget > .elementor-widget-container > .kb-header
   The .e-con's containing block is approximately header-height, so
   the sticky child cannot remain stuck after the .e-con scrolls away.
   In addition, any of the following on .e-con or .e-con-inner would
   break sticky: overflow: hidden, transform, contain: layout/paint,
   filter, perspective, will-change: transform. Elementor's compiled
   CSS often sets one of these on the Theme Builder container, which
   silently turns the header into a normal-flow element.

   Move position: sticky up to the topmost Theme Builder wrapper
   (.elementor-location-header). The body remains the scroll container
   and there is no problematic ancestor between it and the location
   wrapper. The defensive resets below (overflow / transform / contain /
   isolation) guarantee the location wrapper itself does not become
   its own containing block, which would re-break sticky. */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    /* Defensive: keep this wrapper as a clean sticky context root. */
    overflow: visible;
    transform: none;
    contain: none;
    isolation: auto;
    will-change: auto;
}

/* WordPress admin bar offset (only when the admin bar actually exists
   in the DOM). WordPress itself exposes the current admin bar height
   as a custom property on :root; we use it so the header sits flush
   beneath the admin bar at any viewport / device pixel ratio. */
body.admin-bar .elementor-location-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Full-bleed: when the Header is rendered through Elementor Pro Theme Builder,
   neutralize the outer Theme Builder wrapper inset on ALL FOUR SIDES so the
   KB Header background reaches the exact viewport top/left/right edges.

   Actual winning rules causing the 4-side inset (Elementor Pro 3.20+):
     - frontend.min.css .e-con: padding: 10px;   (compiled default)
       driven by --container-default-padding / -block / -inline custom properties
     - Elementor may also set inline style="--padding-top/right/bottom/left: <v>"
       and "--margin-top/right/bottom/left: <v>" on the Theme Builder .e-con
       and .e-con-inner (those set in the Theme Builder template)
     - .e-con-inner adds margin: 0 auto; which can leave residual side gap when
       the parent has any padding.

   We override every padding/margin custom property (physical + logical) and
   pin padding/margin to 0 with !important on the Theme Builder wrappers only.
   This is narrowly scoped to .elementor-location-header so it does NOT touch
   normal page .e-con containers. The internal .kb-header__inner keeps its own
   padding/gutter for the actual content alignment. */
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
    --container-max-width: 100% !important;
    --padding-top: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    --padding-left: 0px !important;
    --padding-block-start: 0px !important;
    --padding-block-end: 0px !important;
    --padding-inline-start: 0px !important;
    --padding-inline-end: 0px !important;
    --padding-block: 0px !important;
    --padding-inline: 0px !important;
    --margin-top: 0px !important;
    --margin-right: 0px !important;
    --margin-bottom: 0px !important;
    --margin-left: 0px !important;
    --margin-block-start: 0px !important;
    --margin-block-end: 0px !important;
    --margin-inline-start: 0px !important;
    --margin-inline-end: 0px !important;
    --margin-block: 0px !important;
    --margin-inline: 0px !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    --gap: 0px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kb-header__inner {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    column-gap: var(--kb-space-l);
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    height: 100%;
    padding-inline: 0;
}

/* ---- Navigation links ----------------------------------------------------- */
.kb-header__nav ul {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-header__nav--left {
    justify-self: start;
}

.kb-header__nav--right {
    justify-self: end;
}

.kb-header__nav a {
    display: inline-block;
    padding: 8px 0;
    color: var(--kb-ink);
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color var(--kb-transition-ui);
}

.kb-header__nav a:hover,
.kb-header__nav a:focus {
    color: var(--kb-bordeaux);
    outline: none;
}

/* ---- Logo ---------------------------------------------------------------- */
.kb-header__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    height: 100%;
    flex: 0 0 auto;
    text-decoration: none;
    color: var(--kb-ink);
    transition: opacity var(--kb-transition-ui);
}

.kb-header__logo:hover,
.kb-header__logo:focus {
    opacity: 0.7;
    outline: none;
}

/* Real image logo (dark).
   Cropped asset canvas is now horizontally elongated (1000x463, ratio
   2.16:1) to match its 842x378 visible artwork. max-height is the
   primary sizing axis so the logo can NEVER inflate the locked header
   height (90 / 80 / 72px). width: auto + height: auto + object-fit: contain
   preserve intrinsic ratio. */
.kb-header__logo img {
    display: block;
    width: auto;
    height: auto;
    max-height: 66px;
    max-width: 170px;
    object-fit: contain;
    object-position: center;
}

.kb-header__logo-fallback {
    font-family: var(--kb-font-display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
}

/* ---- Right cluster ------------------------------------------------------- */
.kb-header__right {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-self: end;
}

/* ---- Language switcher (minimal FR | EN) -------------------------------- */
.kb-header__lang {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.kb-header__lang-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kb-header__lang-item a,
.kb-header__lang-item span {
    display: inline-block;
    padding: 8px 4px;
    color: var(--kb-ink);
    text-decoration: none;
    transition: color var(--kb-transition-ui), opacity var(--kb-transition-ui);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.kb-header__lang-item.is-current span {
    color: var(--kb-gold);
    cursor: default;
    opacity: 0.85;
}

.kb-header__lang-item a:hover,
.kb-header__lang-item a:focus {
    color: var(--kb-bordeaux);
    outline: none;
}

.kb-header__lang-item a:focus-visible {
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 2px;
}

.kb-header__lang-sep {
    color: var(--kb-ink);
    opacity: 0.4;
    user-select: none;
    pointer-events: none;
    padding: 0;
    background: transparent;
    border: 0;
}

/* ---- Mobile toggle (hidden on desktop) ----------------------------------- */
.kb-header__toggle {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--kb-ink);
    cursor: pointer;
}

.kb-header__toggle:focus {
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 2px;
}

/* Two-line minimalist menu icon. Asymmetric (top 24px, bottom 18px) for
   editorial restraint, both square-ended, vertically centered inside
   the 44x44 touch target. */
.kb-header__toggle-line {
    position: absolute;
    left: 50%;
    height: 1.5px;
    background: var(--kb-ink);
    border: 0;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 180ms ease;
    transform: translateX(-50%);
}

.kb-header__toggle-line--top {
    top: 17px;
    width: 24px;
}

.kb-header__toggle-line--bottom {
    top: 26px;
    width: 18px;
}

/* X close glyph: 20x20, two crossed 1.5px Ink strokes, centered.
   Hidden when the menu is closed. */
.kb-header__toggle::before,
.kb-header__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 1.5px;
    background: var(--kb-ink);
    margin-top: -0.75px;
    margin-left: -10px;
    opacity: 0;
    transition: opacity 180ms ease;
}

.kb-header__toggle::before { transform: rotate(45deg); }
.kb-header__toggle::after  { transform: rotate(-45deg); }

/* Open state: fade the menu lines out, fade the X in. Opacity only —
   no rotation, no scale, no spin. */
.kb-header.is-open .kb-header__toggle-line {
    opacity: 0;
}

.kb-header.is-open .kb-header__toggle::before,
.kb-header.is-open .kb-header__toggle::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kb-header__toggle-line,
    .kb-header__toggle::before,
    .kb-header__toggle::after {
        transition: none;
    }
}

/* ---- Services item: full-height hover bridge --------------------------- */
/* The mega menu is a sibling of .kb-header__inner and sits at top: 100% of
   .kb-header. To eliminate any dead zone between the SERVICES link (which
   is vertically centered in the header) and the mega menu, the SERVICES
   <li> stretches to the full header height and centers its anchor. This
   only applies to the Services <li> — other nav items keep their natural
   content-sized hit area. */
.kb-header__nav-item--has-mega {
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* ---- Desktop mega menu ------------------------------------------------ */
/* Full-bleed panel under the header. Always in the DOM (visibility-toggled)
   so the open/close transition can run smoothly. */
.kb-header__mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kb-porcelain);
    border-top: 1px solid var(--kb-ink-divider-soft);
    border-bottom: 1px solid var(--kb-ink-divider-soft);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
    z-index: 60;
}

.kb-header__mega-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding: 56px var(--kb-gutter-desktop) 56px;
    column-gap: 0;
}

.kb-header__mega-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0 40px;
    border-right: 1px solid var(--kb-ink-divider-soft);
    text-decoration: none;
    color: var(--kb-ink);
    transition: opacity var(--kb-transition-ui);
}

.kb-header__mega-col:first-child {
    padding-inline-start: 0;
}

.kb-header__mega-col:last-child {
    padding-inline-end: 0;
    border-right: 0;
}

.kb-header__mega-num {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--kb-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.kb-header__mega-title {
    font-family: var(--kb-font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--kb-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--kb-transition-ui);
}

.kb-header__mega-col:hover .kb-header__mega-title,
.kb-header__mega-col:focus-visible .kb-header__mega-title {
    color: var(--kb-gold);
}

.kb-header__mega-col:focus-visible {
    outline: none;
}

.kb-header__mega-col:hover {
    opacity: 0.85;
}

/* Open state — driven by the JS-managed .is-mega-open class on .kb-header.
   The class is added on Services hover/focus and removed on leave/blur,
   so the panel never flickers during the focus transition between the
   trigger link and a menu item. */
.kb-header.is-mega-open .kb-header__mega {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
}

.kb-header.is-mega-open .kb-header__mega[aria-hidden="true"] {
    /* Mirror the JS state into the aria attribute for assistive tech. */
}

/* Keep the Services link in its active color while the menu is open. */
.kb-header.is-mega-open .kb-header__nav-item--has-mega > a {
    color: var(--kb-bordeaux);
}

@media (prefers-reduced-motion: reduce) {
    .kb-header__mega,
    .kb-header.is-mega-open .kb-header__mega {
        transform: none !important;
        transition: none !important;
    }
}

/* ---- Mobile panel (hidden on desktop) ----------------------------------- */
.kb-header__panel {
    /* Always in the DOM so visibility/opacity/transform can transition. */
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--kb-porcelain);
    border-top: 1px solid var(--kb-ink-divider-soft);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

/* WordPress' UA stylesheet applies display:none to [hidden]; we keep the
   element rendered so the close transition can run. The visibility/opacity
   trio above handles the actual visual state. */
.kb-header__panel[hidden] {
    display: block;
}

.kb-header.is-open .kb-header__panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .kb-header__panel,
    .kb-header__panel[hidden],
    .kb-header.is-open .kb-header__panel {
        transform: none !important;
        transition: none !important;
    }
}

.kb-header__panel-nav {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding: 16px var(--kb-gutter-mobile) 24px;
}

.kb-header__panel-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kb-header__panel-nav li {
    border-bottom: 1px solid var(--kb-ink-divider-soft);
}

.kb-header__panel-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    color: var(--kb-ink);
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color var(--kb-transition-ui);
}

.kb-header__panel-nav a:hover,
.kb-header__panel-nav a:focus {
    color: var(--kb-bordeaux);
    outline: none;
}

.kb-header__panel-lang {
    margin-top: var(--kb-space-s);
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kb-header__panel-lang a {
    display: inline-block;
    padding: 6px 8px;
    color: inherit;
    text-decoration: none;
}

/* ---- Mobile submenu (Services accordion) ------------------------------ */
/* Replaces the default <li> for the Services item: the link stays
   clickable to /services/, and a separate toggle button reveals the
   three child links in a vertical accordion underneath. */
.kb-header__panel-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: 1px solid var(--kb-ink-divider-soft);
}

.kb-header__panel-row > a {
    flex: 1 1 auto;
    border-bottom: 0;
}

.kb-header__panel-subtoggle {
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--kb-ink);
    cursor: pointer;
}

.kb-header__panel-subtoggle:focus-visible {
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 2px;
}

/* Chevron glyph: 8x8 square rotated 45°, square-ended (matches the
   editorial "no radius" header language). */
.kb-header__panel-subtoggle-icon {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 220ms ease;
    margin-block-start: -2px;
}

.kb-header__panel-item--has-children.is-expanded .kb-header__panel-subtoggle-icon {
    transform: rotate(-135deg);
    margin-block-start: 3px;
}

.kb-header__panel-subnav {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease;
}

.kb-header__panel-item--has-children.is-expanded .kb-header__panel-subnav {
    max-height: 240px;
}

.kb-header__panel-subnav li {
    border-bottom: 0;
}

.kb-header__panel-subnav a {
    display: block;
    min-height: 40px;
    padding: 10px 0 10px 18px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kb-ink);
    opacity: 0.78;
    text-decoration: none;
    transition: color var(--kb-transition-ui), opacity var(--kb-transition-ui);
}

.kb-header__panel-subnav a:hover,
.kb-header__panel-subnav a:focus {
    color: var(--kb-bordeaux);
    opacity: 1;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .kb-header__panel-subtoggle-icon,
    .kb-header__panel-subnav,
    .kb-header__panel-item--has-children.is-expanded .kb-header__panel-subnav {
        transition: none !important;
    }
}

/* ==========================================================================
   Tablet — ≤ 1199px
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-header {
        height: var(--kb-header-height-tablet);
    }

    .kb-header__inner {
        gap: var(--kb-space-s);
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-header__nav--left,
    .kb-header__nav--right {
        display: none;
    }

    /* The desktop mega menu is never shown below the tablet breakpoint —
       Services uses the mobile panel submenu instead. */
    .kb-header__mega {
        display: none;
    }

    /* The full-height bridge on the Services <li> is also a desktop-only
       concern; on tablet/mobile the parent nav is hidden, so the rule
       has no effect, but we reset it for clarity. */
    .kb-header__nav-item--has-mega {
        align-self: auto;
        display: block;
    }

    .kb-header__toggle {
        display: inline-flex;
    }

    .kb-header__logo img {
        max-height: 58px;
        max-width: 150px;
    }
}

/* ==========================================================================
   Mobile — ≤ 767px
   ========================================================================== */
@media (max-width: 767px) {
    .kb-header {
        height: var(--kb-header-height-mobile);
    }

    /* Sticky reset for mobile.
       The body.admin-bar top offset (see L52-54) uses
       --wp-admin--admin-bar--height which WordPress sets to 46px
       on ≤782px. On real mobile devices the admin bar is often
       not visible (logged-out frontend, mobile app shell, hidden
       via user toggle, or other plugins that add body.admin-bar
       without rendering the bar). Reserving 46px in those cases
       leaves a hole at the top of the viewport where page/Footer
       content scrolls into view ABOVE the sticky header.
       On mobile the header must always sit at top: 0. */
    .elementor-location-header,
    body.admin-bar .elementor-location-header {
        top: 0;
    }

    /* Mobile closed bar:
       [ LOGO ] ............................. [ HAMBURGER ]
       Logo left, toggle right, vertically centered.
       No nav, no FR|EN in the closed bar (FR|EN now lives
       inside the opened panel — see widget PHP). */
    .kb-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-header__nav {
        display: none;
    }

    /* Closed-bar right cluster: ONLY the hamburger.
       FR|EN is hidden here on mobile because it now lives
       inside the opened panel (single visible instance). */
    .kb-header__right .kb-header__lang {
        display: none;
    }

    .kb-header__toggle {
        display: inline-flex;
    }

    .kb-header__logo {
        justify-content: flex-start;
    }

    .kb-header__logo img {
        max-height: 50px;
        max-width: 145px;
    }

    .kb-header__right {
        gap: 12px;
        justify-content: flex-end;
    }

    .kb-header__panel-nav {
        padding: 8px var(--kb-gutter-mobile) 20px;
    }

    /* The language switch reappears inside the opened mobile panel.
       On desktop/tablet the whole .kb-header__panel is display:none
       so this rule only ever resolves in the mobile closed→open
       transition. Use the same Helvetica/Montserrat style the
       header-bar version already uses. */
    .kb-header__panel .kb-header__lang {
        display: inline-flex;
        margin-top: var(--kb-space-s);
    }
}