/* =========================================================================
   Neda eCampus - front page: recent courses, featured courses, FAQ
   Follows the house rules: Candara only, cards have NO border and stand out
   by elevation, 10px corners, and the section bands use the same two colours
   the rest of the front page alternates.
   ========================================================================= */

.neda-fc {
    --nfc-cyan:   #0EC4C5;
    --nfc-lime:   #C4C40E;
    --nfc-cherry: #D7263D;
    --nfc-black:  #000000;
    --nfc-white:  #FFFFFF;

    --nfc-tint:   var(--wp--preset--color--custom-color-3, #F8F9EA);
    --nfc-cyan-tint: var(--wp--preset--color--custom-color-1, #ECF9F8);

    --nfc-radius: 10px;
    --nfc-gutter: clamp(30px, 5vw, 50px);
    --nfc-wide:   var(--wp--style--global--wide-size, 1200px);

    --nfc-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
    --nfc-shadow-up: 0 14px 34px rgba(0, 0, 0, 0.16);
    --nfc-ease: 0.2s ease;

    box-sizing: border-box;
    padding-block: clamp(48px, 6vw, 84px);
    padding-inline: var(--nfc-gutter);
    color: var(--nfc-black);
}

.neda-fc *,
.neda-fc *::before,
.neda-fc *::after { box-sizing: inherit; }

.neda-fc--plain { background-color: var(--nfc-white); }
.neda-fc--tint  { background-color: var(--nfc-tint); }

.neda-fc__inner {
    max-width: var(--nfc-wide);
    margin-inline: auto;
}

.neda-fc__title {
    margin: 0 0 8px;
}

.neda-fc__lede {
    margin: 0 0 28px;
    color: rgba(0, 0, 0, 0.72);
}

/* ---- Course grid --------------------------------------------------- */

.neda-fc__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* No border. Surface plus elevation, lifting on hover - the same treatment
   the ecosystem cards use, so the page reads as one system. */
.neda-fc-card {
    background: var(--nfc-white);
    border: 0;
    border-radius: var(--nfc-radius);
    box-shadow: var(--nfc-shadow);
    overflow: hidden;
    transition: transform var(--nfc-ease), box-shadow var(--nfc-ease);
}

.neda-fc-card:hover,
.neda-fc-card:focus-within {
    transform: scale(1.03);
    box-shadow: var(--nfc-shadow-up);
}

.neda-fc-card__link {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.neda-fc-card__link:focus-visible {
    outline: 3px solid var(--nfc-cherry);
    outline-offset: -3px;
}

.neda-fc-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--nfc-cyan-tint);
}

.neda-fc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.neda-fc-card__media-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--nfc-cyan-tint);
}

.neda-fc-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
}

/* The type is plain black text with a colour swatch - never coloured text,
   never a filled pill. */
.neda-fc-card__type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
}

.neda-fc-card__swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--neda-type-colour, var(--nfc-cyan));
}

.neda-fc-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.neda-fc-card__price {
    margin-top: auto;
    padding-top: 6px;
    font-weight: 700;
}

/* ---- Empty state --------------------------------------------------- */

.neda-fc-empty {
    background: var(--nfc-white);
    border-radius: var(--nfc-radius);
    box-shadow: var(--nfc-shadow);
    padding: 24px 26px;
}

.neda-fc--plain .neda-fc-empty { background: var(--nfc-cyan-tint); box-shadow: none; }

.neda-fc-empty__text { margin: 0 0 16px; }

.neda-fc-empty__types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.neda-fc-empty__types a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nfc-black);
    font-weight: 700;
    text-decoration: none;
}

.neda-fc-empty__types a:hover,
.neda-fc-empty__types a:focus-visible { color: var(--nfc-cherry); }

/* ---- FAQ ----------------------------------------------------------- */

.neda-fc__faq {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.neda-fc__faq-item {
    background: var(--nfc-white);
    border: 0;
    border-radius: var(--nfc-radius);
    box-shadow: var(--nfc-shadow);
    padding: 2px 20px;
    transition: box-shadow var(--nfc-ease);
}

.neda-fc__faq-item:hover,
.neda-fc__faq-item[open] { box-shadow: var(--nfc-shadow-up); }

.neda-fc__faq-q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.neda-fc__faq-q::-webkit-details-marker { display: none; }

.neda-fc__faq-q:focus-visible {
    outline: 3px solid var(--nfc-cherry);
    outline-offset: 2px;
    border-radius: var(--nfc-radius);
}

/* Black on cyan is 9:1. */
.neda-fc__faq-n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--nfc-radius);
    background: var(--nfc-cyan);
    color: var(--nfc-black);
    font-size: 0.9rem;
    font-weight: 700;
}

.neda-fc__faq-text { flex: 1 1 auto; }

.neda-fc__faq-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--nfc-black);
    border-bottom: 2px solid var(--nfc-black);
    transform: rotate(45deg);
    transition: transform var(--nfc-ease);
}

.neda-fc__faq-item[open] .neda-fc__faq-chevron { transform: rotate(-135deg); }

.neda-fc__faq-a {
    padding: 0 0 18px 42px;
    color: rgba(0, 0, 0, 0.78);
}

/* ---- Button -------------------------------------------------------- */

.neda-fc__more { margin: 28px 0 0; }

/* Lime at rest with a black label, cherry with white on hover - the site
   button standard. */
.neda-fc__btn {
    display: inline-block;
    background: var(--nfc-lime);
    color: var(--nfc-black);
    border-radius: var(--nfc-radius);
    padding: 12px 24px;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--nfc-ease), color var(--nfc-ease);
}

.neda-fc__btn:hover,
.neda-fc__btn:active {
    background: var(--nfc-cherry);
    color: var(--nfc-white);
}

/* Hover darkens the button but Tab does not, so the ring must read on the
   RESTING lime. */
.neda-fc__btn:focus-visible {
    outline: 3px solid var(--nfc-cherry);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .neda-fc * { transition: none !important; }
    .neda-fc-card:hover,
    .neda-fc-card:focus-within { transform: none; }
}

/* =========================================================================
   STOCK BLOCKS - the front-page sections rebuilt as ordinary editor content
   (2026-08-05). The markup is now core/heading, core/paragraph, core/details
   and woocommerce/product-new, so none of the .neda-fc__* selectors above
   reach it. These rules give that stock markup the same design language:
   headline size, 15pt body, borderless cards that lift on hover, and a real
   accordion. Scoped to .neda-section so nothing else on the site is caught.
   ========================================================================= */

.neda-section {
    --ns-cyan:      #0EC4C5;
    --ns-lime:      #C4C40E;
    --ns-cherry:    #D7263D;
    --ns-tint-1:    var(--wp--preset--color--custom-color-1, #ECF9F8);
    --ns-radius:    10px;
    --ns-shadow:    0 2px 8px rgba(0, 0, 0, 0.08);
    --ns-shadow-up: 0 14px 34px rgba(0, 0, 0, 0.16);
    --ns-ease:      0.2s ease;

    padding-block: clamp(40px, 4.5vw, 64px);
    background: #FFFFFF;
}

/* Section headline: the same size as every other section headline on the
   site, so a stock-block section is indistinguishable from a built one.
   That size is now the sitewide 24px - see neda-type.css. */
.neda-section > .wp-block-heading {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.2;
}

/* 15pt, which is 20px, was the largest body size anywhere on the site. */
.neda-section p { font-size: 15px; }

.neda-section > p { margin: 0 0 28px; color: rgba(0, 0, 0, 0.72); }

/* ---- Course cards (woocommerce/product-new) ------------------------- */

.neda-section .wc-block-grid__products { gap: 20px; }

/* No border - surface and elevation, exactly like every other card. */
.neda-section .wc-block-grid__product {
    background: #FFFFFF;
    border: 0;
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow);
    overflow: hidden;
    padding: 0 0 18px;
    transition: transform var(--ns-ease), box-shadow var(--ns-ease);
}

.neda-section .wc-block-grid__product:hover,
.neda-section .wc-block-grid__product:focus-within {
    transform: scale(1.03);
    box-shadow: var(--ns-shadow-up);
}

.neda-section .wc-block-grid__product-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    padding-inline: 18px;
}

.neda-section .wc-block-grid__product-image { margin: 0; }
.neda-section .wc-block-grid__product-image img { border-radius: 0; }
.neda-section .wc-block-grid__product-price { padding-inline: 18px; font-weight: 700; }

/* Lime at rest with a black label, cherry with white on hover. No border in
   any state - not at rest, not on hover, not on focus. */
.neda-section .wc-block-grid__product-add-to-cart .wp-block-button__link,
.neda-section .wp-block-button__link {
    background: var(--ns-lime);
    color: #000000;
    border: 0;
    border-radius: var(--ns-radius);
    font-weight: 700;
    transition: background var(--ns-ease), color var(--ns-ease);
}

.neda-section .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.neda-section .wp-block-button__link:hover,
.neda-section .wp-block-button__link:active {
    background: var(--ns-cherry);
    color: #FFFFFF;
    border: 0;
}

/* The ring is an outline, never a border, and has to read on the RESTING
   lime because Tab never triggers hover. */
.neda-section .wp-block-button__link:focus-visible {
    outline: 3px solid var(--ns-cherry);
    outline-offset: 2px;
    border: 0;
}

/* ---- FAQ accordion (core/details) ------------------------------------ */

.neda-section .wp-block-details {
    max-width: 900px;
    background: #FFFFFF;
    border: 0;
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow);
    padding: 2px 20px;
    transition: transform var(--ns-ease), box-shadow var(--ns-ease), background var(--ns-ease);
}

/* White at rest, textbox-1 on hover, and the same lift the cards get. */
.neda-section .wp-block-details:hover,
.neda-section .wp-block-details[open] {
    background: var(--ns-tint-1);
    transform: scale(1.01);
    box-shadow: var(--ns-shadow-up);
}

.neda-section .wp-block-details + .wp-block-details { margin-top: 10px; }

/*
 * NOT A FLEX CONTAINER, and that is the whole point of this rule.
 *
 * A summary holds authored prose. Flex wraps each run of text between
 * inline elements in its own ANONYMOUS flex item, so a question
 * containing any inline markup - a link, an <em>, or the notranslate
 * span the brand-name lock adds around "Neda eCampus" - was split into
 * three items and the container's `gap` opened 12px on BOTH sides of it.
 * Only one FAQ question had inline markup, so only that one looked
 * broken, which is exactly how it was reported.
 *
 * `gap: 0` is NOT the fix: flex also strips the leading and trailing
 * white space of each anonymous item, so the sentence would close up to
 * "Can I teach onNeda eCampus?" instead. Block layout keeps the text one
 * continuous run, and the chevron is positioned rather than pushed by an
 * auto margin.
 */
.neda-section .wp-block-details summary {
    display: block;
    position: relative;
    padding-block: 16px;
    /* Room for the chevron, which now sits over the padding. */
    padding-inline-end: 34px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.neda-section .wp-block-details summary::-webkit-details-marker { display: none; }
.neda-section .wp-block-details summary::marker { content: ""; }

.neda-section .wp-block-details summary:focus-visible {
    outline: 3px solid var(--ns-cherry);
    outline-offset: 2px;
    border-radius: var(--ns-radius);
}

/* The chevron, drawn rather than imaged, so it inherits colour. Absolutely
   positioned now that the summary is block: `margin-inline-start: auto`
   only pushes something to the end inside a flex row. */
.neda-section .wp-block-details summary::after {
    content: "";
    position: absolute;
    inset-inline-end: 4px;
    inset-block-start: calc(50% - 7px);
    width: 10px;
    height: 10px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(45deg);
    transition: transform var(--ns-ease);
}

.neda-section .wp-block-details[open] summary::after { transform: rotate(-135deg); }

.neda-section .wp-block-details p { padding-bottom: 18px; color: rgba(0, 0, 0, 0.78); }

@media (prefers-reduced-motion: reduce) {
    .neda-section * { transition: none !important; }
    .neda-section .wc-block-grid__product:hover,
    .neda-section .wp-block-details:hover { transform: none; }
}

/* =========================================================================
   Revisions
   ========================================================================= */

/* ---- The two course sections are cards on a tinted band -------------
   Each section reads as one object sitting on the page, rather than as a
   full-bleed stripe. The FAQ keeps its own band because its items are
   already cards, and a card inside a card reads as a mistake. */

.neda-fc--card {
    background-color: var(--nfc-tint);
}

.neda-fc--card .neda-fc__inner {
    background: var(--nfc-white);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nfc-shadow);
    padding: clamp(28px, 3.4vw, 44px);
}

/* Same rhythm in every section, so "Featured" cannot end up shorter or
   taller than "Recently added" just because one of them is empty. */
.neda-fc {
    padding-block: clamp(40px, 4.5vw, 64px);
}

/* ---- Empty state: text, not a second card --------------------------- */

.neda-fc-empty,
.neda-fc--plain .neda-fc-empty {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.neda-fc-empty__text {
    margin: 0 0 14px;
    color: rgba(0, 0, 0, 0.72);
}

/* ---- Carousel ------------------------------------------------------- */

.neda-fc__carousel { position: relative; }

.neda-fc__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 4px 4px 14px;   /* room for the cards' shadow and lift */
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.neda-fc__track:focus-visible {
    outline: 3px solid var(--nfc-cherry);
    outline-offset: 3px;
    border-radius: var(--nfc-radius);
}

.neda-fc__track .neda-fc-card {
    flex: 0 0 clamp(230px, 26%, 290px);
    scroll-snap-align: start;
}

/* Arrows sit outside the cards' corners and only appear once the row
   actually overflows - the JS adds .is-neda-scrollable. */
.neda-fc__nav {
    position: absolute;
    top: calc(50% - 20px);
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--nfc-radius);
    background: var(--nfc-lime);
    color: var(--nfc-black);
    cursor: pointer;
    box-shadow: var(--nfc-shadow);
    transition: background var(--nfc-ease), color var(--nfc-ease);
    z-index: 2;
}

.is-neda-scrollable .neda-fc__nav { display: grid; }

/* Logical, so the arrows swap sides in RTL with no second rule. The
   glyphs inside them are rotated shapes and cannot follow on their own;
   neda-rtl.css section 2 flips those. */
.neda-fc__nav--prev { inset-inline-start: -8px; }
.neda-fc__nav--next { inset-inline-end: -8px; }

.neda-fc__nav:hover:not(:disabled),
.neda-fc__nav:active:not(:disabled) {
    background: var(--nfc-cherry);
    color: var(--nfc-white);
}

.neda-fc__nav:focus-visible {
    outline: 3px solid var(--nfc-cherry);
    outline-offset: 2px;
}

.neda-fc__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The chevron, drawn rather than imaged. */
.neda-fc__nav span {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

/* The 3px is optical centring: a rotated square's visual mass sits
   towards the side it points at. Logical, so the nudge follows the glyph
   when neda-rtl.css swaps the two rotations in RTL. */
.neda-fc__nav--prev span { transform: rotate(135deg); margin-inline-start: 3px; }
.neda-fc__nav--next span { transform: rotate(-45deg); margin-inline-end: 3px; }

/* ---- FAQ: a single-column accordion list ---------------------------- */

.neda-fc__faq {
    display: block;      /* was a multi-column grid */
    max-width: 900px;
}

.neda-fc__faq-item + .neda-fc__faq-item { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    .neda-fc__track { scroll-behavior: auto; }
}

/* Featured sits on the cyan tint (custom-color-1) rather than the lime one,
   so the three sections run lime tint -> cyan tint -> white and no two
   touching bands share a colour. */
.neda-fc--card-cyan {
    background-color: var(--nfc-cyan-tint);
}

.neda-fc--card-cyan .neda-fc__inner {
    background: var(--nfc-white);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nfc-shadow);
    padding: clamp(28px, 3.4vw, 44px);
}

@media (max-width: 700px) {
    /* The section card's own padding was eating more than the card width on
       a phone, leaving a 199px window onto a 230px card. */
    .neda-fc--card .neda-fc__inner,
    .neda-fc--card-cyan .neda-fc__inner {
        padding: 22px 16px;
        border-radius: 12px;
    }

    .neda-fc { padding-inline: 16px; }

    .neda-fc__track .neda-fc-card { flex: 0 0 min(82%, 260px); }

    /* Swipe is the gesture here, and the arrows would sit on top of the
       cards on a track this narrow. */
    .neda-fc__nav { display: none !important; }
}

/* ---- White band; the card is defined by elevation alone -------------
   The section's own background goes white, so the block reads as white
   rather than lime. The card no longer has a contrasting band behind it,
   which is fine - the house rule is that cards stand out by shadow, not
   by an outline or a backing colour. */
.neda-fc--card {
    background-color: var(--nfc-white);
}

/* ---- Carousel runs to the edge of the screen -------------------------
   The row is meant to read as continuing past the viewport, not as being
   clipped inside a card. `50% - 50vw` is exactly the distance from the
   container's edge to the viewport's edge when the container is centred,
   so the track escapes the card padding, the section gutter and the
   1200px measure in one declaration - no magic numbers.

   Only the END side bleeds: the first card stays aligned with the
   heading above it, which is what makes the row look deliberate. */
.neda-fc__carousel {
    margin-inline-end: calc(50% - 50vw);
}

.neda-fc__track {
    padding-inline-end: var(--nfc-gutter);
    scroll-padding-inline-start: 4px;
}

/* The carousel now ends at the screen edge, so an arrow offset from its
   trailing edge would sit off-screen. It is pulled back inside instead. */
.neda-fc__nav--next { inset-inline-end: 16px; }

@media (max-width: 700px) {
    /* Cards should reach the screen edge here too, so the next one always
       peeks and the row reads as scrollable. */
    .neda-fc__track { padding-inline-end: 16px; }
}

/* =========================================================================
   As a BLOCK, 2026-08-05
   The sections used to be appended inside the last group on the page, so
   they inherited its lime background and a second helping of padding -
   that nesting is what made the block look like a card inside a card.
   They are ordinary sibling blocks now, so the wrappers can go.
   ========================================================================= */

.neda-fc--plain { background-color: var(--nfc-white); }
.neda-fc--tint  { background-color: var(--nfc-tint); }
.neda-fc--cyan  { background-color: var(--nfc-cyan-tint); }

/* No inner card. The band colour and the course cards carry the design;
   a white panel on a white band was an extra box saying nothing. */
.neda-fc--card .neda-fc__inner,
.neda-fc--card-cyan .neda-fc__inner,
.neda-fc--plain .neda-fc__inner,
.neda-fc--tint .neda-fc__inner,
.neda-fc--cyan .neda-fc__inner {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Full-width block: the section provides its own gutter, so it must not be
   constrained by the template's content measure. */
.neda-fc.alignfull,
.wp-block-neda-front-section {
    max-width: none;
}

@media (max-width: 700px) {
    .neda-fc--card .neda-fc__inner,
    .neda-fc--card-cyan .neda-fc__inner { padding: 0; }
}

/* ---- Centre, to match the page ------------------------------------
   Every other section heading on the front page is centred
   (.has-text-align-center), so these were the odd ones out. The card
   text stays left: centred body copy inside a small card is harder to
   read, and the cards are a different kind of object from the section
   furniture around them. */
.neda-fc__title,
.neda-fc__lede,
.neda-fc__more {
    text-align: center;
}

.neda-fc-empty {
    text-align: center;
}

.neda-fc-empty__types {
    justify-content: center;
}

/* The FAQ column is narrower than the measure, so centre the column
   itself; the questions inside stay left-aligned. */
.neda-fc__faq {
    margin-inline: auto;
}

.neda-fc__faq-q,
.neda-fc__faq-a {
    text-align: start;
}

.neda-fc__lede {
    color: var(--nfc-black);
}

/* ---- Carousel, corrected -------------------------------------------
   Three things were wrong: the row bled past the screen edge so cards
   were sliced in half, the native scrollbar sat under it as a grey
   slab, and the arrows lay on top of the first and last card. */

/* Contained again - a card cut by the viewport edge reads as broken,
   not as "there is more". The peek comes from the next card being
   partly visible inside the measure instead. */
.neda-fc__carousel {
    margin-inline-end: 0;
}

.neda-fc__track {
    padding-inline: 4px;
    /* The row is driven by the arrows, swipe and the keyboard; the
       scrollbar was only ever visual noise under the cards. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.neda-fc__track::-webkit-scrollbar { display: none; }

/* Arrows sit in the section's own gutter, never over a card. The gutter
   is the same custom property the section pads with, so they cannot
   drift outside it at any width. */
.neda-fc__nav--prev { inset-inline-start: calc(-1 * var(--nfc-gutter) + 6px); }
.neda-fc__nav--next { inset-inline-end: calc(-1 * var(--nfc-gutter) + 6px); }

.neda-fc__nav { width: 36px; height: 36px; }

/* ---- FAQ hover ------------------------------------------------------ */

.neda-fc__faq-item {
    transition: box-shadow var(--nfc-ease), transform var(--nfc-ease), background-color var(--nfc-ease);
}

.neda-fc__faq-item:hover,
.neda-fc__faq-item:focus-within,
.neda-fc__faq-item[open] {
    background-color: var(--nfc-tint);          /* custom-color-3 */
    transform: scale(1.02);
    box-shadow: var(--nfc-shadow-up);
}

/* The numeral sits on custom-color-2. Black on it is well past 4.5:1,
   so the digit stays black as everywhere else. */
.neda-fc__faq-n {
    background: var(--wp--preset--color--custom-color-2, #D8F2F2);
    color: var(--nfc-black);
}

@media (prefers-reduced-motion: reduce) {
    .neda-fc__faq-item:hover,
    .neda-fc__faq-item:focus-within,
    .neda-fc__faq-item[open] { transform: none; }
}

/* ---- Match the page's section headings exactly -----------------------
   The front page sets its heading typography INLINE on each block (the
   editor writes it there), so no shared class carries it and nothing can
   be inherited. These are those exact values, copied so the three
   sections sit in the same visual rank as "Why Choose Neda eCampus?"
   and "The Neda Learning Ecosystem".

   If the headings are ever restyled in the Site Editor, this is the one
   place to update - it cannot follow automatically.

   The copied clamp - clamp(25.984px, …, 44px) - is gone: every section
   headline on the site is 24px now (neda-type.css), and matching the Site
   Editor's own size would put these three back out of step with the rest. */
.neda-fc__title {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--text-dark, #000000);
    margin-top: 0;
    margin-bottom: 12px;
}