/* The contact page (Figma 38-37): one card holding the topics beside their answers, the form under
   them, and the aside with the ways to reach the team. The page's header is the
   catalogue's (catalogue-pages/assets/page.css). Logical properties and the brand's tokens. */

.cil-contact *, .cil-contact *::before, .cil-contact *::after { box-sizing: border-box; }
.cil-contact__body { padding-block: 16px 96px; }
.cil-contact__panel {
    display: flex; align-items: stretch; gap: 48px; padding: 40px;
    border: 1px solid var(--cil-black-light-3); border-radius: 24px; background: var(--cil-white);
}
.cil-contact__main { flex: 1; display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.cil-contact__section { display: flex; flex-direction: column; gap: 20px; }
.cil-contact__section[hidden] { display: none; }
.cil-contact .cil-contact__title { font-size: 32px; }
.cil-contact .cil-contact__title::before { height: 30px; }
.cil-contact__titleShort { display: none; }
/* The form's heading left empty on the screen is not drawn (contact.js): the full one wide, the short one on phones. */
@media (min-width: 641px) { .cil-contact .cil-contact__title.is-blank-full { display: none; } }
@media (max-width: 640px) { .cil-contact .cil-contact__title.is-blank-short { display: none; } }
.cil-contact__anchor { scroll-margin-top: 88px; }
.cil-contact__anchor:focus { outline: none; }

/* Links in the page's words: underlined, the caret stepping on when pointed at. */
.cil-contact__notListed { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; }
.cil-contact .cil-contact__notListed a,
.cil-contact .cil-contact__more,
.cil-contact .cil-contact-form__privacy a {
    color: var(--cil-blue-dark-1); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.cil-contact .cil-contact__more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 14px; }
.cil-contact .cil-contact__more .cil-ctl-forward { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.cil-contact .cil-contact__more:is(:hover, :focus-visible) .cil-ctl-forward { transform: translateX(-3px); }
.lang-to-css-ltr .cil-contact .cil-contact__more:is(:hover, :focus-visible) .cil-ctl-forward { transform: scaleX(-1) translateX(-3px); }
.cil-contact :is(.cil-contact__notListed a, .cil-contact__more, .cil-contact-form__privacy a):is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); text-decoration-thickness: 2px; }

/* ---- The topics beside their answers: the most asked until a topic is chosen ---- */
.cil-contact-help { display: flex; align-items: flex-start; gap: 32px; }
.cil-contact-help__answers { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cil-contact-help__answers:focus { outline: none; }
.cil-contact-help__nav { flex: none; display: flex; flex-direction: column; gap: 16px; width: 320px; }
.cil-contact-help__navTitle { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; font-weight: 600; }
.cil-contact-topics { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cil-contact .cil-contact-topic {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
    color: var(--cil-black); text-decoration: none; transition: background-color .25s ease;
}
.cil-contact .cil-contact-topic:is(:hover, :focus-visible) { color: var(--cil-black); text-decoration: none; }
.cil-contact .cil-contact-topic:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-contact-topic__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cil-blue-light-1); transition: background-color .25s ease; }
.cil-contact-topic__name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.2; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.cil-contact-topic__count { flex: none; color: var(--cil-black-regular-7); font-size: 14px; font-variant-numeric: tabular-nums; direction: ltr; }
/* Pointed at, the name steps the way the page reads. */
.cil-contact .cil-contact-topic:hover .cil-contact-topic__name { transform: translateX(-3px); }
.lang-to-css-ltr .cil-contact .cil-contact-topic:hover .cil-contact-topic__name { transform: translateX(3px); }
.cil-contact .cil-contact-topic.is-current { background: var(--cil-blue-light-1); }
.cil-contact .cil-contact-topic.is-current .cil-contact-topic__name { color: var(--cil-blue-dark-1); font-weight: 700; }
.cil-contact .cil-contact-topic.is-current .cil-contact-topic__icon { background: var(--cil-white); }
.cil-contact-help__nav .cil-contact__notListed { padding-top: 24px; }

/* ---- The answers shown ---- */
.cil-contact-answers { display: flex; flex-direction: column; gap: 16px; }
.cil-contact-answers[hidden] { display: none; }
.cil-contact-answers.is-entering { animation: cil-contact-answers-in .35s cubic-bezier(.4, 0, .2, 1); }
@keyframes cil-contact-answers-in { from { opacity: 0; transform: translateY(8px); } }
/* The answers' heading reads at the size of the aside's "אפשר גם לפנות ישירות" (Oren 2026-10-15): its type is
   the aside title's own rule (below, and its narrow-screen step), its mark the topics list's 32px disc. */
.cil-contact-answers__title { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--cil-black); }
.cil-contact-answers__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cil-blue-light-1); }
/* A mark from the whole library (contact-page/topics.php cil_contact_topic_mark) is inline, in the files' ink. */
.cil-contact-topic__icon, .cil-contact-answers__icon { color: var(--cil-blue-dark-1); }
/* The questions: the site's FAQ in its teal look (cilFaq--teal, css/faq-accordion.css), as on the
   course page; here it only sits right under its title, the column's gap apart. */
.cil-contact-answers .cilFaq { --faq-offset: 0px; }

/* ---- The form ---- */
.cil-contact-card { padding: 32px; border: 1px solid var(--cil-black-light-3); border-radius: 16px; background: var(--cil-white); }
.cil-contact-form { display: flex; flex-direction: column; gap: 24px; }
.cil-contact-form[hidden] { display: none; }
.cil-contact-form__intro { margin: 0; color: var(--cil-black-regular-7); font-size: 16px; }
.cil-contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.cil-contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cil-contact-field--wide { grid-column: 1 / -1; }
.cil-contact-field__label { display: flex; gap: 4px; color: var(--cil-black); font-size: 16px; font-weight: 600; }
.cil-contact-form__star { color: var(--cil-red-regular-5); font-weight: 700; }
.cil-contact .cil-contact-field__control {
    width: 100%; height: 52px; margin: 0; padding: 14px 20px;
    border: 1px solid var(--cil-black-light-6); border-radius: 10px; background: var(--cil-white);
    color: var(--cil-black); font: inherit; font-size: 16px; line-height: 1.2; box-shadow: none;
}
.cil-contact textarea.cil-contact-field__control { height: 160px; resize: vertical; }
.cil-contact .cil-contact-field__control::placeholder { color: var(--cil-black-regular-3); opacity: 1; }
/* The address and the phone are typed left to right, but sit at the field's start like every other
   field -- right on a Hebrew or Arabic page, their prompt too (Figma 38-37: "05X-XXXXXXX" on the right). */
.lang-to-css-rtl .cil-contact .cil-contact-field__control[dir="ltr"] { text-align: right; }
.lang-to-css-rtl .cil-contact .cil-contact-field__control[dir="ltr"]:placeholder-shown { direction: rtl; }
.cil-contact .cil-contact-field__control:hover { border-color: var(--cil-black-regular-5); }
.cil-contact .cil-contact-field__control:focus { border-color: var(--cil-blue-dark-1); outline: 2px solid var(--cil-blue-dark-1); outline-offset: 0; }
.cil-contact .cil-contact-field__control[aria-invalid="true"] { border: 2px solid var(--cil-red-regular-5); }
/* Figma 38-37 "Validation errors": the message in the brand red, Caption Accent (14px semibold). */
/* A message and its examples come on lines of their own (form.php), so an example never breaks. */
.cil-contact .cil-contact-field__error { margin: 0; color: var(--cil-red-regular-5); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: pre-line; }

/* The subject: the site's listbox (design-system/select.css) in the fields' own dress -- the same box,
   the caret at the end, the prompt in the placeholder's grey until a subject is chosen. select.css is
   written against the admin's tokens; these are the ones it needs, from the site's palette. */
.cil-contact-field__select {
    --cil-surface-1: var(--cil-white); --cil-border: var(--cil-black-light-5); --cil-text: var(--cil-black);
    --cil-text-soft: var(--cil-black-regular-7); --cil-blue-soft: var(--cil-blue-light-1); --cil-blue-dark: var(--cil-blue-dark-3);
    --cil-blue: var(--cil-blue-dark-1); --cil-radius-sm: 8px; --cil-radius-md: 12px;
    display: block; width: 100%;
}
.cil-contact .cil-contact-field__select .cil-select__button {
    display: flex; align-items: center; min-width: 0; padding-inline-end: 52px; border-radius: 10px;
    font-weight: 400; text-align: start; cursor: pointer; transition: border-color .18s ease;
}
.cil-contact .cil-contact-field__select .cil-select__button:is(:hover, :focus, :active) { background: var(--cil-white); color: var(--cil-black); box-shadow: none; }
.cil-contact .cil-contact-field__select .cil-select__button:hover { border-color: var(--cil-black-regular-5); }
.cil-contact .cil-contact-field__select .cil-select__button:focus-visible,
.cil-contact .cil-contact-field__select.is-open .cil-select__button { border-color: var(--cil-blue-dark-1); outline: 2px solid var(--cil-blue-dark-1); outline-offset: 0; color: var(--cil-black); }
.cil-contact .cil-contact-field__select .cil-select__button[aria-invalid="true"] { border: 2px solid var(--cil-red-regular-5); }
.cil-contact-field__select.is-empty .cil-select__label { color: var(--cil-black-regular-3); }
.cil-contact-field__select .cil-toolbar__chevron { inset-inline-end: 20px; color: var(--cil-black); }
.cil-contact-field__select .cil-select__menu { font-size: 16px; }
.cil-contact-field__select .cil-select__menu li { font-size: 16px; padding: 11px 14px; }
/* Numbers read left to right in every language, at the field's far end (Figma: "0 / 1,000"). */
.cil-contact-field__count { align-self: flex-end; margin: 0; color: var(--cil-black-regular-7); font-size: 14px; direction: ltr; }

.cil-contact-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid; border-radius: 16px; line-height: 1.2; }
.cil-contact-alert[hidden] { display: none; }
.cil-contact-alert:focus { outline: none; }
.cil-contact-alert__icon { flex: none; }
.cil-contact-alert--error { border-color: var(--cil-red-light-7); background: var(--cil-red-light-1); color: var(--cil-red-regular-5); }
.cil-contact-alert--done { border-color: var(--cil-green-light-7); background: var(--cil-green-light-1); color: var(--cil-green-regular-10); }
.cil-contact-alert__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.cil-contact-alert__text { margin: 0; color: var(--cil-black); font-size: 14px; }

.cil-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cil-contact-form__submit {
    display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 48px; padding-inline: 32px;
    border: 1px solid var(--cil-blue-dark-1); border-radius: 24px; background: var(--cil-blue);
    color: var(--cil-black); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: box-shadow .2s ease;
}
/* Pointed at, a ring draws round it; the colour stays (pinned against the theme's green). */
.cil-contact .cil-contact-form__submit:is(:hover, :focus-visible, :active) { background: var(--cil-blue); color: var(--cil-black); box-shadow: 0 0 0 3px var(--cil-blue-light-5); outline: none; }
.cil-contact .cil-contact-form__submit:disabled { border-color: var(--cil-black-light-6); background: var(--cil-black-light-3); color: var(--cil-black-regular-7); box-shadow: none; cursor: progress; }
/* Sending: "הפנייה נשלחת" and its dots counting . .. ... and again, each dot's room kept (contact.js). */
.cil-contact-form__dots { display: inline-flex; }
.cil-contact-form__dots > span:nth-child(2) { animation: cil-contact-dot-2 1.2s steps(1, end) infinite; }
.cil-contact-form__dots > span:nth-child(3) { animation: cil-contact-dot-3 1.2s steps(1, end) infinite; }
@keyframes cil-contact-dot-2 { 0% { opacity: 0; } 33.333% { opacity: 1; } }
@keyframes cil-contact-dot-3 { 0% { opacity: 0; } 66.667% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cil-contact-form__dots > span { animation: none; } }
.cil-contact-form__privacy { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; }

.cil-contact-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cil-contact-sent[hidden] { display: none; }
.cil-contact-sent .cil-contact-alert { align-self: stretch; }

/* ---- The aside: past a rule at the card's far side ---- */
.cil-contact-aside { flex: none; width: 401px; padding-top: 8px; padding-inline-start: 40px; border-inline-start: 1px solid var(--cil-black-light-3); }
.cil-contact-aside__title { margin: 0 0 12px; color: var(--cil-black); }
.cil-contact-aside__title, .cil-contact-answers__title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.cil-contact-channels { margin: 0; padding: 0; list-style: none; }
.cil-contact-channel { display: flex; align-items: flex-start; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--cil-black-light-3); }
.cil-contact-channel__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cil-blue-light-1); }
.cil-contact-channel__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cil-contact-channel__words p { margin: 0; }
.cil-contact-channel__label { margin: 0; color: var(--cil-black-regular-7); font-size: 14px; font-weight: 600; }
.cil-contact .cil-contact-channel__phone { align-self: flex-start; color: var(--cil-black); font-size: 24px; font-weight: 700; text-decoration: none; }
.cil-contact .cil-contact-channel__email { align-self: flex-start; color: var(--cil-blue-dark-1); font-size: 16px; font-weight: 600; text-decoration: none; }
.cil-contact :is(.cil-contact-channel__phone, .cil-contact-channel__email):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
.cil-contact .cil-contact-channel__phone:is(:hover, :focus-visible) { color: var(--cil-black); }
.cil-contact .cil-contact-channel__email:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); }
.cil-contact-channel__note { color: var(--cil-black-regular-7); font-size: 14px; }
.cil-contact-channel__line { color: var(--cil-black); font-size: 16px; }
/* The footer's social row (footer-component/assets/footer.css): its discs and the platforms' own colours
   on hover come from design-system/brand-colours.css, so they need nothing set here. */
.cil-contact-social {
    display: flex; flex-direction: column; gap: 12px; padding-block: 20px; border-bottom: 1px solid var(--cil-black-light-3);
}
.cil-contact-aside__faq { margin-top: 20px; }

/* ---- Narrower screens: the card opens up, the aside its own grey card under the form ---- */
@media (max-width: 1079px) {
    .cil-contact__body { padding-bottom: 64px; }
    .cil-contact__panel { flex-direction: column; gap: 40px; padding: 0; border: 0; border-radius: 0; background: none; }
    /* The topics a row of chips over the answers; the way to a message on no topic under them. */
    .cil-contact-help { flex-direction: column; gap: 24px; }
    .cil-contact-help__nav { display: contents; }
    .cil-contact-help__navTitle { display: none; }
    .cil-contact-topics { order: -1; flex-direction: row; gap: 8px; width: 100%; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
    .cil-contact-topics::-webkit-scrollbar { display: none; }
    .cil-contact-topics li { flex: none; }
    .cil-contact-topic__icon, .cil-contact-topic__count { display: none; }
    .cil-contact .cil-contact-topic { padding: 8px 16px; border: 1px solid var(--cil-black-light-6); border-radius: 999px; }
    .cil-contact .cil-contact-topic.is-current { border-color: var(--cil-blue-dark-1); }
    .cil-contact-topic__name { font-size: 14px; white-space: nowrap; }
    .cil-contact .cil-contact-topic:hover .cil-contact-topic__name { transform: none; }
    .cil-contact-help__answers { width: 100%; }
    .cil-contact-help__nav .cil-contact__notListed { order: 1; padding-top: 0; }
    /* Figma's grey here is #F6F6F6 ("Black - Light 1"), which our palette's black-light-1 (#E7EBEF) is not;
       half light-2, half white lands on it from the tokens. */
    .cil-contact-aside { width: 100%; padding: 24px 20px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--cil-black-light-2) 50%, var(--cil-white)); }
    .cil-contact-aside__title, .cil-contact-answers__title { font-size: 20px; }
    .cil-contact-channels:last-child .cil-contact-channel:last-child, .cil-contact-social:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
    .cil-contact__main { gap: 40px; }
    .cil-contact .cil-contact__title { font-size: 24px; }
    .cil-contact .cil-contact__title::before { height: 24px; }
    .cil-contact__titleFull { display: none; }
    .cil-contact__titleShort { display: inline; }
    .cil-contact-card { padding: 20px 16px; }
    .cil-contact-form__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cil-contact-form__actions { flex-direction: column; align-items: stretch; }
    .cil-contact-form__submit { width: 100%; }
    .cil-contact .cil-contact-channel__phone { font-size: 18px; }
    /* The phone's footer carries the same links right after (Figma 38-37 b). */
    .cil-contact-social { display: none; }
    .cil-contact-channels:not(:has(~ .cil-contact-aside__faq)) .cil-contact-channel:last-child { border-bottom: 0; }
    .cil-contact__body { padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-contact .cil-contact-topic, .cil-contact-topic__icon, .cil-contact-topic__name,
    .cil-contact-form__submit, .cil-contact__more .cil-ctl-forward { transition: none; }
    .cil-contact-answers.is-entering { animation: none; }
}