/* =====================================================================
   UTT MODERN LAYER  -  utt-modern.css
   ---------------------------------------------------------------------
   A drop-in stylesheet that sits ON TOP of the existing styles
   (utt2.php + sm-simple.php). It does not replace them, so every
   sub-site keeps working and can be rolled back by removing one <link>.

   Load it LAST in <head> (see redesign/index.php).

   What it does
   1. One typeface (Archivo) instead of 7 Google fonts.
   2. A small set of colour / spacing tokens.
   3. Cleaner nav, breadcrumb, headings, links, buttons, forms, tables.
   4. Real card styling for news / stories / events blocks.
   5. A new dark footer (pairs with redesign/footer_fullwidth.php).
   6. Visible keyboard focus and reduced-motion support.

   COLOURS: every sub-site keeps the colours set for it in the base
   (menu colours, page background, text, headings, links). The new UTT
   colour scheme only applies to the main website, through the class
   "utt-main" that index.php puts on <body> when wk=1.
   The menu's size, spacing and colours come from sm-simple.php as before;
   this file only changes its typeface and the drop-down shape.
   ===================================================================== */

:root {
  /* Brand */
  --utt-red: #d71920;          /* UTT red, slightly deeper than #ed1e24 for AA contrast on white */
  --utt-red-dark: #a8131a;
  --utt-black: #000000;
  --utt-white: #ffffff;

  /* Neutrals (cool, not cream) */
  --utt-ink: #1c2126;          /* body text */
  --utt-slate: #4f5a64;        /* secondary text */
  --utt-line: #dde2e6;         /* borders / dividers */
  --utt-mist: #f3f5f6;         /* section backgrounds */
  --utt-pitch: #15191d;        /* footer */

  /* Type */
  --utt-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --utt-step--1: 0.875rem;
  --utt-step-0: 1.0625rem;     /* 17px body */
  --utt-step-1: 1.25rem;
  --utt-step-2: 1.5625rem;
  --utt-step-3: 2rem;
  --utt-step-4: clamp(2.25rem, 4vw + 1rem, 3.5rem);

  /* Shape & space */
  --utt-radius-sm: 4px;
  --utt-radius: 10px;
  --utt-max: 1220px;
  --utt-gutter: clamp(16px, 3vw, 32px);
}

/* ---------------------------------------------------------------------
   1. Base typography
   utt2.php sets fonts on BODY, P, INPUT, li, td, H1-H4 and div, and
   forces Roboto Slab with !important in places, so we match that.
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
body p, body li, body td, body input, body select, body textarea, body button,
body div {
  font-family: var(--utt-font) !important;
}

body {
  font-size: var(--utt-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.utt-main { color: var(--utt-ink); background-color: var(--utt-white); }

body p, body li, body td { font-size: var(--utt-step-0); line-height: 1.65; }

/* Keep long-form reading lines comfortable */
#page-content p, #page-content li { max-width: 75ch; }

body h1, body .labelh1 {
  font-family: var(--utt-font) !important;
  font-stretch: 112%;
  font-weight: 800 !important;
  font-size: var(--utt-step-4) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

body h2, body .labelh2 {
  font-family: var(--utt-font) !important;
  font-stretch: 112%;
  font-weight: 800 !important;
  font-size: var(--utt-step-3) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0 0 0.6em;
}

body h3 {
  font-family: var(--utt-font) !important;
  font-weight: 700 !important;
  font-size: var(--utt-step-1) !important;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

body h4 { font-weight: 700; font-size: var(--utt-step-0); }

body.utt-main h1, body.utt-main h2 { color: var(--utt-black); }

/* Main site only: the CMS writes home-page section titles in ALL CAPS.
   Show them in sentence case without editing the records. */
.utt-main #latest_content h2,
.utt-main .utt-latest-top h2,
.utt-main #student_column h3 {
  text-transform: lowercase;
}
.utt-main #latest_content h2::first-letter,
.utt-main .utt-latest-top h2::first-letter,
.utt-main #student_column h3::first-letter { text-transform: uppercase; }

/* Headings above a strip get a short red rule - the one brand device */
.utt-main #latest_content h2::after,
.utt-main .utt-latest-top h2::after,
.utt-main #student_column h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 12px;
  background: var(--utt-red);
}
.utt-main #student_column h3::after { width: 32px; height: 3px; margin-top: 8px; }

/* The old fixed-height title wrappers clip the new rule */
#latest_content div[style*="height: 70px"],
.utt-latest-top div[style*="height: 70px"] { height: auto !important; margin-bottom: 20px; }
.utt-latest-top { padding-top: 24px; }

/* ---------------------------------------------------------------------
   2. Links
   --------------------------------------------------------------------- */
/* Left out on purpose: the menu (colours come from sm-simple.php) and the
   share buttons on the left edge (white icons on their network colours). */
body.utt-main a:not(#main-nav a):not(#share-sidebar a):link,
body.utt-main a:not(#main-nav a):not(#share-sidebar a):visited { color: var(--utt-red-dark); text-decoration: none; }
body.utt-main a:not(#main-nav a):not(#share-sidebar a):hover,
body.utt-main a:not(#main-nav a):not(#share-sidebar a):active { color: var(--utt-red); }
#share-sidebar a:hover { text-decoration: none; }
body a:hover { text-decoration: underline; text-underline-offset: 3px; }
#page-content p a, #page-content li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Keyboard focus - currently invisible on most of the site */
:focus-visible {
  outline: 3px solid var(--utt-red) !important;
  outline-offset: 3px;
  border-radius: 2px;
}

.utt-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
#main:focus { outline: none !important; }

/* Skip link (added in redesign/index.php) */
.utt-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100000;
  background: var(--utt-black); color: #fff !important;
  padding: 10px 16px; border-radius: var(--utt-radius-sm); font-weight: 700;
}
.utt-skip:focus { top: 12px; }

/* ---------------------------------------------------------------------
   3. Utility bar + mobile search bar (index.php top strip)
   --------------------------------------------------------------------- */
body > div > div[style*="rgba(100, 100, 100, 0.9)"] {
  background: var(--utt-black) !important;
  padding: 6px var(--utt-gutter);
  text-align: right !important;
  font-size: var(--utt-step--1);
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
body > div > div[style*="rgba(100, 100, 100, 0.9)"] a { color: #fff !important; font-weight: 500; }
body > div > div[style*="rgba(100, 100, 100, 0.9)"] a:hover { color: #fff !important; text-decoration: underline; }

/* #searchbar keeps the colour set in the base (searchbox_background_color) */

#search_box {
  font-family: var(--utt-font) !important;
  font-size: 15px !important;
  height: 40px;
  padding: 0 14px 0 38px !important;
  border: 1px solid var(--utt-line) !important;
  border-radius: 999px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234f5a64' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center !important;
  box-shadow: none !important;
  width: min(260px, 100%) !important;
  transition: border-color .15s, width .2s;
}
#search_box:focus { border-color: var(--utt-black) !important; width: min(320px, 100%) !important; }

/* ---------------------------------------------------------------------
   4. Main navigation (SmartMenus "sm-simple")
   Height, padding, font size and every colour come from sm-simple.php,
   which reads each website's menu colours from the base. Only the
   typeface and the drop-down shape change here.
   --------------------------------------------------------------------- */
.sm-simple a,
.sm-simple a span { font-family: var(--utt-font) !important; }

/* The site name beside the UTT logo is part of the official logo lockup:
   it keeps Roboto Slab (loaded by utt2.php), on every site. */
.lockup, .nav-brand .lockup, #main-nav .lockup { font-family: "Roboto Slab", serif !important; }

/* keep the "+" and the label on one line */
.sm-simple > li > a { white-space: nowrap; }

/* Desktop menu (1280px and wider = $navigation_break_width in configuration.php).
   The bar was 110px tall with labels pushed 50px down, so two-line labels sat
   low and "ALUMNI +" wrapped. 84px with 30px at the top fits both lines.
   To change it everywhere instead, edit $navigation_height (110) and
   $navigation_height_padding_top_bottom (50) in configuration.php and delete this block. */
@media (min-width: 1280px) {
  .sm-simple > li > a,
  .sm-simple > li > a:hover,
  .sm-simple > li > a:focus,
  .sm-simple > li > a:active,
  .sm-simple > li > a.highlighted { height: 84px !important; padding-top: 30px !important; }
  #main-nav .nav-brand { height: 84px !important; }
  /* re-centre the logo and the "| Main Website" lockup for the 84px bar */
  #main-nav .nav-brand > a { padding-top: 13px !important; }
  #main-nav .nav-brand > span[style*="top: 40px"] { top: 28px !important; }
  #main-nav .nav-brand > div[style*="height: 100px"] { height: 84px !important; }

  /* Drop-downs: rounded corners and a soft shadow, colours unchanged */
  .sm-simple ul {
    border-radius: var(--utt-radius-sm) !important;
    box-shadow: 0 12px 32px -12px rgba(21,25,29,.35) !important;
    overflow: hidden;
  }
}

/* ---------------------------------------------------------------------
   5. Breadcrumb (grey pill -> quiet text trail)
   --------------------------------------------------------------------- */
/* Main site only: sub-sites keep the dark pill, which reads on any background */
.utt-main div.uttBorderRadius[style*="rgba(0, 0, 0, 0.6)"] {
  background: transparent !important;
  padding: 0 !important;
}
.utt-main div.uttBorderRadius[style*="rgba(0, 0, 0, 0.6)"] img[alt="home"] { display: none; }
.utt-main ul.breadcrumb { padding: 8px 0 !important; margin: 0 !important; background: none !important; }
.utt-main ul.breadcrumb li,
.utt-main ul.breadcrumb li a,
.utt-main ul.breadcrumb li a span,
.utt-main ul.breadcrumb a[style] {
  color: var(--utt-slate) !important;
  font-size: var(--utt-step--1) !important;
  font-weight: 500;
}
.utt-main ul.breadcrumb li a:hover, .utt-main ul.breadcrumb li a:hover span { color: var(--utt-red) !important; }
.utt-main ul.breadcrumb li + li::before { color: var(--utt-line) !important; content: "/" !important; padding: 0 8px !important; }

/* ---------------------------------------------------------------------
   6. Page header band (image + title)
   --------------------------------------------------------------------- */
.headerRow { max-width: var(--utt-max) !important; padding: 0 var(--utt-gutter); }
.headerRow > div[style*="rgba(0,0,0,0.5)"] {
  background: none !important;
  text-align: left !important;
  padding: clamp(80px, 14vw, 180px) 0 32px !important;
}
.headerRow .labelh1 {
  color: #fff !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.parallax-window8 { position: relative; }

/* ---------------------------------------------------------------------
   7. Buttons
   --------------------------------------------------------------------- */
.calltoactionbutton,
.calltoactionbutton:link,
.calltoactionbutton:visited,
.registerButton,
.outreachButton,
.librarybutton,
.formbutton,
input[type="submit"],
input[type="button"],
button.button,
#mc-embedded-subscribe {
  font-family: var(--utt-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 11px 22px !important;
  box-shadow: none !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .15s;
  height: auto !important;
  line-height: 1.2 !important;
}
/* Main site: UTT red buttons. Sub-sites keep their own button colours. */
.utt-main .calltoactionbutton, .utt-main .registerButton, .utt-main .outreachButton,
.utt-main .librarybutton, .utt-main .formbutton, .utt-main input[type="submit"],
.utt-main input[type="button"], .utt-main button.button, #mc-embedded-subscribe {
  background: var(--utt-red) !important; color: #fff !important; border: 0 !important;
}
.utt-main .calltoactionbutton:hover, .utt-main .registerButton:hover, .utt-main .outreachButton:hover,
.utt-main .librarybutton:hover, .utt-main .formbutton:hover, .utt-main input[type="submit"]:hover,
.utt-main input[type="button"]:hover, #mc-embedded-subscribe:hover { background: var(--utt-black) !important; }
.calltoactionbutton::after { display: none !important; }

/* ---------------------------------------------------------------------
   8. Forms
   --------------------------------------------------------------------- */
input[type="text"]:not(#search_box),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select:not(.websiteDropdown),
textarea,
.formtag {
  font-family: var(--utt-font) !important;
  font-size: 16px !important;           /* stops iOS zoom on focus */
  color: var(--utt-ink);
  background: #fff;
  border: 1px solid #c4ccd3 !important;
  border-radius: var(--utt-radius-sm) !important;
  padding: 9px 12px !important;
  min-height: 42px;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus { border-color: var(--utt-black) !important; outline: none; box-shadow: 0 0 0 3px rgba(215,25,32,.18); }
label { font-weight: 600; }

/* ---------------------------------------------------------------------
   9. Content blocks on the home page and sub-site home pages
   --------------------------------------------------------------------- */

/* Section rhythm */
.utt-main #latest_content > div { padding-top: clamp(40px, 6vw, 72px) !important; padding-bottom: clamp(40px, 6vw, 72px) !important; }
/* (No alternating grey backgrounds here: some of these sections are parallax
   "windows" that must stay see-through for the photo behind them to show.) */
/* Safeguard: parallax windows and the sections around them must never get a
   background, or the photo behind (Aviation cockpit, Tamana campus...) is hidden. */
.parallax-window,
#latest_content > div:has(.parallax-window),
#latest_content > div:has(> .parallax-window) { background: transparent !important; }

/* Rounded image tiles */
.uttBorderRadius, .borderRadius { border-radius: var(--utt-radius) !important; overflow: hidden; }

/* Category tag ("Success Stories", "News", "Research") written inline as a
   coloured box (black or #CC0033). Turn it into a small red kicker. */
.utt-main span.labelh3[style*="background-color"] {
  display: inline-block;
  background: transparent !important;
  color: var(--utt-red-dark) !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  font-size: var(--utt-step--1) !important;
  font-weight: 700 !important;
}
.utt-main span.labelh3[style*="background-color"] + span.labelh3 { display: block; }

.labelh3, .labelh3 a, a.labelh3 { font-family: var(--utt-font) !important; }
.utt-main .labelh3, .utt-main .labelh3 a, .utt-main a.labelh3 {
  color: var(--utt-ink) !important;
  font-size: var(--utt-step-1) !important;
  line-height: 1.3 !important;
}
.labelh3 b { font-weight: 700; }
.utt-main a.labelh3:hover .labelh3 b { color: var(--utt-red) !important; text-decoration: underline; text-underline-offset: 3px; }

/* "Read more..." links */
.utt-main a.labelh3 > b:only-child { font-size: var(--utt-step--1); color: var(--utt-red-dark); }

/* "More..." links under Success stories / Research (inline black or grey box) */
.utt-main #latest_content a[style*="font-size:26px"],
.utt-main #latest_content a[style*="font-size: 26px"] {
  display: inline-block;
  margin: 12px 0 0 !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  font-weight: 700;
  color: var(--utt-ink) !important;
  background: transparent !important;
  border: 2px solid var(--utt-ink);
  border-radius: 999px;
  text-decoration: none !important;
}
.utt-main #latest_content a[style*="font-size:26px"]:hover,
.utt-main #latest_content a[style*="font-size: 26px"]:hover { background: var(--utt-ink) !important; color: #fff !important; }

/* Dates in event / update lists */
.bodycellorange, .bodycell { font-weight: 600; }
.utt-main .bodycellorange, .utt-main .bodycell { color: var(--utt-red-dark) !important; }
.bodycellsmall, .smallbodycell { font-size: var(--utt-step--1) !important; }
.bodycelllarge { font-size: var(--utt-step-0) !important; line-height: 1.45 !important; }

/* Future / current / past student columns */
#student_column .column_third > div {
  background: #fff;
  border: 1px solid var(--utt-line);
  border-radius: var(--utt-radius);
  padding: 20px 20px 16px;
  height: 100%;
  box-sizing: border-box;
}
#student_column .column_third { min-height: 0 !important; }
#student_column .column_third a { display: block !important; padding: 3px 0; font-weight: 500; }
#student_column .column_third br { display: none; }
#student_column .column_third div[style*="margin-left:20px"] { margin-left: 0 !important; }

/* Legacy list bullets were GIF arrows */
li { list-style-image: none !important; }
.utt-main #page-content ul li::marker { color: var(--utt-red); }

/* Tables */
#page-content table { border-collapse: collapse; }
.alternateTable th, .courseTable th, #page-content th {
  background: var(--utt-mist) !important;
  color: var(--utt-ink) !important;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--utt-ink);
}
.alternateTable td, .courseTable td, #page-content td { padding: 10px 12px; border-bottom: 1px solid var(--utt-line); }
.alternateTable tr:nth-child(even) { background: #fafbfc !important; }

/* FAQ "curved" tabs: keep the tab colour set in the base */
.curved {
  border-radius: var(--utt-radius-sm) !important;
  font-weight: 600;
  margin-bottom: 8px !important;
  cursor: pointer;
}

/* Calendar strip */
#calendar .fc-header-title h2 { font-size: var(--utt-step-1) !important; }

/* ---------------------------------------------------------------------
   10. Footer  (markup in redesign/footer_fullwidth.php)
   --------------------------------------------------------------------- */
.utt-footer {
  background: var(--utt-pitch);
  color: #c9d0d6;
  font-size: var(--utt-step--1);
  line-height: 1.6;
  border-top: 6px solid var(--utt-red);
}
.utt-footer * { box-sizing: border-box; }
.utt-footer__inner { max-width: var(--utt-max); margin: 0 auto; padding: 56px var(--utt-gutter) 32px; }
.utt-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 40px;
}
.utt-footer__brand img { height: 52px; width: auto; display: block; margin-bottom: 16px; }
.utt-footer__brand p { color: #c9d0d6; font-size: var(--utt-step--1); margin: 0 0 6px; max-width: 32ch; }
.utt-footer h3 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  margin: 0 0 14px !important;
}
.utt-footer h3::first-letter { text-transform: none; }
.utt-footer ul { list-style: none; margin: 0; padding: 0; }
.utt-footer li { padding: 4px 0; font-size: var(--utt-step--1) !important; }
.utt-footer a:link, .utt-footer a:visited { color: #c9d0d6 !important; text-decoration: none; }
.utt-footer a:hover { color: #fff !important; text-decoration: underline; }

.utt-footer__news p { color: #c9d0d6; margin: 0 0 12px; font-size: var(--utt-step--1); }
.utt-footer__news form { display: flex; gap: 8px; flex-wrap: wrap; }
.utt-footer__news input[type="email"] {
  flex: 1 1 180px;
  background: #22282e !important;
  border: 1px solid #3a434b !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
}
.utt-footer__news input[type="email"]::placeholder { color: #8b96a0; }
.utt-footer__news #mc-embedded-subscribe:hover { background: #fff !important; color: var(--utt-black) !important; }
.utt-footer #mc_embed_signup { width: auto !important; background: none !important; color: inherit !important; font: inherit !important; }

.utt-footer__social { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.utt-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #22282e; transition: background-color .15s;
}
.utt-footer__social a:hover { background: var(--utt-red); }
.utt-footer__social svg { width: 18px; height: 18px; fill: #fff; }

.utt-footer__marks { display: flex; gap: 20px; align-items: center; margin-top: 24px; }
.utt-footer__marks img { height: 56px; width: auto; opacity: .9; }

.utt-footer__bar {
  border-top: 1px solid #2b3238;
  margin-top: 40px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: #8b96a0; font-size: 13px;
}
.utt-footer__bar a:link, .utt-footer__bar a:visited { color: #8b96a0 !important; }
.utt-footer__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }
.utt-footer__report { text-align: center; padding: 14px var(--utt-gutter); background: #1d2227; font-size: 13px; }
.utt-footer__credits { font-size: 12px; color: #6d7882; margin-top: 8px; width: 100%; }
.utt-footer__credits a:link, .utt-footer__credits a:visited { color: #6d7882 !important; }

@media (max-width: 960px) {
  .utt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .utt-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------------
   11. Floating widgets - make them less loud
   --------------------------------------------------------------------- */
#share-sidebar { opacity: .85; }
#share-sidebar:hover { opacity: 1; }
@media (max-width: 760px) { #share-sidebar { display: none !important; } }

/* ---------------------------------------------------------------------
   12. Motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  #videoId { display: none; }
}

/* ---------------------------------------------------------------------
   13. Small screens
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  #student_column .column_third > div { margin-bottom: 16px; }
}

/* Print: drop the chrome */
@media print {
  #navigationDiv, #searchbar, #share-sidebar, .utt-footer, #launcher { display: none !important; }
  body { font-size: 11pt; color: #000; }
}