/* The site header, rebuilt to the design.

   One bar, 64 tall, in two shapes. At rest it shows the marks of the bodies behind the site; once
   the page moves it gives those marks up and a search field arrives in the middle. Every
   measurement of both shapes is here — the script only adds a class — so the two can never
   disagree about what the header is.

   Written with logical properties: the site runs in four languages, two of them right-to-left, and
   the legacy sheets pay for that by keeping two copies of every rule. */

/* The catalogue button's face. The theme declares its own families in styles-rtl/ltr but not this
   one, which arrived with the user menu's stylesheet — a sheet the retired header owned, and which
   went with it. The header carries the face it asks for rather than borrowing another sheet's. */
@font-face {
    font-family: "Assistant-SemiBold";
    src: url("../../../css/fonts/Assistant-SemiBold.ttf") format("truetype");
    font-display: swap;
}

/* styles-rtl.css paints three things that green: every button's ground on hover, every link's text
   on hover, and every focus ring on the site. None of them suits a dark bar whose contents are
   white, so all three are put down here and answered in the bar's own terms.

   The colour is stated on the link itself, not only on the bar, because a:hover names the element
   and would otherwise win against anything inherited. */
.cil-hdr button:hover,
.cil-hdr .button:hover { background: none; }
.cil-hdr a:hover,
.cil-hdr a:focus-visible { color: inherit; text-decoration: none; }
.cil-hdr__link:hover,
.cil-hdr__link:focus-visible { color: var(--cil-white); }
/* The pills carry their own ink and keep it: inheriting would hand the filled one the bar's white,
   which is the colour it is standing against. */
.cil-hdr a.cil-hdr__btn--solid:hover,
.cil-hdr a.cil-hdr__btn--solid:focus-visible { color: var(--cil-black); }
/* The outlined pill keeps its white: nothing arrives behind the word to stand against. */
.cil-hdr a.cil-hdr__btn--ghost:hover,
.cil-hdr a.cil-hdr__btn--ghost:focus-visible { color: var(--cil-white); }
.cil-hdr :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
/* The white pill sits on the dark bar, where a white ring would vanish. */
.cil-hdr__catalogue:focus-visible { outline-color: var(--cil-black); outline-offset: 3px; }

/* Only the two pills answer the cursor. The catalogue button, the language switcher and the name
   are ways around the site rather than things being offered, and the pointer is the whole of what
   they have to say — no colour shift, no fade, nothing that moves.

   The focus ring stays. It is not decoration: it is the only thing telling a keyboard where it is. */
.cil-hdr__catalogue,
.cil-hdr__language,
.cil-hdr__userButton,
.cil-hdr__link { cursor: pointer; }
/* Named with its element, because the rule above that puts the theme's green down —
   `.cil-hdr button:hover` — carries a type selector and would otherwise outrank this and leave the
   button transparent, showing the dark bar through it as black. */
/* The white is restated, not only the border: the rule that puts the theme's green down sets
   `background: none`, and a transparent button on a dark bar is a black one — which is what the
   risers were rising through. */
.cil-hdr button.cil-hdr__catalogue:hover {
    background: var(--cil-white);
    border-color: var(--cil-blue-dark-1);
}

/* The same fill the log-in pill uses, the other way round: the ends arrive first and the middle
   last, so the colour closes towards the centre rather than opening from it. The button keeps its
   white — the risers are what turn it blue — and the caret is left alone, because it answers to
   being pressed rather than to being pointed at. */
.cil-hdr__catalogue { position: relative; overflow: hidden; isolation: isolate; }
.cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret) {
    position: absolute; bottom: -50%;
    width: 25%; height: 100%;
    /* The header screen's choice, printed on the button. Blue while nothing has been chosen, which
       is the colour the design gives it. */
    background: var(--cil-hdr-cat-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; will-change: transform;
}
/* Counting from two, as the label is a span as well. Ends 0s, middle 0.20s.
   Written with the same attribute and :not as the rule above, or that rule is the more specific of
   the two and its `transition` shorthand puts every delay back to zero — which is four risers
   arriving together, and no direction at all. */
.cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret):nth-of-type(2) { left:  0%; transition-delay: 0s; }
.cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret):nth-of-type(3) { left: 25%; transition-delay: 0.20s; }
.cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret):nth-of-type(4) { left: 50%; transition-delay: 0.20s; }
.cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret):nth-of-type(5) { left: 75%; transition-delay: 0s; }
.cil-hdr__catalogue:hover > span[aria-hidden]:not(.cil-hdr__caret),
.cil-hdr__catalogue:focus-visible > span[aria-hidden]:not(.cil-hdr__caret) {
    transform: translateY(-50%) scale(1.6);
}
.cil-hdr__catalogue .cil-hdr__btnLabel,
.cil-hdr__catalogue .cil-hdr__caret { position: relative; z-index: 1; }

/* While the panel is open the button says so in teal, and the risers behind it are done with. They
   are held up rather than let fall: opening the panel holds the page still, which takes the
   scrollbar away and moves the button out from under the pointer — and a riser that loses its hover
   mid-way drains back down in full view, a second animation nobody asked for. */
.cil-hdr__catalogue[aria-expanded="true"] > span[aria-hidden]:not(.cil-hdr__caret) {
    transform: translateY(-50%) scale(1.6);
    transition: none;
}
/* Once the fill is up, the word is standing on it rather than on the button's white — so it takes
   whichever of black or white can be read on the colour that was chosen. */
.cil-hdr__catalogue:hover,
.cil-hdr__catalogue:focus-visible,
.cil-hdr__catalogue[aria-expanded="true"] { color: var(--cil-hdr-cat-ink, var(--cil-black)); }


@media (prefers-reduced-motion: reduce) {
    .cil-hdr__catalogue > span[aria-hidden]:not(.cil-hdr__caret) { transition: none; }
}
.cil-hdr__language:hover,
.cil-hdr__userButton:hover { background: none; opacity: 1; }
.cil-hdr__link:hover { opacity: 1; }

/* The legacy sheet also gives these two their padding, line height and letter spacing, and it does
   so by id — which outranks any class here. The rebuilt bar's own measurements are therefore
   restated at the same weight, rather than written as classes that quietly lose. */
/* No longer restated at id weight: the button carries an id of this module's own, so the legacy
   sheet's rules for #newCatalogMainButton never reach it. */
.cil-hdr__catalogue {
    height: 35px;
    padding-block: 9px; padding-inline: 20px;
    font-size: 14px; line-height: 1.2; letter-spacing: 0;
    background-image: none;
}
.cil-hdr #languagesButton {
    padding: 6px 0;
    font-size: 14px; line-height: 1.2; letter-spacing: 0;
}
/* The greeting is inside this button and inherits from it, so the family has to be won here too. */
/* The legacy sheet paints a red magnifier behind #searchSubmit and sizes it 33 square with a
   margin. The rebuilt field draws its own 18px mark, so the painted one is put down and the box
   told what it really is — by id, which is the only way to be heard here. */
.cil-hdr #searchSubmit {
    background: none;
    width: 18px; height: 18px;
    margin: 0; padding: 0;
}
.cil-hdr #userNameButton {
    padding: 4px 0;
    font-family: 'Assistant-Medium', 'Assistant', Arial, sans-serif;
    font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0;
}

/* Stated here rather than inherited. The element rule in styles-rtl.css dresses every <header> on
   the site, and this bar used to take its pinning from it — a dependency that would have gone quiet
   the day someone touched a rule written for something else. What the bar needs, it says. */
#header.cil-hdr {
    position: fixed; z-index: 100000;
    top: 0; left: 0; width: 100%;
    min-height: 0;
    line-height: normal;
    text-align: start;
    background: var(--cil-black);
    transition: box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The site loads Assistant one weight per family — 'Assistant-Bold' is a family whose single face
   is registered at the default 400, because the @font-face rules carry no weight descriptor. So a
   rule naming that family *and* asking for 700 is asking a browser to embolden a face that is
   already bold, and the two disagree about how hard: Firefox synthesises heavily, Chrome barely.
   Refusing the synthesis outright leaves both drawing the real face, and a fallback to Arial still
   gets Arial's own bold rather than a smeared one.

   Scoped to the bar rather than to the header, because the header still carries the legacy mobile
   markup below 1079 and that was drawn against whatever its own families were doing. */
.cil-hdr__bar, .cil-hdr__bar * { font-synthesis: none; }
#header.cil-hdr.is-scrolled {
    box-shadow: 0 3px 14px color-mix(in srgb, var(--cil-black) 28%, transparent);
}

/* The theme sizes boxes the old way, so a declared height here would be whatever was asked for plus
   its padding and borders — which is how the search field came out 60 tall in a 64 bar and filled
   it. Everything in the header measures what it says it measures. */
.cil-hdr *, .cil-hdr *::before, .cil-hdr *::after { box-sizing: border-box; }

.cil-hdr__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    height: 64px;
    padding-inline: 40px;
}

/* ===== BRAND AND NAVIGATION ===== */
.cil-hdr__lead  { display: flex; align-items: center; gap: 32px; min-width: 0; }
/* Thirty between every mark — the brand and the two beside it are one row of marks, spaced alike.
   The gap closes with them on scroll, or the brand would sit thirty pixels adrift of nothing. */
.cil-hdr__brand {
    display: flex; align-items: center; gap: 30px;
    transition: gap 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.cil-hdr.is-scrolled .cil-hdr__brand { gap: 0; }
.cil-hdr__logo  { display: block; line-height: 0; }
.cil-hdr__logo img {
    display: block; width: 110px; height: auto;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.cil-hdr.is-scrolled .cil-hdr__logo img { width: 95px; }

/* The partner marks are the first thing the shrunk bar gives up — at 64 there is no room for three
   marks and a search field. Width rather than display, so they leave with the height. */
/* One duration and one curve for both, so the marks fade as the space closes rather than blinking
   out and leaving the row to catch up. Their own gap goes with them, so the two do not drift apart
   on the way out. The curve is the field's, at a length that suits the distance. */
.cil-hdr__partners {
    display: flex; align-items: center; gap: 30px;
    max-width: 260px; overflow: hidden;
    transition: max-width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                gap 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cil-hdr.is-scrolled .cil-hdr__partners { gap: 0; }
.cil-hdr.is-scrolled .cil-hdr__partners { max-width: 0; opacity: 0; }
.cil-hdr__partner { display: block; width: auto; height: 26px; flex: 0 0 auto; }

/* Twenty-five between the catalogue button and the words beside it, and between those. */
.cil-hdr__nav { display: flex; align-items: center; gap: 25px; }
.cil-hdr__link {
    padding: 8px 4px;
    font-family: 'Assistant', Arial, sans-serif;
    font-weight: 400; font-size: 16px; line-height: 1.2;
    color: var(--cil-white); text-decoration: none;
    white-space: nowrap;
}
/* Hugs its contents: the width is whatever the word and the caret need, plus 20 either side. The
   height is pinned at 35 because the caret is 16 and would otherwise carry the button to 36. */
.cil-hdr__catalogue {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: fit-content; height: 35px;
    padding-block: 9px; padding-inline: 20px;
    border: 1px solid var(--cil-black-light-5);
    border-radius: 22px;
    background: var(--cil-white);
    color: var(--cil-black);
    /* A step below bold: the button is already the only white thing in a dark bar, and does not
       need the heaviest weight as well to be found. */
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif;
    font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0;
    white-space: nowrap; cursor: pointer;
}
.cil-hdr__caret { display: grid; place-items: center; flex: 0 0 auto; }
.cil-hdr__caret svg { display: block; }
/* The same curve and length the search field grows on, so the two things the bar does when it is
   asked for something feel like one hand: a turn that leaves quickly and arrives slowly, rather
   than a mark that was down and is now up with nothing in between. */
.cil-hdr__catalogue .cil-hdr__caret {
    transform: rotate(0deg);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.cil-hdr__catalogue[aria-expanded="true"] .cil-hdr__caret { transform: rotate(180deg); }

/* A turn is decoration on top of a state the caret already states by pointing. Anyone who has
   asked for less movement gets the state without the journey. */
@media (prefers-reduced-motion: reduce) {
    .cil-hdr__catalogue .cil-hdr__caret { transition: none; }
}

/* ===== SEARCH ===== */
/* Absent until the bar shrinks, and it fades rather than moves: the field belongs to the scrolled
   shape, and sliding it in from an edge would read as a second thing happening. */
/* The slot takes whatever the field is currently wide, so the field's own growth moves the layout
   rather than being clipped by a fixed track. */
.cil-hdr__search {
    display: flex; justify-content: center; flex: 0 0 auto; min-width: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
}
.cil-hdr.is-scrolled .cil-hdr__search {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.14s, visibility 0s;
}
.cil-hdr__searchForm {
    display: flex; align-items: center; gap: 10px;
    width: 380px; max-width: 100%; height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--cil-black-regular-9);
    border-radius: 10px;
    background: var(--cil-black-dark-1);
    /* Same easing as the bar's own movements, so the field belongs to this header rather than
       arriving from somewhere else. */
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
/* Typing wants more room than reading does: the field opens to 460 while it holds focus, and
   settles back when it is left. It grows about its own centre, because the slot is centred. */
.cil-hdr__searchForm:focus-within { width: 460px; }
/* The field is the control, so the field is what shows focus: its own edge turns teal. The input
   inside it draws no ring of its own — two rings on one control read as two controls, the inner one
   hugging the words rather than the thing being typed into. Focus is still plainly marked, which is
   what the ring was there for. */
/* A pixel heavier while focused, as well as teal: the field is being written into, and the edge is
   the only thing saying so now that the inner ring is gone. The box does not move — the header
   measures in border-box, so the extra pixel is taken from the inside. */
.cil-hdr__searchForm:focus-within { border-color: var(--cil-blue); border-width: 2px; }
.cil-hdr__searchForm input:focus,
.cil-hdr__searchForm input:focus-visible { outline: none; box-shadow: none; }
/* A real submit control, so it sends the field. Stripped of the theme's button dressing — this one
   is an 18px mark, not a pill — and given the pointer, which is the whole of its answer. */
.cil-hdr__searchIcon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 18px; height: 18px; padding: 0;
    background: none; border: 0;
    color: var(--cil-black-light-10);
    cursor: pointer;
}
.cil-hdr__searchIcon svg { display: block; }
.cil-hdr__searchForm input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--cil-white);
    font-family: 'Assistant', Arial, sans-serif;
    font-weight: 400; font-size: 14px; line-height: 1.2;
}
.cil-hdr__searchForm input::placeholder { color: var(--cil-black-light-10); }

/* ===== WHO YOU ARE ===== */
/* Stretched so the menus hanging off it can measure from the bar's underside rather than from the
   height of the words. Its own contents stay centred. */
/* Stretched so the menus hanging off it can measure from the bar's underside rather than from the
   height of the words, and the anchor both of them are placed against: the design lines their outer
   edges up with the cluster's, not with the control that opens them. Its contents stay centred. */
.cil-hdr__account { position: relative; display: flex; align-items: center; align-self: stretch; gap: 16px; }
/* Stretched to the bar's full height so its menu can hang from the bar's underside rather than from
   the word — which is where the design's 8px gap is measured from. */
.cil-hdr__languages { position: relative; align-self: stretch; display: flex; align-items: center; }
.cil-hdr__language {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 0;
    background: none; border: 0; cursor: pointer;
    color: var(--cil-white);
    /* A step below the catalogue button beside it: this one is a setting, not an invitation. */
    font-family: 'Assistant-Medium', 'Assistant', Arial, sans-serif;
    font-weight: 500; font-size: 14px; line-height: 1.2;
}
.cil-hdr__globe { display: grid; place-items: center; flex: 0 0 auto; }
.cil-hdr__caret--sm svg { width: 14px; height: 14px; }
.cil-hdr__divider { width: 1px; height: 20px; background: var(--cil-black-regular-9); flex: 0 0 auto; }

.cil-hdr__auth { display: flex; align-items: center; gap: 10px; }
.cil-hdr__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 20px;
    border-radius: 22px;
    font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif;
    font-weight: 700; font-size: 14px; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out;
}
/* The outline it already has is the whole effect, and only its colour moves — the same treatment
   the consent modal's decline button uses, at 0.3s to the brand teal. No fill, no second ring. */
.cil-hdr__btn--ghost {
    background: transparent;
    border: 1px solid var(--cil-black-light-6);
    color: var(--cil-white);
    transition: border-color 0.3s ease;
}
.cil-hdr__btn--ghost:hover,
.cil-hdr__btn--ghost:focus-visible { background: transparent; border-color: var(--cil-blue); }
/* The site's own button animation, at the size this bar can carry: four risers behind the label,
   the middle pair leaving first and the outer pair a breath later, so the colour opens from the
   centre outward rather than sweeping across. Same easing and the same 0.05/0.20 delays as the
   landing pages' call to action, because it is the same gesture. */
.cil-hdr__btn--solid {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--cil-blue); border: 1px solid var(--cil-blue-dark-1); color: var(--cil-black);
    transition: color 0.35s ease;
}
.cil-hdr__btnLabel { position: relative; z-index: 1; }
.cil-hdr__btn--solid > span[aria-hidden] {
    position: absolute; bottom: -50%;
    width: 25%; height: 100%;
    background: var(--cil-hdr-login-anim, var(--cil-green));
    border-radius: 50%;
    transform: translateY(150%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1; pointer-events: none; will-change: transform;
}
/* The label is a span too, so these count from two: riser one is the second span in the button.
   Outer pair 0.20, middle pair 0.05 — the fill opens at the centre and reaches the ends last. */
.cil-hdr__btn--solid > span:nth-of-type(2) { left:  0%; transition-delay: 0.20s; }
.cil-hdr__btn--solid > span:nth-of-type(3) { left: 25%; transition-delay: 0.05s; }
.cil-hdr__btn--solid > span:nth-of-type(4) { left: 50%; transition-delay: 0.05s; }
.cil-hdr__btn--solid > span:nth-of-type(5) { left: 75%; transition-delay: 0.20s; }
.cil-hdr__btn--solid:hover > span[aria-hidden],
.cil-hdr__btn--solid:focus-visible > span[aria-hidden] { transform: translateY(-50%) scale(1.6); }

/* ===== THE ONE WHO IS SIGNED IN ===== */
/* Deliberately not the menu's anchor — that is the cluster around it, so the panel lines up with
   the bar's edge rather than with the name. */
.cil-hdr__user { display: flex; align-items: center; }
.cil-hdr__userButton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 0;
    background: none; border: 0; cursor: pointer;
    color: var(--cil-white);
    /* Level with the language switcher: both say who you are and how you read, not what to do. */
    font-family: 'Assistant-Medium', 'Assistant', Arial, sans-serif;
    font-weight: 500; font-size: 14px; line-height: 1.2;
}
.cil-hdr__avatar { display: block; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; }
.cil-hdr__greeting { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    /* The button still fills, it simply does not travel to do it. */
    .cil-hdr__btn--solid > span[aria-hidden] { transition: none; }
    /* The shapes still change; they simply arrive rather than travel. */
    #header.cil-hdr,
    .cil-hdr__brand,
    .cil-hdr__logo img,
    .cil-hdr__partners { transition: none; }
    .cil-hdr__search { transition: visibility 0s; }
    .cil-hdr__searchForm { transition: border-color 0.3s ease; }
}

/* ===== NARROW ===== */

/* The rebuilt bar is the wide one. Below 1079 the legacy pair swaps over — .headerMenusDesktop
   goes and .headerMenusMobile arrives — and header.php renders that mobile bar on every page,
   rebuilt header or not. Without this the two stack, because the rebuilt bar was never told it
   has a width it stops at.

   So it stands down at exactly the width the legacy desktop nav does, and the header goes back to
   the measurements the mobile bar was drawn against. Narrow keeps the header it has until the
   mobile bar is rebuilt in its turn; this is a handover, not a hiding place. */
@media only screen and (max-width: 1079px) {
    .cil-hdr__bar { display: none; }

    #header.cil-hdr {
        min-height: 30px;
        line-height: 40px;
        text-align: center;
    }
}