/* FAQ accordion — self-contained component styles.
 *
 * Tokens are scoped to .cilFaq rather than :root. The frontend has no --cil-* layer today, and
 * introducing one would be a site-wide change; scoping them here gives the component a single
 * place to change colour and motion without touching anything else on the page.
 *
 * Logical properties throughout (inline-start/end, padding-inline) so one rule serves RTL and LTR
 * instead of the mirrored pairs the old styles-rtl/styles-ltr blocks had to keep in sync.
 */

.cilFaq {
    --faq-accent: #77ad37;
    /* The accent as words -- the open question, the answers' links, the focus ring: the brand green
       dark enough to read, 5.0:1 on white and 4.7:1 on the hover ground (AAA for the large open
       question; the pale #77ad37 is 2.7:1). */
    --faq-accent-text: var(--cil-green-regular-9, #547A28);
    --faq-open-size: 24px;
    --faq-accent-soft: rgba(119, 173, 55, 0.08);
    --faq-text: #1a1a1a;
    --faq-text-muted: #4a4a4a;
    --faq-rule: #e6e6e6;
    --faq-rule-strong: #c9c9c9;
    --faq-surface: #ffffff;
    --faq-radius: 10px;
    --faq-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --faq-duration: 0.32s;
    --faq-offset: 24px;

    /* The section heading above this group sets margin:0, so without an offset here the first
       question sits flush against the title. The component owns its own separation from whatever
       precedes it rather than relying on the heading's margin. */
    margin-top: var(--faq-offset);
}

.cilFaq__item {
    background: var(--faq-surface);
    border: 1px solid var(--faq-rule);
    border-radius: var(--faq-radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color var(--faq-duration) var(--faq-ease),
                box-shadow var(--faq-duration) var(--faq-ease);
}
.cilFaq__item:hover { border-color: var(--faq-rule-strong); }
.cilFaq__item.is-open {
    border-color: var(--faq-accent);
    box-shadow: 0 2px 14px rgba(26, 26, 26, 0.06);
}

/* The heading carries no visual weight of its own — it exists so the questions form a navigable
   heading list for screen readers. The button inside it owns all the styling. */
.cilFaq__heading { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }

.cilFaq__trigger {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    background: transparent;
    border: 0;
    text-align: start;
    cursor: pointer;
    color: var(--faq-text);
    font-size: 20px;
    line-height: 26px;
    font-family: 'Assistant-Medium', Arial, sans-serif;
    /* The open question grows (below). Its glyphs are drawn at every fractional size on the way --
       hinted, they snap from whole size to whole size and the words shimmy as they grow. */
    text-rendering: geometricPrecision;
    transition: background-color var(--faq-duration) var(--faq-ease),
                color var(--faq-duration) var(--faq-ease),
                font-size var(--faq-duration) var(--faq-ease);
}
/* Open, a wide screen's question grows and takes the accent, as the course page's design has it; a
   phone's keeps its size and colour, the sign and the outline saying which one is open. */
@media (min-width: 768px) {
    .cilFaq__trigger.active { font-size: var(--faq-open-size); font-family: 'Assistant-Bold', Arial, sans-serif; color: var(--faq-accent-text); }
}
/* The old rule set an identical background on :hover, so hovering did nothing at all. */
.cilFaq__trigger:hover { background: var(--faq-accent-soft); }
.cilFaq__trigger:focus-visible {
    outline: 2px solid var(--faq-accent-text);
    outline-offset: -2px;
}
.cilFaq__question { flex: 1; }

/* Icon is drawn in CSS rather than swapped between two SVG files, which is what made the old
   plus/minus change instantly — a background-image swap has nothing to animate. */
/* The sign is its own stacking context, its painting kept inside its box: its stroke turns inside
   it, so the browser's "anything after a turning thing may be under it" guess stays inside the sign
   too. Turning the sign itself instead lifted what comes after it -- the answer opening below --
   onto the GPU for the length of the motion, where its words drew thin and grey (2026-09-30). */
.cilFaq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    isolation: isolate;
    contain: layout paint;
}
/* Centred with physical left, not inset-inline-start. The logical property resolves against text
   direction, which put the two strokes side by side instead of crossed; centring is symmetrical,
   so it must not mirror. */
.cilFaq__icon::before,
.cilFaq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--faq-accent);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease;
}
.cilFaq__icon::before { width: 16px; height: 2px; }
.cilFaq__icon::after  { width: 2px; height: 16px; }

/* Open: the upright stroke turns a quarter and lies down onto the flat one, landing with a small
   bounce, so plus becomes minus in one movement; closing, it turns back up. The sign itself stays
   still, and both strokes change colour together (Oren, 2026-10-08, "twist", picked from six). */
.cilFaq__trigger.active .cilFaq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.cilFaq__panel {
    overflow: hidden;
    transition: height var(--faq-duration) var(--faq-ease);
}
.cilFaq__panel:not(.active) { display: none; }
.cilFaq__panel:focus { outline: none; }

/* The answer holds still while the box grows over it, at full strength from the first frame (Oren,
   2026-09-30). No fade, and no slide: a fade reads as faint words that only firm up at the end, and
   even a few pixels' slide sets the words between whole pixels, where they draw soft and grey until
   they land. */
/* As much white above the answer as below it: the question's hover ground ends at the question, and the
   answer starts a clear step under it rather than against it (Oren, 2026-10-15). */
.cilFaq__answer {
    padding: 18px 20px;
    color: var(--faq-text-muted);
    font-size: 17px;
    line-height: 26px;
}
.cilFaq__answer > *:first-child { margin-top: 0; }
.cilFaq__answer > *:last-child { margin-bottom: 0; }
.cilFaq__answer a { color: var(--faq-accent-text); text-decoration: underline; }

@media (max-width: 767px) {
    .cilFaq { --faq-offset: 16px; }
    .cilFaq__trigger { padding: 14px 16px; font-size: 18px; line-height: 24px; gap: 12px; }
    .cilFaq__answer { padding: 14px 16px; font-size: 15px; line-height: 22px; }
    .cilFaq__icon { width: 18px; height: 18px; }
    .cilFaq__icon::before { width: 14px; }
    .cilFaq__icon::after { height: 14px; }
}

/* ---- cilFaq--teal: the redesigned pages' FAQ (course page Figma 04.7, contact 38-37) ----
   The same behaviour and motion as every FAQ; the look the course page's design gives it, shared so
   each page that asks for it draws the same one (Oren, 2026-10-08: the contact page's questions "like
   the FAQ in the course pages"). The page places it (width, distance from its title). */
.cilFaq--teal {
    /* The design's teal one step darker (Oren, 2026-09-30): 5.2:1 on the hover ground, 5.3:1 on white,
       AAA for the open question and the answers' links, where #318B97 gave 3.8. */
    --faq-accent: var(--cil-blue-regular-9);
    --faq-accent-text: var(--cil-blue-regular-9);
    --faq-accent-soft: var(--cil-blue-light-1);
    --faq-text: var(--cil-black);
    /* The answers in the old FAQ's softer grey (#4A4A4A, 8.6:1), as its nearest brand shade: 8.0:1 on
       white, AAA for the 18px answers (Oren, 2026-09-30). */
    --faq-text-muted: var(--cil-black-regular-9);
    --faq-rule: var(--cil-black-light-4);
    --faq-rule-strong: var(--cil-black-light-6);
    --faq-surface: var(--cil-white);
}
.cilFaq--teal .cilFaq__item:last-child { margin-bottom: 0; }
.cilFaq--teal .cilFaq__trigger {
    align-items: center;
    gap: 16px;
    padding: 23px 31px;
    padding-inline-end: 24px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-black);
    /* The component's own motion (growing, colour), restated past the pages' reset of every button. */
    transition: background-color var(--faq-duration) var(--faq-ease), color var(--faq-duration) var(--faq-ease),
                font-size var(--faq-duration) var(--faq-ease);
}
.cilFaq--teal .cilFaq__trigger:hover { background: var(--faq-accent-soft); }
.cilFaq--teal .cilFaq__trigger.active { font-size: 24px; font-weight: 700; color: var(--faq-accent-text); }
/* The plus and minus: 14px, dark closed, teal open. Two whole pixels: the design's fine 1.17px line
   read too thin (Oren, 2026-10-08), and a fractional width lands on different sub-pixels from row to
   row and draws some signs heavier than others. */
.cilFaq--teal .cilFaq__icon { width: 14px; height: 14px; margin-top: 0; }
.cilFaq--teal .cilFaq__icon::before, .cilFaq--teal .cilFaq__icon::after { background: var(--cil-black); }
.cilFaq--teal .cilFaq__icon::before { width: 14px; height: 2px; }
.cilFaq--teal .cilFaq__icon::after  { width: 2px; height: 14px; }
.cilFaq--teal .cilFaq__trigger.active .cilFaq__icon::before,
.cilFaq--teal .cilFaq__trigger.active .cilFaq__icon::after { background: var(--cil-blue-regular-7); }
.cilFaq--teal .cilFaq__answer {
    padding-block: 28px;
    padding-inline: 31px 40px;
    font-size: 18px;
    line-height: 1.2;
    color: var(--faq-text-muted);
}
@media (max-width: 767px) {
    .cilFaq--teal { --faq-rule: var(--cil-black-light-2); }
    .cilFaq--teal .cilFaq__trigger { gap: 12px; padding: 14px; font-size: 16px; }
    .cilFaq--teal .cilFaq__trigger.active { font-size: 16px; font-weight: 600; color: var(--cil-black); }
    /* The sign in the brand's dark blue, a touch heavier, as the phone draws it. */
    .cilFaq--teal .cilFaq__icon { width: 12px; height: 12px; }
    .cilFaq--teal .cilFaq__icon::before, .cilFaq--teal .cilFaq__trigger.active .cilFaq__icon::before { width: 12px; height: 2px; background: var(--cil-blue-dark-1); }
    .cilFaq--teal .cilFaq__icon::after, .cilFaq--teal .cilFaq__trigger.active .cilFaq__icon::after { width: 2px; height: 12px; background: var(--cil-blue-dark-1); }
    /* The same grey: the design's #606262 is 6.0:1, short of AAA for 14px words. */
    .cilFaq--teal .cilFaq__answer { padding: 14px; font-size: 14px; }
}

/* The old FAQ styles had no reduced-motion handling at all. */
@media (prefers-reduced-motion: reduce) {
    .cilFaq__item,
    .cilFaq__trigger,
    .cilFaq__icon,
    .cilFaq__icon::before,
    .cilFaq__icon::after,
    .cilFaq__panel,
    .cilFaq__answer { transition: none; }
}