/*
Theme Name: BBMforOFWs
Theme URI: https://bbmforofws.com
Author: user
Description: Pixel-perfect recreation of the live bbmforofws.com website as a classic WordPress theme. Content pages use core Gutenberg blocks with theme CSS; platform pages (galleries, topic) use dedicated templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bbmforofws
*/

/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                           GLOBALS                            */

/*----- Fonts (self-hosted; replicates the live loaded set) -----*/
/* NOTE: live requests family "Barlow Medium"/"Barlow Semibold" on headings, which
   does NOT exist (Google family is "Barlow"), so live headings render the system
   sans-serif. Decision (user, 2026-07-06): replicate that fallback EXACTLY —
   therefore no @font-face is declared for "Barlow Medium"/"Barlow Semibold". */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('assets/fonts/roboto-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/roboto-400i.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/roboto-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/fonts/roboto-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/barlow-700.woff2') format('woff2');
}

/*----- Design tokens (live values from generate/fonts_colors_css) -----*/
:root {
    --primary_font: Barlow;
    --secondary_font: Barlow;
    --color-red: rgba(192, 41, 27, 1);
    --color-blue: rgba(4, 48, 155, 1);
    --color-gray: rgba(244, 244, 244, 1);
}

/*----- Footer: the copyright email link inherits the navy .color-8 text color,
       exactly like live's (obfuscated) email link -----*/
.engage-footer .copyright a {
    color: inherit;
}

/*----- JS utilities (used by main.js) -----*/
.bbm-hidden {
    display: none !important;
}

/*----- Lightbox (vanilla replacement for ekko-lightbox, styled alike) -----*/
.bbm-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1050;
}
.bbm-lightbox.open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bbm-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}
.bbm-lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
}
.bbm-lightbox-close,
.bbm-lightbox-prev,
.bbm-lightbox-next {
    position: absolute;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    z-index: 1;
    padding: 8px 12px;
}
.bbm-lightbox-close {
    top: -40px;
    right: 0;
}
.bbm-lightbox-prev {
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
}
.bbm-lightbox-next {
    right: -48px;
    top: 50%;
    transform: translateY(-50%);
}
body.bbm-lightbox-open,
body.bbm-modal-open {
    overflow: hidden;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                     BUILDER PAGES (shared)                   */
/* Live serves these rules as inline <style> ONLY on the two    */
/* page-builder pages (home, voting-information) — scoped here  */
/* to body.bbm-builder-page to match that exactly.              */

body.bbm-builder-page h4 {
    font-size: 28px;
    font-weight: bold !important;
}
@media screen and (max-width: 1200px) {
    body.bbm-builder-page header .overlay .closeMenuMobile {
        top: 14px;
        right: 15px;
        left: auto;
    }
    body.bbm-builder-page header .overlay ul,
    body.bbm-builder-page header .overlay ul .nav-item {
        border: 0;
    }
    body.bbm-builder-page header .header-container .navbar .nav-item.no-border {
        margin-top: 15px !important;
    }
    body.bbm-builder-page header .header-container .navbar {
        justify-content: flex-start;
    }
}
/* Hamburger colors, measured on live 2026-07-07: white on cover pages (bbm.css),
   EXCEPT the homepage, where a home-only <style> block re-declares
   `.header-cover .fa-bars { color: #050c92 }` after bbm.css and wins. Non-cover
   pages get #04309B via the `color-5` class on the toggler span (header.php). */
body.home .header-cover .fa-bars {
    color: #050c92;
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .row-wrapper > .container > .row-spacing {
        margin-bottom: 40px !important;
    }
    body.bbm-builder-page .share-page-section {
        padding-top: 25px;
        padding-bottom: 40px;
    }
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .cover {
        display: none;
    }
}
body.bbm-builder-page .cover h1 {
    display: none;
}
body.bbm-builder-page .media-mobile {
    display: none;
}
body.bbm-builder-page .media-mobile > .container > .row-spacing {
    padding-top: 0 !important;
}
body.bbm-builder-page .media-mobile .media-widget {
    margin: 0;
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .media-mobile {
        display: block;
    }
    body.bbm-builder-page .media-mobile > .container > .row-spacing {
        margin-bottom: 20px !important;
    }
}
body.bbm-builder-page .primary-button {
    border-radius: 0;
    min-width: 180px;
    height: auto;
    padding: 10px 12px;
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .primary-button {
        padding: 7px 8px;
    }
}
body.bbm-builder-page .widget-form .form-title {
    font-size: 28px;
    font-weight: bold !important;
    margin-bottom: 2rem;
}
body.bbm-builder-page .widget-form input {
    border-radius: 0px;
    border-width: 1px;
}
body.bbm-builder-page .widget-form textarea {
    border-width: 1px;
    border-radius: 0;
}
body.bbm-builder-page .widget-form .container-checkbox {
    color: #909090;
    font-style: italic;
}
body.bbm-builder-page .container-checkbox .checkmark {
    border-color: #909090;
    border-width: 1px;
}
body.bbm-builder-page .container-checkbox:hover input ~ .checkmark {
    background-color: #80bdff;
}
body.bbm-builder-page .container-checkbox input:checked ~ .checkmark {
    background-color: #007bff;
}
body.bbm-builder-page .widget-form input::placeholder {
    font-style: italic;
    color: #909090;
}
body.bbm-builder-page .widget-form .captcha-container div div {
    margin-left: 0;
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .section-descriptionUndercover > .container > .row-spacing {
        margin-bottom: 20px !important;
    }
}
body.bbm-builder-page .section-description h4 {
    margin-bottom: 1rem;
}
body.bbm-builder-page .section-form .text-center {
    text-align: left !important;
}
@media screen and (max-width: 768px) {
    body.bbm-builder-page .section-form .text-center {
        text-align: center !important;
    }
}
body.bbm-builder-page .section-infoAndRequiries > .container > .row-spacing {
    align-items: center;
}
body.bbm-builder-page .section-video .widget-container:last-of-type {
    position: relative;
}
body.bbm-builder-page .section-video .widget-container:last-of-type .thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}
body.bbm-builder-page .share-page-section a.btn {
    background-color: #C0291B !important;
}
body.bbm-builder-page .share-page-section a b {
    font-size: 18px;
    font-weight: 300;
    color: #C0291B;
}
body.bbm-builder-page .accept-cookies {
    background-color: #0056b3;
}
body.bbm-builder-page .accept-cookies p a {
    color: #fff;
    font-weight: bold;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                            HOME                              */

/*----- Cover (hero): live overrides the base cover image inline -----*/
body.home .cover {
    background: linear-gradient(to bottom, transparent 6%, transparent 14%), url(/wp-content/uploads/2026/07/optim-mask-group-1-86c46192-ed09a62e_cd5bb9c6.png) !important;
    background-position: 50% !important;
}

/*----- Register form (CF7 styled to the live widget's computed values) -----*/
.bbm-register-form .form-title {
    text-align: center;
}
.bbm-register-form .form-group {
    margin-bottom: 20px;
}
.bbm-register-form .wpcf7-form-control-wrap {
    display: block;
}
.bbm-register-form input.form-input {
    width: 100%;
    height: 44px;
    padding: 5px 15px;
    font-size: 16px;
    border: 2px solid #b6b6b6;
    border-radius: 0;
    background-color: #fff;
}
@media (min-width: 769px) {
    .bbm-register-form .bbm-form-submit .primary-button {
        padding: 16px 20px;
        min-width: 180px;
    }
}
/* live's .primary-button has a 1px solid border (same color as the bg) — a theme
   reset drops it on CF7 inputs, leaving the button 2px shorter than live */
input.wpcf7-submit.primary-button {
    border: 1px solid rgba(192, 41, 27, 1);
}
/* live centers the submit on mobile (.section-form .text-center flips at 768) */
@media (max-width: 768px) {
    .bbm-register-form .bbm-form-submit {
        text-align: center;
    }
}
/* CF7's inline spinner reserves ~72px next to the button and shifts it off-center;
   live has no spinner at rest — show it only while submitting */
.wpcf7-form:not(.submitting) .wpcf7-spinner {
    display: none;
}

/*----- Consent checkboxes: CF7 markup styled like live's container-checkbox.
       Row pitch measured on live: 33px top-to-top; CF7's span wrappers add ~9px
       over the live label, so the margin compensates (12px on live's label). -----*/
.bbm-form-consent {
    margin-bottom: 12px;
}
.bbm-form-consent p {
    /* CF7 autop adds <p> with Bootstrap's 1rem bottom margin — live rows are 12px apart */
    margin: 0;
    font-size: 14px;
    line-height: 21px;
}
.bbm-form-consent .wpcf7-list-item {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
}
.bbm-form-consent .wpcf7-list-item label,
.bbm-form-consent .wpcf7-acceptance label {
    position: relative;
    display: inline-block;
    padding-left: 35px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-style: italic;
    color: #909090;
    cursor: pointer;
    margin: 0;
}
.bbm-form-consent input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: 0;
}
/* the drawn box (live: span.checkmark 25x25, border #909090, top -3px) */
.bbm-form-consent .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: -3px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid #909090;
}
.bbm-form-consent label:hover input ~ .wpcf7-list-item-label::before {
    background-color: #80bdff;
}
.bbm-form-consent input:checked ~ .wpcf7-list-item-label::before {
    background-color: #007bff;
}
/* the white check mark when checked */
.bbm-form-consent input:checked ~ .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 1px;
    width: 7px;
    height: 14px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*----- reCAPTCHA visual placeholder (no live keys locally — decision #4) -----*/
.bbm-recaptcha-placeholder {
    position: relative;
    width: 304px;
    height: 78px;
    margin: 24px 0 20px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
}
.bbm-recaptcha-checkbox {
    width: 28px;
    height: 28px;
    background-color: #fff;
    border: 2px solid #c1c1c1;
    border-radius: 2px;
    margin-right: 12px;
    flex: 0 0 auto;
}
.bbm-recaptcha-label {
    font-size: 14px;
    color: #000;
}
.bbm-recaptcha-brand {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 10px;
    color: #555;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                     VOTING INFORMATION                       */

/*----- Cover (hero): page-specific image and position -----*/
body.page-voting-information .cover {
    background: linear-gradient(to bottom, transparent 6%, transparent 14%), url(/wp-content/uploads/2026/07/voting-information-banner-optim_7dcaf973.jpg) !important;
    background-position: 70% !important;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                          POLL WATCH                          */

/*----- REPORT modal: vendor CSS has Bootstrap's .modal{display:none};
       main.js toggles .open (no Bootstrap JS shipped — decision #6) -----*/
.modal.open {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                             404                              */

/*----- Error content: live has NO extra rules for bigger-error/smaller-error/
       error-button (plain Bootstrap h3 + default link color). Only the layout is
       ours: flex column pins the footer to the viewport bottom (decision #10),
       replacing live's inline height:100vh div that pushed the footer offscreen. -----*/
body.error404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}
body.error404 .error-page-wrapper {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}
body.error404 .engage-footer {
    margin-top: auto;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                            SEARCH                            */

/*----- Results list (native WP search, site-styled — decision #9) -----*/
body.search {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}
body.search .search-page-wrapper {
    flex: 1 0 auto;
}
body.search .engage-footer {
    margin-top: auto;
}
.search-page-wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
}
.search-page-title {
    margin-bottom: 30px;
}
.search-results-list {
    list-style: none;
    padding: 0;
}
.search-result-item {
    margin-bottom: 24px;
}
.search-result-title {
    color: var(--color-blue);
    font-size: 20px;
    font-weight: 500;
}
.search-result-excerpt {
    margin: 6px 0 0;
}
.search-no-results {
    font-size: 18px;
}

/* ============================================================ */
/*                          GALLERIES                           */

/* live's Upload Images control is a <label> that keeps Bootstrap's 8px
   bottom margin — without it the masonry grid sits 8px higher than live */
.bbm-upload-images-button {
    margin-bottom: 8px;
}