/*
Theme Name:        Mobile Auto Canada
Theme URI:         https://mobileautocanada.com
Description:       Child theme of Hello Elementor for the Mobile Auto Canada rebuild. Holds style enqueues, global CSS overrides, and custom code. The site is built in Elementor (Path A) using the SearchKings design as reference.
Author:            Bryka Inc.
Author URI:        https://bryka.ca
Template:          hello-elementor
Version:           1.2.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       mac-child
*/

/* Global style overrides for Mobile Auto Canada live here.
   Most design is controlled via Elementor global styles (Site Settings).
   Add only what cannot be expressed there. */

/* Header dropdown (submenu) hover/active: white text on brand orange.
   Elementor's dropdown background-hover control wasn't emitting reliably, so
   enforce the readable orange-on-hover state here (brand orange #F07000). */
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a:focus,
.elementor-nav-menu--dropdown a.highlighted,
.e-con .elementor-nav-menu--dropdown a:hover {
  background-color: #F07000 !important;
  color: #FFFFFF !important;
}
.elementor-nav-menu--dropdown a { color: #111111; }

/* Homepage "Our Services" cards (Elementor nested carousel).
   Card structure/colors are editable in Elementor; only the hover
   micro-interaction lives here. .mac-service-card is set on each slide
   container in scripts/build-homepage.php. */
.mac-service-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  cursor: pointer;
}
.mac-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
.mac-service-card:hover .elementor-icon i,
.mac-service-card:hover .elementor-icon svg {
  transform: scale(1.08);
  transition: transform .25s ease;
}

/* Team member cards (Our Team) — uniform full-bleed headshot with a subtle hover zoom.
   Class set on the image widget in scripts/build-interior-pages.php team_card(). The card body
   padding (name + role inset from the border) is handled in that builder; this only normalizes
   the photo so every card lines up regardless of the original headshot dimensions. */
.mac-team-photo,
.mac-team-photo .elementor-widget-container,
.mac-team-photo a { display: block; line-height: 0; overflow: hidden; }
.mac-team-photo img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center top;
  transition: transform .35s ease;
}
.mac-team-photo:hover img { transform: scale(1.05); }

/* Blog archive (/blog/) — modern card grid via Elementor Pro "Archive Posts" widget,
   archive_cards skin (built in scripts/build-blog-template.php). The widget exposes only
   layout controls through the editor data, so brand colours are enforced here. Layout
   (columns, gaps, what shows) stays editable in Elementor; only colours/polish are pinned.
   Scoped to body.blog so it never touches the vehicle archive or other archives. */
body.blog .elementor-post__card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(17, 17, 17, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
body.blog .elementor-post__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(17, 17, 17, .18);
}
/* Category badge in brand orange */
body.blog .elementor-post__card .elementor-post__badge {
  background-color: #F07000;
  color: #FFFFFF;
}
/* Title: brand navy, hover to orange */
body.blog .elementor-post__card .elementor-post__title a { color: #111111; }
body.blog .elementor-post__card .elementor-post__title a:hover { color: #F07000; }
/* Read More in brand orange */
body.blog .elementor-post__card .elementor-post__read-more,
body.blog .elementor-post__card .elementor-post__read-more:focus { color: #F07000; }
body.blog .elementor-post__card .elementor-post__read-more:hover { color: #c85a00; }
/* Pagination active/hover in brand orange */
body.blog .elementor-pagination .page-numbers.current,
body.blog .elementor-pagination .page-numbers:hover {
  color: #F07000;
  border-color: #F07000;
}

/* Hero banner overlay — a navy scrim over a background image so white headings stay legible.
   Script-built Elementor containers emit neither the native .elementor-background-overlay div
   NOR a custom _css_classes string (that only renders on widgets), so the overlay is draped via
   a pseudo-element on the banner, selected structurally: the banner is the FIRST top-level
   container of each blog template ([data-elementor-type] > .e-con:first-child). body-scoped so
   it never touches the vehicle archive (also an "archive" template type). */
body.blog [data-elementor-type="archive"] > .e-con:first-child,
body.single-post [data-elementor-type="single-post"] > .e-con:first-child { position: relative; }
body.blog [data-elementor-type="archive"] > .e-con:first-child::before,
body.single-post [data-elementor-type="single-post"] > .e-con:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 17, 17, .68);
  z-index: 0;
  pointer-events: none;
}
body.blog [data-elementor-type="archive"] > .e-con:first-child > *,
body.single-post [data-elementor-type="single-post"] > .e-con:first-child > * { position: relative; z-index: 1; }

/* Single blog post (/<post>/) — matches the /blog/ homepage: post's own featured image as
   the banner background, category + date meta, white title, then a readable content column
   plus prev/next nav and a Back to Blog button (built in scripts/build-blog-single.php).
   Scoped to body.single-post so nothing here touches vehicle singles or other templates. */

/* Banner meta line: white text, category rendered as an orange pill to echo the homepage badge */
body.single-post .mac-postmeta .elementor-post-info,
body.single-post .mac-postmeta .elementor-post-info__item,
body.single-post .mac-postmeta .elementor-post-info__item a { color: #FFFFFF; }
body.single-post .mac-postmeta { margin-bottom: 14px; }
body.single-post .mac-postmeta .elementor-post-info__item--type-date { font-size: 15px; opacity: .92; }
body.single-post .mac-postmeta .elementor-post-info__terms-list-item {
  display: inline-block;
  background-color: #F07000;
  color: #FFFFFF;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Readable article body */
body.single-post .mac-postbody { font-size: 17px; line-height: 1.75; color: #33474f; }
body.single-post .mac-postbody h2,
body.single-post .mac-postbody h3,
body.single-post .mac-postbody h4 { color: #111111; margin-top: 1.5em; }
body.single-post .mac-postbody a { color: #F07000; }
body.single-post .mac-postbody a:hover { color: #c85a00; }
body.single-post .mac-postbody img { border-radius: 12px; }

/* Prev/next post navigation: brand orange links, divider above */
body.single-post .mac-postnav {
  border-top: 1px solid #e3e9ec;
  padding-top: 22px;
  margin-top: 14px;
}
body.single-post .mac-postnav .elementor-post-navigation__link__title { color: #111111; }
body.single-post .mac-postnav a:hover .elementor-post-navigation__link__title { color: #F07000; }
body.single-post .mac-postnav .post-navigation__prev--label,
body.single-post .mac-postnav .post-navigation__next--label { color: #F07000; font-weight: 600; }

/* Interior content pages — readable prose. Migrated copy used to render as a flat wall of
   stacked paragraphs. The `mac-prose` class is set on each migrated text block in
   scripts/build-interior-pages.php (it renders on widgets, unlike on script-built containers),
   so this lifts every interior page at once: comfortable measure and line-height, and each
   embedded section heading gets a brand-orange accent bar so the page reads as distinct,
   designed sections rather than one undifferentiated block. Layout/content stays Elementor-editable. */
.mac-prose p {
  color: #33474f;
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.mac-prose p:last-child { margin-bottom: 0; }
.mac-prose h2,
.mac-prose h3 {
  color: #111111;
  line-height: 1.3;
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 4px solid #F07000;
}
.mac-prose h3 { font-size: 23px; }
.mac-prose h2 { font-size: 27px; }

/* Entrance animations — modern soft "fade + rise" (client feedback 2026-07).
   All Elementor entrance animations are normalized to fadeInUp in the page data;
   these overrides replace the stock animate.css motion (which slides a full element
   height and feels heavy) with a dramatic 56px rise on a smooth ease-out curve.
   Two-class selectors out-rank Elementor's single-class animate.css rules, and the
   custom keyframe name means load order can not matter. */
@keyframes macRiseIn {
  from { opacity: 0; transform: translate3d(0, 56px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.elementor .animated { /* slower than stock for a dramatic, cinematic settle */
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
.elementor .animated.fadeInUp { animation-name: macRiseIn; }
/* Safety net: if any element still carries an old directional animation (e.g. added
   later in the editor), render it as the same soft rise instead of a side slide. */
.elementor .animated.fadeInLeft,
.elementor .animated.fadeInRight,
.elementor .animated.fadeInDown,
.elementor .animated.slideInLeft,
.elementor .animated.slideInRight { animation-name: macRiseIn; }
/* Respect users who turn off motion at the OS level. */
@media (prefers-reduced-motion: reduce) {
  .elementor .animated,
  .elementor .elementor-invisible {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   MOBILE QA PASS (2026-07-24)
   Fixes found auditing every published URL at a real 390px viewport. Each rule
   below addresses a measured defect, not a style preference, and none of them
   touch a control the client edits in Elementor.
   ========================================================================== */

/* 1. Sideways scroll from unbreakable URLs.
   /privacy-policy/ pushed the document 29px wider than the viewport because the
   ad-settings section lists bare URLs (google.com/settings/ads, advertise.bingads...)
   as plain text. A URL has no break opportunities, so it forces its line box wider
   than the screen and the whole page scrolls horizontally. `break-word` only splits
   a word when it can not fit on a line of its own, so ordinary copy is untouched.
   Applied at every breakpoint: the same content overflows any narrow column. */
.mac-prose p,
.mac-prose li,
.mac-prose td,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor td,
body.single-post .mac-postbody p,
body.single-post .mac-postbody li,
body.single-post .mac-postbody td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 2. Zoho application form pinned to 90% of its container.
   Zoho's embed script writes `width: 90%` as an inline style on the iframe and
   rewrites it on every resize message, so it can only be beaten with !important.
   On desktop the lost 10% is invisible; on a phone it throws away roughly 35px of
   an already narrow form, which is where the field labels wrap. The wrapper keeps
   its own padding, so the form still has breathing room at the page edges. */
.mac-zoho-form iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3. Tap targets below the 44px minimum (WCAG 2.5.5 / Apple HIG / Android 48dp).
   Measured on mobile: the Facebook icons in the header and footer render 24x24 and
   31x31, the Elementor carousel chevrons 25x25, and the vehicle/gallery slider
   buttons 34x34. Rather than resize the glyphs (which would change a design the
   client has already signed off on), a transparent centred pseudo-element extends
   the clickable region to 44x44. Nothing moves and nothing looks different; the
   finger just has somewhere to land. Mobile only, since a mouse needs no padding.

   Safe on all four: the Elementor icon widget renders <a class="elementor-icon"><i>,
   Elementor's swiper buttons render <div><i> or <div><svg>, and .mac-slider__nav is
   our own <button> with a text glyph. In every case the icon's own ::before carries
   the glyph and ::after is free. */
@media (max-width: 767px) {
  .elementor-widget-icon a.elementor-icon,
  .elementor-social-icon,
  .elementor-swiper-button,
  .mac-slider__nav {
    position: relative;
  }
  .elementor-widget-icon a.elementor-icon::after,
  .elementor-social-icon::after,
  .elementor-swiper-button::after,
  .mac-slider__nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }
}