@charset "UTF-8";
/*!
Theme Name: acBase
Theme URI:
Author: RapidDev
Author URI: https://www.rapidevelopers.com/
Description: RapidDev custom WordPress theme development.
Version: 2.0.0
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 7.0
Text Domain: acb_td
Tags: one-column, two-columns, custom-menu, full-width-template,  theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* ============================================================
   CRO 2026-06-24 — custom CSS overrides.
   Enqueued sitewide (front end) via includes/scripts.php, handle "hb-cro".
   The theme's main.css/app.css are NOT reliably linked on standard pages,
   so CRO style overrides belong here.
   ============================================================ */

/* #2: standout hero "Call us" CTA — full button variant (mirrors .btn_white geometry, yellow palette),
   scoped to the hero banner so it never leaks to other buttons sitewide. */
.section-hero--banner .btn_yellow {
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    color: #18181b;
    background: #FAE693;
    border-radius: 100px;
    height: initial;
    min-height: 52px;
}
.section-hero--banner .btn_yellow:hover,
.section-hero--banner .btn_yellow:focus {
    background: #18181b;
    color: #FAE693;
    text-decoration: none;
}
@media (max-width: 991px) {
    .section-hero--banner .btn_yellow {
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 5px 20px;
    }
}

/* ============================================================
   CRO #1 / #4 — Mobile sticky "call bar" (go.hoffmannbros.com-exact, option #4).
   Markup in footer.php (.hbgo). Mobile only (<768px); hides the floating "+" FAB
   (.fixed-feedback) on mobile. CSS-only, no JS dependency. Number is dynamic
   (Nashville / per-page override), href normalized to E.164 in PHP.
   ============================================================ */
/* The old multi-action "+" FAB is replaced sitewide: mobile → .hbgo call bar (#1/#4),
   desktop → .hb-desk-cta "Schedule Online" pill (#5). It stays in the DOM (hidden) so app.js's
   .open-feedback-menu toggle handler never hits a null element. */
.fixed-feedback {
    display: none !important;
}
.hbgo {
    display: none;
}
@media (max-width: 767.98px) {
    .hbgo {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
    }
    .hbgo a {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #c8102e;
        color: #fff;
        text-decoration: none;
        font-family: "Work Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        padding: 12px 18px;
        border-radius: .75rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
        transition: background .15s ease;
    }
    .hbgo a:hover,
    .hbgo a:focus {
        background: #a00d24;
        color: #fff;
    }
    body {
        padding-bottom: 84px !important;
    }
}

/* ============================================================
   CRO #5 — Desktop floating "Schedule Online" pill. Desktop only (>=768px); opens the Netic
   scheduler via the existing .widget-open handler (no new JS). Mobile uses the .hbgo call bar.
   ============================================================ */
.hb-desk-cta {
    display: none;
}
@media (min-width: 768px) {
    .hb-desk-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 40;
        background: #c8102e;
        color: #fff;
        border: 0;
        cursor: pointer;
        font-family: "Work Sans", sans-serif;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        padding: 14px 22px;
        border-radius: 100px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15), 0 4px 6px -4px rgba(0, 0, 0, .1);
        transition: background .15s ease, transform .15s ease;
    }
    .hb-desk-cta:hover,
    .hb-desk-cta:focus {
        background: #a00d24;
        color: #fff;
        transform: translateY(-1px);
    }
    .hb-desk-cta svg {
        width: 20px;
        height: 20px;
        flex: none;
    }
}

/* ============================================================
   CRO #2 / #7 — Optional dedicated "Call (number)" button on the service-page hero
   (blocks/page-hero-block.php, .hb-hero-call). Per-page ACF toggle (additive 3rd button).
   Yellow accent so the call action stands out, mirroring the homepage hero's yellow CTA.
   (.btn_yellow is hero-banner-scoped, so the yellow is defined directly here.)
   ============================================================ */
.hb-hero-call {
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    height: initial;
    min-height: 52px;
    border-radius: 100px;
    background: #FAE693;
    color: #18181b;
    border: 1px solid #FAE693;
}
.hb-hero-call:hover,
.hb-hero-call:focus {
    background: #18181b;
    color: #FAE693;
    text-decoration: none;
}

/* ============================================================
   CRO #6 — "Call + Schedule" CTA band  (block: acf/cta-band-block)
   Render: blocks/cta-band-block.php  →  <section class="hb-cta-band hb-cta-band--{brand|light}">
   Reusable conversion band dropped between homepage sections. Two CO-EQUAL CTAs:
     • "Schedule Online" — opens the Netic scheduler (.widget-open / NeticScheduler.open()), no new JS
     • "Call (number)"   — E.164 tel: href + "(XXX) XXX-XXXX" label (CRO #8 helpers)
   Palette: brand red #c8102e (hover #a00d24), hero yellow #FAE693, ink #18181b. Work Sans.
   ============================================================ */
.hb-cta-band {
    box-sizing: border-box;
    width: 100%;
    padding: 56px 0;
    font-family: "Work Sans", sans-serif;
}
.hb-cta-band *,
.hb-cta-band *::before,
.hb-cta-band *::after { box-sizing: border-box; }

.hb-cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}
.hb-cta-band__text { flex: 1 1 360px; }

.hb-cta-band__heading {
    margin: 0 0 8px;
    font-family: "Work Sans", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
}
.hb-cta-band__copy {
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.45;
}
/* Keep band text left-aligned — the theme center-aligns section text by default,
   which the heading/copy would otherwise inherit. */
.hb-cta-band__text,
.hb-cta-band__heading,
.hb-cta-band__copy { text-align: left; }

/* ---- actions: two co-equal pill buttons (reuse base .btn geometry) ---- */
.hb-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    flex: 0 1 auto;
}
.hb-cta-band__btn {
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.1;
    border-radius: 100px;
    min-height: 58px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    gap: 10px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.hb-cta-band__btn:hover,
.hb-cta-band__btn:focus {
    transform: translateY(-1px);
    text-decoration: none;
}
.hb-cta-band__phone-icon { flex: none; }

/* ---------- Band backgrounds + text ---------- */
.hb-cta-band--brand { background: #c8102e; color: #fff; }
.hb-cta-band--brand .hb-cta-band__heading { color: #fff; }
.hb-cta-band--brand .hb-cta-band__copy { color: #ffe3e8; }

.hb-cta-band--light { background: #f5f5f5; color: #18181b; }
.hb-cta-band--light .hb-cta-band__heading { color: #18181b; }
.hb-cta-band--light .hb-cta-band__copy { color: #52525b; }

/* ---------- Reusable per-button color modifiers ----------
   Each button (Schedule / Call) picks one via a dropdown. "Auto" in the editor
   resolves in PHP to the per-band default so an untouched block is unchanged:
     brand → Schedule: yellow, Call: outline   •   light → Schedule: red, Call: charcoal
   These work on EITHER band background; only --outline is band-context-aware. */
.hb-cta-band__btn--yellow { background: #FAE693; color: #18181b; border-color: #FAE693; }
.hb-cta-band__btn--yellow:hover,
.hb-cta-band__btn--yellow:focus { background: #fff; color: #18181b; border-color: #fff; }

.hb-cta-band__btn--red { background: #c8102e; color: #fff; border-color: #c8102e; }
.hb-cta-band__btn--red:hover,
.hb-cta-band__btn--red:focus { background: #a00d24; color: #fff; border-color: #a00d24; }

.hb-cta-band__btn--charcoal { background: #18181b; color: #fff; border-color: #18181b; }
.hb-cta-band__btn--charcoal:hover,
.hb-cta-band__btn--charcoal:focus { background: #000; color: #fff; border-color: #000; }

/* White: solid white button — matches the hero/header "Book Online" (btn_white).
   Used as the brand-band Schedule default so it pairs with the yellow Call accent. */
.hb-cta-band__btn--white { background: #fff; color: #18181b; border-color: #fff; }
.hb-cta-band__btn--white:hover,
.hb-cta-band__btn--white:focus { background: #f1f1f1; color: #18181b; border-color: #f1f1f1; }

/* Outline: transparent + bordered; text/border follow the band background. */
.hb-cta-band--brand .hb-cta-band__btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.hb-cta-band--brand .hb-cta-band__btn--outline:hover,
.hb-cta-band--brand .hb-cta-band__btn--outline:focus { background: #fff; color: #c8102e; border-color: #fff; }
.hb-cta-band--light .hb-cta-band__btn--outline { background: transparent; color: #18181b; border-color: #18181b; }
.hb-cta-band--light .hb-cta-band__btn--outline:hover,
.hb-cta-band--light .hb-cta-band__btn--outline:focus { background: #18181b; color: #fff; border-color: #18181b; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .hb-cta-band { padding: 32px 0; }
    .hb-cta-band__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
    /* Row-layout basis (360px) becomes a HEIGHT in the column layout — reset to content height. */
    .hb-cta-band__text { flex: 0 1 auto; }
    .hb-cta-band__heading { font-size: 26px; }
    .hb-cta-band__copy { font-size: 16px; }
    .hb-cta-band__actions { width: 100%; }
}
@media (max-width: 575px) {
    .hb-cta-band__actions { flex-direction: column; }
    .hb-cta-band__btn { width: 100%; }
}

/* ============================================================
   Button Block (block: acf/button-block) — one centered CTA button, transparent bg.
   Render: blocks/button-block.php. Link auto-handles #widget-open (Netic) + tel: (E.164).
   Color modifiers share the CTA-band palette: brand red #c8102e, yellow #FAE693, ink #18181b.
   ============================================================ */
.hb-btn-block {
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    padding: 32px 0;
    font-family: "Work Sans", sans-serif;
}
.hb-btn-block__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Alignment (default = center) */
.hb-btn-block--align-left .hb-btn-block__inner { justify-content: flex-start; }
.hb-btn-block--align-center .hb-btn-block__inner { justify-content: center; }
.hb-btn-block--align-right .hb-btn-block__inner { justify-content: flex-end; }
/* Vertical padding (default = md / 32px) */
.hb-btn-block--pad-none { padding: 0; }
.hb-btn-block--pad-sm { padding: 16px 0; }
.hb-btn-block--pad-md { padding: 32px 0; }
.hb-btn-block--pad-lg { padding: 56px 0; }
.hb-btn-block--pad-xl { padding: 88px 0; }
.hb-btn-block__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    min-height: 52px;
    height: initial;
    padding: 12px 28px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.hb-btn-block__btn:hover,
.hb-btn-block__btn:focus {
    transform: translateY(-1px);
    text-decoration: none;
}
.hb-btn-block__btn--red { background: #c8102e; color: #fff; border-color: #c8102e; }
.hb-btn-block__btn--red:hover,
.hb-btn-block__btn--red:focus { background: #a00d24; color: #fff; border-color: #a00d24; }

.hb-btn-block__btn--yellow { background: #FAE693; color: #18181b; border-color: #FAE693; }
.hb-btn-block__btn--yellow:hover,
.hb-btn-block__btn--yellow:focus { background: #18181b; color: #FAE693; border-color: #18181b; }

.hb-btn-block__btn--white { background: #fff; color: #18181b; border-color: #fff; }
.hb-btn-block__btn--white:hover,
.hb-btn-block__btn--white:focus { background: #f1f1f1; color: #18181b; border-color: #f1f1f1; }

.hb-btn-block__btn--charcoal { background: #18181b; color: #fff; border-color: #18181b; }
.hb-btn-block__btn--charcoal:hover,
.hb-btn-block__btn--charcoal:focus { background: #000; color: #fff; border-color: #000; }

.hb-btn-block__btn--outline { background: transparent; color: #18181b; border-color: #18181b; }
.hb-btn-block__btn--outline:hover,
.hb-btn-block__btn--outline:focus { background: #18181b; color: #fff; border-color: #18181b; }

@media (max-width: 575px) {
    .hb-btn-block__btn { width: 100%; }
}