/*
 * SITE-SPECIFIC CSS for this one site.
 * Theme updates replace every child-theme file EXCEPT the /site/ folder, so edits here are kept.
 * Loads after the base style.css, so rules here override it.
 */

/* CUSTOM LIST STYLES */

.customList ul, .customList ol {
    margin: 0 0 1rem -0.5rem;
	padding-left: 2rem;
}

.customList ul {
    list-style: none;
}

.customList li {
    margin-top: 2px;
    margin-bottom: 2px;
}

.customList ul li::before {
  content: "\2013";
  color: var( --e-global-color-accent );
  font-weight: bold;
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
}

.customList .wp-block-columns {
    margin-bottom: 0.25rem;
}

@media only screen and (min-width:990px) {
    /* Two-column list: add the class to the list itself or to the widget holding it. */
    ul.twoColumnList, .twoColumnList ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin-top:10px;
}
}

/* BUTTONS IN HORIZONTAL NAVIGATION MENUS - UPDATE TO MATCH SITE DESIGN */

.elementor-nav-menu--layout-horizontal .menuButton .elementor-item {
	padding: 8px 16px !important;
	color: #ffffff !important;
	background-color: var( --e-global-color-primary );
	border-radius: 5px;
	text-transform: uppercase !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
}


/* HEADER: one Theme Builder header (Templates > Theme Builder > Header) with three looks.
   Each page's "Header style" box (page sidebar) adds a body class, see site-functions.php:
   - Cream bar (default): no class.
   - Transparent over the hero, light text: .bes-header-transparent. Turns translucent navy (88%, as the old Home
     header did) once the page scrolls (.bes-scrolled on <body>, set by a small script in site-functions.php).
   - Navy bar, light text: .bes-header-navy.
   The header holds a dark and a white copy of the logo; CSS shows the one that fits. */

.bes-logo-light { display: none; }
.bes-header-transparent .bes-logo-dark,
.bes-header-navy .bes-logo-dark { display: none; }
.bes-header-transparent .bes-logo-light,
.bes-header-navy .bes-logo-light { display: block; }

.bes-header-transparent .bes-header { background-color: transparent !important; transition: background-color .3s ease; }
.bes-header-transparent .bes-header--desktop { margin-bottom: -90px; }
.bes-header-transparent .bes-header--mobile { margin-bottom: -80px; }
.bes-header-transparent.bes-scrolled .bes-header {
	background-color: rgba(16, 31, 49, .88) !important;
	background-color: color-mix(in srgb, var( --e-global-color-primary ) 88%, transparent) !important;
}
.bes-header-navy .bes-header { background-color: var( --e-global-color-primary ) !important; }

.bes-header-transparent .bes-header--desktop .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item,
.bes-header-navy .bes-header--desktop .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item {
	color: rgba(255, 251, 241, .7) !important;
	fill: rgba(255, 251, 241, .7) !important;
}
.bes-header-transparent .bes-header--desktop .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted),
.bes-header-navy .bes-header--desktop .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted) {
	color: var( --e-global-color-c8c3683 ) !important;
	fill: var( --e-global-color-c8c3683 ) !important;
}
.bes-header-transparent .bes-header--desktop .elementor-widget-nav-menu,
.bes-header-navy .bes-header--desktop .elementor-widget-nav-menu { --e-nav-menu-divider-color: rgba(255, 251, 241, .7); }

/* phone button: the transparent header keeps the navy pill (as the old Home header had; it stays visible on the
   translucent bar); the solid navy header gets the gold pill, as the old Blog header had (navy on navy would disappear) */
.bes-header-navy .bes-header .call_btn .elementor-button:not(:hover) { background-color: var( --e-global-color-secondary ) !important; }
/* ...with a cream phone icon (the icon is gold by default, which would vanish on the gold button) */
.bes-header-transparent .bes-header .call_btn svg path,
.bes-header-navy .bes-header .call_btn svg path { fill: var( --e-global-color-c8c3683 ); }

/* navy header on tablets/phones: plain cream menu icon, as the old Blog header had */
.bes-header-navy .bes-header--mobile .elementor-menu-toggle:not(:hover) { background-color: transparent !important; color: var( --e-global-color-c8c3683 ) !important; }
.bes-header-navy .bes-header--mobile .elementor-menu-toggle:not(:hover) svg { fill: var( --e-global-color-c8c3683 ) !important; }


/* CONTACT FORMS: Elementor forms with the class contact_form (Contact, The Promise, Referral Program, Service,
   Free Estimate Form template). Moved from Elementor › Custom Code › "Styles" (2026-10-13). */

.contact_form form .elementor-field-group input,
.contact_form form .elementor-field-group select,
.contact_form form .elementor-field-group textarea {
	padding: 10px 15px;
	min-height: 46px;
	box-shadow: none !important;
}

.contact_form form .elementor-field-group :is(input, select, textarea):focus {
	outline: 1px solid #000000 !important;
	box-shadow: none !important;
}

.contact_form form .elementor-field-group input[type=number]::-webkit-inner-spin-button,
.contact_form form .elementor-field-group input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* CAROUSELS: Elementor Pro Carousels (they replaced the old mobile slick sliders in 2026-10). Elementor keeps the
   arrows visible even when every slide already fits; Swiper marks them .swiper-button-lock then, so hide them. */
.elementor-widget-n-carousel .elementor-swiper-button.swiper-button-lock{display:none;}