/* free-resources hub skin — CSS VERBATIM from Subash's free-resources-hub comp (2026-06-29 update: sections + filters + SVG icons), scoped under `body.free-resources .fr-hub` so nothing leaks into the global Bricks chrome. html rules left global. Re-ported from the updated comp. */
body.free-resources .fr-hub {
            --bg-navy: #13217c;
            --primary-blue: #3b5bff;
            --cta-magenta: #cc00cc;
            --accent-blue: #e6ebff;
            --text-white: #fffdfe;
            --text-dark: #333;
            --text-gray: #808080;
            --font-heading: 'Poppins', sans-serif;
            --font-body: 'Inter', sans-serif;
            --container-width: 1280px;
        }body.free-resources .fr-hub * { margin: 0; padding: 0; box-sizing: border-box; }html { scroll-behavior: smooth; }body.free-resources .fr-hub {
            font-family: var(--font-body);
            color: var(--text-dark);
            line-height: 1.5;
            background-color: var(--text-white);
            overflow-x: hidden;
        }body.free-resources .fr-hub h1, body.free-resources .fr-hub h2, body.free-resources .fr-hub h3, body.free-resources .fr-hub h4, body.free-resources .fr-hub h5, body.free-resources .fr-hub h6 { font-family: var(--font-heading); font-weight: 600; }body.free-resources .fr-hub a { color: inherit; text-decoration: none; }body.free-resources .fr-hub .container {
            width: 100%;
            max-width: var(--container-width);
            padding: 0 40px;
            margin: 0 auto;
        }
        @media (max-width: 768px) {body.free-resources .fr-hub .container { padding: 0 20px; } }/* HERO */
        body.free-resources .fr-hub .fr-hero {
            background-color: var(--bg-navy);
            color: var(--text-white);
            padding: 60px 0;
            text-align: center;
        }body.free-resources .fr-hub .fr-hero h1 {
            font-size: 42px;
            line-height: 50px;
            color: var(--text-white);
            margin-bottom: 18px;
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
        }body.free-resources .fr-hub .fr-hero p {
            font-family: var(--font-heading);
            font-size: 20px;
            line-height: 32px;
            font-weight: 500;
            color: var(--text-white);
            max-width: 760px;
            margin: 0 auto;
        }/* FILTER BAR - sticky strip below site nav, replaces the old TOC */
        body.free-resources .fr-hub .fr-filter-bar {
            background: var(--text-white);
            border-bottom: 1px solid #e5e7f5;
            box-shadow: 0 2px 8px rgba(19, 33, 124, 0.04);
            padding: 16px 0;
            position: sticky;
            top: 0;
            z-index: 10;
        }body.free-resources .fr-hub .fr-filter-inner {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }body.free-resources .fr-hub .fr-filter-label {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
            color: var(--text-gray);
            margin-right: 4px;
        }body.free-resources .fr-hub .fr-chip {
            display: inline-block;
            padding: 8px 16px;
            border: 1.5px solid var(--accent-blue);
            border-radius: 20px;
            background: var(--text-white);
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-blue);
            cursor: pointer;
            transition: all .2s ease;
        }body.free-resources .fr-hub .fr-chip:hover {
            background: var(--primary-blue);
            border-color: var(--primary-blue);
            color: var(--text-white);
        }body.free-resources .fr-hub .fr-chip.is-active {
            background: var(--primary-blue);
            border-color: var(--primary-blue);
            color: var(--text-white);
        }/* EMPTY-STATE shown when filter yields no cards */
        body.free-resources .fr-hub .fr-empty {
            display: none;
            padding: 60px 0;
            text-align: center;
            background: var(--text-white);
        }body.free-resources .fr-hub .fr-empty.is-visible { display: block; }body.free-resources .fr-hub .fr-empty p {
            font-family: var(--font-heading);
            font-size: 18px;
            line-height: 28px;
            font-weight: 500;
            color: var(--text-gray);
        }/* Filter hide-class — wins over .fr-card explicit display */
        body.free-resources .fr-hub .is-hidden { display: none !important; }/* SECTIONS - alternating tinted / inverted */
        body.free-resources .fr-hub .fr-section {
            padding: 60px 0;
            background: #e6ebff;
        }body.free-resources .fr-hub .fr-section.is-inverted { background: #fffdfe; }body.free-resources .fr-hub .fr-section-head {
            margin: 0 auto 36px;
            max-width: 780px;
            text-align: center;
        }body.free-resources .fr-hub .fr-eyebrow {
            display: inline-block;
            font-family: var(--font-body);
            font-size: 14px;
            line-height: 20px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--cta-magenta);
            margin-bottom: 10px;
        }body.free-resources .fr-hub .fr-section h2 {
            font-size: 36px;
            line-height: 48px;
            color: #3b5bff;
            margin-bottom: 10px;
        }body.free-resources .fr-hub .fr-section-sub {
            font-family: var(--font-heading);
            font-size: 18px;
            line-height: 28px;
            font-weight: 500;
            color: var(--text-dark);
        }/* CARD GRID - flex column with icon + title + sub */
        body.free-resources .fr-hub .fr-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }body.free-resources .fr-hub .fr-card {
            flex: 0 1 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            min-height: 160px;
            padding: 22px 20px;
            background: #fffdfe;
            border: 2px solid #e5e7f5;
            border-radius: 16px;
            text-align: center;
            transition: all .2s ease;
        }body.free-resources .fr-hub .fr-section.is-inverted .fr-card { background: #e6ebff; }body.free-resources .fr-hub .fr-card:hover {
            border-color: #a0aeff;
            transform: translateY(-2px);
        }body.free-resources .fr-hub .fr-card .fr-icon {
            color: var(--primary-blue);
            flex-shrink: 0;
        }body.free-resources .fr-hub .fr-card-title {
            font-family: var(--font-heading);
            font-size: 16px;
            line-height: 22px;
            font-weight: 600;
            color: var(--primary-blue);
        }body.free-resources .fr-hub .fr-card-sub {
            font-family: var(--font-body);
            font-size: 14px;
            line-height: 20px;
            font-weight: 500;
            color: var(--text-gray);
        }/* BUTTONS */
        body.free-resources .fr-hub .btn {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            border: 2px solid transparent;
            font-family: var(--font-body);
            font-size: 18px;
            line-height: 24px;
            transition: all .3s ease;
            text-align: center;
        }body.free-resources .fr-hub .btn-magenta, body.free-resources .fr-hub .btn-magenta:visited { background-color: var(--cta-magenta); color: #fffdfe; }body.free-resources .fr-hub .btn-magenta:hover { background-color: #a600a6; color: #fffdfe; }body.free-resources .fr-hub .hero-ghost {
            background: transparent;
            border: 2px solid var(--text-white);
            color: var(--text-white);
        }body.free-resources .fr-hub .hero-ghost:hover { background: var(--text-white); color: var(--bg-navy); }/* FINAL CTA */
        body.free-resources .fr-hub .final-cta {
            background: var(--bg-navy);
            color: var(--text-white);
            padding: 60px 0;
            text-align: center;
        }body.free-resources .fr-hub .final-cta h2 {
            font-size: 30px;
            line-height: 40px;
            color: var(--text-white);
            margin-bottom: 12px;
            max-width: 880px;
            margin-left: auto;
            margin-right: auto;
        }body.free-resources .fr-hub .final-cta p {
            font-family: var(--font-heading);
            font-size: 18px;
            line-height: 28px;
            font-weight: 500;
            color: var(--text-white);
            max-width: 760px;
            margin: 0 auto 28px;
        }body.free-resources .fr-hub .final-cta-stack {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        @media (max-width: 640px) {body.free-resources .fr-hub .fr-hero { padding: 40px 0; }body.free-resources .fr-hub .fr-hero h1 { font-size: 30px; line-height: 38px; }body.free-resources .fr-hub .fr-hero p { font-size: 16px; line-height: 26px; }body.free-resources .fr-hub .fr-filter-bar { padding: 12px 0; }body.free-resources .fr-hub .fr-filter-inner { gap: 6px; }body.free-resources .fr-hub .fr-filter-label { width: 100%; text-align: center; margin: 0 0 6px 0; }body.free-resources .fr-hub .fr-chip { padding: 6px 12px; font-size: 14px; }body.free-resources .fr-hub .fr-section { padding: 40px 0; }body.free-resources .fr-hub .fr-section h2 { font-size: 24px; line-height: 32px; }body.free-resources .fr-hub .fr-section-sub { font-size: 16px; line-height: 26px; }body.free-resources .fr-hub .fr-grid { gap: 12px; }body.free-resources .fr-hub .fr-card { flex: 1 1 100%; min-height: 140px; padding: 18px 16px; }body.free-resources .fr-hub .fr-card-title { font-size: 16px; line-height: 22px; }body.free-resources .fr-hub .fr-card-sub { font-size: 14px; line-height: 20px; }body.free-resources .fr-hub .final-cta { padding: 40px 0; }body.free-resources .fr-hub .final-cta h2 { font-size: 24px; line-height: 32px; }body.free-resources .fr-hub .final-cta p { font-size: 16px; line-height: 24px; }body.free-resources .fr-hub .final-cta-stack { flex-direction: column; align-items: stretch; }body.free-resources .fr-hub .final-cta-stack .btn { width: 100%; }
        }

/* === Bricks integration + sticky fix (2026-06-29, Subash FR-Hub feedback v1) ===
   (1) Full-width: the hub renders inside main#brx-content > .brxe-container > .brxe-text; the default
       Bricks flex wrappers don't stretch it, so content was compressed left. Force the wrapper chain to
       stretch full-width so the comp's own .container centers (reference: Admissions Hub).
   (2) Sticky filter bar: the comp's body{overflow-x:hidden} (scoped onto .fr-hub above) breaks
       position:sticky for descendants — the prior build dropped it for this exact reason. Use overflow-x:clip
       (contains H-overflow WITHOUT breaking sticky) and pin .fr-filter-bar below the sticky .site-header
       (~67px, z-index 9999) via the site's ~80px sticky-offset convention. [VERIFY offset visually]. */
body.free-resources main#brx-content > .brxe-container,
body.free-resources main#brx-content .brxe-text { width: 100%; max-width: 100%; }
body.free-resources main#brx-content > .brxe-container { align-items: stretch; padding: 0; }
body.free-resources .fr-hub { overflow-x: clip; }
body.free-resources .fr-hub .fr-filter-bar { top: 75px; z-index: 100; }
/* Subash FR-Hub v2 (2026-06-29): sticky offset tracks header height — header goes mobile (shorter) at <=991px. */
@media (max-width: 991px) { body.free-resources .fr-hub .fr-filter-bar { top: 65px; } }