/*
Theme Name:   Burke Electric Astra Childtheme
Theme URI:    https://yourwebsite.com/be-astra-child/
Description:  Burke Electric's Amazing Astra Childtheme
Author:       Heidi Productions
Author URI:   https://heidiproductions.com/
Version:      1.0.0
Template:     astra
*/

/***********************************************
INDEX (list of sections)
************************************************
1. Testing Area
2. Resets
3. Typography
4. Colors
5. Universal Styles (theme 'typography, page background color, etc...' overrides.)
6. Buttons
7. Header
8. Navigation
9. Footer Content
10. Gravity Forms Stuff
11. Woo Commerce Stuff
12. ID's (General)
13. Class's (General)
14. Responsive code below here


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

/***********************************************
************************************************
1. Testing Area
************************************************
***********************************************/
/******************  post page banner overrides *********************/

.ast-article-single figure, .ast-article-single img:not(figure img) {margin-bottom: 3em;}

#hpost-title-main h1, #hpost-title-main .elementor-heading-title {font-size:2.1em !important;}


.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
  border-bottom: none;
}


@media (min-width: 922px) {
  .ast-primary-header-bar {
    max-width: 1240px;
  }
}

.main-header-bar-wrap {
  background-color: #f9fafb;
}

#postboxheight {height:120px;}

.wp-block-heading {font-size:1.5em!important;}

.entry-title {font-size:2.1em !important;}

.footerlogoshift {padding-left:28px;}

@media (max-width: 1024px) {
.footerlogoshift {padding-left:21px; width:300px;}	
}

@media (max-width: 544px) {
.footerlogoshift {padding-left:7px;}	
}


	

#readmorebutton {background-color:gray !important;}

/* === FULL WIDTH HERO BANNER ON BLOG / ARCHIVE PAGE === */
#heidi-hero-banner {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Force Astra container to allow full width on the blog page */
body.blog #heidi-hero-banner,
body.archive #heidi-hero-banner {
    max-width: 100% !important;
}

/* Extra safety to override Astra's default container limit */
body.blog .ast-container,
body.archive .ast-container {max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
}

/******************  end of post page banner overrides *********************/

/* Target your specific banner section if needed (replace .your-banner-class with the actual class) */
body.blog .your-banner-class,
body.archive .your-banner-class {max-width: 100% !important;width: 100% !important;margin-left: 0 !important;margin-right: 0 !important;
}

/******************  end of post page banner overrides  ***************/

.ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {text-decoration: none;}

#heidi-hero-banner .white-overlay {
    animation: whiteOut 1s 1s forwards;
}

#heidi-hero-banner .red-overlay {
    transform: translateX(-100%);
    animation: wipeIn 1s forwards, wipeOut 1s 2s forwards;
}

@keyframes wipeIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes wipeOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes whiteOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}


.sitelogoadj{
	height:38px;
	width:auto;
}
#footerlogocenter {
	margin:0 auto !important;
	text-align:center !important;
}
.footer-widget-area widget-area site-footer-focus-item ast-footer-html-2 {margin-left:11px;}

.testing123 {background-color:red;
color:red;}

/******************** Tab CSS ***************************/

.services-heading {font-family:'Michroma', sans-serif;
text-transform: uppercase;
font-size:1em;
margin-bottom:1em !important;
font-weight:600;
color:#000;}

.services-heading-tight {font-family:'Michroma', sans-serif;
text-transform: uppercase;
font-size:1em;
margin-bottom:1em !important;
font-weight:600;
color:#000;
font-stretch:condensed;}


#servicestabs {
  color: #c1c1c1;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}
#servicestabs:hover {
  color: white;
}
#servicestabs::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  background-color: purple;
  z-index: -1;
  transition: all 1s;
}
#servicestabs:hover::before {
  width: 160%;
}
#servicestabs {
    color: #c1c1c1;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;           /* Transparent border initially */
    padding: 18px 25px;
    font-size: 17px;
    cursor: pointer;
    font-weight: 400;
    background: #222327;                    /* Solid dark background at start */
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    font-family: 'Michroma', sans-serif;
}
/* Hover & Active State */
#servicestabs:hover,
#servicestabs.active {                               /* Use .active if needed for clicked state */
    color: #a80a09;
    background: transparent;                /* Becomes transparent */
    border: 2px solid #c8102e;              /* Red border on hover/active */
}
/* Smooth sliding background effect (slides out) */
#servicestabs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222327;                    /* Same as initial background */
    z-index: -1;
    transition: all 0.6s ease;
}
#servicestabs:hover::before,
#servicestabs.active::before {
    width: 0%;                              /* Background slides away */
    left: 100%;                             /* Slides out to the right */
}



/******************** End of Tab CSS ***************************/

.services-subhead {font-family:'Michroma', sans-serif !important;
font-size:1em;
text-transform: uppercase;
margin-bottom:0px;
}

.e-n-accordion-item-title {font-family:'Michroma', sans-serif !important;
font-size:1em;
text-transform: uppercase;
margin-bottom:0px;
background-color:#222327;
color:#fff;
}

/* ===== SERVICES ACCORDION STYLING ===== */
.e-n-accordion-item-title-text {color:#fff !important;}


.services-bullets {line-height:1em;}

.elementor-widget-n-tabs .e-n-tab-title-text {font-size:.75em !important;
font-weight:700;}

/* ===== End of SERVICES ACCORDION STYLING ===== */

/***********************************************
************************************************
3. Typography
************************************************
***********************************************/

.post-title {font-size:1.1em !Important;}

/* Force Michroma ONLY on H2 headings (overrides Elementor/Astra defaults) */
h2,
.elementor-heading-title h2,                  /* If H2 is wrapped inside Elementor heading widget */
h2.elementor-heading-title,                    /* Common Elementor class for headings */
.elementor-widget-heading h2 {                 /* Broad selector for Elementor heading widgets using h2 tag */
    font-family: 'Michroma', sans-serif !important;
}

/* Optional: Ensure consistent weight (Michroma is Regular 400 only) */
h2,
.elementor-heading-title h2,
h2.elementor-heading-title,
.elementor-widget-heading h2 {
    font-weight: 400 !important;
}

/* Force Michroma ONLY on H1 headings (overrides Elementor/Astra defaults) */
h1,
.elementor-heading-title h1, h1 {
    font-family: 'Michroma', sans-serif !important;
	font-size:4em !important;
}

/* Optional: Ensure consistent weight (Michroma is Regular 400 only) */
h1,
.elementor-heading-title h1,
h1.elementor-heading-title,
.elementor-widget-heading h1 {
    font-weight: 400 !important;
}

/* Roboto Thin for all H3 headings */
h3 {
    font-family: "Roboto", sans-serif !important;   /* !important helps override theme styles */
    font-weight: 200!important;
    font-style: normal;
	font-size:2.5em !important;
    font-optical-sizing: auto;
}

/* Roboto Thin for all H3 headings */
.aboutUsMobile-h3 {
    font-family: "Roboto", sans-serif !important;   /* !important helps override theme styles */
    font-weight: 400!important;
    font-style: normal;
	font-size:2em !important;
    font-optical-sizing: auto;
	letter-spacing: 2px;
}


.ha-fun-factor__content-number, .ha-fun-factor__content-number-suffix {font-size:3.5em !important;
font-weight:bolder !important; color:#fff;}
.ha-fun-factor__content-text {font-size:1em !important;
font-family: "Roboto", sans-serif !important; color:#fff;
}

.heading-tagline {margin-top:1em;
color:#000;}

.heading-tagline-mobile {margin-top:1.5em;
color:#000;
font-size:1.7em;
font-weight:600;
letter-spacing:1px;}

.mobile-h1 {
	font-family: 'Michroma', sans-serif !important;
	font-size:3em !important;
	font-weight: 400 !important;
	margin-top:1em;
}

li::marker {
    color: #ce0121;  /* changes only the bullet color */
}

.mobilequotecopy {font-size:.9em;}
.mobilequotesig {font-size:1.0em; text-align:right;}
.tabletservicecap {font-size:1.6em; line-height:1.4em;}
.mobileh2 {font-size:1.0em;}
.whitetext {color:#fff;}

 .michroma{
    font-family: 'Michroma', sans-serif !important;
	font-weight: 400 !important;
	 color:white;
	 font-size: 3em;
}

.imgcaption {
    text-transform: uppercase !important;
    font-size: .7em !important;
	font-weight:bold;
    color: #444549!important;
    font-family: 'Michroma', sans-serif !important;
    text-align: center;
}

/***********************************************
************************************************
4. Colors
************************************************
***********************************************/

.burkered {color:#d32027 !important;}


/***********************************************
************************************************
7. Header Stuff
************************************************
***********************************************


/***********************************************
************************************************
9. Footer
************************************************
***********************************************/

.footerlineheight {
	line-height:1.0em !important;
	margin: 0px !important;
}

.burke-custom-footer {
  text-align: center;
  padding: 0px 20px 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top-section {
  margin-bottom: 20px;
}

.footer-logo img {
  max-width: 240px;
  height: auto;
  margin-bottom: 25px;
}

.footer-contact-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px; /* space between contact blocks */
}

.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-label {
  font-size: 1.1em;
  margin-bottom: 10px;
  white-space: nowrap;
  color: #c1c1c1;
}

.contact-block a img {
  width: 32px;
  height: 32px;
  transition: transform 0.25s ease;
}

.contact-block a:hover img {
  transform: scale(1.12);
}

.footer-copyright {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Mobile: stack contacts vertically if screen is small */
@media (max-width: 768px) {
  .footer-contact-row {
    flex-direction: column;
    gap: 30px;
  }
  
  .footer-logo img {
    max-width: 200px;
  }
  
  .contact-block img {
    width: 42px;
    height: 42px;
  }
}
	/* Center logo in HTML 1 widget */
.ast-footer-html-1,          /* Astra often uses this class for first HTML element */
.ast-builder-html-element-1, /* or this variant */
.footer-logo-wrap,           /* if you added a wrapper class earlier */
html .ast-footer-html-1 div { 
  text-align: center !important;
}

.ast-footer-html-1 img,
.ast-builder-html-element-1 img {
  display: inline-block;     /* ensures it respects text-align */
  max-width: 240px;          /* optional: control size */
  height: auto;
}