/* ============================================================
   header.css — Unified account menu / dropdown component.
   Single source of truth for the avatar dropdown used across
   every authenticated page (dashboard, phrases-page, saved-phrases,
   catalog, practice, user-details, faq).

   Replaces the former duplicated header.css + header_phrases.css.
   All colors / spacing / radius come from tokens.css.

   Submenu (Settings) is an in-flow accordion — it never uses
   absolute/fly-out positioning, so it can never clip off-screen.
   Identical behaviour on mobile (390px) and desktop (1280px).
   ============================================================ */
@import url('tokens.css');

/* ---- Positioning of the avatar in the page corner ---- */
.user-section {
    position: fixed;
    top: 3rem;
    right: 2rem;
    z-index: var(--z-dropdown);
}

.avatar-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.avatar-dropdown {
    position: relative;
    display: inline-block;
}

/* ---- Avatar trigger (button-based for a11y) ---- */
.avatar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The avatar art stays 40px; the button around it goes to the touch
       minimum. This is the entry point to the whole account menu and it sits in
       the corner of the screen, where a thumb is least accurate. */
    min-width: var(--tap-min, 44px);
    min-height: var(--tap-min, 44px);
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    line-height: 0;
    transition: transform var(--transition-fast) var(--ease-out);
}

.avatar-trigger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.user-avatar,
.initials-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--ink), 3px 4px 0 rgba(10, 53, 96, 0.22);
    background-color: var(--white);
    transition: box-shadow var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-spring);
}

.avatar-trigger:hover .user-avatar,
.avatar-trigger:hover .initials-avatar {
    box-shadow: 0 0 0 3px var(--ink), 5px 6px 0 rgba(10, 53, 96, 0.24);
}

.avatar-trigger:hover {
    transform: scale(1.08);
}

/* ---- Dropdown panel ---- */
.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    min-width: 220px;
    max-width: min(88vw, 300px);
    padding: var(--space-2) 0;
    background-color: var(--white);
    border-radius: var(--radius-md);
    border: var(--border-chunky-thin);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);

    /* hidden state (no layout shift, no off-screen paint) */
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-out),
                visibility 0s linear var(--transition-fast);
}

.dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--transition-fast) var(--ease-out),
                transform var(--transition-fast) var(--ease-out);
}

/* Caret pointing to the avatar */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    right: 16px;
    border-width: 0 12px 12px 12px;
    border-style: solid;
    border-color: transparent transparent var(--white) transparent;
    filter: drop-shadow(0 -2px 0 var(--ink));
}

/* ---- Menu items (shared by top-level and submenu) ---- */
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: var(--text-spacing);
    text-align: left;
    border: none;
    border-left: 4px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out),
                color var(--transition-fast) var(--ease-out),
                border-color var(--transition-fast) var(--ease-out);
}

/* `.menu-item { display:flex }` outranks the UA `[hidden]` rule, so a hidden
   menu item (e.g. the Admin link, hidden for non-admins) stayed visible for
   everyone. Force hidden items to actually hide. */
.menu-item[hidden] { display: none !important; }

.menu-item:hover,
.menu-item.is-active {
    background-color: var(--hover-bg);
    color: var(--medium-blue);
    border-left-color: var(--medium-blue);
}

.menu-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    /* keep focus ring inside the rounded panel */
    border-radius: 4px;
}

.menu-item--danger {
    color: var(--error-red);
}

.menu-item--danger:hover {
    background-color: rgba(224, 36, 36, 0.08);
    color: var(--error-red);
    border-left-color: var(--error-red);
}

/* ---- Submenu (Settings) — inline accordion ---- */
.dropdown-submenu {
    position: relative;
}

.submenu-trigger {
    justify-content: space-between;
}

.submenu-caret {
    flex: 0 0 auto;
    color: var(--gray-text);
    transition: transform var(--transition-fast) var(--ease-out);
}

.submenu-trigger[aria-expanded="true"] .submenu-caret {
    transform: rotate(90deg);
    color: var(--medium-blue);
}

/* Accordion container: animate via grid-template-rows (no fixed max-height
   guesswork, no absolute positioning, so it can never render off-screen). */
.submenu {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    background-color: var(--submenu-bg);
    border-top: 1px solid var(--submenu-border);
    border-bottom: 1px solid var(--submenu-border);
    transition: grid-template-rows var(--transition-base) var(--ease-out);
}

.submenu.is-open {
    grid-template-rows: 1fr;
}

/* Inner wrapper: single grid child so 0fr fully collapses the submenu
   (with two direct items the 2nd landed in an implicit row and stayed visible). */
.submenu-inner {
    min-height: 0;
    overflow: hidden;
}

.submenu-item {
    padding-left: 32px;
    font-size: 0.98rem;
    color: var(--submenu-text-color);
}

.submenu-item:hover {
    background-color: var(--hover-bg);
    color: var(--medium-blue);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .user-section {
        top: 1.5rem;
        right: 1rem;
    }

    .user-avatar,
    .initials-avatar {
        width: 40px;
        height: 40px;
    }

    /* Anchor to the right edge; cap width so it never overflows the viewport. */
    .dropdown-menu {
        min-width: 200px;
        max-width: min(92vw, 280px);
    }
}

@media (max-width: 600px) {
    .user-section {
        top: 10px;
        right: 10px;
    }

    /* Keep left-aligned page titles clear of the fixed top-right avatar. */
    .dashboard-header {
        padding-left: 1rem;
        padding-right: 60px;
    }

    .dashboard-title {
        font-size: 1.6rem;
        line-height: 1.15;
    }

    .user-avatar,
    .initials-avatar {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
    }
}

@media (min-width: 769px) {
    .user-section {
        top: 3rem;
        right: 2rem;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu,
    .submenu,
    .submenu-caret,
    .avatar-trigger,
    .menu-item {
        transition: none;
    }
}