/* Cabugao ES public site — every brand decision flows from the CSS variables
   set in includes/public_header.php (which reads cms_settings). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--f-heading); line-height: 1.15; margin: 0 0 .5em; }
a { color: var(--c-primary); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: #61708a; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--c-accent);
  color: #1a1a1a; padding: 8px 14px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--c-footer); color: #cfe0f5; font-size: .78rem; }
.topbar-in { display: flex; justify-content: space-between; gap: 12px; padding: 6px 20px; flex-wrap: wrap; }
.site-header { background: #fff; border-bottom: 4px solid var(--c-accent); position: sticky; top: 0; z-index: 50; }
.header-in { display: flex; align-items: center; gap: 16px; padding: 12px 20px; flex-wrap: wrap; }
/* The header needs more room than the standard 1120px content width once
   every nav item sits next to the logo. Measured requirement with all optional
   items on (Citizen's Charter, School Data, Activity Evaluations): ~1393px.
   Re-check with the puppeteer measurement script in /home/claude/preview
   whenever a nav item is added or renamed, and adjust this + the matching
   hamburger breakpoint below together. */
.wrap.header-in { max-width: 1480px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-text); }
.brand-logo { width: 52px; height: 52px; object-fit: contain; }
.brand-seal {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-primary); color: var(--c-accent);
  display: grid; place-items: center;
  font-family: var(--f-heading); font-weight: 800; font-size: 1.5rem;
}
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-family: var(--f-heading); font-size: 1.05rem; line-height: 1.2; }
.brand-text small { color: #61708a; font-size: .74rem; }
.site-nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  text-decoration: none; padding: 8px 10px; border-radius: 8px;
  font-weight: 600; font-size: .88rem; color: var(--c-text); white-space: nowrap;
}
.site-nav a:hover { background: color-mix(in srgb, var(--c-primary) 8%, #fff); }
.site-nav a.active { background: var(--c-primary); color: #fff; }
.nav-toggle { display: none; margin-left: auto; font-size: 1.4rem; background: none; border: 1px solid #d4dbe6; border-radius: 8px; padding: 4px 12px; cursor: pointer; }

/* ---------- Hero (district-style banner: logos · stacked text · logos) ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 60%, #000));
  background-size: cover; background-position: center;
}
/* Decorative translucent circles, as on the district website */
.hero::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -60%; left: 20%;
  width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.hero-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px 24px; position: relative; z-index: 1;
}
.hero-logos { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hero-logos a { display: flex; }
.hero-logos-left img { height: clamp(52px, 6vw, 80px); width: auto; }
.hero-logos-right img { height: clamp(44px, 5vw, 65px); width: auto; }
.hero-logos img {
  object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}
.hero-text { flex: 1; text-align: center; min-width: 0; line-height: 1.25; }
.hero-text p { margin: 0; }
.hero-l1 {
  font-family: var(--f-hero);
  font-size: 1.15rem; font-weight: 700; letter-spacing: 1.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.25); margin-bottom: 1px;
}
.hero-l2 {
  font-family: var(--f-hero);
  font-size: .78rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; opacity: .92; margin-bottom: 1px;
}
.hero-l3 {
  font-family: var(--f-hero);
  font-size: .75rem; font-weight: 700; letter-spacing: 1.5px;
  opacity: .88; margin-bottom: 4px;
}
.hero .hero-name {
  font-family: var(--f-hero);
  font-size: clamp(1.2rem, 3vw, var(--hero-title-size));
  font-weight: 700; letter-spacing: 1px; line-height: 1.1;
  color: var(--c-hero-title);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  margin: 0 0 6px;
}
.hero-sub {
  font-family: var(--f-hero);
  font-size: var(--hero-sub-size); letter-spacing: .06em;
  opacity: .92; max-width: 560px; margin: 0 auto 10px !important;
}
.btn-hero { padding: 7px 16px; font-size: .85rem; }
/* Slim inner-page version of the banner */
.hero-compact .hero-bar { padding: 10px 20px 18px; gap: 14px; }
.hero-compact .hero-logos-left img  { height: clamp(40px, 4.5vw, 58px); }
.hero-compact .hero-logos-right img { height: clamp(36px, 4vw, 48px); }
.hero-compact .hero-l1 { font-size: .95rem; }
.hero-compact .hero-l2, .hero-compact .hero-l3 { font-size: .68rem; }
.hero-compact .hero-name { font-size: clamp(1.05rem, 2.2vw, calc(var(--hero-title-size) * 0.7)); margin-bottom: 2px; }
.hero-compact .hero-rays { height: 9px; }
/* Signature: "sinag" sun-ray band along the hero base, drawn from the accent color */
.hero-rays {
  position: absolute; inset: auto 0 0 0; height: 14px;
  background: repeating-linear-gradient(
    -55deg, var(--c-accent) 0 14px, transparent 14px 28px);
  opacity: .9; z-index: 1;
}

.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 11px 22px; border-radius: 10px; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-accent { background: var(--c-accent); color: #20242b; }
.btn-ghost { border-color: var(--c-primary); color: var(--c-primary); background: transparent; padding: 8px 16px; }
.btn-sm { padding: 6px 14px; font-size: .85rem; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: color-mix(in srgb, var(--c-primary) 5%, #fff); }
/* Cards keep their own text color regardless of the section behind them */
.panel, .post-card, .stat, .table-wrap { color: var(--c-text); }
/* Light-text mode for sections given a dark custom background */
.section-light { color: #eef3fa; }
.section-light .section-title { color: #fff; }
.section-light .muted { color: #c9d6e8; }
.section-light .btn-ghost { border-color: #fff; color: #fff; }
.section-title {
  font-size: 1.45rem; margin-bottom: 24px; color: var(--c-primary);
  padding-bottom: 10px; border-bottom: 3px solid var(--c-accent);
  display: flex; align-items: center; gap: 10px;
}

/* ---------- Slideshow ---------- */
.slideshow { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(13,42,79,.18); }
.slides { position: relative; aspect-ratio: 16 / 7; background: #0d2a4f; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(8,18,33,.85));
  color: #fff; padding: 36px 22px 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.slide figcaption a { color: var(--c-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.slide-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255,255,255,.85); border: 0; width: 42px; height: 42px;
  border-radius: 50%; font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.slide-btn.prev { left: 14px; } .slide-btn.next { right: 14px; }
.slide-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.slide-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.5); cursor: pointer; padding: 0;
}
.slide-dots button.is-active { background: var(--c-accent); }

/* ---------- Home grid: news + sidebar ---------- */
.home-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 36px; align-items: start; }
.post-cards { display: grid; gap: 18px; }
.post-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-primary) 10%, #fff);
  box-shadow: 0 4px 14px rgba(13,42,79,.08);
}
/* Homepage list: consistent horizontal cards; image column only when present */
.post-cards-home .post-card.has-cover {
  display: grid; grid-template-columns: 190px 1fr; align-items: stretch;
}
.post-cards-home .post-card.no-cover { display: block; }
.post-card .post-cover { display: block; }
.post-card .post-cover img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.post-card-body { padding: 16px 18px; }
.post-card-body h3 { font-size: 1.08rem; margin: 8px 0 2px; }
.post-card-body h3 a { text-decoration: none; }
.post-card-body p { margin: .25em 0; font-size: .93rem; }
/* News listing page: responsive grid of vertical cards */
.post-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.post-card-v { display: flex; flex-direction: column; }
.post-card-v .post-cover img { width: 100%; height: 180px; object-fit: cover; }

/* "Our School at a Glance" — prominent band right under the slideshow */
.section-glance { padding: 46px 0; }
.section-glance .glance-title { justify-content: center; border-bottom: none; }
.glance-sy {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accent); color: #20242b; padding: 3px 10px; border-radius: 999px; margin-left: 8px;
}
.stat-grid-lg { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.stat-grid-lg .stat strong { font-size: 2.4rem; }
/* Featured tile uses the same theme colors as the rest; emphasis comes from a
   thicker accent border and a larger number, not a different text color. */
.stat-feature {
  border-top-width: 7px;
  box-shadow: 0 8px 22px rgba(13,42,79,.14);
}
.stat-grid-lg .stat-feature strong { font-size: 2.9rem; }
.chip {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 12%, #fff); color: var(--c-primary);
}
.chip-announcement { background: color-mix(in srgb, var(--c-accent) 30%, #fff); color: #6b4d00; }

.panel { background: #fff; border-radius: 14px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--c-primary) 10%, #fff); box-shadow: 0 4px 14px rgba(13,42,79,.08); margin-bottom: 22px; }
.panel-title { font-size: 1.12rem; border-bottom: 2px solid var(--c-accent); padding-bottom: 8px; }
.event-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.event-list li { display: flex; gap: 12px; align-items: flex-start; }
.event-date {
  background: var(--c-primary); color: #fff; border-radius: 10px;
  min-width: 52px; text-align: center; padding: 6px 4px; line-height: 1.1;
}
.event-date strong { display: block; font-size: 1.2rem; font-family: var(--f-heading); }
.event-date small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.event-info { display: flex; flex-direction: column; }
.event-info small { color: #61708a; }
.quick-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quick-links a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 9px 10px; border-radius: 10px; font-weight: 600;
}
.quick-links a:hover { background: color-mix(in srgb, var(--c-primary) 8%, #fff); }
.ql-icon { font-size: 1.1rem; }

/* ---------- Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  background: #fff; border-radius: 14px; padding: 22px 14px; text-align: center;
  border-top: 5px solid var(--c-accent); box-shadow: 0 4px 14px rgba(13,42,79,.08);
}
.stat strong { display: block; font-size: 2rem; font-family: var(--f-heading); color: var(--c-primary); }
.stat span { font-size: .82rem; color: #61708a; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Tables (data, issuances, faculty) ---------- */
.table-wrap { overflow-x: auto; background: #fff; border-radius: 14px; box-shadow: 0 4px 14px rgba(13,42,79,.08); }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 560px; }
table.data th {
  background: var(--c-primary); color: #fff; text-align: left;
  padding: 11px 14px; font-family: var(--f-heading); font-weight: 700;
}
table.data td { padding: 10px 14px; border-bottom: 1px solid #eef1f6; }
table.data tr:nth-child(even) td { background: #fafbfe; }
table.data tr.grade-row td { background: color-mix(in srgb, var(--c-accent) 18%, #fff); font-weight: 700; }
table.data td.num, table.data th.num { text-align: right; }

/* ---------- Calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.cal-head h2 { margin: 0; font-size: 1.4rem; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button { border: 1px solid #d4dbe6; background: #fff; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #61708a; padding: 6px 0; }
.cal-cell { background: #fff; border-radius: 8px; min-height: 86px; padding: 6px; font-size: .8rem; border: 1px solid #eef1f6; }
.cal-cell.other { opacity: .4; }
.cal-cell.today { border: 2px solid var(--c-accent); }
.cal-day-num { font-weight: 800; color: #61708a; }
.cal-ev {
  display: block; margin-top: 4px; padding: 2px 6px; border-radius: 6px;
  background: var(--c-primary); color: #fff; font-size: .7rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev.holiday { background: #B3261E; }
.cal-ev.academic { background: #2E7D32; }
.cal-ev.meeting { background: #6A4FA3; }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; }
.cal-legend span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c-primary); }
.cal-legend .lg-holiday::before { background: #B3261E; }
.cal-legend .lg-academic::before { background: #2E7D32; }
.cal-legend .lg-meeting::before { background: #6A4FA3; }

/* ---------- Org chart (Faculty & Staff) ---------- */
.org-chart { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 10px 0 20px; }
.org-tier { width: 100%; display: flex; flex-direction: column; align-items: center; }
.org-tier-label {
  font-family: var(--f-heading); font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 10%, #fff);
  padding: 4px 14px; border-radius: 999px; margin: 0 0 14px;
}
.org-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.org-connector { width: 2px; height: 26px; background: color-mix(in srgb, var(--c-primary) 35%, #fff); }
.org-node {
  background: #fff; border: 1px solid color-mix(in srgb, var(--c-primary) 12%, #fff);
  border-radius: 14px; padding: 16px 14px 14px; width: 168px; text-align: center;
  box-shadow: 0 4px 14px rgba(13,42,79,.08); display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.org-avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; margin-bottom: 6px;
  display: grid; place-items: center; flex-shrink: 0; position: relative;
  border: 3px solid var(--c-accent); background: color-mix(in srgb, var(--c-primary) 8%, #fff);
}
.org-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.org-initials { font-family: var(--f-heading); font-weight: 800; font-size: 1.5rem; color: var(--c-primary); }
.org-name { font-size: .92rem; line-height: 1.25; color: var(--c-text); }
.org-title { font-size: .76rem; color: var(--c-primary); font-weight: 600; }
.org-office { font-size: .72rem; color: #61708a; }
.org-node.org-lg { width: 200px; }
.org-node.org-lg .org-avatar { width: 92px; height: 92px; }
.org-node.org-lg .org-initials { font-size: 1.9rem; }
.org-node.org-head { border-color: var(--c-accent); border-width: 2px; box-shadow: 0 8px 22px rgba(242,183,5,.25); }
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.org-grid .org-node { width: auto; }

/* ---------- Citizen's Charter ---------- */
.charter-lead { padding-bottom: 30px; }
.charter-sy { font-weight: 700; color: var(--c-primary); margin-top: -8px; }
.charter-jump {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid #e2e7f0;
}
.charter-jump a {
  font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, #fff);
  padding: 6px 13px; border-radius: 999px;
}
.charter-jump a:hover { background: color-mix(in srgb, var(--c-primary) 16%, #fff); }
.charter-section { scroll-margin-top: 96px; }
.charter-section h3 { font-size: 1.02rem; color: var(--c-primary); margin-top: 22px; }
.charter-section h4 { font-size: .92rem; margin-top: 14px; }
.charter-reqs { margin: 6px 0 18px; padding-left: 22px; }
.charter-reqs li { margin-bottom: 4px; }
.charter-meta { font-size: .9rem; color: #61708a; margin-top: 4px; }
.charter-seal {
  max-width: 700px; margin: 24px auto 0; text-align: center; font-style: italic;
  color: var(--c-primary); padding: 16px 22px; border-top: 2px solid var(--c-accent);
}
.charter-signoff {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
  margin-top: 26px;
}
.charter-signoff > div {
  background: #fff; border: 1px solid color-mix(in srgb, var(--c-primary) 10%, #fff);
  border-radius: 12px; padding: 14px 16px; font-size: .9rem;
}
.charter-signoff strong { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #61708a; margin-bottom: 4px; }
.charter-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Process flow chips */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 26px; }
.flow-step {
  background: #fff; border: 1px solid color-mix(in srgb, var(--c-primary) 15%, #fff);
  border-radius: 8px; padding: 8px 12px; font-size: .82rem; font-weight: 600;
  box-shadow: 0 2px 6px rgba(13,42,79,.06);
}
.flow-endpoint { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.flow-arrow { color: var(--c-accent); font-weight: 800; }

/* ---------- Flash messages (shared look with admin panel) ---------- */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 600; }
.flash-ok { background: #e2f4e6; color: #1d5b2a; border: 1px solid #bfe3c8; }
.flash-err { background: #fbe5e3; color: #8a2018; border: 1px solid #f1c2bd; }

/* ---------- Activity Evaluations form ---------- */
.eval-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eval-q { font-size: 1.02rem; margin: 30px 0 10px; color: var(--c-primary); }
.eval-q .muted { font-weight: 400; font-size: .82em; }
.eval-text { width: 100%; padding: 10px 12px; border: 1px solid #cbd4e1; border-radius: 8px; font: inherit; }
textarea.eval-text { min-height: 90px; resize: vertical; }
.eval-radio-list { display: grid; gap: 8px; }
.eval-radio-list label { display: flex; gap: 8px; align-items: baseline; font-size: .95rem; }
.eval-scale { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eval-scale-label { font-size: .82rem; color: #61708a; max-width: 160px; }
.eval-scale-points { display: flex; gap: 14px; }
.eval-scale-points label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; }
.eval-grid th, .eval-grid td { text-align: left; }
.eval-grid th small { font-weight: 500; display: block; font-size: .68rem; color: #cfe0f5; }
.eval-grid td:first-child { min-width: 220px; }
.eval-bars { display: grid; gap: 12px; }
.eval-bar-row { display: grid; grid-template-columns: 1fr 2fr 50px; gap: 12px; align-items: center; }
.eval-bar-label { font-size: .88rem; }
.eval-bar-track { background: #e9edf4; border-radius: 999px; height: 12px; overflow: hidden; }
.eval-bar-fill { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); height: 100%; border-radius: 999px; }
.eval-bar-value { font-weight: 700; color: var(--c-primary); font-size: .88rem; text-align: right; }
@media (max-width: 600px) {
  .eval-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .eval-bar-value { text-align: left; }
}

/* ---------- Article ---------- */
.article { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 32px 34px; box-shadow: 0 4px 14px rgba(13,42,79,.08); }
.article img.cover { border-radius: 10px; margin-bottom: 18px; }
.article-body { white-space: pre-line; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-footer); color: #cfe0f5; margin-top: 40px; }
.site-footer a { color: var(--c-accent); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; padding: 44px 20px 24px; }
.footer-grid h3 { color: #fff; font-size: 1.02rem; }
.footer-mantra { font-style: italic; color: var(--c-accent); font-size: .88rem; }
.footer-seal a { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; }
.footer-seal img { height: 36px; width: auto; display: inline-block; }
.footer-gaa { font-size: .72rem; opacity: .6; line-height: 1.5; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-base {
  border-top: 1px solid rgba(255,255,255,.15); padding: 14px 20px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .8rem;
}

/* ---------- Responsive + motion ---------- */
/* Nav collapses to the hamburger menu once there isn't enough room for the
   logo plus every nav item on one line (measured: needs ~1393px with all
   optional nav items on; this breakpoint matches .wrap.header-in above). */
@media (max-width: 1480px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; flex-direction: column; }
  .site-nav.open { display: flex; }
}
@media (max-width: 860px) {
  .hero-bar { flex-wrap: wrap; justify-content: center; padding: 14px 14px 24px; }
  .hero-logos { flex: 0 0 100%; justify-content: center; }
  .hero-logos-left img, .hero-logos-right img { height: 42px; width: auto; }
  .hero-text { flex: 0 0 100%; order: 1; }
  .hero-logos-left { order: 0; }
  .hero-logos-right { order: 2; }
  .home-grid { grid-template-columns: 1fr; }
  .charter-two-col { grid-template-columns: 1fr; }
  .post-cards-home .post-card.has-cover { grid-template-columns: 1fr; }
  .post-card .post-cover img { max-height: 200px; }
  .slides { aspect-ratio: 4 / 3; }
  .cal-cell { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}