/* === Interactive CSS additions (not captured by CDP pipeline) === */

/* Horizontal nav layout for data-driven header.njk.
   The CDP pipeline captured layout via per-element classes (flex-row-inherit-wrap-pad-0,
   list-dropdown-animated, list-abs-z-high-shifted-anim-v2, e-relative, etc.) but the data-driven
   template only emits .unifiednav__container / .unifiednav__item-wrap, so we add
   the layout, positioning, and hidden-state rules generically here. */

/* Top-level menubar: horizontal flex row */
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) > .unifiednav__container:not([data-depth]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: inherit;
    padding: 0;
    margin: 0;
    list-style: none;
    vertical-align: top;
}

/* Dropdown sub-menus: hidden by default */
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__container[data-depth] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: transform .3s ease-in-out, opacity .3s ease-out;
    list-style: none;
    background-color: #faf9f9;
}

/* Level-2+ sub-menus open to the side, not below */
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__container[data-depth="1"] {
    top: 0;
    left: auto;
    right: 100%;
    min-width: 100%;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateX(10px) translateY(0);
}

/* Top-level items need relative positioning for absolute dropdown children */
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap {
    position: relative;
}

/* Sub-menu items also need relative positioning for nested dropdowns */
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) .unifiednav__container[data-depth] > .unifiednav__item-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Show dropdown on desktop hover.
   Responsive classes are applied to #dmRoot (not body) by site.js. */
.main-navigation.unifiednav .unifiednav__item-wrap:hover > .unifiednav__container,
.main-navigation.unifiednav .unifiednav__item-wrap.hover > .unifiednav__container[data-depth] {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Level-2 submenus (shift horizontally) */
.main-navigation.unifiednav .unifiednav__item-wrap:hover > .unifiednav__container[data-depth="1"],
.main-navigation.unifiednav .unifiednav__item-wrap.hover > .unifiednav__container[data-depth="1"] {
    transform: translateX(0) translateY(0);
}

/* Pulse animation for CTA buttons */
@keyframes btn-pulse {
    0%, 100% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}

/* Nav underline hover effect (effect-bottom2) */
.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::before,
.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::after {
    content: "";
    width: 100%;
    height: 0;
    border: 0 solid transparent;
    border-top-color: currentColor;
    display: block;
    transition: transform .2s ease-out, opacity .2s ease-out;
    opacity: 0;
}

.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item:hover .nav-item-text::after,
.main-navigation.unifiednav .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item:hover .nav-item-text::before {
    opacity: 1;
}

.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::before,
.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::after {
    transform: scaleX(0);
    border-top-width: 2px;
}

.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::after {
    margin-top: .2em;
}

.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::before {
    margin-bottom: .2em;
    border-top-color: transparent;
}

.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::before,
.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item .nav-item-text::after {
    transform-origin: left;
}

.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item:hover .nav-item-text::after,
.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap > .unifiednav__item:hover .nav-item-text::before {
    transform: scaleX(1);
}

/* Mobile vertical nav accordion */
.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HIDE"] .unifiednav__container[data-depth],
.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HOVER"] .unifiednav__container[data-depth] {
    transition: transform .3s ease-in-out, opacity .6s ease-out, max-height .3s ease-in-out;
    transform-origin: top;
    height: auto;
    overflow: hidden;
}

.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HIDE"] > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap .unifiednav__container[data-depth],
.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HOVER"] > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap .unifiednav__container[data-depth] {
    opacity: 0;
    max-height: 0;
}

.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HIDE"] > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap.unifiednav__item-wrap_open .unifiednav__container[data-depth],
.main-navigation.unifiednav[data-nav-structure="VERTICAL"][data-show-vertical-sub-items="HOVER"] > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap.unifiednav__item-wrap_open .unifiednav__container[data-depth],
.main-navigation.unifiednav .unifiednav__container .unifiednav__item-wrap.unifiednav__item-wrap_open > .unifiednav__container[data-depth] {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    max-height: 2000px;
}

/* Arrow icon rotation */
.main-navigation.unifiednav .unifiednav__container .unifiednav__item-wrap .unifiednav__item.unifiednav__item_has-sub-nav .nav-item-text .icon::before {
    transition: transform .3s ease-out;
}

.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap:hover > .unifiednav__item.unifiednav__item_has-sub-nav > .nav-item-text .icon::before,
.main-navigation.unifiednav:not([data-nav-structure="VERTICAL"]) > .unifiednav__container:not([data-depth]) > .unifiednav__item-wrap.hover > .unifiednav__item.unifiednav__item_has-sub-nav > .nav-item-text .icon::before {
    transform: rotate(180deg);
}

/* Dialog overlay styles */
.phone-dialog-overlay.is-open,
.coupon-dialog-overlay.is-open,
.inquiry-dialog-overlay.is-open {
    display: flex;
}

/* Focus-visible styles for accessibility.
   Covers: links, buttons (carousel nav, dialog close, coupon chips),
   form fields, summary (accordion toggles), tabindex (FAQ toggles),
   and nav dropdown triggers. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color_1, #349f36);
    outline-offset: 2px;
}

/* Remove default focus outline since we're using focus-visible */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

/* ── Accessibility Fixes (Phase 6A) ────────────────────── */

/* 1. Responsive hide for mobile-only elements (showOnMedium)
 *    Without this rule, the hamburger header bar is visible on desktop
 *    on pages that don't include the legacy styles.css (e.g. Careers). */
@media (min-width: 1025px) {
    #dmRoot #dm #dmStyle_innerContainer .showOnMedium,
    #dmRoot #dm .dmInner .hide-for-large {
        display: none !important;
    }
}

/* 2. Footer container background — ensures footer has its blue bg
 *    on all pages, not just those that loaded the old styles.css. */
.dmFooterContainer {
    background: var(--color_2);
}

/* 3. Fix scrollable dropdown menus: remove overflow-y:auto so axe
 *    does not flag them as scrollable regions without keyboard access.
 *    Desktop dropdowns appear on hover and do not need scroll. */
.stack-dropdown-scrollable {
    overflow-y: visible;
}

/* 4. Footer link and text colors — ensure all footer content is
 *    readable on the blue/navy background. These classes are from
 *    footer.njk's semantic HTML and need explicit styling since
 *    footer.css is not loaded. */
.ft-services a,
.ft-loc-name a,
.ft-loc-name strong,
.ft-loc-phone a,
.ft-loc-phone strong,
.ft-loc-phone font,
.ft-loc-address a,
.ft-copyright p,
.ft-copyright a,
.ft-links a,
.ft-nav-desktop a,
.ft-nav-mobile a,
.ft-follow-text p {
    color: var(--color_3);
    text-decoration: none;
}

.ft-loc-hours {
    color: var(--color_3);
}

/* Footer nav section backgrounds */
.ft-navs {
    background: var(--color_6);
}

.ft-bottom {
    background: var(--color_6);
}

/* Footer nav dropdown has its own light bg */
.ft-nav-desktop > ul > li > ul {
    background-color: #faf9f9;
}

.ft-nav-desktop > ul > li > ul a {
    color: #737373;  /* darkened from #999 for WCAG AA (4.51:1 on #faf9f9) */
}

/* Hamburger drawer open state — slide in from right */
.layout-drawer_open .block-fixed-sidebar-w-h-full {
    transform: translate(0, 0);
}

/* Darken page overlay when drawer is open */
.layout-drawer_open #layout-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 12;
}

/* Find Nearest Location highlight */
.nearest {
    outline: 3px solid var(--color_1);
    outline-offset: 2px;
    border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(60, 116, 186, 0.15);
    transition: outline-color 0.3s ease, box-shadow 0.3s ease;
}
.nearest .dmGeoMLocItemTitle,
.nearest .loc-card__name {
    color: var(--color_1);
}

/* Location contact card: smaller + centered on desktop, full-width on mobile */
.loc-contact-bar__card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .loc-contact-bar__card {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* Services page "Visit Page >" buttons — green text, bold */
.svc-cat__btn,
.svc-grid__card-btn {
    color: #349f36 !important;
    font-weight: 700 !important;
}

/* ── Unified button hover states ──
   btn-filled:        green bg → white bg + green border + green text
   btn-outline:       snow bg  → green bg + green border + white text
   btn-outline-white: transparent + white border + white text → green bg + green border + white text */
.btn-filled:hover {
    background-color: #ffffff !important;
    border-color: #349f36 !important;
    color: #349f36 !important;
}
.btn-filled:hover .text,
.btn-filled:hover > span {
    color: #349f36 !important;
}
.btn-filled:hover .iconBg {
    color: #349f36;
}
.btn-outline:hover {
    background-color: var(--color_1) !important;
    border-color: var(--color_1) !important;
    color: #ffffff !important;
}
.btn-outline:hover .text,
.btn-outline:hover > span {
    color: #ffffff !important;
}
.btn-outline-white:hover {
    background-color: var(--color_1) !important;
    border-color: var(--color_1) !important;
    color: #ffffff !important;
}
.btn-outline-white:hover .text,
.btn-outline-white:hover > span {
    color: #ffffff !important;
}

/* ── Blog Fixes ──────────────────────────────────────────── */

/* Issue 1: Blog search bar — darker, more visible border */
.dmBlogSearchInput {
    border: 1px solid #9ca3af !important;
}

/* Issue 2: Blog search — hide filtered-out posts */
.postArticle.blog-search-hidden {
    display: none !important;
}

/* Issue 4: Blog post nav — side-by-side on mobile */
@media (max-width: 767px) {
    .blog-post-nav {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    .blog-post-nav .blog-nav-older,
    .blog-post-nav .blog-nav-newer {
        width: auto;
        float: none;
    }
}

/* ── Fixes from Alex QA (2026-03-26) ───────────────────── */

/* Inquiry dialog input fields — gray background + border */
.inquiry-dialog__input {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    background-color: #f0f0f0;
    font-family: inherit;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
}
.inquiry-dialog__input:focus-visible {
    border-color: var(--color_1, #349f36);
    box-shadow: 0 0 0 2px rgba(52, 159, 54, 0.2);
    outline: none;
}

/* Coupon dialog — better field borders + spacing + line height */
.coupon-sms-field input {
    border: 1.5px solid #999999;
    background-color: #ffffff;
}
.coupon-sms-field {
    margin-bottom: 18px;
}
.coupon-sms-field label {
    margin-bottom: 8px;
    line-height: 1.4;
}
.coupon-dialog p,
.coupon-dialog .coupon-sms-disclaimer {
    line-height: 1.5;
}
.coupon-sms-chips-wrapper {
    margin-top: 12px;
    margin-bottom: 16px;
}
.coupon-sms-chip {
    margin-bottom: 4px;
}

/* Blog search bar — pill shape matching original Duda */
.dmBlogSearchInput {
    display: block !important;
    width: 100% !important;
    height: 41px !important;
    padding: 0 40px 0 23px;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    background-color: #ffffff;
    font-size: 14px;
    color: #333333;
    box-sizing: border-box;
}
.dmBlogSearchInput:focus-visible {
    border-color: var(--color_1, #349f36);
    box-shadow: 0 0 0 2px rgba(52, 159, 54, 0.15);
    outline: none;
}
.dmBlogSearchIcon {
    position: absolute !important;
    right: 15px !important;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    pointer-events: none;
}

/* FAQ accordion chevron rotation on open — target the wrapper div, not the SVG
   (SVG elements ignore CSS transforms when nested inside certain layout contexts) */
.faq-item.is-open .faq-toggle-icon {
    transform: rotate(180deg);
}

/* Homepage FAQ accordion padding */
.accordion-item {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Service page: info box + CTA match map width */
.svc-locations__loc-list,
.svc-locations__cta {
    width: 100%;
}

/* Location page: contact bar card match map width */
.loc-contact-bar__card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.svc-locations__cta .svc-locations__btn-schedule,
.svc-locations__cta .svc-locations__btn-call {
    flex: 1;
    width: auto;
}

/* Hide dropdown chevrons on nav items without children */
[data-hidden-on-desktop] {
    display: none;
}

/* Schedule Service Online block: fill container height */
.link-full-w-h-md-skewed-hover {
    height: 100%;
}

/* Hide "What Our Customers Say" from Elfsight review widgets */
.es-widget-title {
    display: none !important;
}

/* Show footer nav dropdown on hover */
.ft-nav-desktop > ul > li[aria-haspopup="true"]:hover > ul {
    display: flex;
}

/* ── Hover state fixes ─────────────────────────────────────
   Duda buttons use --btn-hover-text-color / --btn-hover-bg CSS vars
   that were swapped by Duda's JS on hover. We replicate with CSS. */

/* Fallback: .text spans inherit parent color on hover */
a:hover > .text,
a:hover > span > .text {
    color: inherit;
}

/* Remaining non-unified button hover */
.link-white-16-medium:hover .text {
    color: var(--btn-hover-text-color) !important;
}

/* Secondary button (Find a Gemba Location): override generated bg */
.btn-secondary-link:hover,
.btn-secondary-link:hover {
    background-color: var(--btn-hover-bg) !important;
    background-image: none;
}
.btn-secondary-link:hover .text,
.btn-secondary-link:hover .text {
    color: var(--btn-hover-text-color) !important;
}

/* Button icon color should follow hover text color */
.btn-secondary-link:hover .iconBg {
    color: var(--btn-hover-text-color);
}

/* ── Fixes from Alex QA round 2 (2026-03-26 14:16+) ──── */

/* "Why Choose" accordion chevron: rotate UP when open.
   generated2.css applies rotate(180deg) to the SVG (.ext-ico-wf-tt-2),
   flipping the default V→^. Neutralize that so the SVG is always a V,
   then let the JS rotation on the parent .accordion-chevron handle open/close. */
.accordion-chevron .ext-ico-wf-tt-2 {
    transform: rotate(0deg) !important;
}
.accordion-chevron {
    transition: transform 0.35s ease;
}

/* FAQ accordion body: more top/bottom padding (homepage + /faqs/).
   Needs two-class specificity to override generated2.css's
   .icon-box.clip-base-c0341 { padding: 0px 20px } */
.hp-faq-details .hp-faq-answer,
.faq-item .faq-answer {
    padding-top: 12px;
    padding-bottom: 16px;
}

/* Coupon dialog: more spacing around text fields and labels */
.coupon-dialog {
    padding: 24px 20px;
}
.coupon-sms-field {
    margin-bottom: 20px;
}
.coupon-sms-field label {
    margin-bottom: 10px;
    display: block;
}
.coupon-sms-field input {
    padding: 10px 12px;
    margin-top: 4px;
}
.coupon-sms-field .field-error {
    margin-top: 6px;
    display: block;
}
.coupon-sms-consent {
    margin-top: 16px;
    line-height: 1.5;
}
.coupon-sms-chips {
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Location contact card: ensure it scrolls behind the fixed header (z-index: 101) */
.loc-contact-bar {
    position: relative;
    z-index: 1;
}

/* Coupons page: more breathing room above the page title on desktop */
@media (min-width: 1025px) {
    .coup-hero.section-pad-xl-centered-4 {
        padding-top: 270px;
    }
}

/* Image credits page: allow long URLs/domains to break across lines on mobile */
.u-paragraph-calendar-icon-imaage-by p,
.u-paragraph-calendar-icon-imaage-by a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Green hover removal (2026-03-26) ──────────────────────
   generated2.css lines 18815-18898 apply background-color: #2a7f2b
   on hover to ~80 link classes. Many of those are nav links, footer
   links, logo links, and card links that should NOT get a green
   background on hover. Override them here by category. */

/* 1. Header logo link — image-only, no hover background */
.link-italic:hover,
.base-bg-attachment-reset.link-card-shadow-rounded:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* 2. Top-level nav links — hover effect is underline (effect-bottom2),
   not green background */
.base-text-decoration-reset.nav-link:hover,
.base-text-decoration-reset.link-nav-white-semibold:hover,
.base-text-decoration-reset.link-nav-dark-semibold:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* 3. Dropdown nav items — correct hover is gray (#ececec) from
   generated2.css .link-nav-pad-arrow:hover; but nav-link
   was incorrectly grouped with the green rule */
.base-text-decoration-reset.nav-link:hover {
    background-color: #ececec !important;
    color: #000000 !important;
}

/* 4. Footer links on blue/navy background — no green hover */
.base-text-decoration-reset.link-white-bold:hover,
.base-text-decoration-reset.link-white-bold-underline:hover,
.base-text-decoration-reset.link-white-bold:hover,
.base-text-decoration-reset.link-white-bold:hover,
.base-text-decoration-reset.link-white-bold-underline:hover,
.base-text-decoration-reset.link-white-underline-sm:hover,
.base-text-decoration-reset.link-white-bold:hover,
.base-text-decoration-reset.link-white-underline-sm:hover,
.base-text-decoration-reset.link-black-bg-white-text:hover {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* 5. Footer mobile nav and social icon links */
.link-nav-mobile-border:hover {
    background-color: transparent !important;
    color: inherit !important;
}
.base-text-decoration-reset.link-no-underline:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* 6. Card-style links (service cards, blog cards) — no green bg */
.text-border-reset:hover,
.base-text-decoration-reset.link-no-underline:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* 7. Blog/content text links — no green bg */
.link-image-credit:hover,
.link-image-credit:hover,
.link-theme4-underline:hover {
    background-color: transparent !important;
    color: inherit !important;
}

/* (duplicate button hover rules removed — consolidated above) */

/* ── Vehicle brand page mobile fixes (2026-03-26) ──────────
   1. Hero "Schedule" button is too narrow on mobile — the
      calc(100% - 348px) width shrinks to ~27px on 375px screens.
   2. Services grid stays 4-column on mobile, crushing card text. */
@media (max-width: 767px) {
    /* Hero CTA button: full width on mobile */
    .veh-hero__cta.link-full-w-mw-sm {
        width: 100%;
        max-width: 100%;
    }

    /* Services grid: wrap into single column on mobile */
    .veh-services__grid.row-nowrap {
        flex-wrap: wrap;
    }
    .veh-services__grid > .article-flex-quarter {
        flex-basis: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── Footer social icons: size override + new platforms ── */

.ft-follow-social .span-w-sm-h-sm-mb-xs {
  width: 48px;
  height: 48px;
}

.ft-follow-social .base-icon-font-variant-reset.icon-social-facebook-lg,
.ft-follow-social .base-icon-font-variant-reset.icon-social-instagram-lg {
  font-size: 32px;
  line-height: 48px;
  padding: 2px;
}

.base-icon-font-variant-reset.icon-social-youtube-lg {
  padding: 2px;
  border-radius: 50%;
  background-color: #ff0000;
  font-family: dm-social-icons;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  line-height: 48px;
  text-transform: none;
}

.base-icon-font-variant-reset.icon-social-youtube-lg::before {
  content: "\ea9d";
  display: inline-block;
}

.base-icon-font-variant-reset.icon-social-tiktok-lg {
  padding: 2px;
  border-radius: 50%;
  background-color: #000000;
  font-family: dm-social-icons;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  line-height: 48px;
  text-transform: none;
}

.base-icon-font-variant-reset.icon-social-tiktok-lg::before {
  content: "\e813";
  display: inline-block;
}

.base-icon-font-variant-reset.icon-social-linkedin-lg {
  padding: 2px;
  border-radius: 50%;
  background-color: #0a66c2;
  font-family: dm-social-icons;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  line-height: 48px;
  text-transform: none;
}

.base-icon-font-variant-reset.icon-social-linkedin-lg::before {
  content: "\f0e1";
  display: inline-block;
}

/* Per-location social icons: platform-specific glyphs (merged from icon-social-white-alt variants) */
.dmSocialInstagram.icon-social-white::before {
  content: "\ea92";
}
.dmSocialGoogleMyBusiness.icon-social-white::before {
  content: "\e903";
}
.dmSocialYelp.icon-social-white::before {
  content: "\ead7";
}

/* ── Alex QA 2026-03-31 ──────────────────────────────────── */

/* #3: "Visit Services Page" button on vehicle pages — green hover */
.veh-services__cta-btn:hover {
    background-color: var(--color_1) !important;
    border-color: var(--color_1) !important;
    color: #ffffff !important;
}
.veh-services__cta-btn:hover .text,
.veh-services__cta-btn:hover > span {
    color: #ffffff !important;
}

/* #4, #6: Vehicle page mobile — center Schedule/Visit buttons.
   Target only the mobile-specific CTA (.veh-services__mobile-cta),
   NOT the desktop header button which has display:none on mobile
   via .flex-row-center-center-mob-none in generated2.css. */
@media (max-width: 767px) {
    .veh-brands__cta,
    .veh-services__mobile-cta .veh-services__cta-btn {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* #5: "Read All Reviews" on vehicle pages (mobile) — white button on green bg */
.veh-reviews__cta {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--color_1) !important;
}
.veh-reviews__cta .text,
.veh-reviews__cta > span {
    color: var(--color_1) !important;
}
.veh-reviews__cta:hover {
    background-color: var(--color_1) !important;
    border-color: var(--color_1) !important;
    color: #ffffff !important;
}
.veh-reviews__cta:hover .text,
.veh-reviews__cta:hover > span {
    color: #ffffff !important;
}

/* #7: Footer social icons — wrap on mobile */
@media (max-width: 767px) {
    .ft-follow-social {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
}

/* #8, #9: "Visit Page >" links on service/location pages — white underline hover */
.hp-services-grid__card-btn .text:hover, .hp-services-grid__card-btn:hover {
    background-color: transparent !important;
    text-decoration: underline !important;
    text-decoration-color: #ffffff !important;
    text-underline-offset: 3px;
    color: white;
}

/* #10: "Call Us" button on service pages — green text */
.svc-locations__btn-call .text {
    color: var(--color_1);
}

/* #11: Coupon dialog "Send My Verification Code" — center */
#coupon-sms-submit {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* #13: Header "Schedule Service Online" — skewed button fixes.
   Green background on container fills the triangle gap the skew reveals.
   On hover the button turns white, so hide the green patch. */
.btn-filled.link-full-w-h-md-skewed-hover {
    border-radius: 0;
    border-color: transparent !important;
}
#el-col-schedule-service-online::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background-color: #349f36;
    z-index: 0;
    transition: background-color 0.2s ease;
}
#el-col-schedule-service-online:has(.btn-filled:hover)::before {
    background-color: #ffffff;
}


/* #14: Careers "Apply Now" buttons — hover effect */
.job-card .apply-btn:hover {
    background-color: #ffffff !important;
    border-color: #349f36 !important;
    color: #349f36 !important;
}

/* #15: Video/transcript page — spacing below sticky header */
[data-page-alias="video-transcript"] #stickyHeaderSpacer {
    height: 80px;
}

/* #16: Optimized hero background images — WebP with JPG fallback, cropped to visible area */
.section-bg-image {
    background-image: url("/assets/images/img-278-hero.webp"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=");
}
.block-bg-image-c0580 {
    background-image: url("/assets/images/img-278-hero.webp");
}

/* ── Alex QA 2026-04-01 — Issues 1-5, 11 ──────────────── */

/* Issue 2+3: "Visit Services Page" button overflow on mobile.
   .link-var-w-mt-sm-mb-sm-ml-xl sets width:280px + margin-left:74.9375px
   which totals ~355px — too wide for a 375px viewport once container
   padding (section 15px + inner 5px + mobile-cta 20px) is subtracted.
   Override width and margin so the button fits and centers. */
@media (max-width: 767px) {
    .veh-services__cta-btn.link-var-w-mt-sm-mb-sm-ml-xl {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Issue 4: "Visit Page >" links — hover states for location and service pages */
.loc-services__card-link:hover {
    color: white !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.svc-card-link:hover,
.svc-card-link:hover .text {
    color: white !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Issue 11: Homepage "Get to Know Us" — vertically center content */
.hp-about .hp-about__inner {
    align-items: center;
}

/* ── Color regression from span removal ────────────────────
   Removing <span class="text-body-white"> from headings stripped the
   white color override. heading-hero-dark sets color: #000000 which
   is unreadable on dark hero backgrounds. Restore white. */
.veh-hero__heading {
    color: var(--color_3) !important;
}

/* ── Unified mobile hero padding ─────────────────────────────
   Normalize all standard background-image heroes to the same
   compact height on mobile. */
@media (max-width: 767px) {
    .svc-hero,
    .veh-hero,
    .loc-hero.section-min-h-lg,
    .si-hero,
    .coup-hero,
    .tires-hero {
        padding: 100px 15px 60px;
    }

    /* Tires hero CTA: calc(100%-308px) goes negative on mobile */
    .ext-cx-wcalc-mw506-h75-ctr-t10-b10-pulse {
        width: 100%;
        max-width: 100%;
    }
}

/* Phoenix location: about-section circle image (missing from generated CSS) */
.base-block-circle-bg-image-c0345.block-circle-bg-image-phoenix {
    background-image: url("/assets/images/inside-auto-repair-shop-gemba-automotive-phoenix.jpg");
}

/* Location hero star rating */
.loc-hero__stars {
  margin-top: 24px;
  text-align: center;
}
.loc-hero__review-count {
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: 6px;
  text-align: center;
  opacity: 0.9;
  font-family: var(--font-body, Spartan, sans-serif);
}