/*======================================
Theme Name: MW Child Theme for Seabaughs Locksmith
Theme URI: https://divicake.com/
Description: Monica's homegrown child theme.
Version: 1.0
Author: Monica
Author URI: https://divicake.com/
Template: Divi
======================================*/


/* ======================= CHILD THEME NOTES START ======================= */
/* This is the Child Theme style.css and it's found here: Appearance > Theme File Editor

WHAT THIS STYLESHEET CONTROLS:
- General Page Template (CSS classes are below)
- Maveros Service Blocks
- Gravity Forms
- MOBILE Menu Collapsible Submenu Toggle (also requires JavaScript added to Divi>Theme Options>Integration )
- FAQ Accordion (plus optional H2 formatting and add a divider image using ::after pseudo class)
- BLOG 

GENERAL PAGE TEMPLATE CSS CLASSES v10.28.25:
HEADER: .header_section, .header_row, .header_h1
BODY: .body_section, .body_row, body_text
FAQ: .faq_section, .faq_row, .faq_module --> NOTE: these 3 are for the native Divi FAQ Accordion module ONLY
*/
/* ======== CSS for testing when the Child Theme Breaks START ======== */
/* Per Tim on 10.28.25--When you see the child theme not rendering correctly, View Source on page and find the minified CSS, and then look for the below class definition in the code. If you find it, look to see if it's cascaded below the parent theme definitions. If you DON'T find it, all that may be a different issue to chase.
*/
.this-is-a-child-theme-definition-for-testing {	display: none;}
/* ======== CSS for testing when the Child Theme Breaks END ======== */

/* ======================= CHILD THEME NOTES END ======================= */


/* -------------------- CHILD THEME CSS START-------------------- */
/* #### General Page Template CSS START #### */
/* ##  Header_section START ## */
/* Background image */
.et_pb_section.et_pb_section_0.header_section  {
	background-blend-mode: multiply;
    background-image: url(/wp-content/uploads/2025/08/keys-on-pegboard-bg.webp)!important;
}
/* Padding Desktop & Mobile */
@media only screen and (min-width: 981px) {
.header_section {
	padding: 100px 0!important;
}}
@media only screen and (max-width: 980px) {
.header_section {
	padding: 20px 0;
}}
/* ## Header_section END ## */
/* #### General Page Template CSS END #### */

/* ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- */

/* ===== MOBILE Menu Collapsible Submenu Toggle CSS UPDATED 10.3.25--START 
/* UPDATED 10.3.25 so the Menu text AND toggle icon open the sub-menu
	CSS and JavaScript from https://www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/ 
/* == NOTE: Only the CSS is updated. The JavaScript stays the same.  
===== */

/*Change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}
/* submenu toggle icon when closed */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33'; /* down carat */
	color: #ffffff!important;
	font-size: 30px;
}
/*submenu toggle icon when open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\4d'; /* big X */
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}
/*some code to keep everything positioned properly*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}
/*remove default background color from menu items that have children*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}
/*hide the submenu by default*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}
/*show the submenu when toggled open*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}
/* === MENU TEXT AND TOGGLE ICON OPEN THE SUB-MENU CSS START === */
/* Code is from a comment in https://www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/ */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: right;
	opacity: 1;
	width: 100%;
	padding-right: 5px !important;
}
/* === MENU TEXT AND TOGGLE ICON OPEN THE SUB-MENU CSS END === */
/* == OLD CODE replaced on 10.3.25 by the above MENU TEXT AND TOGGLE ICON OPEN THE SUB-MENU CSS
This original only allowed the toggle icon to open the sub-menu 
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}=== */

/*add point on top of the menu submenu dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}
/*adjust the position of the hamburger menu*/
.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 0px;
	line-height: 0;
}
/*force the background color and add a rounded border*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}
/* ===== MOBILE Main Menu Sub-Menu toggle CSS UPDATED 10.3.25 -- END ===== */




/* ----------------------------------------------------------------------------- */


/* ##### MAVEROS SERVICES GRID CSS 8/5/2025 START ##### */
/*NOTE: This CSS includes reduced top margin for the H3 Header Text on hover and the 20px side padding for the hover text so it looks better on mobile. */
/* ### LEARN MORE BUTTON START ### */
/* Bbutton padding, text shadow & radius */
.blurbs_block .et_pb_column_1_3 .blurb_hover a {
    padding: 7px 15px;
    text-transform: uppercase;
    box-shadow: none;
	margin-top:15px;
	display: inline-block;
} 
/* Button Color*/
.blurbs_block .et_pb_column_1_3 .blurb_hover a {
	background-color: #da2328;
	color: #fff;
	border-color: #fff;
	border-style: solid;
	border-width: 0px;
	border-radius: 3px;
	box-shadow: none!important;
} 
/* Button Hover Color*/
.blurbs_block .et_pb_column_1_3 .blurb_hover a:hover {
	background-color: #af1a2e;
    color: #fff;
	border-color: #fff;
	border-style: solid;
	border-width: 0px;
	border-radius:3px;
}
/* ### LEARN MORE BUTTON END ### */
/* H3 Header font size */
.blurbs_block .et_pb_column_1_3 .et_pb_blurb_container h3.et_pb_module_header {
	font-size: 1.7em;
	padding-bottom: 0px!important;
}
/* DESKTOP Blurb Container Margin-top on HOVER (contains H3 and text) */
@media (min-width: 981px) {
.blurbs_block .et_pb_column_1_3 .blurb_hover .et_pb_blurb_container {
    margin-top: 57px;
}}
/* MOBILE Blurb Container (contains H3 and text) HOVER Margin-top */
@media (max-width: 430px) {
.blurbs_block .et_pb_column_1_3 .blurb_hover .et_pb_blurb_container {
    margin-top: 10px;
	/*align-items: center;*/
}
/* MOBILE Description Text Size */
.blurbs_block .et_pb_column_1_3 .blurb_hover .et_pb_blurb_container .et_pb_blurb_description p {
		font-size: 15px!important;
}}
.blurbs_block .et_pb_column_1_3 .et_pb_blurb_content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 200px;
}
.blurbs_block .et_pb_column_1_3 .blurb_hover,
.blurbs_block .et_pb_column_1_3:hover .blurb_active {
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.blurbs_block .et_pb_column_1_3:hover .blurb_active {
	visibility:hidden;	
}
.blurbs_block .et_pb_column_1_3 .blurb_hover {
	top:0;
	opacity:0;
	position:absolute;
	visibility:hidden;
	width: 100%;
}
.blurbs_block .et_pb_column_1_3:hover .blurb_hover {
	visibility:visible;
	opacity:1;
}
@media (min-width: 981px) {
.et_pb_blurb.row_1_tile_left_border {
	border-right: 5px solid #fff !important;
}}
@media (max-width: 980px) {
.et_pb_blurb.row_1_tile_left_border {
	border-bottom: 5px solid #fff !important;
}}
/* ##### MAVEROS SERVICES GRID CSS 8/5/2025 END ##### */

/*********************************************************************************************************************************************************/

/* ### Gravity Forms CSS for AUTO-FILL form ### */
/* SUBMIT BUTTON */
.gform_wrapper.gravity-theme .gform_footer button, 
.gform_wrapper.gravity-theme .gform_footer input, 
.gform_wrapper.gravity-theme .gform_page_footer button, 
.gform_wrapper.gravity-theme .gform_page_footer input {
    font-weight: bold;
    color: #fff;
    background-color: #da2328;
    font-size: 18px;
	line-height: 1.7em!important;
	text-transform: uppercase;
    border-width: 0px;
    border-radius: 3px;
    padding: 5px 1.5em;
    float: right;
	border-radius: 3px;
	margin: 0px;
}
/*SUBMIT BUTTON hover*/
body #gform_wrapper_1 .gform_footer input[type=submit]:hover {
    background-color: #af1a2e;
}
/* Submit Button - Right-align*/
.gform_wrapper.gravity-theme #field_submit, 
.gform_wrapper.gravity-theme .gform_footer {
    display: block;
	float: right;
}
/* Text Field top labels*/
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label {
	font-size: 14px;
	line-height: 1;
    font-weight: 600;
    margin-bottom: 0px;
    padding: 0px;
	display: inline-block;
}
/* Red asterisk in note at top of form */
.gform_wrapper.gravity-theme .gform_required_legend .gfield_required {
    padding-left: 0;
    font-size: 25px;
}
/* Red Asterisk in Text Field Labels */
.gform_wrapper.gravity-theme .gfield_required {
    color: #c02b0a;
    display: inline-block;
    font-size: 16px;
    padding-left: .125em;
	vertical-align: top;
}
/* Form Field top labels text size */
.gform_wrapper.gravity-theme .gfield_label {
    font-size: 14px;
}
/*Text Fields size, color, field border color and size*/
input.text, 
input.title, 
input[type=email], 
input[type=password], 
input[type=tel], 
input[type=text], 
select, 
textarea {
    background-color: #fff;
    border: 1px solid #bbb;
    padding: 3px!important;
    color: #4e4e4e; /*color of placeholder text*/
}
/* Reduce space between all form fields  */
.gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 0px;
}
/*Message text field height
.gform_wrapper.gravity-theme .gfield textarea.small {
    height: 60px;
}*/
/* FILE UPLOAD field size */
.gform_wrapper.gravity-theme .gform_drop_area {
    padding: 15px;
    text-align: center;
	background: #fff;
}
/* HIDE CAPTCHA text */
.gform_wrapper #field_1_11 {
  display:none!important;
}
/* Reduce size of "0 of 1000 max characters" and "Accepted file type" text */
.gform_wrapper.gravity-theme .description, 
.gform_wrapper.gravity-theme .gfield_description, 
.gform_wrapper.gravity-theme .gsection_description, 
.gform_wrapper.gravity-theme .instruction {
	padding-top: 0px;
	font-size: 12px!important;
	/*color: #fff;*/
	line-height: 0;
	margin-bottom:10px;
	text-align: left;
}
/*REMOVE top_label above SUBMIT button*/
.gform_wrapper.gravity-theme .gform_footer,
.gform_wrapper.gravity-theme .gform_page_footer {
    margin: 0;
    padding: 0;
}
/*#### END Gravity Forms CSS ####*/

/**************************************************************************************************************************/

/* #### FAQ ACCORDION CSS START– Add the required Javascript to the site  to make the "X" OPEN accordion icon close the accordion when clicked. ## */
/*## CLOSED accordion icon ##*/
.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title:before {
	color: #da2328!important;
	font-family: ETmodules!important;
    content: "\33";/*down caret*/
	font-size: 32px;
	font-weight: 600!important;
    margin-right: 7px;
}
/*## OPEN accordion icon ##*/
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title:before {
	color: #da2328!important;
	display: block!important;
    font-family: ETmodules!important;
    content: '\4d'; /* large X*/
	font-size: 32px;
	font-weight: 600!important;
    margin-right: 7px;
}
/*## WHITE BG and Bottom Margin for each accordion item ##*/
.et_pb_accordion_item.et_pb_toggle {
	background-color: #ffffff;
	margin-bottom: 0px!important;
}
/*## Accordion item bottom border only ##*/
.et_pb_accordion_0.et_pb_accordion .et_pb_accordion_item {
    border-width: 0px 0px 2px 0px;
    border-style: none none solid none;
   border-color: #d9d9d9;
}
/*Toggle Title Text, Open and Closed DESKTOP*/
h4.et_pb_toggle_title, h3.et_pb_toggle_title {
	color: #333333!important;
	font-size: 1.2em!important;
}
/*### FAQ ACCORDION CSS END ###*/

/* ### FAQ_row H2 & divider img START ### */
/* H2 padding-bottom */
.faq_row h2 {
	padding-bottom: 20px!important;
}
/* Add Divider IMG red padlock after H2 */
    .faq_row .et_pb_column .et_pb_heading_0::after {
        content: url('https://seabaughslocksmith.com/wp-content/uploads/2025/08/seabaughs-divider.png'); 
}
/* FAQ Header row--add Divi's default 2.75% bottom margin */
.faq_row .et_pb_heading_0 {
	margin-bottom: 2.75%!important;
}
/* ### FAQ_row H2 & divider img END ### */

/*--------------------------------------------------------------------------------------------------------*/

/*###### BLOG CSS START ######*/
/* MAIN BLOG PAGE CSS */
p.post-meta {
	line-height: 1.3em;
}
/* Add border around featured images on main Blog page grid */
.et_pb_blog_grid .et_pb_image_container img {
	border-top: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 0px;
	border-left: 1px solid #d8d8d8;
}
/* READ MORE button */
a.more-link {
   background-color: #da2328;
	color: #fff; /*Text color*/
	border: 0px solid; /*this needs to be 0 for the outset white border to work*/
	border-radius: 3px;
    	padding: 5px 1.8em;
    	margin-top: 20px;
    	text-transform: uppercase;
	float: right;
	text-decoration: none;
	font-size: 16px;
}
a.more-link:hover {
	background-color: #af1a2e;
}
/*Hide BUTTON SHADOW*/
.more-link {
   box-shadow: none!important;
} 
/*###### BLOG POST CSS START ######*/
/*Make the Post Content 100% wide like the Post Title */
.et-l .et-l--post .et_builder_inner_content .et_pb_row {
	width: 100%;
}
/* Add Top Padding to Featured Img */
.et_pb_title_featured_container {
	padding-top: 5px;
}
/* Remove Post Top Padding*/
.et_pb_post_content .et_pb_section {
	padding: 0%;
}
h2.entry-title {
    line-height: 1.3em;
	font-size: 2em;
}
/*h2.entry-title a {
	font-weight: 500!important;
}*/
h3.et_pb_post {
	font-size: 1.2em;
}
/* LATEST POSTS SIDEBAR WIDGET */
/* Widget gray border */
.et_pb_widget {
    border: 1px solid #d8d8d8;
	border-radius: 0px;
	padding: 0px;
	background-color: #fff;
}
/* LATEST POSTS H4 HEADER */
.et_pb_widget h4.widgettitle {
	font-size: 1.3em;
    padding: 10px 20px;
    background-color: #da2328;
    color: #fff;
	outline: 1px solid #da2328; /*this covers the #d8d8d8 border on the top and sides of the widget title */
	font-weight: 500;
}
.et_pb_widget ul {
	padding: 20px 20px 10px 20px !important;
	margin-left: 15px!important;
    background-color: #fff;
}
/* LATEST POSTS */
.et_pb_widget li {
  	line-height: 1.2em;
	margin-bottom: 1 em;
   list-style: disc;
}
/* LATEST POSTS LINK TEXT */
.et_pb_widget li a {
	color: #da2328!important;
	font-size: 16px;
	line-height: 1.2em;
}
.et_pb_widget_area_left {
    border-right: 0px;
    padding-right: 0px;
}
.et_pb_widget_area ul {
  list-style: inherit!important;
   line-height: inherit!important;
}
.wp-block-image img {
    box-sizing: border-box;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    margin-top: 10px
}
/*SIDEBAR WIDGET CSS END*/
/*###### BLOG CSS END #####*/