/* ==========================================================================
   SCENE – modern.css
   Cosmetic makeover layer. Loaded LAST so it overrides the legacy styles
   (style.css, editstyle.css, inline header styles) without deleting them.
   Brand: navy + orange. Fonts reuse the Google fonts already loaded.
   ========================================================================== */

/* Self-hosted fonts (the site's CSP only allows 'self', so Google Fonts can't load). Both OFL-licensed. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  --navy-900: #061a3a;
  --navy-800: #022851;
  --navy-700: #0a3a73;
  --accent: #f4a62d;
  --accent-dark: #d98a0f;
  --ink: #1d2433;
  --muted: #5b6577;
  --surface: #ffffff;
  --surface-alt: #f4f7fb;
  --line: #e3e8f0;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(6, 26, 58, .08);
  --card-border: #cbd6e6;
  --shadow-card: 0 6px 18px rgba(6, 26, 58, .12);
  --shadow-md: 0 10px 30px rgba(6, 26, 58, .12);
  --font-head: "Poppins", "Raleway", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
* { font-family: inherit; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--navy-800);
  line-height: 1.25;
  letter-spacing: -.01em;
}
p, .paragraph {
  font-family: var(--font-body);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}
a { color: var(--navy-700); transition: color .2s ease; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn, .btn-primary {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .8rem 1.9rem;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn.btn-outline-light-x {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.btn.btn-outline-light-x:hover, .btn.btn-outline-light-x:focus { background-color: #fff !important; color: var(--navy-800) !important; box-shadow: inset 0 0 0 2px #fff; }

/* ---------- Header (desktop mega-menu) ---------- */
.header__navbar {
  background: linear-gradient(90deg, var(--navy-900), var(--navy-800));
  box-shadow: 0 4px 18px rgba(6, 26, 58, .25);
}
.l-nav-horizontal__brand img { height: 58px; width: auto; object-fit: contain; }
.primary-nav__top-link a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.primary-nav--mega li .primary-nav__top-link a:hover,
.primary-nav--mega li:hover .primary-nav__top-link a,
.primary-nav--mega li:focus-within .primary-nav__top-link a {
  background-color: var(--accent);
  color: var(--navy-900);
}
.primary-nav--mega li li a { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
/* While the mega-menu is open, the columns you are not hovering stay readable (light text on the navy bar) */
@media (min-width: 992px) {
  .primary-nav--mega > .menu > li:not(:hover):not(:focus-within) .menu a,
  .primary-nav--mega > .menu > li:not(:hover):not(:focus-within) .menu .primary-nav__nolink {
    color: rgba(255, 255, 255, .82) !important;
    background: transparent !important;
  }
  .primary-nav--mega li li a:hover, .primary-nav--mega li li a:focus {
    background: var(--accent) !important;
    color: var(--navy-900) !important;
  }
}

/* ---------- Header (tablet / phone menu) ---------- */
.menu_sec {
  background: linear-gradient(90deg, var(--navy-900), var(--navy-800));
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 14px rgba(6, 26, 58, .25);
}
.menu_sec .navbar-brand img { height: 52px; width: auto; }
.menu_sec .navbar-toggler {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm);
  padding: .45rem .65rem;
}
.menu_sec .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(244, 166, 45, .5); }
/* Hamburger drawn with gradients (the site CSP blocks data: URI images) */
.menu_sec .navbar-toggler-icon {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff) !important;
  background-size: 100% 3px !important;
  background-repeat: no-repeat !important;
  background-position: 0 15%, 0 50%, 0 85% !important;
  width: 1.6em;
  height: 1.6em;
}
.menu_sec .navbar-nav { padding: .5rem 0 1rem; }
.menu_sec .nav-item { margin-left: 0; }
.menu_sec .navbar-nav .nav-link {
  font-family: var(--font-head);
  font-size: .95rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .75rem .25rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.menu_sec .navbar-nav .nav-link:hover { text-decoration: none; color: var(--accent) !important; }
.menu_sec .dropdown-menu {
  background: rgba(255, 255, 255, .97);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.menu_sec .dropdown-item { padding: .6rem 1.1rem; }
.menu_sec .dropdown-item:hover { background: #fff3d6; color: var(--navy-900); }

/* ---------- Hero (slider + overlay) ---------- */
#wowslider-container1 {
  margin-top: 0 !important;
  max-height: none;
}
#wowslider-container1 .ws_images,
#wowslider-container1 .ws_images ul li { max-height: 78vh; }
#wowslider-container1 .ws_images img {
  width: 100%;
  height: 78vh;
  min-height: 420px;
  max-height: 780px;
  object-fit: cover;
}
#wowslider-container1 .ws-title { display: none !important; }
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(1.25rem, 8vw, 7rem);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6, 26, 58, .88) 0%, rgba(6, 26, 58, .55) 55%, rgba(6, 26, 58, .15) 100%);
  pointer-events: none;
}
.hero-overlay > * { pointer-events: auto; max-width: 720px; }
.hero-eyebrow {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.hero-overlay h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-overlay p {
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  margin-bottom: 1.8rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Generic section helpers ---------- */
.section-heading { text-align: center; margin: 0 auto 2.5rem; }
.section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
.section-heading h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: .8rem auto 0;
  border-radius: 4px;
  background: var(--accent);
}
.section-heading p { max-width: 640px; margin: 1rem auto 0; }

/* ---------- Welcome ---------- */
#about.about { padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--surface); }
#about .image {
  min-height: 340px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
#about .content h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
  text-align: left !important;
  color: var(--navy-800) !important;
  margin-bottom: 1rem;
}
#about .content p, #about .content div { text-align: left; color: var(--muted); }
/* Admin-entered HTML carries inline fonts/sizes; normalise them for a consistent look */
#about .content div *, .msg_des * {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--muted) !important;
  text-align: left !important;
}
#about .content div { font-size: 1rem !important; line-height: 1.8 !important; }

/* ---------- Vision & Mission ---------- */
.containeditmain {
  background: var(--surface-alt) !important;
  background-attachment: scroll;
}
.containeditmain .section { padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem !important; }
.vm-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.vm-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--accent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vm-card h3 { color: var(--navy-800) !important; font-size: 1.5rem; margin-bottom: .8rem; }
.vm-card p, .vm-card li { color: var(--muted) !important; font-size: 1rem !important; line-height: 1.75 !important; }
.vm-card ul { padding-left: 1.2rem; margin: 0; }
.vm-card li { margin-bottom: .5rem; list-style: none; position: relative; padding-left: .2rem; }
.vm-card li::marker { content: ""; }
.vm-card li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: .7rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Stats ---------- */
.clients, #clients.clients {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  color: #fff;
  margin-top: 0 !important;
}
.leditclient {
  max-width: 1140px;
  margin: 0 auto;
  min-height: 0;
  padding: 3rem 1rem;
  gap: 1rem;
}
.ledit_ { width: 33.33%; }
.leditclientunder {
  color: #fff;
  gap: .25rem;
  padding: 1rem;
}
.iconed { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.1; color: var(--accent); }
.iconed strong, .iconed span { font-family: var(--font-head); font-weight: 700; }
.leditclientunder > span {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}
.leditclientunder > span i { color: var(--accent); font-size: 1.3rem; }

/* ---------- Chair's message ---------- */
#services.services { background: var(--surface); }
#services .conti { max-width: 1140px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem !important; }
#services .carded {
  display: flex;
  gap: 2.5rem;
  background: var(--surface-alt);
  border: 0;
  border-radius: var(--radius);
  padding: 2.5rem;
  min-height: 0;
  margin: 0;
  box-shadow: var(--shadow-sm);
}
#services .carded-edit { border-right: 0; width: 280px; flex: none; margin: 0; }
#services .carded-img, #services .carded-img img { height: 200px; }
#services .carded-img img {
  width: 200px;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: var(--shadow-md);
}
#services .intro-edit { text-align: center; }
#services .intro-edit h3 { font-size: 1.35rem !important; color: var(--navy-800) !important; margin-top: 1rem !important; }
#services .intro-edit h4 { font-size: .95rem; font-weight: 500; color: var(--accent-dark) !important; text-transform: uppercase; letter-spacing: .08em; }
#services .card-body {
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  transition: none;
  background: none !important;
}
#services .msg_title, .msg_title { color: var(--navy-800) !important; font-size: 1.5rem; text-align: left; margin-bottom: 1rem; }
.msg_des, .msg_des p { color: var(--muted) !important; line-height: 1.85; font-size: 1rem !important; text-align: left; }

/* ---------- News ---------- */
#portfolio-details.portfolio-details { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--surface-alt); }
#portfolio-details .container_1 { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; }
#portfolio-details .portfolio-info { padding: 0; box-shadow: none !important; background: none; }
#portfolio-details h2 {
  color: var(--navy-800) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 2.5rem;
}
#portfolio-details h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: .8rem auto 0;
  border-radius: 4px;
  background: var(--accent);
}
#portfolio-details .row { row-gap: 1.5rem; }
.homeNews { padding: 0 .75rem !important; float: none !important; display: flex !important; border-radius: 0 !important; }
.homeNews1 {
  float: none !important;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto;
  margin: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--card-border);
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.homeNews1:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.homeNews1 img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
.homeNews1 h5 { padding: 1rem 1.1rem 1.2rem !important; margin: 0 !important; line-height: 1.45 !important; }
.homeNews1 h5 a { color: var(--navy-800) !important; font-family: var(--font-head); font-size: 1rem !important; font-weight: 600; line-height: 1.45 !important; display: block; }
.homeNews1 h5 a:hover { color: var(--accent-dark) !important; }
.homeNews1 hr { display: none; }

/* ---------- Events ---------- */
#features.features, #features.section-bg {
  background: var(--surface) !important;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem !important;
}
#features .section-title h2 {
  margin: 0 0 2.5rem;
  text-align: center;
  color: var(--navy-800) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
}
#features .section-title h2 { text-transform: none; letter-spacing: -.01em; }
#features .section-title h2::before { display: none !important; }
#features .section-title h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: .8rem auto 0;
  border-radius: 4px;
  background: var(--accent);
}
.eventeditmain {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.eventcard {
  position: relative;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  transform: none !important;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.eventcard:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-md); }
.eventcard img.imgedited, .eventcard:hover img.imgedited {
  display: block !important;
  width: 100%;
  height: 220px !important;
  object-fit: cover;
  border-radius: 0;
  z-index: 0;
}
.eventcard:hover .itemedit, .eventcard:hover .card-title { display: block; }
.cardedit { padding: 1.1rem 1.2rem 1.3rem; align-items: flex-start; }
.cardedit .card-title { font-family: var(--font-head); font-size: 1.05rem !important; font-weight: 600; color: var(--navy-800); line-height: 1.4; margin: 0; }
.cardedit a { color: inherit; }
.cardedit, .cardedit .card-title, .homeNews1 h5 { text-align: left; }
.eventcard .views-field-field-eventdate,
.eventcard .views-field-field-eventdate-1 {
  position: absolute !important;
  left: 14px;
  width: 58px;
  text-align: center;
  background: var(--navy-800);
  z-index: 3;
}
.eventcard .views-field-field-eventdate { top: 14px; padding: 8px 0 0; border-radius: 10px 10px 0 0; }
.eventcard .views-field-field-eventdate-1 { top: 38px; padding: 0 0 8px; border-radius: 0 0 10px 10px; }
.views-field-field-eventdate > div {
  font-family: var(--font-head);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  min-width: 0;
}
.views-field-field-eventdate-1 .field-content {
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1.1;
  color: #fff;
  min-width: 0;
}
/* description: hidden by default on every device; revealed as an overlay on hover / focus / tap */
.eventcard .hideit {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  padding: 1.4rem;
  overflow: auto;
  background: rgba(6, 26, 58, .96);
  color: #fff;
  font-size: .95rem;
  line-height: 1.7;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  transition: opacity .25s ease, visibility .25s ease;
}
.eventcard .hideit, .eventcard .hideit * { color: #fff !important; }
.eventcard:hover .hideit, .eventcard:focus-within .hideit { opacity: 1; visibility: visible; }
.eventcard .hideit a { color: var(--accent) !important; font-weight: 600; }

#features .btn, #portfolio-details .btn { margin-top: .5rem; }

/* ---------- Footer ---------- */
#footer {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900)) !important;
  color: rgba(255, 255, 255, .85);
  background-attachment: scroll;
}
#footer .footer-top { background: transparent; padding: 3rem 0 1rem !important; }
.footeredit { margin-top: 0; }
.footeredit2 { padding-left: 0; }
#footer h4 { color: #fff !important; font-size: 1.05rem; position: relative; padding-bottom: .6rem; margin-bottom: 1rem !important; }
#footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--accent); border-radius: 3px; }
#footer ul li { margin-bottom: .35rem; }
#footer .editlist li { font-size: .9rem !important; }
.footeredit2 ul li a, #footer a.text-color {
  color: rgba(255, 255, 255, .8) !important;
  font-size: .9rem !important;
  transition: color .2s ease, padding-left .2s ease;
}
.footeredit2 ul li a:hover, #footer a.text-color:hover { color: var(--accent) !important; padding-left: 4px; }
#footer .social-links { margin: 1.5rem 0 !important; text-align: center; }
#footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 .3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
#footer .social-links a:hover { background: var(--accent); color: var(--navy-900); transform: translateY(-3px); }
#footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
#footer .copyright { font-size: .9rem !important; color: rgba(255, 255, 255, .7) !important; padding: 1rem 0 !important; }
.back-to-top { background: var(--accent) !important; }
.back-to-top i { color: var(--navy-900) !important; }

/* ---------- Scroll reveal (enabled by modern.js) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .35s ease, box-shadow .3s ease, border-color .3s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* Card hover effects (written after the reveal rules and more specific, so they are not overridden) */
.js-reveal .homeNews1.reveal.is-visible:hover,
.js-reveal .eventcard.reveal.is-visible:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 36px rgba(6, 26, 58, .22);
  border-color: var(--accent);
}
.homeNews1 { position: relative; cursor: pointer; }
.homeNews1 img { transition: transform .5s ease; }
.homeNews1:hover img { transform: scale(1.07); }
.homeNews1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: var(--accent);
  transition: width .35s ease;
}
.homeNews1:hover::after { width: 100%; }
.homeNews1:hover h5 a { color: var(--accent-dark) !important; }
/* stretch the title link over the whole card so the entire card is clickable */
.homeNews1 h5 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  #wowslider-container1 .ws_images img { height: 56vh; min-height: 340px; }
  .hero-overlay { background: linear-gradient(180deg, rgba(6, 26, 58, .55), rgba(6, 26, 58, .85)); text-align: center; align-items: center; }
  .hero-actions { justify-content: center; }
  #services .carded { flex-direction: column; align-items: center; padding: 1.75rem; gap: 1.5rem; }
  #services .carded-edit { width: 100%; }
  .msg_title { text-align: center; }
  .footeredit2 { padding-left: 0 !important; }
}
@media (max-width: 700px) {
  .ledit_ { width: 100%; }
  .leditclient { padding: 1.5rem 1rem; }
  .vm-card { padding: 1.5rem; }
  .eventeditmain { grid-template-columns: 1fr; }
  .homeNews1 img { height: 200px !important; }
}


/* ---------- Footer weather card (replaces the weatherwidget.io frame blocked by the site CSP) ---------- */
.weather-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 320px;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  color: #fff !important;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.weather-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .12); border-color: var(--accent); }
.weather-card__icon { font-size: 2.4rem; line-height: 1; color: var(--accent); margin-bottom: .4rem; }
.weather-card__label { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.weather-card__place { font-size: .9rem; color: rgba(255, 255, 255, .8); }
.weather-card__cta { margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--accent); }
.weather-card__cta i { transition: transform .2s ease; display: inline-block; }
.weather-card:hover .weather-card__cta i { transform: translateX(4px); }

/* Hide the legacy slider shadow band that showed up as a stray gradient strip under the hero */
#wowslider-container1 .ws_shadow { display: none !important; }

/* ==========================================================================
   INNER PAGES (phase 1)
   ========================================================================== */

/* Font Awesome fonts: all.min.css points at ../webfonts/ which does not exist in this repo.
   Re-declare the faces against the fonts that are actually shipped in ../fonts/. */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype"); }
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype"); }
@font-face { font-family: "FontAwesome"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fa-v4compatibility.woff2") format("woff2"), url("../fonts/fa-v4compatibility.ttf") format("truetype"); }

/* The legacy reset (* { padding:0; margin:0 }) strips container gutters; restore them */
.container, .container_1 { padding-left: 1rem; padding-right: 1rem; }

/* Page headings used by the list pages */
.portfolio-info > h6, .portfolio-info > h2, .page-title-modern {
  font-family: var(--font-head);
  color: var(--navy-800) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  line-height: 1.25 !important;
  font-weight: 700;
  padding-bottom: 1.5rem !important;
}
h1 { color: var(--navy-800); }

/* Filters (select / reset) */
.choose_sec select, .form-select, select.form-control, .filter_data select {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--ink);
  min-height: 44px;
}
.choose_sec .btn, .filter_data .btn { background: var(--accent) !important; color: var(--navy-900) !important; border-radius: var(--radius-sm); box-shadow: none; }
.choose_sec .btn:hover, .filter_data .btn:hover { background: var(--navy-800) !important; color: #fff !important; }

/* People cards (faculty / postdocs / scholars / staff) */
.box_sec {
  background: var(--surface) !important;
  border: 1px solid var(--card-border);
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card);
  height: auto !important;
  min-height: 420px;
  padding: 1.5rem 1rem 1.25rem !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.box_sec:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(6, 26, 58, .2); border-color: var(--accent); }
.box_sec img {
  width: 180px !important;
  height: 180px !important;
  object-fit: cover;
  border-radius: 50% !important;
  border: 4px solid #fff;
  box-shadow: var(--shadow-card);
}
.box_sec:hover img { transform: none !important; }
.box_sec:hover .box_dwn { transform: none !important; }
.box_dwn { height: auto !important; padding-top: 1rem !important; }
.box_dwn h6 { height: auto !important; line-height: 1.35 !important; margin-bottom: .35rem !important; }
.box_dwn h6 a, .box_dwn a h6 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--navy-800) !important; text-transform: none; }
.box_dwn small { color: var(--accent-dark) !important; font-size: .78rem !important; font-weight: 600; letter-spacing: .08em; }
.box_dwn p { color: var(--muted) !important; font-size: .85rem !important; font-weight: 500 !important; line-height: 1.5 !important; }
.social_sec { margin-top: 1rem !important; display: flex; justify-content: center; gap: .6rem; }
.social_sec a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-alt); transition: background .2s ease, transform .2s ease;
}
.social_sec a:hover { background: var(--accent); transform: translateY(-2px); }
.social_sec .fa-envelope, .social_sec .fa-phone { font-size: 1rem !important; color: var(--navy-800) !important; }

/* Specialization / lab image cards */
.lab_sec { border-radius: var(--radius) !important; box-shadow: var(--shadow-card); border: 1px solid var(--card-border); transition: transform .25s ease, box-shadow .25s ease; }
.lab_sec:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(6, 26, 58, .2); }
.lab_img img { border-radius: 0 !important; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.lab_sec:hover .lab_img img { border-radius: 0 !important; }
.lab_txt {
  top: auto !important; bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1rem 1rem !important;
  background: linear-gradient(180deg, rgba(6, 26, 58, 0), rgba(6, 26, 58, .92)) !important;
}
.lab_txt p { font-family: var(--font-head); font-size: 1.1rem !important; font-weight: 600; line-height: 1.35 !important; color: #fff !important; text-align: left !important; }

/* Tables: wrap long text, scroll sideways instead of overflowing the page */
table.filtered_pub td, table.filtered_pub th { overflow-wrap: anywhere; vertical-align: top; }
.table td, .table th { overflow-wrap: break-word; vertical-align: top; }
.filtered_pub td { text-align: left !important; }
#main table:not(.filtered_pub) { max-width: 100%; }
.table > :not(caption) > * > * { padding: .85rem .75rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--surface-alt); }
.table thead th, .table > thead > tr > th { background: var(--navy-800); color: #fff; border-color: var(--navy-800); font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .04em; }

/* Buttons inside table rows should not balloon */
td .btn, .table .btn { padding: .45rem 1.1rem; font-size: .85rem; white-space: nowrap; }

/* Accordion-style section headers (programs page) */
.accordion-button, .card-header { font-family: var(--font-head); color: var(--navy-800); }

@media (max-width: 700px) {
  .box_sec { min-height: 0; }
  #main table:not(.filtered_pub) { display: block; overflow-x: auto; }
}

/* People lists: fluid grid instead of the legacy fixed column widths */
.cls_filter_data {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 0 !important;
}
.cls_filter_data > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
.cls_filter_data .box_sec { margin-bottom: 0 !important; height: 100% !important; }

/* Wide data tables (admission statistics etc.) scroll sideways inside the page instead of being clipped */
#main table:not(.filtered_pub) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* People cards v3 – photo-first tiles.
   Always visible: name, role, specialization. On hover/focus: research keywords + contact buttons. */
.cls_filter_data { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.cls_filter_data > [class*="col-"] { position: static; height: auto; }
.cls_filter_data .box_sec {
  position: relative;
  aspect-ratio: 4 / 5;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
  padding: 0 !important;
  background: var(--navy-800) !important;
  border: 1px solid var(--card-border);
  transform: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cls_filter_data .box_sec:hover, .cls_filter_data .box_sec:focus-within {
  transform: translateY(-6px);
  max-height: none;
  z-index: 2;
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(6, 26, 58, .28);
}
/* photo fills the tile */
.cls_filter_data .box_sec img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 12%;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  transition: transform .5s ease;
}
.cls_filter_data .box_sec:hover img { transform: scale(1.05) !important; }
/* darken the photo a little on hover so the revealed text stays readable */
.cls_filter_data .box_sec::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 26, 58, 0);
  transition: background .35s ease;
  pointer-events: none;
}
.cls_filter_data .box_sec:hover::after, .cls_filter_data .box_sec:focus-within::after { background: rgba(6, 26, 58, .6); }
/* text block pinned to the bottom, grows upward when keywords appear */
.cls_filter_data .box_dwn {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: auto !important;
  padding: 1.6rem .85rem .7rem !important;
  text-align: left;
  background: linear-gradient(180deg, rgba(6, 26, 58, 0) 0%, rgba(6, 26, 58, .78) 70%);
  transform: none !important;
}
.cls_filter_data .box_dwn h6 { margin: 0 0 .15rem !important; text-align: left; }
.cls_filter_data .box_dwn h6 a { color: #fff !important; font-size: .92rem; line-height: 1.25; }
.cls_filter_data .box_dwn small { display: block; color: var(--accent) !important; font-size: .62rem !important; letter-spacing: .07em; line-height: 1.3; margin-bottom: .1rem; }
.cls_filter_data .box_dwn_inn, .cls_filter_data .box_dwn p { text-align: left !important; }
.cls_filter_data .res_txt1 { display: block !important; opacity: 1 !important; color: rgba(255, 255, 255, .9) !important; font-size: .75rem !important; line-height: 1.3 !important; font-weight: 500 !important; }
.cls_filter_data .res_txt2 { display: none !important; opacity: 1 !important; }
.cls_filter_data .box_sec:hover .res_txt2, .cls_filter_data .box_sec:focus-within .res_txt2 {
  display: block !important;
  margin-top: .55rem !important;
  padding-top: .55rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .92) !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
  max-height: 9.5em;
  overflow: hidden;
}
/* contact buttons: top-right, revealed on hover */
.cls_filter_data .social_sec {
  position: absolute;
  top: .75rem; right: .75rem;
  z-index: 3;
  margin: 0 !important;
  width: auto !important;
  flex-direction: row;
  gap: .4rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.cls_filter_data .box_sec:hover .social_sec, .cls_filter_data .box_sec:focus-within .social_sec { opacity: 1; transform: none; }
.cls_filter_data .social_sec a { background: rgba(255, 255, 255, .92); width: 36px; height: 36px; }

/* Phones / touch: two tiles per row; no hover, so keep the contact buttons visible */
@media (max-width: 700px) {
  .cls_filter_data { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .cls_filter_data .box_sec { aspect-ratio: 3 / 4; }
  .cls_filter_data .box_dwn { padding: 2.5rem .7rem .7rem !important; }
  .cls_filter_data .box_dwn h6 a { font-size: .9rem; }
  .cls_filter_data .res_txt1 { font-size: .75rem !important; }
  .cls_filter_data .box_dwn small { font-size: .62rem !important; }
}
@media (hover: none) {
  .cls_filter_data .social_sec { opacity: 1; transform: none; }
}

/* Filter toolbar (faculty / publications / research lists) */
.filter_data {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  max-width: 980px;
  margin: 0 auto 2rem !important;
  padding: .8rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.filter_data > [class*="col-"] { flex: 1 1 200px; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.filter_data > [class*="col-"]:empty { display: none; }
.filter_data > .col-sm-1 { flex: 0 1 110px; }
.filter_data > .col-sm-2:last-child { flex: 0 0 auto; }
.filter_data select, .filter_data select.form-control {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 46px;
  padding: 0 2.6rem 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--surface-alt);
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-800) 50%), linear-gradient(135deg, var(--navy-800) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.filter_data select:hover { background-color: #eaf0f8; }
.filter_data select:focus { outline: 0; border-color: var(--accent); background-color: #fff; box-shadow: 0 0 0 4px rgba(244, 166, 45, .25); }
.filter_data .btn, .filter_data .btn.btn-secondary {
  width: auto !important;
  padding: .7rem 1.5rem !important;
  background: transparent !important;
  color: var(--navy-800) !important;
  border: 2px solid var(--navy-800);
  border-radius: 999px;
  box-shadow: none;
}
.filter_data .btn::before {
  content: "\f021";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: .5rem;
  display: inline-block;
  transition: transform .4s ease;
}
.filter_data .btn:hover { background: var(--navy-800) !important; color: #fff !important; }
.filter_data .btn:hover::before { transform: rotate(180deg); }
@media (max-width: 700px) {
  .filter_data { border-radius: var(--radius); }
  .filter_data > [class*="col-"], .filter_data > .col-sm-2:last-child { flex: 1 1 100%; }
  .filter_data .btn { width: 100% !important; }
}

.cls_filter_data [hidden] { display: none !important; }
.cls_filter_data .no-results { grid-column: 1 / -1; text-align: center; padding: 2rem 0; color: var(--muted); }

/* Faculty toolbar: labelled fields, active state, live count, Reset only when needed */
.faculty-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.ft-field { display: flex; flex-direction: column; gap: .35rem; flex: 0 1 280px; min-width: 200px; }
.ft-field label {
  margin: 0;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-field select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 46px;
  padding: 0 2.6rem 0 1rem;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-800) 50%), linear-gradient(135deg, var(--navy-800) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ft-field select:hover { border-color: var(--navy-700); }
.ft-field select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(244, 166, 45, .25); }
.ft-field select.is-active { border-color: var(--accent-dark); background-color: #fffaf0; font-weight: 500; }
.ft-reset {
  height: 46px;
  padding: 0 .25rem;
  background: none;
  border: 0;
  color: var(--navy-700);
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ft-reset:hover { color: var(--accent-dark); }
.ft-reset[hidden] { display: none; }
.ft-count { margin: 0 0 0 auto; height: 46px; display: flex; align-items: center; font-size: .9rem; color: var(--muted); }
.ft-count strong { color: var(--navy-800); margin: 0 .25em; }
@media (max-width: 700px) {
  .ft-field { flex: 1 1 100%; }
  .ft-count { margin: 0; height: auto; }
}

/* Faculty page polish: toolbar spans the same width as the grid, no link underlines, tighter heading */
.portfolio-info > h2.page-title-modern { padding-bottom: .25rem !important; margin-bottom: 1.25rem; }
.faculty-toolbar { max-width: none; margin: 0 0 1.5rem; padding-bottom: 1rem; }
.cls_filter_data .box_dwn h6 a, .cls_filter_data .box_dwn h6 a:hover, .cls_filter_data .box_dwn h6 a:focus { text-decoration: none; }
.cls_filter_data .box_dwn h6 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.portfolio-info > h2.page-title-modern { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }

/* ==========================================================================
   FACULTY PROFILE PAGES (hero, tabs, timeline cards)
   ========================================================================== */
.pf-page { margin-top: 1.5rem !important; padding-bottom: 3rem; }
.pf-page .container { max-width: 1180px !important; }
.pf-page p, .pf-page li { text-align: left; }

/* ---- Hero ---- */
.pf-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.25rem;
  align-items: center;
  padding: 2.25rem 2.5rem;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pf-hero::after {
  content: "";
  position: absolute;
  top: -40%; right: -8%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 166, 45, .28), rgba(244, 166, 45, 0) 65%);
  pointer-events: none;
}
.pf-hero > * { position: relative; z-index: 1; }
.pf-hero-photo img {
  display: block;
  width: 190px; height: 190px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 15%;
  border: 4px solid rgba(255, 255, 255, .92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.pf-hero .pf-eyebrow {
  margin: 0 0 .35rem;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pf-hero .pf-name { margin: 0; color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; }
.pf-hero .pf-spec { margin: .35rem 0 0; color: rgba(255, 255, 255, .88); font-size: 1.05rem; }
.pf-keywords { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pf-keywords li {
  padding: .25rem .75rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .78rem;
  line-height: 1.5;
}
.pf-contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.pf-contact a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-800);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.pf-contact a:hover { background: var(--accent); color: var(--navy-900); transform: translateY(-2px); }
.pf-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.pf-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pf-links a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.pf-links img { width: 20px; height: 20px; object-fit: contain; }

/* ---- Tabs ---- */
.pf-tabs {
  display: flex;
  gap: .25rem;
  margin: 1.5rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pf-tab {
  flex: 0 0 auto;
  margin-bottom: -1px;
  padding: .85rem 1.1rem;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.pf-tab:hover { color: var(--navy-800); border-bottom-color: var(--line); }
.pf-tab.active { color: var(--navy-800); border-bottom-color: var(--accent); }
.pf-tab-logout { margin-left: auto; }

/* ---- Cards + timeline ---- */
.pf-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 1.25rem; align-items: start; }
.pf-card {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pf-card.pf-wide { grid-column: 1 / -1; }
.pf-card .pf-h {
  margin: 0 0 1.1rem !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left !important;
  color: var(--navy-800);
}
.pf-card .pf-h::after { content: ""; display: block; width: 36px; height: 3px; margin-top: .55rem; border-radius: 2px; background: var(--accent); }
.pf-about .pf-about-body, .pf-about .pf-about-body * {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
  text-align: left !important;
  background: transparent !important;
}
.pf-timeline { margin: 0; padding: 0 0 0 .25rem; list-style: none; border-left: 2px solid var(--line); }
.pf-item { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: 0 0 1.15rem 1.3rem; }
.pf-item:last-child { padding-bottom: .1rem; }
.pf-item::before {
  content: "";
  position: absolute;
  left: -.6rem; top: .5rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px #fff;
}
.pf-item-main { flex: 1 1 220px; min-width: 0; }
.pf-item-title { display: block; color: var(--navy-800); font-family: var(--font-head); font-size: .98rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.pf-item-sub { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.pf-year {
  flex: 0 0 auto;
  padding: .15rem .7rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--navy-700);
  font-size: .8rem;
  font-weight: 600;
}
.pf-actions { flex: 1 1 100%; display: flex; gap: .4rem; }
.pf-actions .btn, .pf-add .btn { padding: .35rem .9rem; font-size: .8rem; }
.pf-add { margin-top: 1rem; }

@media (max-width: 700px) {
  .pf-hero { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.75rem 1.25rem; justify-items: start; }
  .pf-hero-photo img { width: 128px; height: 128px; }
  .pf-card { padding: 1.25rem 1.1rem; }
}

/* profile page fixes: neutralise the legacy centred h2 underline, no stray scrollbar on tabs */
#portfolio-details .pf-card .pf-h::after { width: 36px; height: 3px; margin: .55rem 0 0; border-radius: 2px; }
.pf-tabs { overflow-y: hidden; scrollbar-width: thin; }
.pf-tabs .pf-tab, .pf-tabs .pf-tab.active, .pf-tabs .pf-tab:hover { background: transparent !important; box-shadow: none; border-radius: 0; }
.pf-tabs .pf-tab.active { color: var(--navy-800) !important; }
.pf-about .pf-about-body { max-width: 78ch; }
.pf-tabs { scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }

/* Legacy "body, html { overflow-x: hidden }" made both elements scroll containers (double vertical scrollbar). clip blocks sideways overflow without creating one. */
html, body { overflow-x: clip; overflow-y: visible; }

/* ==========================================================================
   FACULTY PROFILE: Research / Projects / Lab Members / Openings tabs
   ========================================================================== */

/* Rich-text blocks (research interests, current openings, about) */
.pf-page #features, .pf-page .features { padding: 0 !important; background: none !important; }
.pf-page #features .container { max-width: none !important; padding: 0 !important; }
.pf-page #features .col-12, .pf-page #features .col-sm-12 { padding: 0; }
.pf-page .bio_text1 {
  margin: 0;
  padding: 1.6rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.pf-page .bio_text1, .pf-page .bio_text1 *, .pf-about .pf-about-body, .pf-about .pf-about-body * {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: var(--ink) !important;
  text-align: left !important;
  background: transparent !important;
}
.pf-page .bio_text1 { background: var(--surface) !important; }
.pf-page .bio_text1 p, .pf-about .pf-about-body p { margin: 0 0 .9rem; }
.pf-page .bio_text1 ul, .pf-page .bio_text1 ol, .pf-about .pf-about-body ul, .pf-about .pf-about-body ol { margin: .4rem 0 1rem; padding-left: 1.5rem; }
.pf-page .bio_text1 li, .pf-about .pf-about-body li { list-style: revert; margin-bottom: .35rem; }
.pf-page .bio_text1 strong, .pf-page .bio_text1 b, .pf-page .bio_text1 h1, .pf-page .bio_text1 h2, .pf-page .bio_text1 h3, .pf-page .bio_text1 h4,
.pf-about .pf-about-body strong, .pf-about .pf-about-body b { font-weight: 600 !important; color: var(--navy-800) !important; }
.pf-page .bio_text1 a, .pf-about .pf-about-body a { color: var(--navy-700) !important; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.pf-page .bio_text1 a:hover, .pf-about .pf-about-body a:hover { color: var(--accent-dark) !important; }
.pf-page .bio_text1 img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.pf-empty { margin: 0; color: var(--muted) !important; font-style: italic; }
p.pf-empty.pf-card { padding: 1.5rem 1.6rem; }
.pf-page .col-sm-12:has(> .btn), .pf-page #features .col-sm-12[style*="text-align: right"] { margin-top: .9rem; }

/* Section headings on tab pages (h1/h2 in the content area, not the cards or modals) */
#portfolio-details .portfolio-info h1:not(.pf-name),
#portfolio-details .portfolio-info h2:not(.pf-h) {
  margin: 2rem 0 1rem !important;
  padding: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: left !important;
  color: var(--navy-800);
}
#portfolio-details .portfolio-info h1:not(.pf-name)::after,
#portfolio-details .portfolio-info h2:not(.pf-h)::after { width: 36px; height: 3px; margin: .55rem 0 0; border-radius: 2px; }
#portfolio-details .portfolio-info .pf-tabs + * h2:first-child { margin-top: 0 !important; }

/* Tables */
.pf-page table.table {
  width: 100%;
  margin: 0 0 1.5rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pf-page table.table th, .pf-page table.table td {
  padding: .85rem 1rem;
  text-align: left !important;
  vertical-align: middle;
  border-width: 0 0 1px;
  border-color: var(--line);
  color: var(--ink);
  font-size: .95rem;
}
.pf-page table.table tr:last-child td { border-bottom: 0; }
.pf-page table.table td h3, .pf-page table.table th h3 { margin: 0; font-size: inherit !important; font-weight: 500; color: inherit; text-align: left; }
.pf-page table.table td:first-child { width: 3.5rem; color: var(--muted); }
.pf-page table.table .btn { white-space: nowrap; }

/* Person gallery cards (lab members, alumni) */
.pf-page .row:has(> [class*="col-"] > .cstm_gllery),
.pf-page .content > .col-sm-12:has(> [class*="col-"] > .cstm_gllery) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin: 0 0 1rem;
}
.pf-page .row > [class*="col-"]:has(> .cstm_gllery), .pf-page .content > .col-sm-12 > [class*="col-"]:has(> .cstm_gllery) {
  width: auto !important; max-width: none !important; flex: none !important; float: none !important; padding: 0 !important; margin: 0 !important;
}
.pf-page .cstm_gllery {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  height: 100%;
  padding: 1.25rem .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pf-page .cstm_gllery:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.pf-page .cstm_gllery img { width: 112px !important; height: 112px !important; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 3px solid #fff; box-shadow: var(--shadow-card); }
.pf-page .cstm_gllery h3 { margin: 0; font-size: .95rem !important; font-weight: 600; line-height: 1.35; text-align: center; color: var(--navy-800); overflow-wrap: anywhere; }
.pf-page .cstm_gllery h3 a { color: inherit; text-decoration: none; }
.pf-page .cstm_gllery h3 a:hover { color: var(--accent-dark); }
.pf-page .cstm_gllery p { margin: 0; font-size: .8rem; color: var(--muted); text-align: center; }
.pf-page .cstm_gllery p.pf-del {
  position: absolute; top: .5rem; right: .5rem;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #c62828; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1;
  text-align: center; cursor: pointer;
}
.pf-page .pf-person { display: flex; align-items: center; gap: .85rem; }
.pf-page .pf-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-page .pf-person h3 { margin: 0; }

/* Phones: content cards a touch tighter */
@media (max-width: 700px) {
  .pf-page .bio_text1 { padding: 1.25rem 1.1rem; }
  .pf-page .row:has(> [class*="col-"] > .cstm_gllery), .pf-page .content > .col-sm-12:has(> [class*="col-"] > .cstm_gllery) { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .pf-page table.table th, .pf-page table.table td { padding: .7rem .75rem; }
}

/* tab content fixes: full-width tables, readable table header, cards fill their grid cell */
#main .pf-page table.table { display: table; }
.pf-page table.table thead th { background: var(--navy-800); color: #fff; font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-color: var(--navy-800); }
.pf-page .cstm_gllery { width: 100%; }
#portfolio-details .portfolio-info h2:not(.pf-h) { margin-bottom: .75rem !important; }
.pf-page .cstm_gllery { margin: 0 !important; }

/* publications tab: section headings are h3 directly under a column */
#portfolio-details .portfolio-info .col-sm-12 > h3 {
  margin: 2rem 0 .75rem !important;
  padding: 0;
  font-size: 1.2rem !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: left !important;
  text-transform: capitalize;
  color: var(--navy-800);
}
#portfolio-details .portfolio-info .col-sm-12 > h3::after { content: ""; display: block; width: 36px; height: 3px; margin-top: .55rem; border-radius: 2px; background: var(--accent); }
.pf-page table.table td a:not(.btn) { color: var(--navy-700); overflow-wrap: anywhere; }
.pf-page table.table td { line-height: 1.6; }
.pf-page table.table td a.btn { display: inline-block; }
.pf-page table.table a.btn, .pf-page table.table .myLargeModalLabel:not([style]) {
  padding: .4rem 1rem !important;
  font-size: .8rem !important;
  background: transparent !important;
  color: var(--navy-800) !important;
  box-shadow: inset 0 0 0 1.5px var(--navy-800);
}
.pf-page table.table a.btn:hover, .pf-page table.table .myLargeModalLabel:not([style]):hover { background: var(--navy-800) !important; color: #fff !important; }

/* student details page: supervisors as compact chips, hero spacing */
.pf-page .co-codi { width: auto !important; float: none !important; display: inline-flex; align-items: center; gap: .6rem; margin: .35rem .6rem .35rem 0; padding: .35rem .9rem .35rem .4rem; background: var(--surface); border: 1px solid var(--card-border); border-radius: 999px; box-shadow: var(--shadow-sm); }
.pf-page .co-codi img.bio_img { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover; flex: none; }
.pf-page .co-codi a { width: auto !important; text-decoration: none; }
.pf-page .co-codi p, .pf-page .co-codi .bio_text { margin: 0 !important; font-size: .9rem !important; font-weight: 600; color: var(--navy-800) !important; text-align: left !important; }
.pf-page .pf-hero + .col-sm-12, .pf-page .pf-hero + .col-12 { margin-top: 1.25rem; }
.pf-page .col-sm-12 > span { font-weight: 600; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* project details modal */
.myLargeModal .modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.myLargeModal .modal-content .modal-content { padding: 0 !important; border-radius: 0; box-shadow: none; }
.myLargeModal .row { margin: 0; }
.myLargeModal .table-responsive { margin: 0; }
.myLargeModal table { width: 100%; margin: 0; border: 0; }
.myLargeModal tr:first-child { background: var(--navy-800) !important; }
.myLargeModal tr:first-child th { position: relative; padding: 1rem 3.2rem 1rem 1.4rem !important; color: #fff !important; font-family: var(--font-head) !important; font-size: 1.1rem !important; text-align: left !important; }
.myLargeModal .close { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.myLargeModal th, .myLargeModal td { padding: .85rem 1.4rem; text-align: left !important; vertical-align: top; border-color: var(--line); }
.myLargeModal tr:not(:first-child) th { width: 30% !important; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.myLargeModal td { color: var(--ink); }
.pf-page #features .row { margin-left: 0; margin-right: 0; }
.pf-page .row > .pf-tabs { width: auto; max-width: none; margin-left: 12px; margin-right: 12px; padding-left: 0; padding-right: 0; }
.pf-page #features .row { margin-left: 12px; margin-right: 12px; }
.pf-page .row > .pf-tabs { flex: 0 0 auto; width: calc(100% - 24px); min-width: 0; }

/* student details: cards under the hero, supervision chips */
.pf-after-hero { margin-top: 1.5rem; }
.pf-sup-label { margin: 0 0 .4rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
.pf-sup-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pf-sup-list:last-child { margin-bottom: 0; }
.pf-page a.pf-sup { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .35rem; background: var(--surface-alt); border: 1px solid var(--card-border); border-radius: 999px; color: var(--navy-800); font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.pf-page a.pf-sup:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--navy-800); }
.pf-page a.pf-sup img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-pubs .col-sm-12, .pf-pubs .col-12 { padding: 0; }
.pf-pubs table.table { box-shadow: none; }

/* tighter vertical rhythm on profile tab pages (root font-size is 19px, so keep rem values small) */
#portfolio-details.pf-page .row { row-gap: 1rem; }
#portfolio-details.pf-page .row:has(> [class*="col-"] > .cstm_gllery),
#portfolio-details.pf-page .content > .col-sm-12:has(> [class*="col-"] > .cstm_gllery) { row-gap: .85rem; }
.pf-tabs { margin-bottom: .25rem; }
#portfolio-details .portfolio-info h1:not(.pf-name),
#portfolio-details .portfolio-info h2:not(.pf-h),
#portfolio-details .portfolio-info .col-sm-12 > h3 { margin-top: 1.25rem !important; margin-bottom: .6rem !important; }
#portfolio-details .portfolio-info h1:not(.pf-name):first-child,
#portfolio-details .portfolio-info h2:not(.pf-h):first-child,
#portfolio-details .portfolio-info .col-sm-12 > h3:first-child { margin-top: 0 !important; }
.pf-page table.table { margin-bottom: .75rem; }

/* admin-entered About text often wraps whole paragraphs in <strong>; keep emphasis light */
.pf-about .pf-about-body strong, .pf-about .pf-about-body b { font-weight: 500 !important; color: var(--ink) !important; }

/* project modal refinements: compact width, aligned rows, soft dividers */
.myLargeModal .modal-dialog { max-width: 760px !important; width: calc(100% - 2rem); margin-left: auto; margin-right: auto; }
.myLargeModal table, .myLargeModal table th, .myLargeModal table td { border-left: 0 !important; border-right: 0 !important; }
.myLargeModal table th, .myLargeModal table td { border-color: var(--line) !important; vertical-align: middle !important; }
.myLargeModal tr:first-child th { border-color: var(--navy-800) !important; }
.myLargeModal tr:last-child th, .myLargeModal tr:last-child td { border-bottom: 0 !important; }
.myLargeModal td { font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.myLargeModal td a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.myLargeModal td a:hover { color: var(--accent-dark); text-decoration: underline; }
.myLargeModal tr:not(:first-child) th { padding-top: .9rem; padding-bottom: .9rem; font-size: .72rem; }
.myLargeModal .table-responsive { overflow: visible; }
.myLargeModal table th, .myLargeModal table td { border-top: 0 !important; border-bottom: 1px solid var(--line) !important; box-shadow: none; }
.myLargeModal tr:first-child th { border-bottom: 0 !important; }

/* ==========================================================================
   DESKTOP MEGA-MENU v2: one calm navy panel, no slanted blocks / cream fills
   ========================================================================== */
@media (min-width: 992px) {
  /* top-level items: plain labels with an amber underline on hover */
  .primary-nav--mega .primary-nav__top-link,
  .primary-nav--mega li .primary-nav__top-link a,
  .primary-nav--mega li:hover .primary-nav__top-link a,
  .primary-nav--mega li:focus-within .primary-nav__top-link a,
  .primary-nav--mega li .primary-nav__top-link a:hover { background: transparent !important; background-color: transparent !important; }
  .primary-nav--mega .primary-nav__top-link a:before,
  .primary-nav--mega .primary-nav__top-link a:after { display: none !important; content: none !important; }
  .primary-nav--mega li .primary-nav__top-link a {
    color: #fff !important;
    box-shadow: inset 0 -3px 0 transparent;
    transition: color .2s ease, box-shadow .2s ease;
  }
  .primary-nav--mega li:hover > .primary-nav__top-link a,
  .primary-nav--mega li:focus-within > .primary-nav__top-link a {
    color: var(--accent) !important;
    box-shadow: inset 0 -3px 0 var(--accent);
  }

  /* panel */
  .primary-nav--mega.is-hover { padding-bottom: 1rem; }
  .header__navbar:has(.primary-nav--mega.is-hover) {
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 48px rgba(6, 26, 58, .35);
  }

  /* each column: soft divider, transparent background (legacy painted the hovered one cream) */
  .primary-nav--mega > .menu > li > .menu,
  .primary-nav--mega > .menu > li:hover > .menu,
  .primary-nav--mega > .menu > li:focus-within > .menu { background: transparent !important; box-shadow: none; }
  .primary-nav--mega > .menu > li { transition: background .25s ease; }
  .primary-nav--mega.is-hover > .menu > li:hover { background: rgba(255, 255, 255, .06); border-radius: 0 0 14px 14px; }

  /* links */
  .primary-nav--mega > .menu > li > .menu a,
  .primary-nav--mega > .menu > li:not(:hover):not(:focus-within) .menu a,
  .primary-nav--mega > .menu > li:hover .menu a {
    display: block;
    margin: .1rem .5rem;
    padding: .55rem .9rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .86) !important;
    background: transparent !important;
    font-size: .95rem;
    box-shadow: inset 3px 0 0 transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, padding .2s ease;
  }
  .primary-nav--mega li li a:hover,
  .primary-nav--mega li li a:focus,
  .primary-nav--mega > .menu > li:hover .menu a:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 1.15rem;
  }
}


/* ==========================================================================
   FROSTED GLASS: nav bars, mega panel and popups
   Solid fallbacks first; the blur is layered on only where backdrop-filter exists.
   ========================================================================== */
:root {
  --glass-nav: rgba(6, 26, 58, .86);
  --glass-panel: rgba(255, 255, 255, .88);
  --glass-edge: rgba(255, 255, 255, .22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-nav: rgba(6, 26, 58, .62); --glass-panel: rgba(255, 255, 255, .72); }
}

/* desktop bar: fixed so the page scrolls underneath and the blur shows */
@media (min-width: 992px) {
  .header__navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1000;
    background: var(--glass-nav) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--glass-edge);
    box-shadow: 0 8px 30px rgba(6, 26, 58, .18);
  }
  .primary-nav--mega, .primary-nav--mega > .menu { background: transparent !important; }
  .header__navbar:has(.primary-nav--mega.is-hover) { box-shadow: 0 24px 48px rgba(6, 26, 58, .35); }
}

/* tablet / phone bar */
.menu_sec {
  background: var(--glass-nav) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--glass-edge);
}
.menu_sec .navbar-collapse { background: transparent; }

/* popups: dim + blur the page behind, frosted card in front */
.modal-backdrop.show { opacity: 1; background: rgba(6, 26, 58, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[style*="background"] { background: rgba(6, 26, 58, .42) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-content {
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(6, 26, 58, .3);
}
.modal-content .modal-content { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.myLargeModal .table, .myLargeModal table th:not([colspan]), .myLargeModal table td { background: transparent !important; }
.dropdown-menu, .offcanvas { background: var(--glass-panel); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); }
@media (min-width: 992px) {
  .header__navbar .l-nav-horizontal, .header__navbar .off-canvas__container,
  .header__navbar .l-nav-horizontal__brand, .header__navbar .l-nav-horizontal__primary-nav,
  .header__navbar nav.primary-nav, .header__navbar .primary-nav__top-link { background: transparent !important; background-color: transparent !important; }
}

/* mega-menu submenu: remove legacy cream fills and the orange arc pseudo-elements */
@media (min-width: 992px) {
  .primary-nav li li,
  .primary-nav li li:hover,
  .primary-nav li li:focus-within,
  .primary-nav--superfish li li a,
  .primary-nav--superfish li li li a,
  .primary-nav--superfish li li li li a,
  .primary-nav--superfish li li .primary-nav__nolink,
  .primary-nav--mega li li .primary-nav__nolink { background: transparent !important; background-color: transparent !important; }
  .primary-nav--mega li li a:before,
  .primary-nav--mega li li a:after,
  .primary-nav--mega li li .primary-nav__nolink:before,
  .primary-nav--mega li li .primary-nav__nolink:after { content: none !important; display: none !important; }
  .primary-nav--mega li li a { border: 0 !important; color: rgba(255, 255, 255, .88) !important; }
  .primary-nav--mega li li a:hover,
  .primary-nav--mega li li a:focus { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
  .primary-nav--mega li li .primary-nav__submenu-indicator:after { color: var(--accent) !important; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-nav: rgba(6, 26, 58, .74); }
}
@media (min-width: 992px) {
  .header__navbar:has(.primary-nav--mega.is-hover) { background: rgba(6, 26, 58, .86) !important; }
}

/* grouped people lists (scholars): one section per programme */
.people-group { margin-bottom: 1.75rem; }
.people-group[hidden] { display: none; }
#faculty-grid > .no-results { text-align: center; padding: 2rem 0; color: var(--muted); }
#faculty-grid .people-group .row { margin-left: 0; margin-right: 0; }
/* grouped people lists: kill the legacy section padding (60px) that stacked under the toolbar */
section.people-group { padding: 0 !important; margin: 0 0 1.5rem; }
#faculty-grid .people-group-title { margin-top: 0 !important; margin-bottom: .85rem !important; }
.faculty-toolbar { margin-bottom: 1.25rem; }

/* ---------- Staff cards ---------- */
.staff-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.staff-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.staff-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.staff-head { display: flex; align-items: center; gap: 1rem; }
.staff-card .staff-photo { flex: none; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: center 15%; border: 3px solid #fff; box-shadow: var(--shadow-card); }
.staff-id { min-width: 0; }
.staff-card .staff-name { margin: 0 0 .2rem !important; padding: 0 !important; border: 0 !important; font-size: 1.02rem !important; font-weight: 600; line-height: 1.3; text-align: left; color: var(--navy-800); }
.staff-card .staff-name::after { display: none !important; }
.staff-card p { margin: 0; text-align: left; }
.staff-card .staff-role { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.4; color: var(--accent-dark); }
.staff-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.staff-tags li { padding: .22rem .65rem; border-radius: 999px; background: var(--surface-alt); color: var(--navy-700); font-size: .78rem; line-height: 1.45; }
.staff-tags li i { margin-right: .25rem; font-size: .8em; }
.staff-tags-wide li { border-radius: var(--radius-sm); }
.staff-contact { display: flex; flex-direction: column; gap: .35rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); }
.staff-contact a { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--navy-700); text-decoration: none; }
.staff-contact a span { min-width: 0; overflow-wrap: anywhere; }
.staff-contact a:hover { color: var(--accent-dark); }
.staff-contact a:hover span { text-decoration: underline; }
.staff-contact i { flex: none; width: 1rem; text-align: center; color: var(--navy-700); }
#staff-grid .people-group-title { margin-top: 1.25rem !important; }
#staff-grid .people-group:first-child .people-group-title { margin-top: 0 !important; }
#staff-grid { margin-top: 1.5rem; }

/* heading hierarchy on list pages: big page title, quiet section labels */
#portfolio-details .portfolio-info h2.page-title-modern:not(.pf-h) {
  margin: 0 0 .4rem !important;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem) !important;
  line-height: 1.15;
}
#portfolio-details .portfolio-info h2.people-group-title:not(.pf-h) {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1rem !important;
  font-family: var(--font-head);
  font-size: .78rem !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-700);
}
#portfolio-details .portfolio-info h2.people-group-title:not(.pf-h)::after {
  content: "";
  flex: 1;
  width: auto;
  height: 1px;
  margin: 0;
  border-radius: 0;
  background: var(--line);
}
#portfolio-details .portfolio-info #staff-grid .people-group:first-child h2.people-group-title:not(.pf-h),
#portfolio-details .portfolio-info #faculty-grid .people-group:first-child h2.people-group-title:not(.pf-h) { margin-top: 1rem !important; }


/* ===== Specializations (list + detail) ===== */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.spec-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.spec-card:hover, .spec-card:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(6, 26, 58, .22); }
.spec-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.spec-card:hover img { transform: scale(1.06); }
.spec-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 58, 0) 35%, rgba(6, 26, 58, .85)); }
.spec-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.2rem;
}
.spec-card-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: #fff; }
.spec-card-go {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: var(--navy-900); font-size: .8rem;
  transform: translateX(-6px); opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.spec-card:hover .spec-card-go, .spec-card:focus-visible .spec-card-go { opacity: 1; transform: none; }

.spec-hero {
  position: relative;
  overflow: hidden;
  height: clamp(14rem, 32vw, 21rem);
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: var(--shadow-md);
}
.spec-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spec-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 58, .15), rgba(6, 26, 58, .8)); }
.spec-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(1.1rem, 3vw, 2rem); }
.spec-hero h1 {
  margin: .35rem 0 0; font-family: var(--font-head); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: #fff; text-align: left;
}
.spec-back { font-size: .8rem; letter-spacing: .04em; color: rgba(255, 255, 255, .85); text-decoration: none; }
.spec-back:hover { color: var(--accent); }

.spec-nav {
  position: sticky; top: 4.75rem; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 1rem auto 0; padding: .5rem; width: fit-content; max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-sm);
}
@supports (backdrop-filter: blur(1px)) { .spec-nav { background: rgba(255, 255, 255, .6); backdrop-filter: blur(14px) saturate(160%); } }
.spec-nav a {
  padding: .4rem 1.1rem; border-radius: 999px; font-family: var(--font-head); font-size: .85rem; font-weight: 500;
  color: var(--navy-700); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.spec-nav a:hover { background: rgba(10, 58, 115, .08); }
.spec-nav a.is-active { background: var(--navy-700); color: #fff; }

.spec-section {
  margin-top: 1.25rem; padding: clamp(1.1rem, 2.5vw, 1.75rem);
  scroll-margin-top: 9rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
}
.spec-h {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--navy-900); text-align: left;
}
.spec-h::before { content: ""; width: .3rem; height: 1.2em; border-radius: 3px; background: var(--accent); }
.spec-body { line-height: 1.7; color: var(--ink, #2a3647); text-align: left; }
.spec-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.spec-body p { margin: 0 0 .9em; }
.spec-body p:last-child { margin-bottom: 0; }
.spec-section .spec-grid { margin-top: 0; }

/* spec detail: neutralise legacy heading bar + inline-styled editor content */
#portfolio-details h2.spec-h { padding: 0 !important; font-size: 1.25rem !important; text-align: left !important; }
#portfolio-details h2.spec-h::after { content: none !important; }
.spec-body, .spec-body * {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--ink) !important;
  text-align: left !important;
  background: transparent !important;
}
.spec-body ul, .spec-body ol { margin: .4rem 0 1rem; padding-left: 1.5rem; }
.spec-body li { list-style: revert; margin-bottom: .35rem; }
.spec-body strong, .spec-body b { font-weight: 600 !important; color: var(--navy-800) !important; }
.spec-body a { color: var(--navy-700) !important; text-decoration: underline; text-underline-offset: 2px; }
.spec-body h1, .spec-body h2, .spec-body h3, .spec-body h4 { margin: 1.2rem 0 .5rem; font-family: var(--font-head) !important; font-size: 1.1rem !important; font-weight: 600; color: var(--navy-800) !important; }
.spec-body table { max-width: 100%; }

.spec-body { max-width: 85ch; }


/* ===== Lab pages ===== */
.spec-back.lab-back { display: inline-block; color: var(--navy-700); margin-bottom: .5rem; }
.spec-back.lab-back:hover { color: var(--accent-dark); }
#portfolio-details h2.lab-title { margin: 0 0 1rem !important; font-size: clamp(1.7rem, 3.2vw, 2.4rem) !important; text-align: left !important; }
.lab-intro .spec-body { max-width: 85ch; }
.lab-people { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.lab-intro > .spec-body:only-child, .lab-people:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lab-equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1.1rem; }
.lab-equip { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: box-shadow .25s ease, transform .25s ease; }
.lab-equip:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.lab-equip img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface, #f3f6fa); }
.lab-equip-text { padding: 1rem 1.15rem 1.2rem; }
.lab-equip-text h3 { margin: 0 0 .5rem; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--navy-800); }
.lab-equip-text .spec-body, .lab-equip-text .spec-body * { font-size: .92rem !important; line-height: 1.6 !important; }

.lab-person { display: block; }
.lab-person .pf-sup-label { display: block; }
.lab-person a.pf-sup { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .35rem; background: var(--surface-alt); border: 1px solid var(--card-border); border-radius: 999px; color: var(--navy-800); font-weight: 600; font-size: .92rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.lab-person a.pf-sup:hover { border-color: var(--accent); transform: translateY(-2px); }
.lab-person a.pf-sup img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
/* ===== Programs accordion ===== */
.prog-list { display: grid; gap: .9rem; max-width: 1100px; margin: 1.5rem auto 0; }
.prog-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.prog-item.is-open { border-color: var(--accent); box-shadow: var(--shadow-card); }
#portfolio-details h3.prog-head { margin: 0; padding: 0; }
.prog-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.05rem 1.35rem; border: 0; background: transparent; text-align: left; font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: var(--navy-800); cursor: pointer; }
.prog-toggle:hover { color: var(--navy-700); }
.prog-toggle i { flex: none; font-size: .85rem; color: var(--accent-dark); transition: transform .25s ease; }
.prog-toggle:not(.collapsed) i { transform: rotate(180deg); }
.prog-body { display: grid; gap: 1.5rem; padding: .25rem 1.35rem 1.4rem; }
.prog-body.has-img { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.prog-body img { width: 100%; border-radius: var(--radius-sm); object-fit: cover; }
@media (max-width: 767px) { .prog-body.has-img { grid-template-columns: 1fr; } }
.prog-list { max-width: none; margin-top: 1.25rem; }
.prog-body img { max-height: 22rem; }

/* ===== Courses table ===== */
.ft-search input { height: 2.6rem; min-width: min(100%, 18rem); padding: 0 .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: .95rem; color: var(--ink); }
.ft-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.course-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
table.course-table { width: 100%; margin: 0; border-collapse: collapse; }
.course-table th { padding: .8rem 1.1rem; background: var(--navy-900); color: #fff; font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.course-table td { padding: .75rem 1.1rem; border-top: 1px solid var(--line); text-align: left; font-size: .95rem; color: var(--ink); }
.course-table tbody tr:hover { background: rgba(10, 58, 115, .04); }
.course-table .c-no { width: 4rem; color: var(--muted); }
.course-table .c-id { width: 11rem; white-space: nowrap; font-weight: 600; }
.course-table .c-id a { color: var(--navy-700); text-decoration: none; border-bottom: 1px solid rgba(10, 58, 115, .3); }
.course-table .c-id a:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.course-table-wrap .no-results { padding: 1.5rem; margin: 0; }
.course-table-wrap table.course-table { width: 100% !important; max-width: none !important; display: table !important; }
.ft-search label { display: block; }

/* ===== Admission notices ===== */
.adm-list { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.adm-list .spec-section { margin-top: 0; }
#portfolio-details h3.spec-h { padding: 0 !important; font-size: 1.2rem !important; text-align: left !important; }
#portfolio-details h3.spec-h::after { content: none !important; }
.adm-body { max-width: none; overflow-x: auto; }
.adm-body table { width: 100%; margin: .75rem 0; border-collapse: collapse; }
.adm-body th, .adm-body td { padding: .5rem .7rem !important; border: 1px solid var(--line) !important; font-size: .9rem !important; line-height: 1.5 !important; text-align: left !important; vertical-align: top; }
.adm-body tr:first-child td, .adm-body th { background: var(--surface-alt) !important; font-weight: 600; }
.adm-body a { overflow-wrap: anywhere; }
.adm-apply { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .55rem 1.2rem; border-radius: 999px; background: var(--accent); color: var(--navy-900) !important; font-family: var(--font-head); font-size: .9rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.adm-apply:hover { background: var(--accent-dark); transform: translateY(-2px); }
.adm-list { grid-template-columns: minmax(0, 1fr); }
.adm-item, .adm-body { min-width: 0; }
.adm-body table { width: max-content; min-width: 100%; }

/* admission: wide data tables -> compact, scrollable, sticky first column */
.adm-body { position: relative; border-radius: var(--radius-sm); }
.adm-body table { width: max-content !important; min-width: 100% !important; max-width: none !important; font-variant-numeric: tabular-nums; }
.adm-body th, .adm-body td { padding: .4rem .75rem !important; font-size: .84rem !important; line-height: 1.35 !important; white-space: nowrap; text-align: center !important; vertical-align: middle !important; height: auto !important; }
.adm-body td p, .adm-body th p { margin: 0 !important; }
.adm-body tr:first-child td { background: var(--navy-900) !important; color: #fff !important; font-family: var(--font-head); font-weight: 600; text-align: left !important; font-size: .9rem !important; position: sticky; left: 0; }
.adm-body tr:nth-child(2) td, .adm-body tr:nth-child(2) th { background: var(--surface-alt) !important; font-weight: 600 !important; color: var(--navy-800) !important; white-space: normal; min-width: 4.5rem; }
.adm-body tr:nth-child(n+3):hover td { background: rgba(10, 58, 115, .05) !important; }
.adm-body td:first-child { position: sticky; left: 0; z-index: 1; background: #fff !important; font-weight: 600 !important; text-align: left !important; }
.adm-body tr:nth-child(2) td:first-child { background: var(--surface-alt) !important; }
.adm-body tr:first-child td:first-child { background: var(--navy-900) !important; }
.adm-body th, .adm-body td { font-size: .72rem !important; line-height: 1.4 !important; padding: .35rem .6rem !important; }
.adm-body tr:first-child td { font-size: .85rem !important; }
.adm-body th.adm-long, .adm-body td.adm-long { white-space: normal !important; min-width: 17rem; max-width: 22rem; text-align: left !important; }
.adm-body tr:nth-child(2) td, .adm-body tr:nth-child(2) th { min-width: 3rem; }
.adm-body th.adm-long, .adm-body td.adm-long { min-width: 14rem; max-width: 18rem; }

/* ===== Publication lists ===== */
.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pub-item { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; }
.pub-item:hover { box-shadow: var(--shadow-card); border-color: rgba(10, 58, 115, .25); }
.pub-item[hidden] { display: none; }
.pub-cite { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--ink); text-align: left; }
.pub-cite strong { font-weight: 600; color: var(--navy-800); }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: .7rem; }
.pub-btn { padding: .3rem .9rem; border: 1px solid var(--navy-700); border-radius: 999px; font-family: var(--font-head); font-size: .72rem; font-weight: 500; color: var(--navy-700); text-decoration: none; transition: background .2s ease, color .2s ease; }
.pub-btn:hover { background: var(--navy-700); color: #fff; }
.pub-link { font-size: .74rem; color: var(--muted); text-decoration: none; }
.pub-link:hover { color: var(--accent-dark); }
/* ===== Project lists (research / consultancy) ===== */
.proj-item { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.proj-main { min-width: 0; }
.proj-main .pub-cite strong { font-size: .92rem; }
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .5rem; font-size: .76rem; color: var(--muted); }
.proj-meta i { margin-right: .25rem; }
.proj-status { padding: .12rem .6rem; border-radius: 999px; background: rgba(10, 58, 115, .08); color: var(--navy-700); font-weight: 600; font-size: .72rem; }
.proj-status.st-ongoing { background: rgba(24, 140, 80, .12); color: #14733f; }
.proj-status.st-completed { background: rgba(10, 58, 115, .1); color: var(--navy-700); }
.proj-status.st-closed, .proj-status.st-transferred { background: rgba(120, 120, 120, .14); color: #555; }
.proj-btn { flex: none; background: transparent; cursor: pointer; }
@media (max-width: 575px) { .proj-item { flex-direction: column; align-items: flex-start; } }
/* ===== Faculty/student edit-record modals ===== */
.modal-dialog.modal-lg { width: auto !important; max-width: min(980px, 94vw) !important; margin: 4vh auto !important; }
.modal-content > form { padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem; }
.modal-content > form .container { width: 100%; max-width: none !important; padding: 0; }
.modal-content > form .row > .col-sm-12 { margin-bottom: 0 !important; }

/* profile edit: photo left, fields right */
.modal-content > form .row > .col-sm-12:has(> .col-sm-2 .bio_img) { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.modal-content > form .row > .col-sm-12:has(> .col-sm-2 .bio_img) > div { float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; text-align: left !important; display: block !important; }
.modal-content .bio_img { display: block; width: 8rem; height: 8rem; margin: 0 auto .75rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-card); }
.modal-content .fileupload { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.modal-content input[type=file] { width: 100%; font-size: .72rem; color: var(--muted); }
.modal-content input[type=file]::file-selector-button { margin-right: .5rem; padding: .35rem .8rem; border: 1px solid var(--navy-700); border-radius: 999px; background: transparent; color: var(--navy-700); font-family: var(--font-head); font-size: .72rem; font-weight: 500; cursor: pointer; }
.modal-content input[type=file]::file-selector-button:hover { background: var(--navy-700); color: #fff; }

/* rows of label + input */
.modal-content .cstm_details { float: none !important; width: 100% !important; max-width: none !important; margin: 0 0 .7rem !important; padding: 0 !important; }
.modal-content .cstm_details:has(> label.col-lg-3) { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.modal-content .cstm_details label { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-family: var(--font-head); font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .02em; color: var(--navy-800) !important; }
.modal-content .cstm_details > div { float: none !important; width: 100% !important; max-width: none !important; padding: 0 !important; }
.modal-content .cstm_details:not(:has(> label.col-lg-3)) { display: block; }
.modal-content .cstm_details:not(:has(> label.col-lg-3)) label { display: block; margin-bottom: .3rem !important; }
.modal-content .form-control, .modal-content select, .modal-content textarea:not(#aboutme) {
  width: 100%; height: 2.5rem; padding: 0 .85rem; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important;
  background: #fff !important; box-shadow: none !important; font: inherit; font-size: .88rem !important; color: var(--ink) !important;
}
.modal-content textarea.form-control { height: auto; min-height: 6rem; padding: .6rem .85rem; }
.modal-content .form-control:focus, .modal-content select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent) !important; }
.modal-content .cke { width: 100% !important; margin-bottom: 1rem; border: 1px solid var(--line) !important; border-radius: var(--radius-sm); overflow: hidden; box-shadow: none; }

/* actions */
.modal-content > form > .container > .col-sm-12:last-child, .modal-content > form .col-sm-12[style*="text-align: center"] { margin-top: 1rem !important; }
.modal-content form input[type=submit].btn, .modal-content form button[type=submit].btn {
  min-width: 9rem; padding: .6rem 1.8rem; border: 0; border-radius: 999px; background: var(--accent) !important; color: var(--navy-900) !important;
  font-family: var(--font-head); font-size: .88rem; font-weight: 600; box-shadow: none; transition: background .2s ease, transform .2s ease;
}
.modal-content form input[type=submit].btn:hover { background: var(--accent-dark) !important; transform: translateY(-2px); }
@media (max-width: 767px) {
  .modal-content > form .row > .col-sm-12:has(> .col-sm-2 .bio_img) { grid-template-columns: 1fr; }
  .modal-content .cstm_details:has(> label.col-lg-3) { grid-template-columns: 1fr; gap: .3rem; }
}
/* ===== edit popups: multi-field forms (label above input) ===== */
.modal-content form .col-sm-12:has(> .form-group.cstm_details.col-sm-4),
.modal-content form .body_content > div,
.modal-content form .col-sm-10:has(> .form-group.cstm_details.col-sm-4) {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .25rem 1rem;
  float: none !important; width: 100% !important; max-width: none !important; padding: 0 !important;
}
.modal-content form .cstm_details.col-sm-12 { grid-column: 1 / -1; }
.modal-content form .cstm_details[style*="display: none"], .modal-content form .cstm_details[hidden] { display: none !important; }
.modal-content .form-group:not(.cstm_details) { margin: 0 0 .9rem; }
.modal-content .form-group:not(.cstm_details) > label { display: block; float: none; width: auto; margin: 0 0 .3rem; padding: 0; text-align: left; font-family: var(--font-head); font-size: .78rem; font-weight: 600; color: var(--navy-800); }
.modal-content .form-group:not(.cstm_details) > div[class*="col-"] { float: none; width: 100%; padding: 0; }
.modal-content input[type=file].form-control { height: auto; padding: .4rem .6rem; }
.modal-content .col-sm-12 > textarea, .modal-content .col-sm-12 > .cke { margin-bottom: .5rem; }
.modal-content #err { color: #b3261e; font-size: .85rem; margin-bottom: .5rem; }
.modal-content .chosen-container { width: 100% !important; }
.modal-content .chosen-container-multi .chosen-choices { min-height: 2.5rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
/* ===== Sign-in screens ===== */
.auth-wrap { display: grid; place-items: start center; min-height: 60vh; padding: 3rem 1rem 4rem; }
.auth-card, .auth-roles-wrap { width: min(28rem, 100%); }
.auth-roles-wrap { width: min(34rem, 100%); }
.auth-card { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); }
.auth-title { margin: 0; font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--navy-800); text-align: left; }
.auth-sub { margin: .4rem 0 1.5rem; color: var(--muted); font-size: .95rem; text-align: left; }
.auth-msg { margin-bottom: 1rem; padding: .65rem .9rem; border-radius: 10px; background: #fdecea; color: #b3261e; font-size: .85rem; text-align: left; }
.auth-field { position: relative; margin-bottom: 1rem; }
.auth-field label { display: block; margin: 0 0 .35rem; font-family: var(--font-head); font-size: .78rem; font-weight: 600; color: var(--navy-800); text-align: left; }
.auth-field input { width: 100%; height: 2.9rem; padding: 0 1rem 0 2.75rem; border: 1px solid var(--line); border-radius: 12px; background: #f8fafd; font: inherit; font-size: .95rem; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.auth-field input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 166, 45, .25); }
.auth-field svg { position: absolute; left: 1rem; bottom: .8rem; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.auth-field input:focus ~ svg { stroke: var(--accent-dark); }
.auth-btn { width: 100%; height: 3rem; margin-top: .5rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--navy-900); font-family: var(--font-head); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.auth-btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
.auth-foot { margin: 1.25rem 0 0; text-align: center; font-size: .85rem; }
.auth-foot a { color: var(--muted); text-decoration: none; }
.auth-foot a:hover { color: var(--accent-dark); }
.auth-roles { display: grid; gap: .8rem; }
.auth-role { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.auth-role:hover, .auth-role:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.auth-role-ico { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 12px; background: rgba(10, 58, 115, .08); }
.auth-role-ico svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--navy-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-role-text { display: grid; flex: 1; min-width: 0; }
.auth-role-text strong { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--navy-800); }
.auth-role-text small { font-size: .82rem; color: var(--muted); }
.auth-role > i { color: var(--accent-dark); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.auth-role:hover > i, .auth-role:focus-visible > i { opacity: 1; transform: none; }
.auth-wrap { padding-top: calc(4.5rem + 2rem); }

/* ===== profile owner view: calmer Edit / Delete / Add buttons ===== */
.pf-page .pf-item .btn, .pf-page .pf-card > .btn, .pf-page .pf-card .btn.about_btn {
  display: inline-flex; align-items: center; gap: .35rem; margin: .5rem .4rem 0 0 !important;
  padding: .3rem .85rem !important; border-radius: 999px !important; box-shadow: none !important;
  font-family: var(--font-head); font-size: .72rem !important; font-weight: 600; line-height: 1.4; letter-spacing: .02em;
  background: #fff !important; border: 1px solid var(--navy-700) !important; color: var(--navy-700) !important; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pf-page .pf-item .btn:hover, .pf-page .pf-card > .btn:hover, .pf-page .pf-card .btn.about_btn:hover { background: var(--navy-700) !important; color: #fff !important; }
.pf-page .pf-item .btn[onclick*="Dtl"], .pf-page .pf-item .btn[onclick*="Dlt"], .pf-page .pf-item .btn[onclick*="Delete"], .pf-page .pf-item .btn[style*="red"] {
  background: #fff !important; border-color: #e3b4b0 !important; color: #c0392b !important;
}
.pf-page .pf-item .btn[onclick*="Dtl"]:hover, .pf-page .pf-item .btn[onclick*="Dlt"]:hover, .pf-page .pf-item .btn[onclick*="Delete"]:hover, .pf-page .pf-item .btn[style*="red"]:hover {
  background: #c0392b !important; border-color: #c0392b !important; color: #fff !important;
}
/* the "Add ..." buttons at the bottom of a card get a plus sign */
.pf-page .pf-card > .btn.edu_add_btn:not(:first-child)::before, .pf-page .pf-card > .btn[class*="_add_btn"]::before { content: "+"; font-weight: 700; }
.pf-page .pf-card > .btn { margin-top: 1rem !important; }
/* ===== edit popups: solid readable card, title bar, close + cancel ===== */
.modal-content:has(> .mdl-head), .modal-content:has(.mdl-head) { background: rgba(255, 255, 255, .96) !important; }
@supports (backdrop-filter: blur(1px)) { .modal-content:has(.mdl-head) { background: rgba(255, 255, 255, .9) !important; backdrop-filter: blur(18px) saturate(150%); } }
.mdl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 1rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.mdl-head h3 { margin: 0; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--navy-800); text-align: left; }
.mdl-x { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.mdl-x:hover { background: var(--surface-alt, #eef2f8); color: var(--navy-800); }
.modal-content form .mdl-cancel { min-width: 7rem; margin-right: .6rem; padding: .6rem 1.4rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--navy-800); cursor: pointer; transition: background .15s ease; }
.modal-content form .mdl-cancel:hover { background: var(--surface-alt, #eef2f8); }
.modal-content > form { padding-top: 1.25rem; }
/* ===== footer v2 ===== */
#footer .contia { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
#footer .footeredit .row { row-gap: 2rem; }
.footer-contact { margin: 0; padding: 0; }
#footer .footer-contact li { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 .7rem; text-align: left; font-size: .9rem !important; line-height: 1.5; color: rgba(255, 255, 255, .82); }
#footer .footer-contact li i { flex: none; width: 1rem; margin-top: .25rem; text-align: center; color: var(--accent); }
#footer .footer-contact a { color: #fff !important; text-decoration: none; overflow-wrap: anywhere; }
#footer .footer-contact a:hover { color: var(--accent) !important; }
#footer .footeredit1 { text-align: left; }
#footer .logo-footer img { width: 11rem !important; height: auto; margin-bottom: 1.1rem !important; }
#footer .footer-bottom { margin-top: 1.5rem; padding: 0 clamp(1rem, 4vw, 2rem); border-top: 1px solid rgba(255, 255, 255, .12); }
#footer .footer-bottom .copyright { width: 100%; padding: 1.1rem 0 !important; text-align: center; font-size: .82rem !important; line-height: 1.5; color: rgba(255, 255, 255, .62) !important; }
/* two columns for the link lists on phones, so the footer is not a mile long */
@media (max-width: 575px) {
  #footer .footeredit2 ul { column-count: 2; column-gap: 1.25rem; }
  #footer .footeredit2 ul li { break-inside: avoid; }
}
/* ===== footer v3: grid, logo panel, bottom bar ===== */
@media (min-width: 768px) {
  #footer .footeredit > .row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem clamp(1.5rem, 4vw, 3.5rem); margin: 0; }
  #footer .footeredit > .row > div { width: auto; max-width: none; flex: none; padding: 0; }
}
@media (max-width: 767px) { #footer .footeredit > .row > div { width: 100%; max-width: none; } }
#footer .footer-contact li, #footer .footer-contact a { font-size: .86rem !important; }
#footer .footer-contact a { white-space: nowrap; overflow-wrap: normal; }
#footer .logo-footer { display: inline-block; margin-bottom: 1.1rem; padding: .55rem .8rem; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
#footer .logo-footer img { display: block; width: 8.5rem !important; margin: 0 !important; }
#footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; margin-top: 1.5rem; padding: 1rem clamp(1rem, 4vw, 2rem); max-width: 1240px; margin-left: auto; margin-right: auto; border-top: 1px solid rgba(255, 255, 255, .12); }
#footer .footer-bottom .copyright { width: auto; padding: 0 !important; text-align: left; font-size: .8rem !important; color: rgba(255, 255, 255, .62) !important; }
.footer-mini { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; }
.footer-mini li { margin: 0 !important; }
.footer-mini a { font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color .2s ease; }
.footer-mini a:hover { color: var(--accent); }
.footer-mini i { color: var(--accent); }
@media (max-width: 575px) { #footer .footer-bottom { flex-direction: column; align-items: flex-start; } }
/* the closed off-canvas nav is absolutely positioned and stretched the page ~60px below the footer */
body { overflow-y: clip; }