/* === HP hero mobile rework 2026-06 === */
/* Isolated overrides for index26.php test page. Linked LAST after responsive.css. */
/* Do NOT edit shared style.css / responsive.css (live index.php loads those). */

/* Task 02 — Search card heading: visible >768, hidden ≤768 (per Clay 2026-06-22) */
@media (max-width: 768px) {
  .service-form-wrap h3 { display: none; }
}

/* Task 04 — Mobile stacking order: icons first, search second (Option B, Clay 2026-06-22) */
/* Desktop (>=992 col-lg side-by-side) untouched; flips whenever columns stack (<=991) — Task 10 made the whole stacked range consistent. */
@media (max-width: 991px) {
  .service-form-area .row { display: flex; flex-wrap: wrap; }
  .service-form-area .col-lg-7 { order: 1; }  /* icon-grid26 — directly under hero */
  .service-form-area .col-lg-5 { order: 2; }  /* search card — below icons */
}

/* Task 05 — Hero height + background position (Clay 2026-06-22) */
/* Shorten .banner-area-1 on mobile (responsive.css stacked ~255px top + 150px bottom padding). */
/* Overrides responsive.css since custom.css loads last. Blocks descend large->small so the */
/* tightest matching breakpoint wins at 375/320. Title font = Task 06, CTA align = Task 07. */
@media (max-width: 768px) {
  .banner-area-1 { padding: 90px 0 24px 0; }
  .banner-inner  { padding: 40px 0 30px 0; }
}
@media (max-width: 425px) {
  .banner-area-1 { padding: 80px 0 20px 0; background-position: right center; }
  .banner-inner  { padding: 24px 0 24px 0; }
}
@media (max-width: 375px) {
  .banner-area-1 { padding: 74px 0 18px 0; }
  .banner-inner  { padding: 18px 0 18px 0; }
}
@media (max-width: 320px) {
  .banner-area-1 { padding: 66px 0 16px 0; }
  .banner-inner  { padding: 14px 0 14px 0; }
}

/* Task 06/07 — Hero title + content spacing + CTA buttons @ phone (Clay 2026-06-22) */
/* One ≤425 block covers 425, 375 (Allen iPhone 15) AND 320 — per Clay "may make 425 and 320 close". */
@media (max-width: 425px) {
  /* Task 06 — title smaller + readable over the lot photo; tighten subtitle */
  .banner-inner.style-white .title { font-size: 26px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
  .banner-inner .content { margin-top: 8px; }

  /* Task 07 — CTAs inline on one row, smaller all around (overrides responsive.css !important stacking) */
  .banner-inner .btn-wrap { margin-top: 18px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
  .banner-inner .btn-wrap .btn { margin: 0 !important; height: auto; line-height: 1.2; padding: 10px 16px; font-size: 13px; white-space: nowrap; }
  .banner-inner .btn-wrap .btn i { margin-left: 4px; }
}

/* 320 tune (Clay 2026-06-22, from 320 screenshot) — refines Tasks 05/06/07 at the smallest phone */
@media (max-width: 320px) {
  .banner-area-1 { padding-top: 92px; }                  /* more space below the overlaid nav bar */
  .banner-inner.style-white .title { font-size: 22px; }  /* title a bit smaller at 320 */
  .banner-inner .content { margin-top: 6px; }            /* keep subtitle tight under smaller title */
  .banner-inner .btn-wrap { margin-top: 10px; }          /* less space above the CTA row */
}

/* Task 08 — Compact search card on mobile (Clay 2026-06-22) */
/* Base .service-form-wrap has translateY(-35px) to overlap the hero on desktop; with Option B */
/* (search sits below the icon grid on mobile) that pull would overlap the icons — zero it. */
@media (max-width: 991px) {
  .service-form-wrap { padding: 16px; transform: translateY(0); }
}

/* Task 09 — Icon grid (Clay 2026-06-22). Icons are 1200x1200 squares; constrain + lay out. */
/* Default = 4-across (desktop col-lg-7 + tablet ≤768); 2x2 at ≤425 per D2. No owl/JS. */
.icon-grid26 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center;
}
.icon-grid26 a { display: block; line-height: 0; }
.icon-grid26 img { width: 100%; height: auto; max-width: 160px; margin: 0 auto; display: block; }

@media (max-width: 425px) {
  .icon-grid26 { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 360px; margin: 0 auto; }
  .icon-grid26 img { max-width: 150px; }
}

/* Task 13 (revised — Clay dev-panel verified 2026-06-22) */
/* header.php has TWO .navbar-area blocks at the same position; the VISIBLE mobile bar is the */
/* plain .navbar-area one (navbar-area-2 paints underneath, topbar hidden). My first pass keyed */
/* on .navbar-area-2 so it never touched the visible logo. Plain selector below, Clay-verified. */
@media (max-width: 991px) {
  .navbar-area .nav-container .logo a img { width: 250px; }
  .navbar-area .nav-container .logo { top: 10px; }
}
@media (max-width: 320px) {
  .navbar-area .nav-container .logo a img { width: 230px; } /* 250 too wide at 320 */
}

/* Task 13b — Navbar bar height: 64px @≤425, tablet (426–991) stays 80 (Clay 2026-06-22) */
/* Source of the 80: responsive.css @≤991 .navbar-area.navbar-area-2 { min-height:80px } + nav-container padding:24px. */
@media (max-width: 425px) {
  .navbar-area.navbar-area-2 { min-height: 64px; }
  .navbar-area.navbar-area-2 .nav-container { padding-top: 12px; padding-bottom: 12px; }
}

/* Hero photo full-visibility pass (Clay 2026-06-22) — all sizes (global, no media query) */
.banner-area .banner-bg { opacity: 0.2; }          /* was 0.7 dark overlay — let the photo show */
.banner-area-1 { background-position: right center; }   /* align lot photo (right of image) at every size */
.banner-inner .title,
.banner-inner .content,
.banner-inner .btn-wrap .btn { text-shadow: 0 2px 4px rgba(0,0,0,0.6); } /* keep white hero text readable */

/* Task 11 tablet tweaks — 426–991 ONLY (NOT ≤425, NOT desktop ≥992) (Clay 2026-06-22) */
@media (min-width: 426px) and (max-width: 991px) {
  .navbar-area .nav-container .logo { top: 6px; }
  .banner-inner .btn-wrap { margin-top: 28px; }
  .banner-inner { padding-top: 70px; }
}