/* ============================================================
   RGUKT Basar — Site Design System (Bootstrap 5)
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --rg-red:      #8c1515;
  --rg-dark:     #6b1010;
  --rg-deeper:   #4a0b0b;
  --rg-light:    #f9f2f2;
  --rg-gold:     #c9a227;
  --rg-navy:     #4a0b0b;
  --rg-navy-deep:#2a0606;
  --rg-text:     #2c2c2c;
  --rg-muted:    #6c757d;
  --rg-border:   #e0e0e0;
  --rg-radius:   6px;
  --rg-shadow:   0 2px 12px rgba(0,0,0,.08);
  --rg-transition: all .2s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: 'Open Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--rg-text);
  background: #f5f5f5;
}
a { color: var(--rg-red); transition: var(--rg-transition); }
a:hover { color: var(--rg-dark); }
h1,h2,h3,h4,h5,h6 { font-weight: 600; color: var(--rg-text); }

/* ── Topbar ────────────────────────────────────────────────── */
.site-topbar {
  background: var(--rg-deeper);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-topbar a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-topbar a:hover { color: #fff; }
.site-topbar .social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  font-size: 11px; margin-left: 4px; transition: var(--rg-transition);
}
.site-topbar .social-links a:hover {
  background: var(--rg-red); border-color: var(--rg-red); color: #fff;
}
.topbar-staff-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.85) !important;
  font-size: 11px; white-space: nowrap;
  text-decoration: none; transition: var(--rg-transition);
}
.topbar-staff-btn:hover {
  background: var(--rg-red); border-color: var(--rg-red); color: #fff !important;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--rg-red);
  padding: 14px 0;
}
.site-header .logo-img { height: 64px; width: auto; }
.site-header .uni-name {
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 22px; font-weight: 700; color: #aa0000;
  line-height: 1.2; margin: 0;
}
.site-header .uni-tagline {
  font-family: "Times New Roman", "Liberation Serif", serif;
  font-size: 13px; color: #aa0000; margin: 4px 0 6px;
  font-style: italic; letter-spacing: .2px;
}
.uni-tagline-icon {
  font-size: 9px; color: var(--rg-gold); margin-right: 5px;
  vertical-align: middle; opacity: .8;
}
.accreditation-badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
.acc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  border-radius: 20px; line-height: 1; white-space: nowrap;
  font-style: normal;
}
.acc-badge i { font-size: 9px; }
.acc-badge-naac {
  background: #fef3cd; color: #7a5200; border: 1px solid #f0c040;
}
.acc-badge-ugc {
  background: #e8f5e9; color: #1b5e20; border: 1px solid #81c784;
}
.acc-badge-est {
  background: #e8eaf6; color: #283593; border: 1px solid #9fa8da;
}
.acc-sep {
  display: none;
}
.site-header .partner-logos { display: flex; align-items: center; justify-content: center; }
.site-header .partner-logo { height: 52px; width: auto; vertical-align: middle; object-fit: contain; }

/* ── Navigation ────────────────────────────────────────────── */
.site-nav {
  background: var(--rg-red);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 1030;
}
.site-nav .navbar-toggler {
  border-color: rgba(255,255,255,.4);
  padding: 5px 10px;
}
.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-nav .nav-link {
  color: rgba(255,255,255,.9) !important;
  font-size: 13px; font-weight: 600;
  padding: 14px 12px !important;
  letter-spacing: .3px;
  transition: var(--rg-transition);
  position: relative;
}
.site-nav .nav-link:hover,
.site-nav .nav-item.active > .nav-link {
  color: #fff !important;
  background: rgba(0,0,0,.15);
}
.site-nav .nav-item.active > .nav-link::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--rg-gold);
}
.site-nav .dropdown-menu {
  border: none;
  border-radius: 0 0 var(--rg-radius) var(--rg-radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  padding: 6px 0; margin-top: 0;
  min-width: 220px;
}
.site-nav .dropdown-item {
  font-size: 13px; padding: 8px 18px;
  color: var(--rg-text);
  transition: var(--rg-transition);
  border-left: 3px solid transparent;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item.active {
  background: var(--rg-light);
  color: var(--rg-red);
  border-left-color: var(--rg-red);
}
.site-nav .dropdown-item.active {
  font-weight: 600;
}
/* Desktop hover open */
@media (min-width: 992px) {
  .site-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

/* Navbar search box */
.nav-search-input {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: var(--rg-radius) 0 0 var(--rg-radius) !important;
  font-size: 12px;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.65); }
.nav-search-input:focus {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.7);
  color: #fff;
  box-shadow: none;
  outline: 2px solid rgba(255,255,255,.5);
}
.nav-search-btn {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 0 var(--rg-radius) var(--rg-radius) 0 !important;
  padding: 4px 10px;
  transition: var(--rg-transition);
}
.nav-search-btn:hover { background: rgba(255,255,255,.35); color: #fff; }
@media (max-width: 991.98px) {
  .nav-search-input { min-width: 0 !important; max-width: 100% !important; }
  .site-nav .ms-lg-auto { margin-left: 0 !important; }
}

/* ── Page Hero (used by many subpages) ─────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--rg-red) 0%, var(--rg-deeper) 100%);
  color: #fff;
  padding: 36px 0;
  border-bottom: 4px solid var(--rg-gold);
}
/* h1 (+ optional subtitle) stacked left, breadcrumb vertically centred right */
.page-hero .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.page-hero h1 {
  font-size: 22px; font-weight: 700; margin: 0; color: #fff;
}
.page-hero p  { margin: 4px 0 0; font-size: 13px; opacity: .8; }
.page-hero nav[aria-label="breadcrumb"] {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  margin: 0; text-align: right;
}
.page-hero .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12px; justify-content: flex-end; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
.page-hero .breadcrumb-item a  { color: rgba(255,255,255,.7); text-decoration: none; }
.page-hero .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.page-hero .breadcrumb-item { color: rgba(255,255,255,.85); }
.page-hero .breadcrumb-item.active { color: #fff; }

/* ── Content layout ────────────────────────────────────────── */
.page-body { padding: 28px 0 56px; }

/* ── Cards ─────────────────────────────────────────────────── */
.content-card {
  background: #fff;
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow);
  padding: 28px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
  line-height: 1.75;
}
.content-card p { font-size: 14px; color: #333; line-height: 1.75; margin-bottom: 0.75rem; }
.content-card li { font-size: 14px; color: #333; line-height: 1.75; margin-bottom: 3px; }
.content-card h1 { font-size: 20px; font-weight: 700; color: #222; margin: 1rem 0 0.6rem; }
.content-card h2 { font-size: 17px; font-weight: 700; color: #222; margin: 0.9rem 0 0.5rem; }
.content-card h3 { font-size: 15px; font-weight: 600; color: #222; margin: 0.8rem 0 0.4rem; }
.content-card h4 { font-size: 14px; font-weight: 600; color: #333; margin: 0.7rem 0 0.3rem; }
.content-card td, .content-card th { font-size: 13px; }
.content-card font { font-size: inherit !important; line-height: inherit; }
.section-title {
  font-size: 16px; font-weight: 700; color: #1a1a1a;
  border-left: 4px solid var(--rg-red);
  padding-left: 12px; margin: 0 0 18px;
}
.section-heading {
  position: relative; margin-bottom: 24px;
}
.section-heading .line {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--rg-red);
  font-size: 20px; font-weight: 700; color: var(--rg-red);
}

/* ── Stats bar ─────────────────────────────────────────────── */
.stats-bar {
  background: #fff;
  border-bottom: 3px solid var(--rg-gold);
}
.stat-item {
  text-align: center; padding: 16px 12px;
  border-right: 1px solid var(--rg-border);
}
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 28px; font-weight: 800; color: #1565c0; line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--rg-muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }

/* ── Sidebar nav ───────────────────────────────────────────── */
.side-nav {
  background: #fff;
  border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow);
  overflow: hidden; margin-bottom: 18px;
}
.side-nav-header {
  background: var(--rg-red); color: #fff;
  padding: 10px 16px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.side-nav ul { list-style: none; padding: 0; margin: 0; }
.side-nav li { margin: 0; }
.side-nav a {
  display: block; padding: 9px 16px;
  font-size: 13px; color: #444;
  border-bottom: 1px solid #f5f5f5;
  text-decoration: none;
  transition: var(--rg-transition);
}
.side-nav a:last-child { border-bottom: none; }
.side-nav a:hover, .side-nav a.active {
  background: var(--rg-red); color: #fff !important;
  padding-left: 20px; font-weight: 600;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: var(--rg-navy);
  color: rgba(255,255,255,.8);
  padding: 48px 0 0;
  margin-top: auto;
}
.site-footer h5 {
  color: #fff; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rg-red);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer a {
  color: #fff !important;
  text-decoration: none;
  transition: var(--rg-transition);
}
.site-footer a:hover { opacity: .8; }
.site-footer ul a {
  color: #fff !important; font-size: 13px;
  text-decoration: none; transition: var(--rg-transition);
}
.site-footer ul a:hover { opacity: .8; padding-left: 4px; }
.site-footer ul a i { margin-right: 6px; font-size: 11px; color: var(--rg-gold); }
.footer-contact p {
  font-size: 13px; color: rgba(255,255,255,.9);
  margin-bottom: 8px; display: flex; gap: 8px;
}
.footer-contact i { color: var(--rg-gold); margin-top: 2px; flex-shrink: 0; }
.footer-divider {
  border-color: rgba(255,255,255,.1);
  margin: 32px 0 0;
}
.footer-bottom {
  background: var(--rg-navy-deep);
  padding: 14px 0;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.footer-bottom a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  font-size: 13px; margin-right: 6px; text-decoration: none;
  transition: var(--rg-transition);
}
.footer-social a:hover { background: var(--rg-red); color: #fff; }

/* ── Back-to-top ───────────────────────────────────────────── */
#back-to-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 42px; height: 42px;
  background: var(--rg-red); color: #fff;
  border-radius: 50%; display: none;
  align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; z-index: 999;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  transition: var(--rg-transition);
  border: none;
}
#back-to-top:hover { background: var(--rg-dark); transform: translateY(-2px); }

/* ── Utility helpers ───────────────────────────────────────── */
.text-red    { color: #555 !important; }
.bg-red      { background: var(--rg-red)   !important; color: #fff; }
.bg-red-light{ background: var(--rg-light) !important; }
.border-red  { border-color: var(--rg-red) !important; }
.btn-red { background: var(--rg-red); color: #fff; border: none; border-radius: var(--rg-radius); }
.btn-red:hover { background: var(--rg-dark); color: #fff; }
.badge-red { background: var(--rg-red); color: #fff; }
.divider-red { border: none; border-top: 2px solid var(--rg-red); margin: 16px 0; }

/* ── Notice / tender items ─────────────────────────────────── */
.notice-item {
  padding: 11px 0; border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: baseline; gap: 10px;
}
.notice-item:last-child { border-bottom: none; }
.notice-date { color: #1565c0; font-weight: 700; font-size: 12px; white-space: nowrap; }
.notice-arrow { color: #aaa; flex-shrink: 0; }

/* ── Department page specific ──────────────────────────────── */
.dept-hero {
  background: linear-gradient(135deg, var(--rg-red) 0%, var(--rg-deeper) 100%);
  color: #fff;
  padding: 22px 0 20px;
  border-bottom: 4px solid var(--rg-gold);
}
.dept-hero h1 { font-size: 20px; font-weight: 700; color: #fff; margin: 0; }
.dept-hero .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12px; justify-content: flex-end; }
.dept-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); }
.dept-hero .breadcrumb-item a { color: rgba(255,255,255,.7); text-decoration: none; }
.dept-hero .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.dept-hero .breadcrumb-item { color: rgba(255,255,255,.85); }
.dept-hero .breadcrumb-item.active { color: #fff; }

/* ── VM boxes ──────────────────────────────────────────────── */
.vm-box {
  background: #f8f9fa; border-left: 4px solid var(--rg-red);
  padding: 16px 18px; border-radius: 0 var(--rg-radius) var(--rg-radius) 0; height: 100%;
}
.vm-box h5 { font-weight: 700; color: #1a1a1a; margin: 0 0 8px; font-size: 14px; }
.vm-box p  { font-size: 13px; line-height: 1.8; color: #444; margin: 0; }

/* ── HOD message ───────────────────────────────────────────── */
.hod-message-card {
  background: #f8f9fa; border: 1px solid #e8e8e8;
  border-radius: var(--rg-radius); padding: 22px 24px;
}
.hod-quote { font-size: 13px; line-height: 1.9; color: #444; font-style: italic; }
.hod-quote::before {
  content: '\201C'; font-size: 44px; color: #1565c0;
  line-height: 0; vertical-align: -16px;
  margin-right: 4px; font-style: normal;
}
.hod-avatar { width: 120px; height: 150px; border-radius: 8px; object-fit: cover; object-position: top center; border: 2px solid #dde; flex-shrink: 0; }
.hod-avatar-placeholder {
  width: 120px; height: 150px; border-radius: 8px;
  background: #e8eaf6; display: flex; align-items: center;
  justify-content: center; color: #8c1515; font-size: 52px; flex-shrink: 0;
}

/* ── Faculty cards ─────────────────────────────────────────── */
.faculty-card {
  background: #fff; border: 1px solid var(--rg-border);
  border-radius: var(--rg-radius); padding: 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; transition: var(--rg-transition);
}
.faculty-card:hover { box-shadow: 0 4px 14px rgba(21,101,192,.1); border-color: #cde; }
.faculty-photo { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; object-position: top center; border: 2px solid #dde; flex-shrink: 0; }
.faculty-photo-link { flex-shrink: 0; display: block; line-height: 0; border-radius: 8px; }
.faculty-photo-link:hover .faculty-photo,
.faculty-photo-link:hover .faculty-photo-placeholder { opacity: .85; border-color: #8c1515; }
.faculty-photo-placeholder {
  width: 100px; height: 100px; border-radius: 8px;
  background: #1565c0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 38px; flex-shrink: 0;
}
.faculty-name  { font-weight: 700; font-size: 13px; color: #1565c0; text-decoration: none; }
.faculty-name:hover { color: #0d47a1; }
.faculty-desig { font-size: 12px; color: #555; }
.faculty-email { font-size: 11px; color: #555; margin-top: 2px; }
.faculty-email a { color: #555; text-decoration: none; }
.faculty-email a:hover { color: #1565c0; }

/* ── Lab / programme items ─────────────────────────────────── */
.lab-item {
  padding: 9px 14px; border-left: 3px solid var(--rg-red);
  background: #fafafa; border-radius: 0 var(--rg-radius) var(--rg-radius) 0;
  font-size: 13px; color: #333; margin-bottom: 8px;
}
.program-badge {
  display: inline-block; background: #1565c0; color: #fff;
  font-size: 12px; padding: 5px 16px;
  border-radius: 20px; margin: 4px 4px 4px 0;
}

/* ── Contact block ─────────────────────────────────────────── */
.hod-contact {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px; background: #f8f9fa;
  border-radius: var(--rg-radius); border: 1px solid #e0e7f0;
  border-left: 4px solid #1565c0;
}
.hod-contact a { color: #1565c0; text-decoration: none; }
.hod-contact a:hover { text-decoration: underline; }

/* ── Gallery ───────────────────────────────────────────────── */
.album-card {
  display: block; border-radius: var(--rg-radius);
  overflow: hidden; box-shadow: var(--rg-shadow);
  margin-bottom: 24px; transition: var(--rg-transition);
  text-decoration: none; color: inherit;
}
.album-card:hover { box-shadow: 0 8px 24px rgba(140,21,21,.18); transform: translateY(-2px); color: inherit; }
.album-cover { width: 100%; height: 180px; object-fit: cover; display: block; }
.album-placeholder { width: 100%; height: 180px; background: var(--rg-red); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 48px; }
.album-body { background: #fff; padding: 14px 16px; }
.album-title { font-size: 15px; font-weight: 700; color: var(--rg-red); margin: 0 0 4px; }

/* ── Timeline (VC succession) ──────────────────────────────── */
.timeline { position: relative; padding: 0; margin: 30px 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 3px; background: var(--rg-border); transform: translateX(-50%);
}
.tl-item { position: relative; margin-bottom: 40px; }
.tl-item:nth-child(odd)  .tl-card { margin-left: 0; margin-right: calc(50% + 30px); }
.tl-item:nth-child(even) .tl-card { margin-left: calc(50% + 30px); margin-right: 0; }
.tl-dot {
  position: absolute; left: 50%; top: 24px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rg-red); border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--rg-red); transform: translateX(-50%); z-index: 1;
}
.tl-card {
  background: #fff; border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow); padding: 20px 22px; position: relative;
}
.tl-card::after { content: ''; position: absolute; top: 22px; border: 8px solid transparent; }
.tl-item:nth-child(odd)  .tl-card::after { right: -16px; border-left-color: #fff; }
.tl-item:nth-child(even) .tl-card::after { left: -16px;  border-right-color: #fff; }
.vc-name { font-size: 16px; font-weight: 700; color: var(--rg-red); margin: 0 0 4px; }
.vc-period { font-size: 13px; color: #555; font-weight: 600; }
.vc-designation { font-size: 12px; color: #888; margin-top: 2px; }
.current-badge {
  display: inline-block; background: #198754; color: #fff;
  font-size: 10px; padding: 2px 9px; border-radius: 20px;
  margin-left: 8px; vertical-align: middle;
}
@media (max-width: 767px) {
  .timeline::before { left: 20px; }
  .tl-item:nth-child(odd)  .tl-card,
  .tl-item:nth-child(even) .tl-card { margin-left: 50px; margin-right: 0; }
  .tl-item:nth-child(odd)  .tl-card::after { display: none; }
  .tl-item:nth-child(even) .tl-card::after { left: -12px; border-right-color: #fff; }
  .tl-dot { left: 20px; }
}

/* ── Coming soon ───────────────────────────────────────────── */
.coming-soon-card {
  background: #fff; border-radius: var(--rg-radius);
  box-shadow: var(--rg-shadow); padding: 56px 40px;
  max-width: 600px; margin: 0 auto; text-align: center;
}
.coming-soon-icon { font-size: 64px; color: #ddd; margin-bottom: 22px; }
.coming-soon-title { font-size: 26px; font-weight: 700; color: var(--rg-red); margin: 0 0 12px; }
.coming-soon-sub { font-size: 14px; color: #777; max-width: 460px; margin: 0 auto 28px; line-height: 1.7; }

/* ── Responsive fixes ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Section pages: the side-nav stacks above content on mobile — drop its extra
     margin so it doesn't compound with the row gutter into a big empty gap. */
  .side-nav { margin-bottom: 0; }
  .page-body .row.g-4 { --bs-gutter-y: 1rem; }

  /* Topbar: shown on mobile too. Drop the long address/email (also in footer)
     and let the accessibility / language / social / staff-login tools wrap and
     centre so they fit a narrow screen. */
  .site-topbar { font-size: 11px; }
  .site-topbar .container > .d-flex { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .topbar-contact { display: none; }
  .topbar-tools { gap: 10px !important; flex-wrap: wrap; justify-content: center; }

  /* Stack the header (logo / name / partner logos) centered instead of the
     desktop 3-column row, which wraps awkwardly on narrow screens. */
  .site-header .header-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }
  .site-header .uni-name { font-size: 16px; }
  .site-header .uni-tagline { font-size: 12px; }
  .site-header .partner-logo { height: 38px; }
  .site-header .logo-img { height: 52px; }

  /* Faculty/staff cards 2-per-row on mobile: stack vertically + centre so they
     fit the narrow half-width columns. */
  .faculty-card { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 8px; }
  .faculty-photo, .faculty-photo-placeholder { width: 72px; height: 72px; }
  .faculty-photo-placeholder { font-size: 28px; }
  .faculty-email { word-break: break-word; }
  .page-hero h1 { font-size: 18px; }
  /* Stack breadcrumb above heading on mobile (no absolute overlap) */
  .page-hero nav[aria-label="breadcrumb"] {
    position: static; transform: none; order: -1;
    align-self: stretch; text-align: left; margin-bottom: 6px;
  }
  .page-hero .breadcrumb { justify-content: flex-start; }
  .stat-num { font-size: 22px; }
  .content-card { padding: 18px; }
}

/* ============================================================
   GIGW 3.0 / WCAG 2.1 Accessibility Additions
   ============================================================ */

/* ── Skip navigation link (GIGW 5.2.27 / WCAG 2.4.1) ───────── */
.skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: 10000;
  background: var(--rg-red); color: #fff !important;
  padding: 10px 20px;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.skip-link:focus {
  position: fixed;
  left: 0; top: 0;
  width: auto; height: auto;
  overflow: visible;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ── Focus visible (GIGW 5.2.33 / WCAG 2.4.7) ──────────────── */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}
/* Remove default outline only when focus-visible is not triggered */
:focus:not(:focus-visible) { outline: none; }

/* ── Search box in header ───────────────────────────────────── */
.site-search { max-width: 360px; margin: 0 auto; }
.search-input { border-radius: 20px 0 0 20px !important; border-color: #ddd; font-size: 13px; }
.site-search .btn-red { border-radius: 0 20px 20px 0 !important; font-size: 12px; }

/* ── Accessibility toolbar ──────────────────────────────────── */
.a11y-bar { display: flex; align-items: center; gap: 2px; }
.a11y-btn {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(255,255,255,.25);
  padding: 1px 7px; font-size: 11px; font-weight: 700;
  cursor: pointer; border-radius: 3px; line-height: 1.7;
  text-decoration: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; transition: var(--rg-transition);
}
.a11y-btn:hover, .a11y-btn:focus-visible {
  background: rgba(255,255,255,.25); color: #fff !important;
  outline: 2px solid rgba(255,255,255,.6);
}
.a11y-btn.a11y-norm { font-size: 12px; }
.a11y-sep { margin-left: 6px; }
#hc-btn[aria-pressed="true"] { background: var(--rg-gold); color: #000 !important; border-color: var(--rg-gold); }

/* ── Language bar ───────────────────────────────────────────── */
.lang-bar { display: flex; align-items: center; gap: 2px; }
.lang-btn {
  background: transparent; color: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(255,255,255,.25);
  padding: 1px 8px; font-size: 11px; font-weight: 700;
  border-radius: 3px; text-decoration: none !important;
  transition: var(--rg-transition);
}
.lang-btn:hover, .lang-btn:focus-visible { color: #fff !important; background: rgba(255,255,255,.15); }
.lang-btn.active { background: var(--rg-gold); color: #000 !important; border-color: var(--rg-gold); }

/* ── Footer headings (use h2 for semantic hierarchy) ────────── */
.footer-heading {
  color: #fff; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rg-gold);
}

/* ── Footer GIGW policy strip ───────────────────────────────── */
.footer-policies {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 12px 0;
  margin-top: 32px;
}
.footer-policy-nav {
  display: flex; flex-wrap: wrap;
  gap: 3px 0; align-items: center;
}
.footer-policy-nav a {
  color: rgba(255,255,255,.7); font-size: 12px;
  text-decoration: none; padding: 2px 10px;
  border-right: 1px solid rgba(255,255,255,.2);
  white-space: nowrap; transition: var(--rg-transition);
}
.footer-policy-nav a:first-child { padding-left: 0; }
.footer-policy-nav a:last-child { border-right: none; }
.footer-policy-nav a:hover, .footer-policy-nav a:focus-visible { color: #fff; }
.footer-lastupdate {
  margin-top: 8px; font-size: 11px;
  color: rgba(255,255,255,.5);
}
.footer-lastupdate strong { color: rgba(255,255,255,.8); }

/* ── File metadata badge ────────────────────────────────────── */
.file-meta {
  font-size: 10px; color: rgba(255,255,255,.4);
  font-style: italic; margin-left: 2px;
}

/* ── External link indicator (GIGW 5.4.4) ──────────────────── */
a[target="_blank"]:not(.no-ext-icon)::after {
  content: '\f35d'; /* fa-external-link-alt */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  margin-left: 3px;
  opacity: .55;
  vertical-align: super;
  speak: never;
}

/* ── High contrast mode (GIGW 5.2.14) ──────────────────────── */
html.hc-on { background: #000; }
html.hc-on body { background: #000 !important; color: #ff0 !important; }
html.hc-on .site-topbar { background: #000 !important; border-bottom: 1px solid #ff0 !important; }
html.hc-on .site-header { background: #000 !important; border-color: #ff0 !important; }
html.hc-on .uni-name, html.hc-on .uni-tagline, html.hc-on .accreditation { color: #ff0 !important; }
html.hc-on .acc-badge { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; }
html.hc-on .site-nav { background: #000 !important; border-bottom: 1px solid #ff0 !important; }
html.hc-on .site-nav .nav-link { color: #ff0 !important; }
html.hc-on .site-nav .nav-link:hover { background: #333 !important; }
html.hc-on .dropdown-menu { background: #000 !important; border: 1px solid #ff0 !important; }
html.hc-on .dropdown-item { color: #ff0 !important; }
html.hc-on .dropdown-item:hover { background: #333 !important; }
html.hc-on .content-card, html.hc-on .home-panel,
html.hc-on .ql-box, html.hc-on .side-nav,
html.hc-on .profile-card, html.hc-on .hod-message-card { background: #000 !important; border: 1px solid #ff0 !important; color: #ff0 !important; }
html.hc-on .page-hero, html.hc-on .dept-hero { background: #000 !important; border-color: #ff0 !important; }
html.hc-on .page-hero h1, html.hc-on .dept-hero h1 { color: #ff0 !important; }
html.hc-on .stat-num, html.hc-on .section-title,
html.hc-on h1, html.hc-on h2, html.hc-on h3,
html.hc-on h4, html.hc-on h5, html.hc-on h6 { color: #ff0 !important; }
html.hc-on a { color: #0ff !important; text-decoration: underline !important; }
html.hc-on a:hover, html.hc-on a:focus { color: #fff !important; }
html.hc-on .site-footer,
html.hc-on .footer-bottom,
html.hc-on .footer-policies { background: #000 !important; }
html.hc-on .btn { background: #000 !important; color: #ff0 !important; border: 1px solid #ff0 !important; }
html.hc-on .navbar-toggler-icon { filter: invert(1); }
html.hc-on img:not([alt=""]) { filter: grayscale(1) contrast(1.2); }

/* ── Themed tables (brand maroon header) ───────────────────── */
/* Re-skin Bootstrap's dark table header to the RGUKT brand colour
   so content tables match the site theme instead of plain black. */
.table > thead.table-dark > tr > th,
.table > thead.table-dark > tr > td,
thead.table-dark th,
thead.table-dark td {
  background: var(--rg-deeper) !important;
  color: #fff !important;
  border-color: var(--rg-deeper) !important;
  border-bottom: 2px solid var(--rg-gold) !important;
  font-weight: 600;
  vertical-align: middle;
}
.table > thead.table-dark a,
thead.table-dark a { color: #fff !important; text-decoration: underline; }

/* High-contrast mode keeps headers black/yellow */
html.hc-on .table > thead.table-dark > tr > th,
html.hc-on thead.table-dark th {
  background: #000 !important; color: #ff0 !important;
  border-color: #ff0 !important; border-bottom-color: #ff0 !important;
}

/* ── Print styles (GIGW 5.1.15) ────────────────────────────── */
@media print {
  .site-topbar, .site-nav, #back-to-top,
  .skip-link, .a11y-bar, .lang-bar, .social-links,
  .footer-social, .footer-policies, .footer-bottom { display: none !important; }
  .site-header { box-shadow: none; border-bottom: 2px solid #000; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #444; }
  a[href^="#"]::after, a.no-ext-icon::after { content: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
}