@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap');

/* =========================================================
   ALEA HEADER V4
   One definitive wordmark rule. No legacy override below it.
   ========================================================= */

:root {
    --alea-wordmark: #756E68;
    --alea-menu-bg: #FCFBF9;
    --alea-menu-text: #2F2C29;
    --alea-menu-muted: #817A73;
    --alea-menu-line: #E7E1DA;
}

.brand,
.login-brand,
.error-brand {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    width: auto !important;
    color: var(--alea-wordmark) !important;
    text-decoration: none !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 500 !important;
    line-height: .86 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.brand { font-size: 48px !important; }
.login-brand { font-size: 55px !important; }
.error-brand { font-size: 48px !important; }

.brand::before,
.brand::after,
.login-brand::before,
.login-brand::after,
.error-brand::before,
.error-brand::after {
    content: none !important;
    display: none !important;
}

.brand .brand-word,
.login-brand .brand-word,
.error-brand .brand-word {
    color: var(--alea-wordmark) !important;
}

.brand .brand-dot,
.login-brand .brand-dot,
.error-brand .brand-dot {
    display: inline-block !important;
    margin-left: .025em !important;
    color: var(--accent, #9A8979) !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: 1.08em !important;
    font-weight: 500 !important;
    line-height: .62 !important;
    opacity: 1 !important;
    transform: translateY(.012em) !important;
}

@media (max-width: 780px) {
    .brand, .error-brand { font-size: 43px !important; }
    .login-brand { font-size: 49px !important; }
}

/* Account trigger ------------------------------------------ */

.account-menu-wrap {
    display: block !important;
    margin-left: auto !important;
    position: relative !important;
}

.account-menu {
    position: relative !important;
}

.account-menu > summary,
.account-menu-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    padding: 0 !important;
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    color: var(--alea-menu-text) !important;
}

.account-menu > summary::-webkit-details-marker,
.account-menu-trigger::-webkit-details-marker {
    display: none !important;
}

.account-menu-name {
    display: block !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--alea-menu-muted) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.account-menu-avatar {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    background: var(--accent, #9A8979) !important;
    color: #FFF !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.account-menu-chevron {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 1px !important;
    border: 0 !important;
    border-right: 1px solid #9B948D !important;
    border-bottom: 1px solid #9B948D !important;
    transform: rotate(45deg) translateY(-2px) !important;
}

.account-menu[open] .account-menu-chevron {
    transform: rotate(225deg) translate(-1px, -1px) !important;
}

/* Popover -------------------------------------------------- */

.account-menu-popover {
    display: block !important;
    position: absolute !important;
    z-index: 9999 !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: 268px !important;
    box-sizing: border-box !important;
    padding: 17px !important;
    border: 1px solid var(--alea-menu-line) !important;
    border-radius: 15px !important;
    background: var(--alea-menu-bg) !important;
    box-shadow: 0 18px 55px rgba(48, 43, 39, .10) !important;
    color: var(--alea-menu-text) !important;
    text-align: left !important;
}

.account-menu:not([open]) .account-menu-popover {
    display: none !important;
}

.account-menu-identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 1px 1px 2px !important;
}

.account-menu-identity strong {
    display: block !important;
    color: var(--alea-menu-text) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.account-menu-identity span {
    display: block !important;
    color: var(--alea-menu-muted) !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.account-menu-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    margin-top: 16px !important;
}

.account-menu-label {
    display: block !important;
    margin: 0 0 7px 1px !important;
    color: #A29B94 !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.account-menu-section > a,
.account-menu-link-panel > a,
.account-menu-action,
.account-menu-logout {
    display: block !important;
    margin: 0 -7px !important;
    padding: 9px 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--alea-menu-muted) !important;
    text-decoration: none !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
    cursor: pointer !important;
}

.account-menu-section > a:hover,
.account-menu-link-panel > a:hover,
.account-menu-action:hover,
.account-menu-logout:hover {
    background: #F4F1ED !important;
    color: var(--alea-menu-text) !important;
}

.account-menu-link-panel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.account-menu-divider {
    display: block !important;
    height: 1px !important;
    margin: 13px 0 8px !important;
    background: var(--alea-menu-line) !important;
}

.account-menu-logout {
    color: #706963 !important;
}

.account-menu-logout-mobile { display: none; }

/* Prevent the header from clipping the dropdown. */
.app-header {
    overflow: visible !important;
}

/* Mobile --------------------------------------------------- */

@media (max-width: 780px) {
    .account-menu-logout-desktop { display: none; }
    .account-menu-logout-mobile { display: inline; }
    .brand {
        font-size: 39px !important;
    }

    .login-brand {
        font-size: 43px !important;
    }

    .account-menu-name,
    .account-menu-chevron {
        display: none !important;
    }

    .account-menu-popover {
        right: -2px !important;
        width: min(268px, calc(100vw - 32px)) !important;
    }
}

/* =========================================================
   ALEA OFFICIAL IMAGE WORDMARK V5
   All professional/error headers use the official asset.
   ========================================================= */
.brand,
.error-brand {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 114px !important;
    height: 38px !important;
    background-image: url('/Content/logo-alea-horizontal.png?v=2') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

.brand .brand-word,
.brand .brand-dot,
.error-brand .brand-word,
.error-brand .brand-dot {
    display: none !important;
}

.brand::before,
.brand::after,
.error-brand::before,
.error-brand::after {
    content: none !important;
    display: none !important;
}

.brand:hover,
.error-brand:hover {
    opacity: .82 !important;
}

@media (max-width: 780px) {
    .brand,
    .error-brand {
        width: 102px !important;
        height: 34px !important;
    }
}