/* The catalogue's pages (Figma 38-24, 2256-25) -- what every one of them shares: the width, the
   header with its trail and yellow mark, the pill search, section heads, buttons and chips.
   Logical properties throughout: Hebrew and Arabic read from the right, English and Russian from
   the left, and the same rules serve both. Colours are the brand's tokens (design-system/palette.css). */

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

.cil-ctl {
    display: block;
    /* Below the fixed header, by its own height. */
    margin-top: var(--cil-hdr-height, 64px);
    padding-bottom: 120px;
    background: var(--cil-white);
    color: var(--cil-black);
    font-family: 'Assistant', 'Assistant-Regular', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.2;
}
.cil-ctl a { text-decoration: none; }

/* 1420 wide on a wide screen, as the design's grid; 16 from the edge on a phone. */
.cil-ctl-wrap { width: 100%; max-width: calc(1420px + 48px); margin-inline: auto; padding-inline: 24px; }

/* A mark pointing along the line of reading turns round on a left-to-right page. */
.cil-ctl-forward { display: inline-flex; }
.lang-to-css-ltr .cil-ctl-forward { transform: scaleX(-1); }
.cil-ctl svg { display: block; flex: none; }

/* ---- The page's header ---- */
.cil-ctl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 40px 32px; }

.cil-ctl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* No padding: the theme gives every `ol > li` 12px below, which pushed the title 12px under the design's. */
.cil-ctl-crumbs li { display: flex; align-items: center; gap: 6px; padding: 0; color: var(--cil-black-regular-7); font-size: 14px; }
.cil-ctl-crumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--cil-blue-dark-1); }
.cil-ctl-crumbs a:hover { text-decoration: underline; }

/* The title with its yellow mark at the start of the line. */
.cil-ctl-title,
.cil-ctl-sectionHead__title {
    display: flex; align-items: center; gap: 14px;
    margin: 0;
    color: var(--cil-black);
    font-size: 48px; font-weight: 700; line-height: 1.2;
}
.cil-ctl-title::before,
.cil-ctl-sectionHead__title::before {
    content: ''; flex: none;
    width: 4px; height: 46px; border-radius: 2px;
    background: var(--cil-yellow);
}
.cil-ctl-intro { max-width: 900px; margin: 0; color: var(--cil-black-regular-7); font-size: 18px; }
.cil-ctl-facts { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; }

/* The catalogue's own search: a pill with its button inside. */
.cil-ctl-pillSearch {
    display: flex; align-items: center; gap: 10px;
    width: 700px; max-width: 100%; height: 56px; margin-top: 10px;
    padding-inline: 20px 6px;
    background: var(--cil-white);
    border: 1px solid var(--cil-black-light-4);
    border-radius: 28px;
}
/* A search field's "×" is ours (search-clear.php), as the admin draws its clear buttons: round, quiet,
   red when pointed at. The browser's own is hidden. */
.cil-ctl input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cil-ctl-clear {
    display: inline-grid; place-items: center; flex: none;
    width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--cil-black-regular-7);
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.cil-ctl-clear[hidden] { display: none; }
.cil-ctl-clear:hover, .cil-ctl-clear:focus-visible { background: var(--cil-red-light-2); color: var(--cil-red-dark-1); }

/* One ring around the whole field while its words are being typed -- never a second one on the input
   inside it (the page's own focus ring, below, would draw that). */
.cil-ctl-pillSearch:focus-within { border-color: var(--cil-blue-dark-1); box-shadow: 0 0 0 1px var(--cil-blue-dark-1); }
.cil-ctl .cil-ctl-pillSearch input:focus-visible { outline: none; }
.cil-ctl-pillSearch__mark { display: inline-flex; color: var(--cil-black-regular-6); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.cil-ctl-pillSearch input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; background: none; outline: none;
    color: var(--cil-black); font: inherit; font-size: 16px;
}
.cil-ctl-pillSearch input::placeholder { color: var(--cil-black-regular-6); opacity: 1; }
/* Its word centred both ways: the theme gives every <button> its own padding and line height. */
.cil-ctl-pillSearch__go {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    height: 44px; padding: 0 22px;
    border: 0; border-radius: 22px;
    background: var(--cil-blue-dark-1); color: var(--cil-white);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    cursor: pointer;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .2s ease;
}
/* The house search motion (the error pages' and the home hero's "ring"): the button swells and
   settles, the field's magnifier tips as if aimed, and a ring leaves the button's edge and fades,
   again and again while the pointer rests there. */
.cil-ctl-pillSearch__go::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    border: 2px solid var(--cil-blue-dark-1); opacity: 0; pointer-events: none;
}
.cil-ctl-pillSearch__go:hover, .cil-ctl-pillSearch__go:focus-visible { background: var(--cil-blue-dark-2); transform: scale(1.06); }
.cil-ctl-pillSearch__go:hover::after, .cil-ctl-pillSearch__go:focus-visible::after { animation: cil-ctl-search-ping 1.4s cubic-bezier(.22, 1, .36, 1) infinite; }
.cil-ctl-pillSearch__go:active { transform: scale(.96); }
.cil-ctl-pillSearch:has(.cil-ctl-pillSearch__go:hover) .cil-ctl-pillSearch__mark,
.cil-ctl-pillSearch:has(.cil-ctl-pillSearch__go:focus-visible) .cil-ctl-pillSearch__mark { transform: rotate(-10deg) scale(1.06); }
@keyframes cil-ctl-search-ping {
    0%   { inset: 0;     opacity: .55; }
    70%  { inset: -10px; opacity: 0; }
    100% { inset: -10px; opacity: 0; }
}

/* ---- Sections ---- */
.cil-ctl-section { display: flex; flex-direction: column; gap: 24px; margin-top: 96px; }
.cil-ctl-sectionHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.cil-ctl-sectionHead__words { display: flex; flex-direction: column; gap: 8px; }
.cil-ctl-sectionHead__title { font-size: 40px; }
.cil-ctl-sectionHead__title::before { height: 36px; }
.cil-ctl-sectionHead__text { margin: 0; color: var(--cil-black-regular-7); font-size: 18px; }
/* As tall as the title's line, so the link sits level with the title. */
.cil-ctl-sectionHead__link {
    display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 48px;
    color: var(--cil-blue-dark-1); font-size: 14px; font-weight: 600;
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
    transition: text-decoration-color .25s ease;
}
/* Pointed at, its colour holds (the theme would turn it green), an underline fades in under it and
   its chevron steps forward (below). */
.cil-ctl a.cil-ctl-sectionHead__link:hover, .cil-ctl a.cil-ctl-sectionHead__link:focus-visible {
    color: var(--cil-blue-dark-1); text-decoration: underline; text-decoration-color: currentColor;
}

/* Links whose words are drawn by what is inside them: pointed at, the theme's green does not reach them. */
.cil-ctl :is(.cil-ctl-mosaic__tile, .cil-ctl-catBlock__photo):is(:hover, :focus-visible) { color: inherit; }

/* Every link that ends in a chevron -- a section's "all of it", a subject chip, a subject's tile:
   pointed at, the chevron steps forward (left on a Hebrew page), the chevron itself unchanged. */
.cil-ctl :is(.cil-ctl-sectionHead__link, .cil-ctl-topic, .cil-ctl-subjectTile) .cil-ctl-forward { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.cil-ctl :is(.cil-ctl-sectionHead__link, .cil-ctl-topic, .cil-ctl-subjectTile):is(:hover, :focus-visible) .cil-ctl-forward { transform: translateX(-3px); }
.lang-to-css-ltr .cil-ctl :is(.cil-ctl-sectionHead__link, .cil-ctl-topic, .cil-ctl-subjectTile):is(:hover, :focus-visible) .cil-ctl-forward { transform: scaleX(-1) translateX(-3px); }

/* ---- Buttons ---- */
.cil-ctl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; padding-inline: 24px;
    border: 1px solid var(--cil-black); border-radius: 24px;
    background: var(--cil-white); color: var(--cil-black);
    font: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.cil-ctl-btn:hover { background: var(--cil-black-light-2); }
.cil-ctl-btn--primary { background: var(--cil-blue); border-color: var(--cil-blue-dark-1); color: var(--cil-black); }
.cil-ctl-btn--primary:hover { background: var(--cil-blue-light-10); }
.cil-ctl-btn--quiet { border-color: transparent; background: none; }
.cil-ctl a.cil-ctl-btn:hover { color: var(--cil-black); }

/* ---- Chips ---- */
.cil-ctl-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cil-ctl-chip {
    display: inline-flex; align-items: center;
    height: 35px; padding-inline: 18px;
    border: 1px solid var(--cil-black-light-3); border-radius: 20px;
    background: var(--cil-white); color: var(--cil-black);
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.cil-ctl-chip:hover { border-color: var(--cil-blue-dark-1); color: var(--cil-blue-dark-1); }
.cil-ctl-chip.is-current, .cil-ctl-chip.is-current:hover { border-color: var(--cil-blue-dark-1); background: var(--cil-blue-dark-1); color: var(--cil-white); font-weight: 700; }
/* A chip is as wide as its words in bold, chosen or not, so the row never shifts when the choice moves
   (the bold copy holds the width and is never seen). */
.cil-ctl-chips li { flex: none; }   /* a phone's scrolling row must not squeeze them below it */
.cil-ctl-chip__label { display: inline-grid; }
.cil-ctl-chip__label::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }

/* Focus: one ring for every control the catalogue draws. */
.cil-ctl a:focus-visible, .cil-ctl button:focus-visible, .cil-ctl summary:focus-visible,
.cil-ctl input:focus-visible, .cil-ctl select:focus-visible {
    outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px;
}

@media (max-width: 1079px) {
    .cil-ctl { padding-bottom: 64px; }
    .cil-ctl-wrap { padding-inline: 16px; }
    .cil-ctl-head { gap: 10px; padding-block: 20px; }
    .cil-ctl-title { font-size: 24px; gap: 10px; }
    .cil-ctl-title::before { height: 28px; }
    .cil-ctl-intro { font-size: 14px; }
    .cil-ctl-crumbs li:first-child svg { display: none; }
    .cil-ctl-pillSearch { height: 48px; padding-inline: 14px; border-radius: 8px; border-color: var(--cil-black-regular-5); background: var(--cil-white-light-2); }
    .cil-ctl-pillSearch__go { display: none; }
    .cil-ctl-section { margin-top: 48px; gap: 16px; }
    .cil-ctl-sectionHead__link { min-height: 29px; }
    .cil-ctl-sectionHead__title { font-size: 24px; gap: 10px; }
    .cil-ctl-sectionHead__title::before { height: 24px; }
    .cil-ctl-sectionHead__text { font-size: 16px; }
    .cil-ctl-chips { margin-inline: -16px; }
    /* Room above and below for a chosen chip's swell (chip-swell.js), which a scrolling row would cut off. */
    .cil-ctl-chips ul { flex-wrap: nowrap; overflow-x: auto; padding: 3px 16px; margin-block: -3px; scrollbar-width: none; }
}

/* Moving to another catalogue page by a link (the trail, another category) is animated where the browser
   can: the title crossfades and the list leaves and arrives (cross-document view transitions; a browser
   without them simply opens the page). The chips -- all, certificate, credit, programmes, a category's
   subjects -- change the page in place instead (results.js, chip-swell.js), in every browser. */
@view-transition { navigation: auto; }
.cil-ctl-head .cil-ctl-title { view-transition-name: cil-ctl-title; }
.cil-ctl-results { view-transition-name: cil-ctl-results; }
::view-transition-old(cil-ctl-results) { animation: cil-ctl-list-out .16s ease-in both; }
::view-transition-new(cil-ctl-results) { animation: cil-ctl-list-in .34s cubic-bezier(.2, .8, .2, 1) .06s both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes cil-ctl-list-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes cil-ctl-list-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .cil-ctl * { transition: none !important; scroll-behavior: auto !important; }
    /* The search button still deepens its colour; nothing swells, tips or repeats. */
    .cil-ctl-pillSearch__go:hover, .cil-ctl-pillSearch__go:focus-visible, .cil-ctl-pillSearch__go:active { transform: none; }
    .cil-ctl-pillSearch__go:hover::after, .cil-ctl-pillSearch__go:focus-visible::after { animation: none; }
    .cil-ctl-pillSearch:has(.cil-ctl-pillSearch__go:hover) .cil-ctl-pillSearch__mark { transform: none; }
    .cil-ctl-subjects.is-tabbed .cil-ctl-tabs__panel:not([hidden]) { animation: none; }
}