/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.1
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */

/* -----------------------------------------------
   Projects Archive — FacetWP Filter Bar
----------------------------------------------- */
/* Reusable filter-row label (apply class to a BB Rich Text module) */
.mb-filter-label p,
.mb-filter-label {
    color: #e8470a;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* "Filter Projects:" label (BB Rich Text module) */
.fl-node-vhws3ickogq5 p {
    color: #e8470a;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Pills — Tags facet (filled) */
.facetwp-facet-project_tags .facetwp-radio {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 4px 8px;
    border: 1px solid #fff;
    border-radius: 50px;
    color: #0c2340;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.2;
    /* Offset trailing letter-spacing so left/right padding appear equal */
    padding-right: calc(16px - 0.08em);
}

.facetwp-facet-project_tags .facetwp-radio.checked,
.facetwp-facet-project_tags .facetwp-radio:hover {
    background: #e8470a;
    border-color: #e8470a;
    color: #fff;
    font-weight: 700;
}

/* Pills — Services facet (filled white, matches Tags facet) */
.facetwp-facet-project_service_filter .facetwp-radio {
    display: inline-block;
    padding: 7px 16px;
    margin: 0 4px 8px;
    border: 1px solid #fff;
    border-radius: 50px;
    color: #0c2340;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.2;
    padding-right: calc(16px - 0.08em);
}

.facetwp-facet-project_service_filter .facetwp-radio.checked,
.facetwp-facet-project_service_filter .facetwp-radio:hover {
    background: #e8470a;
    border-color: #e8470a;
    color: #fff;
    font-weight: 700;
}

/* -----------------------------------------------
   Projects Archive — Two-Row Filter Bar Layout
   Apply `mb-filter-row` to the BB column that contains
   all 5 filter modules, in this DOM order:
     1) Tags label   2) Tags facet
     3) Services label   4) Services facet
     5) Reset facet
   Flex-wrap puts Tags on row 1, Services on row 2 (each
   label's pills flow immediately after it). The Reset is
   taken out of flow and pinned to the right, centered
   vertically across both rows.
----------------------------------------------- */
.mb-filter-row .fl-col-content {
    display: flex;
    flex-direction: row;          /* override BB equal-height, which sets
                                     flex-direction: column on .fl-col-content */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;  /* override BB equal-height/align-center,
                                     which otherwise centers the flex items */
    gap: 0 14px;               /* column gap only; row spacing set by the break */
    position: relative;        /* containing block for the reset */
    padding-right: 150px;      /* reserve space for the pinned reset;
                                  adjust if the reset label changes */
}

/* Explicit line break: a full-width, zero-content flex item. Everything
   ordered after it wraps to a second row. flex-grow alone can't do this —
   flex computes line-breaking before distributing space. Its height sets
   the vertical gap between the Tags row and the Services row. */
.mb-filter-row .fl-col-content::before {
    content: '';
    flex: 0 0 100%;
    height: 14px;
    order: 3;
}

/* Order the modules so the break (order 3) sits between the Tags pair
   and the Services pair. */
.mb-filter-row .fl-col-content > :nth-child(1) { order: 1; }  /* Tags label */
.mb-filter-row .fl-col-content > :nth-child(2) { order: 2; }  /* Tags facet */
.mb-filter-row .fl-col-content > :nth-child(3) { order: 4; }  /* Services label */
.mb-filter-row .fl-col-content > :nth-child(4) { order: 5; }  /* Services facet */

/* Reset — pulled out of flow, pinned to the right edge,
   vertically centered across both rows. */
.mb-filter-row .fl-col-content > :nth-child(5) {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Kill default module bottom margins inside the flex rows */
.mb-filter-row .fl-module {
    margin-bottom: 0;
}

/* Labels: force the wrapper to the same outer height as a pill, then
   center the text inside. With equal-height boxes whose text is centered
   in each, align-items:center on the row produces identical vertical
   centering across Safari/Chrome/Firefox. */
.mb-filter-row .mb-filter-label {
    display: flex;
    align-items: center;
    min-height: 29px;             /* matches pill: 7+7 pad + 13.2 line + 2 border */
    box-sizing: border-box;
}
.mb-filter-row .mb-filter-label p {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    /* Optical correction: the label's 13px caps and the pills' 11px caps
       have their visual cap-middle at slightly different positions within
       their line-boxes. Box-center alignment leaves the label reading as
       a hair high; nudge down by 1px to match the optical centerline. */
    transform: translateY(1px);
}

/* Kill BB module-content padding inside the filter row so each module's
   visible content fills its flex item edge-to-edge (lets align-items
   actually center the visible content). */
.mb-filter-row .fl-module-content {
    margin: 0;
}

/* -----------------------------------------------
   Reset facet — pill treatment (outline white, orange on hover)
----------------------------------------------- */
.facetwp-facet-project_reset .facetwp-reset,
.facetwp-facet-project_reset a,
.facetwp-facet-project_reset button {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #fff;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1.2;
    text-decoration: none;
    padding-right: calc(16px - 0.08em);
}

.facetwp-facet-project_reset .facetwp-reset:hover,
.facetwp-facet-project_reset a:hover,
.facetwp-facet-project_reset button:hover {
    background: #e8470a;
    border-color: #e8470a;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* Pills: drop the 8px bottom-margin in single-row mode */
.mb-filter-row .facetwp-facet .facetwp-radio {
    margin-bottom: 0;
}

/* Collapse the .facetwp-facet wrapper's inherited body line-height (32.4px)
   so its line-box doesn't sit taller than the pills inside. Without this,
   Chrome/Firefox use the wrapper's line-box for baseline alignment and the
   labels appear off-center; Safari uses the pill's actual baseline. */
.mb-filter-row .facetwp-facet {
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 0;
}

/* -----------------------------------------------
   Filter row — mobile layout
   On narrow screens, un-pin the Reset from the right
   edge, push it to its own row below Services, and
   restore bottom-margin on pills so wrapped rows
   inside a facet are visually separated.
----------------------------------------------- */
@media (max-width: 820px) {
    /* Restore bottom margin on pills so wrapped rows have spacing. */
    .mb-filter-row .facetwp-facet .facetwp-radio {
        margin-bottom: 8px;
    }

    /* Drop the right-reservation the desktop layout used for the
       absolute-positioned Reset. */
    .mb-filter-row .fl-col-content {
        padding-right: 0;
    }

    /* Second line break so the Reset wraps to its own row below
       the Services row. */
    .mb-filter-row .fl-col-content::after {
        content: '';
        flex: 0 0 100%;
        height: 14px;
        order: 6;
    }

    /* Reset facet — back into normal flow on its own row. */
    .mb-filter-row .fl-col-content > :nth-child(5) {
        position: static;
        transform: none;
        order: 7;
    }
}


/* Reduce gap between filter bar and project grid */
.fl-node-d5holxs0ca3n {
    margin-bottom: 5px;
}
.fl-node-6s9d1apuqz2o {
    margin-top: 5px;
}

/* -----------------------------------------------
   Post Loop — Shared Card Box Styles
   (Projects archive + Home page)
----------------------------------------------- */
.fl-loop-item .fl-module.fl-module-box {
    background-color: var(--fl-global-accent-color-2); /* #FFFCF2 */
    border: none;
}

/* -----------------------------------------------
   Projects Archive — Tag Pill Overlay on Cards
----------------------------------------------- */
/* Card box needs relative positioning for the overlay */
.fl-loop-item .fl-module-box {
    position: relative;
}

/* Position the HTML module (tag) over the photo */
.fl-loop-item .fl-module-html {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

/* Style the tag link as a pill */
.fl-loop-item .fl-module-html a {
    display: inline-block;
    padding: 7px 16px;
    background: #e8470a;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    line-height: 1.2;
    padding-right: calc(16px - 0.08em);
}

/* -----------------------------------------------
   Projects Archive — Card Title & Learn More
----------------------------------------------- */
/* Project title & link */
.fl-loop-item .fl-module-heading .fl-heading-text,
.fl-loop-item .fl-module-heading .fl-heading-text a {
    color: #0c2340;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

.fl-loop-item .fl-module-heading .fl-heading-text a:hover {
    color: #e8470a;
}

/* "Learn more" link */
.fl-loop-item .fl-module-rich-text a {
    color: #e8470a;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.fl-loop-item .fl-module-rich-text a:hover {
    text-decoration: underline;
}

/* -----------------------------------------------
   Random Photo Strip (shortcode)
----------------------------------------------- */
.random-photo-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
}

.random-photo-strip__item img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

@media (max-width: 820px) {
    .random-photo-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .random-photo-strip__item img {
        height: 200px;
    }
}

/* -----------------------------------------------
   Payment Form ([payment_form] shortcode)
----------------------------------------------- */
.mb-payment-card {
    max-width: 520px;
    margin: 0 auto;
}
.mb-payment-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7a8d;
    margin-bottom: 6px;
}
.mb-field-group {
    margin-bottom: 16px;
    flex: 1;
}
.mb-field-group.mb-field-grow {
    flex: 1.2;
}
.mb-field-row {
    display: flex;
    gap: 12px;
}
.mb-payment-card input[type="text"],
.mb-payment-card input[type="email"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #c8cfd7;
    border-radius: 6px;
    color: #0c2340;
    background: #fff;
    height: 44px;
    box-sizing: border-box;
}
.mb-payment-card input:focus {
    outline: none;
    border-color: #e8470a;
}
.mb-amount-wrap {
    position: relative;
}
.mb-dollar-sign {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #6b7a8d;
    pointer-events: none;
}
.mb-amount-wrap input {
    padding-left: 28px !important;
}

/* Collect.js iframe containers */
#ccnumber iframe,
#ccexp iframe,
#cvv iframe {
    height: 44px !important;
    width: 100% !important;
}

.mb-pay-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: #e8470a;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.mb-pay-btn:hover {
    background: #cf3d08;
}
.mb-pay-btn:disabled {
    background: #a0a0a0;
    cursor: not-allowed;
}

/* Response messages */
.mb-payment-response {
    margin-top: 20px;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
}
.mb-payment-success {
    background: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}
.mb-payment-error {
    background: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}
.mb-payment-response code {
    background: rgba(0,0,0,.06);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}

/* Test Mode banner and readonly demo fields */
.mb-test-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
}
.mb-test-banner strong { color: #664d03; }

.mb-payment-card .mb-demo-field {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #c8cfd7;
    border-radius: 6px;
    color: #0c2340;
    background: #f8f9fa;
    height: 44px;
    font-family: monospace;
    box-sizing: border-box;
}

/* -----------------------------------------------
   Home — "Class A Contractor" Row Mechanical Drawing Background
----------------------------------------------- */
.fl-node-ipk5aox390hz .fl-row-content-wrap {
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

.fl-node-ipk5aox390hz .fl-row-content-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2026/04/drawing_1_bg-scaled.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.fl-node-ipk5aox390hz .fl-row-content-wrap > * {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------
   Home — "Capabilities" Row Plumbing Drawing Background
----------------------------------------------- */
.fl-node-u1n3o4yeifvw .fl-row-content-wrap {
    position: relative;
    overflow: hidden;
}

.fl-node-u1n3o4yeifvw .fl-row-content-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2026/04/plumbing_drawing_bg-scaled.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

.fl-node-u1n3o4yeifvw .fl-row-content-wrap > * {
    position: relative;
    z-index: 1;
}


/* -----------------------------------------------
   Project Details Section
   Rendered by the [project_details] shortcode — the
   detail grid only; the section heading and project
   title are handled in the Themer layout.
   The grid flexes to any number of detail items;
   trailing borders are clipped via a negative margin,
   so no JS or per-item column math is needed.

   Color variables default to the brand palette below
   and are overridden at runtime from Beaver Builder
   Global Colors (see functions.php).
----------------------------------------------- */
.mb-pd {
    --mb-pd-accent:   #EB5D29;  /* BB Global Color: "accent"    */
    --mb-pd-ink:      #000000;  /* BB Global Color: "text dark" */
    --mb-pd-hairline: #E8DFD1;  /* BB Global Color: "accent 3"  */
    --mb-pd-muted:    #6b6b6b;  /* constant — no Global Color   */
    /* Desktop column count comes from the shortcode (--mb-pd-cols-base);
       the media queries below override --mb-pd-cols for smaller screens. */
    --mb-pd-cols:     var(--mb-pd-cols-base, 4);

    width: 100%;
}

/* Clip wrapper: strong rules top & bottom; hides bled trailing hairlines. */
.mb-pd__clip {
    overflow: hidden;
    border-top: 1px solid var(--mb-pd-ink);
    border-bottom: 1px solid var(--mb-pd-ink);
}

.mb-pd__grid {
    display: grid;
    grid-template-columns: repeat(var(--mb-pd-cols), 1fr);
    /* Pull last column / row hairline 1px past the clip so it disappears. */
    margin: 0 -1px -1px 0;
}

.mb-pd__item {
    padding: 26px 28px;
    border-right: 1px dotted var(--mb-pd-hairline);
    border-bottom: 1px dotted var(--mb-pd-hairline);
}

.mb-pd__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-pd-muted);
    margin-bottom: 10px;
}

.mb-pd__value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--mb-pd-ink);
}

.mb-pd__value a {
    color: var(--mb-pd-ink);
    border-bottom: 1.5px solid var(--mb-pd-accent);
    padding-bottom: 1px;
    text-decoration: none;
}

.mb-pd__value a:hover {
    color: var(--mb-pd-accent);
    text-decoration: none;
}

.mb-pd__sep {
    color: var(--mb-pd-hairline);
    margin: 0 6px;
    font-weight: 400;
}

@media (max-width: 820px) {
    .mb-pd { --mb-pd-cols: 2; }
}

@media (max-width: 540px) {
    .mb-pd { --mb-pd-cols: 1; }
}