/* =====================================================================
   UEAH — portal.css
   ORIGINAL institutional university-portal design system (navy-dominant).
   Dense, official, information-rich. The OPPOSITE of an "AI landing page".
   Class names here are a CONTRACT relied on by HTML + main.js + portal.js.
   Reuses main.js component hooks: .carousel*, .tab-btn/.tab-panel,
   .accordion*, .needs-validation/.form-success, .stat-num[data-target],
   .reveal, .back-to-top, .lang-btn[data-lang].
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  --navy:#0a2a5e;
  --navy-d:#06214b;
  --navy-2:#143b7e;
  --navy-soft:#e8eef7;
  --red:#bb1f2a;
  --red-d:#971722;
  --gold:#c4a14b;
  --ink:#1c2430;
  --gray:#5c6675;
  --muted:#8b93a3;
  --line:#dde3ee;
  --bg:#ffffff;
  --bg2:#f5f7fb;
  --bg3:#eef2f9;
  --container:1240px;
  --radius:4px;
  --shadow-sm:0 2px 8px rgba(10,42,94,.12);
  --shadow-md:0 6px 20px rgba(10,42,94,.16);
  --topbar-h:36px;
  --masthead-h:88px;
  --ff-sans:"Inter","Segoe UI",Arial,system-ui,-apple-system,sans-serif;
  --ff-serif:"Noto Serif","Georgia",serif;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior:auto; }
}

/* ---------------------------------------------------------------------
   1. RESET / BASE
   --------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--ff-sans);
  font-size:15px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
ul,ol { margin:0; padding:0; }
li { list-style:none; }
h1,h2,h3,h4,h5,h6 { margin:0 0 .5em; line-height:1.3; font-weight:700; color:var(--ink); }
h1 { font-size:1.7rem; }
h2 { font-size:1.35rem; }
h3 { font-size:1.12rem; }
h4 { font-size:1rem; }
p { margin:0 0 1em; }
a { color:var(--navy); text-decoration:none; transition:color .15s ease; }
a:hover { color:var(--red); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:2px;
}
hr { border:0; border-top:1px solid var(--line); margin:1.4rem 0; }
table { border-collapse:collapse; width:100%; }
button { font-family:inherit; cursor:pointer; }

.container {
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}
.visually-hidden {
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:8px; top:-48px; z-index:2000;
  background:var(--navy); color:#fff; padding:8px 14px; border-radius:var(--radius);
  transition:top .15s ease;
}
.skip-link:focus { top:8px; color:#fff; }

/* =====================================================================
   2. HEADER — topbar + masthead + mainnav
   ===================================================================== */
.site-header { position:relative; z-index:600; background:var(--bg); border-bottom:3px solid var(--navy); }

/* ---- (1) TOP UTILITY BAR ---- */
.topbar {
  background:var(--navy-d);
  color:#cdd7ea;
  font-size:13px;
  height:var(--topbar-h);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .container {
  display:flex; justify-content:space-between; align-items:center;
  height:var(--topbar-h); gap:14px;
}
.topbar-welcome { color:#aeb9d0; white-space:nowrap; }
.topbar-welcome strong { color:#fff; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-links { display:flex; align-items:center; gap:0; }
.topbar-links a {
  color:#cdd7ea; padding:0 11px; line-height:1.4;
  border-left:1px solid rgba(255,255,255,.14);
}
.topbar-links a:first-child { border-left:0; }
.topbar-links a:hover { color:#fff; }
.lang-switch {
  display:inline-flex; align-items:center;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius);
  overflow:hidden;
}
.lang-btn {
  background:transparent; color:#cdd7ea; border:0;
  padding:3px 9px; font-size:12px; font-weight:600; letter-spacing:.04em;
  border-left:1px solid rgba(255,255,255,.16); line-height:1.4;
}
.lang-btn:first-child { border-left:0; }
.lang-btn:hover { background:rgba(255,255,255,.10); color:#fff; }
.lang-btn.active { background:var(--gold); color:var(--navy-d); }

/* ---- (2) MASTHEAD ---- */
.masthead { background:var(--bg); }
.masthead .container {
  display:flex; align-items:center; gap:18px;
  min-height:var(--masthead-h); padding-block:12px;
}
.brand { display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; }
.brand:hover { color:inherit; }
.brand-crest { flex:0 0 auto; width:54px; height:54px; display:block; }
.brand-name { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-word {
  font-family:var(--ff-serif); font-weight:800; font-size:1.85rem;
  color:var(--navy); letter-spacing:.02em;
}
.brand-full {
  font-size:12.5px; color:var(--gray); font-weight:500;
  margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.masthead-tools { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.masthead-search { display:flex; align-items:stretch; }
.masthead-search .search-field {
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--bg2);
}
.masthead-search input[type="search"],
.masthead-search input[type="text"] {
  border:0; background:transparent; padding:8px 12px; font-size:14px;
  width:200px; color:var(--ink); outline:none;
}
.masthead-search input::placeholder { color:var(--muted); }
.masthead-search .search-btn {
  border:0; background:var(--navy); color:#fff; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
}
.masthead-search .search-btn:hover { background:var(--navy-2); }
.masthead-search .search-btn svg { width:18px; height:18px; }

/* mobile nav toggle lives in the masthead */
.nav-toggle {
  display:none; flex:0 0 auto;
  width:42px; height:38px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle .bar { display:block; width:20px; height:2px; background:var(--navy); transition:.2s ease; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ---- (3) MAIN NAV (navy full-width bar with mega dropdowns) ---- */
.mainnav { background:var(--navy); position:relative; z-index:500; }
.mainnav .container { display:flex; padding-inline:20px; }
.mainnav-list { display:flex; flex:1; }
.mainnav-item { flex:1 1 0; text-align:center; position:relative; }
.mainnav-link {
  display:block; color:#fff; font-size:16px; font-weight:600;
  padding:14px 10px; position:relative; line-height:1.25;
  border-bottom:3px solid transparent;
}
.mainnav-link:hover,
.mainnav-link:focus-visible {
  color:#fff; background:var(--navy-2); border-bottom-color:var(--gold);
}
.mainnav-item.open > .mainnav-link,
.mainnav-link.active {
  background:var(--navy-2); border-bottom-color:var(--gold);
}
.mainnav-link[aria-haspopup="true"]::after {
  content:""; display:inline-block; margin-left:6px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid rgba(255,255,255,.7); vertical-align:middle;
}

/* mega dropdown */
.mainnav-drop {
  position:absolute; top:100%; left:0; min-width:240px; max-width:340px;
  background:var(--bg); border:1px solid var(--line); border-top:3px solid var(--red);
  box-shadow:var(--shadow-md); padding:6px 0;
  text-align:left; z-index:520;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.mainnav-item:last-child .mainnav-drop { left:auto; right:0; }
.mainnav-item:hover > .mainnav-drop,
.mainnav-item:focus-within > .mainnav-drop,
.mainnav-item.open > .mainnav-drop {
  opacity:1; visibility:visible; transform:translateY(0);
}
.drop-link {
  display:block; padding:10px 16px; color:var(--ink);
  font-size:14px; line-height:1.4; border-left:3px solid transparent;
}
.drop-link:hover,
.drop-link:focus-visible {
  background:var(--navy-soft); color:var(--red); border-left-color:var(--red);
}
.drop-head {
  display:block; padding:9px 16px 5px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.mainnav-drop hr { margin:5px 0; border-top:1px solid var(--line); }

/* =====================================================================
   3. SECTION HEADING BAR — the signature portal motif
   ===================================================================== */
.sec-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:2px solid var(--navy);
  margin:0 0 18px;
}
.sec-title {
  font-size:1.25rem; color:var(--navy); font-weight:700;
  border-bottom:3px solid var(--red);
  padding:0 14px 10px; margin:0 0 -2px;
  display:inline-block;
}
.sec-title small {
  display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--muted); text-transform:uppercase;
}
.sec-more { padding-bottom:8px; }
.sec-more a {
  font-size:13px; color:var(--gray); font-weight:600;
  display:inline-flex; align-items:center; gap:3px;
}
.sec-more a:hover { color:var(--red); }
.sec-more a::after { content:"+"; font-weight:700; color:var(--red); }

/* generic content block spacing */
.portal-section { padding:34px 0; }
.portal-section.alt { background:var(--bg2); }
.portal-section.tight { padding:22px 0; }

/* a 2-col / 3-col home layout helper */
.portal-grid {
  display:grid; gap:30px;
  grid-template-columns:1fr;
}
.portal-grid.cols-2 { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.portal-grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* =====================================================================
   4. NOTICE / NEWS LIST
   ===================================================================== */
.notice-list { display:block; }
.notice-item {
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 4px; border-bottom:1px dashed var(--line);
  align-items:baseline;
}
.notice-item:last-child { border-bottom:0; }
.notice-item > a {
  flex:1 1 auto; min-width:0; color:var(--ink); font-size:14.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  position:relative; padding-left:15px;
}
.notice-item > a::before {
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--red); transform:translateY(-50%);
}
.notice-item > a:hover { color:var(--red); }
.notice-date {
  flex:0 0 auto; color:var(--muted); font-size:13px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.notice-item .tag {
  flex:0 0 auto; font-size:11px; font-weight:700; color:var(--navy);
  background:var(--navy-soft); padding:1px 7px; border-radius:2px;
  white-space:nowrap;
}

/* date-block variant for featured lists */
.notice-list.featured .notice-item { align-items:center; padding:13px 4px; }
.notice-list.featured .notice-item > a { white-space:normal; padding-left:0; }
.notice-list.featured .notice-item > a::before { display:none; }
.date-block {
  flex:0 0 auto; width:54px; text-align:center; line-height:1.1;
  background:var(--navy-soft); color:var(--navy); padding:7px 4px;
  border-radius:var(--radius); border:1px solid #d2dcef;
}
.date-block .dd { display:block; font-size:20px; font-weight:800; }
.date-block .ym { display:block; font-size:11px; color:var(--gray); }

/* =====================================================================
   5. NOTICE TABS PANEL
   ===================================================================== */
.panel { border:1px solid var(--line); background:var(--bg); }
.panel-tabs {
  display:flex; border-bottom:2px solid var(--navy); background:var(--bg2);
}
.tab-btn {
  background:transparent; border:0; border-bottom:3px solid transparent;
  padding:11px 16px; font-size:14.5px; font-weight:600; color:var(--gray);
  margin-bottom:-2px;
}
.tab-btn:hover { color:var(--navy); }
.tab-btn.active {
  color:var(--navy); background:var(--bg);
  border-bottom-color:var(--red);
}
.tab-panel { display:none; padding:8px 14px 12px; }
.tab-panel.active { display:block; }

/* =====================================================================
   6. BANNER CAROUSEL
   ===================================================================== */
.banner { position:relative; }
.carousel { position:relative; overflow:hidden; border:1px solid var(--line); background:var(--navy-d); }
.carousel-viewport { overflow:hidden; }
.carousel-track { display:flex; transition:transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition:none; } }
.carousel-slide { flex:0 0 100%; position:relative; aspect-ratio:16/9; }
.carousel-slide img { width:100%; height:100%; object-fit:cover; }
.carousel-slide .slide-cap {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(6,33,75,.92));
  color:#fff; padding:34px 18px 14px; font-size:1.05rem; font-weight:600;
}
.carousel-slide .slide-cap .slide-tag {
  display:inline-block; background:var(--red); color:#fff;
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:2px;
  margin-bottom:6px; letter-spacing:.04em;
}
.carousel-prev,.carousel-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:48px; border:0; background:rgba(6,33,75,.5); color:#fff;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.carousel-prev:hover,.carousel-next:hover { background:var(--red); }
.carousel-prev { left:0; }
.carousel-next { right:0; }
.carousel-dots {
  position:absolute; bottom:10px; right:14px; display:flex; gap:7px; z-index:4;
}
.carousel-dot {
  width:10px; height:10px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.5);
}
.carousel-dot.active { background:var(--gold); }

/* =====================================================================
   7. QUICK LINKS — hairline grid of flat tiles
   ===================================================================== */
.quicklinks {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.quick {
  background:var(--bg); padding:22px 10px; text-align:center; color:var(--navy);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; line-height:1.3;
  transition:background .15s ease, color .15s ease;
}
.quick-ico { width:30px; height:30px; color:var(--navy); flex:0 0 auto; }
.quick-ico svg { width:100%; height:100%; display:block; stroke:currentColor; fill:none; }
.quick:hover { background:var(--navy); color:#fff; }
.quick:hover .quick-ico { color:#fff; }

/* =====================================================================
   8. FACULTIES GRID — compact bordered list, NOT floating cards
   ===================================================================== */
.colleges {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.college {
  border:1px solid var(--line); border-left:3px solid var(--navy);
  padding:14px 16px; color:var(--ink); background:var(--bg);
  display:block; transition:background .15s ease, border-color .15s ease;
}
.college:hover { border-left-color:var(--red); background:var(--bg2); color:var(--ink); }
.college-name { font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.college:hover .college-name { color:var(--red); }
.college-sub { font-size:12px; color:var(--muted); margin-top:3px; }

/* =====================================================================
   9. DATA STRIP (subtle figures band)
   ===================================================================== */
.figures { background:var(--navy); color:#fff; }
.figures .container {
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:18px;
  padding:24px 20px;
}
.figure { text-align:center; flex:1 1 140px; }
.figure .stat-num {
  display:block; font-family:var(--ff-serif); font-size:2rem; font-weight:800;
  color:#fff; line-height:1.1;
}
.figure .figure-label {
  display:block; font-size:13px; color:#bcc8e0; margin-top:4px;
  letter-spacing:.02em;
}
.figure + .figure { border-left:1px solid rgba(255,255,255,.14); }
@media (max-width:640px){ .figure + .figure { border-left:0; } }

/* =====================================================================
   10. GENERIC BUTTONS / PILLS (small, square corners)
   ===================================================================== */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius); font-size:14px; font-weight:600;
  border:1px solid transparent; line-height:1.2; text-align:center;
}
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover { background:var(--navy-2); color:#fff; }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { background:var(--red-d); color:#fff; }
.btn-outline { background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover { background:var(--navy); color:#fff; }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-ghost:hover { background:rgba(255,255,255,.12); color:#fff; }

/* =====================================================================
   11. FOOTER
   ===================================================================== */
.site-footer { background:var(--navy-d); color:#c2cce0; font-size:14px; }
.footer-main { padding:36px 0 28px; border-top:4px solid var(--gold); }
.footer-main .container {
  display:grid; gap:30px;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
}
.footer-brand .fb-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.footer-crest { width:46px; height:46px; flex:0 0 auto; }
.footer-brand .fb-word { font-family:var(--ff-serif); font-weight:800; font-size:1.4rem; color:#fff; line-height:1.1; }
.footer-brand .fb-full { font-size:12px; color:#9eabc6; }
.footer-contact { margin:0; }
.footer-contact div { display:flex; gap:9px; padding:5px 0; align-items:flex-start; line-height:1.5; }
.footer-contact .fc-ico { flex:0 0 auto; width:16px; height:16px; margin-top:3px; color:var(--gold); }
.footer-contact .fc-ico svg { width:100%; height:100%; stroke:currentColor; fill:none; }
.footer-contact a { color:#c2cce0; }
.footer-contact a:hover { color:#fff; }
.footer-col h4 {
  color:#fff; font-size:14px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 14px; padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.16); position:relative;
}
.footer-col h4::after {
  content:""; position:absolute; left:0; bottom:-1px; width:42px; height:1px; background:var(--gold);
}
.footer-links li { margin-bottom:1px; }
.footer-links a {
  color:#b3bfd8; display:inline-block; padding:3px 0 3px 14px; position:relative; font-size:13.5px;
}
.footer-links a::before {
  content:"\203A"; position:absolute; left:0; top:3px; color:var(--gold);
}
.footer-links a:hover { color:#fff; }
.friendly-links {
  width:100%; max-width:280px; margin-top:4px;
  background:var(--navy); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius); padding:9px 10px; font-size:13.5px;
}
.friendly-links option { color:var(--ink); background:#fff; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18);
  font-size:12.5px; color:#909cb8;
}
.footer-bottom .container {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 16px; padding:14px 20px; text-align:center;
}
.footer-bottom .fb-sep { color:rgba(255,255,255,.3); }
.footer-bottom a { color:#aab6d0; }
.footer-bottom a:hover { color:#fff; }

/* =====================================================================
   12. SUB-PAGE TEMPLATE — banner + breadcrumb + sidebar + content
   ===================================================================== */
.page-banner {
  background:var(--navy);
  background-image:linear-gradient(90deg, rgba(6,33,75,.92), rgba(10,42,94,.78));
  color:#fff; padding:34px 0 30px; position:relative;
  border-bottom:4px solid var(--gold);
  background-size:cover; background-position:center;
}
.page-banner.has-photo { background-blend-mode:multiply; }
.page-banner .container { position:relative; }
.page-title {
  font-family:var(--ff-serif); font-size:1.9rem; color:#fff; margin:0;
  font-weight:800; line-height:1.2;
}
.page-lead { color:#cdd7ea; margin:8px 0 0; font-size:1rem; max-width:60ch; }

.crumb {
  font-size:12.5px; color:var(--gray); padding:10px 0; display:flex;
  flex-wrap:wrap; align-items:center; gap:6px;
}
.crumb a { color:var(--navy); }
.crumb a:hover { color:var(--red); }
.crumb .sep { color:var(--muted); }
.crumb [aria-current="page"] { color:var(--gray); font-weight:600; }
.page-banner .crumb { color:#bcc8e0; padding:0 0 12px; }
.page-banner .crumb a { color:#fff; }
.page-banner .crumb a:hover { color:var(--gold); }
.page-banner .crumb [aria-current="page"] { color:#cdd7ea; }
.page-banner .crumb .sep { color:rgba(255,255,255,.5); }

.subwrap { padding:26px 0 44px; }
.subwrap .container {
  display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:start;
}

/* aside sidebar */
.sidebar { position:relative; }
.sidebar-head {
  background:var(--navy); color:#fff; font-weight:700; font-size:15px;
  padding:12px 16px; line-height:1.3;
}
.side-nav { border:1px solid var(--line); border-top:0; }
.side-link {
  display:block; padding:11px 16px; color:var(--ink); font-size:14px;
  border-bottom:1px solid var(--line); border-left:3px solid transparent;
  line-height:1.4;
}
.side-link:last-child { border-bottom:0; }
.side-link:hover { background:var(--bg2); color:var(--red); }
.side-link.active {
  border-left-color:var(--red); color:var(--navy); font-weight:700;
  background:var(--navy-soft);
}
.sidebar-aux {
  margin-top:18px; border:1px solid var(--line); padding:14px 16px; background:var(--bg2);
}
.sidebar-aux h4 {
  font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--navy);
  margin:0 0 8px; padding-bottom:7px; border-bottom:1px solid var(--line);
}
.sidebar-aux p { font-size:13px; color:var(--gray); margin:0 0 .6em; }

/* content column */
.content { min-width:0; }
.content > .crumb:first-child { margin-top:-6px; }

/* article (detail pages) */
.article-title {
  font-family:var(--ff-serif); font-size:1.7rem; color:var(--navy);
  margin:0 0 8px; line-height:1.25;
}
.article-meta {
  display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--muted);
  padding:0 0 14px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.article-meta .meta-item { display:inline-flex; align-items:center; gap:5px; }
.article p { color:var(--ink); }
.article h2 { font-size:1.25rem; color:var(--navy); margin-top:1.4em; }
.article h3 { font-size:1.08rem; color:var(--navy); margin-top:1.2em; }
.article img { border:1px solid var(--line); margin:1em 0; }
.article ul, .article ol { margin:0 0 1em 1.3em; }
.article ul li { list-style:disc; margin-bottom:.3em; }
.article ol li { list-style:decimal; margin-bottom:.3em; }
.article blockquote {
  border-left:3px solid var(--gold); background:var(--bg2);
  margin:1.2em 0; padding:12px 16px; color:var(--gray); font-style:italic;
}

/* =====================================================================
   13. SHARED UTILITY COMPONENTS
   ===================================================================== */
/* info card (bordered, square, subtle) */
.info-card { border:1px solid var(--line); background:var(--bg); padding:16px 18px; }
.info-card.accent { border-top:3px solid var(--navy); }
.info-card h3 { color:var(--navy); font-size:1.05rem; margin-bottom:.4em; }

/* tables (institutional) */
.data-table { border:1px solid var(--line); font-size:14px; }
.data-table caption { text-align:left; font-weight:700; color:var(--navy); padding:10px 12px; background:var(--bg2); }
.data-table th, .data-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.data-table thead th { background:var(--navy); color:#fff; font-weight:600; }
.data-table tbody tr:nth-child(even) { background:var(--bg2); }

/* accordion (FAQ) */
.accordion { border:1px solid var(--line); }
.accordion-item { border-bottom:1px solid var(--line); }
.accordion-item:last-child { border-bottom:0; }
.accordion-header {
  width:100%; text-align:left; background:var(--bg); border:0;
  padding:13px 16px; font-size:15px; font-weight:600; color:var(--navy);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.accordion-header:hover { background:var(--bg2); }
.accordion-header::after {
  content:"+"; font-size:18px; color:var(--red); font-weight:700; flex:0 0 auto;
}
.accordion-item.open .accordion-header { background:var(--navy-soft); }
.accordion-item.open .accordion-header::after { content:"\2013"; }
.accordion-panel {
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  padding:0 16px; color:var(--gray);
}
.accordion-item.open .accordion-panel { max-height:600px; padding:4px 16px 16px; }
@media (prefers-reduced-motion: reduce){ .accordion-panel { transition:none; } }

/* forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.form-group .req { color:var(--red); }
.form-control {
  width:100%; padding:9px 12px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  color:var(--ink);
}
.form-control:focus { border-color:var(--navy); }
.form-group.invalid .form-control { border-color:var(--red); background:#fdf3f4; }
.form-group .err-msg { display:none; font-size:12.5px; color:var(--red); margin-top:4px; }
.form-group.invalid .err-msg { display:block; }
.form-success {
  display:none; border:1px solid #b7d8b9; background:#eaf6ea; color:#256a2a;
  padding:12px 16px; border-radius:var(--radius); margin-bottom:16px;
}
.form-success.show { display:block; }

/* tags / chips */
.chip {
  display:inline-block; font-size:12px; font-weight:600; color:var(--navy);
  background:var(--navy-soft); padding:3px 9px; border-radius:2px; margin:2px;
}

/* reveal animation (main.js hook) */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in-view { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* news filter hook helper */
.is-hidden { display:none !important; }

/* back to top (main.js hook) */
.back-to-top {
  position:fixed; right:18px; bottom:18px; z-index:400;
  width:44px; height:44px; border:0; border-radius:var(--radius);
  background:var(--navy); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, background .15s ease;
  box-shadow:var(--shadow-md);
}
.back-to-top:hover { background:var(--red); }
.back-to-top.show { opacity:1; visibility:visible; transform:none; }

/* small helpers */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.text-center{text-align:center}
.muted{color:var(--muted)}.small{font-size:13px}
.lead{font-size:1.05rem;color:var(--gray);line-height:1.7}

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .footer-main .container { grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  /* nav collapses behind toggle */
  .nav-toggle { display:flex; }
  .masthead-search { display:none; }
  .mainnav .container { display:block; padding-inline:0; }
  .mainnav-list {
    display:none; flex-direction:column; background:var(--navy-d); flex:none;
  }
  .mainnav-list.open { display:flex; }
  .mainnav-item { flex:none; text-align:left; border-top:1px solid rgba(255,255,255,.10); }
  .mainnav-link { padding:13px 20px; border-bottom:0; border-left:3px solid transparent; }
  .mainnav-link:hover,.mainnav-link.active,.mainnav-item.open > .mainnav-link {
    border-bottom:0; border-left-color:var(--gold);
  }
  .mainnav-link[aria-haspopup="true"]::after {
    float:right; margin-top:8px; transition:transform .2s ease;
  }
  .mainnav-item.open > .mainnav-link[aria-haspopup="true"]::after { transform:rotate(180deg); }
  /* drops expand inline */
  .mainnav-drop {
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; box-shadow:none; border:0; border-top:0;
    background:rgba(0,0,0,.18); max-width:none; min-width:0; padding:0;
  }
  .mainnav-item.open > .mainnav-drop { display:block; }
  .mainnav-item:hover > .mainnav-drop:not(.open) { opacity:0; visibility:hidden; }
  .drop-link { color:#cdd7ea; padding:10px 32px; border-left:0; }
  .drop-link:hover { background:rgba(255,255,255,.08); color:#fff; }
  .drop-head { color:#8d9bbc; padding:10px 32px 4px; }
  .mainnav-drop hr { border-color:rgba(255,255,255,.12); }

  /* home layout stacks */
  .portal-grid.cols-2,.portal-grid.cols-3 { grid-template-columns:1fr; }

  /* sub-page columns collapse; sidebar on top */
  .subwrap .container { grid-template-columns:1fr; }
  .sidebar { order:-1; }
  .side-nav { display:flex; flex-wrap:wrap; border-left:0; border-right:0; }
  .side-link { flex:1 1 auto; border-bottom:1px solid var(--line); }
}
@media (max-width:640px){
  .topbar .container { font-size:12px; }
  .topbar-welcome { display:none; }
  .topbar-links a:first-child { padding-left:0; }
  .brand-full { white-space:normal; font-size:11.5px; }
  .brand-word { font-size:1.5rem; }
  .brand-crest { width:44px; height:44px; }
  .footer-main .container { grid-template-columns:1fr; }
  .page-title { font-size:1.5rem; }
  .article-title { font-size:1.4rem; }
}