/*
Theme Name: LFW County Classic
Theme URI: https://lfw.com/
Author: LFW.com LLC
Author URI: https://lfw.com/
Description: A classic theme for county governments. Pages are built from sections in the LFW Page Builder box (flexible content, no block editor): an opening with the county's name and three top tasks beside a photo, a dated county calendar, How do I, property tax and records panels with lookups, upcoming meetings, the board with its district map, news and departments. Inner pages add a meetings center filtered by board, year and agenda item, a document center, an address lookup, a contact directory, jobs and request forms. Lookups, filters and search run in the visitor's browser and send nothing. Alerts come from LFW Site Alerts, printed into the page. Light color scheme only. Lato headings and Source Sans 3 text, self-hosted. Built for WCAG 2.2 AA.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lfw-county-classic
*/

/* Lato headings, Source Sans 3 text. Lake slate blue, barn red accent, wheat alert. Light only. */
:root {
  --paper: #FBFAF6;
  --card: #FFFFFF;
  --ink: #1A2129;
  --muted: #4A5560;
  --lake: #1E4F7A;
  --link: #1E4F7A;
  --red: #A42A1E;
  --rule: #DAD4C6;
  --tint: #EEF2F5;
  --field: #F1EFE6;
  --wheat: #F5E6BC;
  --wheat-rule: #E2CC8C;
  --band: #1E4F7A;
  --band-fg: #FFFFFF;
  --band-2: #163B5C;
  --btn: #1E4F7A;
  --btn-fg: #FFFFFF;
  --btn-hover: #163B5C;
  --tag-bg: #A42A1E;
  --tag-fg: #FFFFFF;
  --focus: #A42A1E;
  --focus-band: #F5E6BC;
  /* map and seal */
  --m-a: #E4EBDD;
  --m-b: #D6E2CC;
  --m-c: #EDE6CF;
  --m-lake: #BFD6E8;
  --m-edge: #1A2129;
  --s-sky: #F5E6BC;
  --s-sun: #A42A1E;
  --s-lake: #1E4F7A;
  --s-field: #6E8B3D;
  --s-furrow: #4E6A26;
  --head: "Lato", "Helvetica Neue", Arial, sans-serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--sans); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lfw :focus-visible, .nav :focus-visible, .foot :focus-visible, .official :focus-visible { outline-color: var(--focus-band); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 600; }
.skip:focus { top: 12px; }

/* label and alert */
.lfw { background: #20262D; color: #F3F1EA; font-size: 15px; text-align: center; padding: 8px 16px; }
.lfw a { color: #F5E6BC; }
.alert { background: var(--wheat); border-bottom: 1px solid var(--wheat-rule); }
.alert-in { display: flex; gap: 18px; align-items: flex-start; padding-top: 14px; padding-bottom: 14px; font-size: 16px; }
.alert-tag { flex: none; background: var(--tag-bg); color: var(--tag-fg); font: 700 15px/1 var(--sans); padding: 6px 9px; margin-top: 2px; }
.alert-h { font-weight: 700; font-size: 17px; }
.alert a { color: var(--ink); font-weight: 600; }

/* masthead */
.official { background: var(--band-2); color: var(--band-fg); font-size: 14px; }
.official .wrap { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.official ul { display: flex; gap: 20px; }
.official a { color: var(--band-fg); }
.mast { background: var(--card); border-bottom: 1px solid var(--rule); }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; color: var(--ink); text-decoration: none; }
.seal { width: 76px; height: 76px; flex: none; }
.s-ring { fill: var(--card); stroke: var(--ink); }
.s-ring + .s-ring { fill: none; }
.s-sky { fill: var(--s-sky); } .s-sun { fill: var(--s-sun); } .s-lake { fill: var(--s-lake); }
.s-wave { fill: none; stroke: #F5E6BC; } .s-field { fill: var(--s-field); } .s-furrow { fill: none; stroke: var(--s-furrow); }
.s-band { fill: var(--ink); } .s-year { fill: var(--card); font: 700 7px/1 var(--sans); letter-spacing: 0.08em; }
.brand-name { display: flex; flex-direction: column; gap: 4px; }
.b1 { font: 700 34px/1.05 var(--head); }
.b2 { font-size: 15px; color: var(--muted); }
.search { display: flex; flex: 0 1 440px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 11px 14px; border: 2px solid var(--ink); border-right: 0; background: var(--card); color: var(--ink); border-radius: 0; }
.search button, .lookup button, .btn { font: 700 17px/1 var(--sans); background: var(--btn); color: var(--btn-fg); border: 2px solid var(--btn); padding: 12px 18px; cursor: pointer; border-radius: 0; }
.search button:hover, .lookup button:hover, .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
::placeholder { color: var(--muted); opacity: 1; }
.nav { background: var(--band); }
.nav ul { display: flex; flex-wrap: wrap; }
.nav a { display: block; padding: 13px 18px; color: var(--band-fg); text-decoration: none; font-weight: 600; font-size: 17px; }
.nav li:first-child a { padding-left: 0; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { box-shadow: inset 0 -4px 0 #F5E6BC; }

/* front */
.front { padding: 32px 0 40px; }
.front-in { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: start; }
.front-date { font-size: 16px; color: var(--muted); margin-bottom: 10px; min-height: 1.6em; }
@media (max-width: 600px) { .front-date { min-height: 3.2em; } }
.front h1 { font-size: 46px; }
.front-lede { font-size: 21px; line-height: 1.45; margin: 12px 0 22px; max-width: 40ch; }
.primary { border-top: 2px solid var(--ink); }
.primary a { position: relative; display: block; padding: 16px 48px 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.primary a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); transform: rotate(45deg); }
.primary a:hover { background: var(--tint); }
.primary a:hover .p-t { text-decoration: underline; }
.p-t { display: block; font: 700 21px/1.3 var(--head); color: var(--link); }
.p-d { display: block; font-size: 17px; color: var(--muted); margin-top: 4px; }
.front-photo { margin: 0; }
.front-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); }
.front-photo figcaption, .note { font-size: 14px; color: var(--muted); margin-top: 8px; }
.front-photo figcaption a { color: var(--muted); }

/* sections */
.sec { padding: 40px 0; border-top: 1px solid var(--rule); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-head h2, .board h2, .panel h2 { font-size: 28px; }
.sec-head a { font-weight: 600; }

/* calendar leaves */
.cal { background: var(--field); border-top: 1px solid var(--rule); padding: 32px 0 40px; }
.leaves { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.leaf { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; padding-bottom: 14px; }
.leaf:hover { border-color: var(--ink); }
.leaf:hover .lf-t { text-decoration: underline; }
.lf-mon { background: var(--tag-bg); color: var(--tag-fg); font: 700 15px/1 var(--sans); letter-spacing: 0.04em; text-align: center; padding: 7px 0 6px; }
.lf-day { font: 700 40px/1 var(--head); text-align: center; padding: 12px 0 2px; }
.lf-wd { text-align: center; font-size: 15px; color: var(--muted); padding-bottom: 12px; margin: 0 16px 12px; border-bottom: 1px dashed var(--rule); }
.lf-t { font-weight: 700; font-size: 17px; line-height: 1.3; padding: 0 16px; color: var(--link); }
.lf-s { font-size: 15px; line-height: 1.45; color: var(--muted); padding: 4px 16px 0; }

/* how do I */
.how-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.how-list a { display: block; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--rule); font-size: 19px; font-weight: 600; text-decoration: none; position: relative; }
.how-list a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); }
.how-list a:hover { text-decoration: underline; }

/* tax and records */
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.panel { background: var(--card); border: 1px solid var(--rule); padding: 22px 24px 24px; display: flex; flex-direction: column; }
.panel-k { font-size: 16px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.facts { margin: 18px 0 22px; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--muted); font-size: 17px; }
.facts dd { font-weight: 600; font-size: 17px; }
.lookup label { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.lk-row { display: flex; }
.lk-row input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 10px 12px; border: 2px solid var(--ink); border-right: 0; background: var(--card); color: var(--ink); border-radius: 0; }
.panel-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: 20px; font-weight: 600; }

/* meetings preview */
.mtg-grid, .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mtg { background: var(--card); border: 1px solid var(--rule); padding: 22px 24px; display: flex; flex-direction: column; }
.mtg-when { font-weight: 700; color: var(--red); font-size: 16px; }
.mtg h3 { font-size: 22px; margin: 6px 0 2px; }
.mtg-where { font-size: 16px; color: var(--muted); }
.mtg-items { margin: 14px 0 16px; list-style: disc; padding-left: 20px; font-size: 17px; }
.mtg-items li { margin: 4px 0; }
.mtg-status { margin-top: auto; font-size: 15px; font-weight: 700; border-top: 1px solid var(--rule); padding-top: 10px; }

/* board */
.board { background: var(--tint); }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.map { width: 100%; }
.m-lake { fill: var(--m-lake); }
.m-d { stroke: var(--paper); stroke-width: 2; }
.m-a { fill: var(--m-a); } .m-b { fill: var(--m-b); } .m-c { fill: var(--m-c); }
.m-edge { fill: none; stroke: var(--m-edge); stroke-width: 2.5; }
.m-creek { fill: none; stroke: #4F86B5; stroke-width: 3; }
.m-num circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.m-num text { font: 700 19px/1 var(--head); fill: var(--ink); }
.m-seat { fill: var(--red); }
.m-lbl { font: 600 16px/1 var(--sans); fill: var(--ink); }
.m-lakelbl { font-style: italic; font-weight: 400; }
.board-lede { margin: 12px 0 18px; font-size: 18px; }
.board-list { border-top: 2px solid var(--ink); margin-bottom: 22px; }
.board-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dn { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--head); background: var(--card); }
.bn { display: block; font-weight: 700; }
.bt { display: block; font-size: 15px; color: var(--muted); }
.board-list a { font-weight: 600; font-size: 16px; }

/* news */
.story { border-top: 2px solid var(--ink); padding-top: 12px; }
.st-meta { font-size: 15px; color: var(--muted); }
.story h3 { font-size: 21px; margin: 6px 0 8px; }
.story h3 a { color: var(--ink); text-decoration: none; }
.story h3 a:hover { text-decoration: underline; }
.story p:last-child { font-size: 17px; }

/* departments teaser */
.dep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dep-grid a { display: block; height: 100%; background: var(--card); border: 1px solid var(--rule); padding: 16px 18px; text-decoration: none; }
.dep-grid a:hover { border-color: var(--ink); }
.dep-grid a:hover .dp-n { text-decoration: underline; }
.dp-n { display: block; font-weight: 700; font-size: 18px; }
.dp-d { display: block; font-size: 15px; color: var(--muted); margin-top: 2px; }

/* inner pages */
.page-head { background: var(--field); border-bottom: 1px solid var(--rule); padding: 22px 0 30px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; margin-bottom: 14px; }
.crumbs li + li::before { content: "/"; margin: 0 8px 0 4px; color: var(--muted); }
.page-head h1 { font-size: 40px; }
.ph-lede { font-size: 19px; max-width: 62ch; margin-top: 12px; }

/* meetings page */
.m-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding-top: 40px; padding-bottom: 64px; align-items: start; }
.m-side { position: sticky; top: 16px; }
.side-h { font-size: 20px; margin-bottom: 8px; }
.side-list { border-top: 2px solid var(--ink); margin-bottom: 28px; }
.side-list a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); font-weight: 600; text-decoration: none; }
.side-list a:hover { text-decoration: underline; }
.speak { background: var(--wheat); border: 1px solid var(--wheat-rule); padding: 18px; font-size: 16px; }
.speak h2 { font-size: 19px; margin-bottom: 6px; }
.speak p + p { margin-top: 8px; font-weight: 600; }
.speak a { color: var(--ink); }
.up { margin-bottom: 40px; }
.up h2 { font-size: 26px; margin-bottom: 14px; }
.up-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.up-list li { background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.u-day { font-size: 15px; font-weight: 700; color: var(--red); }
.u-day b { font: 700 30px/1 var(--head); color: var(--ink); margin-left: 4px; letter-spacing: 0; }
.u-n { font-weight: 700; line-height: 1.3; margin-top: 6px; }
.u-w { font-size: 15px; color: var(--muted); }
.up-list a { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; }
.bd-sec { border-top: 2px solid var(--ink); padding-top: 18px; margin-bottom: 40px; scroll-margin-top: 16px; }
.bd-head h2 { font-size: 30px; }
.bd-when { font-weight: 700; color: var(--red); margin: 4px 0 8px; font-size: 17px; }
.bd-head p:last-child { max-width: 68ch; }
.yr { font: 700 22px/1 var(--head); margin: 26px 0 8px; }
.mlist li { display: grid; grid-template-columns: 290px 1fr auto; gap: 6px 20px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.mlist li:first-child { border-top: 1px solid var(--rule); }
.m-date { font-weight: 600; }
.m-type { color: var(--muted); font-size: 17px; }
.m-state { display: inline-block; margin-left: 10px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--wheat); padding: 2px 8px; }
.m-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 17px; justify-content: flex-end; }
.older { margin-top: 14px; border: 1px solid var(--rule); background: var(--card); }
.older summary { cursor: pointer; padding: 12px 16px; font-weight: 700; }
.older summary:hover { background: var(--tint); }
.older .mlist { padding: 0 16px 8px; }
.older-p { padding: 0 16px 14px; }

/* departments page */
.dsec { padding: 40px 0 8px; }
.dsec h2 { font-size: 28px; margin-bottom: 16px; }
.dsec:last-child { padding-bottom: 64px; }
.dgrid { display: grid; gap: 16px; }
.dgrid.four { grid-template-columns: repeat(4, 1fr); }
.dgrid.three { grid-template-columns: repeat(3, 1fr); }
.dcard { background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 16px; }
.dcard:target { outline: 3px solid var(--red); }
.dcard h3 { font-size: 20px; }
.dc-who { font-weight: 700; color: var(--red); font-size: 16px; }
.dcard > p { font-size: 17px; }
.dc-c { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; font-size: 16px; color: var(--muted); }
.dc-c a { font-weight: 600; }

/* treasurer */
.dh-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: end; }
.due { background: var(--card); border: 1px solid var(--rule); padding: 18px 20px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; }
.due-k { grid-column: 1 / -1; font-size: 16px; font-weight: 700; color: var(--ink); }
.due-d { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--rule); min-width: 76px; }
.due-m { width: 100%; text-align: center; background: var(--tag-bg); color: var(--tag-fg); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; padding: 4px 0; }
.due-n { font: 700 40px/1.1 var(--head); padding: 4px 0 6px; }
.due-t { font-size: 16px; }
.due .btn { grid-column: 1 / -1; text-align: center; text-decoration: none; margin-top: 8px; }
.tre { padding-bottom: 64px; }
.sec-in { padding-top: 36px; }
.sec-in h2 { font-size: 28px; margin-bottom: 16px; }
.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pay-grid.three { grid-template-columns: repeat(3, 1fr); }
.pay-grid li { background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.pay-grid h3 { font-size: 20px; }
.pay-grid p { font-size: 17px; }
.pay-grid a { margin-top: auto; font-weight: 600; }
.sec-in.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sec-in.two .facts { margin-top: 0; }
.sec-in.two p + p { margin-top: 12px; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 19px; }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 0 0 16px; max-width: 70ch; }
.ct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: var(--card); border: 1px solid var(--rule); padding: 22px 24px; }
.ct-grid h3 { font-size: 18px; margin-bottom: 4px; }

/* footer */
.foot { background: var(--band-2); color: var(--band-fg); padding: 48px 0 32px; font-size: 16px; }
.foot a { color: var(--band-fg); }
.foot-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.25); }
.foot-name { font: 700 24px/1.2 var(--head); margin-bottom: 8px; }
.foot address { font-style: normal; line-height: 1.6; }
.foot-col h2 { font: 700 17px/1.2 var(--sans); margin-bottom: 10px; }
.foot-col li { margin: 7px 0; }
.foot-fict { margin-top: 20px; font-weight: 600; }
.foot-credit { margin-top: 8px; font-size: 14px; opacity: 0.92; }

/* responsive */
@media (max-width: 1100px) {
  .leaves { grid-template-columns: repeat(3, 1fr); }
  .dep-grid, .dgrid.four, .pay-grid, .up-list { grid-template-columns: repeat(2, 1fr); }
  .mlist li { grid-template-columns: 1fr auto; }
  .mlist .m-type { grid-column: 1; grid-row: 2; }
  .mlist .m-links { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .front-in, .tr-grid, .board-grid, .sec-in.two, .dh-grid { grid-template-columns: 1fr; }
  .front h1 { font-size: 44px; }
  .how-list, .dgrid.three, .pay-grid.three { grid-template-columns: repeat(2, 1fr); }
  .mtg-grid, .news-grid, .ct-grid { grid-template-columns: 1fr; }
  .m-layout { grid-template-columns: 1fr; gap: 24px; }
  .m-side { position: static; }
  .foot-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  body { font-size: 17px; }
  .alert-in { flex-direction: column; gap: 8px; }
  .seal { width: 60px; height: 60px; }
  .b1 { font-size: 27px; }
  .search { flex-basis: 100%; }
  .nav ul { padding: 0; }
  .nav li { flex: 1 1 50%; }
  .nav li:first-child a, .nav a { padding: 11px 16px; }
  .nav li { border-bottom: 1px solid rgba(255,255,255,0.15); }
  .front { padding-top: 28px; }
  .front h1 { font-size: 38px; }
  .front-lede { font-size: 19px; }
  .p-t { font-size: 21px; }
  .leaves { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lf-day { font-size: 44px; }
  .how-list, .dgrid.three, .dgrid.four, .dep-grid, .pay-grid, .pay-grid.three, .up-list, .foot-top { grid-template-columns: 1fr; }
  .panel { padding: 22px 18px; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .sec { padding: 40px 0; }
  .sec-head h2, .board h2, .panel h2 { font-size: 27px; }
  .page-head h1 { font-size: 34px; }
  .mlist li { grid-template-columns: 1fr; }
  .mlist .m-type, .mlist .m-links { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .board-list li { grid-template-columns: 40px 1fr; }
  .board-list li a { grid-column: 2; }
  .due { grid-template-columns: auto 1fr; }
}

/* ---------- Added for the WordPress theme ---------- */

/* Fonts, served by the theme (SIL Open Font License 1.1, assets/fonts/OFL.txt). */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: optional; src: url(assets/fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(assets/fonts/source-sans-3-var.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: optional; src: url(assets/fonts/source-sans-3-italic.woff2) format("woff2"); }

[hidden] { display: none !important; }
/* Grid and flex children may shrink below their longest word (longer Spanish labels). */
.tr-grid > *, .front-in > *, .board-grid > *, .sec-in.two > *, .m-layout > * { min-width: 0; }
.panel, .facts dd, .facts dt, .panel-links a { overflow-wrap: break-word; }

/* Example-site notice */
.lfw-concept-bar { background: #20262D; color: #F3F1EA; font-size: 15px; line-height: 1.45; text-align: center; padding: 8px 16px; margin: 0; }
.lfw-concept-bar a { color: #F5E6BC; font-weight: 600; }
.lfw-concept-bar a:focus-visible { outline-color: #F5E6BC; }

/* Alerts by severity: the wheat notice for information, stronger tags for warnings and emergencies */
.alert-warning .alert-tag { background: #8A4B00; }
.alert-emergency { background: #FBE3DF; border-bottom-color: #E0A49C; }

.nav a[aria-current="page"], .official a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.brand[aria-current="page"] { text-decoration: none; }

/* Calendar: fewer than six leaves still fill the row evenly */
.leaves-5 { grid-template-columns: repeat(5, 1fr); }
.leaves-4 { grid-template-columns: repeat(4, 1fr); }
.leaves-3 { grid-template-columns: repeat(3, 1fr); }
.leaves-2 { grid-template-columns: repeat(2, 1fr); }
.leaves-1 { grid-template-columns: minmax(0, 220px); }
.mtg h3 a { color: var(--ink); text-decoration: none; }
.mtg h3 a:hover { text-decoration: underline; }

/* Lookups and their answers */
.lookup + .panel-links { margin-top: 0; }
.lk-out:empty { display: none; }
.lk-out { margin-top: 14px; border-left: 4px solid var(--lake); background: var(--tint); padding: 12px 16px; }
.lk-hit { font-weight: 700; }
.lk-miss { font-weight: 600; }
.lk-facts { margin: 8px 0 0; }
.lk-facts div { grid-template-columns: 1fr 2fr; }
.lk-deeds li { padding: 8px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; font-size: 16px; }
.lookup-sec { padding-bottom: 8px; }
.lookup-card { background: var(--card); border: 1px solid var(--rule); padding: 22px 24px 24px; max-width: 760px; }
.lookup-card h2 { font-size: 28px; margin-bottom: 8px; }
.lk-intro { margin-bottom: 16px; max-width: 62ch; }
.panel .lookup { margin-bottom: 4px; }

/* Inner pages */
.ph-plain h1 { max-width: 32ch; }
.page-head .st-meta { margin-bottom: 8px; }
.page-body { padding-top: 40px; padding-bottom: 64px; }
main > .sec-in:last-child, main > .wrap:last-child { padding-bottom: 64px; }
.sec-intro { max-width: 68ch; margin: -4px 0 18px; }
.prose { max-width: 1240px; }
.prose > * { max-width: 70ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul { list-style: disc; padding-left: 24px; }
.prose ol { list-style: decimal; padding-left: 24px; }
.prose li { margin: 4px 0; }
.prose h2 { font-size: 28px; margin: 0 0 14px; }
.prose h3 { font-size: 21px; margin: 22px 0 8px; }
.prose-notice > *:not(h2) { max-width: 70ch; }
.prose-notice { }
.prose-notice > p:first-of-type { background: var(--wheat); border: 1px solid var(--wheat-rule); padding: 14px 18px; }
.pay-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pay-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-meta { font-size: 15px; font-weight: 700; color: var(--red); }
.pay-grid .card-link { margin-top: auto; }
.pay-grid .card-link a { margin: 0; }
.after { margin-top: 20px; font-weight: 600; }
.ct-grid p { font-size: 17px; }

/* Meetings center */
.m-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; background: var(--card); border: 1px solid var(--rule); padding: 16px 18px; margin-bottom: 32px; }
.mf-field { display: flex; flex-direction: column; gap: 4px; }
.mf-field label { font-weight: 600; font-size: 16px; }
.mf-field select, .mf-field input, .req-form input[type="text"], .req-form input[type="email"], .req-form textarea { font: inherit; font-size: 17px; padding: 9px 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); border-radius: 0; min-height: 44px; }
.mf-q { flex: 1 1 220px; }
.mf-count { flex-basis: 100%; font-size: 15px; color: var(--muted); }
/* Filters take their space before the script shows them (no layout shift); without scripts,
   assets/noscript.css removes them. The count line keeps its height while empty. */
[data-pending] { visibility: hidden; }
.mf-count { min-height: 1.5em; }
.m-none { font-weight: 600; margin: 8px 0 24px; }
.bd-sec .mlist li { display: block; padding: 12px 0; }
.m-top { display: block; }
.m-top .m-type { margin-top: 2px; }
.m-date { font-weight: 600; }
.m-doc { margin-top: 6px; }
.m-doc summary { cursor: pointer; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.m-doc ol, .m-doc ul { margin: 6px 0 6px 24px; font-size: 17px; }
.m-doc ol { list-style: decimal; }
.m-doc ul { list-style: disc; }
.m-note { font-size: 15px; color: var(--muted); margin-top: 4px; }

/* Document center */
.table-wrap { overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 17px; background: var(--card); border: 1px solid var(--rule); }
.doc-table th { text-align: left; font-size: 16px; color: var(--ink); padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.doc-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.doc-table td:first-child a { font-weight: 600; }
.doc-type { display: block; font-size: 15px; color: var(--muted); }

/* Directory and jobs */
.dir-list, .job-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dir-list li, .job-list li { background: var(--card); border: 1px solid var(--rule); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.dir-list h3, .job-list h3 { font-size: 20px; }
.dir-topics { font-size: 15px; color: var(--muted); }
.dir-c { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 16px; }
.job-list { grid-template-columns: repeat(2, 1fr); }
.job-meta { font-weight: 700; color: var(--red); font-size: 16px; }
.job-close { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 16px; }

/* Request forms */
.req-form { display: flex; flex-direction: column; gap: 16px; }
.rf { display: flex; flex-direction: column; gap: 4px; border: 0; margin: 0; padding: 0; }
.rf label, .rf legend { font-weight: 600; }
.rf legend { margin-bottom: 4px; padding: 0; }
.rc { font-weight: 400 !important; display: flex; gap: 10px; align-items: center; min-height: 32px; }
.rc input { width: 20px; height: 20px; accent-color: var(--lake); }
.rf-h { font-size: 15px; color: var(--muted); }
.rf-e { font-size: 15px; font-weight: 700; color: var(--red); }
.rf-e:empty { display: none; }
.req-form .btn { align-self: flex-start; }
.req-done:empty { display: none; }
.req-done { background: var(--tint); border-left: 4px solid var(--lake); padding: 12px 16px; font-weight: 600; }

/* Search */
.search-page { padding-bottom: 64px; }
.search-form { max-width: 760px; margin-bottom: 16px; }
.results { max-width: 820px; min-height: 70vh; } /* results arrive after load; the footer waits below them */
.results li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.r-kind { font-size: 15px; font-weight: 600; color: var(--muted); }
.r-t { font-size: 21px; margin: 2px 0 4px; }
.r-d { font-size: 17px; color: var(--muted); }

/* News */
.news-list { padding-top: 40px; padding-bottom: 64px; }
.releases { max-width: 820px; display: flex; flex-direction: column; gap: 28px; }
.releases h2 { font-size: 24px; margin: 6px 0 8px; }
.releases h2 a { color: var(--ink); text-decoration: none; }
.releases h2 a:hover { text-decoration: underline; }
.nav-links { display: flex; gap: 16px; margin-top: 24px; }

@media (max-width: 1100px) {
  .leaves-5, .leaves-4 { grid-template-columns: repeat(3, 1fr); }
  .dir-list, .pay-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .job-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .leaves-5, .leaves-4, .leaves-3 { grid-template-columns: repeat(2, 1fr); }
  .dir-list, .pay-grid.cols-3, .pay-grid.cols-2 { grid-template-columns: 1fr; }
  .lookup-card { padding: 20px 16px; }
  .lk-facts div { grid-template-columns: 1fr; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; }
  .doc-table tr { border-bottom: 1px solid var(--rule); padding: 8px 0; }
  .doc-table td { border: 0; padding: 4px 14px; }
  .doc-table td:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
  .m-filter { padding: 14px; }
  .mf-field { flex: 1 1 100%; }
}

/* ---------- Phone header (760px and narrower) ----------
   One slim row: seal and name, a Search button and a Menu button. The search row and the menu
   panel open under it (assets/county.js); with scripts off, assets/noscript.css shows both. */
.cb-short, .alert-more, .m-actions, .m-menu { display: none; }
.m-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--ink); font: 600 17px/1 var(--sans); cursor: pointer; border-radius: 0; }
.m-btn:hover { background: var(--tint); }
.m-btn[aria-expanded="true"] { background: var(--tint); box-shadow: inset 0 -3px 0 var(--lake); }
.m-ico { width: 22px; height: 22px; flex: none; }
@media (max-width: 760px) {
  .lfw-concept-bar { font-size: 14px; padding: 6px 12px; }
  .cb-long { display: none; }
  .cb-short { display: inline; }
  .official { display: none; }
  .alert-compact .alert-msg { display: none; }
  .alert-compact .alert-more { display: inline; margin-left: 6px; }
  .alert-compact .alert-in { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 8px; padding-bottom: 8px; }
  .alert-compact .alert-tag { font-size: 14px; padding: 4px 7px; }
  .alert-compact .alert-h { font-size: 16px; line-height: 1.4; }
  .mast-in { flex-wrap: wrap; gap: 0; padding: 8px 8px 8px 16px; min-height: 60px; }
  .brand { gap: 10px; flex: 1 1 0; min-width: 0; }
  .seal { width: 40px; height: 40px; }
  .b1 { font-size: 22px; line-height: 1.1; } /* a longer name (Spanish) wraps to two lines inside the row */
  .b2 { display: none; }
  .m-actions { display: flex; gap: 2px; flex: none; }
  .search { display: none; flex: 1 1 100%; order: 3; margin: 8px 8px 4px 0; }
  .search.is-open { display: flex; }
  .nav { display: none; }
  .m-menu.is-open { display: block; }
  .m-menu { border-top: 1px solid var(--rule); background: var(--card); }
  .m-list a { position: relative; display: block; padding: 13px 44px 13px 16px; border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 600; font-size: 18px; text-decoration: none; }
  .m-list a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); }
  .m-list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--lake); }
  .m-more { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 16px 14px; background: var(--field); border-bottom: 1px solid var(--rule); }
  .m-more a { display: inline-block; padding: 6px 0; font-weight: 600; }
}