/*
  OneRouter — Site Header Styles
  Loaded on every page via <link> in the layout.
*/

/* ===== SITE HEADER ===== */
.site-header {
    pointer-events: none;
    position: fixed; left: 0; right: 0; top: 0;
    z-index: 50;
}
.site-header__inner {
    pointer-events: auto;
    margin-inline: auto; max-width: var(--site-max-width, 80rem);
    padding-inline: 1rem;
    transition: all .7s cubic-bezier(.16,1,.3,1);
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    height: 4rem; padding-inline: .5rem;
    transition: all .7s cubic-bezier(.16,1,.3,1);
}
.site-header.is-scrolled .site-header__bar { height: 3.5rem; }
.site-header.is-scrolled .site-header__inner {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 1rem; margin-top: .5rem;
    padding-inline: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ===== BRAND ===== */
.brand { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.brand__logo {
    display: flex; width: 1.75rem; height: 1.75rem;
    flex-shrink: 0; align-items: center; justify-content: center;
    transition: transform .3s ease;
}
.brand:hover .brand__logo { transform: scale(1.05); }
.brand__logo img {
    width: 100%; height: 100%; border-radius: 1rem; object-fit: contain;
    transition: opacity .2s ease;
}
.brand__name { font-size: .875rem; font-weight: 500; letter-spacing: -.025em; }

/* ===== PRIMARY NAV ===== */
.nav-primary { display: none; align-items: center; gap: .125rem; }
.nav-primary__link {
    border-radius: 1rem; padding: .375rem .75rem;
    font-size: 13px; font-weight: 500;
    transition: color .2s ease; white-space: nowrap;
}
.nav-primary__link.is-active { color: #0a0a0a; }
.nav-primary__link:not(.is-active) { color: #606060; }
.nav-primary__link:not(.is-active):hover { color: #0a0a0a; }
.nav-primary__divider {
    background: color-mix(in oklab,#e8e8e8 40%,transparent);
    margin-inline: .5rem; height: 1rem; width: 1px;
}
.nav-primary__divider--tight { margin-inline: .25rem; }

/* ===== ICON BUTTON ===== */
.icon-btn {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 1rem;
    font-size: .875rem; font-weight: 500; white-space: nowrap;
    transition: all .15s ease; outline: none; cursor: pointer;
    background: transparent; color: #0a0a0a;
    width: 2.25rem; height: 2.25rem; user-select: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.icon-btn > span { line-height: 0; }
.icon-btn svg {
    pointer-events: none; flex-shrink: 0;
    width: 1.2rem; height: 1.2rem;
    min-width: 1.2rem; min-height: 1.2rem;
}
.icon-btn:hover { background: #f5f5f5; }

/* Touch devices: slightly larger tap targets */
@media (pointer: coarse) {
    .icon-btn { width: 2.5rem; height: 2.5rem; }
    .icon-btn svg { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; min-height: 1.25rem; }
}

/* ===== DROPDOWN ===== */
.dropdown-panel {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 160px; padding: .25rem;
    background: #fff; border: 1px solid #e8e8e8; border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    opacity: 0; transform: translateY(-4px) scale(.96);
    pointer-events: none; transition: all .15s ease; z-index: 60;
}
.dropdown-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-panel__item {
    display: flex; align-items: center; gap: .5rem;
    padding: .375rem .5rem; font-size: .875rem;
    border-radius: calc(1rem - 2px); cursor: pointer;
    transition: background .1s ease; white-space: nowrap;
}
.dropdown-panel__item:hover { background: #f5f5f5; }
.dropdown-panel__item.is-active { font-weight: 500; }

/* ===== SIGN-IN ===== */
.btn-signin {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
    gap: .25rem; border: 1px solid transparent; border-radius: 1rem;
    font-size: .75rem; font-weight: 500; white-space: nowrap;
    transition: all .15s ease; outline: none; cursor: pointer;
    background: #070707; color: #fafafa;
    height: 2rem; padding-inline: .875rem; text-decoration: none; user-select: none;
}
.btn-signin:hover { opacity: .9; }
.btn-signin:active { transform: translateY(1px); }

/* ===== THEME ICONS ===== */
.theme-icon-sun { transition: transform .2s ease; }
.theme-icon-moon { position: absolute; top: 50%; left: 50%; translate: -50% -50%; transition: transform .2s ease; }
.light .theme-icon-sun { transform: scale(1) rotate(0deg); }
.light .theme-icon-moon { transform: scale(0) rotate(90deg); }
.dark .theme-icon-sun { transform: scale(0) rotate(-90deg); }
.dark .theme-icon-moon { transform: scale(1) rotate(0deg); }

/* ===== MOBILE ===== */
.header-actions { display: flex; align-items: center; gap: .5rem; }
.hamburger { position: relative; width: 1rem; height: 1rem; }
.hamburger span {
    position: absolute; left: 0; right: 0; display: block;
    height: 1.5px; border-radius: 9999px;
    background: currentColor; transform-origin: center;
    transition: all .3s ease;
}
.hamburger span:nth-child(1) { top: 3px; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 11px; }
.hamburger.is-open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

.mobile-nav-overlay {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    transition: all .5s cubic-bezier(.16,1,.3,1);
    pointer-events: none; opacity: 0;
}
.mobile-nav-overlay.is-open { pointer-events: auto; opacity: 1; }
.mobile-nav-overlay__content {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 100dvh; height: 100vh; padding: 5rem 2rem 2.5rem;
}
.mobile-nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav__link {
    display: flex; align-items: center; gap: .75rem;
    padding-block: .75rem; font-size: 1rem; font-weight: 500;
    letter-spacing: -.025em;
    transition: all .5s cubic-bezier(.16,1,.3,1);
    transform: translateY(1rem); opacity: 0;
}
.mobile-nav-overlay.is-open .mobile-nav__link { transform: translateY(0); opacity: 1; }
.mobile-nav__link.is-active { color: #0a0a0a; }
.mobile-nav__link:not(.is-active) { color: #606060; }
.mobile-nav__footer {
    display: flex; flex-direction: column; gap: .75rem;
    transition: all .5s ease; transform: translateY(1rem); opacity: 0;
}
.mobile-nav-overlay.is-open .mobile-nav__footer { transform: translateY(0); opacity: 1; }
.mobile-nav__signin {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 2.5rem; border-radius: 1rem;
    font-size: .875rem; font-weight: 500;
    background: #0a0a0a; color: #fff;
    transition: opacity .15s ease; text-decoration: none;
}
.mobile-nav__signin:hover { opacity: .9; }
.mobile-nav__signin:active { opacity: .8; }

/* ===== DARK MODE ===== */
.dark .site-header.is-scrolled .site-header__inner { background: rgba(30,30,30,.85); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.dark .brand__name { color: #f3f3f3; }
.dark .nav-primary__link.is-active { color: #f3f3f3; }
.dark .nav-primary__link:not(.is-active) { color: #9b9b94; }
.dark .nav-primary__link:not(.is-active):hover { color: #f3f3f3; }
.dark .nav-primary__divider { background: rgba(255,255,255,.08); }
.dark .icon-btn { color: #f3f3f3; }
.dark .icon-btn:hover { background: rgba(255,255,255,.06); }
.dark .dropdown-panel { background: #2a2a2a; border-color: rgba(255,255,255,.08); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.dark .dropdown-panel__item { color: #e5e5e0; }
.dark .dropdown-panel__item:hover { background: rgba(255,255,255,.06); }
.dark .btn-signin { background: #f3f3f3; color: #1a1a1a; }
.dark .btn-signin:hover { opacity: .85; }
.dark .mobile-nav-overlay { background: rgba(30,30,30,.96); }
.dark .mobile-nav__link.is-active { color: #f3f3f3; }
.dark .mobile-nav__link:not(.is-active) { color: #9b9b94; }
.dark .mobile-nav__signin { background: #f3f3f3; color: #1a1a1a; }

/* ===== HEADER MEDIA QUERIES ===== */
@media (min-width: 640px) {
    .nav-primary { display: flex; }
    .header-actions { display: none; }
}
@media (min-width: 768px) {
    .site-header__inner { padding-inline: 1.5rem; }
}