/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/** Teal Main Menu presentation. Account-menu markup owns hierarchy. */

/* ==========================================================================
   Main Menu
   ========================================================================== */

/* --------------------------------------------------------------------------
   Main Menu: Button
   -------------------------------------------------------------------------- */

.public_header_account > .account_menu {
    position: relative;
    align-self: center;
    justify-self: end;
    width: 2.45rem;
    height: 2.45rem;
    margin: 0;
    z-index: 0;
    border-radius: var(--radius-small);
}

.account_menu_button {
    /*
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 100%;
    */
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--primary-font-color);
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: var(--radius-none);
    cursor: pointer;
}

.account_menu_button:hover,
.account_menu_button[aria-expanded="true"] {
    background: transparent;
    background-image: none;
    border: 0;
}

/* Oct 8 2026 - her request: the 3-bar main menu glyph animates into an X when the menu opens (middle bar fades out, top and bottom bars rotate to form the X) and back again on close. Driven by the button's own aria-expanded state; bar colour comes from the css_catalog token --glyph-role-menu-toggle-color. */
.account_menu_desktop_glyph {
    position: relative;
    display: inline-block;
    inline-size: 20px; /* Oct 8 2026 - her request: same size as the main nav glyphs (20px) */
    block-size: 15px;
    vertical-align: middle;
}

.account_menu_bar {
    position: absolute;
    left: 0;
    display: block;
    inline-size: 100%;
    block-size: 2px;
    border-radius: var(--radius-small);
    background-color: var(--glyph-role-menu-toggle-color, currentColor);
    transition: transform .25s ease, opacity .25s ease, top .25s ease;
}

.account_menu_bar:nth-child(1) {
    top: 0;
}

.account_menu_bar:nth-child(2) {
    top: calc(50% - 1px);
}

.account_menu_bar:nth-child(3) {
    top: calc(100% - 2px);
}

.account_menu_button[aria-expanded="true"] .account_menu_bar:nth-child(1) {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.account_menu_button[aria-expanded="true"] .account_menu_bar:nth-child(2) {
    opacity: 0;
}

.account_menu_button[aria-expanded="true"] .account_menu_bar:nth-child(3) {
    top: calc(50% - 1px);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Main Menu: Panel
   -------------------------------------------------------------------------- */

.account_dropdown {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 0.35rem);
    right: 0;
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.5rem;
    background: var(--primary-color);
    border: 1px solid var(--primary-border-color);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-backdrop);
}

.account_dropdown[hidden] {
    display: none;
}

/* Canonical dropdown-row presentation migrated from new_base_aesthetics.css. */
.account_dropdown > :is(a, .account_logout_button, .account_menu_section > summary) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0.4rem 0.75rem !important;
    color: var(--popup-link-color) !important;
    background: transparent !important;
    border: 0 !important;

        border-bottom: 0;

    border-radius: var(--radius-none) !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer;}

.account_dropdown > :is(a, .account_logout_button, .account_menu_section > summary):is(:hover, :focus-visible) {
    color: var(--primary-font-color);
    background: var(--primary-accent-color);
}

/* --------------------------------------------------------------------------
   Main Menu: Links
   -------------------------------------------------------------------------- */

.account_dropdown .main_menu_link {
    color: var(--primary-link-color);
    text-decoration: none;
}

.account_dropdown .main_menu_link_color {
    color: var(--popup-link-color) !important;
}

.account_dropdown .main_menu_link_color:is(:hover, :focus-visible) {
    color: var(--popup-hover-text-color) !important;
}

/* --------------------------------------------------------------------------
   Main Menu: Nested Sections
   -------------------------------------------------------------------------- */

.account_dropdown > a.account_menu_toggle {
    display: flex !important;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

/* Oct 11 2026 - her request: the open/closed toggle glyph sits at the far right of the group row, like the widget headers, not left of the group name. Markup order is unchanged (header.js still finds the glyph by its data attribute). */
.account_dropdown > a.account_menu_toggle > [data-account-menu-toggle-glyph] {
    order: 1;
    flex: none;
    margin-left: auto;
}

.account_menu_mobile_label {
    display: none;
}

/* Oct 11 2026 - with the toggle glyph moved to the right, plain links and group rows share the same left padding, so the old glyph-width indent on plain links is removed. */

.account_dropdown .account_menu_section > .persona_switcher_change_list:not([hidden]) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.2rem 0 0.45rem;
}

.account_dropdown .account_menu_section > .persona_switcher_change_list[hidden] {
    display: none;
}

.account_dropdown .main_menu_persona_panel:not([hidden]) {
    padding-left: 1.75rem;
}

.account_dropdown .main_menu_l2_item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding-left: 1.75rem;
}

.account_dropdown .main_menu_l2_link {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0.5rem;
}

.account_dropdown .main_menu_l2_link:is(:hover, :focus-visible) {
    color: var(--primary-font-color);
    background: var(--primary-accent-color);
}

/* ==========================================================================
   Main Navigation
   ========================================================================== */

/* Canonical responsive navigation rule migrated from new_base_aesthetics.css. */
.site_header > .primary_navigation > .main_nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    transform: none !important;
    z-index: 20 !important;
}

.main_nav .navigation_link:not(.is_disabled):is(:hover, :focus-visible) .navigation_text {
    color: var(--primary-font-color) !important;
}

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–375px — Mobile Small: 320 minimum, Galaxy Z Fold 6 cover (~344), Pixel 9 Pro Fold cover (~360), iPhone SE (375) */
@media (max-width: 375px) {
    .account_dropdown { max-width: calc(100vw - 2 * var(--layout-page-gutter-narrow, 0.25rem)); }
}

/* 376–428px — Mobile Large: iPhone 16 (393), Pixel 9 / 9 Pro / 10 and Galaxy A55 (~412), up to 428 */
@media (min-width: 376px) and (max-width: 428px) {
    .account_dropdown { max-width: calc(100vw - 2rem); }
}

/* 320–767px — every phone size and iPad Mini portrait (all Mobile tiers plus 429–767)
   Oct 13 2026 - her request (#506): the Main Menu popup (the top-right header bars) stretches edge to edge on mobile. Fixed + top:auto keeps it directly under the button where it opens; left/right 0 spans the screen. */
@media (max-width: 767px) {
    .account_dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 0.35rem;
        border-left-width: 0;
        border-right-width: 0;
        border-radius: 0 0 var(--radius-large) var(--radius-large);
    }
}