/**
 * Account menu in the header - the icon left of the hamburger, and its
 * dropdown. Markup is in header.php, behaviour in js/account-menu.js.
 *
 * Positioned rather than laid out beside the burger on purpose: the burger is
 * `position: absolute; top: 33px; right: 33px` (css/burger-menu.css) and its
 * open/close is a CSS sibling-selector trick, so wrapping the two in a flex row
 * would mean rebuilding a working menu to move an icon.
 *
 * MATCHING THE BURGER
 * -------------------
 * The burger's 32x32 box is misleading. Its three bars are painted from -11px
 * to +16px relative to that box (span at 0, ::before at -11, ::after at +11,
 * each 5px tall), so the glyph you actually SEE is 32px wide, 27px tall, and
 * its centre sits at 33 + 2.5 = 35.5px from the top of the page - 13px higher
 * than the middle of its own box.
 *
 * So aligning this icon's box to the burger's box puts it visibly low. The
 * numbers below align the two GLYPHS instead: a 32px icon whose centre lands at
 * 36px, which is as close to 35.5 as whole pixels allow.
 */

.mctc-account-menu {
    position: absolute;
    /* 20 + half of 32 = 36, i.e. level with the burger's painted centre. */
    top: 20px;
    /* The burger glyph occupies 33..65px from the right edge. 88 leaves 23px
       between the glyphs, which is also enough that the two 46px scrims behind
       them (css/burger-menu.css) stay clearly separate rather than kissing. */
    right: 88px;
    /* One below the burger's 99999, so the two never fight and the burger stays
       the thing on top. */
    z-index: 99998;
}

/* Bare white, like the burger - no disc, no border, nothing the burger does not
   have. The icon is an inline SVG (see header.php) drawn on the same 32px grid
   as the bars, with an open 3.4px stroke so it carries comparable weight: a
   filled glyph at this size reads far heavier than three open bars, and a
   thin-stroke one reads far lighter. */
.mctc-account-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    /* The SVG strokes with currentColor, so the icon follows this. */
    color: #fff;
    line-height: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The scrim that makes this readable over any backdrop is shared with the
       burger and lives in css/burger-menu.css (see HEADER CONTROL LEGIBILITY
       there) - the two sit side by side and have to match, so it is defined
       once for both rather than once here and once there. This only needs to
       be positioned so that scrim's ::before has something to anchor to. */
    position: relative;
    transition: opacity .2s ease;
}
.mctc-account-btn:hover,
.mctc-account-btn[aria-expanded="true"] { opacity: .75; }
.mctc-account-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mctc-account-btn svg {
    display: block;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.mctc-account-dropdown {
    position: absolute;
    /* Clear of the glyph with the same breathing room the icon has above it. */
    top: 44px;
    /* Anchored to the right edge of the button so it opens inwards and cannot
       run off the side of a phone. */
    right: 0;
    min-width: 230px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #dfe3dd;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    overflow: hidden;
}
.mctc-account-dropdown[hidden] { display: none; }

.mctc-account-greeting {
    margin: 0;
    padding: 10px 16px 12px;
    border-bottom: 1px solid #eef1ed;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    line-height: 1.35;
    color: #6b746a;
}
.mctc-account-greeting strong { color: #22331f; font-size: 15px; }

.mctc-account-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 44px of height so it is a real tap target on a phone. */
    min-height: 44px;
    padding: 10px 16px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #22331f;
    text-decoration: none;
}
.mctc-account-dropdown a:hover,
.mctc-account-dropdown a:focus {
    background: #f1f6ef;
    color: #22331f;
    text-decoration: none;
}
.mctc-account-dropdown a i { width: 18px; text-align: center; color: #5fb34c; }

/* Signing out is the one destructive item here, so it is set apart rather than
   sitting in the list looking like another page to visit. */
.mctc-account-dropdown a.mctc-account-signout {
    border-top: 1px solid #eef1ed;
    margin-top: 6px;
    padding-top: 12px;
}
.mctc-account-dropdown a.mctc-account-signout i { color: #b3443b; }

/* The logo shrinks below 400px (css/burger-menu.css) but the burger does not
   move, so only the gap needs tightening to keep clear of the edge. */
@media (max-width: 400px) {
    .mctc-account-menu { right: 80px; }
    .mctc-account-dropdown { min-width: 210px; }
}