/* ==========================================================================
   ARFET design system: type scale, colour and buttons
   One system for every page. Loaded last so it governs the older
   per-page styles beneath it.

   Palette   Navy #204574 · Orange #F26522 · White #FFFFFF · Light grey #F3F5F8
   Headings  Poppins 700 (H1, H2) and 600 (H3-H6)
   Body      Open Sans 400, 17px desktop / 16px mobile, line-height 1.5
   Small     Open Sans 400, 14px
   Labels    Poppins 600, 14px (uppercase eyebrows)
   Buttons   Poppins 600, 16px. Orange primary, navy outline secondary
   Weights   400, 600 and 700 only
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --arfet-navy: #204574;
  --arfet-orange: #F26522;
  --arfet-white: #FFFFFF;
  --arfet-light: #F3F5F8;
  --arfet-heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --arfet-body-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Type scale: desktop values */
  --t-h1: 36px;
  --t-h2: 26px;
  --t-h3: 18px;
  --t-body: 17px;
  --t-small: 14px;
  --t-label: 14px;
  --t-button: 16px;
  --t-figure: 22px;
  --t-icon: 24px;
  --lh-heading: 1.25;
  --lh-body: 1.5;
}

@media (max-width: 768px) {
  :root {
    --t-h1: 28px;
    --t-h2: 22px;
    --t-h3: 17px;
    --t-body: 16px;
    --t-figure: 19px;
  }
}

/* ---- Base ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html body {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
  overflow-wrap: break-word;
}

/* ---- Headings -------------------------------------------------------- */
html body h1 {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-h1) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: var(--arfet-navy) !important;
}

html body h2 {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-h2) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: var(--arfet-navy) !important;
}

html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-h3) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--arfet-navy) !important;
}

/* ---- Body text ------------------------------------------------------- */
html body p,
html body li,
html body td,
html body th,
html body dd,
html body dt,
html body blockquote,
html body summary,
html body .lead {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

html body summary {
  font-weight: 600 !important;
}

/* Inline emphasis keeps the size of the text around it. */
html body strong,
html body b {
  font-family: var(--arfet-body-font) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
}

/* Running text stays to a comfortable measure (about 60-75 characters). */
html body p {
  max-width: 72ch;
}

/* Short intros under a centred section heading stay centred. */
html body .section-head p,
html body .hero p,
html body [class*="hero"] p {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Small text and captions ----------------------------------------- */
html body small,
html body .small,
html body figcaption,
html body .hero-note,
html body .image-credit,
html body .disclaimer,
html body .scholarship-note,
html body .scholarship-disclaimer,
html body p.small,
html body p.hero-note {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-small) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

/* ---- Eyebrow labels --------------------------------------------------- */
html body .eyebrow,
html body .kicker,
html body .featured-label,
html body .badge,
html body .university {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-label) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
}

/* ---- Figures and icons ------------------------------------------------ */
html body .num,
html body .year,
html body .deadline,
html body .sm-n,
html body .stat-number {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-figure) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body .card-icon,
html body .trust-icon,
html body .icon-small {
  font-size: var(--t-icon) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* ---- Links ------------------------------------------------------------ */
html body a {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

html body .card-link {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
}

/* ---- Buttons and navigation ------------------------------------------- */
html body .btn,
html body a.btn,
html body .btn-career,
html body .fbtn,
html body .arfet-btn,
html body a.button,
html body button,
html body input[type="submit"],
html body .nav-burger,
html body nav a,
html body .nav a,
html body .site-header a,
html body header a {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* ---- Footer links ----------------------------------------------------- */
html body footer a {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
}

/* ---- Form labels and fields ------------------------------------------- */
html body label {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

html body input,
html body select,
html body textarea {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--arfet-navy) !important;
  background-color: var(--arfet-white) !important;
  border-color: var(--arfet-light) !important;
}

/* ---- Palette: orange calls to action ---------------------------------- */
html body .btn:not(.secondary),
html body a[class*="btn"]:not(.secondary),
html body .btn-career,
html body a.button,
html body button.button,
html body button[type="submit"],
html body input[type="submit"] {
  background: var(--arfet-orange) !important;
  color: var(--arfet-white) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html body .btn:not(.secondary):hover,
html body a[class*="btn"]:not(.secondary):hover,
html body .btn-career:hover,
html body a.button:hover,
html body button.button:hover,
html body button[type="submit"]:hover,
html body input[type="submit"]:hover {
  background: var(--arfet-navy) !important;
}

/* Secondary action: navy outline. */
html body .btn.secondary,
html body a[class*="btn"].secondary {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
  background: var(--arfet-white) !important;
  color: var(--arfet-navy) !important;
  border: 2px solid var(--arfet-navy) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}

/* ---- Headings and text on dark panels --------------------------------- */
html body .dark h1,
html body .dark h2,
html body .dark h3,
html body .dark h4,
html body .dark h5,
html body .dark h6,
html body footer h1,
html body footer h2,
html body footer h3,
html body footer h4,
html body footer h5,
html body footer h6,
html body footer p,
html body footer li,
html body footer span,
html body footer small,
html body footer label {
  color: var(--arfet-white) !important;
}

html body .gc-cta h1,
html body .gc-cta h2,
html body .gc-cta h3,
html body .gc-cta p,
html body .gc-cta li,
html body .gc-cta span {
  color: var(--arfet-white) !important;
}

/* ---- Media and wide content must never force sideways scrolling ------- */
img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

/* ---- Overrides for older nested selectors ------------------------------
   Some pages carry older rules with more specific selectors. These match
   them so the one type scale applies everywhere. */
html body [class] small,
html body [class] [class] small {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-small) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

html body [class] span,
html body [class] [class] span {
  font-size: inherit !important;
  line-height: inherit !important;
}

html body [class] h1,
html body [class] h2,
html body [class] [class] h1,
html body [class] [class] h2 {
  font-family: var(--arfet-heading-font) !important;
  letter-spacing: 0 !important;
}

html body [class] h1,
html body [class] [class] h1 {
  font-size: var(--t-h1) !important;
  font-weight: 700 !important;
}

html body [class] h2,
html body [class] [class] h2 {
  font-size: var(--t-h2) !important;
  font-weight: 700 !important;
}

html body [class] strong,
html body [class] b,
html body [class] [class] strong {
  font-size: inherit !important;
  font-weight: 700 !important;
}

/* ---- Footer copyright line, lead paragraphs and brand tagline --------- */
html body .footer-bottom,
html body .footer-bottom span,
html body footer .footer-bottom a {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-small) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

html body [class] .lead,
html body .lead {
  font-family: var(--arfet-body-font) !important;
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}

html body .brand-tag,
html body .brand-tag * {
  font-size: var(--t-small) !important;
  line-height: 1.3 !important;
}

html body .brand-tag small,
html body .brand-tag span,
html body span .brand-tag small {
  font-size: var(--t-small) !important;
}

html body .site-header .brand span.brand-tag small {
  font-size: var(--t-small) !important;
}

/* ---- Footer: Follow us buttons -------------------------------------- */
html body .follow-us {
  margin: 16px 0 12px;
}

html body .follow-us h3 {
  margin: 0 0 10px !important;
}

html body .follow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html body a.follow-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
  background: var(--arfet-orange) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
}

html body a.follow-btn:hover {
  background: var(--arfet-navy) !important;
}

html body a.follow-btn svg {
  flex: 0 0 auto;
}

/* ---- Badges: space between adjacent labels -------------------------- */
html body .badge {
  display: inline-block;
  margin: 0 8px 8px 0 !important;
}

/* ---- Spacing: sections and card grids ------------------------------- */
html body section {
  padding-top: clamp(32px, 4vw, 56px) !important;
  padding-bottom: clamp(32px, 4vw, 56px) !important;
}

html body .grid,
html body .cards,
html body .card-grid,
html body [class$="-grid"]:not(.footer-grid):not(.hero-grid):not(.immigration-hero-grid) {
  gap: 20px !important;
}

html body .card,
html body article {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- Tables must fit a phone screen --------------------------------- */
html body table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  html body table,
  html body table tbody,
  html body table tr,
  html body table td,
  html body table th {
    display: revert;
  }

  html body table td,
  html body table th {
    word-break: break-word !important;
    white-space: normal !important;
    padding: 8px !important;
  }
}

/* ---- Document pages: space between paragraphs and list items ---------- */
html body .arfet-doc p {
  margin: 0 0 16px !important;
}

html body .arfet-doc ul {
  margin: 0 0 18px !important;
  padding-left: 22px !important;
}

html body .arfet-doc li {
  margin-bottom: 8px !important;
}

/* ---- Document pages: heading and sub-heading align left like the rest --- */
html body .arfet-doc h1,
html body .arfet-doc .doc-sub {
  text-align: left !important;
}

/* ---- Navigation: "Follow us on our app" link inside the Online Learning menu */
html body .nav-menu a.app-link {
  font-family: var(--arfet-heading-font) !important;
  font-size: var(--t-button) !important;
  font-weight: 600 !important;
  color: var(--arfet-white) !important;
  background: var(--arfet-orange) !important;
  border-radius: 8px !important;
  text-align: center;
}

html body .nav-menu a.app-link:hover {
  background: var(--arfet-navy) !important;
}

/* ---- Homepage hero: uploaded banner image -------------------------- */
html body section.home-hero-image {
  padding: 0 !important;
  margin: 0;
  background: #FFFFFF;
  line-height: 0;
}

html body section.home-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ---- Footer social buttons: original brand colours ----------------- */
html body footer a.social-btn[href*="wa.me"] {
  background: #25D366 !important;
  color: #FFFFFF !important;
  border-color: #25D366 !important;
}

html body footer a.social-btn[href*="wa.me"]:hover {
  background: #1EBE5A !important;
}

html body a.follow-btn[href*="facebook.com"] {
  background: #1877F2 !important;
  color: #FFFFFF !important;
}

html body a.follow-btn[href*="facebook.com"]:hover {
  background: #0F5FCC !important;
}

html body a.follow-btn[href*="instagram.com"] {
  background: linear-gradient(45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%) !important;
  color: #FFFFFF !important;
}

html body a.follow-btn[href*="instagram.com"]:hover {
  filter: brightness(0.92);
}

/* ---- Homepage hero: poster image, shown large and centred ---------- */
html body section.home-hero-image img {
  max-width: 980px;
  margin: 0 auto;
}

/* ---- Floating WhatsApp button: green -------------------------------- */
html body a.wa-float {
  background: #25D366 !important;
  color: #FFFFFF !important;
}

html body a.wa-float:hover {
  background: #1EBE5A !important;
}

/* ---- Orange labels: navy on light backgrounds for readability ----------
   Small orange text on white is hard to read, so it becomes navy. Orange is
   kept on dark navy panels, where it stands out (for example the footer and
   the "Your next step" call-to-action panel). Icons keep their colour. */
html body .eyebrow,
html body .kicker,
html body .university,
html body .arfet-word,
html body .featured-label,
html body .year,
html body .num,
html body span.eyebrow,
html body p.eyebrow,
html body div.eyebrow,
html body a.card-link,
html body .disclaimer {
  color: var(--arfet-navy) !important;
}

html body footer .eyebrow,
html body footer .kicker,
html body footer a.card-link,
html body .dark .eyebrow,
html body .dark .kicker,
html body .gc-cta .eyebrow,
html body .gc-cta .kicker,
html body [class*="cta"] .eyebrow,
html body [class*="cta"] .kicker {
  color: var(--arfet-orange) !important;
}

/* ---- Labels on navy call-to-action panels: white for clear reading ----- */
html body .cta-band .eyebrow,
html body .cta-band .cta-eyebrow,
html body .cta-eyebrow,
html body .gc-cta .eyebrow,
html body [class*="cta"] .eyebrow,
html body .dark .eyebrow {
  color: #FFFFFF !important;
}

/* ---- Page hero images: uploaded banner replaces the text hero ---------- */
html body section.hero-image {
  padding: 0 !important;
  margin: 0;
  background: #FFFFFF;
  line-height: 0;
  text-align: center;
}

html body section.hero-image img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
}

/* ---- Header: logo on the left on phones and desktop --------------------- */
html body .site-header .navwrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

html body .site-header a.brand {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 auto 0 0 !important;
  justify-self: start !important;
}

/* ---- Header logo: align the logo and tagline to the left edge ---------- */
html body .site-header a.brand {
  flex-direction: column !important;
  align-items: flex-start !important;
}

html body .site-header a.brand img {
  margin: 0 !important;
}

html body .site-header a.brand span.brand-tag {
  display: block !important;
  text-align: left !important;
}

/* ---- Hero sections: no background images (homepage keeps its banner) ----
   Hero areas use a plain light-grey background. Text colour adjusts to it
   automatically through the palette guard. The homepage banner is an <img>
   inside section.home-hero-image, so it is not affected. */
html body :is(section, header, div):is([class*="hero"], .page-hero, .gc-hero, .sm-hero)[class*="hero"]:not(.hero-image):not(.home-hero-image):not([class*="grid"]):not([class*="art"]):not([class*="actions"]),
html body :is(section, header, div).page-hero:not(.hero-image),
html body :is(section, div).gc-hero,
html body :is(section, div).sm-hero {
  background-image: none !important;
  background-color: #F3F5F8 !important;
}