/* ============================================================
   AI for Parents — website responsive helpers
   Linked by every website page. Class hooks that inline React
   styles opt into; media queries collapse layouts on phones.
   ============================================================ */

/* Desktop side padding lives here so mobile can override it. */
.wrap { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }

/* Hamburger button hidden on desktop, shown on mobile. */
.r-menu-btn { display: none; }
.r-mobile-menu { display: none; }

@media (max-width: 820px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* any 2- or 3-column grid tagged r-cols collapses to one column */
  .r-cols { grid-template-columns: 1fr !important; }

  /* rows that should stack */
  .r-stack { flex-direction: column !important; align-items: stretch !important; }

  /* hide the desktop inline nav links + show the hamburger */
  .r-nav-links { display: none !important; }
  .r-menu-btn { display: inline-flex !important; }

  /* big display headings step down */
  .r-h1 { font-size: 34px !important; line-height: 1.1 !important; }
  .r-h2 { font-size: 26px !important; }

  /* hero art sits under the copy, centered and smaller */
  .r-hero-art { justify-content: center !important; margin-top: 8px; }
  .r-hero-art img { max-width: 220px !important; height: auto !important; }

  /* footer columns wrap tighter */
  .r-footer-cols { gap: 26px !important; }
}

/* Mobile dropdown menu (toggled open via inline style by the page). */
.r-mobile-menu.open { display: flex !important; }