/**
 * Public-site responsive layer.
 *
 * Why a stylesheet with `!important` rather than per-page media queries: the
 * desktop layout of every public page lives in inline React style objects, and
 * inline styles beat any normal cascade rule. Rather than rewrite ~25 page
 * files, the desktop composition stays authoritative and these rules override
 * it below each breakpoint — the same approach `components/admin/chrome.tsx`
 * already takes for /admin.
 *
 * SCOPE: every rule is scoped under `.rl-main` / `.rl-header` / `.rl-footer`.
 * The /m/* routes and /admin/* have their own layouts and must never be
 * touched by these rules (their grids are already correct at phone width).
 *
 * OPT-OUT: add `rl-keep-cols` to any element whose columns must survive.
 */

/* ---- Universal safety: nothing overflows the viewport ---- */
.rl-main img,
.rl-main video,
.rl-main svg {
  max-width: 100%;
}

/* Real tables scroll rather than squash. */
.rl-main table {
  max-width: 100%;
}

/* =====================================================================
   TABLET AND BELOW (< 1024px)
   Two-column editorial splits become one column; oversized section
   padding starts contracting.
   ===================================================================== */
@media (max-width: 1023px) {
  /* Golden-ratio splits: hero + aside, copy + image, content + sidebar. */
  .rl-main [style*="1.618fr"]:not(.rl-keep-cols),
  .rl-main [style*="233px 1fr"]:not(.rl-keep-cols),
  .rl-main [style*="1.6fr"]:not(.rl-keep-cols) {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  /* A sticky in-page TOC has nowhere to stick once stacked. It also stops
     being a mouse target and becomes a thumb target, so the links take the
     same 44px floor as the drawer. */
  .rl-main nav[aria-label="Sections"] {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .rl-main nav[aria-label="Sections"] a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Tall decorative image panels stop reserving desktop height. */
  .rl-main [style*="min-height: 550px"]:not(.rl-keep-cols),
  .rl-main [style*="minHeight: 550"]:not(.rl-keep-cols) {
    min-height: 280px !important;
  }
}

/* =====================================================================
   PHONE AND SMALL TABLET (< 760px)
   Everything is a single column. Type, padding, and radii step down.
   ===================================================================== */
@media (max-width: 759px) {
  /* Section padding: 89px/55px/34px gutters are desktop-only figures. */
  .rl-main [style*="padding: 89px 34px"],
  .rl-main [style*="padding: 144px 34px"],
  .rl-main [style*="padding: 55px 34px"] {
    padding-left: 21px !important;
    padding-right: 21px !important;
  }
  .rl-main [style*="padding: 144px 34px"] {
    padding-top: 55px !important;
  }
  .rl-main [style*="padding: 89px 34px"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Card interiors: 55px and 34px insets are too generous at 375px. */
  .rl-main [style*="padding: 55px"]:not([style*="55px 34px"]) {
    padding: 26px !important;
  }
  .rl-main [style*="padding: 34px"]:not([style*="34px 34px"]):not([style*="padding: 34px 21px"]) {
    padding: 21px !important;
  }
  /* Policy sections and similar three-value insets. */
  .rl-main [style*="padding: 34px 34px 21px"] {
    padding: 21px 21px 16px !important;
  }
  .rl-main [style*="padding: 21px 34px"] {
    padding: 16px 21px !important;
  }

  /* Display type. Inline font sizes are fixed desktop figures, so each
     needs an explicit fluid replacement. */
  .rl-main h1 {
    font-size: clamp(30px, 8.5vw, 46px) !important;
    line-height: 1.08 !important;
  }
  .rl-main h2 {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    line-height: 1.15 !important;
  }
  .rl-main h3 {
    font-size: clamp(19px, 5vw, 26px) !important;
  }

  /* Extreme decorative radii read as a mistake on a narrow column. */
  .rl-main [style*="89px 21px 89px 21px"],
  .rl-main [style*="55px 13px 55px 13px"],
  .rl-main [style*="21px 89px 21px 89px"],
  .rl-main [style*="21px 55px 21px 55px"] {
    border-radius: 34px 8px 34px 8px !important;
  }

  /* iOS zooms the page in on any focused field under 16px. */
  .rl-main input,
  .rl-main select,
  .rl-main textarea {
    font-size: 16px !important;
  }

  /* Tables scroll horizontally instead of forcing the page wide. */
  .rl-main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Full-height split layouts (login) stack instead of halving the screen. */
  .rl-split-screen {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .rl-split-screen > aside {
    padding: 34px 21px !important;
  }
}

/* ---------------------------------------------------------------------
   Multi-column content grids.
   Small tablet keeps two columns for 3- and 4-up card rows — dropping
   straight to one column there wastes half the width. Below 600px
   everything is a single column.
   `34px 1fr` / `55px 1fr` numbered-step rows and `auto 1fr` pairs are
   deliberately not matched by any of these selectors.
   --------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 759px) {
  .rl-main [style*="repeat(3"]:not(.rl-keep-cols),
  .rl-main [style*="repeat(4"]:not(.rl-keep-cols),
  .rl-main [style*="1fr 1fr 1fr"]:not(.rl-keep-cols) {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 599px) {
  .rl-main [style*="1fr 1fr"]:not(.rl-keep-cols),
  .rl-main [style*="repeat(2"]:not(.rl-keep-cols),
  .rl-main [style*="repeat(3"]:not(.rl-keep-cols),
  .rl-main [style*="repeat(4"]:not(.rl-keep-cols),
  .rl-main [style*="repeat(auto-fit"]:not(.rl-keep-cols) {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   HEADER — desktop row, mobile drawer
   ===================================================================== */
.rl-header-nav,
.rl-header-cta {
  display: flex;
}
.rl-header-burger,
.rl-header-spacer {
  display: none;
}

@media (max-width: 1023px) {
  .rl-header-nav,
  .rl-header-login {
    display: none !important;
  }
  .rl-header-burger {
    display: grid !important;
  }
  /* With the nav row gone, the spacer takes over pushing the CTA right. */
  .rl-header-spacer {
    display: block !important;
  }
}

@media (max-width: 479px) {
  /* At the narrowest sizes the wordmark plus a 44px target is the budget. */
  .rl-header-cta {
    display: none !important;
  }
}

.rl-drawer-link {
  padding: 14px 8px;
  font-size: 17px;
  font-weight: 600;
  color: #3A4A2E;
  text-decoration: none;
  border-bottom: 1px solid #efe7d8;
  min-height: 44px;
  box-sizing: border-box;
}
.rl-drawer-link:hover {
  color: #2E4A1E;
}
.rl-drawer-link:last-of-type {
  border-bottom: none;
}

/* =====================================================================
   FOOTER — 4 columns → 2 → 1
   ===================================================================== */
@media (max-width: 1023px) {
  .rl-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px 21px !important;
  }
}
@media (max-width: 599px) {
  .rl-footer-grid {
    grid-template-columns: 1fr !important;
    padding-left: 21px !important;
    padding-right: 21px !important;
  }
  .rl-footer-bar {
    padding-left: 21px !important;
    padding-right: 21px !important;
  }
}