/* 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; }

.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 {
    display: none;
    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.active { display: block; }
/* 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. */
.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; }

/* ===== THE CATALOGUE, ON A WIDE SCREEN =====

   Three columns across the page: the ways in, the subjects, and the children of the chosen one.
   Every subject's children are in the markup; choosing shows one. */

.cil-cat2, .cil-cat2 * { box-sizing: border-box; }
.cil-cat2[hidden] { display: none; }
.cil-cat2 { position: fixed; inset: 0; z-index: 100009; }

/* The page steps back while the catalogue is open, as it does under the narrow drawer. */
.cil-cat2__scrim {
    position: absolute; inset: 0;
    background: var(--cil-black-dark-4);
    opacity: 0;
    transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-cat2.is-open .cil-cat2__scrim { opacity: 0.55; }

/* Hung from the bar's underside, the full width of the page. */
/* The panel comes out from under the bar rather than appearing in front of it: it is revealed
   downward from its own top edge, so the bar looks like the thing it is hanging from. Sliding the
   whole panel would have it cross the page from somewhere it never was. */
.cil-cat2__panel {
    position: absolute; inset-inline: 0; top: 64px;
    background: var(--cil-white);
    color: var(--cil-black);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.18);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    /* The panel can never run past the foot of the window. A subject with many children made it
       taller than the viewport, and the page is deliberately held still while the catalogue is open,
       so whatever fell below the fold could not be reached at all — the panel scrolls itself
       instead. dvh, not vh: on a phone the browser's own chrome is part of the viewport. */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cil-cat2.is-open .cil-cat2__panel { clip-path: inset(0 0 0 0); }

/* The columns follow a beat behind the edge that reveals them, so the panel reads as opening rather
   than as a block of finished page switching on. */
.cil-cat2__columns > *,
.cil-cat2__footer > * {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                transform 0.26s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.cil-cat2.is-open .cil-cat2__columns > *,
.cil-cat2.is-open .cil-cat2__footer > * { opacity: 1; transform: translateY(0); }

/* The design is drawn at 1920, where 160 either side and three full columns fit exactly. Narrower
   desktops have less to give, so the margins close first and then the columns share what is left —
   rather than the last column walking off the edge, which is what fixed widths did at 1440. */
.cil-cat2__columns {
    /* Subjects have different numbers of children, so choosing one changes the panel's height.
       The script hands this an explicit height to travel between; without it the panel snaps. */
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; align-items: flex-start;
    padding: 36px clamp(24px, 8.33vw, 160px) 28px;
}
.cil-cat2__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cil-cat2__col--paths,
.cil-cat2__col--subjects { flex: 0 1 380px; }
.cil-cat2__col--children { flex: 0 1 420px; }
/* The rule stands between two columns, with its own room either side. */
.cil-cat2__rule {
    flex: 0 1 81px; min-width: 33px;
    height: 300px;
    background:
        linear-gradient(var(--cil-black-light-3), var(--cil-black-light-3)) center / 1px 100% no-repeat;
}

.cil-cat2__heading {
    margin: 0;
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}

.cil-cat2__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 9px 12px;
    background: none; border: 0;
    border-radius: 10px;
    color: var(--cil-black);
    font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-align: start; text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.cil-cat2__mark { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; }
.cil-cat2__mark svg { display: block; }
/* Stated rather than inherited: this sits inside the header, which wears white ink for the bar. */
.cil-cat2 a.cil-cat2__row:hover, .cil-cat2 a.cil-cat2__row:focus-visible,
.cil-cat2 button.cil-cat2__row:hover, .cil-cat2 button.cil-cat2__row:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
/* The subject whose children are showing. */
.cil-cat2__subject.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;
}
.cil-cat2__childSet { display: flex; flex-direction: column; gap: 14px; }
.cil-cat2__childSet[hidden] { display: none; }

.cil-cat2__footer {
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
    padding: 20px clamp(24px, 8.33vw, 160px) 28px;
    border-top: 1px solid var(--cil-black-light-2);
}
.cil-cat2__hint { margin: 0; color: var(--cil-black-regular-5); font-size: 14px; line-height: 1.2; }
.cil-cat2__all {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 26px;
    border-radius: 24px;
    background: var(--cil-blue);
    border: 1px solid var(--cil-blue-dark-1);
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
}
.cil-cat2 a.cil-cat2__all:hover, .cil-cat2 a.cil-cat2__all:focus-visible { color: var(--cil-black); }

/* The fill, ends first and middle last, as on the catalogue button. */
.cil-cat2__all { position: relative; overflow: hidden; isolation: isolate; }
.cil-cat2__allLabel { position: relative; z-index: 1; }
.cil-cat2__all > span[aria-hidden] {
    position: absolute; bottom: -50%;
    width: 25%; height: 100%;
    background: var(--cil-cat2-fill, var(--cil-blue));
    border-radius: 50%;
    transform: translateY(150%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1; pointer-events: none;
}
/* The same attribute on every one, or the shorthand above outranks the delays and they arrive
   together — which is no direction at all. */
.cil-cat2__all > span[aria-hidden]:nth-of-type(2) { left:  0%; transition-delay: 0s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(3) { left: 25%; transition-delay: 0.20s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(4) { left: 50%; transition-delay: 0.20s; }
.cil-cat2__all > span[aria-hidden]:nth-of-type(5) { left: 75%; transition-delay: 0s; }
.cil-cat2__all:hover > span[aria-hidden],
.cil-cat2__all:focus-visible > span[aria-hidden] { transform: translateY(-50%) scale(1.6); }
.cil-cat2 :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }

/* The button says the panel is open by wearing the panel's own colour. */
/* Also named with its element, and after the hover rule, so the open colour holds while the
   pointer is on it — an open button that goes white under the cursor has stopped saying it is open. */
.cil-hdr button.cil-hdr__catalogue[aria-expanded="true"],
.cil-hdr button.cil-hdr__catalogue[aria-expanded="true"]:hover {
    background: var(--cil-blue);
    border-color: var(--cil-blue-dark-1);
}

@media (prefers-reduced-motion: reduce) {
    .cil-cat2__scrim, .cil-cat2__panel, .cil-cat2__columns,
    .cil-cat2__all > span[aria-hidden],
    .cil-cat2__columns > *, .cil-cat2__footer > * { transition: none; }
}