/* Shared header hide/show behavior used by landing and legal pages. */
/* 
 * BUG FIX #001: Must use position:fixed instead of sticky.
 * Sticky elements ignore transform animations in most browsers.
 * See docs/debugfixforbugs.md for details.
 */
.landing-header,
.scroll-aware-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: transform 220ms ease, box-shadow 220ms ease;
    will-change: transform;
}

.landing-header.landing-header-hidden,
.scroll-aware-header.scroll-aware-header-hidden {
    transform: translateY(calc(-100% - 1px));
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .landing-header,
    .scroll-aware-header {
        transition: none !important;
        will-change: auto !important;
    }
}

/* ===== Responsive Header for Small Screens ===== */

/* Tablets and below */
@media (max-width: 768px) {
}

/* Mobile: 640px and below */
@media (max-width: 640px) {
    .landing-header .btn-primary {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Small Mobile: 420px and below */
@media (max-width: 420px) {
    /* Smaller logo */
    .landing-header img {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    /* Smaller site title */
    .landing-header .text-sm {
        font-size: 0.75rem;
    }
}

/* Extra Small: 320px */
@media (max-width: 320px) {
    .landing-header > div {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0.5rem;
    }
    
    /* Even smaller logo */
    .landing-header img {
        width: 2rem;
        height: 2rem;
        padding: 0.125rem;
    }
    
    /* Hide or truncate title further */
    .landing-header .text-sm {
        font-size: 0.7rem;
        max-width: 8rem;
    }
    
    .landing-header .btn-primary {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
    }
    
    /* Smaller hamburger button */
    .landing-header button {
        width: 2rem;
        height: 2rem;
    }
    
    .landing-header button svg {
        width: 1rem;
        height: 1rem;
    }
}