/* =========================================================
   NCEA Use Case — Prototype Guide section styles
   ========================================================= */

:root {
  --uc-eng:        #185fa5;
  --uc-eng-soft:   #e9f1fb;
  --uc-eng-border: #c9def0;
  --uc-med:        #0f6e56;
  --uc-med-soft:   #e6f3ee;
  --uc-med-border: #c1dfd2;
  --uc-gold:       #f5b341;
  --uc-gold-soft:  #fff6e2;
  --uc-text:       #1f2a44;
  --uc-muted:      #6c7a93;
  --uc-border:     #e6eaf2;
  --uc-card-bg:    #ffffff;
  --uc-radius:     14px;
  --uc-shadow:     0 4px 16px rgba(20, 30, 60, 0.06);
}

/* Stream selector */
.stream-sel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.sbtn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0px 14px;
  padding: 18px 22px;
  background: #fff;
  border: 1.5px solid var(--uc-border);
  border-radius: var(--uc-radius);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.sbtn:hover { border-color: #b7c2d6; }

.sbtn .ic {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--uc-eng-soft);
  color: var(--uc-eng);
  font-size: 22px;
}

.sbtn .tl {
  font-weight: 700;
  font-size: 16px;
  color: var(--uc-text);
}

.sbtn .sl {
  font-size: 12px;
  color: var(--uc-muted);
}

.sbtn.ae {
  background: var(--uc-eng-soft);
  border-color: var(--uc-eng-border);
  box-shadow: var(--uc-shadow);
}

.sbtn.ae .ic { background: var(--uc-eng); color: #fff; }

.sbtn.am {
  background: var(--uc-med-soft);
  border-color: var(--uc-med-border);
  box-shadow: var(--uc-shadow);
}

.sbtn.am .ic { background: var(--uc-med); color: #fff; }

#bm .ic { background: var(--uc-med-soft); color: var(--uc-med); }

/* Level navigation */
.lvnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.lb {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--uc-border);
  background: #fff;
  color: var(--uc-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.lb:hover { border-color: #b7c2d6; }

.lb.xe { background: var(--uc-eng); color: #fff; border-color: var(--uc-eng); }
.lb.xm { background: var(--uc-med); color: #fff; border-color: var(--uc-med); }

/* Section header inside a panel */
.sh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sh h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--uc-text);
}

.badge-it {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--uc-gold-soft);
  color: #8a5a00;
}

.badge-it.be2 { background: #fff3d6; color: #8a5a00; }
.badge-it.bm2 { background: #d9efe5; color: #0c5d4a; }

/* Cards */
.card-it {
  background: var(--uc-card-bg);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--uc-shadow);
}

.card-it.ce { border-left: 4px solid var(--uc-eng); }
.card-it.cm { border-left: 4px solid var(--uc-med); }

.ct {
  font-weight: 700;
  font-size: 15px;
  color: var(--uc-text);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--uc-border);
}

/* Info list */
.ilist { display: flex; flex-direction: column; gap: 10px; }

.irow {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  font-size: 14px;
}

.irow .ik {
  font-weight: 700;
  color: var(--uc-eng);
  font-size: 13px;
}

.irow .iv { color: var(--uc-text); }

@media (max-width: 575.98px) {
  .irow { grid-template-columns: 1fr; gap: 2px; }
  .irow .ik { font-size: 12px; }
}

/* Subject grid */
.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.si {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  background: #fafbfd;
}

.si .sn2 { font-weight: 700; font-size: 14px; color: var(--uc-text); }
.si .sc {
  font-size: 12px;
  color: var(--uc-muted);
  flex: 1;
  line-height: 1.4em;
}
.si .stype {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2em;
}

.si.se { background: #e6f1fb; border-color: #c9def0; }
.si.se .stype.ste { color: #185fa5; }
.si.sm { background: #e1f5ee; border-color: #9fe1cb; }
.si.sm .stype.stm { color: #0f6e56; }
.si.sn { background: #f5f3ee; border-color: #e4dfd2; }
.si.sn .stype.stn { color: #6c757d; }

/* Alert box */
.alrt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid;
}

.alrt .aico {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

.alrt.ag { background: var(--uc-gold-soft); border-color: #f5dca0; color: #6e4a00; }
.alrt.ag .aico { color: var(--uc-gold); }

/* Credit bar (Level 1+) */
.cbar { margin: 4px 0 18px; }

.crow {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin: 8px 0 4px;
  color: var(--uc-text);
}

.crow span:last-child { font-weight: 700; }

.prog {
  height: 8px;
  background: #eef1f7;
  border-radius: 999px;
  overflow: hidden;
}

.pf {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.pf.pe { background: var(--uc-eng); }
.pf.pm { background: var(--uc-med); }

/* Score comparison */
.scmp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 16px;
}

.sbox {
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  text-align: center;
}

.slv {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slv.ca  { background: #e8eef9; color: #2b57f2; }
.slv.cm3 { background: #fff1d6; color: #8a5a00; }
.slv.cg3 { background: #d9efe5; color: #0c5d4a; }

.snum { display: block; font-weight: 800; font-size: 20px; margin: 6px 0; color: var(--uc-text); }
.snum.ca  { color: #2b57f2; }
.snum.cm3 { color: #8a5a00; }
.snum.cg3 { color: #0c5d4a; }

.slb { display: block; font-size: 12px; color: var(--uc-muted); }

/* Endorsement grid */
.egrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.ebox {
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

.eb {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eb.ebm { background: #fff1d6; color: #8a5a00; }
.eb.ebe { background: #d9efe5; color: #0c5d4a; }

.etl { font-weight: 700; font-size: 14px; margin: 8px 0 4px; color: var(--uc-text); }
.er  { font-size: 13px; color: var(--uc-muted); line-height: 1.5; }

/* Assessment grid */
.agrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.abox {
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  padding: 12px;
  background: #fafbfd;
}

.atype {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.atype.ai  { background: #e8eef9; color: #2b57f2; }
.atype.ae3 { background: #fff1d6; color: #8a5a00; }

.aitems { font-size: 13px; color: var(--uc-text); line-height: 1.7; }

/* Tables */
.etbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}

.etbl th,
.etbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--uc-border);
  text-align: left;
}

.etbl thead th {
  background: #f7f9fc;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--uc-muted);
}

.etbl tbody tr:last-child td { border-bottom: none; }

/* Pills inside tables */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.pill.pa  { background: #e8eef9; color: #2b57f2; }
.pill.pm2 { background: #fff1d6; color: #8a5a00; }
.pill.pe2 { background: #d9efe5; color: #0c5d4a; }

/* Medical journey pieces */
.mbtd { font-size: 13px; color: var(--uc-text); line-height: 1.6; padding: 6px 0; }

.mbts { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.tag.tm { background: var(--uc-med-soft); color: var(--uc-med); }
.tag.tn { background: #f3f5fb; color: var(--uc-muted); }

/* Tagit */
.tagit {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px 4px 2px 0;
}

.tagit.tagit-eng { background: var(--uc-eng-soft); color: var(--uc-eng); }
.tagit.tagit-med { background: var(--uc-med-soft); color: var(--uc-med); }

/* Info row (student profile blocks) */
.info-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--uc-border);
}

.info-row:last-child { border-bottom: none; }
.info-row .info-label { font-weight: 700; color: var(--uc-eng); }
.info-row .info-text  { color: var(--uc-text); }

/* Legend */
.legend {
  font-size: 13px;
  color: var(--uc-muted);
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Mobile */
@media (max-width: 767.98px) {
  .stream-sel { grid-template-columns: 1fr; }
  .sh h2 { font-size: 18px; }
  .ct { font-size: 14px; }
}

/* =========================================================
   Book Contact Section — Enrol Your Child Today
   (copied from main.css; safe to remove main.css after migration)
   ========================================================= */

.book-contact-section-3 {
  position: relative;
  z-index: 9;
}

.book-contact-section-3 .shape-1 {
  position: absolute;
  top: 180px;
  left: 24%;
  z-index: -1;
  opacity: 0.3;
}

.book-contact-section-3 .shape-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0.3;
}

.book-contact-section-3 .shape-3 {
  position: absolute;
  top: 40%;
  right: 40px;
  z-index: -1;
  opacity: 0.3;
}

.book-contact-section-3::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: rgb(4 19 61 / 89%);
  z-index: -1;
}

.book-contact-section-3 .content,
.book-contact-section-3 .content p,
.book-contact-section-3 .content .text {
  color: var(--white);
}

.book-contact-section-3 .content .text {
  font-size: 18px;
  max-width: 565px;
  margin-bottom: 20px;
}

.book-contact-section-3 .content .info-content {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
}

.book-contact-section-3 .content .info-content .icon {
  width: 56px;
  height: 59px;
  line-height: 59px;
  background-color: var(--theme);
  text-align: center;
  border-radius: 16px;
}

.book-contact-section-3 .content .info-content .info-cont p {
  font-weight: 600;
  color: var(--white);
}

.book-contact-section-3 .content .info-content .info-cont h3 {
  font-size: 30px;
}

.book-contact-section-3 .content .info-content .info-cont h3 a {
  color: var(--white);
}

.book-contact-section-3 .content .info-content .info-cont h3 a:hover {
  color: var(--theme);
}

@media (max-width: 767px) {
  .book-contact-section-3 .content .info-content { margin-top: 30px; }
  .book-contact-section-3 .content .info-content .info-cont h3 { font-size: 23px; }
}

@media (max-width: 575px) {
  .book-contact-section-3 .content .info-content .info-cont h3 { font-size: 20px; }
}

@media (max-width: 470px) {
  .book-contact-section-3 .content .info-content { margin-top: 18px; }
}

/* =========================================================
   NCEA Student Pathway Guide section styles
   ========================================================= */

.timeline-wrapper {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #dee2e6;
  margin-left: 50px;
}

.timeline-dot {
  position: absolute;
  left: -65px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  background: #fff;
}

.phase-label {
  position: absolute;
  left: -85px;
  top: 40px;
  font-size: 10px;
  text-transform: uppercase;
  color: #6c757d;
  width: 75px;
  text-align: center;
}

/* Component Styles */
.Pathwaycard {
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 20px;
}

.Pathwaycard-eng { border-left: 4px solid #185fa5 !important; }
.Pathwaycard-med { border-left: 4px solid #0f6e56 !important; }

.dot-eng { background: #e6f1fb; color: #185fa5; border-color: #b5d4f4; }
.dot-med { background: #e1f5ee; color: #0f6e56; border-color: #9fe1cb; }

.tagit {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 15px;
  display: inline-block;
  margin: 2px;
  font-weight: 500;
  line-height: normal;
}

.tagit-eng     { background: #e6f1fb; color: #0c447c; border: 1px solid #b5d4f4; }
.tagit-med     { background: #e1f5ee; color: #085041; border: 1px solid #9fe1cb; }
.tagit-neutral { background: #f1f3f5; color: #495057; border: 1px solid #dee2e6; }
.tagit-gold    { background: #faeeda; color: #633806; border: 1px solid #fac775; }

.info-row {
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
}

.info-label {
  font-weight: 600;
  min-width: 90px;
  color: #212529;
}

.info-text { color: #495057; }

.uni-Pathwaycard {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  height: 100%;
}

.r-pill {
  font-size: 10px;
  padding: 0px 8px;
  border-radius: 10px;
  margin-right: 5px;
  margin-top: 5px;
  display: inline-block;
}

.badge-citizen  { background: #1a3fa8; color: #fff; }
.badge-resident { background: #e6f1fb; color: #0c447c; }
.badge-pr       { background: #faeeda; color: #633806; }