/* The panels that drop from the header bar.

   Kept apart from site-header.css because that file describes the bar itself, and the two are read
   for different reasons: one when the bar's measurements are wrong, this one when a menu is. The
   catalogue's own panel will join these when it is built.

   Logical properties throughout, as in the bar: the site runs in four languages, two of them
   right-to-left, and a menu that opens off the correct edge in Hebrew should do the same in
   English without a second copy of every rule. */

.cil-hdr__langMenu *,
.cil-hdr__langMenu *::before,
.cil-hdr__langMenu *::after { box-sizing: border-box; }

/* The legacy sheet places this menu by id — 50 from the top, 24 past the left edge, 120 wide, with
   its own ground and shadow. All of it belongs to a bar that no longer exists, so it is restated
   here at the same weight rather than written as a class that would quietly lose.

   Hung from the bar's full height rather than the button's, so the 8px gap the design leaves is a
   gap below the bar and not below the word. */
.cil-hdr #languagesMenu {
    /* Closed until common.js says otherwise. The retired sheet used to say this, and the menu stood
       open on every page for as long as this rule was missing. */
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* The legacy left is put down first: a physical side declared after a logical one wins, and
       would leave the panel placed by whichever edge the browser fell back to. */
    left: auto; right: auto;
    inset-inline-end: 0;
    z-index: 100004;
    width: 190px; min-width: 0;
    background: var(--cil-white);
    border: 0;
    border-radius: 14px;
    /* The edge is drawn inside the panel rather than as a border, so the rows are the full 190 the
       design gives them and their 16 of padding is measured from the panel's true edge — a border
       would take its width out of the content box and leave every row a pixel narrow. */
    box-shadow: 0 10px 26px rgb(0 0 0 / 0.2), inset 0 0 0 1px var(--cil-black-light-3);
    overflow: hidden;
    font-size: 16px; line-height: 1.2; text-align: start;
}

.cil-hdr #languagesMenu.active { display: block; }
/* With GSAP (item 389) it is drawn all the time and hidden until opened, as the user menu is, so it can fold back
   up when it closes; GSAP shows it while it moves. Hidden, it is out of the tab order and unread. */
.cil-hdr #languagesMenu[data-motion] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
.cil-hdr #languagesMenu[data-motion].active { visibility: visible; opacity: 1; pointer-events: auto; }

.cil-hdr__langList { margin: 0; padding: 0; list-style: none; }
.cil-hdr__langItem { margin: 0; }

/* Name at the reading edge, check at the far one, and whatever is left over between them — the
   check's place is held on every row, so the names line up whether or not one of them is the
   language you are in. 43 tall is what 12 of padding either side of a 16/1.2 line comes to; it is
   left to the type rather than declared, so a language with taller letters is not clipped. */
.cil-hdr__lang {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    color: var(--cil-black);
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.cil-hdr__langMark { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; }
/* Hugs its word rather than filling the row, so a name written left-to-right still begins at the
   panel's reading edge instead of drifting to the check's side of its own box. */
.cil-hdr__langName { flex: 0 1 auto; }

/* The one you are reading. Stated by class and by id-weight below, because the ground has to beat
   the legacy sheet's white. */
/* Named as a face, not as a number: the site loads Assistant one weight per family, so asking a
   regular face for 700 gets a synthesised bold that reads lighter than the real one. */
.cil-hdr__lang.is-current {
    background: var(--cil-blue-light-1);
    color: var(--cil-blue-dark-1);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-weight: 700;
    cursor: default;
}
/* A language this page has no counterpart in still goes somewhere — that language's home page —
   and reads as the lesser offer it is. */
.cil-hdr__lang.is-untranslated { color: var(--cil-black-regular-5); }

/* These are links inside .cil-hdr, where the bar puts every link's hover colour back to inherit so
   the dark ground is not painted green. On white, they answer with their ground instead. */
.cil-hdr__langMenu a.cil-hdr__lang:hover,
.cil-hdr__langMenu a.cil-hdr__lang:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
.cil-hdr__langMenu a.cil-hdr__lang.is-untranslated:hover,
.cil-hdr__langMenu a.cil-hdr__lang.is-untranslated:focus-visible { color: var(--cil-black-regular-5); }
/* The ring is drawn inside: the panel clips its overflow, and an offset ring would be cut in half. */
.cil-hdr__langMenu :focus-visible { outline-offset: -3px; }

/* ===== THE USER MENU =====

   The legacy sheet gives this one a decorative pair of background images, 40px of padding and a
   left of 100 — a menu of a different shape entirely. Restated here by id, which is the only
   weight that reaches it. */
.cil-hdr #userMenu {
    /* Drawn all the time and hidden until opened, so it can ease in and out (item 247): it drops 6px into
       place from the button, growing from the corner nearest it, and leaves faster than it came. Hidden
       (visibility), it is out of the tab order and unread, as `display: none` had it. */
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.14s ease-in, transform 0.14s ease-in, visibility 0s linear 0.14s;
    position: absolute;
    top: calc(100% + 8px);
    left: auto; right: auto;
    inset-inline-end: 0;
    z-index: 100004;
    width: 320px; min-width: 0;
    padding: 12px 0;
    background-color: var(--cil-white);
    background-image: none;
    border: 1px solid var(--cil-black-light-3);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
    overflow: hidden;
    text-align: start;
}
.cil-hdr #userMenu.cil-menu-ltr { transform-origin: top right; }
.cil-hdr #userMenu.active {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* The caret turns to point up while its menu is open, as the catalogue's does (site-header.css). */
.cil-hdr__userButton .cil-hdr__caret { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.cil-hdr__userButton[aria-expanded="true"] .cil-hdr__caret { transform: rotate(180deg); }
/* With GSAP the menu settles in and back out by one timeline, its rows and caret with it (items 388-391,
   header-menu-motion.js): the CSS fade, drop and caret turn step aside. Without it, they are the motion. */
.cil-hdr #userMenu[data-motion].active,
.cil-hdr #userMenu[data-motion],
.cil-hdr__userButton[data-motion] .cil-hdr__caret { transition: none; }
.cil-hdr #userMenu[data-motion] { transform: none; }
/* The menu still opens and the caret still points; only the motion goes. */
@media (prefers-reduced-motion: reduce) {
    .cil-hdr #userMenu, .cil-hdr #userMenu.active { transform: none; transition: none; }
    .cil-hdr__userButton .cil-hdr__caret { transition: none; }
}
/* css/user-menu.css draws confetti into the panel's two far corners. The design's panel is plain,
   and the rows now reach its edges, so the decoration is put down rather than sat behind. */
.cil-hdr #userMenu::before,
.cil-hdr #userMenu::after { content: none; }

.cil-hdr__userMenu *,
.cil-hdr__userMenu *::before,
.cil-hdr__userMenu *::after { box-sizing: border-box; }

/* Who the menu belongs to, said again at the top of it — the bar behind may have scrolled to the
   shape that has no room for a name. */
/* Both lines hug their own text at the panel's reading edge, so the address lines up under the
   greeting however long either of them is — the address runs left-to-right inside its own box,
   which would otherwise carry it to the far side of a full-width line. */
.cil-hdr__userIdentity {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 18px 14px;
}
.cil-hdr__userHello {
    color: var(--cil-black-dark-4);
    font-family: 'Assistant-Medium', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 600; line-height: 1.2;
}
/* Left-to-right whichever way the page reads, because an address is not a sentence. */
.cil-hdr__userEmail {
    max-width: 100%;
    color: var(--cil-black-regular-7);
    font-size: 14px; font-weight: 400; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Each group is announced by its label, and the rule above it is that label's own border — one
   fewer element than drawing the dividers separately, and it can never part company with them. */
/* The foot's rule, in place of a heading. The same line a group's heading draws above itself, so
   what is under it is set apart exactly as a named group would be — with more air, because nothing
   follows to say what it is. */
.cil-hdr__userRule {
    height: 0;
    margin: 8px 0 4px;
    border: 0;
    border-top: 1px solid var(--cil-black-light-2);
}

.cil-hdr__userGroup {
    margin: 0;
    padding: 10px 18px 6px;
    border-top: 1px solid var(--cil-black-light-2);
    color: var(--cil-black-regular-3);
    /* The face by name, not the number: nothing here synthesises a bold any more, so a family
       without one would draw this label plain. */
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}

.cil-hdr__userRow {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px;
    color: var(--cil-black);
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
/* The legacy sheet sizes the images in its own menu 28 square and nudges them down a line. */
.cil-hdr__userMenu .cil-hdr__userRow img {
    width: 20px; height: 20px; flex: 0 0 auto;
    transform: none;
}
/* Named the way the bar's own hover rules are, so they answer with a ground rather than inherit
   the bar's instruction to leave a link's colour alone. */
.cil-hdr__userMenu a.cil-hdr__userRow:hover,
.cil-hdr__userMenu a.cil-hdr__userRow:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
/* Signing out is the one row that undoes something, and it answers in red rather than in the blue
   the rest use. It also reaches the panel's own bottom padding — the last row in a menu has no
   neighbour under it, and a band of white below a lit row reads as a row that stopped short. */
.cil-hdr__userMenu .cil-hdr__userRow:last-child {
    padding-bottom: 23px;   /* its own 11, plus the 12 the panel keeps beneath it */
    margin-bottom: -12px;
}
.cil-hdr__userMenu a#userLogout:hover,
.cil-hdr__userMenu a#userLogout:focus-visible {
    background: var(--cil-red-light-1);
    color: var(--cil-red-dark-1);
}

.cil-hdr__userMenu :focus-visible { outline-offset: -3px; }