/* =============================================
 * Premium Header & Footer UI Polish
 * School Website Builder
 * =============================================
 * Soft 3D premium design for International School
 * PRESENTATION ONLY: spacing, radius, shadows, elevation,
 * layout, transitions, soft 3D depth.
 *
 * All theme colors and typography come from the
 * Appearance Module CSS variables (authoritative).
 * This file NEVER hardcodes user-configurable colors/fonts.
 * ============================================= */

/* =============================================
   HEADER — Premium Floating Panel
   ============================================= */

/* --- Top Utility Bar --- */
.hge-header__quickbar {
    background: var(--school-topbar-bg, var(--hge-navy));
    border-bottom: 1px solid rgba(255,255,255,0.08);
    min-height: 40px;
}
.hge-header__quickbar .hge-header__inner {
    min-height: 40px;
    gap: 1.5rem;
}
.hge-header__quickbar-left {
    gap: 1.75rem;
    min-height: 40px;
}
.hge-header__quickbar-right {
    gap: 1.25rem;
}
.hge-header__contact {
    color: var(--school-topbar-text, rgba(255,255,255,0.9));
    gap: 0.5rem;
    font-weight: 500;
    transition: color var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__contact:hover {
    color: var(--school-topbar-link, var(--hge-gold));
}
.hge-header__contact .dashicons {
    font-size: 13px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__contact:hover .dashicons {
    background: rgba(255,255,255,0.2);
}
.hge-header__quick-link {
    transition: color var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__quick-link:hover {
    color: var(--school-topbar-link-hover, var(--hge-gold));
}
.hge-header__social-label {
    color: var(--school-topbar-text, rgba(255,255,255,0.55));
}
.hge-header__social-link {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__social-link:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hge-header__social-link--fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.hge-header__social-link--yt:hover { background: #ff0000; color: #fff; border-color: #ff0000; }
.hge-header__social-link--ig:hover { background: #e4405f; color: #fff; border-color: #e4405f; }

/* --- Main Header — Floating White Panel --- */
.hge-header__main {
    padding: 1rem 0;
    border-bottom: none;
}
.hge-header__main .hge-header__inner {
    border-radius: var(--hge-radius-lg, 20px);
    padding: 1.25rem 2rem;
    box-shadow: var(--hge-shadow-float, 0 12px 40px rgba(0,0,0,0.10));
    border: 1px solid rgba(0,0,0,0.05);
    margin: 1.25rem auto;
    transition: all var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__actions {
    gap: 1.25rem;
}

/* --- Search Box — Modern Rounded --- */
.hge-header__search .search-field {
    height: 42px;
    padding: 0 1rem 0 2.5rem;
    border-radius: var(--hge-radius-pill, 999px);
    font-size: 0.85rem;
    width: 280px;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    background-color: var(--hge-light, #f5f7fa);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    color: var(--hge-text, #2d3748);
}
.hge-header__search .search-field::placeholder {
    color: var(--hge-text-light, #4a5568);
    opacity: 0.7;
}
.hge-header__search .search-field:focus {
    border-color: var(--school-secondary, var(--hge-gold));
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
    background-color: #fff;
}
.hge-header__search .search-submit {
    height: 42px;
    width: 42px;
    padding: 0;
    border-radius: 50%;
    margin: 0 0 0 -48px;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    position: relative;
    z-index: 2;
}
.hge-header__search .search-submit:hover {
    transform: scale(1.05);
}

/* --- Brand / Logo --- */
.hge-header__logo {
    max-height: 72px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.03) 100%);
    transition: all var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__brand:hover .hge-header__logo {
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(0,0,0,0.05) 100%);
}
.hge-header__titles {
    gap: 0.25rem;
    align-items: stretch;
}
.hge-header__name {
    font-size: var(--school-title-size, 2.2rem);
    color: var(--school-title-color, var(--school-primary));
    font-family: var(--school-title-font, inherit);
    font-weight: var(--school-title-weight, 800);
    text-align: var(--school-title-align, left);
    transition: color var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__tagline {
    color: var(--school-slogan-color, var(--school-secondary));
    font-family: var(--school-slogan-font, inherit);
    font-size: var(--school-slogan-size, 0.75rem);
    font-weight: var(--school-slogan-weight, 600);
    text-align: var(--school-slogan-align, left);
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* --- Navigation — Premium with Gold Indicators --- */
.hge-header__nav {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: box-shadow var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__menu {
    gap: 0.25rem;
}
.hge-header__menu li {
    position: relative;
}
.hge-header__menu a {
    padding: 1rem 1rem;
    color: var(--school-header-text, rgba(255,255,255,0.95));
    font-family: var(--school-header-font, inherit);
    font-size: var(--school-header-size, 0.82rem);
    font-weight: var(--school-header-weight, 600);
    letter-spacing: 0.04em;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    position: relative;
}
.hge-header__menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--school-header-hover, var(--hge-gold));
    border-radius: 2px 2px 0 0;
    transition: width var(--hge-transition-smooth, 0.25s ease), left var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__menu a:hover {
    color: var(--school-header-text, #fff);
    transform: translateY(-2px);
}
.hge-header__menu a:hover::after {
    width: 100%;
    left: 0;
}
.hge-header__menu .current-menu-item > a {
    color: var(--school-header-text, #fff);
}
.hge-header__menu .current-menu-item > a::after {
    width: 100%;
    left: 0;
}
.hge-header__toggle {
    border-radius: 8px;
    transition: background var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__toggle:hover {
    background: rgba(255,255,255,0.1);
}

/* --- Dropdown — Premium Soft 3D --- */
.hge-header__menu > li.has-children > a::after {
    transition: transform var(--hge-transition-smooth, 0.25s ease), width var(--hge-transition-smooth, 0.25s ease), left var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__menu > li.has-children > a:hover::after {
    transform: rotate(45deg) translateY(0);
}
.hge-header__menu ul {
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}
.hge-header__menu ul li a {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.75rem 1.25rem;
    transition: all var(--hge-transition-smooth, 0.25s ease);
}
.hge-header__menu ul li a:hover {
    padding-left: 1.5rem;
}

/* --- CTA Button — Premium Pill --- */
.hge-btn--apply {
    border-radius: var(--hge-radius-pill, 999px);
    padding: 0.7rem 1.75rem;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: all var(--hge-transition-smooth, 0.25s ease);
    border: none;
}
.hge-btn--apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* --- Sticky Header Shrink --- */
.hge-header__nav.is-sticky {
    box-shadow: var(--hge-shadow-sticky, 0 6px 24px rgba(0,0,0,0.12));
}
.hge-header.is-sticky .hge-header__main .hge-header__inner {
    padding: 0.75rem 1.5rem;
    margin: 0.5rem auto;
    box-shadow: var(--hge-shadow-sticky, 0 6px 24px rgba(0,0,0,0.12));
}
.hge-header.is-sticky .hge-header__logo {
    max-height: 52px;
    transition: max-height var(--hge-transition-smooth, 0.25s ease);
}
.hge-header.is-sticky .hge-header__name {
    font-size: 1.6rem;
    transition: font-size var(--hge-transition-smooth, 0.25s ease);
}

/* =============================================
   FOOTER — Premium Layered Design
   ============================================= */
.hge-footer {
    background: var(--school-footer-bg, var(--hge-navy));
    color: var(--school-footer-text, rgba(255,255,255,0.8));
    position: relative;
    overflow: hidden;
}
.hge-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--school-secondary, var(--hge-gold)) 50%, transparent 100%);
    z-index: 2;
}
.hge-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hge-footer__main {
    padding: 4.5rem 0 2.5rem;
    position: relative;
    z-index: 1;
}
.hge-footer__grid {
    gap: 2.5rem;
}

/* --- Brand Column --- */
.hge-footer__col--brand {
    padding-right: 1rem;
}
.hge-footer__brand {
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.hge-footer__logo {
    max-height: 56px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255,255,255,0.08);
    transition: background var(--hge-transition-smooth, 0.25s ease);
}
.hge-footer__brand:hover .hge-footer__logo {
    background: rgba(255,255,255,0.15);
}
.hge-footer__school-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.2px;
}
.hge-footer__affiliation {
    font-size: 0.82rem;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-weight: 500;
}
.hge-footer__desc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--school-footer-text, rgba(255,255,255,0.92));
    opacity: 0.92;
    margin-bottom: 1.5rem;
}

/* --- Footer Social Icons --- */
.hge-footer__social {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.hge-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: var(--school-footer-text, #ffffff);
    text-decoration: none;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    border: 1px solid rgba(255,255,255,0.18);
    flex-shrink: 0;
    opacity: 1;
}
.hge-footer__social-link:hover {
    transform: translateY(-3px);
    background: var(--school-secondary, var(--hge-gold));
    color: var(--hge-navy-deep, #0A3D7A);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    opacity: 1;
}
.hge-footer__social-link--fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.hge-footer__social-link--yt:hover { background: #ff0000; color: #fff; border-color: #ff0000; }
.hge-footer__social-link--ig:hover { background: #e4405f; color: #fff; border-color: #e4405f; }

/* --- Link Columns --- */
.hge-footer__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--school-secondary, var(--hge-gold));
    display: inline-block;
    letter-spacing: 0.02em;
}
.hge-footer__menu li {
    margin-bottom: 0.6rem;
}
.hge-footer__menu a {
    text-decoration: none;
    font-size: 0.85rem;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--school-footer-text, rgba(255,255,255,0.92));
    opacity: 0.92;
}
.hge-footer__menu a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--school-secondary, var(--hge-gold));
    transition: width var(--hge-transition-smooth, 0.25s ease);
    flex-shrink: 0;
}
.hge-footer__menu a:hover {
    transform: translateX(4px);
    opacity: 1;
}
.hge-footer__menu a:hover::before {
    width: 12px;
}

/* --- Contact Column --- */
.hge-footer__contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
}
.hge-footer__contact-list li svg {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    transition: background var(--hge-transition-smooth, 0.25s ease);
}
.hge-footer__contact-list li:hover svg {
    background: rgba(255,255,255,0.15);
}
.hge-footer__contact-list a {
    text-decoration: none;
    transition: color var(--hge-transition-smooth, 0.25s ease);
    color: var(--school-footer-text, rgba(255,255,255,0.92));
    opacity: 0.92;
}
.hge-footer__contact-list a:hover {
    opacity: 1;
}

/* --- Feature Strip — Floating White Card --- */
.hge-footer__features {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    padding: 0 0 3rem;
}
.hge-footer__feature-card {
    background: #fff;
    border-radius: var(--hge-radius-lg, 20px);
    padding: 2.5rem 2rem;
    box-shadow: var(--hge-shadow-float, 0 12px 40px rgba(0,0,0,0.10));
    border: 1px solid rgba(0,0,0,0.04);
}
.hge-footer__feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.hge-footer__feature {
    text-align: center;
    padding: 0 0.5rem;
}
.hge-footer__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(0,0,0,0.04);
    border-radius: 50%;
    margin-bottom: 1rem;
    color: var(--school-primary, var(--hge-navy));
    transition: all var(--hge-transition-smooth, 0.25s ease);
}
.hge-footer__feature:hover .hge-footer__feature-icon {
    background: rgba(0,0,0,0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.hge-footer__feature-icon svg {
    width: 26px;
    height: 26px;
}
.hge-footer__feature h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--school-primary, var(--hge-navy));
    margin: 0 0 0.4rem;
    letter-spacing: 0.01em;
}
.hge-footer__feature p {
    font-size: 0.8rem;
    color: var(--hge-text-light, #4a5568);
    line-height: 1.6;
    margin: 0;
}

/* --- Bottom Bar — Premium Closing Band --- */
.hge-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding: 1.25rem 0;
    font-size: 0.8rem;
    text-align: center;
    position: relative;
    z-index: 1;
    letter-spacing: 0.01em;
}
.hge-footer__bottom p {
    margin: 0;
    order: 2; /* copyright row sits directly below the visitor counter */
    color: var(--school-footer-text, #ffffff);
    opacity: 0.92;
    text-align: center;
}
.hge-footer__bottom-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* ~8px between visitor counter and copyright */
    padding: 0; /* zero inner padding so .hge-footer__bottom owns the vertical space (defeats homepage.css 0.5rem/0.25rem inner padding) */
}

/* --- Visitor Counter — Rounded Capsule --- */
.hge-visitor-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    background: rgba(255,255,255,0.08);
    padding: 0.5rem 1.25rem;
    border-radius: var(--hge-radius-pill, 999px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    order: 1; /* visitor counter is the first (top) row of the centered group */
}
.hge-visitor-counter__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--school-footer-text, rgba(255,255,255,0.9));
    opacity: 0.9;
}
.hge-visitor-counter__digits {
    display: inline-flex;
    gap: 3px;
}
.hge-visitor-counter__digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
    color: var(--school-secondary, var(--hge-gold));
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1;
}

/* --- Back to Top Button --- */
.hge-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--school-secondary, var(--hge-gold));
    text-decoration: none;
    transition: all var(--hge-transition-smooth, 0.25s ease);
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    position: absolute; /* independent of the centered info group */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    order: 3; /* in-flow fallback (mobile): below copyright */
}
.hge-back-to-top:hover {
    background: var(--school-secondary, var(--hge-gold));
    color: var(--school-primary, var(--hge-navy));
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.hge-back-to-top svg {
    width: 18px;
    height: 18px;
}

/* =============================================
   RESPONSIVE — Premium Header & Footer
   ============================================= */
@media (max-width: 1024px) {
    .hge-footer__feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .hge-header__main .hge-header__inner {
        padding: 1rem 1.5rem;
        margin: 0.75rem auto;
    }
    .hge-header__search .search-field {
        width: 220px;
    }
}

@media (max-width: 768px) {
    /* Header Mobile */
    .hge-header__main {
        padding: 0.5rem 0;
    }
    .hge-header__main .hge-header__inner {
        padding: 0.75rem 1rem;
        margin: 0.5rem auto;
        border-radius: 14px;
        gap: 1rem;
    }
    .hge-header__logo {
        max-height: 48px;
        padding: 2px;
    }
    .hge-header__name {
        font-size: 1.2rem;
        /* Mobile only: predictable left alignment — desktop appearance
           values (--school-title-align / --school-slogan-align) stay saved. */
        text-align: left;
    }
    .hge-header__tagline {
        font-size: 0.7rem;
        text-align: left;
    }
    /* Mobile nav bar — compact but intentional full-width strip.
       ~58px total: 44px hamburger touch target + even 7px breathing
       room top/bottom (vertically centered via the inner flex). */
    .hge-header__nav .hge-header__inner {
        min-height: 58px;
    }
    .hge-header__toggle {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 10px;
        background: rgba(255,255,255,0.1);
    }
    .hge-header__toggle:hover {
        background: rgba(255,255,255,0.2);
    }
    .hge-header__quickbar {
        min-height: 36px;
    }
    .hge-header__quickbar .hge-header__inner {
        min-height: 36px;
    }
    .hge-header__contact .dashicons {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
    .hge-header__social-link {
        width: 26px;
        height: 26px;
    }

    /* Footer Mobile */
    .hge-footer__main {
        padding: 3rem 0 2rem;
    }
    .hge-footer__feature-card {
        padding: 1.75rem 1.25rem;
    }
    .hge-footer__feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .hge-footer__feature-icon {
        width: 48px;
        height: 48px;
    }
    .hge-footer__feature-icon svg {
        width: 22px;
        height: 22px;
    }
    .hge-footer__bottom-inner {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0; /* defeat homepage.css mobile inner padding 0.25rem */
        text-align: center;
    }
    .hge-visitor-counter {
        margin-left: 0; /* re-center inside column stack */
        padding: 0.4rem 1rem;
    }
    .hge-back-to-top {
        position: static; /* back in flow below the centered group — no overlap */
        transform: none;
        margin-top: 0.25rem;
    }
    .hge-visitor-counter__digit {
        width: 22px;
        height: 26px;
        font-size: 0.85rem;
    }
    .hge-visitor-counter__label {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .hge-header__main .hge-header__inner {
        padding: 0.6rem 0.85rem;
        border-radius: 12px;
    }
    .hge-header__logo {
        max-height: 42px;
    }
    .hge-header__name {
        font-size: 1.15rem;
    }
    .hge-header__tagline {
        font-size: 0.72rem;
    }
    .hge-footer__feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .hge-footer__feature {
        padding: 1rem;
        background: var(--hge-light, #f5f7fa);
        border-radius: 12px;
    }
    .hge-visitor-counter__digit {
        width: 20px;
        height: 24px;
        font-size: 0.8rem;
    }
    .hge-visitor-counter__digits {
        gap: 2px;
    }
}

/* =============================================
   ACCESSIBILITY — Focus Indicators
   ============================================= */
.hge-header__menu a:focus-visible,
.hge-header__quick-link:focus-visible,
.hge-header__social-link:focus-visible,
.hge-header__contact:focus-visible,
.hge-btn--apply:focus-visible,
.hge-footer__menu a:focus-visible,
.hge-footer__contact-list a:focus-visible,
.hge-footer__social-link:focus-visible,
.hge-back-to-top:focus-visible {
    outline: 2px solid var(--school-secondary, var(--hge-gold));
    outline-offset: 2px;
    border-radius: 4px;
}
.hge-header__search .search-field:focus-visible {
    outline: none;
}

/* =============================================
   STICKY HEADER — Scroll Behavior
   ============================================= */
@media (min-width: 769px) {
    .hge-header.is-sticky .hge-header__main .hge-header__inner {
        padding: 0.75rem 1.5rem;
        margin: 0.5rem auto;
        box-shadow: var(--hge-shadow-sticky, 0 6px 24px rgba(0,0,0,0.12));
    }
    .hge-header.is-sticky .hge-header__logo {
        max-height: 52px;
    }
    .hge-header.is-sticky .hge-header__name {
        font-size: 1.6rem;
    }
    .hge-header.is-sticky .hge-header__tagline {
        font-size: 0.65rem;
    }
}