/* public_html/styles.css
   Clean version with fixes:
   1. Card body text uses sans font with correct color
   2. Nav menu spacing improved
   3. Nav z-index fixed (doesn't obscure hamburger)
   4. All card text uses lead color (#24525a)
   5. Equal spacing between all cards (lead and grid)
   6. Refined hamburger icon
   7. Nav focus uses underline, not box
   8. Footer left-aligned

   NOTE: Only change from your provided live file:
   - Make the current-page underline move to the hovered link.
     The current page remains underlined by default (if link has
     aria-current="page" or class="current") but when the user
     hovers the menu the underline transfers to the hovered item.
*/

/* Root tokens */
:root{
  --serif: "Lora", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--serif);
  --body-font: var(--sans);

  --brand-dark:#0b2540;
  --muted:#6b7280;
  --body-text:#24525a;
  --accent:#0b6fae;
  --bg:#ffffff;
  --card-bg:#fbfcfd;
  --max-width:1400px;
  --gutter:24px;

  /* unified typography/layout tokens */
  --page-heading: clamp(19.5px, 2.2vw, 21.5px);
  --section-heading: clamp(19px, 2.2vw, 21px);
  --body-size: 16px;
  --body-line: 1.6;

  /* card / spacing tokens (defaults) */
  --card-padding: 22px;
  --card-radius: 0;
  --grid-gap: 20px;
  --cta-gap: 12px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:auto}
body{
  margin:0;
  font-family:var(--body-font);
  color:var(--brand-dark);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--body-line);
  font-weight:400;
  font-size:var(--body-size);
}

/* Ensure form controls inherit body font and normal weight */
button, input, textarea, select { font-family: var(--body-font); font-weight:400; }

/* Wordmark / site title */
.wordmark-title{
  margin:0;
  font-family:var(--heading-font);
  font-weight:700;
  color:var(--brand-dark);
  font-size: clamp(36px, 4.8vw, 96px);
  line-height:1;
  letter-spacing:0.02em;
  margin-bottom:6px;
}

/* Generic heading family (use Lora for headings) */
h1,h2,h3,h4,h5,h6,
.wordmark-title {
  font-family: var(--heading-font);
  font-weight:700;
  color:var(--brand-dark);
}

/* Page / Section base rules */
.page-intro h1 {
  font-size: var(--page-heading);
  margin: 0 0 12px;
}
.intro-box h2,
.card h2,
.card h3,
article h2,
section h2 {
  font-size: var(--section-heading);
  margin: 0 0 10px;
}

/* Body text - uses body-text color token */
p, li, .intro-box p, .card p, .lead {
  font-weight:400;
  font-family: var(--body-font);
  color: var(--body-text);
  margin: 0 0 10px;
  font-size: var(--body-size);
  line-height: var(--body-line);
}

/* Layout container */
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header: spacing and base styling */
.site-header{
  padding-top:28px;
  padding-bottom:0;
  border-bottom:1px solid #eef3f6;
  background:#fff;
  position:relative;
  overflow:visible;
}

/* Brand row (centered) */
.header-inner{display:flex;align-items:center;justify-content:center;text-align:center;padding:0}

/* Brand */
.brand { color: inherit; text-decoration: none; }
.brand a { color: inherit; text-decoration: none; box-shadow: none; }

/* Tagline */
.wordmark-tagline{
  margin:0;
  font-family:var(--body-font);
  font-weight:400;
  color:var(--muted);
  font-size: clamp(16px, 2.4vw, 28px);
  letter-spacing:0.08em;
  margin-top:6px;
}

/* Divider - reduced margin */
.site-divider{border:0;height:1px;margin:4px 0 8px;background:linear-gradient(90deg, rgba(238,243,246,0), rgba(238,243,246,1), rgba(238,243,246,0));}

/* Header menu row - tighter */
.header-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding-top:4px;
  padding-bottom:4px;
}

/* ==========================================================================
   NAV TOGGLE (HAMBURGER) - REFINED, ELEGANT
   ========================================================================== */

.nav-toggle {
  font-size: 0;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 50;
  outline: none;
}

.nav-toggle:focus,
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

.nav-toggle::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand-dark);
  border-radius: 1px;
  box-shadow:
    0 7px 0 var(--brand-dark),
    0 -7px 0 var(--brand-dark);
  transform-origin: center;
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle:hover::before {
  opacity: 0.7;
}

/* ==========================================================================
   SITE NAV - MOBILE-FIRST
   ========================================================================== */

.site-nav {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 160px;
  text-align: center;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(12,30,45,0.15);
  z-index: 35;
  padding: 16px 12px;
  width: auto;
  min-width: 220px;
  max-width: 90vw;
  box-sizing: border-box;
}

.site-nav.open {
  display: block;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 4px;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: block;
  padding: 12px 32px;
  color: var(--brand-dark);
  text-decoration: none;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 0;
  background: transparent;
  transition: background 150ms ease;
  white-space: nowrap;
  outline: none;
}

/* Behavior for current and hover underline:
   - By default the current page link can be underlined via
     aria-current="page" or .current class.
   - When the user hovers the menu, the underline moves to the hovered item.
   Implementation uses container hover to clear the default underline,
   then the hovered link gets the underline back via :hover selector.
*/
.site-nav a[aria-current="page"],
.site-nav a.current {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* clear current underline while interacting with the menu (so it can move) */
.site-nav:hover a {
  text-decoration: none;
}

/* Hover / focus underline for individual links */
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Removed gray hover background — no background used */
.site-nav a:hover {
  background: transparent;
}

/* ==========================================================================
   DESKTOP NAV (>=900px)
   ========================================================================== */

@media (min-width: 900px) {
  .nav-toggle {
    width: 64px;
    height: 64px;
  }

  .nav-toggle::before {
    width: 26px;
    height: 2px;
    box-shadow:
      0 8px 0 var(--brand-dark),
      0 -8px 0 var(--brand-dark);
  }

  .site-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 12px);
    width: auto;
    min-width: 480px;
    max-width: 90vw;
    padding: 16px 28px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0 12px 48px rgba(12,30,45,0.10);
    border: 1px solid #eef3f6;
    z-index: 35;
  }

  .site-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .site-nav a {
    display: inline-block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  /* Desktop: ensure hover behavior matches mobile (underline only) */
  .site-nav:hover a { text-decoration: none; }
  .site-nav a:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
}

/* ==========================================================================
   SMALL MOBILE (<420px)
   ========================================================================== */

@media (max-width: 420px) {
  .nav-toggle {
    width: 48px;
    height: 48px;
  }

  .nav-toggle::before {
    width: 22px;
    height: 2px;
    box-shadow:
      0 6px 0 var(--brand-dark),
      0 -6px 0 var(--brand-dark);
  }

  .site-nav {
    min-width: 200px;
    padding: 14px 10px;
    top: 140px;
  }

  .site-nav a {
    padding: 11px 28px;
    font-size: 15px;
  }
}

/* ==========================================================================
   INTRO BOX - SAME SPACING AS GRID CARDS
   ========================================================================== */

.intro-box{
  margin-bottom: var(--grid-gap);
}
.intro-box .intro-content{
  background:var(--card-bg);
  border:1px solid #eef3f6;
  padding:var(--card-padding);
  border-radius:0;
  box-shadow:0 6px 18px rgba(12,30,45,0.03);
}

/* ==========================================================================
   CTA BUTTONS
   ========================================================================== */

.btn-link{color:var(--accent);text-decoration:none;font-weight:600}
.btn-cta{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0;text-decoration:none;font-weight:700}

/* ==========================================================================
   GRID & CARDS
   ========================================================================== */

.home-grid.container{padding-top:0;padding-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);align-items:start}
.card{
  background:var(--card-bg);
  border:1px solid #eef3f6;
  padding:var(--card-padding);
  border-radius:0;
  min-height:220px;
}

/* Card body text - explicitly set font and color */
.card p,
.card li {
  margin:0 0 10px;
  font-family: var(--body-font);
  color: var(--body-text);
  font-size:var(--body-size);
  line-height:var(--body-line);
}

/* Standardized CTA spacing */
.card-actions { margin-top: var(--cta-gap); }

/* ==========================================================================
   FOOTER - LEFT ALIGNED
   ========================================================================== */

.site-footer {
  background: #fff;
  padding: 24px 0;
  border-top: 1px solid #eef3f6;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.footer-copy {
  margin: 0;
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.footer-copy span {
  color: var(--muted);
}

.footer-copy a {
  color: var(--muted);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.footer-copy a:hover,
.footer-copy a:focus {
  opacity: 0.7;
  text-decoration: underline;
}

.footer-sep {
  margin: 0 0.5em;
  color: var(--muted);
}

@media (max-width: 480px) {
  .footer-copy {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  
  .footer-sep {
    display: none;
  }
  
  .footer-links {
    display: flex;
    gap: 0.75em;
    align-items: center;
  }
  
  .footer-links .footer-sep {
    display: inline;
    margin: 0 0.4em;
  }
}

/* ==========================================================================
   LAYOUT PARITY
   ========================================================================== */

.intro-box .intro-content,
.card,
.grid .card {
  background: var(--card-bg);
  border: 1px solid #eef3f6;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(12,30,45,0.03);
  padding: var(--card-padding);
}

.grid .card { margin-top: 0; }

.page-intro + .leadership { margin-top: 28px; }

/* People grid */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}

/* Links */
a:hover{opacity:1}

/* ==========================================================================
   MOBILE ADJUSTMENTS
   ========================================================================== */

@media (max-width:900px){
  :root { 
    --grid-gap: 16px;
    --card-padding: 14px; 
  }

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-header{padding-top:18px;padding-bottom:0}
  .site-divider{margin:2px 0 6px}
  .home-grid.container{padding-top:0;padding-bottom:16px}
  .grid{grid-template-columns:1fr}
  .card{min-height:auto;padding:var(--card-padding);border-radius:0}
  
  /* Ensure intro-box uses same margin as grid gap */
  .intro-box {
    margin-bottom: var(--grid-gap);
  }
}

@media (max-width:420px){
  :root {
    --card-padding: 12px;
    --grid-gap: 12px;
  }

  .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .wordmark-title{font-size: clamp(22px, 8.5vw, 36px)}
  .wordmark-tagline{display:none}
  .grid{gap:var(--grid-gap)}
  .card{padding:var(--card-padding);border-radius:0}
  .card h2,
  .card h3 {
    font-size: var(--section-heading);
    line-height:1.18;
    margin-bottom:0.45rem;
  }
  .intro-box p, .lead, .card p { font-size:1.0625rem; line-height:1.6; }
  
  /* Equal spacing for intro-box */
  .intro-box {
    margin-bottom: var(--grid-gap);
  }
}

/* ==========================================================================
   DESKTOP RESTORES
   ========================================================================== */

@media (min-width:900px){
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .site-header{padding-top:48px;padding-bottom:0}
  .wordmark-title{font-size: clamp(42px, 4.2vw, 96px)}
  .wordmark-tagline{font-size: clamp(16px, 1.2vw, 22px);margin-top:8px}
}

@media (max-width:420px) {
  .wordmark-title { font-size: clamp(1.6rem, 7.2vw, 2.4rem); line-height:1.03; max-width:20ch; margin-left:auto; margin-right:auto; text-wrap:balance; hyphens:none; word-break:normal; }
  .wordmark-tagline { font-size:0.95rem; margin-top:0.35rem; line-height:1.25; }
  .intro-box p, .lead, .card p { font-size:1.0625rem; line-height:1.6; }
  .site-header { padding-top:1rem; padding-bottom:0; }
  .nav-toggle, .btn-cta, .btn-link { min-height:3rem; min-width:3rem; }
}

/* ==========================================================================
   AUTHORITATIVE HEADING STYLES
   ========================================================================== */

.page-intro h1,
main h1,
main > h1,
section > h1,
section h1,
main h2,
main h3,
section h2,
.intro-box h2,
.card h2,
.card h3,
article h2 {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--brand-dark);
  margin: 0 0 10px;
}

.page-intro h1,
main h1,
main > h1,
section > h1,
section h1 {
  font-size: clamp(21px, 2.6vw, 24px);
  line-height: 1.35;
  margin-bottom: 12px;
}

main h2,
main h3,
section h2,
.intro-box h2,
.card h2,
.card h3,
article h2 {
  font-size: var(--section-heading);
}

/* Paired-grid */
.paired-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  max-width: 100%;
  margin: 0 auto var(--grid-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .paired-grid { grid-template-columns: 1fr; max-width: none; margin-bottom: var(--grid-gap); }
}

/* Person cards */
.person.card.card-link,
.person.card.card-link .card-body,
.person.card.card-link .person-name,
.person.card.card-link .role,
.person.card.card-link .card-body * {
  text-decoration: none;
  color: inherit;
}

.person.card.card-link {
  display: block;
  transition: transform 160ms ease, box-shadow 160ms ease;
  text-decoration: none;
  -webkit-text-decoration-skip-ink: auto;
  border-radius: 0;
}

.person.card.card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(12,30,45,0.06);
}

.person.card.card-link:focus,
.person.card.card-link:focus-visible {
  outline: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person.card .card-body { padding: 16px; }
.person.card .card-actions { margin-top: 12px; }
.person.card .card-cta {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-weight: 700;
  border-radius: 0;
  text-decoration: none;
  box-sizing: border-box;
}

/* Bio page */
.bio-page .intro-box .intro-content {
  padding-left: var(--card-padding);
  padding-right: var(--card-padding);
  border-radius: 0;
}
.bio-page .intro-box .intro-content h1,
.bio-page .intro-box .intro-content .lead {
  margin-left: 0;
}

/* When interacting with the nav (hover or open), hide the "current" underline
   so the underline can transfer to the hovered/focused link. */
.site-nav:hover a[aria-current="page"],
.site-nav:hover a.current,
.site-nav.open a[aria-current="page"],
.site-nav.open a.current {
  text-decoration: none;
}

/* Ensure hovered/focused links (and the default current when not interacting) show underline */
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.site-nav a.current {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: force equal spacing between intro and grid cards, and remove extra top margin from following section
   Also collapse container padding on stacked sections so spacing matches grid gap.
*/
@media (max-width: 900px) {
  .intro-box {
    margin-bottom: var(--grid-gap); /* ensure intro-bottom equals grid gap token */
  }

  /* If intro uses .container, remove its bottom padding so it doesn't stack with the next container's top padding */
  .intro-box.container { padding-bottom: 0; }

  /* Remove top padding on the immediately following grid/container so spacing equals the grid gap */
  .intro-box.container + .home-grid.container,
  .intro-box.container + .grid,
  .page-intro.container + .home-grid.container {
    padding-top: 0;
  }

  /* neutralize the extra top margin that was stacking (restore visual parity for other section patterns) */
  .page-intro + .leadership,
  .page-intro + .people-grid,
  .intro-box + .leadership {
    margin-top: 0;
  }

  /* Ensure cards themselves don't add extra top margin */
  .grid .card { margin-top: 0; }
}