/*
 * Royal Servicess LLC
 * Unified Authenticated Customer Header H3-R
 * Presentation only. No booking or authentication logic.
 */

/* Desktop restored to pre-H3-R styles. */

/* Tablet and phone: three distinct header columns. */
@media (max-width: 1120px) {

    .app-shell-header--customer .app-shell-header__inner {
        position: relative;
        display: grid;
        width: calc(100% - 32px);
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand toggle account"
            "links links links";
        align-items: center;
        gap: 0 10px !important;
        padding: 10px 0 !important;
    }

    .app-shell-header--customer .app-shell-brand-group {
        grid-area: brand !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0;
        justify-self: start;
    }

    .app-shell-header--customer .app-shell-brand {
        min-width: 0 !important;
        max-width: 100%;
    }

    .app-shell-header--customer .app-shell-brand__name {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-shell-header--customer .app-shell-menu-toggle {
        grid-area: toggle !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative;
        z-index: 4;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        justify-self: end;
        box-sizing: border-box;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px;
        height: 44px;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-shell-header--customer .app-shell-user {
        grid-area: account !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        position: relative;
        z-index: 5;
        justify-self: end;
        width: 44px;
        min-width: 0;
        margin: 0 !important;
    }

    .app-shell-header--customer .app-shell-user > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 4px;
    }

    .app-shell-header--customer .app-shell-user__identity,
    .app-shell-header--customer .app-shell-user__chevron {
        display: none !important;
    }

    .app-shell-header--customer .app-shell-nav {
        grid-area: links !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        justify-content: stretch;
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 6px 10px;
        border: 0 !important;
        border-radius: 14px;
        opacity: 0 !important;
        visibility: hidden;
        overflow: hidden !important;
        pointer-events: none !important;
        transform: none !important;
    }

    .app-shell-header--customer.is-dashboard-menu-open
    .app-shell-nav {
        max-height: min(75vh, 720px) !important;
        margin-top: 10px !important;
        padding: 12px !important;
        border: 1px solid rgba(220, 180, 80, .17) !important;
        background: rgba(12, 13, 14, .98);
        opacity: 1 !important;
        visibility: visible;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        pointer-events: auto !important;
    }

    .app-shell-header--customer
    .app-shell-nav > a.app-shell-nav__link {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 10px 13px !important;
        font-size: .78rem;
        line-height: 1.35;
        text-align: left;
        white-space: normal;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .app-shell-header--customer
    .app-shell-nav > a.app-shell-nav__reserve-cta {
        position: static !important;
        inset: auto !important;
        justify-content: center;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        transform: none !important;
    }

    .app-shell-header--customer
    .app-shell-nav > .app-shell-nav__mobile-section,
    .app-shell-header--customer
    .app-shell-nav > .app-shell-nav__mobile-signout-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {

    .app-shell-header--customer .app-shell-header__inner {
        width: calc(100% - 24px);
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        column-gap: 8px !important;
    }

    .app-shell-header--customer .app-shell-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-shell-header--customer
    .app-shell-menu-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell-header--customer .app-shell-nav,
    .app-shell-header--customer .app-shell-menu-toggle {
        transition: none !important;
    }
}