/* WordPress layer for the My Mechanic design: Elementor widgets, Astra header/footer, Site Settings. Loaded after
   styles.css (the design, adapted by build.py). */

/* ---------- Colors and fonts: Elementor → Site Settings → Global Colors / Global Fonts ---------- */
body {
  --mps-green: var(--e-global-color-mpsgreen, #95BF54);
  --mps-primer: var(--e-global-color-mpsprimer, #ECEEE9);
  --mps-white: var(--e-global-color-mpswhite, #FFFFFF);
  --mps-ink: var(--e-global-color-mpsink, #151714);
  --mps-ink-2: var(--e-global-color-mpsink2, #1D201C);
  --mps-graphite: var(--e-global-color-mpsgraphite, #474C45);
  --mps-olive: var(--e-global-color-mpsolive, #466112);
  --mps-mist: var(--e-global-color-mpsmist, #C9CEC3);
  --mps-line-dk: var(--e-global-color-mpslinedk, #3A3F37);
  --mps-fd: var(--e-global-typography-primary-font-family, "Big Shoulders Display"), Impact, "Arial Narrow", sans-serif;
  --mps-fb: var(--e-global-typography-text-font-family, "Instrument Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Widgets built from the design: the wrapper steps out of the layout on the live site ----------
   so each heading, paragraph, image and button sits in its container exactly as in the approved design.
   (In the editor the wrappers stay boxes, so every element can be selected.) */
body:not(.elementor-editor-active) .elementor-widget.mps { display: contents; }
/* Elementor re-renders every element after the design's script has run, so scroll reveals never fire in the editor:
   show them there, or everything below the hero stays invisible and can't be clicked */
.js body.elementor-editor-active.mps-site .reveal { opacity: 1; transform: none; transition: none; }
.js body.elementor-editor-active.mps-site :is(.reveal.idx, .reveal .idx)::before { transform: none; }
/* The editor gives every container two empty shape-divider boxes; in the design's grids they would take the first cells */
body.elementor-editor-active .e-con.mps > .elementor-shape:empty { display: none; }
/* …and Elementor's hover outline and resize handle must stay out of the layout even where the design makes children relative */
body.elementor-editor-active .elementor-element.mps > :is(.elementor-element-overlay, .ui-resizable-handle) { position: absolute !important; }
/* Elementor's buttons hold spans; the design's ".text-link span" underline is for a plain span and would cross the text */
body.mps-site .elementor-widget.x-text-link > .elementor-button span:is(.elementor-button-content-wrapper, .elementor-button-text, .elementor-button-icon) { background: none; }
/* Astra's back-to-top button: the design makes every svg a block, so center the arrow in the square again */
body.mps-site #ast-scroll-top .ast-icon { display: flex; align-items: center; justify-content: center; height: 100%; }
body .elementor-widget.mps { margin: 0; color: inherit; font: inherit; text-align: inherit; }
body .elementor-widget-icon.mps :is(.elementor-icon-wrapper, .elementor-icon) { display: contents; color: inherit; font-size: inherit; line-height: inherit; }
body .elementor-widget-button.mps :is(.elementor-button-content-wrapper, .elementor-button-icon) { display: contents; }
body .elementor-widget-button.mps .elementor-button-text { display: inline; }
body .elementor-widget-button.mps-icon-end .elementor-button-icon svg { order: 2; }

/* ---------- Content area: Elementor full width inside Astra ---------- */
body.mps-site #content > .ast-container, body.mps-site .site-content > .ast-container { max-width: none; padding: 0; display: block; }
body.mps-site .site-main { display: block; }

/* ---------- WordPress admin bar (only when logged in) ---------- */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* The design is sized in rem from a 16px root at every width; Astra shrinks the root to 91.2% below its tablet
   breakpoint, which made every page smaller and shorter on tablets and phones */
html { font-size: 100%; }

/* Headings take their section's color (Astra colors every heading ink, which hid headings on the dark cards);
   :where() keeps this below the design's own heading colors */
body.mps-site :where(.elementor-widget.mps) :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ---------- FAQ: Elementor's accordion in the design's FAQ style ---------- */
body.mps-site .e-n-accordion { display: block; border-top: 2px solid var(--mps-ink); margin: 1.5rem 0; }
body.mps-site .e-n-accordion-item { border: 0; border-bottom: 2px solid var(--mps-ink); margin: 0; }
body.mps-site .e-n-accordion-item > .e-n-accordion-item-title {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0; margin: 0;
  cursor: pointer; list-style: none; border: 0; background: none; color: inherit; font: 700 1.1rem/1.35 var(--mps-fb);
}
body.mps-site .e-n-accordion-item-title::-webkit-details-marker { display: none; }
body.mps-site .e-n-accordion-item-title :is(.e-n-accordion-item-title-header, .e-n-accordion-item-title-text) { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
body.mps-site .e-n-accordion-item-title-icon { display: none; }
body.mps-site .e-n-accordion-item > .e-n-accordion-item-title::after {
  content: ""; width: 20px; height: 20px; flex: none; background-color: currentColor; transform: rotate(90deg); transition: transform .2s;
  -webkit-mask: url(/wp-content/themes/mymechanic/assets/icons/arrow.svg) center / contain no-repeat; mask: url(/wp-content/themes/mymechanic/assets/icons/arrow.svg) center / contain no-repeat;
}
body.mps-site .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(-90deg); }
body.mps-site .e-n-accordion-item > .e-con { padding: 0 0 1.2rem; color: var(--mps-graphite); max-width: 64ch; }
body.mps-site .e-n-accordion-item > .e-con p { margin: 0; }

/* ======================================================================= header: Astra Header Builder
   Content: Customize → Header Builder (logo + site title/tagline, Primary Menu, HTML 1 phone, Button 1 "Book a service",
   mobile HTML 2 "Call"). Menu items: Appearance → Menus → "Main menu". The design's .site-header rules (sticky primer bar,
   2px ink rule, white once scrolled) apply to Astra's header as they are. */
body.mps-site #masthead :is(.ast-primary-header-bar, .main-header-bar) { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.mps-site #masthead .site-primary-header-wrap { max-width: var(--mps-wrap); margin-inline: auto; padding-inline: var(--mps-gut); min-height: 74px; }
body.mps-site #masthead .ast-builder-grid-row { min-height: 74px; align-items: center; column-gap: 1rem; }
body.mps-site #masthead .site-header-section { align-items: center; gap: .6rem; }
body.mps-site #masthead .site-header-section > * { margin: 0; }
/* brand: "MM" mark + MY MECHANIC / & OFF ROAD WERKZ · VENTURA (Customize → Site Identity) */
body.mps-site #masthead .site-branding { position: relative; display: flex; align-items: center; min-height: 46px; padding: 0; }
body.mps-site #masthead .site-logo-img { padding-right: .65rem; }
body.mps-site #masthead .site-logo-img img { width: 46px; height: 46px; max-width: none; border-radius: 6px; }
body.mps-site #masthead .ast-site-title-wrap { display: flex; flex-direction: column; }
body.mps-site #masthead .site-title { margin: 0; font: 900 1.7rem/.9 var(--mps-fd); text-transform: uppercase; white-space: nowrap; }
body.mps-site #masthead .site-title a { color: var(--mps-ink); text-decoration: none; }
body.mps-site #masthead .site-title a { font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* tagline (Customize → Site Identity) is "& Off Road Werkz"; the city follows it where there is room, as in the design */
@media (min-width: 640px) { body.mps-site #masthead .site-description::after { content: " · Ventura"; } }
/* phones: the brand shrinks, the Call button and menu button never do */
body.mps-site #masthead .ast-mobile-header-wrap .ast-builder-grid-row { display: flex; justify-content: space-between; }
body.mps-site #masthead .ast-mobile-header-wrap .site-header-primary-section-left { flex: 1 1 auto; min-width: 0; }
body.mps-site #masthead .ast-mobile-header-wrap .site-header-primary-section-right { flex: none; }
body.mps-site #masthead .site-branding, body.mps-site #masthead .ast-site-title-wrap { min-width: 0; }
body.mps-site #masthead .h-phone { flex: none; white-space: nowrap; }
body.mps-site #masthead .site-title a::after { content: ""; position: absolute; inset: 0; }
body.mps-site #masthead .site-description { margin: .25rem 0 0; font: 600 .7rem/1.2 var(--mps-fb); letter-spacing: .08em; text-transform: uppercase; color: var(--mps-graphite); white-space: nowrap; }
/* main menu */
body.mps-site #masthead .main-header-menu { gap: .1rem; background: none; border: 0; }
body.mps-site #masthead .main-header-menu > .menu-item > .menu-link {
  display: flex; align-items: center; min-height: 44px; height: auto; line-height: 1.2; padding: .6rem; border-radius: 4px;
  font: 600 .95rem/1.2 var(--mps-fb); color: var(--mps-ink); text-decoration: none; border: 0; background: none;
}
body.mps-site #masthead .main-header-menu > .menu-item > .menu-link:hover { background: rgba(149, 191, 84, .25); }
body.mps-site #masthead .main-header-menu > .menu-item:is(.current-menu-item, .current-page-ancestor) > .menu-link { box-shadow: inset 0 -4px 0 var(--mps-green); }
/* phone (HTML 1 / HTML 2) and the booking button (Button 1) */
body.mps-site #masthead .ast-builder-html-element p { margin: 0; }
body.mps-site #masthead .h-phone.has-i::before { width: 20px; height: 20px; vertical-align: 0; }
body.mps-site #masthead .ast-builder-button-wrap .ast-custom-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .6rem 1.25rem;
  font: 700 1rem/1.15 var(--mps-fb); color: var(--mps-ink); background: var(--mps-green); border: 2px solid var(--mps-ink); border-radius: 6px;
  transition: transform .15s, box-shadow .15s;
}
body.mps-site #masthead .ast-builder-button-wrap .ast-custom-button:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--mps-ink); }
body.mps-site #masthead .ast-builder-button-wrap > .menu-link { display: none; }
@media (max-width: 639px) {
  body.mps-site #masthead .ast-header-button-1 { display: none; }
  body.mps-site #masthead .site-title { font-size: 1.45rem; }
  body.mps-site #masthead .site-description { font-size: .62rem; letter-spacing: .05em; }
  body.mps-site #masthead .site-logo-img img { width: 40px; height: 40px; }
}
@media (max-width: 379px) { body.mps-site #masthead .site-description { display: none; } }
/* mobile menu button and panel */
body.mps-site #masthead .menu-toggle.main-header-menu-toggle {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0; margin: 0; border: 2px solid var(--mps-ink);
  border-radius: 6px; background: var(--mps-white); color: var(--mps-ink);
}
body.mps-site #masthead .menu-toggle .ast-mobile-svg { width: 24px; height: 24px; fill: currentColor; }
body.mps-site .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--mps-primer); color: var(--mps-ink); }
body.mps-site .ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close { color: var(--mps-ink); background: var(--mps-white); border: 2px solid var(--mps-ink); border-radius: 6px; width: 48px; height: 48px; }
body.mps-site .ast-mobile-popup-drawer .ast-mobile-popup-content { padding: 1rem var(--mps-gut) 2rem; }
body.mps-site .ast-mobile-popup-drawer .main-header-menu { background: none; border: 0; }
body.mps-site .ast-mobile-popup-drawer .main-header-menu .menu-item { border: 0; border-bottom: 2px solid #D5D9CF; }
body.mps-site .ast-mobile-popup-drawer .main-header-menu > .menu-item > .menu-link {
  padding: .55rem 0; font: 800 2.1rem/1.1 var(--mps-fd); text-transform: uppercase; color: var(--mps-ink); border: 0; background: none;
}
body.mps-site .ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link { color: var(--mps-olive); }

/* ======================================================================= footer: Astra Footer Builder
   Columns: Appearance → Widgets (Footer Widget 1: brand; 2: Visit; 3–4: menus "Footer: services" / "Footer: shop").
   Customize → Footer Builder → Copyright: the legal row (©, BAR/EPA numbers, Privacy, Terms, Accessibility). The design's
   .site-footer rules (dark band, green top rule) apply to Astra's footer as they are. */
body.mps-site .site-footer :is(.site-primary-footer-wrap, .site-below-footer-wrap, .site-above-footer-wrap) { background: transparent; border: 0; padding: 0; }
body.mps-site .site-footer .ast-builder-grid-row-container { display: block; padding: 0; margin: 0; }
body.mps-site .site-footer .ast-builder-grid-row-container-inner { max-width: var(--mps-wrap); width: 100%; box-sizing: border-box; margin-inline: auto; padding-inline: var(--mps-gut); }
body.mps-site .site-footer .site-primary-footer-inner-wrap.ast-builder-grid-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 760px) { body.mps-site .site-footer .site-primary-footer-inner-wrap.ast-builder-grid-row { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; } }  /* same as the design's .foot-grid */
body.mps-site .site-footer .ast-builder-grid-row > .site-footer-section { display: block; margin: 0; padding: 0; }
/* Astra gives the footer rows a 60px minimum height and its columns a 10px gap on tablets and phones; the design has neither */
body.mps-site .site-footer :is(.site-below-footer-wrap, .site-below-footer-inner-wrap, .site-primary-footer-wrap, .site-primary-footer-inner-wrap) { min-height: 0; }
body.mps-site .site-footer .footer-widget-area, body.mps-site .site-footer .widget { margin: 0; padding: 0; }
body.mps-site .site-footer :is(.widget-title, .foot-h) { margin: 0 0 .8rem; font: 700 .8rem/1.3 var(--mps-fb); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
body.mps-site .site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
body.mps-site .site-footer .widget li { margin: 0; }
body.mps-site .site-footer .site-below-footer-inner-wrap.ast-builder-grid-row { display: block; }
body.mps-site .site-footer .site-below-footer-wrap :is(.ast-builder-layout-element, .footer-widget-area, .ast-builder-html-element, .ast-footer-copyright) { display: block; margin: 0; text-align: left; }
body.mps-site .site-footer .ast-footer-copyright, body.mps-site .site-footer .ast-footer-copyright p { color: var(--mps-mist); }
body.mps-site .site-footer .ast-footer-copyright .foot-base p { margin: 0; }

/* ======================================================================= CSS icons in text (sizes and colors per place) */
body.mps-site .eyebrow.has-i::before { width: 20px; height: 20px; transform: none; box-shadow: none; background-color: currentColor; }
body.mps-site :is(.signs, .facts) li.has-i::before { width: 20px; height: 20px; margin-top: .2rem; vertical-align: 0; }
body.mps-site .signs li.has-i::before { background-color: var(--mps-green); }
body.mps-site .facts li.has-i::before { background-color: var(--mps-olive); }
body.mps-site :is(.link, .link-lime, .more).has-i::after, body.mps-site .other-svc a.has-i::before { width: 20px; height: 20px; vertical-align: 0; }
body.mps-site .proof p.has-i::before { display: block; width: 26px; height: 26px; margin-bottom: .55rem; background-color: var(--mps-green); }
/* Astra lets footer text break anywhere, which squeezed the Visit column around the email address; the design keeps words whole */
body.mps-site .site-footer .widget :is(p, a, li) { overflow-wrap: normal; }

/* ---------- Editor only: the Noise or Light? answers and the noise list open on a click on the live site; show them all
   while editing so every answer can be edited */
body.elementor-editor-active .sorter :is(.result, .noises)[hidden] { display: block !important; }
body.elementor-editor-active .sorter .noises[hidden] { display: grid !important; }
body.elementor-editor-active .sorter .result + .result { margin-top: 1rem; }
/* phone menu panel: Book / Call / address under the menu (Appearance → Widgets → Header Widget 1, placed in the mobile Off-Canvas) */
body.mps-site .ast-mobile-popup-drawer .nav-cta { display: grid; gap: .75rem; margin-top: 1.5rem; }
body.mps-site .ast-mobile-popup-drawer .nav-cta a.has-i::before { width: 20px; height: 20px; vertical-align: 0; }
body.mps-site .ast-mobile-popup-drawer .ast-builder-html-element p:empty { display: none; }
body.mps-site .ast-mobile-popup-drawer :is(.widget, .header-widget-area) { margin: 0; padding: 0; }

/* ---------- CSS icons (generated) ---------- */
.has-i::before, .has-i::after { flex: none; }
.has-i[class*="has-ib--"]::before, .has-i[class*="has-ia--"]::after { content: ""; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background-color: currentColor; }
.has-i[class*="has-ib--"]::before { -webkit-mask: var(--mps-ib) center / contain no-repeat; mask: var(--mps-ib) center / contain no-repeat; }
.has-i[class*="has-ia--"]::after { -webkit-mask: var(--mps-ia) center / contain no-repeat; mask: var(--mps-ia) center / contain no-repeat; }
.has-ib--arrow { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/arrow.svg); } .has-ia--arrow { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/arrow.svg); }
.has-ib--badge { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/badge.svg); } .has-ia--badge { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/badge.svg); }
.has-ib--calendar { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/calendar.svg); } .has-ia--calendar { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/calendar.svg); }
.has-ib--check { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/check.svg); } .has-ia--check { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/check.svg); }
.has-ib--clock { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/clock.svg); } .has-ia--clock { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/clock.svg); }
.has-ib--close { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/close.svg); } .has-ia--close { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/close.svg); }
.has-ib--disc { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/disc.svg); } .has-ia--disc { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/disc.svg); }
.has-ib--drop { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/drop.svg); } .has-ia--drop { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/drop.svg); }
.has-ib--gauge { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/gauge.svg); } .has-ia--gauge { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/gauge.svg); }
.has-ib--l-abs { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-abs.svg); } .has-ia--l-abs { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-abs.svg); }
.has-ib--l-battery { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-battery.svg); } .has-ia--l-battery { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-battery.svg); }
.has-ib--l-brake { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-brake.svg); } .has-ia--l-brake { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-brake.svg); }
.has-ib--l-engine { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-engine.svg); } .has-ia--l-engine { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-engine.svg); }
.has-ib--l-oil { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-oil.svg); } .has-ia--l-oil { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-oil.svg); }
.has-ib--l-temp { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-temp.svg); } .has-ia--l-temp { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-temp.svg); }
.has-ib--l-tire { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-tire.svg); } .has-ia--l-tire { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-tire.svg); }
.has-ib--l-wrench { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/l-wrench.svg); } .has-ia--l-wrench { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/l-wrench.svg); }
.has-ib--mail { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/mail.svg); } .has-ia--mail { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/mail.svg); }
.has-ib--menu { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/menu.svg); } .has-ia--menu { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/menu.svg); }
.has-ib--mountain { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/mountain.svg); } .has-ia--mountain { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/mountain.svg); }
.has-ib--phone { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/phone.svg); } .has-ia--phone { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/phone.svg); }
.has-ib--pin { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/pin.svg); } .has-ia--pin { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/pin.svg); }
.has-ib--question { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/question.svg); } .has-ia--question { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/question.svg); }
.has-ib--shield { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/shield.svg); } .has-ia--shield { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/shield.svg); }
.has-ib--star { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/star.svg); } .has-ia--star { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/star.svg); }
.has-ib--wrench { --mps-ib: url(/wp-content/themes/mymechanic/assets/icons/wrench.svg); } .has-ia--wrench { --mps-ia: url(/wp-content/themes/mymechanic/assets/icons/wrench.svg); }