/* ──────────────────────────────────────────────────────────────────────────
   local_edupages — styles the shop design system (shop.css / landing.css)
   does not provide. Loaded AFTER those files by the pages that need it, so
   it may rely on their ccq-landing vocabulary but must never redefine it.

   Currently: the FAQ accordion (faqs.php) — native <details>/<summary>, the
   marker replaced with a +/− indicator, no JavaScript — and the FREE Exam
   Help landing (examhelp.php): responsive Vimeo grid + claim band.
   ────────────────────────────────────────────────────────────────────────── */

.edu-faqs__list {
    max-width: 860px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
}

.edu-faqs__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.15);
}

.edu-faqs__item:first-of-type {
    border-top: 1px solid rgba(26, 26, 26, 0.15);
}

.edu-faqs__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    list-style: none; /* Firefox marker */
}

.edu-faqs__question::-webkit-details-marker {
    display: none; /* Safari/Chrome marker */
}

.edu-faqs__question::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: #555;
}

.edu-faqs__item[open] > .edu-faqs__question::after {
    content: "\2212"; /* minus sign */
}

.edu-faqs__answer {
    padding: 0 0 1.25rem;
    color: #444;
}

.edu-faqs__answer p {
    margin: 0 0 0.75rem;
}

.edu-faqs__answer p:last-child {
    margin-bottom: 0;
}

.edu-faqs__cta {
    padding: 0.25rem 0 0.5rem;
}

.edu-faqs__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── FREE Exam Help landing (examhelp.php) ──────────────────────────────── */

.edu-examhelp__claim {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.edu-examhelp__claim-form {
    display: inline-block;
    margin: 0;
}

.edu-examhelp__claim-note {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

.edu-examhelp__signup,
.edu-examhelp__pack,
.edu-examhelp__upsell {
    max-width: 860px;
    margin: 0 auto 2.5rem;
    padding: 0 1rem;
    text-align: center;
}

/* The signup moodleform inside the marketing chrome: centred card, left-
   aligned fields, the shop's rounded vocabulary. */
.edu-examhelp__form {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

.edu-examhelp__form .col-form-label,
.edu-examhelp__form label {
    font-weight: 600;
}

.edu-examhelp__form .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
}

/* Post-submit outcome banners. */
.edu-examhelp__banner {
    max-width: 520px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.edu-examhelp__banner--success {
    background: #e9f5e1;
    color: #3f6b1d;
    border: 1px solid #8dc63f;
}

.edu-examhelp__banner--error {
    background: #fdecea;
    color: #9a2418;
    border: 1px solid #e8a19a;
}

/* Honeypot: visually removed for humans (input class + its moodleform row). */
.edu-examhelp__hp,
#fitem_id_website {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.edu-examhelp__modules {
    display: inline-block;
    text-align: left;
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.edu-examhelp__facts {
    color: #555;
    font-size: 0.95rem;
}

.edu-examhelp__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── For Your Child (foryourchild.php) ──────────────────────────────────
   Reuses .edu-home__* (theme_edutheme _marketing.scss, scoped to any
   body.notloggedin page) for fonts/colours/buttons/spacing so this page
   matches the homepage exactly. Only genuinely new layout lives here.
   Section backgrounds alternate down the page (punch list item 1,
   2026-08-26): white / tint / white / tint / white / teal / navy - no two
   adjacent sections share a background. Card accent palette drawn from the
   theme's own brand variables: pink #ec008c ($brand-accent), teal #4bc0b1
   ($brand-teal), green #8dc63f ($brand-success), navy #262262
   ($brand-primary). Purple is #662d91 ($brand-purple) — navy and purple are
   distinct official CI colours, not interchangeable (fixed 2026-08-26; #262262
   was previously mislabelled "purple" in this file and in the theme's own
   _marketing.scss, which rendered navy borders where purple was intended). */

.edu-fyc {
    text-align: center;
}

.edu-fyc__hero,
.edu-fyc__stages,
.edu-fyc__proof {
    padding: 3rem 0;
    background: #fff;
}

.edu-fyc__cost {
    padding: 3rem 0;
    background: #f5f5f5;
}

/* Sound familiar: solid teal band (was light grey) — the 4 quote chips stay
   white cards untouched; only the section's own heading/body/emphasis text
   goes white to read on the teal. */
.edu-fyc__sound {
    padding: 3rem 0;
    background: #4bc0b1;
}

.edu-fyc__sound .edu-home__heading,
.edu-fyc__sound .edu-fyc__sound-body,
.edu-fyc__sound .edu-fyc__emphasis {
    color: #fff;
}

/* Hero: copy left, illustration right on desktop (2026-08-26). The mountain's
   summit/flag sit toward the right of the source image, so on mobile the crop
   is biased right (object-position) to keep the flag visible even if the
   parent figure on the left gets partially cropped out. */
.edu-fyc__hero-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.edu-fyc__hero-copy {
    flex: 1 1 45%;
}

.edu-fyc__hero-imagewrap {
    flex: 1 1 55%;
}

.edu-fyc__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.edu-fyc__hero-heading {
    margin-bottom: 1rem;
}

.edu-fyc__hero-body {
    font-size: 1.125rem;
    line-height: 1.7;
}

.edu-fyc__hero-btnrow {
    justify-content: flex-start;
}

@media (max-width: 767.98px) {
    .edu-fyc__hero-row {
        flex-direction: column;
        text-align: center;
    }

    .edu-fyc__hero-btnrow {
        justify-content: center;
    }

    .edu-fyc__hero-imagewrap {
        width: 100%;
        height: 220px;
        overflow: hidden;
        border-radius: 12px;
    }

    .edu-fyc__hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right center;
    }
}

/* Sound familiar: 4 quote cards, pink left border + shadow, 2-up desktop. */
.edu-fyc__chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 760px;
    margin: 0 auto 1.5rem;
}

@media (max-width: 767.98px) {
    .edu-fyc__chips {
        grid-template-columns: 1fr;
    }
}

.edu-fyc__chip {
    max-width: none;
    flex: none;
    text-align: left;
    border-left-color: #ec008c;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.edu-fyc__chip .edu-home__quote-text {
    margin: 0;
}

.edu-fyc__sound-body {
    line-height: 1.7;
    max-width: 760px;
    margin: 0 auto 1rem;
}

.edu-fyc__emphasis {
    font-size: 1.25rem;
    font-weight: 600;
    color: #262262;
    max-width: 760px;
    margin: 1rem auto 0;
    line-height: 1.5;
}

.edu-fyc__center {
    text-align: center;
}

/* Right for every stage: 3 cards, coloured top border green/teal/purple. */
.edu-fyc__stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
    text-align: left;
}

@media (max-width: 991.98px) {
    .edu-fyc__stages-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

.edu-fyc__stage-card {
    background: #262262;
    border-radius: 14px;
    border: 1px solid #262262;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.edu-fyc__stage-icon-wrap {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.75rem;
}

.edu-fyc__stage-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Third stage icon (figure with flag) reads too small at the standard scale
   inside its badge — the figure itself doesn't fill the frame the way the
   signpost/compass do. Enlarge just the icon content; the navy circle
   (the wrap, overflow:hidden) stays the same size as the other two. */
.edu-fyc__stage-card:nth-child(3) .edu-fyc__stage-icon {
    transform: scale(2);
}

.edu-fyc__stage-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
    text-align: center;
}

.edu-fyc__stage-body {
    margin: 0;
    line-height: 1.6;
    color: #fff;
}

.edu-fyc__stages-line {
    text-align: center;
    font-weight: 600;
    color: #262262;
    max-width: 700px;
    margin: 0 auto;
}

/* What it costs: the price card is the section's visual anchor. */
.edu-fyc__cost-card {
    display: block;
    max-width: 480px;
    margin: 1.5rem auto;
    padding: 1.75rem 1.5rem;
    background: #fff;
    text-align: center;
    border-color: #ec008c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.edu-fyc__cost-card-prefix {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #262262;
    margin-bottom: 0.35rem;
}

.edu-fyc__cost-card-price {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ec008c;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}

/* Struck-through "was" price when a voucher/discount is live — same grey,
   smaller, margin-right treatment as the homepage bundle ladder's <s>
   (theme_edutheme scss/edutheme/_marketing.scss .edu-home__pricing-price s),
   scaled up to sit beside this card's larger price. */
.edu-fyc__cost-card-price s {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 600;
    color: #7a7a7a;
    margin-right: 0.5rem;
}

.edu-fyc__cost-card-body {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.edu-fyc__guarantee {
    font-weight: 600;
    color: #7a7a7a;
}

/* Testimonials: 2 cards side by side, large teal quote-mark accent. */
.edu-fyc__proof .edu-home__quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 1.5rem auto 0;
    text-align: left;
}

@media (max-width: 767.98px) {
    .edu-fyc__proof .edu-home__quotes {
        grid-template-columns: 1fr;
    }
}

.edu-fyc__proof .edu-home__quote {
    max-width: none;
    flex: none;
    position: relative;
    padding-top: 2.5rem;
}

.edu-fyc__proof .edu-home__quote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 1rem;
    font-size: 3rem;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    color: #4bc0b1;
    font-style: normal;
}

.edu-fyc__proof .edu-home__quote-cite {
    font-weight: 700;
}

.edu-fyc__proof-line {
    margin-top: 1.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: #262262;
}

/* Free pack: light tint band with a teal top border, navy text (2026-08-26 —
   was solid teal; the shared packform below is unaffected). */
.edu-fyc__free {
    padding: 3rem 0;
    background: #f5f5f5;
    border-top: 4px solid #4bc0b1;
    color: #262262;
}

.edu-fyc__free-heading {
    color: #262262 !important;
}

.edu-fyc__free-body {
    color: #262262;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.edu-fyc__free-smallprint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(38, 34, 98, 0.75);
}

/* The shared packform partial's outcome banners default to white text (built
   for the homepage's teal free-pack band) — illegible on this section's now
   light-grey background, so darken them here without touching the shared
   base rules the homepage instance still relies on. */
.edu-fyc__free .edu-packform__banner--success {
    color: #2f6b0f;
}

.edu-fyc__free .edu-packform__banner--error {
    color: #9a2418;
}

/* Closing: solid navy, white text, green-on-hover grade badges, pink CTA. */
.edu-fyc__close {
    padding: 3rem 0;
    background: #262262;
    color: #fff;
}

.edu-fyc__close .edu-home__heading,
.edu-fyc__close p {
    color: #fff !important;
}

.edu-fyc__grades {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.75rem 0;
}

.edu-fyc__grade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.edu-fyc__grade-btn:hover,
.edu-fyc__grade-btn:focus {
    background: #8dc63f;
    border-color: #8dc63f;
    color: #fff;
    text-decoration: none;
}

.edu-fyc__close .edu-home__btn {
    background: #ec008c;
}

.edu-fyc__close .edu-home__btn:hover,
.edu-fyc__close .edu-home__btn:focus {
    background: #c2016f;
}

.edu-fyc__back {
    text-align: center;
    margin: 2rem 0 3rem;
}

/* ── Shared simple pack-capture form (For Your Child + homepage) ────────
   One field ("WhatsApp number or email") + one button + an optional POPIA
   consent checkbox. Posts to local/edupages/packrequest.php. Designed to
   sit on a coloured banner (teal/navy) — text colour inherits from the
   parent section so it reads correctly wherever it's embedded. */
.edu-packform {
    max-width: 480px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.edu-packform__banner {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

.edu-packform__banner--success {
    background: rgba(141, 198, 63, 0.15);
    color: #fff;
    border: 1px solid #8dc63f;
}

.edu-packform__banner--error {
    background: rgba(154, 36, 24, 0.15);
    color: #fff;
    border: 1px solid #e8a19a;
}

.edu-packform__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.edu-packform__row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.edu-packform__input {
    flex: 1 1 220px;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 10px;
    font-size: 1rem;
    color: #333;
}

.edu-packform__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
}

.edu-packform__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: inherit;
}

.edu-packform__consent input {
    margin-top: 0.2rem;
}