/* ==================================================================
   OIHI Educational — LP2 v4
   Override layer for the "Educational - 3" Figma design (node 2425:3600).
   Loads AFTER styles.v3.css. Replaces lp2.v3.css entirely.

   PALETTE NOTE
   The Figma uses #d6449f / #c65e00. Both fail WCAG AA on white
   (4.05:1 and 4.20:1). This file keeps the corrected v3 tokens
   #d23295 (4.54:1) and #c75300 (4.50:1). Visually near-identical,
   contrast compliant. Do not revert without re-testing.

   PROGRAM COLOUR MAP (per Figma V2, reassigned from LP2 v3)
     ECE Diploma          -> pink   #d23295
     ECA Diploma          -> orange #c75300
     Educational Assistant-> navy   #004a82
   ================================================================== */

:root{
  --plum:#2d0d21;            /* Figma text + practicum background */
  --plum-soft:#6f5b67;       /* footnote text */
  --hero-pink:#ffc2e8;       /* Figma hero background */
  --field-fill:#f7eff4;      /* form field fill, plum-tinted per Figma */
  --plum-grad:linear-gradient(110deg,#2d0d21 0%,#4a1738 45%,#2d0d21 100%);
  --ea-card:#eaf3fc;         /* Educational Assistant card background */
  --ece-card:#fdeaf5;
  --eca-card:#fff2e6;
  --btn-deep:#091948;
  --lp2-grad:linear-gradient(123deg,#d23295 2%,#c75300 134%);
  --lp2-grad-soft:linear-gradient(152deg,#d23295 22%,#c75300 155%);
  --shadow-card:0 18px 48px rgba(45,13,33,.10);
}

/* ---------- Shared section rhythm ---------- */
.lp2 section{position:relative}
.lp2 .container{position:relative;z-index:1}

/* Decorative blobs. Hidden on small screens: they only cost bytes there. */
.deco{position:absolute;pointer-events:none;z-index:0;display:none}
.deco img{display:block;width:100%;height:100%}
@media (min-width:1100px){.deco{display:block}}
@media (prefers-reduced-motion:no-preference){
  .deco{transition:opacity .4s ease}
}

/* ==================== HEADER ==================== */
.lp2 .btn-dark{
  background:var(--plum-grad);
  color:#fff;
  box-shadow:0 4px 14px rgba(45,13,33,.28);
}
.lp2 .btn-dark:hover{box-shadow:0 10px 32px rgba(45,13,33,.45)}
.lp2 .btn-dark svg{color:#fff}

/* ==================== HERO ==================== */
.hero-v4{
  background:var(--hero-pink);
  color:var(--plum);
  padding:120px 0 56px;
  overflow:hidden;
  /* Fills the first screen. min-height (not height) so it still grows when the
     form is taller than the viewport. svh accounts for mobile browser chrome. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
@media (min-width:900px){
  /* +90px compensates the negative margin that tucks the hero under the header */
  .hero-v4{padding:170px 0 90px;margin-top:-90px;min-height:calc(100vh + 90px)}
}
/* Below 900px the header is static instead of floating over the hero, so the
   large top padding is not clearing anything — it was just empty pink. */
@media (max-width:899px){
  .hero-v4{padding-top:32px}
}
.hero-v4 .hero-inner{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:grid;gap:32px;align-items:start;
}
@media (min-width:1000px){
  .hero-v4 .hero-inner{grid-template-columns:1fr minmax(460px,540px);gap:60px}
}
.hero-v4 .deco-hero-a{top:-150px;right:-60px;width:520px;height:495px}
.hero-v4 .deco-hero-b{bottom:-40px;left:-70px;width:300px;height:340px}

/* Accreditation chip — white pill per Figma */
.chip-accredited{
  display:inline-flex;align-items:center;gap:8px;
  /* .hero-copy is a flex column, whose default align-items:stretch was pulling
     this pill to the full column width despite the inline-flex. */
  align-self:flex-start;
  background:#fff;color:var(--plum);
  height:40px;padding:0 18px;border-radius:20px;
  font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.2;
}
.chip-accredited img{width:18px;height:18px;flex-shrink:0}
@media (max-width:600px){
  .chip-accredited{height:auto;padding:10px 16px;border-radius:16px;letter-spacing:.04em}
}

.hero-v4 h1{
  margin-top:28px;
  font-size:clamp(34px,5.2vw,60px);
  font-weight:400;line-height:1.05;letter-spacing:-.02em;
  color:#2d0d21;max-width:620px;
}
.hero-v4 .hero-lead{
  display:block;
  margin-top:24px;font-size:16px;line-height:1.5;
  color:var(--plum);max-width:560px;
}
.hero-v4 .hero-media{
  margin-top:28px;border-radius:25px;overflow:hidden;
  background:rgba(45,13,33,.06);
  box-shadow:0 14px 40px rgba(45,13,33,.16);
  aspect-ratio:620/186;
}
.hero-v4 .hero-media img{width:100%;height:100%;object-fit:cover}

/* Hero form card — accent bar + body, per Figma node 2425:3609 */
.form-card-v4{
  background:var(--lp2-grad) top left/100% 8px no-repeat, #fff;
  color:var(--text);
  border-radius:24px;
  padding:0;gap:0;
  box-shadow:0 24px 64px rgba(45,13,33,.24);
}
.form-card-v4 .accent-bar{height:8px;flex-shrink:0}   /* espacador: a faixa e pintada no fundo do card */
.form-card-v4 .form-body{
  display:flex;flex-direction:column;gap:14px;
  padding:28px 24px 26px;
}
@media (min-width:900px){
  .form-card-v4 .form-body{padding:34px 40px 36px}
}
.form-card-v4 h2{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--plum)}
.form-card-v4 .form-sub{font-size:13px;color:var(--muted);line-height:1.5}
.form-card-v4 .field input,
.form-card-v4 .field select,
.form-card-v4 .iti__tel-input{
  height:48px;font-size:14px;border-radius:12px;background:var(--field-fill);
}
.form-card-v4 .field input::placeholder{color:#786871;opacity:1}
/* 16px minimum on touch: anything smaller makes iOS zoom the viewport on focus.
   styles.v3.css set this deliberately; do not lower it. */
@media (max-width:899px){
  .form-card-v4 .field input,
  .form-card-v4 .field select,
  .form-card-v4 .iti__tel-input{font-size:16px;height:46px}
}
.form-card-v4 .field{font-size:13px;color:var(--plum)}
.form-card-v4 .btn-submit{
  margin-top:6px;padding:18px;font-size:16px;
  background:var(--plum-grad);
  box-shadow:0 6px 18px rgba(45,13,33,.28);
}
.form-card-v4 .btn-submit:hover{box-shadow:0 12px 34px rgba(45,13,33,.42)}
.form-card-v4 .consent{font-size:12px;line-height:1.5}

/* Label text kept for screen readers only — the design labels fields by
   placeholder alone, which would otherwise leave inputs unnamed. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Program of Interest listbox ---------- */
.field-combo{position:relative;display:block}
.combo-btn{
  width:100%;height:48px;padding:0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--field-fill);border-radius:12px;
  font-size:14px;color:var(--plum);text-align:left;
}
@media (max-width:899px){.combo-btn{height:46px;font-size:16px}}
.combo-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-value.is-placeholder{color:#786871}
.combo-caret{flex-shrink:0;transition:transform .2s ease}
.combo-btn[aria-expanded="true"] .combo-caret{transform:rotate(180deg)}
.field-combo.is-invalid .combo-btn{outline:2px solid var(--pink);background:rgba(210,50,149,.06)}

.combo-list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;
  list-style:none;margin:0;padding:8px;
  background:#fff;border-radius:14px;
  box-shadow:0 12px 32px rgba(45,13,33,.16);
  border:1px solid rgba(45,13,33,.08);
}
.combo-list[hidden]{display:none}
/* Fixed height with an inner scrollbar: predictable, and it cannot run past the
   viewport the way a content-sized panel did. */
.combo-list{max-height:240px;overflow-y:auto}
/* Opens upward when the panel would run past the bottom of the screen. */
.combo-list.is-up{top:auto;bottom:calc(100% + 8px)}
.combo-opt{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;cursor:pointer;
  font-size:14px;line-height:1.3;color:var(--plum);
}
.combo-opt:hover,.combo-opt.is-active{background:var(--field-fill)}
.combo-opt[aria-selected="true"]{font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
/* styles.v3.css rounds the country button to 10px while every other control
   here is 12px. */
.form-card-v4 .iti__selected-country{
  color:var(--plum);
  border-top-left-radius:12px;border-bottom-left-radius:12px;
}
.form-card-v4 .iti{--iti-border-radius:12px}
.dot-ece{background:var(--pink)}
.dot-eca{background:var(--orange)}
.dot-ea{background:var(--navy)}
@media (prefers-reduced-motion:reduce){.combo-caret{transition:none}}

/* Intake note inside the card */
.intake-note{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12px;font-weight:500;line-height:1.55;color:var(--blue);
  margin:-2px 0 4px;
}
.intake-note svg{flex-shrink:0;margin-top:2px}

/* ==================== PROGRAMS ==================== */
.programs-v4{background:#fff;padding:64px 0;overflow:hidden}
@media (min-width:900px){.programs-v4{padding:110px 0}}
.programs-v4 .deco-programs{top:60px;right:-180px;width:460px;height:772px}

.programs-head{display:grid;gap:24px;margin-bottom:40px}
@media (min-width:900px){
  .programs-head{grid-template-columns:620px 1fr;gap:60px;align-items:start;margin-bottom:56px}
}
.programs-head .eyebrow{color:#b3186f;letter-spacing:.1em;font-size:13px}
.programs-head h2{
  margin-top:18px;
  font-size:clamp(26px,3.6vw,42px);font-weight:500;
  line-height:1.08;letter-spacing:-.02em;color:var(--plum);
}
.programs-head-note{font-size:16px;line-height:1.5;color:var(--plum)}
/* The exported SVG carries its own dark circle, so no background here. */
.badge-arrow{width:43px;height:43px;display:block;margin-bottom:20px;flex-shrink:0}

/* Icons inside the dark buttons, swapped from inline SVG to the Figma export */
.lp2 .btn-ic{flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.lp2 .btn-dark:hover .btn-ic,
.lp2 .btn-ea:hover .btn-ic{transform:rotate(-12deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){.lp2 .btn-ic{transition:none}}

/* Program card — photo one side, body the other */
.pcard{
  border-radius:32px;overflow:hidden;
  display:grid;gap:0;
  margin-bottom:28px;
  box-shadow:var(--shadow-card);
}
.pcard:last-child{margin-bottom:0}
@media (min-width:900px){
  .pcard{grid-template-columns:500px 1fr}
  .pcard-reverse{grid-template-columns:1fr 500px}
  .pcard-reverse .pcard-media{order:2}
  .pcard-reverse .pcard-body{order:1}
}
.pcard-ece{background:var(--ece-card)}
.pcard-eca{background:var(--eca-card)}
.pcard-ea{background:var(--ea-card)}

.pcard-media{position:relative;min-height:240px;background:rgba(45,13,33,.06)}
.pcard-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
@media (max-width:899px){
  .pcard-media{aspect-ratio:16/10;min-height:0}
}

/* Floating stat badge over the photo */
.pstat{
  position:absolute;left:20px;bottom:20px;z-index:2;
  background:#fff;border-radius:16px;padding:14px 18px;
  display:flex;flex-direction:column;gap:6px;max-width:210px;
  box-shadow:0 10px 28px rgba(45,13,33,.16);
}
.pstat-wide{max-width:290px}
.pstat-num{font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.05}
.pcard-ece .pstat-num{color:var(--pink)}
.pcard-eca .pstat-num{color:var(--orange)}
.pstat-label{font-size:12px;line-height:1.35;color:var(--soft)}
.pstat-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px}
.pstat-top > span:first-child{color:var(--navy);font-weight:500}
.pstat-pill{background:var(--navy);color:#fff;padding:4px 9px;border-radius:56px;font-weight:500;white-space:nowrap}

.pcard-body{display:flex;flex-direction:column;gap:18px;padding:32px 24px 36px}
@media (min-width:900px){.pcard-body{padding:44px}}
.pcard-body .tag{font-size:15px;padding:9px 18px;border-radius:20px}
.tag-navy{background:var(--navy);color:#fff}
.pcard-title{font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--plum)}
.pcard-desc{font-size:16px;line-height:1.5;color:var(--plum)}
.pcard .features{gap:12px}
.pcard .features li{font-size:16px;font-weight:400;color:var(--plum);gap:12px;line-height:1.5}
.pcard .features li img{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.pcard .note{font-size:13px;line-height:1.4;color:var(--plum-soft)}

/* Inline CTA on the EA card */
.btn-ea{
  align-self:flex-start;margin-top:4px;
  display:inline-flex;align-items:center;gap:14px;
  height:54px;padding:0 22px 0 28px;border-radius:27px;
  background:linear-gradient(110deg,#091948 0%,#123070 45%,#091948 100%);
  background-size:200% 100%;background-position:0% 50%;
  color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;
  box-shadow:0 6px 18px rgba(9,25,72,.28);
  transition:background-position .6s ease,transform .25s ease,box-shadow .3s ease;
}
.btn-ea:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 12px 32px rgba(9,25,72,.42)}
.btn-ea svg{width:26px;height:26px;flex-shrink:0}

/* ==================== PRACTICUM (tabbed) ==================== */
.practicum-v4{
  background:#2d0d21;color:#fff;
  padding:64px 0;overflow:hidden;
}
@media (min-width:900px){.practicum-v4{padding:110px 0}}
.practicum-v4 .deco-prac-a{top:60px;right:-100px;width:250px;height:425px}
.practicum-v4 .deco-prac-b{bottom:-80px;left:-170px;width:420px;height:595px}

.practicum-v4 h2{
  font-size:clamp(26px,3.4vw,42px);font-weight:400;
  line-height:1.1;letter-spacing:-.02em;text-align:center;color:#fff;
  max-width:960px;margin:0 auto 36px;
}
.practicum-v4 .p-tabs{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-bottom:36px;padding:0;
}
.practicum-v4 .p-tab{
  flex:0 0 auto;max-width:none;
  height:52px;padding:0 22px;border-radius:26px;
  background:#fff;color:var(--plum);border:0;
  font-size:16px;font-weight:500;letter-spacing:-.01em;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.practicum-v4 .p-tab:hover{transform:translateY(-1px)}
.practicum-v4 .p-tab[aria-selected="true"]{background:var(--pink);color:#fff}
.practicum-v4 .p-tab:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:600px){
  .practicum-v4 .p-tabs{gap:8px}
  .practicum-v4 .p-tab{height:44px;padding:0 16px;font-size:14px}
}

.practicum-v4 .p-cards{display:grid;gap:20px}
/* styles.v3.css has .p-cards[hidden]{display:none} at (0,2,0). The rule above is
   also (0,2,0) and this sheet loads later, so display:grid was winning and every
   tab panel rendered at once. This reset restores the hidden behaviour. */
.practicum-v4 .p-cards[hidden]{display:none}
.p-cards.is-fading-in{animation:fadeInUp .35s ease}
@media (min-width:900px){.practicum-v4 .p-cards{grid-template-columns:repeat(3,1fr);gap:28px}}
.practicum-v4 .p-card{
  background:#fff;color:var(--plum);
  border:0;border-radius:24px;padding:32px;
  display:flex;flex-direction:column;gap:14px;
  backdrop-filter:none;
}
.pmarker{width:44px;height:12px;border-radius:6px;flex-shrink:0}
.practicum-v4 .p-card h3{
  font-size:24px;font-weight:500;line-height:1.33;
  letter-spacing:-.01em;color:var(--plum);margin:0;
}
.practicum-v4 .p-card p{font-size:16px;line-height:1.5;color:var(--plum);margin:0}

/* Marker colour follows the programme, not the card position */
.p-cards[data-tab="ece"] .pmarker{background:var(--pink)}
.p-cards[data-tab="eca"] .pmarker{background:var(--orange)}
.p-cards[data-tab="ea"]  .pmarker{background:var(--navy)}

/* ==================== ROLES ==================== */
.roles-v4{background:#ffebf7;padding:64px 0;overflow:hidden}
@media (min-width:900px){.roles-v4{padding:110px 0}}
.roles-v4 .deco-roles{bottom:-60px;right:-190px;width:480px;height:693px}
.roles-v4 h2{
  font-size:clamp(26px,3.4vw,42px);font-weight:400;
  line-height:1.14;letter-spacing:-.02em;color:var(--plum);
  max-width:880px;margin-bottom:40px;
}
@media (min-width:900px){.roles-v4 h2{margin-bottom:56px}}
.roles-grid{display:grid;gap:24px}
@media (min-width:900px){.roles-grid{grid-template-columns:repeat(3,1fr);gap:32px}}

.rcard{
  background:#fff;border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
}
.rcard .accent-bar{height:8px;flex-shrink:0}
.rcard-leadership .accent-bar{background:var(--pink)}
.rcard-schoolboard .accent-bar{background:var(--navy)}
.rcard-specialized .accent-bar{background:var(--orange)}
.rcard-body{padding:32px;display:flex;flex-direction:column;gap:0;flex:1}
.rcard-body img.rcard-icon{width:56px;height:56px}
.rcard h3{
  margin-top:22px;
  font-size:24px;font-weight:500;line-height:1.33;
  letter-spacing:-.01em;color:var(--plum);
}
.rcard hr{border:0;border-top:1px solid rgba(45,13,33,.12);margin:22px 0}
.rcard ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.rcard li{display:flex;gap:20px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--plum)}
.rcard li::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:.45;flex-shrink:0;margin-top:8px;
}
/* Each card's bullets take the colour of its own top bar */
.rcard-leadership li::before{background:var(--pink);opacity:1}
.rcard-schoolboard li::before{background:var(--navy);opacity:1}
.rcard-specialized li::before{background:var(--orange);opacity:1}
.rcard li > span{flex:1}
.tag-direct{
  display:inline-block;margin-top:10px;
  background:var(--navy);color:#fff;
  padding:5px 12px;border-radius:14px;
  font-size:12px;font-weight:500;line-height:1.5;letter-spacing:-.01em;
}


/* ==================== FOOTER ==================== */
.lp2 .site-footer{
  background:var(--plum);color:#fff;
  border-top:0;
}
.lp2 .site-footer .copy,
.lp2 .site-footer .legal,
.lp2 .site-footer .legal a{color:#fff}
.lp2 .site-footer .legal a:hover{color:var(--hero-pink)}
/* The disclaimer paragraph is gone. Without this the grid keeps its third row
   and leaves an empty band under the copyright line. */
@media (min-width:900px){
  .lp2 .footer-grid{
    grid-template-areas:
      "logo socials"
      "copy legal";
    /* 1fr/1fr split the row evenly and squeezed the four legal links, breaking
       each one across two lines below ~1200px. The copy line only needs its own
       width; the rest goes to the links. */
    grid-template-columns:auto 1fr;
    /* styles.v3.css ships 32px; the design wants the two rows further apart */
    row-gap:72px;
  }
  /* Wrap between links if the row still runs out of room — never inside one. */
  .lp2 .site-footer .legal{flex-wrap:wrap;justify-content:flex-end}
  .lp2 .site-footer .legal > *{white-space:nowrap}
  /* Each social link carries 6px of padding for the touch target, which pushed
     the last icon 6px inside the legal row's right edge. Pull it back so the
     two right edges line up optically. */
  .lp2 .site-footer .socials{margin-right:-6px}
}
.lp2 .site-footer .copy-mark{color:inherit}
.lp2 .socials a{color:#d6449f}
.lp2 .socials svg{fill:#d6449f}
/* Needs to out-specify ".site-footer .legal a" above — the link lives inside .legal */
.lp2 .site-footer .legal a.platty-link{color:#d84ba2}
.lp2 .site-footer .legal a.platty-link:hover{color:#ff8ad2}

/* ==================== FOCUS / MOTION FLOOR ==================== */
.lp2 a:focus-visible,
.lp2 button:focus-visible,
.lp2 input:focus-visible,
.lp2 select:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.practicum-v4 a:focus-visible,
.practicum-v4 button:focus-visible{outline-color:#fff}
.site-footer a:focus-visible{outline:3px solid #ffc2e8;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .btn-ea,.practicum-v4 .p-tab{transition:none}
}

/* ==================== MOBILE TRIM ==================== */
@media (max-width:899px){
  .pcard{border-radius:24px}
  .rcard-body{padding:24px}
  .practicum-v4 .p-card{padding:24px;border-radius:20px}
  .practicum-v4 .p-card h3{font-size:20px}
}

/* ==================== SKIP LINK ==================== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#fff;color:var(--navy);
  padding:14px 20px;border-radius:0 0 12px 0;
  font-size:15px;font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.skip-link:focus{left:0}


/* ==================== CARRIED OVER FROM lp2.v3.css ====================
   Referenced by script.v4.js and index.html. Not present in styles.v3.css. */
.copy-mark{color:var(--blue)}
.is-invalid-outline{outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}
.nav-links.is-open{
  display:flex;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;background:#fff;padding:20px;gap:16px;
  border-radius:20px;margin-top:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}