/* ===========================================================
   STICKY HEADER (DESKTOP)
   =========================================================== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===========================================================
   COUPON UNIFORM HEIGHT
   =========================================================== */
.coupon-row {
  display: flex;
  align-items: stretch !important;
  gap: 20px;
}
.coupon-row .wp-block-column {
  display: flex;
  flex-direction: column;
}
.coupon-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-height: 460px;
  padding: 20px;
  box-sizing: border-box;
}
.coupon-card p { margin-bottom: 1rem; }

/* ===========================================================
   REVIEWS BACKGROUND
   =========================================================== */
.reviews-section,
.testimonials-section {
  position: relative;
  z-index: 1;
  background: none !important;
}
.reviews-section::before,
.testimonials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://randjautomotivesc.com/wp-content/uploads/2025/10/ChatGPT-Image-Oct-12-2025-01_27_08-PM-300x300.png');
  background-repeat: repeat;
  background-size: 400px 400px;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.12;
}
.reviews-section > *,
.testimonials-section > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .reviews-section::before,
  .testimonials-section::before {
    background-attachment: scroll;
    opacity: 0.10;
  }
}

/* ===========================================================
   CONSISTENT SERVICE BUTTONS
   =========================================================== */
.wp-block-buttons .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 220px !important;
  height: 60px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  border-radius: 50px !important;
  text-align: center !important;
  white-space: normal !important;
  padding: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background-color: #ac1c1c !important;
  color: #fff !important;
  transition: all 0.25s ease-in-out !important;
}

.wp-block-buttons .wp-block-button__link:hover {
  background-color: #8B1515 !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* --- Mobile Buttons --- */
@media (max-width: 768px) {
  .wp-block-buttons .wp-block-button__link {
    width: 200px !important;
    height: 60px !important;
    font-size: 16px !important;
    border-radius: 50px !important;
    margin: 12px auto !important;
  }
}

/* ===========================================================
   REVIEWS SECTION SPACING
   =========================================================== */
.reviews-section {
  background: #fff;
  padding: 70px 0;
}
.reviews-section .wp-block-group {
  max-width: 1100px;
  margin: 0 auto;
}
.reviews-section p { line-height: 1.6; }

/* ===========================================================
   VISIBILITY RULES
   =========================================================== */
.header-desktop { display: block; }
.header-mobile  { display: none; }

/* ===========================================================
   HERO SPACING UNDER STICKY HEADER
   =========================================================== */
@media (max-width: 768px) {
  .wp-block-cover:first-of-type,
  .hero-section,
  .wp-block-group.hero {
    margin-top: 70px !important;
  }
}

/* ===========================================================
   PHONE ICON & MENU BUTTONS — UNIVERSAL
   =========================================================== */
.header-mobile .icon-btn .wp-block-button__link,
.header-desktop .icon-btn .wp-block-button__link {
  min-width: unset !important;
  min-height: unset !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===========================================================
   TOP BAR — DESKTOP ONLY
   =========================================================== */
.top-bar,
.top-bar-v2,
[class*="top-bar"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 1025px) {
  .top-bar,
  .top-bar-v2,
  [class*="top-bar"] {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    align-items: left !important;
    justify-content: left !important;
    gap: 20px !important;
    padding: 5px 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}

/* ===========================================================
   KEEP FULL DESKTOP HEADER UNTIL MOBILE
   =========================================================== */
@media (max-width: 1100px) and (min-width: 769px) {
  .header-desktop {
    display: block !important;
  }
  .header-mobile {
    display: none !important;
  }

  .header-desktop .wp-block-group,
  .header-desktop .wp-block-columns {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .header-desktop img.custom-logo {
    max-height: 120px !important;
  }
}

/* ===========================================================
   FIX MOBILE HERO BUTTON CUT-OFF / CALL NOW BUTTON OVERLAP
   =========================================================== */
@media (max-width: 768px) {
  .wp-block-cover .wp-block-cover__inner-container {
    padding-bottom: 80px !important;
  }

  .wp-block-cover .wp-block-button {
    margin-bottom: 40px !important;
  }

  .wp-block-button__link {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .wp-block-cover {
    overflow: visible !important;
  }
}

/* ===========================================================
   ✅ FINAL MOBILE HEADER FIX (FULL WIDTH + CENTER LOGO + RIGHT ICON)
   =========================================================== */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
  }

  .header-desktop { display: none !important; }
  .header-mobile  { display: flex !important; }

  /* Full-width container */
  .header-mobile {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }

  /* Break free from WP theme box constraints */
  .wp-site-blocks .header-mobile {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0)) !important;
  }

  /* Header inner structure */
  .header-mobile .wp-block-group,
  .header-mobile .wp-block-columns {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* Logo centered */
  .header-mobile img.custom-logo {
    order: 2;
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: 85px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }

  /* Menu icon left */
  .header-mobile .menu-toggle {
    order: 1;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  /* Phone icon right */
  .header-mobile .icon-btn {
    order: 3;
    margin-left: auto !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
  }

  .header-mobile .icon-btn .wp-block-button__link {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    color: #a61c1c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Landscape mode support */
  @media (orientation: landscape) {
    .header-mobile {
      flex-wrap: nowrap !important;
      padding: 6px 16px !important;
      min-height: 65px !important;
    }
    .header-mobile img.custom-logo {
      max-height: 60px !important;
    }
  }
}
/* ===========================================================
   FINAL PHONE ICON RIGHT ALIGNMENT FIX
   =========================================================== */
@media (max-width: 1024px) {
  .header-mobile {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Make sure icon container aligns properly */
  .header-mobile .icon-btn {
    order: 3 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    justify-self: end !important;
    position: relative !important;
    right: 0 !important;
  }

  /* Ensure button inside stays circular and visible */
  .header-mobile .icon-btn .wp-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background-color: #A61C1C !important;
    color: #ffffff !important;
  }

  /* Prevent floating / stacking issues */
  .header-mobile .wp-block-group,
  .header-mobile .wp-block-columns {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
}
/* ===========================================================
   RESTORE HERO BUTTON ALIGNMENT / SPACING (MOBILE)
   =========================================================== */
@media (max-width: 768px) {
  /* Prevent hero buttons from overlapping dots or clipping */
  .wp-block-cover .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 3 !important;
    padding: 20px !important;
    padding-bottom: 80px !important; /* restore space for button */
    box-sizing: border-box !important;
  }

  /* Keep slider dots hidden for a clean look */
  .swiper-pagination,
  .swiper-pagination-bullets,
  .car-repair-blocks-swiper .swiper-pagination {
    display: none !important;
  }

  /* Proper margin below hero buttons */
  .wp-block-cover .wp-block-button {
    margin-top: 10px !important;
    margin-bottom: 40px !important;
  }

  /* Restore full visibility and center alignment */
  .wp-block-button__link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* Prevent image cropping and allow full height */
  .wp-block-cover {
    overflow: visible !important;
  }
}

/* ===========================================================
   FINAL PHONE ICON RIGHT ALIGNMENT + STICKY PATCH
   =========================================================== */
@media (max-width: 1024px) {
  /* keep header sticky and above content */
  .header-mobile {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* make inner row stay on one line */
  .header-mobile .wp-block-group,
  .header-mobile .wp-block-columns {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* logo centered */
  .header-mobile img.custom-logo {
    order: 2 !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: 85px !important;
    flex-shrink: 0 !important;
    display: block !important;
  }

  /* menu left */
  .header-mobile .menu-toggle {
    order: 1 !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  /* phone icon flush right */
  .header-mobile .icon-btn {
    order: 3 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .header-mobile .icon-btn .wp-block-button__link {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f7f7f7 !important;
    color: #ffffff !important;
  }

  /* nicer anchor scrolling with sticky header */
  body, .wp-site-blocks {
    scroll-padding-top: 80px !important;
  }

  /* landscape tweaks */
  @media (orientation: landscape) {
    .header-mobile { min-height: 65px !important; padding: 6px 16px !important; }
    .header-mobile img.custom-logo { max-height: 60px !important; }
  }
}
/* 
/* 3) Bulletproof fallback: if a parent still breaks sticky, use fixed header on mobile. 
      */
@media (max-width: 1024px) {
  .header-mobile.is-fixed-fallback,
  .wp-site-blocks .header-mobile.is-fixed-fallback {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100000 !important;
  }
  /* add safe padding so content doesn't hide under the fixed header */
  .header-offset { padding-top: 84px !important; }  /* add this class to your main content wrapper */
}
/* ===========================================================
   FINAL CAR BLOCKS FIX — MOBILE HEADER FIXED + REMOVE EXTRA GAP
   =========================================================== */
@media (max-width: 1024px) {
  /* Fix header position */
  .header-mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px !important;
  }

  /* Prevent double padding under header */
  .wp-block-cover:first-of-type,
  .hero-section,
  .wp-block-group.hero {
    margin-top: 0 !important;
  }


  /* Maintain alignment of items inside header */
  .header-mobile .wp-block-group,
  .header-mobile .wp-block-columns {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Keep phone icon properly aligned */
  .header-mobile .icon-btn {
    order: 3 !important;
    margin-left: auto !important;
  }
}