/* Read-only awards archive, visually aligned with the MHF Uganda site. */
@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/Oswald-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --brand-violet: #06c6da;
  --brand-violet-hover: #1dacbb;
  --brand-yellow: #fed100;
  --brand-red: #c51d67;
  --brand-magenta: #9e1f63;
  --brand-blue: #1dacbb;
  --brand-dark: #002436;
  --bg: #002436;
  --bg-secondary: #00314a;
  --bg-card: #00314a;
  --ink: #ffffff;
  --ink-mid: #d9e5e9;
  --ink-muted: #b4c8cf;
  --muted: #b4c8cf;
  --border: #0b5265;
  --primary: var(--brand-violet);
  --primary-hover: var(--brand-violet-hover);
  --primary-dim: #083d50;
  --accent-yellow: var(--brand-yellow);
  --accent-yellow-dim: #42370b;
  --accent-red: var(--brand-red);
  --accent-red-dim: #44213a;
  --accent-magenta: var(--brand-magenta);
  --accent-magenta-dim: #37263e;
  --accent-blue: var(--brand-blue);
  --accent-blue-dim: #07394b;
  --font-serif: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --max-width: 1280px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; background: var(--bg); color: var(--ink); font-family: var(--font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--ink); }
body, input, button, select, textarea { font-family: var(--font-sans); }
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
button { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
h1, h2, h3, h4, p { margin-top: 0; }
p { color: var(--ink-mid); }
.skip-link { position: fixed; z-index: 2000; top: 8px; left: 12px; transform: translateY(-150%); padding: 10px 14px; background: var(--brand-dark); color: #fff; font-weight: 650; }
.skip-link:focus { transform: translateY(0); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.max-w-720 { max-width: 720px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Compact archive header */
.site-header { position: sticky; z-index: 1000; top: 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.nav-container { display: flex; width: min(1360px, 100%); min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; padding: 7px clamp(18px, 3.5vw, 48px); }
.site-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.header-logo-img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.logo-divider { width: 1px; height: 30px; background: var(--border); }
.logo-text-group { display: flex; flex-direction: column; line-height: 1.18; }
.logo-title { color: var(--ink); font-size: .91rem; font-weight: 650; }
.logo-subtitle { color: var(--muted); font-size: .7rem; font-weight: 550; letter-spacing: .025em; }
.desktop-nav { display: flex; align-items: center; }
.nav-link { display: inline-flex; min-height: 44px; align-items: center; padding: 7px 0; color: var(--plum, var(--brand-violet)); font-size: .88rem; font-weight: 620; }
.nav-link:hover { color: var(--brand-red); }
.mobile-nav-toggle { display: none; }

.section-container { width: min(var(--max-width), calc(100% - 48px)); margin: 0 auto; padding: 2rem 0 3.5rem; }
.section-tag { display: inline-block; margin-bottom: .8rem; color: var(--brand-violet); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.section-title { margin-bottom: 1rem; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 500; }
.section-subtitle { max-width: 720px; margin: 0 auto 2.5rem; color: var(--ink-muted); font-size: 1.05rem; line-height: 1.55; }

/* Archive introduction */
.elections-section { padding: 0 0 3.5rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.elections-portal-hero { margin: 0 auto 1.65rem; padding: clamp(34px, 5vw, 56px) 0 0; }
.hero-ribbon-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 1.25rem; text-align: left; }
.hero-ribbon-img { width: 30px; height: 30px; object-fit: contain; }
.hero-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.badge-org { color: var(--brand-violet); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.badge-event { color: var(--ink-muted); font-size: .78rem; font-weight: 550; }
.elections-hero-title { max-width: 850px; margin: 0 auto 12px; color: var(--brand-dark); font-family: var(--font-serif); font-size: clamp(2.55rem, 6vw, 4.15rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.elections-hero-subtitle { margin-bottom: 0; color: var(--ink-muted); font-size: clamp(1rem, 1.45vw, 1.12rem); line-height: 1.55; }
.election-banner { max-width: 760px; margin: 0 auto 1.4rem; padding: 12px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-secondary); color: var(--ink); font-size: .9rem; text-align: center; }
.election-banner strong { font-weight: 700; }
.election-open { border-color: #b9ccd2; background: var(--accent-blue-dim); color: #294d5c; }
.election-closed { border-color: var(--border); background: var(--bg-secondary); color: var(--ink); }
.election-meta { margin: 0 auto 1.2rem; text-align: center; }
.election-title { margin: 0 0 .25rem; color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 500; letter-spacing: -.02em; }
.election-totals { margin: 0; color: var(--ink-muted); font-size: .88rem; }
.archive-disclaimer { max-width: 850px; margin: 0 auto 1.6rem; color: var(--ink-muted); font-size: .82rem; line-height: 1.45; text-align: center; }

/* Search and category filters */
.election-controls-bar { margin: 0 auto 2rem; }
.search-box { position: relative; max-width: 500px; margin: 0 auto 1.2rem; }
.search-icon { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--ink-muted); }
.search-input { width: 100%; height: 46px; padding: 0 44px 0 43px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font-size: .95rem; }
.search-input:focus { border-color: var(--brand-violet); outline: 3px solid var(--primary-dim); outline-offset: 1px; }
.clear-search-btn { position: absolute; top: 1px; right: 3px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-muted); font-size: 1.3rem; cursor: pointer; }
.category-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 1050px; margin: 0 auto; }
.category-chip { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 7px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--ink-mid); font-size: .77rem; font-weight: 580; line-height: 1.2; cursor: pointer; }
.category-chip:hover { border-color: var(--brand-violet); color: var(--brand-violet); }
.category-chip.active { border-color: var(--brand-violet); background: var(--brand-violet); color: #fff; }

/* Recorded categories and nominee standings */
.position-block { margin: 0 0 2.8rem; padding-top: 19px; border-top: 1px solid var(--border); scroll-margin-top: 82px; }
.position-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.position-title { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.55rem; font-weight: 500; letter-spacing: -.02em; }
.position-pick { color: var(--ink-muted); font-size: .76rem; font-weight: 600; }
.position-voted { color: var(--brand-violet); }
.nominee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; max-width: 1100px; margin: 0 auto; }
.nominee-card { display: flex; min-width: 0; flex-direction: column; gap: 12px; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); text-align: center; }
.nominee-card.my-vote { border-color: var(--brand-violet); background: var(--primary-dim); }
.nominee-avatar { position: relative; display: flex; width: 64px; height: 64px; flex: 0 0 64px; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; border: 1px solid var(--border); border-radius: 50%; background: var(--primary-dim); color: var(--brand-violet); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 650; }
.nominee-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nominee-avatar-sm { width: 48px; height: 48px; flex-basis: 48px; margin: 0; font-size: 1rem; }
.nominee-name { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 1.16rem; font-weight: 500; line-height: 1.25; }
.nominee-bio { flex-grow: 1; margin: 0; color: var(--ink-muted); font-size: .86rem; line-height: 1.45; }
.vote-meter-container { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.vote-stats { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.vote-pct { color: var(--brand-violet); font-size: 1.05rem; font-weight: 700; }
.vote-count { color: var(--ink-muted); font-size: .78rem; font-weight: 550; }
.vote-meter { height: 5px; overflow: hidden; border-radius: 999px; background: #e8e4e0; }
.vote-meter-fill { width: 0; height: 100%; border-radius: inherit; background: var(--brand-violet); transition: width .3s ease; }
.archive-status-label { display: block; width: 100%; padding: 8px 6px; border-top: 1px solid var(--border); color: var(--ink-muted); font-size: .75rem; font-weight: 600; text-align: center; }
.elections-empty { padding: 2.5rem 0; color: var(--ink-muted); text-align: center; }
.elections-empty p { margin-bottom: 1rem; }

/* Buttons and forms, retained for the shared election script */
.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid transparent; border-radius: 4px; font-size: .9rem; font-weight: 620; line-height: 1.2; text-align: center; cursor: pointer; }
.btn-primary { border-color: var(--brand-violet); background: var(--brand-violet); color: #fff !important; }
.btn-primary:hover { border-color: var(--brand-violet-hover); background: var(--brand-violet-hover); }
.btn-secondary { border-color: var(--border); background: #fff; color: var(--ink) !important; }
.btn-secondary:hover { border-color: var(--brand-violet); color: var(--brand-violet) !important; }
.btn-full { width: 100%; }
.btn-voted { border-color: var(--brand-violet); background: var(--brand-violet); color: #fff; cursor: default; }

/* Vote modal styles for the shared script */
.modal-overlay { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(31, 25, 34, .72); }
.modal-overlay[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal-card { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.modal-close { position: absolute; top: 8px; right: 9px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-muted); font-size: 1.4rem; cursor: pointer; }
.modal-title { margin: 0 0 7px; color: var(--ink); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; }
.modal-subtext { margin-bottom: 1.2rem; color: var(--ink-muted); font-size: .9rem; }
.modal-error { margin-bottom: 1rem; padding: 9px 12px; border: 1px solid var(--brand-red); background: var(--accent-red-dim); color: #762f38; font-size: .86rem; }
.modal-fine { margin: .8rem 0 0; color: var(--ink-muted); font-size: .8rem; text-align: center; }
.form-group { margin-bottom: 1rem; text-align: left; }
.form-label { display: block; margin-bottom: 5px; color: var(--ink); font-size: .9rem; font-weight: 620; }
.required { color: var(--brand-red); }
.form-input { width: 100%; height: 44px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--ink); font-size: .96rem; }
.form-input:focus { border-color: var(--brand-violet); outline: 3px solid var(--primary-dim); outline-offset: 1px; }
.vote-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; padding: 12px; border: 1px solid var(--border); background: var(--bg-secondary); }
.vote-summary strong { display: block; color: var(--ink); font-size: 1rem; }
.vote-summary-pos { display: block; color: var(--ink-muted); font-size: .76rem; }

/* Awards partners and footer */
.organizing-partners-footer { padding: 28px 0 12px; background: var(--bg-secondary); }
.partner-footer-label { display: block; margin-bottom: 16px; color: var(--ink-muted); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.partner-footer-grid { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 5vw, 56px); flex-wrap: wrap; }
.partner-card { display: flex; min-height: 55px; align-items: center; justify-content: center; }
.partner-img-mhf { width: auto; max-width: 180px; height: 42px; object-fit: contain; }
.partner-img-scau { width: auto; max-width: 100px; height: 52px; object-fit: contain; }
.partner-img-rotaract { width: auto; max-width: 175px; height: 40px; object-fit: contain; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-container { width: min(var(--max-width), calc(100% - 48px)); margin: 0 auto; padding: 18px 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; color: var(--ink-muted); font-size: .77rem; }
.footer-bottom a { color: var(--brand-violet); font-weight: 620; }
.footer-bottom a:hover { color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .nominee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .nav-container { min-height: 62px; padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
  .desktop-nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  .mobile-nav-toggle .btn { min-height: 44px; padding: 8px 12px; font-size: .82rem; }
  .section-container, .footer-container { width: calc(100% - 34px); }
  .section-container { padding-top: 1.45rem; padding-bottom: 2.8rem; }
  .elections-portal-hero { padding-top: 30px; }
  .elections-hero-title { font-size: clamp(2.4rem, 9.5vw, 3.5rem); }
  .elections-hero-subtitle { font-size: .94rem; }
  .election-banner { font-size: .84rem; }
  .election-title { font-size: 1.35rem; }
  .election-totals { font-size: .78rem; }
  .category-nav { gap: 6px; }
  .category-chip { min-height: 44px; padding: 7px 9px; font-size: .71rem; }
  .position-title-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .position-title { font-size: 1.35rem; }
  .nominee-card { padding: 13px; gap: 9px; }
  .nominee-name { font-size: 1.03rem; }
  .nominee-bio { font-size: .79rem; }
  .vote-count { font-size: .72rem; }
  .archive-status-label { font-size: .7rem; }
  .partner-footer-grid { gap: 20px; }
  .partner-img-mhf { max-width: 160px; height: 38px; }
  .partner-img-scau { max-width: 96px; height: 48px; }
  .partner-img-rotaract { max-width: 160px; height: 36px; }
}
@media (max-width: 390px) {
  .section-container, .footer-container { width: calc(100% - 28px); }
  .nominee-grid { grid-template-columns: 1fr; }
  .category-chip { padding-inline: 8px; font-size: .68rem; }
  .logo-title { font-size: .84rem; }
  .logo-subtitle { font-size: .65rem; }
  .partner-footer-grid { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}