/* === Layout overrides — full-bleed sections, content centered on logo === */

/* overflow-x:clip prevents the horizontal scroll from full-bleed sections
   WITHOUT breaking position:sticky (which overflow-x:hidden would break). */
html, body { overflow-x: hidden; overflow-x: clip; }
body { margin: 0; }

/* ----------------------------------------------------------
   1) ELEMENTOR boxed sections: stretch to viewport,
      keep content max-width at 1600px.
   ---------------------------------------------------------- */
.e-con.e-con-boxed.e-parent {
    max-width: 100% !important;
    width: 100% !important;
    --content-width: 100% !important;
}
.e-con.e-con-boxed > .e-con-inner {
    max-width: 1600px !important;
    width: 100% !important;
    margin-inline: auto !important;
}

/* ----------------------------------------------------------
   2) KADENCE wrappers — remove padding/width caps so body sections
      can stretch fully (header is NOT touched).
   ---------------------------------------------------------- */
.content-container.site-container,
.site-container,
.wp-site-blocks,
.site,
.site-main,
.content-area,
#primary,
#main,
.content-wrap,
.entry-content-wrap,
.entry-content,
.entry-content.single-content,
article.entry {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Article may need internal box-sizing reset */
article.entry {
    border: 0 !important;
    background: transparent !important;
}

/* ----------------------------------------------------------
   3) SERVICE-PAGE custom sections (.mcm-svc) — guarantee full bleed
      even when wrapped inside a constrained .e-con-inner.
      Technique: position the section across the entire viewport
      by pulling it out of its constrained parent.
   ---------------------------------------------------------- */
.mcm-svc,
.mcm-svc__hero,
.mcm-svc__band {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   4) FOOTER — full-bleed dark band, inner content capped at
      1100px (original design) so the 4 columns line up with
      the header content above.
   ---------------------------------------------------------- */
footer.mc-footer,
footer#colophon {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* ---- mc-footer cosmetic styles (moved here from the inline
        <style> blocks so partials/footer.html stays markup-only) ---- */
.mc-footer {
    background: #111111;
    color: #f4f4f4;
    font-family: "Segoe UI", sans-serif;
}
.mc-footer-inner {
    max-width: 1100px !important;
    width: 100%;
    margin: 0 auto;
    padding: 45px 20px 25px;
    text-align: left;
}
.mc-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1.1fr 1.1fr;
    gap: 40px;
}
.mc-footer-heading {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffc800;
    margin-bottom: 16px;
    text-align: left;
}
.mc-footer-text {
    font-size: 14px;
    line-height: 1.7;
    color: #e3e3e3;
    text-align: left;
}
.mc-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.mc-footer-list li {
    font-size: 14px;
    margin-bottom: 6px;
    text-align: left;
}
.mc-footer-list a {
    color: #e3e3e3;
    text-decoration: none;
    transition: color .2s ease;
}
.mc-footer-list a:hover {
    color: #ffc800;
}
.mc-footer-social {
    display: flex;
    justify-content: flex-start;
    gap: 18px;
    margin: 32px 0 22px;
}
.mc-footer-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffc800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 20px;
    text-decoration: none;
}
.mc-footer-divider {
    height: 1px;
    background: #262626;
    margin: 0 0 12px;
}
.mc-footer-copy {
    font-size: 13px;
    color: #bfbfbf;
    text-align: left;
    padding-bottom: 5px;
}
@media (max-width: 1024px) {
    .mc-footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
    }
}
@media (max-width: 640px) {
    .mc-footer-inner {
        padding: 35px 18px 20px;
    }
    .mc-footer-grid {
        grid-template-columns: 1fr;
    }
    .mc-footer-heading {
        font-size: 16px;
    }
    .mc-footer-text,
    .mc-footer-list li {
        font-size: 13px;
    }
}

/* ----------------------------------------------------------
   5) HEADER — cap the inner content at 1100px so the top bar
      and main nav line up with the footer. The coloured bands
      still span the full viewport width.
   ---------------------------------------------------------- */
#masthead .site-container {
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------------------------------------------------------
   6) BODY SECTIONS — make the custom sections on Home / About /
      Contacts / Appointment full-bleed (like engine-oil-service)
      so there is no empty space on the left & right. The inner
      containers keep their own max-width and stay centered.
   ---------------------------------------------------------- */
.mcm-hero,
.mcm-section,
.mcm-certified,
.mcm-stats,
.area-strip,
.about-hero,
.about-popular-wrap,
.about-inspect-wrap,
.contact-hero,
.contact-main,
.mc-map-section,
.mcm-page-wrap {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* The hero "quick action" cards row must NOT be full-bleed: keep it
   capped at the 1100px content width so its edges line up with the
   logo (left) and the Get Started button (right) in the header. */
.mcm-hero-cards {
    width: auto !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
}

/* ----------------------------------------------------------
   7) WP theme — mobile drawer collapsible sub-menus
      (collapsed by default; tap the caret to expand — wired in theme.js).
   ---------------------------------------------------------- */
#mobile-drawer .mobile-navigation .menu-item-has-children > .sub-menu { display: none; }
#mobile-drawer .mobile-navigation .menu-item-has-children.mcm-open > .sub-menu { display: block; }
#mobile-drawer .mobile-navigation .sub-menu a { padding-left: 1.5em; opacity: .9; }
#mobile-drawer .mobile-navigation .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; }
#mobile-drawer .mobile-navigation .mcm-caret { padding: 10px; margin: -10px -6px -10px 8px; cursor: pointer; transition: transform .2s ease; }
#mobile-drawer .mobile-navigation .menu-item-has-children.mcm-open > a .mcm-caret { transform: rotate(225deg); }

/* ----------------------------------------------------------
   8) WP theme — responsive header (toggle only on mobile)
   ---------------------------------------------------------- */
/* Desktop: show nav + button, hide hamburger */
@media (min-width: 1025px) {
    #masthead .mobile-toggle-open-container { display: none !important; }
    #masthead .site-header-item-main-navigation { display: block !important; }
    #masthead .header-button-wrap { display: block !important; }
}
/* Mobile/tablet: keep the header visible, swap nav for the hamburger */
@media (max-width: 1024px) {
    /* Kadence hides #main-header on mobile (it expects a separate #mobile-header).
       We use one header for all sizes, so force the whole chain back to visible. */
    #masthead,
    #masthead #main-header,
    #masthead .site-header-wrap,
    #masthead .site-header-inner-wrap,
    #masthead .site-header-upper-wrap,
    #masthead .site-header-upper-inner-wrap,
    #masthead .site-top-header-wrap,
    #masthead .site-main-header-wrap,
    #masthead .site-container,
    #masthead .site-header-row-container-inner { display: block !important; }
    #masthead .site-main-header-inner-wrap {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 64px;
    }
    #masthead .site-header-main-section-left,
    #masthead .site-header-main-section-right { display: flex !important; align-items: center; }
    #masthead .site-header-item-main-navigation,
    #masthead .header-button-wrap { display: none !important; }
    #masthead .mobile-toggle-open-container { display: flex !important; align-items: center; }
    /* Top contact bar wraps neatly on small screens */
    #masthead .site-top-header-inner-wrap { flex-wrap: wrap; gap: 6px; justify-content: center; }
}

/* Dropdown caret on parent menu items (appended via nav_menu_item_title filter,
   so it does NOT collide with Kadence's underline `a::after`). */
.main-navigation .menu-item-has-children > a { display: inline-flex; align-items: center; }
.mcm-caret {
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

/* Header social: icon + label inline */
.header-social-wrap .social-button { display: inline-flex; align-items: center; gap: 6px; }
.header-social-wrap .social-button .kadence-svg-icon { width: 16px; height: 16px; }

/* ----------------------------------------------------------
   9) WP theme — sticky header on DESKTOP only (not mobile)
   ---------------------------------------------------------- */
@media (min-width: 1025px) {
    /* Sticky the whole masthead but offset upward by the top-bar height, so the
       white top bar scrolls out of view and only the black menu bar sticks. */
    #masthead {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--mcm-topbar-h, 46px) * -1);
        z-index: 999;
    }
}
@media (max-width: 1024px) {
    #masthead { position: relative !important; top: auto !important; }
}

/* 10) Footer free-text links (e.g. email) — readable on the dark footer */
.mc-footer-text a { color: #e3e3e3; text-decoration: underline; }
.mc-footer-text a:hover { color: var(--mc-footer-yellow, #ffc800); }

/* 11) Lead form success banner */
.mcm-lead-thanks {
    background: #e7f8ec;
    border: 1px solid #28a745;
    color: #176a2e;
    padding: 12px 16px;
    border-radius: 10px;
    margin: 0 0 14px;
    font-size: 14px;
}

/* 12) Contacts — Areas banner image (replaces the pills) */
.contact-areas-banner { margin: 28px 0 6px; }
.contact-areas-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* 13) Home — flexible "Image" block */
.mcm-image-section { margin: 24px 0; }
.mcm-image-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.mcm-image-inner img { display: block; width: 100%; height: auto; border-radius: 16px; }
.mcm-image-section--full { position: relative; width: 100vw; max-width: 100vw; left: 50%; margin-left: -50vw; margin-right: -50vw; }
.mcm-image-section--full .mcm-image-inner { max-width: 100%; padding: 0; }
.mcm-image-section--full .mcm-image-inner img { border-radius: 0; }

/* Who We Are — optional top/bottom images in the left column */
.mcm-who-img--top, .mcm-who-img--bottom { width: 100%; height: auto; border-radius: 14px; display: block; }
.mcm-who-img--top { margin: 0 0 16px; }
.mcm-who-img--bottom { margin: 16px 0 0; }