/**
 * Mercedes Cleaning — Elementor & WordPress glue styles
 */

/* -------------------------------------------------------------------------
   Font Awesome 6 — restore icon webfonts
   Elementor / Kit resets often break FA glyphs — re-apply correct families.
   ------------------------------------------------------------------------- */
.fa-solid, .fa-semibold, .fas, i.fa-solid, i.fas {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  font-weight: 900 !important;
  font-variant: normal !important;
}
.fa-regular, .far, i.fa-regular, i.far {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
}
.fa-brands, .fab, i.fa-brands, i.fab {
  font-family: "Font Awesome 6 Brands" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
}

/* -------------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------------- */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 12px 20px;
  background: var(--green, #18a558);
  color: #ffffff;
  z-index: 100000;
  top: 8px;
  left: 8px;
  position: fixed;
  border-radius: var(--radius-md, 1rem);
  font-weight: 700;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   Main content
   ------------------------------------------------------------------------- */
main#primary.site-main {
  display: block;
  position: relative;
}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */
.header-logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}
.footer-brand .custom-logo-link,
.footer-brand .footer-logo-link {
  display: inline-block;
  line-height: 0;
}
.footer-brand .custom-logo,
.footer-brand img.custom-logo,
.footer-brand .footer-logo {
  max-width: 220px;
  height: auto;
}

/* -------------------------------------------------------------------------
   Elementor integration
   ------------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-max, 1280px);
}
.mercedes-elementor-wrap {
  --e-global-color-text: var(--slate-600);
  --e-global-color-primary: var(--navy);
}

.mercedes-elementor-wrap .elementor-widget-text-editor,
.mercedes-elementor-wrap .elementor-widget-text-editor .elementor-widget-container,
.mercedes-elementor-wrap .elementor-widget-theme-post-content .elementor-widget-container {
  color: var(--slate-600);
}

.mercedes-elementor-wrap .elementor-widget-heading .elementor-heading-title,
.mercedes-elementor-wrap .elementor-heading-title {
  color: var(--navy);
  font-family: var(--font-sans);
  letter-spacing: -0.04em;
  font-weight: 900;
}
.elementor-button {
  border-radius: var(--radius-md, 1rem);
  font-family: var(--font-sans);
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elementor-button:hover {
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Admin bar offsets — page-hero adds admin bar height on top of the
   compact base padding so the title still clears the WP admin bar.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 783px) {
  body.admin-bar .top-bar    { top: 32px; }
  body.admin-bar .site-header { top: calc(32px + var(--topbar-height, 40px)); }
  body.admin-bar .page-hero  { padding-top: calc(var(--header-offset, 80px) + 32px + 60px); }
}
@media screen and (max-width: 782px) {
  body.admin-bar .top-bar    { top: 46px; }
  body.admin-bar .site-header { top: calc(46px + var(--topbar-height, 40px)); }
  body.admin-bar .page-hero  { padding-top: calc(var(--header-offset, 80px) + 46px + 24px); }
}

/* Services archive: starts below fixed header */
.services-archive-wrap.services-section--premium {
  padding-top: calc(var(--header-offset, 168px) + var(--section-padding, 80px));
}
@media screen and (min-width: 783px) {
  body.admin-bar .services-archive-wrap.services-section--premium {
    padding-top: calc(var(--header-offset, 168px) + var(--section-padding, 80px) + 32px);
  }
}
@media screen and (max-width: 782px) {
  body.admin-bar .services-archive-wrap.services-section--premium {
    padding-top: calc(var(--header-offset, 168px) + var(--section-padding, 80px) + 46px);
  }
}

/* -------------------------------------------------------------------------
   Team shortcode column variants
   ------------------------------------------------------------------------- */
.mercedes-team-shortcode.team-grid { margin-top: 0; }
.mercedes-team-shortcode.team-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.mercedes-team-shortcode.team-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------------
   SERVICES-GRID-RESPONSIVE-V2 (search this marker in DevTools to verify cache)
   Universal responsive layout for every .services-grid in the theme.
   Tablet ≤1024px → 2 cols  ·  Mobile ≤768px → 1 col (flex column).
   Bypasses grid entirely on mobile to defeat any caching or third-party
   grid-template-columns override.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .services-grid,
  .services-grid[data-columns],
  .mercedes-services-shortcode-wrap .services-grid,
  .services-archive-wrap .services-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Respect explicit single-column intent */
  .services-grid[data-columns="1"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Switch layout mode entirely — guaranteed single column on mobile.
     Flex column with full-width children sidesteps every possible
     grid-template-columns override (cached, inline, plugin, etc.). */
  .services-grid,
  .services-grid[data-columns],
  .mercedes-services-shortcode-wrap .services-grid,
  .services-archive-wrap .services-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .services-grid > .service-card,
  .services-grid > article {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
}

.mercedes-services-shortcode-wrap .section-header .section-subtitle > p:first-child {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Pagination on dark archive
   ------------------------------------------------------------------------- */
.services-archive-wrap .navigation.pagination a,
.services-archive-wrap .page-numbers {
  color: var(--slate-600, #475569);
}
.services-archive-wrap .page-numbers.current {
  color: var(--teal, #007c89);
}
.services-archive-wrap .page-numbers:hover,
.services-archive-wrap .navigation.pagination a:hover {
  color: var(--teal-dark, #005962);
}

/* -------------------------------------------------------------------------
   Mobile menu chevron
   ------------------------------------------------------------------------- */
.mobile-nav-list > li.mobile-has-sub > a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078";
  margin-left: 0.4em;
  font-size: 0.72em;
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   Footer link overrides (Elementor/kit often forces dark grey)
   ------------------------------------------------------------------------- */
.site-footer .footer-links a,
.site-footer .footer-links li a,
.site-footer .widget_nav_menu a,
.site-footer .footer-links .footer-menu-link,
.site-footer .footer-links .footer-menu-link .footer-link-text,
.site-footer .footer-links ul li > a.footer-menu-link,
.site-footer .footer-links .menu li > a,
.site-footer .footer-links ul li > a,
.site-footer .footer-links .menu li > a .footer-link-text {
  color: var(--footer-text-muted, #94a3b8) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links li a:hover,
.site-footer .widget_nav_menu a:hover,
.site-footer .footer-links .footer-menu-link:hover,
.site-footer .footer-links .footer-menu-link:hover .footer-link-text,
.site-footer .footer-links .menu li > a:hover,
.site-footer .footer-links ul li > a:hover {
  color: var(--footer-accent, #007c89) !important;
}
.site-footer .footer-links .footer-menu-link,
.site-footer .footer-links ul li > a.footer-menu-link,
.site-footer .footer-links .menu li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.site-footer .footer-legal-links .footer-menu-link,
.site-footer .footer-legal-links .footer-menu-link .footer-link-text {
  color: var(--footer-text-muted, #94a3b8) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.site-footer .footer-legal-links .footer-menu-link:hover,
.site-footer .footer-legal-links .footer-menu-link:hover .footer-link-text {
  color: var(--footer-accent, #007c89) !important;
}

/* -------------------------------------------------------------------------
   Service / page Elementor body copy (override kit & legacy dark-theme colors)
   ------------------------------------------------------------------------- */
body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor p,
body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor li,
body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor span,
body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor .elementor-widget-container,
body.single-service .mercedes-elementor-wrap .elementor-widget-theme-post-content p,
body.single-service .mercedes-elementor-wrap .elementor-widget-theme-post-content li,
body.single-service .mercedes-elementor-wrap .elementor-widget-theme-post-content .elementor-widget-container,
body.single-service .mercedes-elementor-wrap .elementor-widget-icon-list .elementor-icon-list-text,
body.single-service .mercedes-elementor-wrap .elementor-widget-accordion .elementor-tab-content,
body.single-service .mercedes-elementor-wrap .elementor-widget-toggle .elementor-tab-content,
body.page .mercedes-elementor-wrap .elementor-widget-text-editor p,
body.page .mercedes-elementor-wrap .elementor-widget-text-editor li,
body.page .mercedes-elementor-wrap .elementor-widget-text-editor .elementor-widget-container,
body.page .mercedes-elementor-wrap .elementor-widget-theme-post-content p,
body.page .mercedes-elementor-wrap .elementor-widget-theme-post-content .elementor-widget-container {
  color: var(--slate-600) !important;
}

body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor a:not(.elementor-button-link):not(.btn),
body.single-service .mercedes-elementor-wrap .elementor-widget-theme-post-content a:not(.elementor-button-link):not(.btn),
body.page .mercedes-elementor-wrap .elementor-widget-text-editor a:not(.elementor-button-link):not(.btn) {
  color: var(--teal) !important;
}

body.single-service .mercedes-elementor-wrap .elementor-widget-text-editor a:not(.elementor-button-link):not(.btn):hover,
body.page .mercedes-elementor-wrap .elementor-widget-text-editor a:not(.elementor-button-link):not(.btn):hover {
  color: var(--teal-dark) !important;
}

body.single-service .mercedes-elementor-wrap .elementor-widget-heading .elementor-heading-title,
body.page .mercedes-elementor-wrap .elementor-widget-heading .elementor-heading-title {
  color: var(--navy) !important;
}

/* -------------------------------------------------------------------------
   FAQ — Elementor nested accordion (.faq_main)
   ------------------------------------------------------------------------- */
.faq_main .e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.faq_main .e-n-accordion-item {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: #ffffff;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.faq_main .e-n-accordion-item:hover {
  border-color: rgba(0, 124, 137, 0.28);
}

.faq_main .e-n-accordion-item[open] {
  border-color: rgba(0, 124, 137, 0.45);
  box-shadow: 0 10px 28px rgba(15, 46, 65, 0.08);
}

.faq_main .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 1.35rem;
  list-style: none;
  cursor: pointer;
  background: #ffffff;
  transition: background var(--transition);
}

.faq_main .e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.faq_main .e-n-accordion-item-title-header {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.faq_main .e-n-accordion-item-title-text {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy) !important;
  letter-spacing: -0.01em;
}

.faq_main .e-n-accordion-item[open] > .e-n-accordion-item-title {
  background: var(--teal-pale);
  border-bottom: 1px solid var(--slate-200);
}

.faq_main .e-n-accordion-item-title:hover {
  background: var(--teal-pale);
}

.elementor-element.faq_main {
  --n-accordion-icon-size: 0.875rem;
}

.faq_main .e-n-accordion-item-title-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-shrink: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: var(--teal-soft) !important;
  color: var(--teal) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: background var(--transition), color var(--transition);
}

.faq_main .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background: var(--teal) !important;
  color: #ffffff !important;
}

.faq_main .e-n-accordion-item-title-icon > span {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.faq_main .e-n-accordion-item-title-icon svg {
  width: var(--n-accordion-icon-size, 0.875rem) !important;
  height: var(--n-accordion-icon-size, 0.875rem) !important;
  fill: currentColor !important;
}

.faq_main .e-n-accordion-item:not([open]) .e-opened {
  display: none !important;
}

.faq_main .e-n-accordion-item:not([open]) .e-closed {
  display: inline-flex !important;
}

.faq_main .e-n-accordion-item[open] .e-closed {
  display: none !important;
}

.faq_main .e-n-accordion-item[open] .e-opened {
  display: inline-flex !important;
}

/* Answer panel */
.faq_main .e-n-accordion-item > [role="region"],
.faq_main .e-n-accordion-item > .e-con {
  padding: 0 !important;
  margin: 0 !important;
}

.faq_main .e-n-accordion-item > [role="region"] > .e-con,
.faq_main .e-n-accordion-item > .e-con.e-child {
  padding: 1rem 1.35rem 1.25rem !important;
  background: #ffffff;
}

.faq_main .e-n-accordion-item .elementor-widget-text-editor,
.faq_main .e-n-accordion-item .elementor-widget-text-editor .elementor-widget-container {
  margin: 0;
  padding: 0;
}

.faq_main .e-n-accordion-item .elementor-widget-text-editor p,
.faq_main .e-n-accordion-item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--slate-600) !important;
}

.faq_main .e-n-accordion-item .elementor-widget-text-editor a {
  color: var(--teal) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.faq_main .e-n-accordion-item .elementor-widget-text-editor a:hover {
  color: var(--teal-dark) !important;
}

@media (max-width: 640px) {
  .faq_main .e-n-accordion-item-title {
    padding: 1rem 1.125rem;
  }

  .faq_main .e-n-accordion-item-title-text {
    font-size: 1rem;
  }

  .faq_main .e-n-accordion-item > [role="region"] > .e-con,
  .faq_main .e-n-accordion-item > .e-con.e-child {
    padding: 0.875rem 1.125rem 1.125rem !important;
  }
}

/* -------------------------------------------------------------------------
   Elementor CTA — Get a Free Quote (.free_quote_btn)
   ------------------------------------------------------------------------- */
.elementor-element.free_quote_btn .elementor-button,
.free_quote_btn .elementor-button.elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  padding: 0.875rem 2.25rem !important;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(24, 165, 88, 0.35) !important;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition) !important;
}

.elementor-element.free_quote_btn .elementor-button:hover,
.elementor-element.free_quote_btn .elementor-button:focus,
.free_quote_btn .elementor-button.elementor-button-link:hover,
.free_quote_btn .elementor-button.elementor-button-link:focus {
  background: linear-gradient(135deg, #1db865 0%, var(--green) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 165, 88, 0.45) !important;
}

.elementor-element.free_quote_btn .elementor-button-content-wrapper,
.free_quote_btn .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
}

.elementor-element.free_quote_btn .elementor-button-text,
.free_quote_btn .elementor-button-text {
  color: #ffffff !important;
}

.elementor-element.free_quote_btn.elementor-widget-button .elementor-widget-container {
  display: inline-block;
}

/* -------------------------------------------------------------------------
   Elementor Button — Outline variant (.btn_outline)
   Add the `btn_outline` CSS class on any Elementor Button widget to get
   the brand's outline / ghost button look (white fill, teal border + text).
   ------------------------------------------------------------------------- */
.elementor-element.btn_outline .elementor-button,
.btn_outline .elementor-button.elementor-button-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  padding: 0.8125rem 2rem !important;
  background: #ffffff !important;
  color: var(--teal) !important;
  border: 2px solid var(--teal) !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(15, 46, 65, 0.06) !important;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition),
              border-color var(--transition) !important;
}

.elementor-element.btn_outline .elementor-button:hover,
.elementor-element.btn_outline .elementor-button:focus,
.btn_outline .elementor-button.elementor-button-link:hover,
.btn_outline .elementor-button.elementor-button-link:focus {
  background: var(--teal-pale, #e6f4f6) !important;
  color: var(--teal-dark, #005e6b) !important;
  border-color: var(--teal-dark, #005e6b) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 124, 137, 0.18) !important;
  text-decoration: none !important;
}

.elementor-element.btn_outline .elementor-button-content-wrapper,
.btn_outline .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
}

.elementor-element.btn_outline .elementor-button-text,
.btn_outline .elementor-button-text {
  color: inherit !important;
}

.elementor-element.btn_outline .elementor-button-icon i,
.elementor-element.btn_outline .elementor-button-icon svg,
.btn_outline .elementor-button .elementor-button-icon i,
.btn_outline .elementor-button .elementor-button-icon svg {
  color: inherit !important;
  fill: currentColor !important;
}

.elementor-element.btn_outline.elementor-widget-button .elementor-widget-container {
  display: inline-block;
}

/* Size modifiers — font-size locked to 1rem to match `.free_quote_btn`
   (the brand's primary CTA). Padding scales between size variants. */
.btn_outline .elementor-button.elementor-size-xs {
  padding: 0.625rem 1.5rem !important;
  font-size: 1rem !important;
}
.btn_outline .elementor-button.elementor-size-sm {
  padding: 0.75rem 1.875rem !important;
  font-size: 1rem !important;
}
.btn_outline .elementor-button.elementor-size-md {
  padding: 0.875rem 2.25rem !important;
  font-size: 1rem !important;
}
.btn_outline .elementor-button.elementor-size-lg {
  padding: 1rem 2.5rem !important;
  font-size: 1.0625rem !important;
}
.btn_outline .elementor-button.elementor-size-xl {
  padding: 1.125rem 2.75rem !important;
  font-size: 1.125rem !important;
}