/* Shared header only. Loaded by components/header.php, with a cache version. */
#siteHeader,
#mobileMenuModal {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
}

#siteHeader .site-header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: 64px;
}

#siteHeader .site-header-brand {
    justify-self: start;
    min-width: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}

#siteHeader .site-header-brand > div { flex-shrink: 0; }

#siteHeader .site-main-navigation {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 4px;
    min-width: max-content;
}

#siteHeader .site-main-navigation > a,
#siteHeader .site-main-navigation > div > button {
    flex-shrink: 0;
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
}

#siteHeader .site-main-navigation > a { font-weight: 500; }
#siteHeader .site-main-navigation > div > button { font-weight: 700; }

#siteHeader .site-header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    width: max-content;
}

#siteHeader #pipButton { width: 66px; flex-shrink: 0; }
#siteHeader #mobileMenuBtn { display: none; }

/* Color and glow only: keep the shared menu's spacing and text metrics intact. */
.header-new-link {
    --new-menu-color: #c2410c;
    --new-menu-highlight: #f97316;
    --new-menu-glow: rgb(249 115 22 / 55%);
}

.dark #siteHeader .header-new-link {
    --new-menu-color: #fdba74;
    --new-menu-highlight: #fff7ed;
    --new-menu-glow: rgb(251 146 60 / 70%);
}

.header-new-label { white-space: pre; }

.header-twinkle-char {
    color: var(--new-menu-color);
    animation: header-menu-twinkle 4.8s ease-in-out infinite;
    animation-delay: calc(var(--char-index) * 100ms);
}

@keyframes header-menu-twinkle {
    0%, 18%, 100% {
        color: var(--new-menu-color);
        text-shadow: 0 0 0 transparent;
    }
    7% {
        color: var(--new-menu-highlight);
        text-shadow: 0 0 6px var(--new-menu-glow), 0 0 12px var(--new-menu-glow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-twinkle-char { animation: none; text-shadow: none; }
}

/* Keep translated desktop menus visible, even when the centered row cannot fit. */
@media (min-width: 1280px) {
    #siteHeader .site-header-brand { white-space: nowrap; }
    #siteHeader[data-nav-density] .site-main-navigation { gap: 2px; }
    #siteHeader[data-nav-density] .site-main-navigation > a,
    #siteHeader[data-nav-density] .site-main-navigation > div > button {
        padding-right: 4px;
        padding-left: 4px;
        font-size: 12px;
    }
    #siteHeader[data-nav-density='tight'] .site-main-navigation { gap: 1px; }
    #siteHeader[data-nav-density='tight'] .site-main-navigation > a,
    #siteHeader[data-nav-density='tight'] .site-main-navigation > div > button {
        padding-right: 2px;
        padding-left: 2px;
        font-size: 11.5px;
    }
    #siteHeader[data-nav-density='mini'] .site-main-navigation { gap: 0; }
    #siteHeader[data-nav-density='mini'] .site-main-navigation > a,
    #siteHeader[data-nav-density='mini'] .site-main-navigation > div > button {
        padding-right: 1px;
        padding-left: 1px;
        font-size: 11px;
    }
    #siteHeader[data-nav-flow] .site-header-row {
        grid-template-columns: auto minmax(0, 1fr) var(--site-header-action-width);
        column-gap: 16px;
    }
    #siteHeader[data-nav-flow][data-nav-density] .site-header-row { column-gap: 12px; }
    #siteHeader[data-nav-flow][data-nav-density='mini'] .site-header-row { column-gap: 6px; }
    #siteHeader[data-compact] .site-header-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 64px auto;
        height: auto;
    }
    #siteHeader[data-compact] .site-header-brand { grid-column: 1; grid-row: 1; }
    #siteHeader[data-compact] .site-header-actions { grid-column: 2; grid-row: 1; }
    #siteHeader[data-compact] .site-main-navigation {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        padding-bottom: 10px;
    }
}

@media (max-width: 1279px) {
    #siteHeader .site-header-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 64px auto;
        height: auto;
        padding-bottom: 6px;
    }
    #siteHeader .site-header-brand { max-width: 100%; }
    #siteHeader .site-header-brand > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Keep discovery links visible without opening the drawer. Only this row
       scrolls; the page, brand and action buttons keep their viewport width. */
    #siteHeader .site-main-navigation {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        min-width: 0;
        max-width: 100%;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #fb923c transparent;
        scroll-padding-inline: 8px;
        padding-block: 2px;
    }
    #siteHeader .site-main-navigation > a,
    #siteHeader .site-main-navigation > div > button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    #siteHeader .site-main-navigation > div { flex-shrink: 0; }
    /* Scroll containers clip floating dropdowns. The practice button opens the
       shared drawer on narrow screens, where all training links remain usable. */
    #siteHeader .site-main-navigation > div > div { display: none; }
    #siteHeader #mobileMenuBtn { display: inline-flex; }
}

@media (max-width: 767px) {
    #siteHeader #pipButton { display: none; }
}

@media print {
    #siteHeader, #mobileMenuModal { display: none !important; }
}