/*
   FSDG site-specific styles for template-native pages (root, es/, locations/).
   These are the ONLY site additions on top of the Framex template css
   (bootstrap / slicknav / swiper / all.min / animate / magnific /
   mousecursor / custom.css). Legacy shim css (fsdg-compat.css) is NOT
   linked by these pages.
   Edit rules here, never in custom.css (template-owned).
*/

/* Brand palette (2026-09): aqua accent + navy structural.
   Overrides the template defaults from custom.css :root. */
:root {
    --primary-color: #012136;
    --accent-color: #00B8CD;
    --divider-color: rgba(1, 33, 54, 0.10);
    /* Template body gray #83827F is 3.6-3.9:1 on white/cream (AA needs
       4.5:1 for body text). Same warm gray, one step darker: 5.0:1 on
       white, 4.6:1 on cream. Affects all paragraphs, inputs, subtitles. */
    --text-color: #6F6E6B;
    /* Accent #00B8CD is only 2.4:1 as text on white/cream (fine on navy:
       6.9:1). Darker same-hue teal for accent-colored TEXT on light
       backgrounds: 5.1:1 on white. Icons/bullets/chevrons stay
       --accent-color (non-text, 3:1 rule n/a for decorative). */
    --accent-text-color: #007A89;
}

/* Width/height attrs added sitewide (2026-10-03) are CLS aspect-ratio hints
   only. The height attribute acts as a presentational hint that squashes any
   img whose width is constrained by a class rule without a height (footer
   logo, icon-boxes, client images...). Element-level auto beats the hint but
   correctly loses to every class rule that sets height (object-fit covers). */
img {
    height: auto;
}

/* Buttons: the template navy label reads gray on the cyan accent —
   use true black instead (8.7:1 AA). Hover/btn-highlighted states and
   the navy arrow svg (visually identical to black) stay template-native. */
.btn-default {
    color: #000000;
}

/* Navy image scrims — custom.css hardcodes near-black rgba(24,24,24,x)
   gradients, restate them with the navy brand rgb(1,33,54) at the same
   alphas/positions. */
.hero::before {
    background: linear-gradient(90deg, rgba(1, 33, 54, 0.8) 0%, rgba(1, 33, 54, 0.72) 36.01%, transparent 63.02%), linear-gradient(180deg, rgba(1, 33, 54, 0.8) 0%, transparent 18.18%);
}

.project-item-image figure a::before {
    background: linear-gradient(180deg, transparent 39.2%, rgba(1, 33, 54, 0.8) 100%);
}

.intro-video-content-box::before {
    background: linear-gradient(180deg, transparent 50.75%, rgba(1, 33, 54, 0.8) 100%);
}

.contact-us-box::before {
    background: linear-gradient(270deg, transparent -5%, rgba(1, 33, 54, 0.9) 100%);
}

.page-header:before {
    background: linear-gradient(90deg, rgba(1, 33, 54, 0.8) 0%, rgba(1, 33, 54, 0.72) 36.01%, transparent 63.02%), linear-gradient(180deg, rgba(1, 33, 54, 0.8) 0%, transparent 18.18%);
}

.hero-img-slider-metal:before {
    background: linear-gradient(90deg, rgba(1, 33, 54, 0.80) 16.17%, transparent 100%);
}

.cta-box-metal::before {
    background: linear-gradient(90deg, rgba(1, 33, 54, 0.90) 30.93%, transparent 75.22%);
}

.core-features-item-stone.box-2 .core-features-item-image-stone figure::before {
    background: linear-gradient(180deg, transparent 50%, rgba(1, 33, 54, 0.80) 82.5%);
}

.team-item-image-stone figure::before {
    background: linear-gradient(180deg, transparent 50%, rgba(1, 33, 54, 0.80) 90%);
}

.navbar-brand img {
    max-height: 50px;
    width: auto;
}

/* Admin-managed logo spacing. The template pads the header via
   `.navbar { padding: 30px 0 }` (20px below 991px) — the .container only
   adds 15px horizontal, which stays so the logo aligns with page content.
   Neutralize the navbar padding and restated the same defaults on the
   brand anchor, so the inline style emitted from nav.json
   (logo paddingTop/paddingBottom, admin Menu Editor) is the ONLY
   vertical control and overrides these defaults. */
.main-header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand {
    padding-top: 30px;
    padding-bottom: 30px;
}

@media only screen and (max-width: 991px) {
    .navbar-brand {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* FontAwesome <i> icons inside template .icon-box (template ships <img> icons) */
.icon-box i {
    color: var(--white-color);
    font-size: 22px;
    position: relative;
    z-index: 1;
}

/* service-window-item placed directly inside Bootstrap columns
   (locations city/county pages). custom.css sizes it
   calc(33.33% - 20px) for the flex .service-window-item-list wrapper
   only — inside a column that renders as a 1/3-width sliver of the
   column. Fill the column instead; margin replaces the list's 30px
   row gap. Direct child (>) so list-wrapped items (root services
   pages, locations hub) keep template sizing. */
.col-sm-4 > .service-window-item,
.col-sm-6 > .service-window-item {
    width: 100%;
    margin-bottom: 30px;
}

/* .service-entry ol — custom.css styles .service-entry ul (check icons,
   margins) but not ol, leaving ordered lists on browser defaults with no
   li spacing (items mash together). Mirrors the template's content-ol
   pattern (.post-entry ol, custom.css:4005): decimal markers kept, list
   margin + li spacing added to match .service-entry ul's rhythm. */
.service-entry ol {
    margin: 0 0 20px;
    padding-left: 25px;
}

.service-entry ol li {
    margin-bottom: 15px;
}

.service-entry ol li:last-child {
    margin-bottom: 0;
}

/* Standalone subscribe section (template expresses newsletter as a footer
   widget; FSDG keeps the pre-footer section). White band with hairline
   borders frames it between the cream page body and the dark footer.
   Padding matches the template section rhythm (cf. .cta-box 120px 0 ->
   60px 0 at 991px): every section boundary = both paddings stacked. */
.site-subscribe {
    padding: 120px 0;
    background-color: var(--white-color);
    border-top: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
}

@media only screen and (max-width: 991px) {
    .site-subscribe {
        padding: 60px 0;
    }
}

.subscribe-form {
    max-width: 600px;
    margin: 0 auto;
}

.subscribe-form .form-group {
    display: flex;
    gap: 15px;
}

.subscribe-form input {
    flex: 1;
}

/* Input: the template's light-section form treatment (.contact-form
   .form-control, custom.css) reshaped into a pill so it sits flush with
   the pill .btn-default beside it; aqua focus ring. */
.subscribe-form .form-control {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background-color: var(--bg-color);
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 13px 24px;
    outline: none;
    box-shadow: none;
}

.subscribe-form .form-control::placeholder {
    color: var(--text-color);
}

.subscribe-form .form-control:focus {
    background-color: var(--white-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 184, 205, 0.15);
}

/* reCAPTCHA v2 widget (same key pair as contact form) — centered
   under the email row */
.subscribe-form .g-recaptcha {
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

/* Newsletter signup result message (form is replaced by js/site-subscribe.js) */
.subscribe-form .nl-msg {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 15px 24px;
    background-color: var(--bg-color);
    border-radius: 100px;
}

.subscribe-form .nl-msg-err {
    color: #d32f2f;
}

/* Small screens: stack like the template's own footer newsletter form
   (.footer-newsletter-form .btn-default{width:100%}, custom.css:2747) */
@media only screen and (max-width: 575px) {
    .subscribe-form .form-group {
        flex-direction: column;
        gap: 20px;
    }

    .subscribe-form .form-group .btn-default {
        width: 100%;
    }
}

/* services grid card text (page-services) */
.service-item-content p {
    margin: 10px 0 0;
}

/* In-content links. custom.css styles anchors per-component only and its
   global `a{}` sets no color, so links inside body copy render browser
   default blue. Template pattern (cf. .footer-links ul li a and
   .section-footer-text p a): inherit text color + accent on hover. */
.service-entry a,
.about-us-content a,
.about-us-body-content a,
.contact-us-info-content a,
.how-it-work-item-content a,
.service-feature-item a,
.section-title-content a,
.section-title p a,
.cta-content-metal p a,
.accordion-body a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all 0.4s ease-in-out;
}

.service-entry a:hover,
.about-us-content a:hover,
.about-us-body-content a:hover,
.contact-us-info-content a:hover,
.how-it-work-item-content a:hover,
.service-feature-item a:hover,
.section-title-content a:hover,
.section-title p a:hover,
.cta-content-metal p a:hover,
.accordion-body a:hover {
    color: var(--accent-text-color);
}

/* Anchor buttons inside the containers above: the link rules match them
   at equal-or-higher specificity than .btn-default (inherit+bold+underline
   label). Restore the button label and hover. */
a.btn-default {
    color: #000000;
    font-weight: 500;
    text-decoration: none;
}

a.btn-default:hover {
    color: var(--white-color);
}

/* Footer link boxes (Quick Links / Our Services / Contact Us):
   custom.css caps each .footer-links-metal at 26% of the flex row —
   too narrow for single-line items like the email address (one
   unbreakable word) or "Miami-Dade: 305-814-7483". Let each box take
   its content width (space-between re-spreads the trio) and keep every
   item on one line; at <1200px the boxes stack as before. */
.footer-links-box-metal .footer-links-metal {
    max-width: none;
}

.footer-links-box-metal .footer-links-metal ul li {
    white-space: nowrap;
}

/* Footer link boxes: Contact Us box removed — Quick Links + Our Services
   remain. Our Services (2nd box) takes the freed width: its 8 links flow
   in two columns on desktop; below that the boxes stack as before. */
@media only screen and (min-width: 992px) {
    .footer-links-box-metal .footer-links-metal:nth-child(2) ul {
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap: 40px;
    }
}

/* Blog filter bar (category/tag filtering via posts.json) */
.sdr-filter-bar { margin-bottom: 30px; }
.sdr-filter-bar .sdr-active-cat {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 14px;
    background: var(--accent-color);
    color: #000000; /* white label on cyan was 2.4:1 — matches btn-default black-label scheme */
    border-radius: 4px;
}
.sdr-filter-clear { font-size: 13px; color: #5f6f7f; text-decoration: underline; }

/* Template accent-text links sit on light backgrounds (white/cream) where
   the cyan accent reads 2.4:1 — repoint them to the darker accent-text
   token. Hover-only states left template-native (transient). */
.section-footer-text p a,
.post-entry a {
    color: var(--accent-text-color);
}