/* wordwags.com — phone and tablet adjustments.
 *
 * One shared file linked from every page. The site was already responsive:
 * an audit of all 64 pages plus all 21 game views found NO horizontal overflow
 * at 390px or 820px, and every game board fits on a phone screen. What was left
 * is fixed here.
 *
 * 1. The header. `.bar` is a flex row (brand + spacer + three links) with no
 *    wrap rule, and most pages carry no max-width media query at all, so on a
 *    390px screen the four items were crushed into one row and each link broke
 *    onto two or three lines.
 * 2. Tap targets. Nav and footer links rendered 22-25px tall. Apple asks for
 *    44px, Google for 48px; these were less than half that, which is a real
 *    miss rate for a site aimed at children.
 *
 * Deliberately additive: no existing rule is overwritten except the inline
 * `margin-right:14px` on the nav links, which has to be beaten with
 * !important because it is set as a style attribute in the markup.
 */

/* ---- header ---------------------------------------------------- phones -- */
@media (max-width: 760px) {
  .bar {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 10px 12px 6px;
  }
  /* The spacer exists to push the links to the right of a wide bar. Once the
     bar wraps it would strand them on a line of their own. */
  .bar .sp { display: none; }

  .brand { flex: 0 0 100%; }

  .navlink {
    margin-right: 0 !important;
    padding: 10px 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
  }
  .bar .navlink:first-of-type { padding-left: 0; }
  .navlink:active { background: rgba(42, 169, 224, .12); }
}

/* ---- tap targets ------------------------------------------- everywhere -- */
/* Links sitting on their own in a footer or nav need a finger-sized box. Links
   INSIDE a paragraph are left alone: padding them out would space the prose. */
.foot a,
.bar a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 10px;
}
.foot {
  line-height: 1.6;
}
.foot a { line-height: 44px; }

/* ---- general safety ---------------------------------------------------- */
/* Nothing currently overflows, but these keep it that way as pages are added:
   a wide image, a long unbroken word or a table are the usual causes. */
img, svg, video, canvas, iframe { max-width: 100%; }
table { max-width: 100%; display: block; overflow-x: auto; }
h1, h2, h3, p, li, td { overflow-wrap: break-word; }

/* Long word lists (the grade pages) are the one place a very long entry could
   push a card wide. */
.words, .wordlist, .grid { min-width: 0; }

/* ---- tablet ------------------------------------------------------------ */
/* At 820px the 920px content column is wider than the screen, so it was
   already relying on its own padding. Give it a little breathing room and stop
   the header links crowding the brand. */
@media (min-width: 761px) and (max-width: 1024px) {
  .wrap, .bar { padding-left: 22px; padding-right: 22px; }
  .navlink { padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- pointer: coarse --------------------------------------------------- */
/* Touch devices of any width, including large tablets in landscape. */
@media (pointer: coarse) {
  .play, .btn, button { min-height: 44px; }
}