/* The anchor menu under the facts card (Figma 03.1, 00.1) and sharing the course from it (00.3,
   05.2, 05.3). Measurements are the design's: on a wide screen a 77px bar over a line the page's width,
   the sections at its start and the actions at its end; narrower, the phone's 56px bar with the
   sections as small words beside the two pills. */

/* Pinned under the site's header once the page scrolls to it, to the end of the page's sections
   (.cil-course-page). anchors.js reads where the header ends -- the narrow header shrinks as the page
   scrolls -- and the page's own ground, so the pinned bar hides what passes under it. */
.cil-course-nav {
    --cd-grey-1: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));   /* Figma's #F6F6F6 */
    position: sticky;
    top: var(--cd-nav-top, var(--cil-hdr-height, 64px));
    z-index: 999;
    margin-top: 33px;
    border-bottom: 1px solid var(--cil-black-light-4);
    background: var(--cd-page-ground, var(--cil-white));
}
.cil-course-nav__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    min-height: 77px;
    margin: 0 auto;
    padding: 0 var(--cd-gutter);
}

/* ---- the sections ---- */
.cil-course-nav__anchors { position: relative; display: flex; gap: clamp(28px, 3.65vw, 70px); min-width: 0; margin: 0; padding: 0; list-style: none; }
.cil-course-nav__anchors li { margin: 0; padding: 0; }
.cil-course .cil-course-nav__anchor {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 56px;
    padding: 2px 16px 0;
    font-size: 24px;
    line-height: 1.2;
    color: var(--cil-black);
    text-decoration: none;
    white-space: nowrap;
}
/* The line under a section: faint under the pointer, full once it is the one being read (00.1). */
.cil-course-nav__anchor::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: var(--cil-blue-dark-1);
    opacity: 0;
    /* The line fades over to the next section read, as the row's sections glide (anchors.js). */
    transition: opacity 0.3s ease, height 0.3s ease;
}
/* A section leaving the row for "עוד", fading where it stood (anchors.js). */
.cil-course-nav__ghost { position: absolute; top: 0; pointer-events: none; }
/* The theme greens every hovered link (a:hover); the menu keeps its own colours. */
.cil-course .cil-course-nav__anchor:is(:hover, :focus, :active) { color: var(--cil-black); text-decoration: none; }
.cil-course .cil-course-nav__anchor:hover { color: var(--cil-blue-dark-1); }
.cil-course-nav__anchor:hover::after { height: 2px; opacity: 0.4; }
.cil-course .cil-course-nav__anchor:active { color: var(--cil-blue-dark-3); }
.cil-course .cil-course-nav__anchor[aria-current] { color: var(--cil-blue-dark-1); }
.cil-course-nav__anchor[aria-current]::after { height: 4px; opacity: 1; }
/* The section read takes its colour in step with the line sliding under it. */
.cil-course .cil-course-nav__anchor { transition: color 0.35s ease; }
/* One line for the section being read, sliding between sections (anchors.js) -- a section's own
   line is then only the faint one under the pointer. Placed without moving the first time. */
.cil-course-nav__indicator { position: absolute; bottom: 0; left: 0; z-index: 1; width: 0; height: 4px; margin: 0; padding: 0; background: var(--cil-blue-dark-1); pointer-events: none; list-style: none; }
.cil-course-nav__indicator::before { content: none; }
.cil-course-nav__indicator.is-placed { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; }
.cil-course-nav.has-indicator .cil-course-nav__anchors .cil-course-nav__anchor[aria-current]::after { opacity: 0; }
.cil-course .cil-course-nav__anchor:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: -2px; border-radius: 0; }

/* The sections the menu jumps to land a little under the pinned header and menu. The pinned
   bar's height already counts the header (anchors.js), so WordPress's admin-bar offset -- 32px of
   scroll padding a signed-in editor's page carries even with the bar hidden -- is taken off here. */
html:has(.cil-course-nav) { scroll-padding-top: 0; }
#cil-course-learn, #cil-course-faq, #cil-course-about, #cil-course-team, #cil-course-podcasts, #cil-course-testimonials,
#cil-course-topics, #cil-course-related, #cil-program-courses { scroll-margin-top: calc(var(--cd-nav-clear, 141px) + 24px); }

/* ---- the actions: registering (pinned), "tell your friends", the syllabus, sharing. As tall as the
   register button, so the pills stay put when it comes in ---- */
.cil-course-nav__actions { display: flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; margin-top: 20px; margin-inline-start: auto; }
.cil-course-nav__prompt { margin-inline-end: 20px; font-size: 14px; font-weight: 600; color: var(--cil-black-regular-3); white-space: nowrap; }

/* 05.1: registration, only while the bar is pinned -- the hero's own button has gone up by then. */
/* The register button itself, and its entrance as the bar pins: nav-register.css. */

.cil-course .cil-course-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--cil-blue-regular-7);
    border-radius: 16px;
    background: var(--cil-white);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-black);
    text-decoration: none;
    white-space: nowrap;
}
.cil-course .cil-course-pill--share { padding-inline-end: 14px; color: var(--cil-blue-dark-1); }
.cil-course .cil-course-pill:is(:hover, :focus, :active) { text-decoration: none; }
/* Hover, press and open (00.3); the border thickens without moving the words. */
.cil-course .cil-course-pill:hover { background: var(--cil-blue-light-1); box-shadow: inset 0 0 0 0.5px var(--cil-blue-regular-7); color: var(--cil-blue-dark-3); }
.cil-course .cil-course-pill:active { background: var(--cil-blue-light-3); border-color: var(--cil-blue-dark-1); box-shadow: inset 0 0 0 0.5px var(--cil-blue-dark-1); color: var(--cil-blue-dark-3); }
.cil-course .cil-course-pill--share[aria-expanded="true"] { background: var(--cil-blue-dark-1); border-color: var(--cil-blue-dark-1); box-shadow: inset 0 0 0 0.5px var(--cil-blue-dark-1); color: var(--cil-white); }
.cil-course .cil-course-pill:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }

/* ---- the share menu (05.2, 05.3) is the site-wide one: share-menu/assets/share-menu.css ---- */

/* ---- "עוד": the sections a desktop row cannot hold, in a list under it (anchors.js) ---- */
.cil-course-nav__more { position: relative; display: flex; flex: none; align-self: flex-end; }
.cil-course-nav__more[hidden] { display: none; }
.cil-course .cil-course-nav__moreButton {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    height: 56px;
    margin: 0;
    padding: 2px 16px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 24px;
    line-height: 1.2;
    color: var(--cil-black);
    white-space: nowrap;
}
.cil-course-nav__moreCaret { width: 14px; height: 14px; margin-top: 0.4em; transition: transform 0.2s ease; }
.cil-course-nav__moreButton[aria-expanded="true"] .cil-course-nav__moreCaret { transform: rotate(180deg); }
.cil-course-nav__moreButton::after { content: ''; position: absolute; inset: auto 0 0; height: 4px; background: var(--cil-blue-dark-1); opacity: 0; }
.cil-course .cil-course-nav__moreButton:hover { background: none; color: var(--cil-blue-dark-1); }
.cil-course-nav__moreButton:hover::after { height: 2px; opacity: 0.4; }
.cil-course .cil-course-nav__moreButton:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: -2px; }
.cil-course .cil-course-nav__moreList {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 6;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--cil-black-light-3);
    border-radius: 12px;
    background: var(--cil-white);
    box-shadow: 0 8px 10px color-mix(in srgb, var(--cil-black-dark-4) 14%, transparent);
    list-style: none;
}
.cil-course .cil-course-nav__moreList[hidden] { display: none; }
.cil-course .cil-course-nav__moreList li { margin: 0; padding: 0; }
.cil-course .cil-course-nav__moreList li::before { content: none; }
.cil-course .cil-course-nav__moreList .cil-course-nav__anchor { height: auto; padding: 10px 14px; border-radius: 8px; font-size: 18px; }
.cil-course .cil-course-nav__moreList .cil-course-nav__anchor:hover { background: var(--cil-blue-light-1); }
.cil-course-nav__moreList .cil-course-nav__anchor::after { display: none; }

/* Sections running on past the strip's edge fade there (anchors.js marks which edge). A gradient runs
   from its transparent side: right to left fades the right edge -- the start in Hebrew, the end in English. */
.cil-course-nav[dir="rtl"] .cil-course-nav__anchors.is-cut-end { -webkit-mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px); mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px); }
.cil-course-nav[dir="rtl"] .cil-course-nav__anchors.is-cut-start { -webkit-mask-image: linear-gradient(to left, transparent, var(--cil-black) 32px); mask-image: linear-gradient(to left, transparent, var(--cil-black) 32px); }
.cil-course-nav[dir="ltr"] .cil-course-nav__anchors.is-cut-end { -webkit-mask-image: linear-gradient(to left, transparent, var(--cil-black) 32px); mask-image: linear-gradient(to left, transparent, var(--cil-black) 32px); }
.cil-course-nav[dir="ltr"] .cil-course-nav__anchors.is-cut-start { -webkit-mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px); mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px); }
.cil-course-nav .cil-course-nav__anchors.is-cut-start.is-cut-end { -webkit-mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px, var(--cil-black) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, var(--cil-black) 32px, var(--cil-black) calc(100% - 32px), transparent); }

/* ---- when the row is full: the design draws four sections and no syllabus at 1920. A narrower
   desktop takes smaller words and closer gaps; where the row still does not fit, anchors.js marks
   the bar tight and "tell your friends" gives way; past that the sections scroll sideways in their
   strip, as the phone's do, the one being read kept in view. ---- */
@media (min-width: 1024px) {
    .cil-course-nav__anchors { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .cil-course-nav__anchors::-webkit-scrollbar { display: none; }
    .cil-course-nav.is-tight .cil-course-nav__prompt { display: none; }
    /* Tight, the sections close up before any of them goes under "עוד". */
    .cil-course-nav.is-tight .cil-course-nav__anchors { gap: min(32px, clamp(8px, 2.5vw - 8px, 40px)); }
    .cil-course-nav.is-tight .cil-course-nav__register { margin-inline-end: 4px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    .cil-course-nav__anchors { gap: clamp(8px, 2.5vw - 8px, 40px); }
    .cil-course .cil-course-nav__anchor,
    .cil-course .cil-course-nav__moreButton { padding-inline: 10px; font-size: 20px; }
    .cil-course .cil-course-nav__moreList .cil-course-nav__anchor { padding-inline: 14px; font-size: 18px; }
}

/* ---- narrower than the desktop row: the phone's bar (Figma 03.1 mobile) ---- */
@media (max-width: 1023px) {
    .cil-course-nav { margin-top: 0; }
    .cil-course-nav__inner { align-items: center; gap: 12px; min-height: 56px; padding: 12px var(--cd-gutter); }
    .cil-course-nav__anchors { flex: 1 1 auto; gap: 20px; overflow-x: auto; scrollbar-width: none; }
    .cil-course-nav__anchors::-webkit-scrollbar { display: none; }
    .cil-course .cil-course-nav__anchor { height: auto; padding: 4px 0; font-size: 14px; font-weight: 600; }
    .cil-course-nav__anchor::after, .cil-course-nav__indicator { display: none; }
    .cil-course .cil-course-nav__anchor:focus-visible { outline-offset: 2px; }
    .cil-course-nav__actions { align-self: center; min-height: 0; margin-top: 0; }
    .cil-course-nav__prompt { display: none; }
    /* The phone's register button: nav-register.css. */
}

/* A narrow phone, pinned with registering in the row: the syllabus keeps only its download mark, and
   on the narrowest sharing only its own -- so the sections keep a strip to scroll in. */
@media (max-width: 419px) {
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) ~ .cil-course-pill--syllabus :is(span, .cil-course-pill__file) { display: none; }
}
@media (max-width: 359px) {
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) ~ .cil-share .cil-course-pill--share { padding-inline: 10px; }
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) ~ .cil-share .cil-course-pill--share span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course-nav__moreCaret, .cil-course-nav__anchor::after,
    .cil-course .cil-course-nav__anchor, .cil-course-nav__indicator.is-placed { transition: none; }
}