/* ============================================================
   GEO STYLESHEET VARIABLES — the branding for this client.

   THIS IS THE ONLY PLACE THESE ARE SET. Every geo sheet
   (banner / intro / badges / gallery / faq / service-list /
   service-area) reads --geo-* and nothing else, so one client's
   whole look is these nine lines.

   Set them from the dashboard: dotcomgeo.com -> the client ->
   Branding. Editing by hand works too; keep the shape below —
   one variable per line, a plain value, no var() — because the
   Branding editor targets a line and checks the name on it
   before writing.

   WHY PLAIN VALUES AND NOT var(--accent, ...):
   These used to read the host site's own variables with a
   fallback, so a site that defined --accent was picked up
   automatically. That silently loses: on any site that DOES
   define --accent, a value typed into Branding would be
   overridden by the host and appear to do nothing. What you set
   wins, on every site, with no need to know what the host's CSS
   happens to contain. If a client's brand color changes, change
   it here.
   ============================================================ */
/* TYPE IS THE HOST'S (Matt, 2026-07-16): geo CSS never sets font-family or
   font-size on TEXT — h1-h4, p, li, link text. Every heading and paragraph
   sizes like the client's own pages. The exceptions are not typography:
   icon glyphs (--geo-fa-family + their px sizes are how Font Awesome
   renders at all), the intro badge/stat NUMBER spans, whose size is
   the design of a geo-only element no host stylesheet knows, and the CTA
   band's h2 (host h2 scale is too big inside a slim band — Matt). */

:root {
    --geo-accent:        #006da7;
    --geo-accent-text:   #fff;
    --geo-primary:       #3a404a;
    --geo-secondary:     #3879b7;
    --geo-dark:          #222222;
    --geo-border-radius: 0;
    --geo-icon-radius:   0;
    --geo-icon-size:     30px;
    --geo-fa-family:     "Font Awesome 6 Sharp";
}

/* --geo-secondary is deliberately UNUSED (Matt, 2026-07-15): a spare brand slot, set
   per client so it's already right whenever a section reaches for it. Leave it defined
   even though nothing reads it — Branding lists whatever --geo-* lines exist here, so
   deleting the line deletes the field. */

/* GEO IMAGE (Matt, 2026-07-17) — every content PHOTOGRAPH on a geo page carries this
   class: gallery photos, the intro photo, the pinterest board cover, the landing page's
   service-area map. NOT background/cover images (banner), NOT graphics (service-list
   and popular-choice 3d renders, badges, the pinterest icon overlay). One knob: the
   radius rides --geo-border-radius, so changing that variable in Branding restyles
   every photo on every page at once. Sizing is self-contained on purpose — no
   dependence on the host's .img-responsive being present. */
.geo-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--geo-border-radius);
}

/* ============================================================
   SERVICE AREA / GEO PAGES — the shared pieces.

   One file per section: banner.css, intro.css, badges.css,
   gallery.css, service-list.css, faq.css. What's left here is
   what isn't any one section — the explore button, the map
   contact list, the Pinterest board link. All of them are
   loaded by css-service-area.cfm; add a file there or it is
   silently unstyled.

   Installation, popular-choice and permits get no file: they are
   Bootstrap plus the site's DC utility classes.
   ============================================================ */

/* Buttons — btn-explore: white button with a thin dark outline that fills with the
   accent on hover. Rides on the site's base .btn for padding / uppercase / etc.

   SCOPING (2026-07-23): these were bare `.btn-explore` rules, which is the one thing the
   CSS rules in index.md say never to write — `.btn-explore` is the SITE's class and its own
   pages use it. They only won here by load order, which is exactly the dependency scoping
   exists to remove. `.geo-btn` is added to the button itself rather than scoping to a
   section, because the two geo buttons live in different places (the gallery partial and
   the landing page's intro, which has no geo section class) and a future button in a new
   section would silently miss a section-based scope. `.geo-btn.btn-explore` is (0,2,0) and
   beats the host's (0,1,0) on every fleet site, whatever their CSS happens to contain.

   box-shadow is declared for the same reason the wells declare their radius: undeclared
   means the host's, and several fleet sites put a drop shadow on .btn-explore. */
.geo-btn.btn-explore {
    background: #fff;
    border: 2px solid var(--geo-primary);
    color: var(--geo-primary);
    box-shadow: none;
    border-radius: var(--geo-border-radius);
}
.geo-btn.btn-explore:hover,
.geo-btn.btn-explore:focus {
    background: var(--geo-accent);
    border-color: var(--geo-accent);
    /* WHITE, not --geo-primary. The hover fills with --geo-accent; dark text on that
       fill was the old value and read as unstyled/low-contrast. The fill is a dark
       enough brand color that its own text token is the right one. */
    color: var(--geo-accent-text);
}

/* Accent/CTA button. The host's own .btn-primary:hover drops white text for blue
   (master.css: color:#006da7 on a #3a404a fill), which reads broken on the geo
   pages. Scoped to .geo-btn so the host's site-wide rule is untouched — (0,3,0)
   beats its (0,2,0) on every fleet site, whatever their load order. */
.geo-btn.btn-primary,
.geo-btn.btn-primary:hover,
.geo-btn.btn-primary:focus {
    color: var(--geo-accent-text);
}

/* Map section — contact list: small accent icon (no box) + stacked h4 label/value */
.map-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.map-contact .map-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: var(--geo-accent);
    color: var(--geo-accent-text);
    border-radius: var(--geo-icon-radius);
}
.map-contact h4 {
    margin: 0;
}
.map-contact p {
    margin: 0;
}

/* Pinterest section — the whole board image is the link; the Pinterest icon overlaps
   the image's bottom-left corner (negative offsets hang it past the edge; the column's
   15px gutter gives it room). Icon nudges up on hover for affordance. */
.pinterest-wrapper {
    position: relative;
    display: block;
}
.pinterest-wrapper .pinterest-icon {
    position: absolute;
    bottom: -14px;
    left: -14px;
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: transform 0.25s ease;
}
.pinterest-wrapper:hover .pinterest-icon,
.pinterest-wrapper:focus .pinterest-icon {
    transform: scale(1.1);
}
@media (max-width: 767px) {
    .pinterest-wrapper {
        margin-bottom: 30px; /* clears the icon overhang when stacked above the text */
    }
    .pinterest-wrapper .pinterest-icon {
        width: 48px;
        height: 48px;
        bottom: -10px;
        left: -10px;
    }
}


/* ============================================================
   CTA bands — cta-00/01/02 in local-includes, OUR files since
   2026-07-16, so they are fully self-styled: no host utilities
   (.d-flex, .col-md-*, .text-white) and no .btn — the old
   cta.css is folded in here (it existed to recolor the HOST's
   blank CTA files, which we no longer call). Band = the DARK
   color, button = the accent (Matt). Only .container is
   inherited — the site's own gutter, on purpose.
   ============================================================ */
.geo-cta {
    background: var(--geo-dark);
    padding: 30px 0;
}
.geo-cta-row {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 14px 32px;
}
/* the old col-md-8 / col-md-4 proportions: copy holds two thirds,
   the button rides right in the remaining third */
.geo-cta-copy { flex: 1 1 0; min-width: 0; max-width: 66.666%; }
.geo-cta-copy h2 {
    margin: 0 0 8px; color: #fff;
    /* the ONE sized text element (Matt, 2026-07-16): the host's h2 scale reads
       way too big inside a slim band. em, so it still tracks the host's base. */
    font-size: 1.5em;
    line-height: 1.3;
}
.geo-cta-copy p {
    margin: 0; color: rgba(255,255,255,.85);
}
.geo-cta-action { flex: 0 0 auto; margin-left: auto; text-align: right; }
.geo-cta-btn {
    display: inline-block; padding: 14px 28px;
    background: var(--geo-accent); color: var(--geo-accent-text);
    border: 2px solid var(--geo-accent);
    border-radius: var(--geo-border-radius);
    font-weight: 700; text-decoration: none;
}
/* State rule stays ours: a host .btn-accent:hover can no longer tie
   (our class names exist nowhere else), but an unstyled hover still
   reads broken — same brand colors, uniformly darkened. */
.geo-cta-btn:hover, .geo-cta-btn:focus {
    background: var(--geo-accent); border-color: var(--geo-accent);
    color: var(--geo-accent-text);
    filter: brightness(0.88); text-decoration: none;
}
@media (max-width: 767px) {
    .geo-cta-row { flex-direction: column; text-align: center; }
    .geo-cta-copy { max-width: 100%; }
    .geo-cta-copy h2 { font-size: 1.3em; }
    .geo-cta-action { margin-left: 0; text-align: center; }
}

/* ============================================================================
   WELL CARDS - installation + permits (Matt, 2026-07-20)
   The same drop shadow the service-list fence cards carry
   (service-list.css: .fence-type-card, box-shadow: 0 4px 20px rgba(0,0,0,.2)),
   applied to the three wells in each of those sections.

   SCOPING: both selectors are prefixed, .geo-installation / .geo-permits (0,2,0),
   so they outrank the host's bare .well (0,1,0) on every client regardless of load
   order. .geo-permits was ADDED to permits-this-town.cfm for this; the section had
   no geo hook of its own at all. Never write a bare .well rule here - .well is the
   SITE's class and its own pages use it.

   Bootstrap ships .well with an INSET shadow
   (_bootstrap.css: box-shadow: inset 0 1px 1px rgba(0,0,0,.05)).
   Declaring box-shadow here replaces that inset outright, which is intended:
   these read as raised cards, not sunken wells.
   ============================================================================ */
.geo-installation .well,
.geo-permits .well {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* RADIUS MUST BE DECLARED HERE (added 2026-07-23). Leaving it off did not give these
       wells "no radius" - it gave them the HOST's, because _master.css says
       `.well { border-radius: var(--border-radius) }`. So installation and permits were the
       only geo surfaces taking the client's radius variable while gallery, intro, FAQ, the
       service-list cards and every geo-image took ours, and the two sections quietly
       mismatched the rest of the page on any client whose radius differs from what Branding
       set. Same trap as the banner text-align on Accent: an undeclared property is not the
       default, it is whatever the host says. */
    border-radius: var(--geo-border-radius);
}