/* Mockup spacing; retain the legacy font stacks documented in docs/STYLES.md. */
:root { --holliday-header-offset: 0px; --holliday-header-height: 0px; }
html { scroll-padding-top: calc(var(--holliday-header-offset) + var(--holliday-header-height) + 16px); }
.holliday-header-slot { position: relative; top: var(--holliday-header-offset); z-index: 1000; pointer-events: none; }
.holliday-header-slot.is-enhanced { position: sticky; }
.holliday-header {
    pointer-events: auto;
    background: #fff;
    color: #212529;
    .top-bar { background: var(--wildcat-blue); padding: 0 3.5%; }
    .utility-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
    .utility-menu li + li { border-inline-start: 1px solid #ffffff66; }
    .utility-menu a { display: flex; gap: .6rem; align-items: center; padding: .5rem 1rem; min-height: 36px; color: #fff; font: 700 14px/1.5 "Roboto Condensed", sans-serif; text-transform: uppercase; text-decoration: none; }
    .holliday-header-main { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem 3.5% 1.25rem 6.5%; }
    .holliday-brand { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; max-width: 100%; min-width: 0; }
    .logo-container { flex-shrink: 0; width: 96px; }
    .logo-container a { display: block; }
    .logo-container img { display: block; width: 100%; height: 96px; object-fit: contain; }
    .site-title { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; line-height: 1.2; }
    .site-name { font-size: 2rem; font-weight: 700; }
    .site-description { font-size: 1.3rem; font-weight: 600; }
    .top-menu { min-width: 0; }
    .primary-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
    .nav-item { position: relative; flex: 0 1 auto; width: auto; padding: 0; min-width: 0; }
    .nav-item-heading { display: flex; align-items: center; }
    .top-menu a, .nav-parent-label { display: flex; align-items: center; min-height: 44px; padding: .5rem .25rem; font: 500 14px/1.5 "Roboto Condensed", sans-serif; color: #000; text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
    button { color: #000; background: #fff; border: 0; font: 700 14px/1.5 "Roboto Condensed", sans-serif; }
    .submenu-toggle { display: none; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex-shrink: 0; }
    .submenu-chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
    [aria-expanded="true"] .submenu-chevron { transform: rotate(225deg); }
    .submenu { list-style: none; padding: .5rem; margin: 0; border: 2px solid var(--wildcat-blue); background: #fff; }
    .submenu a { padding: .5rem .75rem; }
    [hidden] { display: none !important; }
    .navigation-toggle { display: none; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--wildcat-blue); border-radius: 4px; gap: .75rem; align-items: center; }
    .navigation-icon { width: 18px; height: 12px; border-block: 2px solid currentColor; position: relative; }
    .navigation-icon::after { content: ''; position: absolute; top: 3px; left: 0; width: 100%; border-top: 2px solid currentColor; }
    a:hover, a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
    a:focus-visible, button:focus-visible { outline: 3px solid #14438f; outline-offset: 2px; }
    .top-bar a:focus-visible { outline-color: #fff; outline-offset: -4px; }
    &.is-enhanced .submenu-toggle { display: flex; }
    &.is-enhanced .submenu { position: absolute; top: 100%; right: 0; width: min(20rem, 90vw); max-height: calc(100dvh - var(--holliday-header-offset) - var(--holliday-header-height) - 16px); overflow-y: auto; box-shadow: 0 6px 12px #0002; }
    &.is-compact { box-shadow: 0 2px 8px #0002; }
    &.is-compact .top-bar { display: none; }
    &.is-compact .holliday-header-main { padding-block: .5rem; }
    &.is-compact .logo-container { width: 48px; }
    &.is-compact .logo-container img { height: 48px; }
    &.is-compact .site-name { font-size: 1.5rem; }
    &.is-compact .site-description { font-size: 1rem; }
}
/* The mockup's full navigation needs a desktop width; tablets get a disclosure. */
@media (max-width: 1199.98px) {
    .holliday-header {
        .holliday-header-main { flex-wrap: wrap; gap: .75rem; padding: 1rem 6.5%; }
        .holliday-brand { gap: 1rem; }
        .logo-container { width: 72px; }
        .logo-container img { height: 72px; }
        .site-name { font-size: 1.5rem; }
        .site-description { font-size: 1rem; }
        .top-menu { flex-basis: 100%; }
        .primary-menu { display: block; }
        .primary-menu > li { border-top: 1px solid #ddd; }
        .nav-item-heading { justify-content: space-between; }
        .nav-item-heading > a, .nav-parent-label { flex: 1; }
        &.is-enhanced .navigation-toggle { display: flex; }
        &.is-enhanced .top-menu { max-height: calc(100dvh - var(--holliday-header-offset) - 180px); overflow-y: auto; padding: 4px; }
        &.is-enhanced .submenu { position: static; width: 100%; max-height: none; box-shadow: none; }
    }
}
@media (max-width: 575.98px) {
    .holliday-header {
        .top-bar { padding-inline: 1rem; }
        .utility-menu { justify-content: center; }
        .utility-menu a { padding-inline: .5rem; font-size: 12px; }
        .holliday-header-main { padding: .75rem 1rem; gap: .5rem; }
        .holliday-brand { gap: .5rem; }
        .logo-container { width: 48px; }
        .logo-container img { height: 48px; }
        .site-name { font-size: 1.25rem; }
        .site-description { font-size: .875rem; }
        &.is-compact .site-name { font-size: 1.25rem; }
        &.is-compact .site-description { font-size: .875rem; }
    }
}
/* Keep the focused skip link above the sticky header and WordPress toolbar. */
.holliday-skip-link { position: fixed; top: var(--holliday-header-offset); }