/*
|--------------------------------------------------------------------------
| Shared About and Contact desktop header
|--------------------------------------------------------------------------
|
| Desktop:
| - Logo on the left
| - Navigation on the right
| - Native Word Intelligence toggle after the links
|
| Mobile:
| - Existing .menu-icon
| - Existing .mobile-sidebar
| - Existing .display and .display2 toggle styling
|
*/

/*
|--------------------------------------------------------------------------
| Original mobile-sidebar active link
|--------------------------------------------------------------------------
*/

.wi-page-header .sidebar-nav a.active {
    color: var(--accent-color);
    font-weight: 800;
}

.wi-page-header,
.wi-page-header * {
    box-sizing: border-box;
}

.wi-page-header {
    position: relative;
    z-index: 950;

    width: 100%;

    border-bottom:
        1px solid
        var(--border-line);

    background:
        var(--bg-color);

    color:
        var(--text-color);

    font-family:
        "Inter",
        sans-serif;
}

/*
|--------------------------------------------------------------------------
| Desktop layout
|--------------------------------------------------------------------------
*/

.wi-page-header__inner {
    position: relative;

    display: flex;
    width: min(1440px, 100%);
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 42px;

    margin-inline: auto;

    padding:
        0
        clamp(22px, 5vw, 76px);
}

/*
|--------------------------------------------------------------------------
| Brand
|--------------------------------------------------------------------------
*/

.wi-page-header__brand {
    display: inline-flex;
    min-width: 225px;
    align-items: center;
    gap: 1.5rem;

    color:
        var(--text-color);

    text-decoration: none;
}

.wi-page-header__logo {
    display: block;
    width: 65px;
    flex: 0 0 52px;

    object-fit: contain;
}

.wi-page-header__brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.wi-page-header__brand-copy strong {
    color:
        var(--text-color);

    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    line-height: 1.35;
    white-space: nowrap;
}

.wi-page-header__brand-copy small {
    color:
        #777777;

    font-family:
        "PT Serif",
        Georgia,
        serif;

    font-size: 0.95rem;
    line-height: 1.3;
}

body.dark-mode
.wi-page-header__brand-copy small {
    color: #999999;
}

/*
|--------------------------------------------------------------------------
| Navigation and native toggle
|--------------------------------------------------------------------------
*/

.wi-page-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5rem;
}

.wi-page-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(15px, 1.55vw, 32px);
}

.wi-page-header__nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 8px 0;

    color:
        var(--text-color);

    font-size: 0.89rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

/*
|--------------------------------------------------------------------------
| Navigation hover and active state
|--------------------------------------------------------------------------
|
| Match the Home and Category header:
| amber text, no underline or bottom border.
|
*/

.wi-page-header__nav a::after {
    display: none;
}

.wi-page-header__nav a:hover {
    color: var(--accent-color);
    opacity: 1;
}

.wi-page-header__nav a.is-active {
    color: var(--accent-color);
    font-weight: 800;
    opacity: 1;
}


/* Explore */
.search-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.search-link i {
    margin-right: 6px;
}


/*
 * Keep the native .display toggle inside the
 * desktop flex row.
 */

@media (min-width: 1205px) {
    .wi-page-header__right
    > .display {
        position: static;

        right: auto;

        flex: 0 0 auto;

        padding-right: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Keyboard focus
|--------------------------------------------------------------------------
*/

.wi-page-header__brand:focus-visible,
.wi-page-header__nav a:focus-visible {
    outline:
        3px solid
        rgba(255, 181, 52, 0.42);

    outline-offset: 4px;
}

/*
|--------------------------------------------------------------------------
| Mobile and tablet
|--------------------------------------------------------------------------
|
| Do not restyle the mobile sidebar here.
| styles.css remains its single design source.
|
*/

@media (max-width: 1023px) {
    /*
    |--------------------------------------------------------------------------
    | Keep the backdrop behind the mobile drawer
    |--------------------------------------------------------------------------
    |
    | The desktop header uses a z-index, but that would trap the fixed
    | mobile sidebar inside a lower stacking context. Reset it on mobile
    | so the sidebar can sit above the backdrop.
    |
    */

    .wi-page-header {
        z-index: auto;
    }

    .wi-page-header .mobile-sidebar {
        z-index: 10001;
    }

    .wi-page-header .menu-icon {
        z-index: 999;
    }

    .wi-page-header__inner {
        min-height: 74px;

        padding:
            0
            20px
            0
            26px;
    }

    .wi-page-header__nav {
        display: none;
    }

    .wi-page-header__right {
        min-width: 62px;
        gap: 0;
    }

    /*
     * This uses the same native toggle placement
     * as the Home and Category mobile headers.
     */
    .wi-page-header__right
    > .display {
        position: absolute;
        right: 16px;

        padding-right: 0;
    }

    .wi-page-header__brand {
        min-width: 0;
    }

    .wi-page-header__logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .wi-page-header__brand-copy strong {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .wi-page-header__brand-copy small {
        font-size: 0.64rem;
    }
}

@media (max-width: 520px) {
    .wi-page-header__inner {
        min-height: 68px;

        padding:
            0
            15px
            0
            18px;
    }

    .wi-page-header__logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .wi-page-header__brand {
        gap: 9px;
    }

    .wi-page-header__brand-copy strong {
        max-width: 145px;

        font-size: 0.61rem;
        letter-spacing: 0.12em;
        white-space: normal;
    }

    .wi-page-header__brand-copy small {
        display: none;
    }

    .wi-page-header__right
    > .display {
        right: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wi-page-header *,
    .wi-page-header *::before,
    .wi-page-header *::after {
        transition: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| About and Contact — match the native mobile website header
|--------------------------------------------------------------------------
|
| Desktop remains unchanged.
|
| On mobile, the existing shared brand is rearranged to match the
| Home and Category header:
|
| - Fixed frosted menu/search control on the left
| - Circular logo centred
| - WORD INTELLIGENCE beneath the logo
| - Native light/dark toggle on the right
|
*/

@media (max-width: 1023px) {
    /*
     * Do not let the shared desktop header create a stacking
     * context above or below the existing mobile-menu backdrop.
     */
    .wi-page-header {
        z-index: auto;

        border-bottom: 0;

        background:
            var(--bg-color);
    }

    /*
     * Keep the existing mobile sidebar sharp and above
     * the blurred page backdrop.
     */
    .wi-page-header .mobile-sidebar {
        z-index: 10001;
    }

    /*
     * Retain the same frosted menu/search launcher used by
     * the Home and Category pages.
     */
    .wi-page-header .menu-icon {
        z-index: 999;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile header area
    |--------------------------------------------------------------------------
    */

    .wi-page-header__inner {
        position: relative;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        gap: 0;

        padding:
            24px
            72px
            0;
    }

    /*
     * Hide only the desktop navigation links.
     * The native theme toggle remains available.
     */
    .wi-page-header__nav {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Centre the Word Intelligence logo
    |--------------------------------------------------------------------------
    */

    .wi-page-header__brand {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: 0;

        color:
            var(--text-color);

        text-align: center;
    }

    /*
     * Convert the existing logo image area into the same
     * soft green circle used on Home and Category.
     */
    .wi-page-header__logo {
        display: block;

        width: 84px;
        height: 84px;
        flex: 0 0 84px;

        padding:
            20px
            12px;

        border-radius: 50%;

        background:
            var(--green-bg);

        object-fit: contain;
    }

    /*
     * Bring the site title slightly upward so it sits close
     * to the logo, matching the normal mobile header.
     */
    .wi-page-header__brand-copy {
        display: flex;
        align-items: center;

        gap: 0;

        margin-top: -13px;
    }

    .wi-page-header__brand-copy strong {
        color:
            var(--text-color);

        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.3em;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
    }

    /*
     * Home and Category show only WORD INTELLIGENCE
     * beneath the mobile logo.
     */
    .wi-page-header__brand-copy small {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Native theme toggle on the right
    |--------------------------------------------------------------------------
    */

    .wi-page-header__right {
        position: absolute;
        top: 34px;
        right: 15px;

        display: flex;
        min-width: 0;
        align-items: center;

        gap: 0;
    }

    /*
     * Neutralise the earlier absolute positioning applied
     * by the generic mobile .display rule. The parent now
     * controls its exact position.
     */
    .wi-page-header__right > .display {
        position: static;

        right: auto;

        padding-right: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Smaller phones
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .wi-page-header__inner {

        padding: 50px 66px 0;
    }

    .wi-page-header__logo {
        width: 78px;
        height: 78px;
        flex-basis: 78px;

        padding:
            19px
            11px;
    }

    .wi-page-header__brand-copy {
        margin-top: -12px;
    }

    .wi-page-header__brand-copy strong {
        font-size: 0.61rem;
        letter-spacing: 0.27em;
        white-space: nowrap;
    }

    .wi-page-header__right {
        top: 50px;
        right: 20px;
    }
}

/*
|--------------------------------------------------------------------------
| Very narrow phones
|--------------------------------------------------------------------------
*/

@media (max-width: 360px) {
    .wi-page-header__inner {
        padding-right: 60px;
        padding-left: 60px;
    }

    .wi-page-header__logo {
        width: 72px;
        height: 72px;
        flex-basis: 72px;

        padding:
            17px
            10px;
    }

    .wi-page-header__brand-copy strong {
        font-size: 0.56rem;
        letter-spacing: 0.22em;
    }
}