/*
 * ============================================================
 * M.H College
 * File: 20-header.css
 * Purpose:
 * Website header, branding, navigation and menu controls
 * ============================================================
 */

/*
 * ============================================================
 * Fixed site header
 * ============================================================
 */

.site-header {
    position: fixed;
    inset: 0 0 auto;

    z-index: 1000;

    background: rgba(6, 6, 6, .74);

    border-bottom: 1px solid transparent;

    backdrop-filter:
        blur(16px)
        saturate(1.12);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(1.12);

    box-shadow:
        0 0 0 rgba(0, 0, 0, 0);

    transition:
        background .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}

/*
 * Header after scrolling
 */

.site-header.scrolled {
    background: rgba(7, 7, 7, .94);

    border-color: var(--line);

    box-shadow:
        0 12px 34px rgba(0, 0, 0, .28);
}

/*
 * ============================================================
 * Header inner layout
 * ============================================================
 */

.nav-wrap {
    display: flex;
    align-items: center;
    gap: 28px;

    min-height: 96px;

    transition:
        min-height .34s var(--ease-luxury),
        gap .34s var(--ease-luxury);
}

.site-header.scrolled .nav-wrap {
    min-height: 82px;
}

/*
 * ============================================================
 * Brand
 * ============================================================
 */

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 0;

    line-height: 0;
}

.brand-image {
    padding-block: 4px;
}

/*
 * Header logo
 */

.brand-logo {
    display: block;

    width: auto;
    height: 82px;
    max-width: 132px;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(
            0 7px 14px rgba(0, 0, 0, .42)
        )
        drop-shadow(
            0 0 0 rgba(217, 173, 87, 0)
        );

    transition:
        height .34s var(--ease-luxury),
        max-width .34s var(--ease-luxury),
        filter .34s ease,
        transform .34s var(--ease-luxury);
}

.brand:hover .brand-logo {
    transform:
        translateY(-1px)
        scale(1.025);

    filter:
        drop-shadow(
            0 9px 18px rgba(0, 0, 0, .46)
        )
        drop-shadow(
            0 0 14px rgba(217, 173, 87, .2)
        );
}

.site-header.scrolled .brand-logo {
    height: 68px;
    max-width: 110px;
}

/*
 * ============================================================
 * Main navigation
 * ============================================================
 */

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;

    margin-inline: auto;
}

.main-nav a {
    position: relative;

    padding: 28px 0 23px;

    color: #e5ddd0;

    font-weight: 700;

    transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        transform .28s var(--ease-luxury),
        text-shadow .28s ease;
}

/*
 * Navigation underline
 */

.main-nav a::after {
    content: "";

    position: absolute;

    inset-inline: 0;
    bottom: 17px;

    height: 2px;

    transform: scaleX(0);
    transform-origin: right center;

    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-light),
        var(--gold),
        transparent
    );

    box-shadow:
        0 0 12px rgba(217, 173, 87, .24);

    transition:
        transform .34s var(--ease-luxury);
}

.lang-he .main-nav a::after {
    transform-origin: left center;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--gold-light);

    text-shadow:
        0 0 16px rgba(217, 173, 87, .18);
}

/*
 * ============================================================
 * Header actions
 * ============================================================
 */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;

    flex: 0 0 auto;
}

/*
 * Language switch
 */

.language-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding-inline: 4px;

    color: #ded4c3;

    font-weight: 800;

    transition:
        color .28s ease,
        transform .28s var(--ease-luxury),
        text-shadow .28s ease;
}

.language-link:hover {
    color: var(--gold-light);

    transform: translateY(-1px);

    text-shadow:
        0 0 14px rgba(217, 173, 87, .16);
}

/*
 * ============================================================
 * Mobile menu button
 * ============================================================
 */

.menu-toggle {
    position: relative;

    display: none;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    padding: 0;

    color: var(--cream);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .045),
            rgba(255, 255, 255, .015)
        );

    border: 1px solid rgba(217, 173, 87, .32);
    border-radius: 14px;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035);

    transition:
        color .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        transform .28s var(--ease-luxury);
}

.menu-toggle:hover {
    color: var(--gold-light);

    border-color: rgba(245, 220, 152, .58);

    background:
        linear-gradient(
            180deg,
            rgba(217, 173, 87, .10),
            rgba(217, 173, 87, .035)
        );

    box-shadow:
        0 10px 26px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05);
}

.menu-toggle:active {
    transform: scale(.96);
}

/*
 * Hamburger lines
 */

.menu-toggle span:not(.sr-only) {
    position: absolute;
    inset-inline-start: 10px;

    display: block;

    width: 24px;
    height: 2px;

    margin: 0;

    background: currentColor;

    border-radius: 999px;

    transform-origin: center;

    transition:
        top .3s var(--ease-luxury),
        opacity .22s ease,
        transform .3s var(--ease-luxury);
}

.menu-toggle span:nth-child(1) {
    top: 14px;
}

.menu-toggle span:nth-child(2) {
    top: 21px;
}

.menu-toggle span:nth-child(3) {
    top: 28px;
}

/*
 * Open-menu icon state
 */

.menu-toggle[aria-expanded="true"] {
    color: var(--gold-light);

    border-color: rgba(245, 220, 152, .68);

    background:
        linear-gradient(
            180deg,
            rgba(217, 173, 87, .14),
            rgba(217, 173, 87, .045)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .28),
        0 0 18px rgba(217, 173, 87, .08);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    top: 21px;

    transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;

    transform: scaleX(.3);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    top: 21px;

    transform: rotate(-45deg);
}