/* The narrow header: the bar, and the sheet that rises from the bottom of it.

   Kept apart from site-header.css, which describes the wide bar. The two share a header element and
   almost nothing else — different heights, different controls, different behaviour — and reading
   one while chasing a fault in the other is how the desktop sheet grew its stray comment. */

.cil-mhdr, .cil-mhdr *,
.cil-sheet, .cil-sheet *,
.cil-drawer, .cil-drawer * { box-sizing: border-box; }

/* The wide bar owns everything from 1080 up; this owns everything below, at the same seam the
   legacy pair swaps on. */
.cil-mhdr { display: none; }

@media only screen and (max-width: 1079px) {
    .cil-mhdr { display: block; }

    .cil-hdr__bar { display: none; }

    /* The bar is the whole header at this width, so the header is its height and nothing else. */
    #header.cil-hdr { min-height: 0; line-height: normal; text-align: start; }
}

/* Mirrors with the page: the cluster is written first, so it sits on the outside edge whichever
   way the page reads. */
.cil-mhdr__bar {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    height: 62px;
    padding-inline: 16px;
    background: var(--cil-black);
    transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Once the page moves the bar gives up six pixels, as the wide one gives up its marks. */
.cil-hdr.is-scrolled .cil-mhdr__bar { height: 56px; }

.cil-mhdr__icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 24px; height: 24px;
    padding: 0; margin: 0;
    background: none; border: 0;
    color: var(--cil-white);
    cursor: pointer;
}
.cil-mhdr__icon svg { display: block; }
/* Centred against the bar, not against what is left over between the two sides. Those sides are
   different widths — a burger and a globe on one, a single mark on the other — so space-between put
   the logo wherever the remainder fell. Taken out of the flow, it answers to the bar alone.
   Physical left, deliberately: this is centring, which is the same in both directions. */
.cil-mhdr__logo {
    position: absolute; left: 50%; top: 50%; z-index: 0;
    transform: translate(-50%, -50%);
    display: block; line-height: 0;
}
/* Bounded rather than sized: the compact mark and a wordmark are different shapes, and fixing
   either dimension stretches whichever one it was not drawn for. The compact mark is 46 x 27 and
   draws at exactly that, as it always has; anything taller or wider is brought inside these. */
.cil-mhdr__logo img {
    display: block;
    max-height: 27px; max-width: 120px;
    width: auto; height: auto;
}
.cil-mhdr__cluster { display: flex; align-items: center; gap: 16px; }

/* ===== THE BAR'S TWO SHAPES =====

   At the top of the page: a mark, the wordmark, and the cluster. Once the page moves — or once the
   mark is pressed — the first two give their room to a field, and the cluster stays where it is.
   The field is the header's own; it does not open a panel over the page. */
/* Always in the layout, collapsed rather than absent: a field that is display:none cannot open, it
   can only appear. Width is what gives, so the mark and the wordmark hand their room over as it
   grows rather than vanishing a frame before it arrives. */
.cil-mhdr__search {
    /* Above the wordmark, which is positioned and would otherwise paint over it: the mark fading
       across the opening field is what read as a ghost of itself. */
    position: relative; z-index: 1;
    display: flex;
    /* The growth is what animates, not a width or a cap. A max-width of 100% stops binding within
       the first frames — the field is far narrower than the bar — so it read as instant one way and
       eased the other. Growth is shared out in proportion, so both directions take the same path. */
    flex: 0 1 0; min-width: 0;
    opacity: 0;
    align-items: center; gap: 8px;
    padding: 8px 0;
    background: var(--cil-black-dark-1);
    border: 1px solid var(--cil-black-regular-9);
    border-color: transparent;
    border-radius: 10px;
    color: var(--cil-black-light-10);
    overflow: hidden;
    /* Two curves, because a transition declared once plays the same one backwards. The curve that
       makes opening feel like it arrives — fast away, slow in — front-loads the return, so closing
       lost half its width in the first fifty milliseconds. The base rule is the state it goes back
       to, so this is the closing one: slower, and even the whole way. */
    transition: flex-grow 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
                padding 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}
.cil-mhdr__search svg { display: block; flex: 0 0 auto; }
/* The field's own way of being sent, on the far side of the words. */
.cil-mhdr__searchSubmit {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 16px; height: 16px;
    padding: 0; margin: 0;
    background: none; border: 0;
    color: var(--cil-black-light-10);
    cursor: pointer;
}
.cil-mhdr__searchSubmit:hover { color: var(--cil-white); }
.cil-mhdr__search input {
    flex: 1 1 auto; min-width: 0;
    padding: 0; margin: 0;
    background: none; border: 0; outline: none;
    color: var(--cil-white);
    font-size: 14px; line-height: 1.2;
    /* The reading edge, not the far one: `end` is the left in Hebrew, which put what was typed on
       the wrong side of the field. */
    text-align: start;
}
.cil-mhdr__search input::placeholder { color: var(--cil-black-light-10); opacity: 1; }
/* The field says it has the caret, the way the wide bar's does — a ring around the input alone
   would be drawn inside the field and read as a second box within it. */
.cil-mhdr__search:focus-within { border-color: var(--cil-blue); }
.cil-mhdr__search input:focus-visible { outline: none; }

/* No gap on the bar itself: with the mark closed to nothing a gap beside it would still hold the
   field 16 short of the edge. The field keeps its own distance from the cluster instead. */
.cil-mhdr.is-searching .cil-mhdr__search,
.cil-hdr.is-scrolled .cil-mhdr__search { margin-inline-start: 16px; }

.cil-mhdr.is-searching .cil-mhdr__search,
.cil-hdr.is-scrolled .cil-mhdr__search {
    /* The opening curve, on the rule that opens it. */
    transition: flex-grow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.34s ease;
    flex-grow: 1; opacity: 1;
    padding: 8px 12px;
    border-color: var(--cil-black-regular-9);
}

/* The mark closes to nothing rather than disappearing, so its room becomes the field's. */
.cil-mhdr__searchToggle {
    overflow: hidden;
    transition: width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.cil-mhdr.is-searching .cil-mhdr__searchToggle,
.cil-hdr.is-scrolled .cil-mhdr__searchToggle {
    transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-mhdr.is-searching .cil-mhdr__searchToggle,
.cil-hdr.is-scrolled .cil-mhdr__searchToggle {
    width: 0; opacity: 0; pointer-events: none;
}

/* The wordmark is out of the flow, so it has nothing to hand over and simply goes. */
.cil-mhdr__logo { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.12s; }
.cil-mhdr.is-searching .cil-mhdr__logo,
.cil-hdr.is-scrolled .cil-mhdr__logo { opacity: 0; pointer-events: none; }

/* The design gives the shrunk bar its own shadow, the page having started to move under it. */
.cil-hdr.is-scrolled .cil-mhdr__bar { box-shadow: 0 3px 12px rgb(0 0 0 / 0.28); }

/* Written when these two answered to #mobileMenuButton and #mobileSearchButton, to put down the
   background images the legacy sheet paints on those ids. They carry ids of this module's own now,
   so that sheet never reaches them — and at id weight this rule was quietly outranking the one that
   closes the mark when the field opens. The class gives them their size. */

/* ===== THE SHEET ===== */

.cil-sheet[hidden] { display: none; }
.cil-sheet {
    position: fixed; inset: 0;
    z-index: 100011;   /* over the header at 100000, and over the drawer that can ask for it */
}

/* Dark enough to take the page out of the conversation, sheer enough to say it is still there.
   The design's own layer is #1F2020; the transparency is this implementation's, so the page is
   dimmed rather than replaced. */
.cil-sheet__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-sheet.is-open .cil-sheet__scrim { opacity: 0.72; }

/* The sheet renders inside the header, and the legacy sheet gives every header white ink for the
   dark bar's sake. On a white panel that ink is invisible, and anything inside that inherits —
   a link taking `color: inherit` on hover, say — inherits the wrong thing. So the panel states its
   own colour, and everything in it starts from that rather than from the bar. */
.cil-sheet__panel {
    position: absolute; inset-inline: 0; bottom: 0;
    padding-top: 8px; padding-bottom: 20px;
    background: var(--cil-white);
    color: var(--cil-black);
    border-start-start-radius: 22px;
    border-start-end-radius: 22px;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-sheet.is-open .cil-sheet__panel { transform: translateY(0); }

/* Pressable, so the sheet can be dismissed without reaching across it for the scrim. */
.cil-sheet__handleRow {
    display: flex; align-items: flex-start; justify-content: center;
    width: 100%;
    padding: 6px 0 10px;
    background: none; border: 0;
    cursor: pointer;
}
.cil-sheet__handle {
    display: block; width: 44px; height: 4px;
    border-radius: 2px;
    background: var(--cil-black-light-5);
}

.cil-sheet__title {
    margin: 0;
    padding: 0 20px 8px;
    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;
    text-align: start;
}

.cil-sheet__list { margin: 0; padding: 0; list-style: none; }
.cil-sheet__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    color: var(--cil-black);
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-decoration: none;
}
.cil-sheet__mark { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; }
.cil-sheet__row.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-sheet__row.is-untranslated { color: var(--cil-black-regular-5); }
/* The colour is restated and not left to the bar's `color: inherit` on hover, which was handing
   these rows the header's white and taking the words off the page. */
.cil-sheet a.cil-sheet__row:hover,
.cil-sheet a.cil-sheet__row:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
.cil-sheet a.cil-sheet__row.is-untranslated:hover,
.cil-sheet a.cil-sheet__row.is-untranslated:focus-visible { color: var(--cil-black-regular-5); }
.cil-sheet :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
    .cil-mhdr__search, .cil-mhdr__searchToggle, .cil-mhdr__logo,
    .cil-mhdr__bar,
    .cil-sheet__scrim,
    .cil-sheet__panel { transition: none; }
}

/* ===== THE DRAWER =====

   Slides in from the reading edge and holds the whole narrow menu. Signed out it offers the two
   pills; signed in it says who you are and adds the account group. Everything else is common. */

.cil-drawer[hidden] { display: none; }
.cil-drawer { position: fixed; inset: 0; z-index: 100010; }

.cil-drawer__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-drawer.is-open .cil-drawer__scrim { opacity: 0.72; }

/* 320 of the 390 the design draws, leaving the page showing at the far edge — enough to say the
   drawer is over the page rather than instead of it. Its own colour, not the header's white. */
.cil-drawer__panel {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    display: flex; flex-direction: column;
    width: 320px; max-width: calc(100% - 40px);
    padding-bottom: 24px;
    background: var(--cil-white);
    color: var(--cil-black);
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The panel is pinned to the reading edge, so it leaves towards that edge — which is the other
   way round in a Latin language. This site carries no dir attribute: direction is set by the class
   the theme puts on the body, so that is the hook, not [dir]. */
.lang-to-css-ltr .cil-drawer__panel { transform: translateX(-100%); }
.cil-drawer.is-open .cil-drawer__panel { transform: translateX(0); }

.cil-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px;
    background: var(--cil-black);
}
.cil-drawer__close {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    padding: 0; margin: 0;
    background: none; border: 0;
    color: var(--cil-white);
    cursor: pointer;
}
.cil-drawer__close svg { display: block; }
.cil-drawer__logo { display: block; line-height: 0; }
.cil-drawer__logo img {
    display: block;
    max-height: 27px; max-width: 120px;
    width: auto; height: auto;
}

/* Signed out: the two pills, each the width of the drawer. */
.cil-drawer__auth { display: flex; flex-direction: column; gap: 10px; padding: 24px 18px; }
.cil-drawer__btn {
    display: flex; align-items: center; justify-content: center;
    padding: 11px 20px;
    border-radius: 24px;
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 14px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
}
.cil-drawer__btn--solid { background: var(--cil-blue); border: 1px solid var(--cil-blue-dark-1); }
.cil-drawer__btn--ghost { background: none; border: 1px solid var(--cil-black-light-6); }
.cil-drawer a.cil-drawer__btn:hover,
.cil-drawer a.cil-drawer__btn:focus-visible { color: var(--cil-black); text-decoration: none; }
.cil-drawer__btn--ghost { transition: border-color 0.3s ease; }
.cil-drawer__btn--ghost:hover { border-color: var(--cil-blue); }

/* Signed in: who you are. The avatar leads, as it does on the wide bar. */
.cil-drawer__identity { display: flex; align-items: center; gap: 12px; padding: 24px 18px; }
.cil-drawer__avatar { display: block; width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.cil-drawer__who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cil-drawer__hello {
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 700; line-height: 1.2;
}
.cil-drawer__email {
    max-width: 100%;
    color: var(--cil-black-regular-3);
    font-size: 14px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The rule above each group is that group label's own border, as in the wide header's menu. */
.cil-drawer__group {
    margin: 0;
    padding: 16px 18px 4px;
    border-top: 1px solid var(--cil-black-light-2);
    color: var(--cil-black-regular-3);
    font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
    font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}

/* Most rows are links; the catalogue is a button, because it opens a panel rather than going
   anywhere. The theme dresses every bare button in the site's green, so the row says plainly that
   it has no ground of its own — otherwise one row in the list arrives already lit. */
.cil-drawer__row {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 12px 18px;
    background: none; border: 0;
    text-align: start;
    cursor: pointer;
    color: var(--cil-black);
    /* Named for the same reason as the ground: the theme's button rule brings the bold face with it. */
    font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 400; line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.cil-drawer__row svg { display: block; flex: 0 0 auto; }
/* Restated rather than inherited: the drawer renders inside the header, which is dressed in white
   ink for the dark bar, and the bar hands links that ink on hover. */
.cil-drawer a.cil-drawer__row:hover,
.cil-drawer a.cil-drawer__row:focus-visible,
.cil-drawer button.cil-drawer__row:hover,
.cil-drawer button.cil-drawer__row:focus-visible {
    background: var(--cil-blue-light-1);
    color: var(--cil-black);
    text-decoration: none;
}
.cil-drawer a#userLogoutMobile:hover,
.cil-drawer a#userLogoutMobile:focus-visible {
    background: var(--cil-red-light-1);
    color: var(--cil-red-dark-1);
}

/* The foot: the language you are reading, and the way to the others. */
.cil-drawer__language {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 16px 18px 8px;
    background: none;
    border: 0; border-top: 1px solid var(--cil-black-light-2);
    color: var(--cil-black);
    font-family: 'Assistant-Medium', Assistant, Arial, sans-serif;
    font-size: 16px; font-weight: 600; line-height: 1.2;
    cursor: pointer;
}
.cil-drawer__languageCurrent { display: flex; align-items: center; gap: 10px; }
.cil-drawer__languageCurrent svg,
.cil-drawer__languageCaret svg { display: block; }
.cil-drawer :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
    .cil-drawer__scrim, .cil-drawer__panel { transition: none; }
}

/* While a drawer or sheet is open the page beneath it holds still.

   Standard for a modal, and it also makes the drawer immune to a page that is wider than the
   screen: a fixed panel is pinned to the layout viewport, so once the reader can pan sideways the
   panel appears to slide off while everything else moves. /catalog-search/ does exactly that — its
   SEO strip renders past the right edge after the results load — and the drawer looked to blame.
   The strip is its own bug and is still worth fixing; this stops the drawer answering for it. */
/* The scrollbar's room is reserved whether or not it is showing. Hiding the overflow otherwise
   hands that width back to the layout, the viewport grows by it, and everything measured against
   the viewport — a fixed full-width header above all — jumps sideways as a panel opens. Padding the
   body cannot answer for that: a fixed header is laid against the viewport, not against the body. */
html { scrollbar-gutter: stable; }
html.cil-noscroll, html.cil-noscroll body {
    overflow: hidden;
    overscroll-behavior: none;
}