/* ============================================================
   Fountain Village HOA — stylesheet
   ------------------------------------------------------------
   You almost never need to edit this file. All the words on the
   site live in the .html files. This file only controls colors,
   type sizes and spacing.

   If you DO want to change a color, change it in the ":root"
   block just below — every page picks it up automatically.
   ============================================================ */

:root {
  --ink:        #16211e;   /* main text */
  --ink-soft:   #3d4a46;   /* secondary text */
  --green:      #0f4f47;   /* headings, buttons, links */
  --green-dark: #0a3b35;   /* hover state */
  --gold:       #8a5a00;   /* "board to confirm" notes */
  --gold-bg:    #fdf6e6;
  --paper:      #ffffff;   /* page background */
  --stone:      #f5f3ee;   /* section background */
  --line:       #ccc7bd;   /* borders */
  --focus:      #b8500a;   /* keyboard focus ring */
  --maxread:    65ch;
}

/* ---- Base -------------------------------------------------- */

html { font-size: 125%; -webkit-text-size-adjust: 100%; }  /* 1rem = 20px */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Verdana, Arial, sans-serif;
  font-size: 1rem;              /* 20px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-align: left;             /* never justify — hard to read */
}

h1, h2, h3 { line-height: 1.25; color: var(--green); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2rem; }         /* 40px */
h2 { font-size: 1.5rem; }       /* 30px */
h3 { font-size: 1.2rem; }       /* 24px */
p, li { max-width: var(--maxread); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); text-decoration-thickness: 3px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.2rem; }
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--green);
  padding: .8rem 1.2rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---- Header ------------------------------------------------ */

.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead-inner {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem;
  max-width: 1080px; margin: 0 auto;
}
.brand { text-decoration: none; color: var(--green); display: block; }
.brand:hover { color: var(--green-dark); }
.brand-name { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.brand-sub { font-size: .8rem; color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }

/* Phone and email always visible, as words, per accessibility guidance */
.reach { font-size: 1rem; line-height: 1.45; }
.reach a { display: inline-block; padding: 2px 0; font-weight: 700; }
.reach .reach-note { display: block; font-size: .8rem; color: var(--ink-soft); font-weight: 400; }

/* ---- Navigation: 7 items, no dropdowns, big targets --------- */

.nav { background: var(--green); }
.nav ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1080px;
  display: flex; flex-wrap: wrap;
}
.nav li { margin: 0; max-width: none; }
.nav a {
  display: block; color: #fff; text-decoration: none; font-weight: 600;
  padding: .8rem .82rem; min-height: 48px; font-size: .82rem;
  border-bottom: 5px solid transparent;
}
.nav a:hover { background: var(--green-dark); color: #fff; text-decoration: underline; }
.nav a[aria-current="page"] { background: var(--green-dark); border-bottom-color: #f0c56a; }

/* ---- Hero -------------------------------------------------- */

/* Green backdrop so a slow or missing photo never leaves a blank band */
.hero { background: var(--green); min-height: 200px; }
.hero img { width: 100%; height: 380px; max-height: 45vh; object-fit: cover; }
.identity {
  background: var(--stone); border-bottom: 1px solid var(--line);
  padding: .9rem 0; font-size: 1rem; color: var(--ink-soft);
}
.identity p { max-width: none; margin: 0; }

/* ---- Layout blocks ----------------------------------------- */

main { padding: 2.2rem 0 1rem; }
section { margin-bottom: 2.8rem; }
.section-head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; }
.lede { font-size: 1.1rem; }

/* Next Up — the three dated items */
.nextup { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.nextup .card {
  border: 2px solid var(--line); border-top: 6px solid var(--green);
  padding: 1.1rem 1.2rem; background: var(--paper);
}
.nextup .kicker {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 700; margin-bottom: .3rem;
}
.nextup .when { font-size: 1.15rem; font-weight: 700; color: var(--green); margin-bottom: .2rem; }
.nextup p { margin: 0; max-width: none; }

/* Quick-link tiles — whole tile is the target, text label always */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tile {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 96px; padding: 1rem 1.2rem;
  background: var(--stone); border: 2px solid var(--line);
  color: var(--green); text-decoration: none; font-weight: 700; font-size: 1.1rem;
}
.tile span { display: block; font-weight: 400; font-size: .9rem; color: var(--ink-soft); margin-top: .25rem; }
a.tile:hover { background: var(--green); color: #fff; border-color: var(--green); }
a.tile:hover span { color: #eaf2f0; }
.tile.static { cursor: default; }   /* information card, not a link */

/* Notice / reminder boxes */
.box { border: 2px solid var(--line); background: var(--stone); padding: 1.2rem 1.4rem; }
.box h2, .box h3 { margin-top: 0; }
.box p, .box li { max-width: none; }

.band { background: var(--green); color: #fff; padding: 1.8rem 0; }
.band h2 { color: #fff; }
.band p { color: #eaf2f0; max-width: none; }
.band a.btn { background: #fff; color: var(--green); }
.band a.btn:hover { background: #f0c56a; color: var(--green-dark); }

.btn {
  display: inline-block; background: var(--green); color: #fff; text-decoration: none;
  font-weight: 700; padding: .8rem 1.5rem; min-height: 48px; border: 2px solid var(--green);
}
.btn:hover { background: var(--green-dark); color: #fff; text-decoration: underline; }

/* "Board to confirm" — an honest placeholder, not invented information */
.confirm {
  background: var(--gold-bg); border-left: 6px solid var(--gold);
  padding: .9rem 1.1rem; margin: 0 0 1.2rem;
}
.confirm p, .confirm li { max-width: none; margin: 0; color: #4a3300; }
.confirm .tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .2rem;
}

/* ---- Tables (contact router, documents, calendar) ---------- */

.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.4rem; font-size: .95rem; }
caption { text-align: left; font-weight: 700; color: var(--green); padding-bottom: .5rem; font-size: 1.1rem; }
th, td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
th { background: var(--stone); color: var(--green); font-weight: 700; }
tr:hover td { background: #fbfaf7; }
td a { font-weight: 600; }

/* ---- Documents list ---------------------------------------- */

.doclist { list-style: none; padding: 0; }
.doclist li { border-bottom: 1px solid var(--line); padding: .9rem 0; max-width: none; }
.doclist a { font-size: 1.05rem; font-weight: 700; }
.doclist .meta { display: block; font-size: .85rem; color: var(--ink-soft); }

/* ---- Accordion (native <details>, no JavaScript) ----------- */

details {
  border: 2px solid var(--line); border-bottom-width: 2px;
  margin-bottom: .8rem; background: var(--paper);
}
summary {
  cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; color: var(--green);
  min-height: 48px; list-style-position: outside;
}
summary:hover { background: var(--stone); }
details[open] summary { background: var(--stone); border-bottom: 1px solid var(--line); }
details .answer { padding: 1rem 1.1rem 0; }
details .answer :last-child { margin-bottom: 1rem; }

/* ---- Steps (architectural review flow) --------------------- */

ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.4rem 3.4rem; max-width: none; margin: 0;
  border-left: 2px solid var(--line); margin-left: 1.2rem;
}
ol.steps > li::before {
  content: counter(step); position: absolute; left: -1.25rem; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
ol.steps > li:last-child { border-left-color: transparent; }
ol.steps h3 { margin-top: .2rem; }

/* ---- Photo grid -------------------------------------------- */

.photos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line); }

/* ---- People ------------------------------------------------ */

.people { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.person { border: 2px solid var(--line); padding: 1.1rem 1.2rem; background: var(--paper); }
.person h3 { margin-bottom: .1rem; }
.person .role { color: var(--ink-soft); font-weight: 600; margin-bottom: .5rem; }
.person p { max-width: none; margin: 0; }

/* ---- Footer ------------------------------------------------ */

.foot { background: var(--stone); border-top: 4px solid var(--green); margin-top: 2rem; padding: 2rem 0 2.5rem; }
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.foot h2 { font-size: 1.1rem; }
.foot p, .foot li { font-size: .9rem; max-width: none; }
.foot ul { list-style: none; padding: 0; }
.updated {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-soft);
}

/* ---- Print (residents in this community print pages) ------- */

@media print {
  .nav, .hero, .band, .skip, .tiles { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .box, .card, .confirm { border: 1px solid #000; }
}

/* ---- Motion: none by default, and honored anyway ----------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}