/* ==========================================================================
   Components
   ========================================================================== */

/* ---- ALPHA service banner ---- */
.service-banner {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.service-banner .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.tag-alpha {
  background: var(--tag-alpha-bg);
  color: var(--tag-alpha-text);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.service-banner p { margin: 0; max-width: none; color: var(--text-muted); }

/* ---- Site header ---- */
.site-header {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-inverse);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
}
.brand:hover, .brand:visited { color: var(--text-on-inverse); }
.brand-mark-img {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: block;
}
.brand-name { font-size: 0.95rem; }
.brand-name span { display: block; }

/* ---- Primary navigation ---- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--navy-300);
  color: var(--text-on-inverse);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  align-items: center;
  gap: var(--space-2);
}
.site-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-5);
  margin: 0; padding: 0;
  max-width: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  color: var(--text-on-inverse);
  text-decoration: none;
  font-weight: 600;
  padding-block: var(--space-2);
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--iron-300); color: var(--text-on-inverse); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--iron-500); }
.site-nav a:visited { color: var(--text-on-inverse); }

@media (max-width: 48rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    flex-basis: 100%;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--navy-600); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--iron-500); }
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  background: var(--surface-muted);
}
.breadcrumbs .container { padding-block: var(--space-4); }
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0; padding: 0;
  max-width: none;
  font-weight: 600;
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--space-3); }
.breadcrumbs a { color: var(--text-on-muted); }
.breadcrumbs li[aria-current="page"] { color: var(--text-on-muted); }
.breadcrumbs .sep { color: var(--navy-300); }

/* ---- Hero: dark image variant (homepage) ---- */
.hero-dark {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  position: relative;
  overflow: hidden;
}
.hero-dark .container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-8);
}
.hero-dark h1 { color: var(--text-on-inverse); margin: 0; }
.hero-figure {
  align-self: stretch;
  border-radius: var(--radius-lg);
  min-height: 260px;
  background:
    linear-gradient(160deg, rgba(21,44,65,0) 30%, rgba(21,44,65,0.55) 100%),
    var(--navy-600);
  background-size: cover;
  background-position: center;
}
@media (max-width: 48rem) {
  .hero-dark .container { grid-template-columns: 1fr; padding-block: var(--space-7); }
  .hero-figure { min-height: 180px; }
}

/* ---- Hero: tinted band variant (initiatives) ---- */
.hero-tint {
  background: var(--surface-hero);
}
.hero-tint .container { padding-block: var(--space-8); }
.hero-tint h1 { color: var(--text-on-muted); }
.hero-tint .lede { color: var(--navy-700); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover, .btn-primary:visited { background: var(--accent-hover); color: var(--accent-text); }
.btn-secondary {
  background: var(--surface-page);
  color: var(--link);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--grey-50); color: var(--link-hover); }

/* ---- Two-column page grid (content + sidebar) ---- */
.layout-split {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 56rem) {
  .layout-split { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---- Event list ---- */
.event-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.event-list > li {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.event-list > li:first-child { padding-top: 0; }
.event {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: start;
}
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.event-head h2, .event-head h3 { margin: 0; margin-top: 0; font-size: 1.2rem; letter-spacing: 0; }
.event-head h2 a, .event-head h3 a { text-decoration: underline; }
.event-desc { grid-column: 1 / -1; margin: 0; color: var(--text-default); }
.event-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-top: var(--space-2);
}
.event-meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.event-meta svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--grey-500); }
.event-chevron {
  grid-row: 1 / 2;
  grid-column: 2;
  color: var(--link);
  align-self: center;
}
.event-chevron svg { width: 22px; height: 22px; }

/* ---- Status tags ---- */
.tag {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-open { background: var(--tag-open-bg); color: var(--tag-open-text); }
.tag-closed { background: var(--tag-closed-bg); color: var(--tag-closed-text); }
.tag-position { background: var(--tag-position-bg); color: var(--tag-position-text); }

/* ---- Resource cards (homepage sidebar) ---- */
.resource-list { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--space-5); }
.resource-list li { margin: 0; }
.resource {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.resource-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.resource-icon svg { width: 26px; height: 26px; }
.resource-icon.iron { background: var(--tile-iron-bg); color: var(--tile-iron-fg); }
.resource-icon.navy { background: var(--tile-navy-bg); color: var(--tile-navy-fg); }
.resource-icon.rose { background: var(--tile-rose-bg); color: var(--tile-rose-fg); }
.resource-icon.grey { background: var(--tile-grey-bg); color: var(--tile-grey-fg); }
.resource h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.resource h3 a { text-decoration: underline; }
.resource p { margin: 0; font-size: 0.98rem; color: var(--text-muted); }

/* ---- Initiative link list ---- */
.initiative-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.initiative-list li {
  margin: 0;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.initiative {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.initiative h3 { margin: 0; grid-column: 1; }
.initiative h3 a { text-decoration: underline; }
.initiative p { margin: 0; grid-column: 1; color: var(--text-muted); }
.initiative .event-chevron { grid-row: 1 / span 2; }

/* ---- Tabs (in-page) ---- */
.tabs { margin-top: var(--space-6); }
.tablist {
  display: flex;
  gap: var(--space-2);
  background: var(--surface-muted);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-bottom: var(--space-6);
}
.tablist [role="tab"] {
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--space-2) var(--space-3);
  color: var(--link);
  cursor: pointer;
  border-radius: 2px;
}
.tablist [role="tab"][aria-selected="true"] {
  color: var(--text-on-muted);
  border-bottom-color: var(--navy-700);
}
[role="tabpanel"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---- Role blocks (committee) ---- */
.role-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.role-list > li {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.role-head h3 { margin: 0; font-size: 1.1rem; }
.person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: 999px;
  padding: 0.1rem 0.7rem 0.1rem 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-on-muted);
}
.person .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--navy-200);
  display: grid; place-items: center;
  color: var(--navy-700); font-size: 0.7rem; font-weight: 700;
}
.role-reports { font-size: 0.98rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.role-time { font-size: 0.95rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.role-time svg { width: 16px; height: 16px; }

/* ---- Call-out box ---- */
.callout {
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  max-width: var(--measure);
}
.callout h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; color: var(--text-on-muted); }
.callout .callout-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: "wght" 700, "wdth" 92;
  font-size: 1.05rem;
  color: var(--text-on-muted);
  max-width: none;
}
.callout p { color: var(--navy-700); }

/* ---- Data table ---- */
.table-wrap { overflow-x: auto; max-width: var(--measure); margin-bottom: var(--space-5); }
table.data {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
table.data caption { text-align: left; font-weight: 700; margin-bottom: var(--space-3); }
table.data th, table.data td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
}
table.data thead th { border-bottom: 2px solid var(--table-head-border); }
table.data tbody tr:nth-child(odd) { background: var(--table-stripe); }
table.data th[scope="row"] { font-weight: 600; }

/* ---- FAQ (details/summary) ---- */
.faq { max-width: var(--measure); }
.faq details {
  border-bottom: 1px solid var(--border);
}
.faq summary {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--link);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--link-hover); }
.faq .faq-body { padding-bottom: var(--space-4); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---- Checklist ---- */
.checklist {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  max-width: var(--measure);
}
.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-3);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1rem; height: 0.6rem;
  border-left: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---- Plain-English notice ---- */
.notice {
  border-left: 4px solid var(--accent);
  background: var(--iron-10);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 var(--space-6);
  max-width: var(--measure);
}
.notice p { margin: 0; }
.notice strong { color: var(--text-default); }

/* ---- Steps list (numbered, how to perform a lift) ---- */
ol.steps { counter-reset: step; list-style: none; padding-left: 0; max-width: var(--measure); }
ol.steps li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--space-4);
  min-height: 2rem;
}
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  background: var(--navy-700);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---- Fail list (why a lift fails) ---- */
.fail-list { list-style: none; padding-left: 0; max-width: var(--measure); }
.fail-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-3);
}
.fail-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 1.1rem; height: 1.1rem;
  background: var(--rose-600);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 0.9rem;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- Rules sub-page card grid (hub) ---- */
.rule-cards {
  list-style: none; margin: 0; padding: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.rule-cards li { margin: 0; }
.rule-card {
  display: block;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--text-default);
  background: var(--surface-raised);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.rule-card:hover { border-color: var(--navy-300); transform: translateY(-2px); color: var(--text-default); }
.rule-card:visited { color: var(--text-default); }
.rule-card h3 { margin: 0 0 var(--space-2); font-size: 1.15rem; color: var(--link); }
.rule-card p { margin: 0; font-size: 0.98rem; color: var(--text-muted); }

/* ---- Committee carousels ---- */
.carousel {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  max-width: none;
  padding-left: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--navy-300) transparent;
}
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: 4px; }
.carousel::-webkit-scrollbar-track { background: var(--grey-50); border-radius: 4px; }

.person-card {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: start;
}
.person-card .photo {
  width: 240px;
  height: 296px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  background: var(--navy-50);
}
.person-card .p-head {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.person-card .p-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  color: var(--text-default);
}
.person-card .p-role {
  margin: 0;
  color: var(--text-muted);
}
.person-card .p-blurb {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-default);
}
.person-card .p-social {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  margin-top: auto;
}
.person-card .p-social:hover { background: var(--accent-hover); color: #fff; }
.person-card .p-social svg { width: 18px; height: 18px; }

/* The carousel starts at the container's left edge (its natural position) and
   bleeds off only the right, running to the viewport edge. It uses the full
   available width and cards are never clipped. */
/* The carousel stays within the container. It scrolls internally, so the
   first card rests at the container's left edge and the last at the right,
   with the same margin on both sides. */
.carousel-bleed {
  margin-right: 0;
}

/* ---- Site footer ---- */
.site-footer {
  background: var(--surface-muted);
  margin-top: var(--space-8);
}
.site-footer .container {
  padding-block: var(--space-5);
  color: var(--text-on-muted);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-footer a { color: var(--text-on-muted); }