/* ==========================================================================
   Columbia Abundance — design system
   Edit the variables below to change color/type/spacing site-wide.
   ========================================================================== */

:root {
  /* Color — light, airy palette built around Columbia Blue */
  --color-bg: #fefeff;
  --color-bg-soft: #eaf4fb;
  --color-text: #22303e;
  --color-text-muted: #55677a;
  --color-accent: #1c6eb4;
  --color-accent-dark: #145690;
  --color-accent-soft: #d9ecf9;
  --color-border: #dde8f0;

  /* Type */
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
    Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, Cambria, "Iowan Old Style", "Times New Roman", Times,
    serif;
  --font-wordmark: "Rosario", var(--font-body);
  --font-size-base: 17px;
  --line-height-base: 1.6;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Layout */
  --content-width: 1080px;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16232f;
    --color-bg-soft: #1e3247;
    --color-text: #eaf4fb;
    --color-text-muted: #a9c2d6;
    --color-accent: #8fc7ee;
    --color-accent-dark: #b3dbf5;
    --color-accent-soft: #2b4a66;
    --color-border: #2e4358;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-accent);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* ---- Header / nav ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}

/* On the homepage, the title/nav bar scrolls away with the page instead of
   staying pinned — only the "Get Involved" button (below) stays fixed. */
body.home .site-header {
  position: static;
}

/* Reserve space so the fixed button (below) never overlaps "Leadership". */
body.home .site-header .wrap {
  padding-right: 210px;
}

/* Positions "Get Involved" using the same centered .wrap column as every
   other page's nav bar, instead of a raw viewport edge — so it lines up in
   exactly the same spot when navigating between pages, rather than jumping
   between "aligned to content" (other pages) and "aligned to browser edge"
   (this page) on wide screens. */
.floating-cta-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}

.floating-cta-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 75px;
}

.floating-cta {
  pointer-events: auto;
}

/* Wider than the standard reading-width .wrap, so the nav sits close to the
   actual browser corner instead of the narrower content column. Both the
   header and the floating "Get Involved" bar use this same width, so they
   stay lined up with each other across pages. */
.site-header .wrap,
.floating-cta-wrap {
  max-width: 1400px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand .line {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: var(--color-accent-dark);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.nav-links a:not(.btn):hover {
  color: var(--color-text);
  text-decoration: underline;
}

.nav-links a:not(.btn)[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
}

.nav-links .btn {
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn:hover {
  background: var(--color-accent-dark);
}

.btn-outline {
  background: transparent;
  color: var(--color-accent);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}

.btn-outline:hover {
  background: var(--color-accent-soft);
}

/* ---- Hero ---- */

.hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height: 1.18;
  margin: 0 0 var(--space-3);
  max-width: 800px;
}

.hero p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 0 var(--space-4);
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- Sections ---- */

section {
  padding: var(--space-5) 0;
}

section.soft {
  background: var(--color-bg-soft);
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-4);
}

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}

.section-head p {
  color: var(--color-text-muted);
  margin: 0;
}

.section-head p + p {
  margin-top: var(--space-2);
}

.split-head {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: var(--space-5);
  align-items: center;
}

.split-head h2 {
  font-size: clamp(2.1rem, 4.3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.split-head p {
  color: var(--color-text-muted);
  font-size: 19px;
  max-width: 640px;
  margin: 0;
}

/* Mirrors .split-head with the heading on the right — the h2 stays first in
   the markup (for reading/accessibility order) and is just moved visually
   via `order`. */
.split-head--reverse {
  grid-template-columns: 1fr minmax(220px, 380px);
}

.split-head--reverse h2 {
  order: 2;
}

.split-head--reverse p {
  order: 1;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.pillar {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.pillar h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}

.pillar p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.pillar p + p {
  margin-top: var(--space-2);
}

/* ---- Leadership / officers ---- */

.officers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .officers {
    grid-template-columns: repeat(4, 1fr);
  }
}

.officer-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}

.officer-avatar {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-2);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
}

.officer-card h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
}

.officer-year {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 var(--space-1);
}

.officer-detail {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.85rem;
}

.prose {
  max-width: 680px;
  color: var(--color-text);
}

.prose h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-top: var(--space-6);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  color: var(--color-text-muted);
  font-size: 19px;
}

/* ---- Upcoming events table ---- */

.events-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
}

.events-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
}

.events-table th,
.events-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.events-table th {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.events-table td {
  font-size: 0.95rem;
}

/* ---- Contact / join card ---- */

.join-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-4);
}

.join-card h2 {
  margin: 0 0 var(--space-1);
  font-size: 1.6rem;
}

.join-card p {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.contact-detail {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-footer a {
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-links .text-link {
  margin-left: var(--space-1);
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.social-icon svg {
  width: 17px;
  height: 17px;
}

.social-icon:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ---- Responsive ---- */

@media (max-width: 720px) {
  .pillars,
  .officers {
    grid-template-columns: 1fr;
  }

  .split-head {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .split-head--reverse h2,
  .split-head--reverse p {
    order: 0;
  }

  .floating-cta-bar {
    top: 75px;
  }

  .floating-cta-wrap {
    height: auto;
    padding-top: var(--space-2);
  }

  body.home .site-header .wrap {
    padding-right: var(--space-3);
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    display: none;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a,
  .nav-links .btn {
    width: 100%;
  }

  .nav-links .btn {
    text-align: center;
  }

  .site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}