/* Hero Headline */
.hero-headline {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.2;
  font-weight: 700 !important;
  text-shadow: 0px 4px 10px rgba(0,0,0,0.75);
  color: #d4af37;
  text-align: center;
}

/* Hero CTA */
.hero-cta {
  background-color: #c9a646;
  color: #ffffff;
  border-radius: 190px;
  padding: 8px 24px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  margin: 12px 0;
}
.hero-cta:hover {
  background-color: #d4b04d;
  color: #ffffff;
}

/* Remove arrows from ALL CTAs */
.wp-block-button__link::after {
  content: none !important;
  display: none !important;
}

/* Book Your Inspection CTA */
a[href*="get-in-touch"].wp-block-button__link {
  border-radius: 190px !important;
  background-color: #c9a646 !important;
  color: #000080 !important;
  font-family: montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  text-align: center !important;
  padding: 10px 24px !important;
  line-height: 1.2 !important;
  transition: all 0.3s ease-in-out !important;
}
a[href*="get-in-touch"].wp-block-button__link:hover {
  background-color: #d4af37 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  transform: translateY(-2px) !important;
}
a[href*="get-in-touch"].wp-block-button__link:active {
  background-color: #b8962f !important;
  transform: translateY(0) !important;
}

/* Speak to a Specialist CTA */
a[href="#popup-4510"].wp-block-button__link {
  border: 2px solid #d4af37 !important;
  border-radius: 190px !important;
  color: #d4af37 !important;
  font-family: montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  text-align: center !important;
  background: transparent !important;
  padding: 10px 20px !important;
  line-height: 1.2 !important;
  transition: all 0.3s ease-in-out !important;
}
a[href="#popup-4510"].wp-block-button__link:hover {
  background-color: #d4af37 !important;
  color: #000080 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  transform: translateY(-2px) !important;
}
a[href="#popup-4510"].wp-block-button__link:active {
  background-color: #b8962f !important;
  color: #000080 !important;
  transform: translateY(0) !important;
}

/* Get in Touch popup button: secondary (light background) */
.wp-block-button.open-specialist-modal a[href="#popup-4510"].wp-block-button__link {
  color: #000080 !important;
  border-color: #000080 !important;
}

/* Secondary buttons (light background): keep desktop padding on mobile */
@media (max-width: 767px) {
  .wp-block-button.whj-btn-secondary .wp-block-button__link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Hero block subheadline (off‑white) with side dividers */
.hero-heading p:not(.hero-headline) {
  color: #e8dcc4;
  text-shadow: 0px 3px 8px rgba(0,0,0,0.65); /* subtle glow */
  display: flex;              /* flexbox for side dividers */
  align-items: center;        /* vertically center dividers with text */
  justify-content: center;    /* center the whole unit under headline */
  gap: 20px;                  /* space between text and dividers */
  margin: 0 auto;             /* center block itself */
  text-align: center;
}

/* Divider lines */
.hero-heading p:not(.hero-headline)::before,
.hero-heading p:not(.hero-headline)::after {
  content: "";
  flex: 0 0 60px;             /* fixed width */
  height: 0.5px;              /* thin line */
  background-color: #d4af37;  /* gold */
}

/* Premium gold hover + lift for CTA buttons */
.wp-block-button__link:hover {
    background-color: #c19d2f !important; /* premium gold */
    color: #000080 !important;            /* keep text clear */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* subtle shadow */
    transform: translateY(-2px);          /* slight lift */
    transition: all 0.3s ease;            /* smooth effect */
}
/* === Popup Action Items === */
.popup-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px; /* space between buttons */
  margin: 20px 0;
}

.popup-buttons a {
  flex: 1 1 200px; /* grow/shrink, min width */
  text-align: center;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  color: #ffffff !important;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* space between icon and text */
}

/* Call Us button */
.popup-call {
  background-color: #0073e6; /* blue */
}
.popup-call:hover {
  background-color: #005bb5;
  transform: translateY(-2px);
}

/* WhatsApp Us button */
.popup-whatsapp {
  background-color: #25D366; /* WhatsApp green */
}
.popup-whatsapp:hover {
  background-color: #1ebc5c;
  transform: translateY(-2px);
}

/* Email Us button */
.popup-email {
  background-color: #d4af37; /* gold */
}
.popup-email:hover {
  background-color: #c19d2f;
  transform: translateY(-2px);
}

/* Mobile stacking */
@media (max-width: 768px) {
  .popup-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Hero block background: show full image */
.wp-block-cover {
  background-size: contain !important;   /* fit whole image */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-attachment: fixed !important; /* keeps parallax effect */
  background-color: #0a2a4f; /* fallback navy to fill gaps */
}
/* Make all testimonial columns equal height */
.wp-block-columns.has-background {
  display: flex;
  align-items: stretch; /* forces equal height */
}

/* Each column behaves as a flex container */
.wp-block-column.testimonial-column {
  display: flex;
  flex-direction: column;
}

/* Inner testimonial wrapper stretches to fill */
.testimonial-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes heading/quote up, footer down */
}

/* Normalize quote spacing */
.testimonial-wrapper p {
  margin-bottom: 20px !important;
  text-align: center;
}

/* Footer (name + stars) always at bottom */
.testimonial-footer {
  margin-top: auto;
  text-align: center;
}
.full-width-banner img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.wp-block-image.full-width-banner {
  margin: 0 !important;
  padding: 0 !important;
}

/* Phase 1 (24 Oct 2026) HOME-C: align the three homepage service-card links (homepage only, desktop) */
@media (min-width: 782px) {
  body.page-id-7296 .wp-block-column.whj-service-card {
    display: flex;
    flex-direction: column;
  }
  body.page-id-7296 .wp-block-column.whj-service-card div:has(a[href]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  body.page-id-7296 .wp-block-column.whj-service-card p:last-child:has(> a[href]) {
    margin-top: auto !important;
  }
}

/* Phase 1 (24 Oct 2026) HOME-B1: homepage hero trust icons smaller; 2 x 2 on mobile */
body.page-id-7296 .hero-section figure.hero-feature-icon img {
  width: 110px !important;
  height: auto !important;
}
@media (max-width: 767px) {
  body.page-id-7296 .coblocks-row-11221253799 > .wp-block-coblocks-row__inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    height: auto !important;
  }
  body.page-id-7296 .coblocks-row-11221253799 > .wp-block-coblocks-row__inner > .wp-block-coblocks-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.page-id-7296 .hero-section figure.hero-feature-icon {
    width: 72px !important;
  }
  body.page-id-7296 .hero-section figure.hero-feature-icon img {
    width: 72px !important;
    height: auto !important;
  }
}

/* Phase 1 (24 Oct 2026) HOME-D3: homepage hero picture scrolls with the page on phones (stops the Android jump); desktop parallax unchanged */
@media (max-width: 781px) {
  body.page-id-7296 .hero-section .wp-block-cover__image-background.has-parallax {
    background-attachment: scroll !important;
  }
}

/* Phase 1 (24 Oct 2026) TEST-2, updated B2: Testimonials page, property photos shown at one 5:4 shape (cropped to fill; was 4:3) */
body.page-id-1729 .testimonial-property-image img {
  aspect-ratio: 5 / 4 !important;
  object-fit: cover !important;
}

/* Phase 1 (24 Oct 2026) A1: homepage Why Choose headings reserve two lines so body text aligns (desktop) */
@media (min-width: 782px) {
  body.page-id-7296 .why-choose-mobile h3.wp-block-heading {
    min-height: 2.6em;
  }
}

/* Phase 1 (24 Oct 2026) A3: Testimonials star graphics blend into the page background (mobile) */
@media (max-width: 781px) {
  body.page-id-1729 .wp-block-image img[src*="6ac4e5f070c25"] {
    mix-blend-mode: multiply;
  }
}

/* Phase 1 (24 Oct 2026) A4: Testimonials desktop name-alignment spacing removed on mobile */
@media (max-width: 781px) {
  body.page-id-1729 p.whj-quote-spacer {
    margin-bottom: 15px !important;
  }
}


/* Phase 1 (24 Oct 2026) B1: Get in Touch, contact-choice buttons shown on mobile only */
body.page-id-7964 #send-an-enquiry,
body.page-id-7964 #contact-us-directly {
  scroll-margin-top: 16px;
}
@media (min-width: 782px) {
  body.page-id-7964 .wp-block-buttons.whj-git-choices {
    display: none !important;
  }
}
@media (max-width: 781px) {
  body.page-id-7964 .wp-block-buttons.whj-git-choices {
    gap: 12px;
    margin-top: 0;
    margin-bottom: 32px;
  }
  body.page-id-7964 .whj-git-choices .wp-block-button {
    width: 280px;
    max-width: 100%;
  }
  body.page-id-7964 .whj-git-choices .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

/* Phase 1 (24 Oct 2026) B3: footer Company links top-aligned on mobile (two-line links no longer push one-line links down) */
@media (max-width: 781px) {
  footer .footer-wide-columns .wp-block-group.is-layout-flex {
    align-items: flex-start;
  }
}

/* Refinement (25 Oct 2026) HOME-B1a: homepage trust icons 15% larger on mobile (72px to 83px); overrides the 72px values in HOME-B1 */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section figure.hero-feature-icon {
    width: 83px !important;
  }
  body.page-id-7296 .hero-section figure.hero-feature-icon img {
    width: 83px !important;
    height: auto !important;
  }
}

/* Refinement (25 Oct 2026) HOME-B1b: homepage trust icons visibly larger on mobile (96px); overrides HOME-B1 (72px) and HOME-B1a (83px) */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section figure.hero-feature-icon {
    width: 96px !important;
  }
  body.page-id-7296 .hero-section figure.hero-feature-icon img {
    width: 96px !important;
    height: auto !important;
  }
}

/* Refinement (25 Oct 2026) HOME-T1: homepage trust-item supporting text in soft white with a stronger soft shadow for legibility (was #e8dcc4) */
body.page-id-7296 .coblocks-row-11221253799 .wp-block-coblocks-column p.has-montserrat-font-family {
  color: #f7f5f0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.55);
}

/* Refinement (25 Oct 2026) GIT-CTA1: Get in Touch "Call, WhatsApp or Email" button, thin gold border (was navy); transparent background kept */
body.page-id-7964 .wp-block-button.open-specialist-modal a[href="#popup-4510"].wp-block-button__link {
  border-color: #d4af37 !important;
  border-width: 1.5px !important;
  border-style: solid !important;
}

/* Refinement (25 Oct 2026) GIT-DIV1: Get in Touch mobile, short gold divider after the choice buttons, before "Send Us an Enquiry" (40px above and below) */
@media (max-width: 781px) {
  body.page-id-7964 .wp-block-buttons.whj-git-choices {
    margin-bottom: 40px;
  }
  body.page-id-7964 .wp-block-buttons.whj-git-choices::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 76px;
    height: 2px;
    background-color: #d4af37;
    margin-top: 16px;
  }
}

/* Refinement (25 Oct 2026) HOME-HERO1: homepage hero background shifted left on mobile (50% to 32%) so the residential house shows alongside the commercial building; desktop unchanged */
@media (max-width: 781px) {
  body.page-id-7296 .hero-section .wp-block-cover__image-background {
    background-position: 32% 50% !important;
  }
}

/* Refinement (25 Oct 2026) GIT-DIV2: Get in Touch mobile photographic divider replaces the GIT-DIV1 gold line (≤781px); 16:9 full-width, 24px above and below; GIT-DIV1 kept as fallback */
@media (max-width: 781px) {
  body.page-id-7964 .wp-block-buttons.whj-git-choices {
    margin-bottom: 24px;
  }
  body.page-id-7964 .wp-block-buttons.whj-git-choices::after {
    align-self: flex-start;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 3 / 2;
    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    background: url(https://whjinspections.co.za/wp-content/uploads/2026/10/WHJ-Get-in-Touch-Mobile-Divider1.webp) center / cover no-repeat;
    mix-blend-mode: multiply;
  }
}

/* Refinement (25 Oct 2026) GIT-SP1: Get in Touch mobile, tighter spacing above the divider (intro → buttons 20px, between buttons 12px); GIT-DIV2 unchanged */
@media (max-width: 781px) {
  body.page-id-7964 .wp-block-buttons.whj-git-choices {
    margin-top: -20px !important;
  }
  body.page-id-7964 .whj-git-choices > .wp-block-button:first-child {
    margin-bottom: 0 !important;
  }
}

/* Refinement (25 Oct 2026) HOME-HERO2: homepage mobile hero uses a portrait mobile image (≤767px); desktop PNG and HOME-HERO1 (768–781px) unchanged */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section .wp-block-cover__image-background {
    background-image: url(https://whjinspections.co.za/wp-content/uploads/2026/10/WHJ-Mobile-Hero-Background.webp) !important;
    background-position: 50% 50% !important;
  }
}

/* Refinement (25 Oct 2026) HOME-T2: homepage mobile hero, stronger soft text shadows on the trust headings, trust text and testimonial quote */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section .coblocks-row-11221253799 h3.wp-block-heading {
    text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55);
  }
  body.page-id-7296 .hero-section .coblocks-row-11221253799 .wp-block-coblocks-column p.has-montserrat-font-family {
    text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.65), 0 0 14px rgba(0,0,0,.4);
  }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > p.has-background.has-base-color {
    text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.75), 0 0 16px rgba(0,0,0,.55);
  }
}

/* Refinement (25 Oct 2026) HOME-T3: homepage mobile hero, translucent navy backdrop behind the testimonial quote only */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > p.has-background.has-base-color {
    background-color: rgba(0, 0, 40, 0.42) !important;
    border-radius: 12px;
    padding: 10px 14px;
    margin-left: auto;
    margin-right: auto;
    max-width: 92%;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
  }
}

/* Refinement (26 Oct 2026) HOME-HERO3: homepage mobile hero recomposed with the B1 portrait image (≤767px; 480–767px is overridden by HOME-HERO3-LAND below); desktop unchanged */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section { --whj-strip: 138px; }
  body.page-id-7296 .hero-section .wp-block-cover__image-background {
    background-image: linear-gradient(to bottom, #0a2a4f 0%, rgba(10,42,79,0) 100%), linear-gradient(to bottom, rgba(10,42,79,0.3) 0%, rgba(10,42,79,0.2) 55%, rgba(10,42,79,0) 100%), linear-gradient(to bottom, rgba(10,42,79,0) 0%, #0a2a4f 100%), url(https://whjinspections.co.za/wp-content/uploads/2026/10/WHJ-Mobile-Hero-Portrait-B1.webp) !important;
    background-size: 100% 180px, 100% 106vw, 100% 40px, 100% auto !important;
    background-position: left 0 bottom calc(var(--whj-strip) + 177.66vw - 180px + 4px), left 0 bottom calc(var(--whj-strip) + 177.66vw - 106vw), left 0 bottom var(--whj-strip), left 0 bottom var(--whj-strip) !important;
    background-repeat: no-repeat !important;
    background-color: #0a2a4f !important;
  }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-group.alignwide { margin-top: 14px !important; }
  body.page-id-7296 .hero-section .coblocks-row-11221253799 > .wp-block-coblocks-row__inner > .wp-block-coblocks-column { margin: 0 0 16px 0 !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-buttons { margin-top: 28px !important; margin-bottom: 0 !important; padding-top: 0 !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-buttons > .wp-block-button { margin-bottom: 0 !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > p.has-background.has-base-color { margin-top: calc(54.6vw + 16px) !important; margin-bottom: 16px !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > hr.wp-block-separator { margin-top: 16px !important; margin-bottom: 0 !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-spacer { margin-top: 0 !important; }
}

/* Refinement (26 Oct 2026) HOME-ICON1: homepage mobile trust icons, gold frame drawn on the figure; handshake and star artwork scaled to match (frames unchanged) */
@media (max-width: 767px) {
  body.page-id-7296 .hero-section figure.hero-feature-icon { border: 1px solid #d4af37; border-radius: 12px; overflow: hidden; }
  body.page-id-7296 .hero-section figure.hero-feature-icon img { border: 0 !important; border-radius: 0 !important; }
  body.page-id-7296 .hero-section figure.hero-feature-icon img[src*="Copilot-24Apr-Transparent-1"] { transform: scale(1.1); }
  body.page-id-7296 .hero-section figure.hero-feature-icon img[src*="Transparent-Orange-GR"] { transform: scale(1.15); }
}

/* Refinement (26 Oct 2026) HOME-HERO3-LAND: homepage mobile hero 480–767px, landscape image below the CTA, trust grid on navy, tighter spacing */
@media (min-width: 480px) and (max-width: 767px) {
  body.page-id-7296 .hero-section { --whj-strip: 116px; }
  body.page-id-7296 .hero-section .wp-block-cover__image-background {
    background-image: linear-gradient(to bottom, #0a2a4f 0%, rgba(10,42,79,0) 100%), linear-gradient(to bottom, rgba(10,42,79,0) 0%, #0a2a4f 100%), url(https://whjinspections.co.za/wp-content/uploads/2026/10/WHJ-Mobile-Hero-Landscape.webp) !important;
    background-size: 100% 3.5vw, 100% 24px, 100% auto !important;
    background-position: left 0 bottom calc(var(--whj-strip) + 66.667vw - 3.5vw + 2px), left 0 bottom var(--whj-strip), left 0 bottom var(--whj-strip) !important;
    background-repeat: no-repeat !important;
    background-color: #0a2a4f !important;
  }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > p.has-background.has-base-color { margin-top: calc(66.667vw + 32px) !important; }
  body.page-id-7296 .hero-section .hero-heading > .wp-block-group:has(p.hero-headline) { margin-bottom: 28px !important; }
  body.page-id-7296 .hero-section .hero-heading p.hero-headline { margin-bottom: 28px !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-group.alignwide { margin-top: 32px !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-group.alignwide .wp-block-group.alignwide { margin-top: 0 !important; margin-bottom: 0 !important; }
  body.page-id-7296 .hero-section .coblocks-row-11221253799 > .wp-block-coblocks-row__inner > .wp-block-coblocks-column { margin-bottom: 8px !important; }
  body.page-id-7296 .hero-section > .wp-block-cover__inner-container > .wp-block-buttons { margin-top: 16px !important; }
}