/* ---------------------------------------------------------------------------
   Covered Kids — phone layer.

   The pages were generated with their layout written as inline styles and no
   media queries, so on a phone the multi-column grids squeeze instead of
   stacking and the display type stays at desktop size. Inline styles beat a
   stylesheet, so every rule here needs !important to reach them.

   The page runtime normalises the style attribute (it writes "font-size: 100px"
   with a space), so each selector below matches both the spaced and unspaced
   form. Nothing outside the media query is touched, so desktop is unchanged.
   The prayer app is phone-first already and does not load this file.
--------------------------------------------------------------------------- */

@media screen and (max-width: 760px) {

  /* Nothing should ever scroll sideways. */
  html, body { overflow-x: hidden !important; }
  img { max-width: 100% !important; height: auto !important; }

  /* --- layout: every multi-column grid becomes one column ------------------ */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Side-by-side rows wrap instead of squeezing. */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }

  /* Grid and flex children default to min-width:auto, so they refuse to shrink
     below their content and drag the column wider than the screen. */
  [style*="display:grid"] > *, [style*="display: grid"] > *,
  [style*="display:flex"] > *, [style*="display: flex"] > * {
    min-width: 0 !important;
  }

  /* --- header ------------------------------------------------------------- */
  header { padding: 14px 16px !important; gap: 10px !important; }
  header img { height: 38px !important; }
  header nav { gap: 2px !important; justify-content: flex-start !important; }
  header nav a { font-size: 14px !important; padding: 8px 10px !important; }

  /* --- display type ------------------------------------------------------- */
  [style*="font-size:100px"], [style*="font-size: 100px"] { font-size: 44px !important; }
  [style*="font-size:76px"], [style*="font-size: 76px"] { font-size: 38px !important; }
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 36px !important; }
  [style*="font-size:52px"], [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size:48px"], [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size:46px"], [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 27px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 26px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size:30px"], [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 21px !important; }

  /* --- section padding ---------------------------------------------------- */
  [style*="padding:56px 22px"], [style*="padding: 56px 22px"] { padding: 34px 18px !important; }
  [style*="padding:52px 22px"], [style*="padding: 52px 22px"] { padding: 32px 18px !important; }
  [style*="padding:48px 22px"], [style*="padding: 48px 22px"] { padding: 30px 18px !important; }
  [style*="padding:44px 22px"], [style*="padding: 44px 22px"] { padding: 28px 18px !important; }
  [style*="padding:40px 22px"], [style*="padding: 40px 22px"] { padding: 26px 18px !important; }

  /* --- touch targets ------------------------------------------------------ */
  a[style*="border-radius:999px"], a[style*="border-radius: 999px"],
  button[style*="border-radius:999px"], button[style*="border-radius: 999px"] {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- forms -------------------------------------------------------------- */
  /* iOS zooms the whole page when a focused input is under 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* --- fixed-width print previews ----------------------------------------- */
  /* These two are letter-sized sheets rendered at print dimensions. They can't
     reflow, so they scale to fit instead of stacking. */

  /* verse-cards: the printable sheet is 864px wide. */
  doc-page { zoom: 0.44 !important; }

  /* resources: the guide preview is an 816px iframe scaled into a 460px box. */
  [style*="max-width:460px"], [style*="max-width: 460px"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 470px !important;
  }
  iframe[style*="width:816px"], iframe[style*="width: 816px"] {
    transform: scale(0.42) !important;
    transform-origin: left top !important;
  }

  /* guide.html and printable-prayer.html are letter-sized sheets. On a phone
     they scale to fit rather than scrolling sideways. Print output is
     unaffected: this whole layer is scoped to screen. */
  .sheet, .page { zoom: 0.44 !important; }
}