/* ============================================================
   Soofos Free Courses page — per-page styles
   Enqueued only on the /free-courses/ page via soofos_enqueue_page_styles().
   All visual values reference CSS custom properties from tokens.css (root).
   No hardcoded hex or spacing values.
   ============================================================ */

/* ---------- Page wrapper ---------- */
.sf-fc-page {
    font-family: var(--font);
    color: var(--body);
    background: var(--page);
}

/* ---------- HERO ---------- */
.sf-fc-hero {
    padding: 40px 64px 32px;
    text-align: center;
}

.sf-fc-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-fill);
    color: var(--green-ink);
    border-radius: var(--r-btn);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
}

.sf-fc-hero__heading {
    font-size: 38px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.6px;
    margin: 14px auto 0;
    line-height: 1.15;
}

.sf-fc-hero__sub {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    margin: 10px auto 0;
    max-width: 560px;
}

.sf-fc-hero__cta {
    display: inline-block;
    margin-top: 20px;
}

.sf-fc-hero__trust {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 800;
    color: var(--muted-2);
    flex-wrap: wrap;
}

/* ---------- COURSE GRID SECTION ---------- */
.sf-fc-grid-section {
    padding: 32px 64px 8px;
}

.sf-fc-grid-section__view-all {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* ---------- HOW IT WORKS ---------- */
.sf-fc-hiw {
    padding: 26px 64px 8px;
}

.sf-fc-hiw__inner {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-lg);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.sf-fc-hiw__step-icon {
    font-size: 22px;
}

.sf-fc-hiw__step-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink);
    margin: 8px 0 4px;
}

.sf-fc-hiw__step-body {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

/* ---------- FAQ ---------- */
.sf-fc-faq {
    padding: 26px 64px 8px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.sf-fc-faq__heading {
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 12px;
}

.sf-fc-faq details {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 16px 22px;
    margin-bottom: 10px;
    cursor: pointer;
}

.sf-fc-faq details[open] {
    border-color: var(--blue-border);
    border-width: 1.5px;
}

.sf-fc-faq summary {
    font-size: 14px;
    font-weight: 900;
    color: var(--ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sf-fc-faq summary::-webkit-details-marker {
    display: none;
}

.sf-fc-faq summary::after {
    content: '▾';
    color: var(--muted-2);
    font-weight: 800;
    flex-shrink: 0;
}

.sf-fc-faq details[open] summary::after {
    content: '▴';
}

.sf-fc-faq__answer {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 8px;
    margin-bottom: 0;
}

/* ---------- PLUS BAND ---------- */
.sf-fc-plus-band {
    margin: 26px 64px 40px;
    background: var(--ink);
    border-radius: var(--r-card-lg);
    padding: 26px 32px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.sf-fc-plus-band__copy {
    flex: 1;
}

.sf-fc-plus-band__title {
    font-size: 17px;
    font-weight: 900;
    color: var(--white);
    margin: 0;
}

.sf-fc-plus-band__sub {
    font-size: 12.5px;
    color: var(--faint);
    font-weight: 600;
    margin: 2px 0 0;
}

.sf-fc-plus-band__cta {
    flex: none;
    font-size: 13.5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sf-fc-hero {
        padding: 32px 24px 24px;
    }

    .sf-fc-hero__heading {
        font-size: 28px;
    }

    .sf-fc-hero__trust {
        gap: 12px;
    }

    .sf-fc-grid-section {
        padding: 24px 16px 8px;
    }

    .sf-fc-hiw {
        padding: 20px 16px 8px;
    }

    .sf-fc-hiw__inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sf-fc-faq {
        padding: 20px 16px 8px;
    }

    .sf-fc-plus-band {
        margin: 20px 16px 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ---------- SEO intro copy ---------- */
.sf-fc-seo-intro {
    padding: 0 64px 10px;
}

.sf-fc-seo-intro__inner {
    max-width: 820px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    padding: 24px 28px;
}

.sf-fc-seo-intro__heading {
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 10px;
}

.sf-fc-seo-intro__body {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* ---------- Sort bar ---------- */
.sf-fc-sort-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.sf-fc-sort-bar__label {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted-2);
}

.sf-fc-sort-bar__controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-fc-sort-bar__sort-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-2);
}

.sf-fc-sort-btn {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--muted);
    background: var(--white);
    border: 1.5px solid var(--card-border);
    border-radius: var(--r-btn);
    padding: 6px 14px;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.sf-fc-sort-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-tint);
}

.sf-fc-sort-btn--active {
    border-color: var(--blue);
    color: var(--deep-blue);
    background: var(--blue-fill);
    font-weight: 900;
}

/* ---------- Pagination numbers ---------- */
.sf-fc-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    background: var(--white);
    font: 800 13px var(--font);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.sf-fc-page-num:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}

.sf-fc-page-num--active {
    border-color: var(--blue);
    background: var(--blue);
    color: var(--white);
    pointer-events: none;
}

.sf-fc-page-ellipsis {
    font-size: 13px;
    color: var(--muted-2);
    padding: 0 4px;
}

/* ---------- Empty state ---------- */
.sf-fc-empty {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    padding: 32px 0;
}

/* ---------- SEO bottom copy ---------- */
.sf-fc-seo-bottom {
    padding: 26px 64px 8px;
}

.sf-fc-seo-bottom__inner {
    max-width: 820px;
    margin: 0 auto;
}

.sf-fc-seo-bottom__heading {
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 10px;
}

.sf-fc-seo-bottom__body {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* ---------- Responsive additions ---------- */
@media (max-width: 900px) {
    .sf-fc-seo-intro,
    .sf-fc-seo-bottom {
        padding: 20px 16px 8px;
    }

    .sf-fc-sort-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Responsive (2026-07-28 audit, TASK-446): the shared .soofos-course-grid is
   rendered with an inline 3-col style — override it like pages/home.css does. */
@media (max-width: 1024px) {
    .sf-fc-page .soofos-course-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .sf-fc-page .soofos-course-grid { grid-template-columns: 1fr !important; }
}