/* 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. */

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

/* A family named for one weight ('Assistant-Regular') is one face at that weight
   (theme-setup/assistant-font.php), so a rule naming it and asking for 700 asks a browser to embolden
   it, and they 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; }

/* The bar's resting height, published so anything that has to begin where the header ends can read
   it rather than copy the number. The subject banner did copy it, and was left a pixel adrift when
   this bar was rebuilt a pixel shorter — a white line across the seam. The narrow bar overrides
   this in mobile-header.css. Resting, deliberately: the narrow bar shrinks as the page scrolls, and
   what starts below the header has to clear the height the header has when the page is at its top. */
:root { --cil-hdr-height: 64px; }

.cil-hdr__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    height: var(--cil-hdr-height);
    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 ===== */
/* The field itself — its look, and how it opens — is site-header-search.css, loaded after this. */

/* Centred: given a basis of nothing and equal growth the sides match, so the middle lands in the
   bar's centre, and neither side is squashed below what it holds. Worn only when it fits, which
   is a question about this header's own contents rather than a width — site-header.js measures
   and marks the bar. Unmarked, the arrangement is the one the bar has always had. */
.cil-hdr.can-centre .cil-hdr__lead    { flex: 1 1 0; min-width: max-content; }
.cil-hdr.can-centre .cil-hdr__account { flex: 1 1 0; min-width: max-content; justify-content: flex-end; }

/* ===== 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; }
    /* The search field's own is in site-header-search.css. */
}

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