/* Ability Care Services — public site
   ------------------------------------------------------------------------
   Blocks carry their own inline layout styles (so the CMS can vary them per
   section); this file owns the things inline styles cannot express: states,
   the mobile menu, and the responsive rules. */

:root{
  --ink:#12262c; --body:#33474d; --muted:#7a8d92;
  --teal:#0d4a58; --teal-dk:#093642; --teal-soft:#e8f0f0;
  --gold:#8a6b2f; --gold-lt:#b79b5e; --line:#dfe5e4; --cream:#f7f6f2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,serif;color:var(--ink);margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0}
img{max-width:100%;height:auto}
address{font-style:normal}
input,textarea,select,button{font-family:inherit}
input:focus,textarea:focus{outline:none}
:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px;border-radius:2px}

a{color:var(--teal);text-decoration:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
a:hover{color:var(--teal-dk);text-decoration:underline}

/* Blocks set their own inline `display`, which would otherwise beat the
   [hidden] attribute the wizard and the form panels toggle. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------- header */
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;
  padding:12px 18px;font-size:14px;z-index:120}
.skip:focus{left:0;text-decoration:none}

.navlink{position:relative;display:inline-block;padding:9px 13px;border-radius:9px;
  color:var(--body);font-weight:500;line-height:1.2}
.navlink::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--gold-lt);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.navlink:hover,.navlink:focus-visible{color:var(--teal);background:var(--teal-soft);text-decoration:none}
.navlink:hover::after,.navlink:focus-visible::after{transform:scaleX(1)}
.navlink[aria-current="page"]{color:var(--teal);font-weight:600}
.navlink[aria-current="page"]::after{transform:scaleX(1);background:var(--teal)}

.topbar a{color:#cfe0e2}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar a.tel{color:#fff;font-weight:500}

/* ------------------------------------------------------------- mobile nav */
.navmob{display:none}
.burger{display:none;align-items:center;gap:9px;background:#fff;border:1px solid #d3dedd;
  border-radius:10px;padding:9px 13px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.burger:hover{border-color:var(--teal);background:var(--teal-soft)}
.burger .bars{display:block;width:17px;height:12px;position:relative}
.burger .bars i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.burger .bars i:nth-child(1){top:0}
.burger .bars i:nth-child(2){top:5px}
.burger .bars i:nth-child(3){top:10px}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* --------------------------------------------------------------- buttons */
.btn-primary{background:var(--teal);color:#fff;font-weight:500;border:1px solid var(--teal)}
.btn-primary:hover{background:var(--teal-dk);border-color:var(--teal-dk);color:#fff;text-decoration:none;
  box-shadow:0 6px 16px rgba(9,54,66,.22)}
.btn-outline{background:#fff;color:var(--ink);border:1px solid #c3cfcf}
.btn-outline:hover{border-color:var(--teal);background:var(--teal-soft);color:var(--teal);text-decoration:none}
.btn-outline-dark{color:#fff;border:1px solid rgba(255,255,255,.35);background:transparent}
.btn-outline-dark:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.btn-light{background:#fff;color:var(--teal-dk)}
.btn-light:hover{background:#dfe9e8;color:var(--teal-dk);text-decoration:none}
.btn-gold{background:var(--gold-lt);color:var(--ink)}
.btn-gold:hover{background:#cbb178;color:var(--ink);text-decoration:none;box-shadow:0 6px 16px rgba(183,155,94,.3)}
button.btn-primary{cursor:pointer}

/* underline-style text links used at the end of sections */
.link-arrow{border-bottom:1px solid var(--teal);padding-bottom:3px}
.link-arrow:hover{color:var(--teal-dk);border-color:var(--gold-lt);text-decoration:none}

/* linked cards in a grid */
.card-link{transition:background-color .15s ease,box-shadow .15s ease}
.card-link:hover{background:#f7fbfa!important;text-decoration:none;box-shadow:inset 3px 0 0 var(--gold-lt)}
.card-link:hover h3{color:var(--teal)}

/* jump-link chips */
.chip{border:1px solid #d5d0c2;background:#fff;color:var(--ink)}
.chip:hover{border-color:var(--teal);background:var(--teal-soft);color:var(--teal);text-decoration:none}

/* footer links */
.foot-link{color:#cfe0e2}
.foot-link:hover{color:#fff;text-decoration:underline}
.credit-link{color:#9fb3b7;border-bottom:1px solid rgba(159,179,183,.35)}
.credit-link:hover{color:#fff;border-color:#fff;text-decoration:none}

/* --------------------------------------------------------- placeholders */
.ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 0,#eef3f2 0,#e2eae8 100%)}
.ph-i{width:64px;height:66px;opacity:.22;
  background:url(/images/ability-care-services-icon.webp) center/contain no-repeat}

/* ------------------------------------------------------------------ FAQ */
details summary::-webkit-details-marker{display:none}
details summary{border-radius:8px}
details summary:hover h3{color:var(--teal)}
details summary span[aria-hidden]{display:inline-block;transition:transform .18s ease}
details[open] summary span[aria-hidden]{transform:rotate(45deg)}

/* ======================================================================
   RESPONSIVE
   The blocks lay themselves out with `repeat(auto-fit, minmax(Npx, 1fr))`.
   Below ~760px those minimums are wider than the viewport, which is what
   pushed content off-screen. Collapsing any grid that uses minmax() to a
   single column fixes every block at once — including blocks added later —
   while leaving fixed-track grids (e.g. `30px 1fr` step lists) alone.
   ====================================================================== */
@media (max-width:1024px){
  section,header,footer,.topbar,.pad{padding-left:24px!important;padding-right:24px!important}
}

@media (max-width:900px){
  .navdesk{display:none!important}
  .burger{display:inline-flex;flex:none}
  /* keep the logo and the menu button on one line */
  .hdr-row{flex-wrap:nowrap!important;gap:12px!important;min-height:66px!important}
  .hdr-row>a:first-of-type{min-width:0}
  .brandtext,.brandtag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navmob{width:100%;border-top:1px solid var(--line);padding:10px 0 14px;margin-top:2px}
  .navmob.open{display:block}
  .navmob a{display:block;padding:13px 12px;border-radius:10px;font-size:16px;color:var(--body);font-weight:500}
  .navmob a:hover,.navmob a:focus-visible{background:var(--teal-soft);color:var(--teal);text-decoration:none}
  .navmob a[aria-current="page"]{background:var(--teal-soft);color:var(--teal);font-weight:600}
  .navmob a.cta{background:var(--teal);color:#fff;text-align:center;margin-top:8px}
  .navmob a.cta:hover{background:var(--teal-dk);color:#fff}
}

@media (max-width:760px){
  [style*="minmax("]{grid-template-columns:minmax(0,1fr)!important}
  section,header,footer,.topbar{padding-left:18px!important;padding-right:18px!important}
  section[style*="padding: 92px"],section[style*="padding: 88px"],
  section[style*="padding: 84px"],section[style*="padding: 80px"]{
    padding-top:52px!important;padding-bottom:52px!important}
  h1{overflow-wrap:break-word;hyphens:auto}
  /* the hero picture and its overlapping caption card */
  .hero-media{height:300px!important}
  .hero-card{position:static!important;max-width:none!important;margin-top:-30px;
    margin-left:14px;margin-right:14px;box-shadow:0 10px 26px rgba(18,38,44,.10)}
  .hero-copy{padding-bottom:34px!important}
  /* stats bar: stack, and swap the vertical rules for horizontal ones */
  .stat-cell{padding:20px 0!important;border-right:0!important;border-bottom:1px solid var(--line)}
  .stat-cell:last-child{border-bottom:0}
  .feature-media{height:280px!important}
  .prose-media{height:280px!important}
}

@media (max-width:520px){
  .topbar{font-size:12px!important}
  .brandtext{font-size:17px!important}
  /* the strapline truncates to an ellipsis at this width — drop it instead */
  .brandtag{display:none!important}
  .btn-primary,.btn-outline,.btn-outline-dark,.btn-light{width:100%;justify-content:center;text-align:center}
  .btnrow{width:100%}
}

@media print{
  .topbar,.burger,.navmob,header nav,footer a[href*="request-care"]{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}