/* CHANGE LOG
   File: /var/www/html/sand.nsgia.com/static/css/site.css
   Purpose: Institutional styling for the Sands Drive / Albany State University
            pre-validation microsite (dormitory + technical/robotics center).
            Adapted from mobile.nsgia.com/static/css/site.css (accordion sidebar
            + section/card/table/figure structure) — same class structure carries
            over unchanged; palette and imagery to be set for this site, not
            inherited from Serenity Village's Alabama branding.
   Version History:
   2026-08-11 v1.0 - Forked from mobile.nsgia.com v1.0 (itself forked from benson) */

: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%; background:var(--panel); line-height:0; }
.hero-img{ width:100%; height:auto; 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);}
/* uniform 2-up: two images of matching aspect ratio, equal cell height */
.imggrid-2{ grid-template-columns:1fr 1fr; max-width:880px; }
.imggrid-2 img{ aspect-ratio:2.08/1; object-fit:cover; }
/* full-width annotated figure (site plan / land-use maps that carry detail) */
.fig-wide{ margin:16px 0 20px; max-width:880px; }
.fig-wide img{ width:100%; height:auto; border:1px solid var(--line); display:block; background:var(--panel); }
.fig-wide figcaption{ font-size:12.5px; color:var(--gray); margin-top:6px; }

.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; }
  /* Wide tables (e.g. the 5-column parcel table) scroll within their own
     width on narrow screens instead of pushing the whole page wider than the
     viewport. Added 2026-08-12 during the factual-reset build - the parcel
     table was causing horizontal page overflow at 390px. */
  table.t{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; font-size:13.5px; }
  table.t th,table.t td{ padding:7px 10px; }
}

/* ===========================================================================
   Below: ported from nsgia.com credentials page (mh/nsgia3), 2026-08-09.
   Three source files merged as-is (credentials_story.css, projects_completed.css,
   team_cards.css). patent_wall.css NOT ported - it styles a superseded
   .patent-grid/.patent-item markup nsgia3's own partial no longer uses (replaced
   2026-07-23 by an inline <style> in the partial itself, which _credentials.html
   carries inline too, matching source). All var(--color-*/--font-*) references
   below have literal fallbacks and don't depend on nsgia3's separate portal.css
   token file. Class names verified against existing site.css - no collisions.
   =========================================================================== */

/* ---- credentials_story.css ---- */
.credentials-byline{ text-align:center; margin:0 0 2rem; color:#4a5568; font-size:.95rem; }
.credentials-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; margin-bottom:2rem; text-align:center; max-width:900px; }
.metric{ padding:1.5rem 1rem; background:linear-gradient(135deg,#1a365d 0%,#2c5282 100%); border-radius:8px; color:#fff; }
.metric-number{ display:block; font-size:2rem; font-weight:700; margin-bottom:.25rem; }
.metric-label{ display:block; font-size:.8rem; opacity:.9; text-transform:uppercase; letter-spacing:.5px; }
.credentials-detail{ background:#f8f9fa; padding:1.5rem; border-radius:8px; max-width:900px; }
.credentials-detail p{ margin-bottom:1rem; line-height:1.6; }
.credentials-detail p:last-child{ margin-bottom:0; }
@media (max-width:768px){
  .credentials-metrics{ grid-template-columns:repeat(2,1fr); }
  .metric-number{ font-size:1.5rem; }
  .imggrid-2{ grid-template-columns:1fr; }
}

/* ---- projects_completed.css ---- */
.pc-lead{ color:#666; font-size:.98rem; margin:0 0 1.5rem; line-height:1.6; max-width:900px; }
.pc-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin:1rem 0 2rem; max-width:900px; }
.pc-metric{ background:linear-gradient(135deg,#1a365d 0%,#2c5282 100%); color:#fff; padding:1.5rem; border-radius:8px; text-align:center; }
.pc-metric .pc-n{ display:block; font-size:2rem; font-weight:700; line-height:1.1; }
.pc-metric .pc-l{ display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; opacity:.92; margin-top:.35rem; }
.pc-h4{ color:#2c5282; font-size:1.3rem; font-weight:600; margin:2rem 0 .75rem; padding-bottom:.4rem; border-bottom:2px solid #e2e8f0; }
.pc-h5{ color:#2c5282; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:1.25rem 0 .6rem; }
.pc-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.pc-table th{ background:#f8fafc; font-weight:700; text-align:left; padding:.65rem .9rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid #e2e8f0; }
.pc-table td{ padding:.7rem .9rem; border-bottom:1px solid #e2e8f0; font-size:.97rem; vertical-align:top; }
.pc-table tr:last-child td{ border-bottom:none; }
.pc-table tr:hover{ background:#f8fafc; }
.pc-sf{ color:#666; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pc-role{ display:inline-block; padding:.18rem .55rem; border-radius:3px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pc-role-dev{ background:#dbeafe; color:#1e40af; }
.pc-role-owner{ background:#dcfce7; color:#166534; }
.pc-role-broker{ background:#fef3c7; color:#92400e; }
.pc-role-consult{ background:#f3e8ff; color:#6b21a8; }
.pc-role-blackstar{ background:#1f2937; color:#f9fafb; }
.pc-role-connell{ background:#e0e7ff; color:#3730a3; }
.pc-rollup{ margin:1.25rem 0 0; color:#666; font-style:italic; font-size:.95rem; }
@media (max-width:768px){
  .pc-h4{ font-size:1.1rem; }
  .pc-table th,.pc-table td{ padding:.5rem .55rem; font-size:.88rem; }
  .pc-role{ font-size:.65rem; }
  .pc-metric .pc-n{ font-size:1.6rem; }
}

/* ---- patent wall (inline in _credentials.html source, mirrored here) ---- */
.patent-intro{ color:#6c757d; margin-bottom:1.5rem; font-size:.95rem; max-width:900px; }
.patent-montage-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-top:1rem; }
.patent-montage-item{ border:1px solid #d4e8ed; border-radius:8px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.patent-montage-item img{ width:100%; height:190px; object-fit:contain; background:#f9fbfc; padding:1.25rem; border-bottom:1px solid #eef3f5; }
.patent-montage-caption{ padding:.6rem .8rem; }
.patent-montage-caption a{ display:block; font-weight:600; font-size:.85rem; color:#1a365d; text-decoration:none; }
.patent-montage-caption a:hover{ text-decoration:underline; }
.patent-montage-caption span{ display:block; font-size:.8rem; color:#5a7a8a; margin-top:.15rem; }

/* ---- team_cards.css ---- */
.team-group-h{ color:#2c5282; margin:2rem 0 1rem; font-size:1.15rem; }
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin:0 0 1rem; }
.team-member{ background:#fff; border:1px solid #e9ecef; border-radius:8px; padding:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.team-name{ font-weight:600; color:#2c5282; margin-bottom:.35rem; font-size:1.2rem; }
.team-title{ color:#1a365d; font-size:1rem; margin-bottom:.3rem; font-weight:600; }
.team-tags{ color:#c53030; font-size:.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.85rem; }
.team-description{ color:#495057; line-height:1.65; font-size:.92rem; }
.team-description p{ margin-bottom:.85rem; }
.team-description p:last-child{ margin-bottom:0; }
@media (max-width:768px){
  .team-grid{ grid-template-columns:1fr; }
  .team-member{ padding:1.25rem; }
}

/* ===========================================================================
   Visual polish pass — WORK-ORDER-VISUAL-POLISH.md, 2026-08-09.
   =========================================================================== */

/* Item 1: image click affordance (fixes reported bug — no hover cue on clickable images) */
figure img, .imggrid img, .zoomable{ cursor:zoom-in; transition:opacity .15s, box-shadow .15s; }
figure img:hover, .imggrid img:hover, .zoomable:hover{ opacity:.92; box-shadow:0 2px 12px rgba(0,0,0,.18); }

/* Item 4: focus states for keyboard/screen-reader nav */
a:focus-visible, summary:focus-visible, img:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* Item 5: card hover consistency (matches nsgia.com source; lost in the CSS merge) */
.team-member, .patent-montage-item{ transition:box-shadow .2s, transform .2s; }
.team-member:hover, .patent-montage-item:hover{ box-shadow:0 4px 16px rgba(44,82,130,.15); transform:translateY(-2px); }

/* Item 8: table.t (financial tables) matched to .pc-table treatment.
   Overrides the original navy/white header (site.css line ~125) with the same
   light-header style used by the imported tables, for a consistent look across
   all ~8 tables on the page. color:#333 added — without it the light background
   would sit under the original white header text and be unreadable. */
.pc-table, table.t{ margin-bottom:1.5rem; }
table.t th{ background:#f8fafc; color:#333; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; }
table.t tr:hover{ background:#f8fafc; }

/* Item 11: print stylesheet — this proposal will be printed/PDF'd by MHA staff */
@media print{
  aside, .accordion, .btnrow, .site-foot{ display:none !important; }
  body, .page{ margin:0; padding:0; background:#fff; color:#000; }
  .group, .group.alt{ background:#fff !important; padding:0 0 12pt; break-inside:avoid; }
  h2, h3{ break-after:avoid; }
  table.t, .pc-table, figure, .team-member{ break-inside:avoid; }
  a{ text-decoration:none; color:#000; }
  img{ max-width:100% !important; }
}