:root {
    --color-primary: #25325C;      /* navy — banner title, footer */
    --color-accent: #D52516;       /* red — utility-link buttons, resource icons */
    --color-accent-dark: #b1040e;  /* dark red — CTA button, stat icon circle, hover states (live --gcid-922f8e05...) */
    --color-accent-alt: #e2dd22;   /* yellow — secondary buttons */
    --color-tertiary: #25325C;
    --color-background-light: #ffffff;
    --color-border: #e5e5e5;
    --color-footer: #25325C;
    --color-text-light: #ffffff;
    --color-text-primary: #333333;
    --font-heading: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    --font-body: 'Roboto', Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
}

/* Live site's section headings (Village of Hessmer, About the Village of Hessmer,
   Business and Investment, Resources Links) all share one preset:
   font-weight:700, font-size 40px desktop / 32px tablet / 20px mobile — this site
   had no explicit h2 size at all before, falling back to a much smaller browser
   default. */
h2 {
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2em;
}

@media (max-width: 980px) {
    h2 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    h2 {
        font-size: 20px;
    }
}

a {
    color: var(--color-accent);
}

.container {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   Full-screen banner (page-banner + home-hero share this look).
   Live site: .et_pb_section_8 { height: 100vh } for both the home hero and every
   inner page's Theme-Builder header — confirmed via each page's own unified CSS.
   Title/subtitle are navy text with a white text-shadow (not white text on a dark
   veil) — also confirmed live: h1 55px/700/#25325c/text-shadow 0 .1em .1em #fff;
   subtitle 33px/800/#25325c/text-shadow .08em .08em 0 #fff.
   ============================================ */
.page-banner,
.home-hero {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.page-banner-overlay,
.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(160,214,238,0) 0%, rgba(0,0,0,0.23) 100%);
}

.page-banner-content,
.home-hero-content {
    position: relative;
    max-width: 90%;
}

.page-banner-logo,
.home-hero-logo {
    max-height: 110px;
    width: auto;
    margin-bottom: 20px;
}

.page-banner-content h1,
.home-hero-content h1 {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 55px;
    text-shadow: 0 0.1em 0.1em #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}

.page-banner-subtitle,
.home-hero-subtitle {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 33px;
    line-height: 1.6em;
    text-shadow: 0.08em 0.08em 0 #fff;
    margin: 0;
}

@media (max-width: 767px) {
    .page-banner-content h1,
    .home-hero-content h1 {
        font-size: 34px;
    }
    .page-banner-subtitle,
    .home-hero-subtitle {
        font-size: 20px;
    }
    .page-banner-logo,
    .home-hero-logo {
        max-height: 80px;
    }
}

.home-content {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 0;
}

.home-content h2 {
    text-align: center;
    margin: 50px 0 20px;
}

.home-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* About / Business CTA: live confirms this whole section has a light-gray
   background (--gcid-86da69f8...:#f4f4f4, resolved from the dynamic CSS's :root
   custom-property block). The background wasn't actually appearing: the shared
   module's own `.sl-section.sl-section--light{background-color:#fff}` rule
   (shortcodes.css) has TWO classes chained, giving it higher specificity than
   the single-class `.about-business{background-color:...}` used before — same
   specificity tier, but the 2-class rule wins regardless of stylesheet load
   order. Fixed by matching that specificity: `.sl-section.about-business`.
   Headings here are left-aligned ("start"), unlike centered headings elsewhere.
   Paragraph text is 16px/1.6em (live preset c71e9a44). Both column images fill
   their column width rather than a small fixed size — live's
   .et_pb_main_blurb_image/.et_pb_image_wrap default to width:100% for photo
   (non-icon) images; same principle applied here to the two full <img>s. Column
   padding increased for more breathing room now that the section has a visible
   background to sit inside. */
.sl-section.about-business {
    background-color: #f4f4f4;
}

.about-business {
    padding: 20px 0;
}

.about-business .sl-column {
    padding: 40px;
}

.about-business h2 {
    text-align: left;
    margin: 0 0 15px;
}

.about-business .sl-column p {
    font-size: 16px;
    line-height: 1.6em;
    margin: 0 0 20px;
}

.about-business .sl-column img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

/* "Business and Investment" column only (the second column — image, then
   heading, then the CTA button): white background below the image, per direct
   user correction. The rest of the section (the "About" column, and the
   section's own #f4f4f4 background) is untouched. The image bleeds out of the
   column's 40px padding on top/left/right (negative margin) so it still sits
   flush against the section's gray background with no white gap around it —
   only the content below the image (heading + button) sits on white. */
.about-business .sl-column:last-child {
    background: #fff;
}

.about-business .sl-column:last-child img {
    margin: -40px -40px 0 -40px;
    width: calc(100% + 80px);
}

/* CTA button ("Explore Our Businesses"): fully red per direct user correction
   (a solid fill, not the ghost/outline style a prior pass built from the live
   CSS) — everything else (padding, border-radius, font-size, letter-spacing)
   left unchanged. */
.about-business .link-button,
.about-business .link-button:hover {
    display: inline-flex;
    flex-direction: row;
    padding: 16px 24px;
    background: var(--color-accent-dark);
    border: 2px solid var(--color-accent-dark);
    border-radius: 5px;
}

.about-business .link-button-label {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 14px;
    color: #fff;
}

/* ============================================
   Footer
   ============================================ */
#main-footer {
    position: relative;
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.footer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,113,195,0.9) 26%, rgba(37,50,92,0.89) 100%);
}

.footer-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 50px 0;
}

.footer-columns h4 {
    color: #fff;
    font-size: 24px;
    margin: 15px 0 5px;
}

.footer-columns h4:first-child {
    margin-top: 0;
}

.footer-columns p {
    font-size: 20px;
    line-height: 1.7;
    margin: 0 0 10px;
}

.footer-columns a {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 767px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Shared "blurb" shortcode override.
   Live site's default Divi blurb layout is image-above-text, centered
   (.et_pb_blurb_container{text-align:center}, image block stacked above the
   text container) — the module's own default is a horizontal image-left/text-right
   row, which doesn't match. Title uses the live site's generic (non-overridden)
   .et_pb_module_header rule: Inter/700/uppercase/16px. Description text uses the
   live .et_pb_blurb_description rule: Roboto/line-height 1.8em (14px body size,
   matching the site's global --et_global_body_font_size).
   ============================================ */
.sl-blurb {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.sl-blurb img {
    width: 140px;
    height: 105px;
    object-fit: cover;
    border-radius: 6px;
}

.sl-blurb h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.3px;
}

.sl-blurb p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8em;
}

/* ============================================
   Grid column-count modifiers for the "section" shortcode.
   The shared module's .sl-row is a fixed 2-column grid; several live-site sections
   are a real 4-across (departments, stats) or 3-across (resource links) row on
   desktop, dropping to a single column on mobile like the rest of the site.
   ============================================ */
.sl-section.cols-4 .sl-row {
    grid-template-columns: repeat(4, 1fr);
}

.sl-section.cols-3 .sl-row {
    grid-template-columns: repeat(3, 1fr);
}

/* The shared module's .sl-row is width:80% of its own parent by default — but
   that parent (.home-content) is already width:90%/max-width:1080px, so every
   shortcode-built section here was rendering at a compounded ~72% of the
   available width, not the ~90% a real Divi row uses. This is why sections 1, 3,
   and 5 all read as narrower / less spread out than the live site. */
.home-content .sl-row {
    width: 100%;
}

@media (max-width: 767px) {
    .sl-section.cols-4 .sl-row,
    .sl-section.cols-3 .sl-row {
        grid-template-columns: 1fr;
    }
}

/* Every shortcode-built section on this page was still nested inside
   .home-content's width:90%/max-width:1080px box, so even with the .sl-row
   width:100% fix above none of them could ever exceed that outer cap — they
   all read narrower than the viewport. Broken out to true full viewport width
   using the same technique on all of them: width:100vw + a negative left
   margin equal to half the viewport, which correctly re-centers a full-bleed
   element regardless of where it sits in a narrower parent (a plain
   `width:100vw` without that offset shifts everything left, since 100vw
   measures the whole viewport, not just the remaining space to the parent's
   left edge). Each section's inner row then gets a fluid percentage width
   (not the sitewide 1080px max-width cap) so it actually uses the extra space
   rather than snapping back to its old width once freed from .home-content. */
.dept-grid,
.utility-links,
.sl-section.about-business,
.resource-links {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.dept-grid .sl-row,
.utility-links .sl-row,
.resource-links .sl-row {
    width: 94%;
    max-width: none;
    margin: 0 auto;
}

.about-business .sl-row {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* "Village of Hessmer" department cards: live site's blurb images are
   width:100%/max-width:100% of their column (Divi's default for non-icon-mode
   photo blurbs — .et_pb_main_blurb_image .et_pb_image_wrap{width:100%}), not a
   small fixed thumbnail — each photo fills its ~1/4-width column. A prior pass
   force-cropped these to a fixed height with object-fit:cover, which the live
   site doesn't do — corrected to height:auto so each photo keeps its own
   natural aspect ratio (they vary — 900x446 to 900x544 — and aren't meant to
   be cropped to match each other). Hidden on mobile per explicit user
   instruction (not a literal live-site reproduction). */
.dept-grid .sl-blurb img {
    width: 100%;
    height: auto;
}

/* Text below the images: live site's department-card title/description are
   larger than the shared module's base blurb sizing (16px/14px) — bumped to
   match the bigger images now used in this section. */
.dept-grid .sl-blurb h4 {
    font-size: 20px;
}

.dept-grid .sl-blurb p {
    font-size: 16px;
    line-height: 1.6em;
}

@media (max-width: 767px) {
    .dept-grid .sl-blurb img {
        display: none;
    }
}

/* ============================================
   Shared "stats-grid" partial override — used by content/business.md only
   (employmentStats/ancestryStats via {{< page-stats >}}). Home's stats moved to
   the separate stat-circle-grid.html/page-stats-circle setup below, since the
   live home page's stat section has icons + a filled-circle number + a parallax
   background that this shared partial doesn't support — confirmed those don't
   exist on /business/'s employment section (flat navy background-color, no
   icons: .et_pb_section_10{background-color:#25325C}, no et_pb_section_parallax
   class), so business.md correctly keeps using this simpler tile unmodified.
   Business's flat navy card with white number matches its live site exactly.
   Ancestry's stats reuse the same tile for visual consistency (see
   CONVERSION-REPORT.md) even though its live counterpart was a bar chart.
   ============================================ */
.sl-stats-grid {
    background: var(--color-primary);
    border-radius: 10px;
    padding: 30px;
}

.sl-stat-item {
    background: transparent;
    border: none;
}

.sl-stat-number {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 40px;
}

.sl-stat-title {
    color: #fff;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
}

/* ============================================
   Home-only stat circles (stat-circle-grid.html partial).
   Live site: parallax photo background (DSC_9996.jpg) with a dark gradient
   overlay, an et_pb_row_4col row (4-across desktop). Re-verified structure per
   user correction: the CIRCLE belongs to the ICON, not the number — the icon
   blurb has a real circular badge (background-color:#b1040e [--gcid-922f8e05],
   padding:8px, border-radius:100px around the 48px icon ≈ 64px circle). The
   number itself has no circle/border-radius anywhere in the live CSS — it's
   Divi's plain "Number" counter type (not "Circle Counter"), just large text
   (40px/700/Roboto Condensed/white) below the icon-circle, with the label below
   that. Broken out to full viewport width (the standard Divi outer-section/
   inner-row split) since it sits inside .home-content's 90%-width column but
   needs to bleed edge-to-edge like a real Divi section.
   ============================================ */
.stat-circle-section {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    padding: 80px 0;
}

.stat-circle-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34,34,34,0.3) 0%, #222222 100%);
}

.stat-circle-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .stat-circle-grid {
        grid-template-columns: 1fr;
    }
}

.stat-circle-item {
    text-align: center;
}

/* Blue, per user correction (reverted from red) — given its own hardcoded value
   rather than a shared variable, so it can't drift again if --color-accent-dark
   or --color-primary change for other components (utility-link hover, CTA
   button, etc.) elsewhere on the page. */
.stat-circle-icon-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: #25325C;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-circle-icon {
    width: 48px;
    height: 48px;
}

.stat-circle-number {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 40px;
    color: #fff;
    margin-bottom: 8px;
}

.stat-circle-label {
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
}

/* ============================================
   link-button shortcode
   ============================================ */
.link-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-align: center;
    padding: 20px;
    background: var(--color-background-light);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.link-button:hover {
    border-color: var(--color-accent);
}

.link-button-image {
    max-height: 60px;
    max-width: 100%;
    width: auto;
}

.link-button-icon {
    font-size: 28px;
    color: var(--color-accent);
}

.link-button-label {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

/* Utility links (section 3): re-verified against a fresh fetch — the live site has
   NO border/card here either (a prior pass wrongly assumed it did; corrected now).
   Each item is an image (larger — natural display height is 100px on the live site,
   `width="120/105/252/333" height="100"` on the 4 logos) plus a separate Divi
   `.et_pb_button` below it: solid red background, white text, no visible border
   (confirmed: `background-color:#d52516;color:#FFFFFF!important` at very high
   specificity — this is white text on red, not red text, despite how it may read at
   a glance on the live site; flag if this doesn't match what you're seeing). Divi's
   base button behavior adds a fade/slide-in arrow on hover
   (`.et_pb_button:after{content:attr(data-icon)}` in the theme's own base CSS, not
   page-specific) — reproduced with a plain "›" character since the real glyph comes
   from Divi's own icon font, which isn't part of this site's asset bundle (same
   equivalent-substitution approach already used for the Resources Links icons).
   Also live-confirmed: 3 of the 4 logos (all but "Utility Online Payments") get
   `filter: invert(30%)` on hover — not a box-shadow, a color-invert filter, which
   only visibly darkens the logo's actual non-transparent (round-logo-mark) pixels,
   reading as a shadow limited to "the round portion" since the rest of each PNG is
   transparent. Row gutter is live-confirmed wider here than elsewhere
   (`et_pb_gutters4` → 8% column margin, vs. the shared module's 5.5% default —
   this is why the 4 items read as "more spread apart" than other grids on the
   page). */
.utility-links .sl-row {
    gap: 8%;
}

.utility-links .link-button {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    gap: 20px;
}

.utility-links .link-button-image {
    max-height: 140px;
    max-width: 100%;
    width: auto;
    transition: filter 0.3s ease;
}

.utility-links .link-button:not(:first-child):hover .link-button-image {
    filter: invert(30%);
}

.utility-links .link-button-label {
    display: inline-flex;
    align-items: center;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    font-size: 16px;
    padding: 0.5em 1em;
    border-radius: 3px;
    transition: padding 0.2s ease;
}

.utility-links .link-button-label::after {
    content: "›";
    display: inline-block;
    width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transition: all 0.2s ease;
}

.utility-links .link-button:hover .link-button-label::after {
    width: 1em;
    opacity: 1;
    margin-left: 6px;
}

/* Resources Links: live site has no card/border/background around each item — a
   plain large icon (Divi's un-overridden default icon size, confirmed 96px — a
   prior pass under-sized this to 72px) over a label at the live-confirmed 22px
   (.et_pb_blurb_42..47 .et_pb_module_header{font-size:22px}), color #D52516 with
   a #b1040e hover. Scoped to this section only so utility-link items above keep
   their own scoped styling. Gap widened to match the section's own generous feel
   (the shared module's 5.5% default read as too tight at this icon size). */
.resource-links .sl-row {
    gap: 8%;
    row-gap: 50px;
}

.resource-links .link-button {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.resource-links .link-button-icon {
    font-size: 96px;
    color: var(--color-accent);
    transition: color 0.2s ease;
}

.resource-links .link-button:hover .link-button-icon {
    color: #b1040e;
}

.resource-links .link-button-label {
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    font-size: 22px;
    letter-spacing: normal;
}

/* ============================================
   Single page / blog content
   ============================================ */
#main-content {
    min-height: 200px;
}

.single-page-content,
.blog-list {
    padding: 40px 0;
}

.single-page-content {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}

.blog-post-card {
    max-width: 700px;
    margin: 0 auto 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.blog-post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

.post-meta {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
}

.read-more {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
}