/*
    File: style.css
    Project: Windwood Village HOA
    Purpose: Clean, modern styling with responsive layout, grid gallery, and accessible nav.

    Change Log:
      - 2025-08-11 13:55 ET | Rev 2.0
        * Introduced CSS variables, container, card styles, grid-based gallery.
        * Sticky header with mobile menu; unified look across pages.
        * Lightbox styles integrated.
*/

/* ---------- CSS Variables (Theme) ---------- */
:root{
  --brand: #1c5d7a;
  --brand-2: #12485e;
  --accent: #2aa876;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #223;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--brand); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }
.muted{ color: var(--muted); }

.container{
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.header-inner{
  display:flex; align-items:center; gap:16px; padding:10px 0;
}
.brand img{
  max-height: 72px;
}

/* Desktop nav */
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.site-nav a{
  display:inline-block; padding:10px 14px; border-radius: 10px;
  color:#0f172a;
}
.site-nav a[aria-current="page"]{
  background: var(--brand); color:#fff; font-weight:600;
}
.site-nav a:hover{ background: var(--brand-2); color:#fff; }

/* Mobile nav toggle */
.nav-toggle{
  display:none; background:transparent; border:0; padding:8px; margin-left:auto; cursor:pointer;
}
.nav-toggle:focus{ outline:2px solid var(--brand); border-radius:8px; }
.nav-toggle-bar{
  display:block; width:26px; height:3px; background:#111; margin:4px 0; border-radius:2px;
}

/* Responsive nav */
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .site-nav{ position:absolute; left:0; right:0; top:100%; padding:8px 0; background:var(--surface); box-shadow: var(--shadow); display:none; }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; gap:0; }
  .site-nav a{ border-radius:0; padding:12px 18px; }
}

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fa 100%);
  border-bottom: 1px solid var(--border);
}
.hero-inner{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:28px; padding: 28px 0;
  align-items: center;
}
.hero-text h1{ margin:0 0 8px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--brand-2); }
.hero-text p{ margin:0 0 16px; color:#334155; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-block; background:var(--brand); color:#fff; padding:10px 16px; border-radius: 10px; font-weight:600;
  box-shadow: 0 3px 10px rgba(28,93,122,.15);
}
.btn:hover{ background: var(--brand-2); text-decoration:none; }
.btn-outline{
  background: transparent; color: var(--brand); border:1px solid var(--brand);
}
.btn-outline:hover{
  background: var(--brand); color:#fff;
}
.hero-media img{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
}

/* ---------- Sections & Cards ---------- */
.section{ padding: 28px 0; }
.section-title{ margin:0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color:#0f172a; }
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px;
  box-shadow: var(--shadow);
}
.section-cta{ margin-top:12px; }
.link-arrow{ font-weight:600; }
.link-arrow::after{ content:" →"; }

/* ---------- Documents ---------- */
.doc-list{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:10px;
  padding:0; margin:0; list-style:none;
}
.doc-list a{
  display:block; padding:12px 14px; background:var(--surface); border:1px solid var(--border);
  border-radius: 10px; text-decoration:none;
}
.doc-list a:hover{ background:#f0f6fa; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gallery-item{
  background:var(--surface); border:1px solid var(--border); border-radius: 12px; overflow:hidden;
  box-shadow: var(--shadow);
}
.gallery-item img{ width:100%; height:auto; cursor: zoom-in; display:block; }
.gallery-item figcaption{
  padding:8px 10px; font-size:.9rem; color: var(--muted); border-top:1px solid var(--border);
}

/* ---------- Lightbox ---------- */
body.no-scroll{ overflow:hidden; }
#lightbox{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.85); z-index: 2000; padding: 1rem;
}
#lightbox.open{ display:flex; }
#lightbox img{
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  background: #111;
}
#lightboxCaption{
  position:absolute; bottom:0.8rem; left:0; right:0;
  text-align:center; color:#fff; font-size: .95rem; padding:.25rem .5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.lb-btn{
  position:absolute; border:0; cursor:pointer;
  background: rgba(0,0,0,.6); color:#fff;
  width:3rem; height:3rem; border-radius: 999px;
  font-size: 1.75rem; line-height:3rem; text-align:center; user-select:none;
}
.lb-btn:focus{ outline:2px solid #fff; outline-offset:2px; }
.lb-close{ top:1rem; right:1rem; }
.lb-prev{ left:1rem; top:50%; transform: translateY(-50%); }
.lb-next{ right:1rem; top:50%; transform: translateY(-50%); }

/* ---------- Updates page tools ---------- */
.updates-toolbar{
  display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap;
}
#updatesFilter{
  flex:1; min-width: 220px; max-width: 420px;
  padding:10px 12px; border:1px solid var(--border); border-radius: 10px;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--surface); border-top:1px solid var(--border); margin-top: 24px;
}
.site-footer .container{ padding: 18px 0; text-align:center; }

/* ---------- A11y helpers ---------- */
.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;
}
/* =========================================================
   Contact Page Enhancements
   Added: 2026-03-29
   Purpose:
   - Cleaner card layout for contact info
   - Better map framing
   - Directions button spacing
   ========================================================= */

.contact-card {
    max-width: 560px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    padding: 1rem 1.1rem;
    margin-top: 1rem;
}

.contact-row + .contact-row {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.contact-value {
    display: block;
    word-break: break-word;
}

.map-wrap {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    margin-top: 1rem;
}

.map-wrap iframe {
    display: block;
    width: 100%;
}

.map-actions {
    margin-top: 1rem;
}