/* Header, title block, and navigation */
header {
    display: flex;
    align-items: flex-start;
    padding: var(--header-pad);
    background: var(--glass);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.header-inner {
    display: flex;
    gap: var(--header-gap);
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;      /* clip at the inner content edge, not outer card edge */
}

/* Ensure left/right columns behave as a two-column flex layout */
.header-left {
    flex: 0 0 auto;          /* logo keeps intrinsic size */
    display: flex;
    align-items: flex-start;
}

.header-right {
    flex: 1 1 auto;          /* expand to fill remaining horizontal space */
    display: flex;
    flex-direction: column;  /* stack title above nav */
    align-items: stretch;     /* let children (nav-row) span full width */
    min-width: 0;
    gap: var(--header-title-gap);             /* space between title block and buttons */
}

.logo {
    width: var(--logo-size);
    height: var(--logo-size);
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header h1 {
    margin: 0;
    font-size: var(--site-title-size);
    color: var(--green2);
    overflow: hidden;
    text-overflow: hidden;
}

/* Title block layout */
.title-wrap {
    display: inline-flex; /* allows top alignment next to inline/inline-block logo */
    flex-direction: column; /* stack title and subtitle */
    vertical-align: top; /* align top with adjacent inline elements (e.g., logo) */
    align-self: flex-start; /* align to top if parent is a flex row */
    place-self: start; /* align to top-left if parent is a grid */
    margin: 0;
}

.header-right .title-wrap {
    flex: 1 1 auto;        /* allow title/subtitle area to shrink */
    max-width: 100%;       /* do not exceed the card width */
    white-space: nowrap;   /* keep title/subtitle on one line each */
    overflow: hidden;      /* hide anything beyond card margins */
    text-overflow: ellipsis; /* show ellipsis when clipped */
}

.site-title {
    margin: 0; /* no margin so subtitle is immediately below */
    line-height: 1.1;
}

.tagline {
    margin: 0; /* no extra top margin; follows title directly */
}

/* Keep subtitle/tagline from shifting vertically when the viewport crosses breakpoints */
.header-right .title-wrap .subtitle,
.header-right .title-wrap .tagline,
.header-right .title-wrap p,
.header-right .title-wrap h2,
.header-right .title-wrap h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.1;
}

/* Fallback: normalize vertical metrics for any title-wrap children (covers span/div subtitles) */
.header-right .title-wrap > * {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.1;
}

/* Ensure the next block (e.g., buttons/menu) sits tight below the subtitle */
.title-wrap + * {
    margin-top: 0 !important;
}

@media (max-width: var(--bp-sm)) {
    /* Keep tight spacing within the title block */
    .title-wrap { gap: 0.125rem; }

    /* Remove any top spacing on the element that follows the title block */
    .title-wrap + * { margin-top: 0 !important; padding-top: 0 !important; }

    /* If the parent uses flex/grid with a row gap, collapse it on small screens */
    :is(header, .header, .top-bar, .nav, .navbar, .menu, .actions, .toolbar):has(.title-wrap) {
        row-gap: 0 !important;
        gap: 0.125rem !important;
    }
}

/* Right-column row that contains the nav; right-align on wide screens */
.nav-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--nav-row-pad-y);               /* avoid clipping rounded pills at top */
    padding-right: var(--nav-row-pad-right);             /* avoid clipping on the right edge */
    padding-bottom: var(--nav-row-pad-y);
    overscroll-behavior: contain;
    overflow-x: hidden;             /* let .site-nav be the only horizontal scroller */
    overflow-y: visible;            /* avoid clipping rounded pills */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
    touch-action: pan-x;            /* restrict gesture to horizontal */
    overscroll-behavior: contain;   /* contain scroll chaining */
    flex-wrap: wrap;               /* allow optional submenu to drop to next line */
    width: 100%;
}

.header-right > .nav-row {
    flex: 1 1 auto;        /* nav consumes remaining space */
}

/* Main menu scroller should span the full nav row width */
.nav-row .site-nav {
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
}

/* Optional submenu row (renders below the main site-nav when present) */
.subnav-row {
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: flex-start;    /* left-align submenu within the right column */
    overflow: hidden;               /* avoid a second visible scrollbar */
    margin-top: var(--submenu-top-gap);               /* small gap between menu and submenu */
}

.subnav {
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--nav-pill-gap);
    flex-wrap: nowrap;
    row-gap: 0;
    overflow-x: auto;               /* horizontal slide like carousel */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* hide scrollbar chrome while keeping scroll */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge/IE */
}

.subnav::-webkit-scrollbar {
    display: none;
}

.subnav a,
.subnav button {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Selected state for button-style subnav items */
.subnav button[aria-selected="true"] {
    filter: brightness(1.08);
}