/**
 * Header Component — Pure CSS
 * Includes: sticky header, dark toggle, mobile toggle, marquee top-bar
 */

/* ── Skip Link (accessibility) ── */
.sh-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sh-skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 9999;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    background: var(--pi-primary, #007d3d);
    color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 600;
}

/* ── Header ── */
.sh-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sh-header--admin-bar {
    top: 32px;
}

@media (max-width: 782px) {
    .sh-header--admin-bar {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .sh-header--admin-bar {
        top: 0;
    }
}

/* ── Header Bar (main row) ── */
.sh-header__bar {
    width: 100%;
    padding: 0 0.75rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    isolation: isolate;
    z-index: 20;
    background: var(--pi-bg-card, #ffffff);
}

.sh-header__bar > * {
    position: relative;
    z-index: 1;
}

/* SVG Architecture decoration — subtle blueprint skyline */
.sh-header__arch {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sh-header__arch-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Blueprint grid lines — cực nhẹ */
.sh-header__arch-grid line {
    stroke: var(--pi-border-light, #f1f5f9);
    stroke-width: 0.5;
    opacity: 0.4;
    vector-effect: non-scaling-stroke;
}

/* Skyline elements — mờ nhẹ */
.sh-header__arch-skyline polyline,
.sh-header__arch-skyline rect,
.sh-header__arch-skyline line,
.sh-header__arch-skyline circle {
    stroke: var(--pi-border, #e2e8f0);
    stroke-width: 0.8;
    fill: none;
    opacity: 0.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Ground line */
.sh-header__arch-ground {
    stroke: var(--pi-border, #e2e8f0);
    stroke-width: 0.8;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}

/* Accent line — primary color mờ */
.sh-header__arch-accent {
    stroke: var(--pi-primary, #007d3d);
    stroke-width: 1.5;
    opacity: 0.12;
    vector-effect: non-scaling-stroke;
}

/* Trang chủ: đậm hơn chút */
.sh-header__bar--home .sh-header__arch-skyline polyline,
.sh-header__bar--home .sh-header__arch-skyline rect,
.sh-header__bar--home .sh-header__arch-skyline line,
.sh-header__bar--home .sh-header__arch-skyline circle {
    opacity: 0.45;
}

.sh-header__bar--home .sh-header__arch-accent {
    opacity: 0.2;
}

/* Scrolled state — mờ thêm */
.sh-header--scrolled .sh-header__bar {
    background: var(--pi-bg-card, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sh-header--scrolled .sh-header__arch {
    opacity: 0.6;
}

.dark .sh-header--scrolled .sh-header__bar {
    background: var(--pi-bg-card, #1e293b);
}

@media (min-width: 1024px) {
    .sh-header__bar {
        padding: 0 1rem;
        gap: 0.5rem;
    }
}

@media (min-width: 1280px) {
    .sh-header__bar {
        padding: 0 1.5rem;
        gap: 1rem;
    }
}

/* ── Right Actions ── */
.sh-header__actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .sh-header__actions {
        gap: 0.5rem;
    }
}

/* ── Dark Mode Toggle ── */
.sh-header__dark-toggle {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--pi-bg-alt, #f3f4f6);
    color: var(--pi-text-2, #475569);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

@media (min-width: 1024px) {
    .sh-header__dark-toggle {
        width: 2rem;
        height: 2rem;
    }
}

.sh-header__dark-toggle:hover {
    background: var(--pi-border, #e2e8f0);
}

.sh-header__icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}
.sh-header__dark-toggle span,
.sh-header__mobile-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Mobile Menu Toggle ── */
.sh-header__mobile-toggle {
    padding: 0.5rem;
    color: var(--pi-text, #1e293b);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

@media (min-width: 1024px) {
    .sh-header__mobile-toggle {
        display: none;
    }
}

.sh-header__mobile-toggle:hover {
    background: var(--pi-bg-alt, #f3f4f6);
}

.sh-header__hamburger-icon {
    width: 2rem;
    height: 2rem;
}

/* ── Dark Mode Overrides ── */
.dark .sh-header__bar {
    background: var(--pi-bg-card, #1e293b);
}

.dark .sh-header__arch-grid line {
    stroke: var(--pi-border, #334155);
    opacity: 0.3;
}

.dark .sh-header__arch-skyline polyline,
.dark .sh-header__arch-skyline rect,
.dark .sh-header__arch-skyline line,
.dark .sh-header__arch-skyline circle {
    stroke: var(--pi-text-3, #64748b);
    opacity: 0.2;
}

.dark .sh-header__arch-ground {
    stroke: var(--pi-border, #334155);
    opacity: 0.35;
}

.dark .sh-header__arch-accent {
    stroke: var(--pi-secondary, #fcd34d);
    opacity: 0.1;
}

.dark .sh-header__dark-toggle {
    background: var(--pi-bg-elevated, #334155);
    color: var(--pi-text-2, #cbd5e1);
}

.dark .sh-header__dark-toggle:hover {
    background: var(--pi-border, #334155);
}

.dark .sh-header__mobile-toggle {
    color: var(--pi-text, #f1f5f9);
}

.dark .sh-header__mobile-toggle:hover {
    background: var(--pi-bg-elevated, #334155);
}

/* ── Marquee (from old header.css) ── */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sh-marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}

.sh-marquee-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.sh-marquee-track:hover {
    animation-play-state: paused;
}

.mask-linear-fade {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* ── View Transitions ── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
}

.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sh-marquee-track { animation: none; }
}