/*
 * MORPHEION-THEME
 * Unified Minimal Header 1.0
 *
 * Presentation only.
 * Colors are supplied through the semantic brand runtime.
 */

@layer morpheion-components {

    .morpheion-header {
        position: relative;
        z-index: 100;
        width: 100%;
        background: var(--morpheion-color-surface-default, #ffffff);
        color: var(--morpheion-color-text-primary, #111318);
    }

    .morpheion-header__inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: min(
            calc(100% - 2 * var(--morpheion-gutter-mobile)),
            var(--morpheion-content-default)
        );
        min-height: 5rem;
        margin-inline: auto;
        gap: var(--morpheion-space-4);
        border-bottom: 1px solid currentColor;
    }

    /*
     * Site identity
     */

    .morpheion-header__brand {
        display: inline-flex;
        flex: 0 1 auto;
        min-width: 0;
        align-items: center;
        gap: var(--morpheion-space-2);
        font-size: 1.125rem;
        font-weight: var(--morpheion-font-weight-bold);
        text-decoration: none;
        white-space: nowrap;
    }

    /*
     * Customer Identity 1.1
     *
     * One customer logo for backend and frontend.
     * Preserve intrinsic proportions.
     */
    .morpheion-header__brand-logo {
        display: block;
        flex: 0 1 auto;
        width: auto;
        height: auto;
        min-width: 0;
        max-width: min(
            var(--morpheion-header-logo-max-width, 180px),
            100%
        );
        max-height: var(--morpheion-header-logo-max-height, 44px);
        object-fit: contain;
    }

    .morpheion-header__brand-symbol {
        font-size: 1.75rem;
        line-height: 1;
    }

    /*
     * Right-aligned actions
     */

    .morpheion-header__actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        gap: var(--morpheion-space-4);
        margin-inline-start: auto;
    }

    .morpheion-header__actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--morpheion-space-2);
        min-height: 44px;
        min-width: 44px;
        padding: var(--morpheion-space-2);
        border: 0;
        border-radius: var(--morpheion-radius-control);
        background: transparent;
        color: inherit;
        font-size: var(--morpheion-type-navigation-size);
        font-weight: var(--morpheion-type-navigation-weight);
        cursor: pointer;
    }

    .morpheion-header__actions button:hover:not(:disabled) {
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    .morpheion-header__actions button:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /*
     * Popover containers
     */

    .morpheion-header__language-container,
    .morpheion-header__menu-container {
        position: relative;
    }

    .morpheion-header__language-panel,
    .morpheion-header__menu-panel {
        position: absolute;
        top: calc(100% + var(--morpheion-space-2));
        right: 0;
        z-index: 200;
        min-width: 14rem;
        max-width: calc(100vw - 2rem);
        padding: var(--morpheion-space-2);
        border: 1px solid currentColor;
        border-radius: var(--morpheion-radius-card);
        background: var(--morpheion-color-surface-default, #ffffff);
        color: var(--morpheion-color-text-primary, #111318);
        box-shadow: var(--morpheion-elevation-floating);
    }

    .morpheion-header__menu-panel {
        min-width: 17rem;
        max-height: min(70vh, 36rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .morpheion-header__language-panel[hidden],
    .morpheion-header__menu-panel[hidden] {
        display: none;
    }

    /*
     * Menu
     */

    .morpheion-header__menu,
    .morpheion-header__submenu,
    .morpheion-header__language-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .morpheion-header__menu-link,
    .morpheion-header__submenu-link,
    .morpheion-header__language-current {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--morpheion-space-2);
        border-radius: var(--morpheion-radius-control);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .morpheion-header__menu-link {
        font-weight: var(--morpheion-font-weight-semibold);
    }

    .morpheion-header__submenu {
        margin-inline-start: var(--morpheion-space-4);
        padding-inline-start: var(--morpheion-space-2);
        border-inline-start: 1px solid currentColor;
    }

    .morpheion-header__submenu-link {
        font-size: var(--morpheion-type-small-size);
    }

    .morpheion-header__menu a:hover {
        text-decoration: underline;
        text-underline-offset: 0.25em;
    }

    /*
     * Keyboard accessibility
     */

    .morpheion-header a:focus-visible,
    .morpheion-header button:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }

    /*
     * Responsive presentation
     */

    @media (max-width: 40rem) {

        .morpheion-header__inner {
            min-height: 4rem;
            gap: var(--morpheion-space-2);
        }

        .morpheion-header__brand {
            font-size: 0.875rem;
        }

        .morpheion-header__brand-symbol {
            font-size: 1.5rem;
        }

        .morpheion-header__actions {
            gap: 0;
        }

        .morpheion-header__optional-label {
            display: none;
        }

        .morpheion-header__menu-panel {
            min-width: min(17rem, calc(100vw - 2rem));
        }
    }

    @media (max-width: 25rem) {

        .morpheion-header__brand-name {
            font-size: 0.75rem;
        }

        .morpheion-header__actions button {
            padding-inline: var(--morpheion-space-1);
        }
    }

    /*
     * MORPHEION Unified Container Alignment
     *
     * Match the horizontal geometry of FRAME-LANDING HERO.
     */
    @media (min-width: 48rem) {

        .morpheion-header__inner {
            width: min(
                calc(100% - 2 * var(--morpheion-gutter-tablet)),
                var(--morpheion-content-default)
            );
        }
    }

    @media (min-width: 64rem) {

        .morpheion-header__inner {
            width: calc(
                100% - 2 * var(--morpheion-gutter-desktop)
            );

            max-width: none;
        }
    }
}