/*
 * Mariesa Care Services — site stylesheet.
 * Generated by _tools/build_css_js.js. Do not hand-edit; edit the generator.
 *
 * PART 1 is copied verbatim from the design export's runtime stylesheet.
 * PART 2 is ours: the responsive rules the export computed in JS, plus one bug fix.
 */

/* ============================ PART 1 — from the export ============================ */
.scp0:focus { left: 16px !important; }
.scp1:hover { background: rgb(242, 231, 224) !important; color: rgb(36, 31, 29) !important; }
.scp2:hover { background: rgb(169, 68, 95) !important; color: rgb(251, 247, 243) !important; }
.scp3:hover { background: rgb(142, 53, 80) !important; color: rgb(255, 255, 255) !important; }
.scp4:hover { background: rgb(242, 211, 216) !important; color: rgb(36, 31, 29) !important; }
.scp5:hover { transform: translateY(-6px) !important; box-shadow: rgba(35, 30, 27, 0.7) 0px 26px 46px -30px !important; }
.scp6:hover { background: rgb(251, 247, 243) !important; color: rgb(36, 31, 29) !important; }
.scp7:hover { background: rgb(36, 31, 29) !important; color: rgb(251, 247, 243) !important; }
.scp8:focus { border-color: rgb(169, 68, 95) !important; box-shadow: rgba(169, 68, 95, 0.16) 0px 0px 0px 4px !important; outline: none !important; }
.scp9:hover { background: rgb(142, 53, 80) !important; transform: translateY(-2px) !important; }
.scpa:hover { color: rgb(169, 68, 95) !important; }
.scpb:hover { color: rgb(242, 211, 216) !important; }
.scpc:hover { transform: translateY(-6px) !important; box-shadow: rgba(35, 30, 27, 0.6) 0px 26px 46px -30px !important; }
.scpd:hover { background: rgb(255, 255, 255) !important; color: rgb(36, 31, 29) !important; }
.scpe:hover { border-color: rgb(242, 211, 216) !important; color: rgb(255, 255, 255) !important; }
.scpf:hover { opacity: 0.75 !important; }
body { margin: 0px; background: rgb(251, 247, 243); color: rgb(36, 31, 29); font-family: "DM Sans", system-ui, sans-serif; font-size: 18px; }
a { color: inherit; text-decoration: none; }
a:hover { color: rgb(169, 68, 95); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: rgb(169, 68, 95) solid 3px; outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}

/* ============================ PART 2 — ours ====================================== */

/* --- Baseline. The export rendered against browser defaults, with no theme stylesheet
       in the document. Under WordPress a theme can still reach these elements, and a
       difference of one font-weight step re-renders every glyph on the page: measured
       against the export, Twenty Twenty-Five's global styles produced font-weight 300
       and line-height 25.2px where the design expects 400 and normal.
       The theme's CSS is dequeued on these pages (see MCS_Assets::dequeue_theme_styles),
       and these rules make the design correct even if something else slips through.
       Scoped to .mcs-page so nothing here can leak into wp-admin or another page. --- */
.mcs-page {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: rgb(36, 31, 29);
  background: rgb(251, 247, 243);
}
/*
 * Deliberately NO element resets here (no margin/padding zeroing, no list-style:none,
 * no img{max-width:100%}, no font:inherit on controls).
 *
 * The export renders against browser defaults and sets everything it wants as an inline
 * style. Every reset added on top is a rule the original did NOT have, and each one can
 * silently change something the design was relying on — img{max-width:100%} resizes the
 * footer's inline SVG icons, and zeroing list padding moves a list the design positioned
 * itself. The theme's stylesheet is dequeued on these pages, so there is nothing left to
 * neutralise: matching the export means matching its cascade, not improving on it.
 */

/* --- Reveal-on-scroll. The export applied these inline from JS; as a class the
       markup stays clean and content is never left hidden if JS fails. --- */
.mcs-reveal { opacity: 0; transform: translateY(20px); }
.mcs-reveal-on { transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.mcs-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mcs-reveal { opacity: 1; transform: none; }
}

/* --- FAQ panels --- */
.mcs-faq-toggle { -webkit-appearance: none; appearance: none; }

/* --- Responsive. The SPA recomputed these inline styles from window.innerWidth:
         narrow   = width < 1120   -> drawer nav + Menu button
         cols = 4 = width >= 1080
         cols = 2 = width >= 620
         cols = 1 = width <  620
       Reproduced exactly, as media queries, so the layout is correct before JS runs.
       !important is required because the elements carry inline style attributes. --- */

.mcs-menu { display: none !important; }

@media (max-width: 1119.98px) {
  .mcs-nav {
    display: none !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 12px 20px 20px !important;
    background: #FBF7F3 !important;
    border-bottom: 1px solid #E0D3CA !important;
    box-shadow: 0 18px 34px -26px rgba(35,30,27,.7) !important;
    font-size: 18px !important;
    letter-spacing: normal !important;
  }
  .mcs-nav.is-open { display: flex !important; }
  .mcs-menu { display: flex !important; }
}

@media (max-width: 1079.98px) {
  .mcs-contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mcs-footer-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 619.98px) {
  .mcs-footer-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- MOBILE HEADER FIX.
       The export's header row is logo (flex:none) + controls (flex:none, 392px wide).
       Together they need ~573px, so on any phone the whole document was forced to
       572px and scrolled sideways. Measured on the original export at 360/390/414px.
       The fix only lets the row wrap and tightens padding — nothing is hidden or
       resized, so every element the design specified is still present. --- */
@media (max-width: 1119.98px) {
  .mcs-header-row { flex-wrap: wrap !important; row-gap: 10px !important; }
  .mcs-header-controls { flex: 1 1 auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
}
@media (max-width: 619.98px) {
  .mcs-header-row { padding-left: 16px !important; padding-right: 16px !important; }
  .mcs-header-controls { gap: 8px !important; }
}

/* --- Phone links are the primary call to action on a site whose readers are often
       elderly or arranging care in a hurry. Measured at 390px, the inline
       "Call 416-997-7198" link under the form was only 21px tall — below the 24px
       WCAG 2.2 AA minimum. Padding it out keeps the design's underline-on-text look
       while giving it a real tap area. Desktop is untouched. --- */
@media (max-width: 1119.98px) {
  .mcs-page a[href^="tel:"] {
    display: inline-block;
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* --- SMALL-PHONE GRID FIX.
       The design lays sections out with repeat(auto-fit, minmax(NNNpx, 1fr)), where NNN
       runs from 200 up to 330. A minmax() minimum is a hard floor: once the container is
       narrower than NNN the track still claims NNN and the content spills off-screen.
       Measured on a 360px viewport, the Seniors-programs image reached x=372.
       Below 480px every one of these grids is a single column anyway (even the 200px
       variant cannot fit two), so collapsing them explicitly changes no intended layout
       and removes the floor. --- */
@media (max-width: 479.98px) {
  .mcs-page [style*="repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --- Deliberately NO overflow-x:hidden and NO blanket min-width:0 here.
       overflow-x on an ancestor silently disables position:sticky on every descendant,
       and the sticky header is part of the design. A blanket min-width:0 also overrides
       the min-width:auto that flex items rely on, which quietly changes the layout the
       export specified. The header wrap above fixes the actual overflow at source, and
       verify_visual.js asserts scrollWidth on every page at every width. --- */