/**
 * Site Header Styles
 * Floating sticky header with responsive mobile menu
 */

:root {
    --header-margin: 5px;
    --header-height: 70px;
    --header-border-radius: 20px;
    --header-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   HEADER CONTAINER
   ======================================== */

.site-header {
    position: fixed;
    top: var(--header-margin);
    left: var(--header-margin);
    right: var(--header-margin);
    width: calc(100% - (var(--header-margin) * 2));
    background-color: var(--header-bg);
    border-radius: var(--header-border-radius);
    z-index: 9999;
    transition: var(--header-transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    padding: 0;
    height: var(--header-height);
}

/* Body spacing for fixed header */
body.has-site-header {
    padding-top: calc(var(--header-height) + var(--header-margin) * 2 + 10px);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 15px;
    transition: var(--header-transition);
    /* Full width, and the padding above does the insetting. A starter-theme
       `width: calc(100% - 20px)` used to live here with no margin to centre
       it, so the whole 20px fell on the right — the logo sat 15px from the
       bar's edge and the social icons 35px from theirs. */
    width: 100%;
}

/* ========================================
   LOGO
   ======================================== */

.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 10;
}

.header-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 50px !important;
    width: auto;
    max-width: 180px !important;
    object-fit: contain;
    transition: var(--header-transition);
}

/* Logo width adapts to the selected shape (class set by jm_render_placement_logo) */
.logo-image.logo-type-horizontal { max-width: 240px !important; }
.logo-image.logo-type-symbol     { max-width: 60px !important; }

.logo-text {
    color: var(--header-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ========================================
   DESKTOP NAVIGATION
   ======================================== */

.header-nav.desktop-nav {
    display: none;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    margin: 0 20px;
}

.header-nav .primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.header-nav .primary-menu > li {
    position: relative;
}

.header-nav .primary-menu > li > a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: var(--header-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 50px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-nav .primary-menu > li > a:hover,
.header-nav .primary-menu > li.current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Caret on any item that has a dropdown */
.header-nav .primary-menu > li.menu-item-has-children > a::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
    transition: transform 0.22s ease;
}

.header-nav .primary-menu > li.menu-item-has-children:hover > a::after {
    transform: translateY(1px) rotate(225deg);
}

/* Dropdown Menus */
.header-nav .primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 10px 0;
    margin-top: 10px;
    min-width: 200px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.header-nav .primary-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-nav .primary-menu .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--header-text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.header-nav .primary-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 25px;
}

/* ========================================
   HEADER ACTIONS
   ======================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

/* ========================================
   MOBILE MENU TOGGLE (Hamburger)
   ======================================== */

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hamburger-box {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--header-text);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}

/* Hamburger Active State (X) */
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ========================================
   HEADER SOCIAL ICONS (desktop bar)
   ======================================== */

.header-social {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Optical, not geometric. Each glyph sits 8.5px inside its 34px round
       hit area, and the logo carries 3.4px of transparent edge of its own,
       so matching the BOXES still reads as more air on the right. Pulling
       the row out by the difference lines up the artwork instead — measured
       18.4px of ink on the left, 18.5px on the right — while the icons keep
       their full-size target. */
    margin-right: -5px;
}

/* ─── Whoever is LAST carries the optical compensation ──────────────────
   Adding the language selector put a new element to the right of the
   socials, so the -5px above stopped reaching the bar's edge and started
   merely narrowing the gap between the two — the right-hand ink ended up
   15px from the edge against the logo's 18.4px.

   The selector's box IS its ink (text and a chevron, no transparent
   padding), so it needs the opposite sign: push IN by the logo's own
   transparent edge. Guarded with :has() so the socials keep their pull
   when the translator is inactive and they are last again. */
.header-actions:has(.jmt-lang-selector) .header-social {
    margin-right: 0;
}

.header-actions .jmt-lang-selector {
    margin-right: 3px;
}

.header-social__link {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .header-social__link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.14);
        transform: translateY(-2px);
    }
}

/* The mobile menu has its own social row */
@media screen and (max-width: 1024px) {
    .header-social { display: none !important; }
}

/* ========================================
   MOBILE NAVIGATION
   ======================================== */

.mobile-nav {
    max-height: 0;
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: var(--header-bg);
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    position: relative;
}

.mobile-nav .mobile-menu {
    list-style: none;
    margin: 0;
    padding: 10px 16px 16px;   /* top offset comes from .mobile-nav::before */
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.mobile-nav .mobile-menu > li {
    border-bottom: none;
}

.mobile-nav .mobile-menu > li:last-child {
    border-bottom: none;
}

.mobile-nav .mobile-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    color: var(--header-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav .mobile-menu > li > a:hover,
.mobile-nav .mobile-menu > li.current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Caret on a mobile row that expands — flips when open */
.mobile-nav .mobile-menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.6;
    transition: transform 0.25s ease;
}

.mobile-nav .mobile-menu li.menu-item-has-children.open > a::after {
    transform: translateY(1px) rotate(225deg);
}

/* Mobile Submenu
   Child rows keep the full width of the parent pills — an indent here reads as
   a dead gap on a phone. The accent edge on the left is what marks them as
   children instead. */
.mobile-nav .mobile-menu .sub-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-nav .mobile-menu li.menu-item-has-children.open > .sub-menu {
    max-height: 500px;
    margin-top: 6px;
}

.mobile-nav .mobile-menu .sub-menu li + li { margin-top: 6px; }

.mobile-nav .mobile-menu .sub-menu li a {
    display: flex;
    align-items: center;
    padding: 13px 20px;
    border-radius: 12px;
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav .mobile-menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--header-text);
}

/* Mobile Language Selector */
.mobile-nav .jmt-mobile-lang {
    padding: 24px 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: center;
}

/* Mobile Social Links */
.mobile-social-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 24px 30px 0;
}

.mobile-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 30px 34px;
}

.mobile-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.2s ease;
}

.mobile-social-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.08);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Desktop */
@media screen and (min-width: 1025px) {
    .header-nav.desktop-nav {
        display: flex;
    }

    .mobile-only {
        display: none !important;
    }

    .mobile-nav {
        display: none !important;
    }
}

/* Mobile/Tablet */
@media screen and (max-width: 1024px) {
    .header-container {
        height: var(--header-height);
        /* 7 left against 10 right, and that IS the symmetric pair: the logo
           file carries about 3.4px of transparent edge, while the hamburger
           paints a real 1px border, so its box is its ink and the logo's is
           not. Measured, this puts both at ~10px of visible inset. */
        padding: 0 10px 0 7px;
    }

    .header-nav.desktop-nav {
        display: none !important;
    }

    .menu-toggle.mobile-only {
        display: flex;
        background-color: transparent;
    }

    /* `.site-header` sets a backdrop-filter, which makes it the containing
       block for this fixed child — so these offsets resolve against the HEADER
       box, not the viewport. 0 on all three sides means the open panel is
       exactly as wide as the header bar and starts at its top edge.
       Its height (viewport minus an equal margin top and bottom) comes from
       setMobileMenuHeight() in script.js.
       NOTE: keep `.site-header` free of a real `border` — a border would shift
       the padding box and offset this panel by the border width on each side.
       Use an inset box-shadow for a hairline instead. */
    .mobile-nav {
        display: flex;
        flex-direction: column;      /* menu / label / socials stack */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        overscroll-behavior: contain;
    }

    /* Keep natural heights so the panel scrolls instead of squashing rows */
    .mobile-nav > * { flex-shrink: 0; }

    /* Taller than the screen? Scroll inside the panel instead of clipping it. */
    .mobile-nav.is-open {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }
    .mobile-nav.is-open::-webkit-scrollbar { width: 4px; }
    .mobile-nav.is-open::-webkit-scrollbar-track { background: transparent; }
    .mobile-nav.is-open::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.22);
        border-radius: 4px;
    }

    /* Opaque strip pinned under the logo / close button, so menu rows scroll
       out of sight behind the header bar instead of showing through it. */
    .mobile-nav::before {
        content: '';
        position: sticky;
        top: 0;
        z-index: 2;
        flex: 0 0 auto;
        height: calc(var(--header-height) + 6px);
        background-color: var(--header-bg);
    }

    /* Hide desktop language selector on mobile — shown inside mobile menu */
    .header-actions .jmt-lang-selector {
        display: none;
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    :root {
        --header-margin: 5px;
        --header-border-radius: 20px;
    }

    .header-actions {
        gap: 10px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .mobile-nav .jmt-mobile-lang {
        padding: 20px 24px 0;
    }

    .mobile-social-label {
        padding: 20px 24px 0;
    }

    .mobile-social {
        padding: 10px 24px 24px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.header-nav a:focus,
.menu-toggle:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .site-header,
    .header-container,
    .logo-image,
    .hamburger-line,
    .mobile-nav,
    .primary-menu .sub-menu {
        transition: none;
    }
}

/* ========================================
   OVERLAY MODE (pages that open with a hero)
   The header floats over the photograph instead of sitting on a white
   band above it, so the image fills the window from the very top.
   ======================================== */

body.jm-has-hero.has-site-header { padding-top: 0; }

body.jm-has-hero .site-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Square to the top edge of the window, softened at the bottom so the
       bar reads as a panel hanging from it rather than a full-width slab. */
    border-radius: 0 0 16px 16px;
    background-color: rgba(20, 27, 32, 0.62);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    border-bottom: 0;
    /* The edge is drawn with box-shadow, not a border or a separate
       element: a border would shift the padding box that the mobile panel
       positions against, and the previous bloom strip sat a pixel clear of
       the bar, which showed as a seam. An inset light line plus a flush
       dark line reads as the lit and shadowed faces of one pane.
       The spread-less 0 1px 0 sits hard against the bar — no gap. */
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(9, 14, 17, 0.55),
        0 14px 34px -22px rgba(0, 0, 0, 0.5);
}

/* Once the hero is behind you the bar earns its weight. */
body.jm-has-hero .site-header.is-scrolled {
    background-color: rgba(16, 22, 26, 0.90);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        0 1px 0 rgba(9, 14, 17, 0.7),
        0 18px 44px -20px rgba(0, 0, 0, 0.58);
}

/* ── Menu open: the bar GROWS into the menu ────────────────────
   One surface, start to finish. The header keeps its own glass and
   simply gets taller; the panel inside it is transparent and carries
   only the rows. Because nothing slides out from behind the bar, there
   is no moment where two surfaces overlap and no colour to snap. */
body.jm-has-hero .site-header,
.site-header {
    transition:
        height 0.46s cubic-bezier(0.32, 0.72, 0.28, 1),
        border-radius 0.46s cubic-bezier(0.32, 0.72, 0.28, 1),
        background-color 0.46s ease,
        box-shadow 0.4s ease;
    overflow: hidden;
}

body.jm-menu-open .site-header,
body.jm-menu-open.jm-has-hero .site-header,
body.jm-menu-open.jm-has-hero .site-header.is-scrolled {
    /* dvh so the bar still reaches the bottom once the URL bar collapses */
    height: 100dvh;
    border-radius: 0;
    /* The same glass, deepened — transitioned over the same duration, so
       it darkens AS it grows rather than switching the moment you tap. */
    background-color: rgba(18, 26, 31, 0.94);
    box-shadow: none;
}

/* The header must not clip its own dropdowns while closed. */
body:not(.jm-menu-open) .site-header { overflow: visible; }

/* ========================================
   MOBILE HEADER CONTROLS
   ======================================== */
.menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .menu-toggle:hover {
        background-color: var(--primary);
        border-color: var(--accent);
    }
}

/* Open state takes the brand accent so the control reads as active. */
.menu-toggle[aria-expanded="true"] {
    background-color: var(--primary);
    border-color: var(--accent);
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Menu rows: square, flat, with a hairline — the same language as the
   buttons elsewhere, so controls stay controls. */
.mobile-nav .mobile-menu > li > a {
    border-radius: 8px;
    /* Lifted off the panel rather than sunk into it — the near-black rows
       disappeared against the dark surface. */
    background-color: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    letter-spacing: 0.1em;
}

.mobile-nav .mobile-menu > li > a:hover,
.mobile-nav .mobile-menu > li > a:focus-visible {
    background-color: var(--primary);
    border-color: var(--accent);
    color: #fff;
}

.mobile-nav .mobile-menu > li.current-menu-item > a,
.mobile-nav .mobile-menu > li.current_page_item > a {
    background-color: var(--primary);
    border-color: var(--accent);
    color: #fff;
}


/* ========================================
   MENU PANEL
   The panel is .mobile-nav (the <nav>); .mobile-menu is the <ul> inside.
   It paints nothing — the header it lives in IS the surface now — and
   simply fills whatever height the growing header gives it.
   ======================================== */
.mobile-nav {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-nav.is-open {
    height: 100%;
    max-height: none;
    border-radius: 0;
}

/* ========================================
   MENU CONTENT — reveal as the bar opens
   ======================================== */

.mobile-nav__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Starts below the bar row, so rows scroll within their own space and
       never slide under the logo — which is what the old sticky strip was
       patching over. */
    padding-top: calc(var(--header-height) + 10px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    /* Held back until the bar has begun to open, then fades up. */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.mobile-nav.is-open .mobile-nav__inner {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.16s;
}

/* Rows arrive in sequence rather than all at once. */
.mobile-nav.is-open .mobile-menu > li {
    animation: jm-menu-row 0.42s cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.mobile-nav.is-open .mobile-menu > li:nth-child(1) { animation-delay: 0.20s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(2) { animation-delay: 0.25s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(3) { animation-delay: 0.30s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(4) { animation-delay: 0.35s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(5) { animation-delay: 0.40s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(6) { animation-delay: 0.45s; }
.mobile-nav.is-open .mobile-menu > li:nth-child(n+7) { animation-delay: 0.50s; }

@keyframes jm-menu-row {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav.is-open .mobile-menu > li { animation: none; }
    .mobile-nav__inner { transition: none; }
}

/* The sticky strip existed to hide rows scrolling under the bar. The inner
   scroller does that structurally now, and the strip would paint a second
   surface over the one that is growing. */
.mobile-nav::before { content: none; }