/* Welaka Golf Carts — shared styling for long-form content + resources hub.
   Loaded in addition to styles.css on /resources/, /faq/, and the article pages. */

.article{max-width:760px; margin:0 auto; font-size:18px; line-height:1.75; color:#2b2b2b}
.article > p{margin:0 0 20px}
.article-lead{font-size:20px; line-height:1.6; color:var(--navy); font-weight:600; margin:0 0 24px}
.article h2{font-family:var(--display); color:var(--navy); font-size:clamp(24px,3.4vw,32px); line-height:1.18; margin:46px 0 14px}
.article h3{font-family:var(--display); color:var(--navy); font-size:20px; margin:30px 0 10px}
.article a{color:var(--green-800); font-weight:700; text-decoration:underline; text-underline-offset:2px}
.article a:hover{color:var(--green-700)}
.article ul,.article ol{margin:0 0 22px; padding-left:22px}
.article li{margin-bottom:9px}
.article strong{color:var(--navy)}
.article hr{border:none; border-top:1px solid var(--line); margin:42px 0}

/* Wide, horizontally scrollable tables — the most citable block on these pages */
.article-table{max-width:900px; margin:28px auto; overflow-x:auto; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 44px rgba(15,17,21,.06); -webkit-overflow-scrolling:touch}
.article-table table{width:100%; border-collapse:collapse; background:#fff; font-size:15.5px; min-width:520px}
.article-table th,.article-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.article-table thead th{background:var(--navy); color:#fff; font-family:var(--display); font-weight:700; letter-spacing:.3px; position:sticky; top:0}
.article-table tbody tr:last-child td{border-bottom:none}
.article-table tbody tr:nth-child(even) td{background:#F7FAFC}
.article-table td:first-child{font-weight:600; color:var(--navy)}

/* Callout / lead box */
.article-callout{background:var(--green-100); border:1px solid var(--green-300); border-left:5px solid var(--cyan); border-radius:14px; padding:20px 24px; margin:28px 0}
.article-callout p{margin:0 0 10px} .article-callout p:last-child{margin:0}
.article-callout strong{color:var(--navy)}

/* Sources + disclaimer + updated line */
.article-sources h2{font-size:20px}
.article-sources ul{font-size:15px; color:var(--muted)}
.article-updated{font-size:13.5px; color:var(--muted); font-style:italic; margin-top:8px}

/* Read-next buttons row */
.read-next{display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 0}

/* Town of Welaka PD guide embed */
.town-guide{max-width:900px; margin:0 auto}
.town-guide figure{margin:28px 0}
.town-guide img{width:100%; height:auto; border-radius:14px; border:1px solid var(--line); background:#fff; box-shadow:0 16px 44px rgba(15,17,21,.08); display:block}
.town-guide figcaption{font-size:14px; color:var(--muted); margin-top:12px; text-align:center}
.town-guide figcaption a{color:var(--green-800); font-weight:700}
.dl-btn-row{margin:22px 0; text-align:center}

/* FAQ page: reuse the homepage <details> accordion, just widen it */
.faq-page{max-width:760px; margin:0 auto}

/* Resources hub — square cards */
.res-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:22px; max-width:1120px; margin:0 auto}
.res-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px; text-decoration:none; box-shadow:0 14px 34px rgba(15,17,21,.06); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.res-card:hover{transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 24px 50px rgba(15,17,21,.12)}
.res-card .res-tag{font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy-mid); margin-bottom:14px}
.res-card h3{font-family:var(--display); color:var(--navy); font-size:21px; line-height:1.2; margin:0 0 10px}
.res-card p{color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 18px; flex:1}
.res-card .res-go{font-weight:800; color:var(--green-800); font-size:13px; text-transform:uppercase; letter-spacing:1.2px}
.res-card.res-featured{background:linear-gradient(120deg,#122A4E 0%,#173A6B 72%); border-color:transparent}
.res-card.res-featured .res-tag{color:var(--cyan)}
.res-card.res-featured h3{color:#fff}
.res-card.res-featured p{color:#C6DCF2}
.res-card.res-featured .res-go{color:var(--cyan)}
.res-group-title{font-family:var(--display); color:var(--navy); font-size:22px; margin:0 0 20px; text-align:center}
.res-group + .res-group{margin-top:56px}