/* Caregivershome — mobile layout fix (2026-10-09)
   Loaded after home-v2.css. Only applies at phone/tablet widths (<= 768px),
   so the desktop layout is unchanged.
   Targets the shared two-column "logo panel + content" layout used by
   /request-assistance, /register-agent, /safety and /contact, which is
   styled inline in the JS bundle (grid 1fr 1fr, logo panel min-height 600px,
   40px padding, overflow:hidden), plus the simple inline-styled /about and
   /services pages. */

@media (max-width: 768px) {
  /* outer page wrapper around the split card */
  #root div[style*="min-height"][style*="justify-content: center"]:has(> div[style*="grid-template-columns: 1fr 1fr"]) {
    padding: 20px 12px !important;
    align-items: flex-start !important;
  }

  /* the split card: stack into one column */
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 18px !important;
  }

  /* logo panel becomes a short banner on top */
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div:first-child {
    min-height: 0 !important;
    height: 160px;
  }
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div:first-child > img {
    height: 160px !important;
    padding: 6px !important;
  }

  /* content column: sensible phone padding, nothing wider than the card */
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div:last-child {
    padding: 24px 18px 28px !important;
    min-width: 0;
  }
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div:last-child h1 {
    font-size: clamp(26px, 7.5vw, 34px);
    line-height: 1.15;
  }
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] ul {
    padding-left: 22px;
  }
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] form > * {
    min-width: 0;
  }

  /* form controls: include padding in the 100% width; 16px stops iOS zoom */
  #root input:not([type="checkbox"]):not([type="radio"]),
  #root select,
  #root textarea {
    box-sizing: border-box !important;
    max-width: 100% !important;
    font-size: 16px;
  }
  #root button[type="submit"] {
    max-width: 100%;
    white-space: normal;
  }

  /* long e-mail addresses / links wrap instead of being cut off */
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] :is(p, li, a, h1, h2, h3) {
    overflow-wrap: anywhere;
  }
  #root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] img {
    max-width: 100%;
  }

  /* /about and /services: big inline headings and minmax(300px) grids */
  #root div[style*="minmax(300px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #root h1[style*="font-size: 42px"] {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.15;
  }
}

/* ------------------------------------------------------------------
   Brand-green recolour (all screen sizes) — 2026-10-09
   Scoped to the shared split card used ONLY by /request-assistance,
   /register-agent, /safety and /contact (grid 1fr 1fr + max-width 1100px).
   /about and /services keep their own colours. Greens are the home-page
   tokens from home-v2.css: --ch-forest #0f3d2e, --ch-green #1f6b4f,
   --ch-green-500 #2f8a66, --ch-sage #dcebdf, --ch-sage-50 #f1f7f2.
   Inline styles are matched in both serialised forms (hex and rgb()).
   ------------------------------------------------------------------ */
#root div[style*="min-height"]:has(> div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"]) {
  background: #f1f7f2 !important;            /* was rgb(245,247,250) grey-blue */
}
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] {
  border-color: #dcebdf !important;           /* was teal #0AA3A2 */
  accent-color: #1f6b4f;                      /* checkboxes / radios */
}
/* logo panel: same forest gradient as the home-page agent band */
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div[style*="#0077cc"],
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] > div[style*="0, 119, 204"] {
  background: linear-gradient(135deg, #0f3d2e, #185a43 70%, #1f6b4f) !important;
}
/* headings and blue text (e.g. "Estimated service fee") */
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] [style*="color: #0077cc"],
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] [style*="color: rgb(0, 119, 204)"] {
  color: #0f3d2e !important;
}
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] p[style*="color: #0077cc"],
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] p[style*="color: rgb(0, 119, 204)"] {
  color: #1f6b4f !important;
}
/* blue submit buttons */
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] button[style*="#0077cc"],
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] button[style*="0, 119, 204"] {
  background: #1f6b4f !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(31,107,79,.55);
  transition: background-color .2s ease;
}
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] button[style*="#0077cc"]:hover,
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] button[style*="0, 119, 204"]:hover {
  background: #0f3d2e !important;
}
/* default-blue links (e-mail / phone on /contact) */
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] a:not(.chh-wa-icon):not([class*="chh-btn"]) {
  color: #1f6b4f;
}
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] a:not(.chh-wa-icon):not([class*="chh-btn"]):hover {
  color: #0f3d2e;
}
/* form focus ring in brand green */
#root div[style*="grid-template-columns: 1fr 1fr"][style*="max-width: 1100px"] :is(input, select, textarea):focus-visible {
  outline: 2px solid #2f8a66;
  outline-offset: 1px;
}

/* 2026-10-13: logo shown square (no circle crop) and ~27% larger */
.chh-brand__mark{width:56px!important;height:56px!important;border-radius:4px!important;padding:2px!important;flex:none}
.chh-footer__logo img{width:52px!important;height:52px!important;border-radius:4px!important;padding:2px!important;flex:none}
@media (max-width:480px){.chh-brand__mark{width:48px!important;height:48px!important}}
/* 2026-10-13: header logo without the white tile (image is already transparent) */
.chh-brand__mark{background:transparent!important;box-shadow:none!important;padding:0!important}