/* Minimal styles for the static Curious Capital prototype */
:root{
  /* Page background (requested) */
  --bg:#eeebfa;
  --text:#0f172a;
  --muted:#6b7280;
  /* Brand accent (purple from logo) */
  --accent:#6b2c8e;
  /* Secondary brand (leaf green) */
  --brand-green:#7bb13c;
  /* Surfaces and borders tuned to sit on the light lavender page background */
  --surface:#ffffff;    /* primary surface color for controls and overlays */
  --card-bg:#f6f3fb;    /* subtle off-white with lavender tint for cards */
  --border:#e6e0f4;     /* soft lavender-tinted border */
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--text); background:var(--bg); line-height:1.5}
.container{max-width:920px; margin:0 auto; padding:28px}
.site-header{border-bottom:1px solid var(--border)}
/* Header layout: center brand and place nav below it */
.site-header .container{display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; gap:10px; padding:18px 0}
.brand{font-weight:700; color:var(--text); text-decoration:none}
.brand img,.brand-logo{height:250px; width:auto; display:block}
.site-nav a{color:var(--text); text-decoration:none; font-size:18px; font-weight:600; letter-spacing:0.02em}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--accent)}
.brand:hover,.brand:focus-visible{color:var(--accent)}
.site-nav a:focus-visible,.brand:focus-visible{outline:3px solid var(--brand-green); outline-offset:2px}
.site-nav a.muted{color:var(--muted)}
.site-nav a.muted:hover,.site-nav a.muted:focus-visible{color:var(--accent)}
h1{font-size:28px; margin:0 0 12px}
h2{font-size:20px; margin-top:24px}
/* default link styling in content */
a{color:var(--accent)}
a:hover{ text-decoration:underline; text-decoration-color:var(--brand-green) }

/* Remove underlines from card titles (e.g., philanthropy page) while keeping
   the global hover behavior for other links. This targets anchors inside
   heading elements that live in .card. */
.card h2 a,
.card h3 a{
  text-decoration: none;
}
.card h2 a:hover,
.card h3 a:hover,
.card h2 a:focus,
.card h3 a:focus{
  text-decoration: none;
}
.grid{display:flex; flex-wrap:wrap; gap:18px; justify-content:center}
.grid .card{flex:0 0 calc(33.333% - 12px); min-width:220px; max-width:400px; min-height:280px}
@media (max-width:880px){
  .grid .card{flex:0 0 calc(50% - 9px)}
}
@media (max-width:640px){
  .grid .card{flex:0 0 100%}
}
.list{display:flex; flex-direction:column; gap:18px}
.list .avatar{height:120px}

/* Back-to-top wrapper + button: wrapper is fixed and will be positioned beside the centered .container via JS */
.back-to-top-wrap{
  position: fixed;
  bottom: 140px; /* raised slightly so the control sits a bit higher */
  right: 24px; /* default horizontal fallback; JS will set left when possible */
  z-index: 1000;
  pointer-events: none; /* disabled when hidden */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.back-to-top-wrap.visible{ pointer-events: auto; }

.back-to-top{
  position: static;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
  font-size: 20px;
  line-height: 1;
}
.back-to-top-wrap.visible .back-to-top{ opacity:1; transform:translateY(0); }
.back-to-top:focus{ outline:3px solid rgba(255,255,255,0.9); outline-offset:3px }
.back-to-top svg{ display:block }

.back-to-top-label{
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--muted);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  text-align:center;
}
.back-to-top-wrap.visible .back-to-top-label{ opacity:1; transform:translateY(0); }

@media (max-width:640px){
  .back-to-top-wrap{ right:16px; bottom:110px }
  .back-to-top{ width:48px; height:48px; font-size:18px }
  /* Reduce card padding on small screens to save vertical space */
  .card{ padding:20px }
}
.card{border:1px solid var(--border); padding:28px; border-radius:20px; background:var(--card-bg); box-shadow: 0 6px 20px rgba(15,23,42,0.06);} 

/* Increase vertical spacing for stacked cards (used on Lines of Business page)
   Targets cards that are direct children of the page .container so it doesn't
   affect grid/list layouts on other pages. */
main.container > article.card:not(:last-child){
  margin-bottom:28px;
}

/* Center staff name and role inside person cards; leave bio paragraphs left-aligned */
.card > h2,
.card > h3,
.card > p.muted{
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

/* Slightly reduce the top margin of h2 inside cards so it sits closer to the avatar */
.card > h2{ margin-top:12px; margin-bottom:12px }
/* Avatar wrapper — keeps the avatar centered in the card and enforces a circular mask */
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  overflow:hidden;
  background:var(--surface);
  display:block;
  margin:0 auto 12px;
  flex-shrink:0;
}
/* actual <img> inside avatar (if present) */
.avatar img, .avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* initials placeholder when no image is available */
.avatar-initials{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:32px;
}
.muted{color:var(--muted)}
.site-footer{border-top:1px solid var(--border); margin-top:40px; padding:18px 0; text-align:center}
.contact-form{max-width:520px; display:grid; gap:12px}
.contact-form label{display:flex; flex-direction:column; font-size:14px}
input, textarea{padding:10px; border:1px solid var(--border); border-radius:6px}
input:focus, textarea:focus{border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(123,177,60,0.25); outline:none}
button{background:var(--accent); color:white; border:none; padding:10px 14px; border-radius:6px; cursor:pointer}
button:hover{background:#5f257e}
button:focus-visible{outline:3px solid var(--brand-green); outline-offset:2px}

/* Hamburger menu */
.menu-toggle{ display:none; margin-left:0; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; z-index:1001 }
.menu-toggle:hover{ border-color:#d1d5db; background:#f8fafc }
.menu-toggle svg{ width:22px; height:22px; display:block }
/* Smooth show/hide for hamburger: toggle the .hidden class instead of display:none to allow transitions */
.menu-toggle{ transition: opacity .18s ease, transform .18s ease; }
.menu-toggle.hidden{ opacity:0; transform:translateY(-6px); pointer-events:none }

/* Desktop defaults: show inline nav centered under the brand */
.site-nav{ display:flex; gap:20px; justify-content:center; align-items:center; position:static }

/* Mobile dropdown behavior */
@media (max-width: 880px){
  /* Show hamburger on mobile and center it under the brand */
  .menu-toggle{ display:inline-flex; margin-left:0; align-self:center }
  /* Full-screen overlay menu */
  .site-nav{ position:fixed; inset:0; background:var(--surface); padding:96px 24px 24px; display:flex; flex-direction:column; gap:14px; z-index:900; opacity:0; visibility:hidden; transform:translateX(24px); pointer-events:none; transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s }
  .site-nav.open{ opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; transition-delay:0s }
  .site-nav a{ margin:0; padding:12px 6px; font-size:20px; font-weight:600; letter-spacing:0.02em }
  .site-nav a.muted{ font-weight:600 }
}
.note{padding:12px; border-left:3px solid var(--brand-green); background:var(--surface)}
/* Keep light background even if the user prefers dark mode */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#eeebfa;
    --text:#0f172a;
    --muted:#6b7280;
    --accent:#6b2c8e;
    --brand-green:#7bb13c;
    --surface:#ffffff;
    --card-bg:#f6f3fb;
    --border:#e6e0f4;
  }
  body{background:var(--bg); color:var(--text)}
  .card{background:var(--card-bg); border-color:var(--border)}
}