/* CHANGE LOG
   File: /var/www/html/mobile.nsgia.com/static/css/site.css
   Purpose: Institutional-but-warm styling for the Serenity Village microsite.
            Adapted from benson.nsgia.com/static/css/site.css — same class
            structure (sidebar/page/section/hero/cards/tables/figures), palette
            shifted from logistics-navy to a community/housing register (deep
            green + warm terracotta) and workbook-modal rules dropped (not used
            on this site).
   Version History:
   2026-08-07 v1.0 - Initial creation, forked from benson v1.0 */

:root{
  --navy:#1e3a2f; --navy-deep:#152a22; --green:#c17f3e; --green-soft:#f3ece1;
  --ink:#25302a; --gray:#5c655d; --line:#c7cec6; --line-soft:#e5e9e2;
  --panel:#f5f7f4; --white:#ffffff; --sidebar-w:248px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--white);
  font-family:Georgia,"Times New Roman",serif; line-height:1.6; font-size:17px;
}
h1,h2,h3,.eyebrow,.label,.brand p,.btn,nav a,th{
  font-family:Arial,Helvetica,sans-serif;
}

/* ---- sidebar ---- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh;
  background:var(--navy-deep); color:#e4ece7; padding:28px 22px; overflow-y:auto;
}
.sidebar .brand .eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:#a9c2b3;
}
.sidebar .brand h1{ margin:6px 0 2px; font-size:27px; color:#fff; letter-spacing:.01em; line-height:1.15;}
.sidebar .brand p{ margin:0 0 22px; font-size:13px; color:#b6ccbe; letter-spacing:.06em;}

/* ---- accordion nav (Quadsonic pass 1) ---- */
.accordion{ display:flex; flex-direction:column; border-top:1px solid #274539; }
.accordion .top-link{
  color:#fff; text-decoration:none; font-size:14px; font-weight:700; padding:11px 0;
  border-bottom:1px solid #21392f; letter-spacing:.01em;
}
.accordion .top-link:hover{ color:var(--green); }
.acc-item{ border-bottom:1px solid #21392f; }
.acc-item summary{
  cursor:pointer; list-style:none; color:#fff; font-size:14px; font-weight:700;
  padding:11px 0; letter-spacing:.01em; display:flex; justify-content:space-between;
  align-items:center;
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary::after{ content:"+"; color:#a9c2b3; font-weight:400; font-size:16px; }
.acc-item[open] summary::after{ content:"\2212"; }
.acc-item summary:hover{ color:var(--green); }
.acc-body{ display:flex; flex-direction:column; padding:0 0 10px 4px; }
.acc-body a{
  color:#c7d9cd; text-decoration:none; font-size:12.5px; padding:6px 0 6px 10px;
  border-left:2px solid #2a4a3c;
}
.acc-body a:hover{ color:#fff; border-left-color:var(--green); }

/* ---- page ---- */
.page{ margin-left:var(--sidebar-w); padding:0 0 60px; }
section{ padding:46px 56px; border-bottom:1px solid var(--line-soft); scroll-margin-top:10px;}
section.alt{ background:var(--panel); }
.label{
  text-transform:uppercase; letter-spacing:.13em; font-size:11px; color:var(--green);
  font-weight:bold; margin:0 0 8px;
}
h2{ color:var(--navy); font-size:26px; margin:0 0 22px; font-weight:700; letter-spacing:.01em;}
h3{ color:var(--navy); font-size:17px; margin:22px 0 8px; }
/* subsection rhythm inside a merged group section (Quadsonic pass 1) --
   a light rule + extra top space marks each subtopic without a full section
   break, so five grouped sections don't read as one undifferentiated wall. */
.group > h3{ margin-top:32px; padding-top:22px; border-top:1px solid var(--line-soft); }
.group > h3:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.fig-inline{ margin:14px 0 18px; max-width:520px; }
.fig-inline img{ width:100%; border:1px solid var(--line); display:block; background:var(--panel); }
.fig-inline figcaption{ font-size:12.5px; color:var(--gray); margin-top:6px; }
p{ margin:0 0 14px; max-width:62ch; }
.lead{ font-size:19px; color:var(--ink); }
.callout{
  border-left:3px solid var(--green); background:var(--green-soft);
  padding:12px 18px; margin:18px 0; font-size:16px; max-width:62ch;
}
.muted{ color:var(--gray); font-size:14px; }
.todo{
  border-left:3px solid #b02a2a; background:#fbecec; color:#7a1f1f;
  padding:10px 16px; margin:14px 0; font-size:13.5px; font-family:Arial,Helvetica,sans-serif;
  max-width:62ch;
}

/* ---- hero (Quadsonic pass 1: simplified opening screen) ---- */
.hero{ padding:0; border-bottom:1px solid var(--line);}
.hero-img-wrap{ width:100%; max-height:420px; overflow:hidden; background:var(--panel); line-height:0; }
.hero-img{ width:100%; height:100%; max-height:420px; object-fit:cover; display:block; }
.hero .hero-body{ padding:34px 56px 40px; max-width:820px; }
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:.13em; font-size:11px; color:var(--green);
  font-weight:bold; margin:0 0 6px;
}
.hero h1{ margin:0 0 4px; font-size:clamp(30px,4vw,42px); color:var(--navy); font-weight:800; letter-spacing:.01em;}
.hero .hero-loc{ margin:0 0 16px; font-size:16px; color:var(--gray); letter-spacing:.02em; font-family:Arial,Helvetica,sans-serif;}
.hero .hero-desc{ font-size:18px; line-height:1.6; max-width:68ch; color:var(--ink); }
.btnrow{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-block; padding:10px 16px; font-size:13px; letter-spacing:.03em;
  text-decoration:none; border:1px solid var(--navy); color:var(--navy);
  background:var(--white);
}
.btn:hover{ background:var(--navy); color:#fff; }
.btn.solid{ background:var(--navy); color:#fff; }
.btn.solid:hover{ background:var(--navy-deep); }

/* ---- cards ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card{ border:1px solid var(--line); background:var(--white); padding:18px 18px 20px; }
.card .k{ text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--green); font-weight:bold;}
.card h3{ margin:6px 0 8px; font-size:16px; }
.card p{ font-size:14.5px; margin:0; color:var(--gray); }

/* ---- tables ---- */
table.t{ border-collapse:collapse; width:100%; max-width:760px; margin:8px 0 14px; font-size:15px;}
table.t th,table.t td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
table.t th{ background:var(--navy); color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
table.t tr:nth-child(even) td{ background:#fafcfa; }

/* ---- figures ---- */
figure{ margin:18px 0; }
figure img{ width:100%; max-width:860px; border:1px solid var(--line); display:block; background:var(--panel); }
figcaption{ font-size:12.5px; color:var(--gray); margin-top:6px; }
.imggrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:880px;}
.imggrid img{ width:100%; border:1px solid var(--line); background:var(--panel);}

/* ---- team ---- */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; max-width:900px; }
.team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line); background:var(--panel); margin-bottom:10px; }
.team-card h3{ margin:0 0 2px; }
.team-card .role{ font-size:13px; color:var(--green); font-weight:700; margin-bottom:6px; }
.team-card p{ font-size:14px; color:var(--gray); }

.contact-block{ font-size:16px; line-height:1.8; }
.site-foot{ padding:22px 56px; color:var(--gray); font-size:12px; letter-spacing:.04em; text-transform:uppercase;}

/* ---- mobile ---- */
@media (max-width:880px){
  .sidebar{ position:static; width:100%; height:auto; padding:18px 22px; }
  .sidebar nav{ flex-flow:row wrap; border-top:1px solid #25405f; gap:0 16px; }
  .sidebar nav a{ border-bottom:none; padding:6px 0; }
  .page{ margin-left:0; }
  section,.hero .hero-body,.site-foot{ padding-left:22px; padding-right:22px; }
  .hero h2{ font-size:27px; }
}