/* ============================================================
   Stella Rescue — mobile responsiveness.
   Loaded after the design tokens/styles. The design pages use
   inline styles (fixed multi-column grids + large display type)
   that don't adapt to small screens, so these rules override
   them by class. !important is required to beat inline styles.
   overflow-x: clip (not hidden) avoids breaking the sticky nav.
   ============================================================ */

html, body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; }

/* Two-column content + form-outer layouts stack first */
@media (max-width: 900px) {
  .dc-cols2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Center the secondary CTA once the columns stack (looks better on mobile) */
  .dc-cta-center { justify-content: center !important; }
}

/* Four-up feature grids and the footer: 2-up on tablets, 1-up on phones */
@media (max-width: 860px) {
  .dc-cols4 { grid-template-columns: 1fr 1fr !important; }
  .dc-foot  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .dc-cols4 { grid-template-columns: 1fr !important; }
  .dc-foot  { grid-template-columns: 1fr !important; }
  .dc-form2 { grid-template-columns: 1fr !important; }
  .dc-foot-links { grid-template-columns: 1fr !important; }
}

/* Scale oversized display type so long words never overflow and the page
   reads comfortably on a phone. Covers headings plus the standalone script /
   quote accents that aren't h1/h2 (footer wordmark, "Our promise", the pull
   quote), which would otherwise stay desktop-sized while everything else shrank. */
@media (max-width: 600px) {
  h1 { font-size: 34px !important; }
  h1 span { font-size: 40px !important; }
  h2 { font-size: 27px !important; }
  h2 span { font-size: 32px !important; }
  blockquote { font-size: 22px !important; line-height: 1.5 !important; }
  .dc-display-accent { font-size: 26px !important; }
}

/* Ease the generous card padding on phones: 40px all-round leaves too little
   room for content once the viewport is ~375px wide. Give the text back its
   width without touching the desktop look. */
@media (max-width: 560px) {
  .dc-form-card { padding: 24px !important; }
  .dc-cta-card  { padding: 44px 22px !important; }
}

/* Dark CTA cards use a ghost "secondary" button linking to Contact. The DS
   Button component overwrites its inline style, so the intended light text
   never applies and the button renders ink-700 text on the ink-700 card —
   invisible, which left the primary button looking off-center. Restore the
   light-on-dark ghost styling here (loads last, so !important is needed). */
.cta-actions a[href="/contact"] {
  color: var(--cream-100) !important;
  border-color: var(--ink-400) !important;
}

/* Mobile nav: collapse the inline links into a hamburger + dropdown panel.
   Desktop (>=768px) keeps the horizontal links (set via the template's inline
   styles); below that the hamburger button and dropdown take over. Inline
   styles set the desktop defaults, so these overrides need !important. */
@media (max-width: 767px) {
  .dc-header { padding-left: 16px !important; padding-right: 16px !important; }
  .dc-nav-desktop { display: none !important; }
  .dc-nav-toggle { display: inline-flex !important; }
  .dc-logo img { height: 44px !important; }
}

/* Narrowest phones (~320px): drop the Adopt CTA from the bar so logo +
   hamburger have room. Standard phones (360/375px) keep it. Adopt remains
   reachable via its own /adopt page. */
@media (max-width: 339px) {
  .dc-nav-cta { display: none !important; }
}