/* ═══════════════════════════════════════════════════════════════════════
   HOMECARE ON WHEELS — RESPONSIVE CSS
   Covers: Mobile (< 768px) · Tablet (768–1024px) · Desktop (1025px+)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON ─────────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 4px;
  z-index: 300;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #276020;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ───────────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,48,10,.6);
  z-index: 149;
}
.mobile-nav-overlay.open { display: block; }

/* ── TOPBAR RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tb-in { padding: 0 16px !important; }
  .tb-left { gap: 10px !important; font-size: 11.5px; }
  .tb-left span:nth-child(3) { display: none; } /* hide address */
  .topbar-vet { display: none; }                 /* hide vet badge */
}
@media (max-width: 480px) {
  .tb-left span:nth-child(2) { display: none; } /* hide email too */
}

/* ── NAV RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-in { padding: 0 20px !important; }
  .nav-links { gap: 16px !important; }
  .nav-links a { font-size: 12.5px !important; }
  .btn-call { display: none; }
}

@media (max-width: 768px) {
  .hamburger { display: flex !important; }
  /* ── FULL SCREEN MOBILE MENU ─────────────────── */
  .nav-links {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 9000 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    display: block !important;
    width: 100% !important;
    padding: 18px 28px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #276020 !important;
    border-bottom: 1px solid #EBF5E8 !important;
    text-align: left !important;
    text-decoration: none !important;
    background: #ffffff !important;
    pointer-events: all !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(58,140,47,.1) !important;
  }
  .nav-links a:first-of-type { margin-top: 72px !important; }
  .nav-links a.act { color: #E87A1E !important; background: #FEF3E5 !important; }
  .nav-links a:active { background: #EBF5E8 !important; }
  /* Hide donate button from nav-ctas on mobile */
  .nav-ctas .btn-donate-nav { display: none !important; }
  .nav-ctas .btn-call { display: none !important; }
  .logo-img { height: 42px !important; }
  .nav-in { height: 64px !important; padding: 0 16px !important; }
  .hamburger { z-index: 9999 !important; }
}

/* ── HOMEPAGE HERO ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-new {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-right { display: none !important; }
  .hero-left { padding: 48px 32px !important; }
  .hero-h1 { font-size: 40px !important; }
}
@media (max-width: 768px) {
  .hero-left { padding: 40px 20px !important; }
  .hero-h1 { font-size: 32px !important; }
  .hero-sub-new { font-size: 15px !important; }
  .hbtn-primary, .hbtn-secondary { padding: 12px 18px !important; font-size: 14px !important; }
  .hero-btns-new { gap: 8px !important; }
  .hero-trust-row { gap: 10px !important; }
  .htrust { font-size: 12px !important; }
  .hero-accred { gap: 12px !important; }
  .accred-item { font-size: 11px !important; }
  .hero-badge-new { font-size: 10px !important; padding: 4px 10px !important; }
}
@media (max-width: 480px) {
  .hero-h1 { font-size: 28px !important; }
  .hero-btns-new { flex-direction: column !important; }
  .hbtn-primary, .hbtn-secondary { width: 100% !important; justify-content: center !important; }
}

/* ── STATS BAR ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-bar-in, .stats-in {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    padding: 0 16px !important;
  }
  .sbn-divider { display: none !important; }
  .sbn-num, .stat-n { font-size: 28px !important; }
  .sbn-item, .stat { padding: 20px 12px !important; }
  .sbn-label, .stat-l { font-size: 12px !important; }
  .stat:nth-child(2) { border-right: none !important; }
}
@media (max-width: 480px) {
  .stats-bar-in, .stats-in { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── SECTION WRAPPERS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wrap, .wrap-ctr { padding: 0 16px !important; }
  .sec { padding: 52px 0 !important; }
  .sec-alt { padding: 52px 0 !important; }
  .svc-section, .svc-section-v2 { padding: 52px 0 60px !important; }
  .ph { padding: 44px 0 !important; }
  .ph-in { padding: 0 16px !important; }
  .ph-h1 { font-size: 32px !important; }
  .ph-sub { font-size: 14px !important; }
}

/* ── HOMEPAGE SERVICE CARDS ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-grid-v2 { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-card-v2 { padding: 24px 18px !important; }
}
@media (max-width: 600px) {
  .svc-grid-v2 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .svc-icon-v2 { width: 44px !important; height: 44px !important; }
}

/* ── SERVICES PAGE GRID ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .svc-grid-new { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}
@media (max-width: 600px) {
  .svc-grid-new { grid-template-columns: 1fr !important; gap: 14px !important; }
  .svc-card-inner { padding: 28px 18px !important; }
  .svc-icon-wrap { width: 52px !important; height: 52px !important; }
}

/* ── PACKAGES SECTION ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 3-col packages → 2-col */
  .pkg-grid, [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .pkg-grid, [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Package detail cards (2-col grid on packages page) */
  [style*="grid-template-columns:180px 1fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}

/* ── SPLIT GRID SECTIONS (About, Fitness, Community) ─────────────── */
@media (max-width: 1024px) {
  /* 2-col grids → 1-col */
  .about-grid,
  .fit-in,
  .community-in,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  /* Stack images below text */
  .about-img-wrap, .fit-img, .community-img,
  [style*="border-radius:10px;overflow:hidden;box-shadow"] {
    margin-top: 28px;
  }
  .about-img-wrap img, .fit-img img, .community-img img { height: 280px !important; }
}
@media (max-width: 768px) {
  .about-img-wrap img, .fit-img img, .community-img img { height: 220px !important; }
  /* Staffing banner */
  .staffing-banner { flex-direction: column !important; padding: 28px 20px !important; }
  .staffing-banner h2 { font-size: 22px !important; }
}

/* ── SERVICE CARD GRID (values, programs) ─────────────────────────── */
@media (max-width: 1024px) {
  .vals-html, .val-body { display: block; }
  /* 3-col value grids → 2-col */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── FOOTER ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ft { padding: 40px 0 20px !important; }
  .ft-logo { height: 38px !important; }
  .ft-bot { flex-direction: column !important; gap: 6px !important; font-size: 11px !important; }
  .ft-ab { max-width: 100% !important; }
}

/* ── FAQ PAGE ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .faq-wrap { max-width: 100% !important; }
  /* Split FAQ layout → stack */
  [style*="grid-template-columns:1fr 2.2fr"],
  [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
}

/* ── CONTACT PAGE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  [style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .loc-grid { grid-template-columns: 1fr !important; }
}

/* ── DONATE PAGE ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .donate-tiers { justify-content: center !important; }
}
@media (max-width: 600px) {
  .donate-in h2 { font-size: 28px !important; }
  .donate-tiers { gap: 8px !important; }
  .dtier { padding: 8px 14px !important; font-size: 14px !important; }
  .btn-donate-lg { padding: 13px 24px !important; font-size: 14px !important; }
}

/* ── SERVICE DETAIL PAGES ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
    padding: 32px 0 !important;
  }
  .sidebar-sticky { position: static !important; margin-top: 32px; }
  /* Hero split on detail pages */
  .hero-in { grid-template-columns: 1fr !important; display: block !important; }
  .cta-card, .hero-cta-card { margin-top: 24px; width: 100% !important; }
  /* Benefits grid */
  .benefits-grid, .who-grid { grid-template-columns: 1fr !important; }
  /* Process grid */
  .process-grid { grid-template-columns: 1fr !important; }
  /* Related grid */
  .related-grid, .rel-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .hero h1, .ph-h1 { font-size: 28px !important; line-height: 1.15 !important; }
  .hero-sub, .ph-sub { font-size: 14px !important; }
  .hero-in { padding: 0 16px !important; }
  .intro-text { font-size: 15px !important; padding-left: 14px !important; }
  .process-box { padding: 22px 18px !important; }
  .benefits-box { padding: 20px 16px !important; }
  .cta-bottom h2 { font-size: 26px !important; }
  .cta-row { flex-direction: column !important; align-items: center !important; }
  .cta-w, .cta-o { width: 100% !important; max-width: 280px !important; text-align: center !important; }
}
@media (max-width: 480px) {
  .who-grid { grid-template-columns: 1fr !important; }
  .hero-badges { flex-direction: column !important; gap: 6px !important; }
  .hbadge { font-size: 11px !important; }
}

/* ── ABOUT PAGE ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-grid { gap: 32px !important; }
  .vals { margin-top: 20px !important; }
}

/* ── FITNESS PAGE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fit-section { padding: 0 !important; }
  .fit-content { padding: 36px 20px !important; }
  .fit-content h2 { font-size: 26px !important; }
}

/* ── SECTION HEADINGS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .st, .sec-title, .svc-heading-v2 { font-size: 28px !important; }
  .ph-h1 { font-size: 30px !important; }
  .section-title { font-size: 22px !important; }
  .cta-section h2, .cta-strip h2 { font-size: 26px !important; }
  .cta-section p, .cta-strip p { font-size: 14px !important; padding: 0 8px; }
  .donate-sec .donate-in h2 { font-size: 28px !important; }
}

/* ── BREADCRUMB ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .breadcrumb-in, .bc-in { padding: 0 16px !important; font-size: 12px !important; flex-wrap: wrap !important; }
}

/* ── DONATION STRIP ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .don-strip { padding: 32px 20px !important; }
  .don-strip h2 { font-size: 20px !important; }
  .don-btn { padding: 11px 22px !important; font-size: 13px !important; }
}

/* ── HERO BANNER BADGES ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .ph-badge-row { gap: 6px !important; }
  .ph-badge { font-size: 11px !important; padding: 5px 10px !important; }
}

/* ── GENERAL UTILITY ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Prevent horizontal scroll */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL TARGETED FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO SECTION (homepage new split design) ──────────────────── */
@media (max-width: 1024px) {
  section.hero-new { min-height: auto !important; }
}

/* ── INLINE GRID OVERRIDE (for divs using inline style grids) ──── */
@media (max-width: 768px) {
  /* Any 2-col grid with images */
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns:1.2fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns:1.1fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns:2fr 1fr"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 2fr"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 1.6fr"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 320px"],
  div[style*="display:grid"][style*="grid-template-columns:1fr 300px"],
  div[style*="display:grid"][style*="grid-template-columns:2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col grids → 2-col */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 3-col grids → 1-col */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Images inside grids */
  div[style*="height:400px"][style*="object-fit:cover"],
  div[style*="height:420px"],
  div[style*="height:440px"],
  div[style*="height:430px"] { height: auto !important; }
  img[style*="height:400px"],
  img[style*="height:420px"],
  img[style*="height:440px"],
  img[style*="height:430px"],
  img[style*="height:380px"] { height: 220px !important; }
  /* Padding fixes for inline sections */
  div[style*="padding:64px"],
  div[style*="padding:72px"],
  div[style*="padding:80px"],
  div[style*="padding:56px 48px"],
  div[style*="padding:52px 48px"],
  div[style*="padding:44px 40px"] {
    padding: 28px 20px !important;
  }
  /* Font size fixes */
  h2[style*="font-size:40px"],
  h2[style*="font-size:38px"],
  h2[style*="font-size:36px"],
  h2[style*="font-size:34px"] { font-size: 26px !important; }
  h1[style*="font-size:48px"],
  h1[style*="font-size:50px"],
  h1[style*="font-size:52px"] { font-size: 30px !important; }
  h1[style*="font-size:42px"],
  h1[style*="font-size:44px"],
  h1[style*="font-size:46px"] { font-size: 28px !important; }
}

@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(2,1fr)"],
  div[style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── PACKAGES PAGE - CARD LAYOUT ────────────────────────────────── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:180px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
  div[style*="grid-template-columns:180px 1fr"] > div:first-child {
    height: 100px !important;
  }
}

/* ── NAVIGATION MOBILE CLOSE BUTTON ────────────────────────────── */
.nav-links-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #276020;
  cursor: pointer;
  line-height: 1;
  display: none;
}
@media (max-width: 768px) {
  .nav-links { position: relative !important; }
  .nav-links-close { display: block !important; }
}

/* ── STICKY NAV HEIGHT FIX ON MOBILE ───────────────────────────── */
@media (max-width: 768px) {
  .nav { height: auto !important; }
}

/* ── TOUCH IMPROVEMENTS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Bigger tap targets */
  .btn-call, .btn-donate-nav, .btn-don,
  .svc-all-btn, .btn-g, .btn-o,
  .cta-btn-p, .cta-btn-s, .sb-btn-p, .sb-btn-s { min-height: 44px; }
  /* Hover effects disabled on touch */
  .svc-card-v2:hover, .svc-card-new:hover,
  .rel-card:hover, .pkg-card:hover { transform: none !important; }
  /* Better line heights for readability */
  p, .svc-card-desc, .svc-desc-v2,
  .long-desc, .intro-text { line-height: 1.7 !important; }
}

/* ── SAFE AREA FOR IPHONE X+ NOTCH ─────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .ft-bot { padding-bottom: env(safe-area-inset-bottom); }
}