/* render_block_core_template_part() always wraps a part in
   <tagName class="wp-block-template-part">, and that wrapper is exactly as tall
   as the header inside it. It therefore becomes the sticky containing block and
   leaves the header zero distance to travel, so `position: sticky` below — and
   the editor's Position → Sticky control — computed correctly but never stuck.
   Dropping the wrapper's box makes .wp-site-blocks the containing block instead.
   Scoped to the header part (the footer keeps its normal box) and to
   .wp-site-blocks, which only exists on the front end — enqueue_block_assets
   mirrors this file into the editor iframe, where a box-less template part
   would break the block's selection outline and toolbar anchoring. */
.wp-site-blocks > header.wp-block-template-part {
    display: contents;
}

.hthc-header {
    position: sticky;
    /* Clears the admin bar for logged-in users; 0 for visitors. See
       --hthc-sticky-offset in scroll-color.css. */
    top: var(--hthc-sticky-offset, 0px);
    z-index: 100;
    background: var(--wp--preset--color--off-white);
    border-bottom: 1px solid rgba(61, 84, 100, 0.12);
    transition: background 0.2s;
}

/* Follows theme.json's wideSize rather than repeating it, so the header lines up
   with every wide-aligned block on the page and moves with them if the site
   width is ever changed in one place. */
.hthc-header__inner {
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin: 0 auto;
}

.hthc-header__wordmark {
    font-family: var(--wp--preset--font-family--ppcirka);
    font-weight: 300;
    font-size: clamp(18px, 1.4vw, 22px);
    text-decoration: none;
    color: var(--wp--preset--color--charcoal);
}

/* Structural only — like the toc-nav, the menu is left unstyled so its
   typography and colour come from theme.json / the editor (core/navigation
   supports). No font-family/weight/size/colour overrides here, otherwise this
   selector's specificity would beat the editor settings. */
.hthc-header__nav a {
    color: inherit;
    text-decoration: none;
}

/* Top-level nav: red underline on hover + on the active page. A reserved
   transparent border avoids layout shift; using border (not colour) sidesteps
   core's doubled-class `.__content.__content{color:inherit}` specificity. The
   active item's red+bold text comes from nav-hover.php. */
.hthc-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.2s ease;
}
.hthc-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.hthc-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"] {
    border-bottom-color: var(--wp--preset--color--coral);
}

/* Events submenu dropdown */
.hthc-header__nav .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--off-white);
    border: 0.5px solid var(--divider);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 220px;
    box-shadow: 0 10px 36px rgba(61, 84, 100, 0.14);
}
.hthc-header__nav .wp-block-navigation__submenu-container a {
    padding: 6px 18px;
}

/* Right-hand cluster spacing: nav | CTA | hamburger. */
.hthc-header__cluster {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
}

/* Inline nav (and its divider) are desktop-only; the always-on hamburger
   carries the full menu below that.
   Measured: the header needs 959px for the inline nav to fit — logo 150 +
   cluster 777 + 32 padding. The old 781px breakpoint left it cramped through the
   whole 782–959px band. 1024px restores the hamburger there, keeps ~65px of slack
   so a longer menu label cannot bring the problem back, and puts tablets in
   landscape on the hamburger rather than a squeezed nav. */
@media (max-width: 1024px) {
    .hthc-header__nav-wrap { display: none !important; }
}

/* ---- Navigation overlay — side-panel layout (Right / Left block styles) -----
   The full menu uses core/navigation's own overlay (hamburger + close X). These
   styles turn the open overlay into a dim backdrop with a fixed charcoal side
   panel. The default "Overlay — Full-screen" style is core's untouched. */
.wp-block-navigation.is-style-overlay-right .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation.is-style-overlay-left .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(26, 26, 26, 0.5) !important;
}
.wp-block-navigation.is-style-overlay-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation.is-style-overlay-left .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(600px, 100vw);
    margin: 0;
    padding: 48px clamp(28px, 4vw, 56px);
    overflow-y: auto;
    background-color: var(--wp--preset--color--charcoal);
    color: var(--wp--preset--color--beige);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
}
.wp-block-navigation.is-style-overlay-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    right: 0;
    border-left: 0.5px solid var(--divider);
}
.wp-block-navigation.is-style-overlay-left .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    left: 0;
    border-right: 0.5px solid var(--divider);
}

/* Close (X) pinned to the top-right of the panel — core renders it, we place it. */
.wp-block-navigation.is-style-overlay-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation.is-style-overlay-left .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 24px;
    right: 24px;
    left: auto;
    z-index: 2;
    color: var(--wp--preset--color--beige);
}

/* Slide the panel in from its edge (core toggles display, so animate). */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-navigation.is-style-overlay-right .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        animation: hthc-nav-panel-in-right 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .wp-block-navigation.is-style-overlay-left .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        animation: hthc-nav-panel-in-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
}
@keyframes hthc-nav-panel-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes hthc-nav-panel-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Symmetric slide-out on close (nav-overlay.js holds the panel open, adds
   .hthc-nav-closing, then lets core close after the animation). */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-navigation.is-style-overlay-right .is-menu-open.hthc-nav-closing .wp-block-navigation__responsive-dialog {
        animation: hthc-nav-panel-out-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .wp-block-navigation.is-style-overlay-left .is-menu-open.hthc-nav-closing .wp-block-navigation__responsive-dialog {
        animation: hthc-nav-panel-out-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .is-menu-open.hthc-nav-closing { background-color: transparent !important; transition: background-color 0.3s ease; }
}
@keyframes hthc-nav-panel-out-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
@keyframes hthc-nav-panel-out-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}