/* ─────────────────────────────────────────────────────────────────────────────
   ELT Prep Hub skin — /english-proficiency-tests/  ([galv_elt_hub])

   ⚠ SANCTIONED ADDITION (not a Subash comp): there is no designer comp for this page.
   v2 (2026-07-09) — reworked per Subash's Feedback-v1 to REUSE the site's real
   components instead of a bespoke skin:
     • .hero-eyebrow chip      (destination/course/city hero)
     • .fr-card + icon sprite  (free-resources hub)   → free-tools section
     • .contact-form           (home)                 → form section
     • .faq-layout accordion   (home)                 → FAQ section
     • .container 1920/80px + home type scale         → container + typography
   v3 (2026-07-09) — Subash's Feedback-v3 polish pass: ghost-button hover inversion,
   section headers re-scoped to beat the `margin: 0` reset and matched to the `.fr-section`
   head, card link/body colours, and the why-Galvanize section on the tint background.
   v4 (2026-07-10) — Subash's Feedback-v4 colour/spacing pass: off-white (#FFFDFE) surfaces,
   card hover retuned to the `.fr-card` treatment, navy card tags, wider subtitle + pillars.
   v5 (2026-07-10) — Subash: give `.elt-card` a transparent 2px border so v4's #A0AEFF hover
   border can actually render. Nothing else changes.

   Everything is scoped under `.elt-hub` so ported global-ish component selectors
   (section, .container, .faq-*, .contact-form, .fr-*) cannot leak into the Bricks
   header/footer chrome.
   ───────────────────────────────────────────────────────────────────────────── */

.elt-hub {
    --bg-navy: #13217c;
    --primary-blue: #3b5bff;
    --cta-magenta: #cc00cc;
    --accent-blue: #e6ebff;
    --text-white: #fffdfe;
    --text-dark: #333;
    --text-gray: #808080;
    --line: #e5e7f5;
    --container-width: 1920px;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    width: 100%;                       /* fill the Bricks .brxe-text (fixes the left-pin) */
    font-family: var(--font-body);
    color: var(--text-dark);
    background: var(--text-white);
    line-height: 1.5;
}
.elt-hub *, .elt-hub *::before, .elt-hub *::after { box-sizing: border-box; }
.elt-hub h1, .elt-hub h2, .elt-hub h3, .elt-hub h4, .elt-hub p, .elt-hub ul, .elt-hub figure { margin: 0; }
.elt-hub h1, .elt-hub h2, .elt-hub h3, .elt-hub h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; }
.elt-hub a { color: var(--primary-blue); text-decoration: none; }

/* Bricks integration reset — page-scoped (elt_hub_styles gates on is_page, so these
   bare selectors only load on /english-proficiency-tests/). Force the hub's own Bricks
   container + its text child full-width so the sections own their layout. This is the
   real fix for Subash v1 #1: the previous body.page-english-proficiency-tests selector
   NEVER matched (WP emits no page-{slug} class), so the wrapper shrink-wrapped as a
   flex child of the flex-column Bricks container and pinned left. */
.brxe-container.brxe-elthub,
.brxe-container.brxe-elthub > .brxe-text {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

/* Site container model (matches home / admissions-hub) */
.elt-hub .container { width: 100%; max-width: var(--container-width); padding: 0 80px; margin: 0 auto; }
.elt-hub section { display: flex; justify-content: center; }

/* Section rhythm */
.elt-section { background-color: #E6EBFF; padding: 60px 0; }
.elt-section--tint { background: #FFFDFE; }

/* Section header (eyebrow / title / subtitle) — matched to the `.fr-section` head, which
   is the reference component on this page (Subash v3 #2/#3/#6).

   ⚠ Each rule is scoped `.elt-hub .elt-*` (0,2,0) ON PURPOSE. The reset on line ~37
   (`.elt-hub h1,h2,h3,h4,p,ul,figure { margin: 0 }`) is (0,1,1) and beat the previous
   bare `.elt-eyebrow` / `.elt-title` / `.elt-subtitle` (0,1,0) selectors, so every margin
   declared here was silently dead and the three lines rendered flush against each other.

   The eyebrow stays a block `<p>` rather than adopting `.fr-eyebrow`'s `display:inline-block`
   (that span sits in a `text-align:center` head; a block `<p>` centred by `--center` renders
   identically and cannot shrink-wrap left). */
.elt-hub .elt-eyebrow {
    font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 20px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--cta-magenta);
    margin: 0 0 10px;
}
.elt-hub .elt-title {
    font-family: var(--font-heading); font-size: 36px; line-height: 48px; font-weight: 600;
    color: var(--primary-blue); margin: 0 0 10px;
}
.elt-hub .elt-subtitle {
    font-family: var(--font-heading); font-size: 18px; line-height: 28px; font-weight: 500;
    color: var(--text-dark); max-width: 840px; margin: 0;
}
.elt-section--center .elt-eyebrow,
.elt-section--center .elt-title,
.elt-section--center .elt-subtitle { text-align: center; }
.elt-hub .elt-section--center .elt-subtitle { margin-left: auto; margin-right: auto; }
.elt-hub .elt-subtitle--foot { margin-top: 28px; }

/* Buttons */
.elt-btn {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading);
    font-weight: 600; font-size: 16px; padding: 14px 28px; border-radius: 8px;
    border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.elt-btn:hover { transform: translateY(-2px); }
/* Button text stays white — beats the `.elt-hub a` (0,1,1) colour rule (Subash v2).
   Ghost is white in every state EXCEPT hover, which inverts to navy-on-white (Subash v3 #1);
   :hover:active (0,4,0) keeps the inverted colour while the button is pressed. */
.elt-hub .elt-btn--primary, .elt-hub .elt-btn--primary:link, .elt-hub .elt-btn--primary:visited,
.elt-hub .elt-btn--primary:hover, .elt-hub .elt-btn--primary:active,
.elt-hub .elt-btn--ghost, .elt-hub .elt-btn--ghost:link, .elt-hub .elt-btn--ghost:visited,
.elt-hub .elt-btn--ghost:active { color: var(--text-white); }
.elt-hub .elt-btn--ghost:hover, .elt-hub .elt-btn--ghost:hover:active { color: #13217C; }
.elt-btn--primary { background: var(--cta-magenta); }
.elt-btn--primary:hover { background: #a600a6; }
.elt-btn--ghost { background: transparent; border-color: #FFFDFE; }
.elt-btn--ghost:hover { background: #FFFDFE; }

/* §1 Hero */
.elt-hero {
    background: #13217C;
    color: var(--text-white); text-align: center; padding: 60px 0 60px;
}
/* .hero-eyebrow — the sitewide translucent pill (verbatim from destination/city/course hero) */
.elt-hub .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.1); color: var(--text-white);
    font-family: var(--font-body); font-size: 13px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 20px; margin-bottom: 16px;
}
.elt-hero h1 { font-size: 42px; line-height: 1.2; color: var(--text-white); max-width: 900px; margin: 0 auto; }
.elt-hero .elt-hero-lead { font-family: var(--font-heading); font-weight: 500; font-size: 20px; line-height: 30px; color: #fffdfe; margin: 20px auto 32px; max-width: 720px; }
.elt-hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Generic card grid (orientation + prep — not flagged by Subash; kept, retuned to the type scale) */
.elt-grid { display: grid; gap: 24px; margin-top: 36px; }   /* = .fr-section-head bottom gap */
.elt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.elt-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* v5 (Subash 2026-07-10): `border: 2px solid transparent`, not `border: none`. v4 asked for a
   #A0AEFF hover border, which could never render against `border: none` (style `none` computes
   the width to 0). A transparent border paints the element's OWN background — `background-clip`
   is `border-box` by default — so nothing rings at rest, and `box-sizing: border-box` (line ~40)
   means no layout shift. This is exactly how `.fr-card` on this page gets the same effect. */
.elt-card {
    background: #FFFDFE; border: 2px solid transparent; border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; text-align: left;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Matched to `.fr-card:hover`. (0,2,0) — beats `.elt-card--prep` (0,1,0), so prep cards get the
   same hover colour as their siblings. */
.elt-card:hover { border-color: #A0AEFF; transform: translateY(-2px); }
.elt-card h3 { font-size: 21px; color: #3B5BFF; margin-bottom: 10px; }
.elt-section--tint .elt-card { background: #E6EBFF; }
.elt-card p { color: #333333; font-size: 16px; line-height: 26px; flex: 1; }
.elt-card .elt-card-tag {
    align-self: flex-start; font-family: var(--font-heading); font-weight: 600; font-size: 12px;
    letter-spacing: .05em; text-transform: uppercase; color: #FFFDFE;
    background: #13217C; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.elt-card .elt-card-link { margin-top: 18px; font-family: var(--font-heading); font-weight: 600; color: #3B5BFF; }
/* (0,3,0) — must beat `.elt-card .elt-card-link` (0,2,0) above and `.elt-hub a` (0,1,1). */
.elt-card .elt-card-link:hover { color: #13217C; }
.elt-card .elt-card-link::after { content: " \2192"; }
/* ⚠ These two declarations were dead until v5 gave the base rule a border style. They are live
   now, and invisible on purpose: `--accent-blue` (#e6ebff) equals the card fill these cards get
   from `.elt-section--tint .elt-card` (0,2,0), which also kills the gradient below (0,1,0). */
.elt-card--prep { border-width: 2px; border-color: var(--accent-blue); background: linear-gradient(180deg, #fbfcff 0%, #fff 100%); }
.elt-card--prep .elt-card-tag { background: var(--bg-navy); color: #fff; }
.elt-card--soon .elt-card-tag { background: #FFFDFE; color: var(--text-gray); }

/* Pillars (why-galvanize) */
/* `gap` lands because the markup is `.elt-grid.elt-grid--2.elt-pillars` (display:grid), and this
   rule is later in the file than `.elt-grid`'s `gap: 24px` at equal (0,1,0) specificity. */
.elt-pillars { max-width: 1240px; gap: 30px; margin-left: auto; margin-right: auto; text-align: left; }
.elt-pillar { display: flex; gap: 16px; align-items: flex-start; }
.elt-pillar .elt-pillar-num {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
    font-family: var(--font-heading); font-weight: 700; color: #FFFDFE; background: #3B5BFF;
}
.elt-pillar h3 { font-size: 20px; color: #3B5BFF; margin-bottom: 6px; }
.elt-pillar p { color: #333333; font-size: 16px; line-height: 26px; }

/* §4 Free tools — free-resources .fr-card component (verbatim values, re-scoped) */
.elt-hub .fr-section { padding: 60px 0; background: #E6EBFF; }
.elt-hub .fr-section-head { margin: 0 auto 36px; max-width: 780px; text-align: center; }
.elt-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;
}
.elt-hub .fr-section h2 { font-size: 36px; line-height: 48px; color: var(--primary-blue); margin-bottom: 10px; }
.elt-hub .fr-section-sub { font-family: var(--font-heading); font-size: 18px; line-height: 28px; font-weight: 500; color: var(--text-dark); }
.elt-hub .fr-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.elt-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 var(--line);
    border-radius: 16px; text-align: center; transition: all .2s ease;
}
.elt-hub .fr-card:hover { border-color: #a0aeff; transform: translateY(-2px); }
.elt-hub .fr-card .fr-icon { color: var(--primary-blue); flex-shrink: 0; }
.elt-hub .fr-card-title { font-family: var(--font-heading); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--primary-blue); }
.elt-hub .fr-card-sub { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-gray); }

/* §6 Form — home .contact-form component (verbatim values, re-scoped) */
.elt-hub .contact-form { padding: 60px 0; background: var(--bg-navy); }
.elt-hub .contact-form-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.elt-hub .contact-form-left { display: flex; align-items: center; justify-content: center; }
.elt-hub .contact-form-left img { width: 100%; height: auto; border-radius: 16px; }

/* §7 FAQ — home .faq-layout accordion (verbatim values, re-scoped) */
.elt-hub .faq-section { padding: 60px 0; background: #fff; }
.elt-hub .faq-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; align-items: start; }
.elt-hub .faq-image-col img { width: 100%; max-width: 420px; height: auto; border-radius: 20px; display: block; }
.elt-hub .faq-container { max-width: 100%; margin: 0; padding: 0; }
.elt-hub .faq-title { font-family: var(--font-heading); font-size: 36px; line-height: 48px; font-weight: 600; color: var(--primary-blue); margin-bottom: 30px; }
.elt-hub .faq-item { background: var(--primary-blue); margin-bottom: 18px; overflow: hidden; border-radius: 8px; }
.elt-hub .faq-question {
    padding: 20px 50px 20px 20px; font-size: 20px; line-height: 30px; font-weight: 400; color: var(--text-white);
    cursor: pointer; position: relative; transition: all 0.3s ease; user-select: none;
}
.elt-hub .faq-question::after {
    content: "\203A"; position: absolute; right: 28px; top: 50%; transform: translateY(-50%) rotate(0deg);
    font-size: 28px; color: #fff; font-weight: 400; transition: transform 0.3s ease; line-height: 1;
}
.elt-hub .faq-question.active::after { transform: translateY(-50%) rotate(90deg); }
.elt-hub .faq-answer {
    background-color: var(--accent-blue); max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 28px;
    font-size: 20px; line-height: 30px; font-weight: 400; color: var(--primary-blue);
}
.elt-hub .faq-answer.active { max-height: 800px; padding: 20px 28px; }
.elt-hub .faq-answer a { color: var(--bg-navy); text-decoration: underline; }

/* Responsive */
@media (max-width: 1024px) {
    .elt-hub .container { padding: 0 40px; }
}
@media (max-width: 900px) {
    .elt-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .elt-hub .contact-form-wrapper { grid-template-columns: 1fr; }
    .elt-hub .faq-layout { grid-template-columns: 1fr; }
    .elt-hub .faq-image-col { display: none; }         /* stack: image drops on narrow, per home */
    .elt-hero h1 { font-size: 34px; }
}
@media (max-width: 768px) {
    .elt-hub .container { padding: 0 20px; }
}
@media (max-width: 620px) {
    .elt-section { padding: 52px 0; }
    .elt-grid--2, .elt-grid--4 { grid-template-columns: 1fr; }
    .elt-hero { padding: 72px 0 64px; }
}