/* =====================================================================
   Spokes Energy on Astra + Elementor
   Makes the Astra header/footer and the Elementor sections look like the original design.
   Brand colours: teal #0A4A63 / deep teal #073847 / orange #F28C28 / light #EEF4F6
   ===================================================================== */

/* ---------- Base ---------- */
body.spokes-site,
.spokes-site .entry-content,
.spokes-site .elementor-widget-text-editor { font-family: poppinsregular, sans-serif; }
.spokes-site .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.spokes-site .site-content { background: #fff; }
.spokes-site .elementor-element.e-con { --widgets-spacing: 14px; }

/* Elementor uses ::before for its own overlays; ours need to win. */
.elementor .e-con.se-hero::before,
.elementor .e-con.se-hero::after,
.elementor .e-con.se-banner::before,
.elementor .e-con.se-contact::before,
.elementor .e-con.se-about-photo::before { content: "" !important; position: absolute; inset: 0; pointer-events: none; }

/* ---------- Header (Astra builder) ---------- */
.spokes-site .site-header .ast-primary-header-bar { box-shadow: 0 2px 20px rgba(72, 86, 100, .1); border-bottom: 0; }
.spokes-site .ast-builder-menu-1 .menu-item > .menu-link {
  font-family: poppinsregular, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #073847;
  position: relative;
  padding: 0 18px;
}
.spokes-site .ast-builder-menu-1 .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
  height: 3px;
  border-radius: 2px;
  background: #F28C28;
  transform: scaleX(0);
  transition: transform .25s ease;
}
.spokes-site .ast-builder-menu-1 .menu-item:hover > .menu-link,
.spokes-site .ast-builder-menu-1 .current-menu-item > .menu-link { color: #0A4A63; }
.spokes-site .ast-builder-menu-1 .menu-item:hover > .menu-link::after,
.spokes-site .ast-builder-menu-1 .current-menu-item > .menu-link::after { transform: scaleX(1); }
.spokes-site .ast-header-button-1 .ast-custom-button {
  font-family: poppinsregular, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  padding: 12px 30px;
}
.spokes-site .ast-mobile-header-wrap .ast-header-button-1 .ast-custom-button { padding: 8px 14px; font-size: 11.5px; white-space: nowrap; }
.spokes-site .ast-mobile-popup-drawer .menu-link { font-family: poppinsregular, sans-serif; font-weight: 600; color: #073847; }

/* ---------- Footer (Astra builder) ---------- */
.spokes-site .site-primary-footer-wrap { padding: 50px 0 30px; border-top: 1px solid #E5EBED; }
.spokes-site .site-footer,
.spokes-site .site-footer p { color: #0A4A63; font-size: 14px; font-family: poppinsregular, sans-serif; }
.spokes-site .site-footer .footer-widget-area p.fs-12 { font-size: 12px; text-align: justify; }
.spokes-site .site-footer .wp-block-heading { color: #073847; font-family: poppinsregular, sans-serif; font-weight: 500; }
.spokes-site .site-footer h4.wp-block-heading { font-size: 22px; }
.spokes-site .site-footer h3.wp-block-heading { font-size: 24px; }
.spokes-site .site-footer a { color: #0A4A63; text-decoration: none; }
.spokes-site .site-footer a:hover { color: #F28C28; }
.spokes-site .se-footer-sitemap ul { list-style: none; margin: 0; padding: 0; }
.spokes-site .se-footer-sitemap li { padding: 4px 0; }
.spokes-site .se-social a { font-size: 18px; margin-right: 10px; color: #0A4A63; }
.spokes-site .site-below-footer-wrap { border-top: 0; }
.spokes-site .site-footer .footer-widget-area .widget { padding: 0; margin: 0; }
.spokes-site .site-below-footer-wrap .ast-footer-copyright,
.spokes-site .site-below-footer-wrap .ast-footer-copyright p { color: #fff; font-size: 13px; }
.spokes-site .site-below-footer-wrap .ast-footer-copyright a { color: #F28C28; }

/* ---------- Home: banner ---------- */
.elementor .e-con.se-hero { position: relative; overflow: hidden; background-color: #0A4A63; }
/* Photo fills the right two-thirds, like the original banner (change the photo in Elementor → Background). */
@media (min-width: 768px) {
  .elementor .e-con.se-hero { background-size: max(66vw, 1040px) auto !important; background-position: right center !important; background-repeat: no-repeat !important; }
}
.elementor .e-con.se-hero::before {
  background: linear-gradient(135deg, #073847 0%, #0A4A63 45%, #0D5C7A 100%);
  clip-path: polygon(0 0, 37% 0, 52% 100%, 0 100%);
  z-index: 0;
}
.elementor .e-con.se-hero::after {
  background: linear-gradient(180deg, rgba(64, 150, 180, .55), rgba(64, 150, 180, .25));
  clip-path: polygon(37% 0, 42% 0, 57% 100%, 52% 100%);
  z-index: 0;
}
.elementor .e-con.se-hero > .elementor-element { position: relative; z-index: 1; max-width: 48vw; padding-left: 5vw; margin: 0; }
.se-hero-tagline p { color: #fff; font-size: 22px; margin: 0; font-family: poppinsregular, sans-serif; }
.se-hero-tagline p::after { content: ""; display: block; width: 150px; height: 4px; border-radius: 2px; background: #F28C28; margin: 18px 0 20px; }
.se-hero-title .elementor-heading-title {
  font-family: poppinsbold, poppinsregular, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 2.95vw, 58px);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.se-hero-title .elementor-heading-title span { color: #F28C28; display: block; }

/* ---------- Home: services ---------- */
.elementor .e-con.se-services .elementor-heading-title { color: inherit; }
.elementor .e-con.se-services .section-header h2.elementor-heading-title { font-size: 34px; line-height: 1.25; color: #fff; }
.elementor .e-con.se-services .section-header p { color: rgba(255, 255, 255, .85); }
.se-services-slider { min-width: 0; }

/* ---------- Home: about + counters ---------- */
.elementor .e-con.se-about h3.elementor-heading-title { color: #0A4A63; font-size: 28px; }
.elementor .e-con.se-about .about-img img { width: 100%; height: 309px; object-fit: cover; border-radius: 20px; }
.se-counters-col { margin: 0 auto; }
/* Counter box spans the full content width */
.elementor .e-con.se-counters-col { --width: 100%; width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
.elementor .e-con.se-counters-col .counter-section { width: 100%; padding: 30px 20px !important; }
.counter-section .se-counter { flex: 1; }
.se-counter .elementor-counter-number-wrapper { color: #0A4A63; font-family: poppinsbold, poppinsregular, sans-serif; font-weight: 700; font-size: 40px; justify-content: center; }
.se-counter .elementor-counter-title { color: #0A4A63; font-size: 12px; font-weight: 600; text-align: center; }

/* ---------- Home: wide photo ---------- */
.se-wide .se-wide-img img { width: 100%; height: 70vh; object-fit: cover; object-position: center; display: block; }

/* ---------- Home: contact ---------- */
.elementor .e-con.se-contact { position: relative; }
.elementor .e-con.se-contact::before { background: rgba(10, 74, 99, .7); z-index: 0; }
.elementor .e-con.se-contact > .e-con-inner { position: relative; z-index: 1; }
.se-contact-heading .elementor-heading-title { color: #fff; font-weight: 600; font-size: 20px; }
.se-contact .contact-div .input-div.focus > div > label,
.se-contact-page .contact-div .input-div.focus > div > label { background: #fff; color: #0A4A63; }
.se-whatsapp-col { height: 0; overflow: visible; }

/* ---------- Inner pages: banners ---------- */
.elementor .e-con.se-banner { position: relative; }
.elementor .e-con.se-banner::before { background: rgba(10, 74, 99, .8); z-index: 0; }
.elementor .e-con.se-banner > .e-con-inner { position: relative; z-index: 1; }
.se-banner .se-banner-label .elementor-heading-title { color: #fff; font-weight: 700; font-size: 16px; }
.se-banner .se-banner-title .elementor-heading-title { color: #fff; font-family: poppinsregular, sans-serif; font-weight: 700; font-size: 38px; line-height: 1.6; max-width: 66%; }

/* About */
.elementor .e-con.se-about-photo { position: relative; border-radius: 15px; overflow: hidden; }
.elementor .e-con.se-about-photo::before { background: rgba(10, 74, 99, .5); z-index: 0; }
.se-about-photo .se-about-photo-title { position: relative; z-index: 1; }
.se-about-photo .se-about-photo-title .elementor-heading-title { color: #fff; font-weight: 700; line-height: 35px; font-size: 24px; }
.se-about-content .elementor-widget-text-editor { color: #515151; }

/* Services intro band */
.se-services-intro .services-wrapper { padding: 90px 70px; }
.se-services-intro h4.elementor-heading-title { font-family: poppinsbold, poppinsregular, sans-serif; color: #0A4A63; }
.se-services-intro h6.elementor-heading-title { color: #0A4A63; }

/* Contact page */
.elementor .e-con.se-contact-page { color: #fff; }
.se-contact-page .elementor-heading-title { color: #fff; }

/* Terms */
.elementor .e-con.se-terms { background: #F5F5F5; }
.se-terms h6.elementor-heading-title { color: #0A4A63; font-size: 16px; }
.se-terms .elementor-widget-text-editor { color: #0A4A63; }
.se-terms p { text-align: justify; }

/* ---------- Our own templates (service pages, blog) under Astra ---------- */
.spokes-site .se-astra-wrap { width: 100%; }
.spokes-site.single-se_service .site-content > .ast-container,
.spokes-site.single-post .site-content > .ast-container,
.spokes-site.blog .site-content > .ast-container { max-width: 100%; padding: 0; display: block; }

/* ---------- Phones / small tablets ---------- */
@media (max-width: 1199px) {
  .elementor .e-con.se-hero::before { clip-path: polygon(0 0, 45% 0, 58% 100%, 0 100%); }
  .elementor .e-con.se-hero::after { clip-path: polygon(45% 0, 50% 0, 63% 100%, 58% 100%); }
  .elementor .e-con.se-hero > .elementor-element { max-width: 52vw; }
}
@media (max-width: 767px) {
  .elementor .e-con.se-hero { min-height: 70vh; }
  .elementor .e-con.se-hero::before { clip-path: none; background: linear-gradient(180deg, rgba(7, 56, 71, .92) 0%, rgba(10, 74, 99, .75) 60%, rgba(10, 74, 99, .35) 100%); }
  .elementor .e-con.se-hero::after { display: none; }
  .elementor .e-con.se-hero > .elementor-element { max-width: none; padding: 0 22px; }
  .se-hero-tagline p { font-size: 16px; }
  .se-hero-title .elementor-heading-title { font-size: 30px; }
  .se-wide .se-wide-img img { height: 25vh; }
  .se-banner .se-banner-title .elementor-heading-title { font-size: 25px; line-height: 1.6; max-width: 100%; }
  .se-services-intro .services-wrapper { padding: 45px 22px; }
  .counter-section { flex-wrap: wrap; }
  .spokes-site .site-primary-footer-wrap { padding: 36px 0 10px; }
  .spokes-site .site-primary-footer-wrap .ast-builder-grid-row { padding: 0 22px; grid-row-gap: 28px; row-gap: 28px; }
  .spokes-site .site-primary-footer-wrap .site-footer-section { margin-bottom: 0 !important; }
  .spokes-site .site-below-footer-wrap .ast-footer-copyright { padding: 0 64px; }
  .counter-section .se-counter { flex: 1 1 0; min-width: 0; }
  .elementor .elementor-widget-counter.se-counter .elementor-counter-number-wrapper { font-size: 34px !important; }
  .elementor .elementor-widget-counter.se-counter .elementor-counter-title { font-size: 13px !important; line-height: 1.3; }
}