/* ==========================================
   L'OPERA ROYAL - HEADER COMPONENT
   Premium transparent header
   Mobile-first / luxury minimal
========================================== */

/* ==========================================
   HEADER WRAPPER
========================================== */

.royal-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--royal-z-header);

    width: 100%;

    color: var(--royal-navbar-text);
    background: rgba(var(--royal-white-rgb), 0.18);

    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);

    box-shadow: none;

    pointer-events: auto;

    transition:
        color var(--royal-transition),
        background-color var(--royal-transition),
        box-shadow var(--royal-transition),
        -webkit-backdrop-filter var(--royal-transition),
        backdrop-filter var(--royal-transition);
}

.royal-header.is-scrolled,
.royal-navbar.is-open {
    color: var(--royal-navbar-text-scrolled);
    background: var(--royal-header-bg-scrolled);

    -webkit-backdrop-filter: var(--royal-header-blur-scrolled);
    backdrop-filter: var(--royal-header-blur-scrolled);

    box-shadow: var(--royal-header-shadow-scrolled);
}

body.admin-bar .royal-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .royal-header {
        top: 46px;
    }
}

/* ==========================================
   TOPBAR - DESKTOP ONLY
========================================== */

.royal-topbar {
    display: none;
}

@media (min-width: 1100px) {
    .royal-topbar {
        width: 100%;
        height: var(--royal-topbar-height);
        min-height: var(--royal-topbar-height);

        display: flex;
        align-items: center;

        color: var(--royal-white);
        background: var(--royal-topbar-bg);

        -webkit-backdrop-filter: var(--royal-header-blur);
        backdrop-filter: var(--royal-header-blur);

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

        transition:
            background-color var(--royal-transition),
            -webkit-backdrop-filter var(--royal-transition),
            backdrop-filter var(--royal-transition);
    }

    .royal-header.is-scrolled .royal-topbar {
        background: var(--royal-topbar-bg-scrolled);

        -webkit-backdrop-filter: var(--royal-header-blur-scrolled);
        backdrop-filter: var(--royal-header-blur-scrolled);
    }

    .royal-topbar__inner {
        width: min(100% - 112px, var(--royal-container-wide));
        height: var(--royal-topbar-height);
        margin-inline: auto;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .royal-topbar__left,
    .royal-topbar__right {
        height: var(--royal-topbar-height);

        display: flex;
        align-items: center;
    }

    .royal-topbar__left {
        min-width: 0;
        gap: 24px;
    }

    .royal-topbar__right {
        flex: 0 0 auto;
        gap: 18px;
    }

    .royal-topbar__item {
        min-width: 0;
        height: var(--royal-topbar-height);

        display: inline-flex;
        align-items: center;
        gap: 7px;

        color: var(--royal-text-light);

        font-family: var(--royal-font-body);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1;
        white-space: nowrap;

        text-decoration: none;

        transition: color var(--royal-transition);
    }

    .royal-topbar__item:hover,
    .royal-topbar__item:focus-visible {
        color: var(--royal-gold);
    }

    .royal-topbar__address {
        max-width: 420px;
    }

    .royal-topbar__address span:last-child,
    .royal-topbar__email span:last-child,
    .royal-topbar__hours span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .royal-topbar__icon {
        width: 13px;
        height: 13px;

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

        color: var(--royal-gold);

        flex: 0 0 13px;
    }

    .royal-topbar__icon svg,
    .royal-topbar__social svg {
        width: 100%;
        height: 100%;

        display: block;

        fill: currentColor;
    }

    .royal-topbar__socials {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    .royal-topbar__social {
        width: 15px;
        height: 15px;

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

        color: var(--royal-gold);
        background: transparent;
        border: 0;

        text-decoration: none;

        transition: color var(--royal-transition);
    }

    .royal-topbar__social:hover,
    .royal-topbar__social:focus-visible {
        color: var(--royal-white);
    }
}

/* ==========================================
   NAVBAR
========================================== */

.royal-navbar {
    position: relative;

    width: 100%;

    color: inherit;
    background: transparent;
    border-bottom: 1px solid transparent;

    transition:
        background-color var(--royal-transition),
        border-color var(--royal-transition),
        -webkit-backdrop-filter var(--royal-transition),
        backdrop-filter var(--royal-transition);
}

.royal-header.is-scrolled .royal-navbar,
.royal-navbar.is-open {
    background: var(--royal-navbar-bg-scrolled);
    border-bottom-color: var(--royal-navbar-border-scrolled);

    -webkit-backdrop-filter: var(--royal-header-blur-scrolled);
    backdrop-filter: var(--royal-header-blur-scrolled);
}

/* ==========================================
   START POSITION
   Transparent over hero image
========================================== */

.royal-header:not(.is-scrolled) .royal-navbar {
    background: rgba(var(--royal-navy-rgb), 0.08);
    border-bottom-color: rgba(var(--royal-white-rgb), 0.08);

    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
}

.royal-header:not(.is-scrolled) .royal-navbar::before {
    content: none;
    display: none;
}

.royal-header:not(.is-scrolled) .royal-navbar__inner {
    position: relative;
    z-index: 2;
}

/* ==========================================
   MOBILE-FIRST LAYOUT
========================================== */

.royal-navbar__inner {
    position: relative;
    z-index: 2;

    width: calc(100% - 32px);
    min-height: var(--royal-navbar-height-mobile);
    margin-inline: auto;

    display: grid;
    grid-template-columns: var(--royal-logo-brand-width-mobile) 1fr auto;
    align-items: center;
    gap: 14px;
}

/* ==========================================
   LOGO
========================================== */

.royal-navbar__brand {
    width: var(--royal-logo-brand-width-mobile);
    min-width: var(--royal-logo-brand-width-mobile);
    height: var(--royal-navbar-height-mobile);

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

    color: var(--royal-gold);
    text-decoration: none;
}

.royal-navbar__brand::before {
    display: none;
}

.royal-navbar__logo,
.royal-navbar__brand img {
    display: block;

    width: var(--royal-logo-symbol-size-mobile);
    height: var(--royal-logo-symbol-size-mobile);

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

    filter:
        drop-shadow(0 2px 6px rgba(var(--royal-navy-rgb), 0.42)) drop-shadow(0 0 6px rgba(var(--royal-gold-rgb), 0.16));
}

.royal-header.is-scrolled .royal-navbar__logo,
.royal-header.is-scrolled .royal-navbar__brand img,
.royal-navbar.is-open .royal-navbar__logo,
.royal-navbar.is-open .royal-navbar__brand img {
    filter: none;
}

.royal-navbar__logo--symbol {
    width: var(--royal-logo-symbol-size-mobile);
    height: var(--royal-logo-symbol-size-mobile);
}

.royal-navbar__logo-text {
    color: currentColor;

    font-family: var(--royal-font-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ==========================================
   DESKTOP NAVIGATION
========================================== */

.royal-navbar__desktop {
    display: none;
}

.royal-navbar__link {
    position: relative;

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

    color: currentColor;

    font-family: var(--royal-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;

    text-decoration: none;

    transition: color var(--royal-transition);
}

.royal-navbar__link::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -14px;

    width: 0;
    height: 1px;

    background: var(--royal-gold);

    transform: translateX(-50%);

    transition: width var(--royal-transition);
}

.royal-navbar__link:hover,
.royal-navbar__link:focus-visible,
.royal-navbar__link.is-active {
    color: var(--royal-navbar-text-hover);
}

.royal-navbar__link:hover::after,
.royal-navbar__link:focus-visible::after,
.royal-navbar__link.is-active::after {
    width: 30px;
}

/* ==========================================
   LANGUAGE SWITCHER
========================================== */

.royal-language-switcher {
    display: flex;
    align-items: center;

    font-family: var(--royal-font-body);
}

/* ==========================================
   DESKTOP LANGUAGE SWITCHER
========================================== */

.royal-language-switcher--desktop {
    flex: 0 0 auto;
    gap: 8px;
}

.royal-language-switcher__item {
    position: relative;

    min-width: 34px;
    min-height: 32px;
    padding: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: currentColor;
    background: transparent;
    border: 1px solid transparent;

    font-family: var(--royal-font-body);
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color var(--royal-transition),
        border-color var(--royal-transition),
        background-color var(--royal-transition);
}

.royal-language-switcher__flag {
    width: 18px;
    height: 12px;

    display: block;

    object-fit: cover;

    border-radius: 1px;
}

.royal-language-switcher__code {
    display: none;
}

/* Active language */

.royal-language-switcher__item.is-active {
    border-color: rgba(var(--royal-gold-rgb), 0.72);
}

/* Hover */

.royal-language-switcher__item:hover,
.royal-language-switcher__item:focus-visible {
    color: var(--royal-gold);
    border-color: var(--royal-gold);
}

/* Scrolled header */

.royal-header.is-scrolled .royal-language-switcher__item {
    color: var(--royal-white);
}

.royal-header.is-scrolled .royal-language-switcher__item.is-active {
    color: var(--royal-gold);
}

/* ==========================================
   MOBILE LANGUAGE SWITCHER
========================================== */

.royal-language-switcher--mobile {
    width: 100%;
    margin-top: 14px;
    padding: 14px 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    border-top: 1px solid rgba(var(--royal-white-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--royal-white-rgb), 0.12);
}

.royal-language-switcher--mobile .royal-language-switcher__item {
    min-width: 52px;
    min-height: 38px;
    padding: 6px 8px;

    gap: 7px;

    color: var(--royal-white);

    border: 1px solid rgba(var(--royal-white-rgb), 0.18);
}

.royal-language-switcher--mobile .royal-language-switcher__code {
    display: inline-block;
}

.royal-language-switcher--mobile .royal-language-switcher__item.is-active {
    color: var(--royal-gold);
    border-color: var(--royal-gold);
}

.royal-language-switcher--mobile .royal-language-switcher__item::after {
    display: none;
}

.royal-language-switcher--mobile .royal-language-switcher__item:hover,
.royal-language-switcher--mobile .royal-language-switcher__item:focus-visible {
    padding-left: 8px;
}

/* ==========================================
   HEADER CTA
========================================== */

.royal-navbar__cta {
    min-width: 164px;
    min-height: 42px;
    padding: 0 22px;

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

    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.22);
    border: 1px solid rgba(var(--royal-gold-rgb), 0.82);

    font-family: var(--royal-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;

    text-decoration: none;
    box-shadow: none;

    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);

    transition:
        color var(--royal-transition),
        background-color var(--royal-transition),
        border-color var(--royal-transition);
}

.royal-navbar__cta:hover,
.royal-navbar__cta:focus-visible,
.royal-navbar__cta.is-active {
    color: var(--royal-white);
    background: rgba(var(--royal-navy-rgb), 0.54);
    border-color: var(--royal-gold);
}

.royal-header.is-scrolled .royal-navbar__cta,
.royal-navbar.is-open .royal-navbar__cta {
    color: var(--royal-white);
    background: transparent;
    border-color: rgba(var(--royal-gold-rgb), 0.86);
}

.royal-header.is-scrolled .royal-navbar__cta:hover,
.royal-header.is-scrolled .royal-navbar__cta:focus-visible,
.royal-header.is-scrolled .royal-navbar__cta.is-active,
.royal-navbar.is-open .royal-navbar__cta:hover,
.royal-navbar.is-open .royal-navbar__cta:focus-visible,
.royal-navbar.is-open .royal-navbar__cta.is-active {
    color: var(--royal-white);
    background: rgba(var(--royal-white-rgb), 0.08);
    border-color: var(--royal-gold);
}

/* ==========================================
   BURGER MENU
========================================== */

.royal-navbar__toggle {
    position: relative;
    z-index: 10;

    width: auto;
    min-width: 76px;
    height: 42px;
    padding: 0 34px 0 0;

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

    color: currentColor;
    background: transparent;
    border: 0;

    font-family: var(--royal-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;

    box-shadow: none;
    cursor: pointer;
    appearance: none;

    transition: color var(--royal-transition);
}

.royal-navbar__toggle:hover,
.royal-navbar__toggle:focus-visible {
    color: var(--royal-gold);
}

/* Visible multilingual label: Menu / Close */

.royal-navbar__toggle-label {
    position: static;

    width: auto;
    height: auto;

    display: inline-block;

    background: transparent;

    color: inherit;

    white-space: nowrap;
}

/* Burger lines */

.royal-navbar__toggle-line {
    position: absolute;
    right: 0;

    width: 24px;
    height: 1px;

    display: block;

    background: currentColor;
    border-radius: 0;

    transition:
        top var(--royal-transition),
        transform var(--royal-transition),
        opacity var(--royal-transition);
}

.royal-navbar__toggle-line:nth-child(2) {
    top: 16px;
}

.royal-navbar__toggle-line:nth-child(3) {
    top: 25px;
}

/* Open state */

.royal-navbar.is-open .royal-navbar__toggle-line:nth-child(2) {
    top: 20px;

    transform: rotate(45deg);
}

.royal-navbar.is-open .royal-navbar__toggle-line:nth-child(3) {
    top: 20px;

    transform: rotate(-45deg);
}

.royal-navbar__toggle,
.royal-navbar__toggle:hover,
.royal-navbar__toggle:focus,
.royal-navbar__toggle:focus-visible,
.royal-navbar__toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================
   MOBILE MENU
========================================== */

body.royal-menu-open {
    overflow: hidden;
    touch-action: none;
}

.royal-navbar__mobile {
    position: fixed;
    top: calc(var(--royal-navbar-height-mobile) + 10px);
    left: 16px;
    right: 16px;
    z-index: var(--royal-z-menu);

    max-height: calc(100dvh - var(--royal-navbar-height-mobile) - 32px);
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 0;

    padding: 16px 22px 20px;

    background: var(--royal-mobile-menu-bg);
    border: 1px solid var(--royal-mobile-menu-border);

    -webkit-backdrop-filter: var(--royal-header-blur-scrolled);
    backdrop-filter: var(--royal-header-blur-scrolled);

    box-shadow: var(--royal-shadow-medium);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity var(--royal-transition),
        visibility var(--royal-transition),
        transform var(--royal-transition);
}

body.admin-bar .royal-navbar__mobile {
    top: calc(var(--royal-navbar-height-mobile) + 56px);
}

.royal-navbar.is-open .royal-navbar__mobile {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.royal-navbar__mobile a {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--royal-white);

    font-family: var(--royal-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(var(--royal-white-rgb), 0.12);

    text-decoration: none;

    transition:
        color var(--royal-transition),
        padding-left var(--royal-transition);
}

.royal-navbar__mobile a::after {
    content: "";

    width: 18px;
    height: 1px;

    display: block;

    background: var(--royal-gold);

    transition: width var(--royal-transition);
}

.royal-navbar__mobile a:hover,
.royal-navbar__mobile a:focus-visible,
.royal-navbar__mobile a.is-active {
    color: var(--royal-gold);
    padding-left: 6px;
}

.royal-navbar__mobile a:hover::after,
.royal-navbar__mobile a:focus-visible::after,
.royal-navbar__mobile a.is-active::after {
    width: 28px;
}

.royal-navbar__mobile a:last-child {
    border-bottom: 0;
}

.royal-navbar__mobile-cta {
    min-height: 48px;
    margin-top: 16px;
    padding: 0 22px;

    justify-content: center !important;

    color: var(--royal-white) !important;
    background: transparent;
    border: 1px solid var(--royal-gold) !important;
}

.royal-navbar__mobile-cta:hover,
.royal-navbar__mobile-cta:focus-visible,
.royal-navbar__mobile-cta.is-active {
    color: var(--royal-white) !important;
    background: rgba(var(--royal-white-rgb), 0.08);
    border-color: var(--royal-gold) !important;
    padding-left: 0 !important;
}

.royal-navbar__mobile-cta::after {
    display: none !important;
}

/* ==========================================
   TABLET
========================================== */

@media (min-width: 768px) and (max-width: 1099px) {
    .royal-navbar__inner {
        width: min(100% - 56px, var(--royal-container-wide));
        min-height: 84px;

        grid-template-columns: var(--royal-logo-brand-width-tablet) 1fr auto;
        gap: 18px;
    }

    .royal-navbar__brand {
        width: var(--royal-logo-brand-width-tablet);
        min-width: var(--royal-logo-brand-width-tablet);
        height: 84px;

        justify-content: flex-start;
        grid-column: 1;
    }

    .royal-navbar__logo,
    .royal-navbar__brand img,
    .royal-navbar__logo--symbol {
        width: var(--royal-logo-symbol-size-tablet);
        height: var(--royal-logo-symbol-size-tablet);
    }

    .royal-navbar__toggle {
        display: inline-flex;
        grid-column: 3;
        justify-self: end;
    }

    .royal-navbar__desktop,
    .royal-topbar {
        display: none;
    }

    .royal-navbar__mobile {
        top: calc(84px + 10px);
        left: 28px;
        right: 28px;
    }
}

/* ==========================================
   DESKTOP
========================================== */

@media (min-width: 1100px) {
    body.royal-menu-open {
        overflow: auto;
        touch-action: auto;
    }

    .royal-navbar__inner {
        width: min(100% - 112px, var(--royal-container-wide));
        min-height: var(--royal-navbar-height-desktop);

        grid-template-columns: 1fr var(--royal-logo-brand-width-desktop) 1fr;
        gap: 42px;
    }

    .royal-navbar__brand {
        width: var(--royal-logo-brand-width-desktop);
        min-width: var(--royal-logo-brand-width-desktop);
        height: var(--royal-navbar-height-desktop);

        justify-content: center;
        grid-column: 2;
    }

    .royal-navbar__logo,
    .royal-navbar__brand img,
    .royal-navbar__logo--symbol {
        width: var(--royal-logo-symbol-size-desktop);
        height: var(--royal-logo-symbol-size-desktop);
    }

    .royal-navbar__toggle,
    .royal-navbar__mobile {
        display: none;
    }

    .royal-navbar__desktop {
        display: flex;
        align-items: center;
        gap: 46px;
    }

    .royal-navbar__desktop--left {
        justify-content: flex-end;
        grid-column: 1;
    }

    .royal-navbar__desktop--right {
        justify-content: flex-start;
        grid-column: 3;
    }

    .royal-navbar__link {
        font-size: 12px;
        letter-spacing: 0.13em;
    }

    .royal-navbar__cta {
        min-width: 174px;
        min-height: 44px;
        padding: 0 26px;
    }
}

/* ==========================================
   SMALL DESKTOP
========================================== */

@media (min-width: 1100px) and (max-width: 1240px) {

    .royal-topbar__inner,
    .royal-navbar__inner {
        width: calc(100% - 56px);
    }

    .royal-navbar__desktop {
        gap: 28px;
    }

    .royal-navbar__cta {
        min-width: 158px;
        padding-inline: 20px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {
    .royal-navbar__inner {
        grid-template-columns: var(--royal-logo-brand-width-mobile) 1fr auto;
    }

    .royal-navbar__brand {
        grid-column: 1;
    }

    .royal-navbar__toggle {
        grid-column: 3;
        justify-self: end;
    }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 420px) {
    .royal-navbar__inner {
        width: calc(100% - 28px);
        gap: 10px;
    }

    .royal-navbar__toggle {
        min-width: 42px;
        padding: 0;
    }

    .royal-navbar__toggle::before {
        display: none;
    }

    .royal-navbar__toggle span {
        right: 9px;
    }

    .royal-navbar__mobile {
        left: 14px;
        right: 14px;
    }
}