/* ===========================================================
   AtomicNorth - small-screen target size and minimum type

   Loaded last, after site.css, chrome.css and the page's own stylesheet,
   so it does not have to out-specify any of them. That is the only reason
   it is a separate file: everything in it is a correction applied over the
   finished cascade.

   Two problems it fixes, both found by measuring every page at 360, 414 and
   600px rather than by eye.

   TARGET SIZE. WCAG 2.1 AA, success criterion 2.5.8, asks for 24 by 24 CSS
   pixels. Link lists, breadcrumbs, the footer, the tab rows and the
   checkboxes were all under it: footer links sat at 17px tall, the pinned
   stage's rail buttons at 16, and the form checkboxes at 13 by 13. The
   criterion exempts a link inside a sentence, which is why prose links are
   left alone here; a list of links is not a sentence and is not exempt.

   MINIMUM TYPE. The small uppercase labels are a brand device and stay
   small on desktop, where they are read at arm's length on a large screen.
   At phone width 10.5px is simply hard to read, so the floor is raised to
   12px for the handful of places that fell below it. Nothing above 12px is
   touched, and nothing changes on desktop at all.

   Everything here is padding, min-height and font-size. No layout property
   is altered, so a change cannot move a column or reflow a grid.
   =========================================================== */

@media (max-width: 600px) {

  /* ---------- link lists: footer, mega menu, any ul of links ----------
     17px tall at phone width, and there are hundreds of them. Padding
     rather than line-height so the text keeps its leading and only the
     hit area grows. */
  /* .ftr-block as well as .ftr: sitemap.php reuses the footer block markup
     inside <main>, where a rule scoped to .ftr would not reach it. */
  .ftr ul li a,
  .ftr-block ul li a,
  .mega ul li a,
  .mmg ul a {
    display: block;
    padding: 5px 0;
    min-height: 24px;
  }

  /* Footer column headings are links too, and were the smallest of the lot. */
  .ftr-block h5 a {
    display: inline-block;
    padding: 5px 0;
    min-height: 24px;
  }

  /* The legal row wraps to several lines on a phone, so each link needs its
     own hit area rather than relying on the row. */
  .ftr-legal a {
    display: inline-block;
    padding: 5px 2px;
    min-height: 24px;
  }

  /* ---------- breadcrumbs ----------
     A row of links, not a sentence, so 2.5.8 applies. */
  .crumb a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
  }
  .crumb span { font-size: 12px }

  /* ---------- the pinned stage's rail ----------
     16px tall buttons that choose which slide is showing. */
  .rail-list button {
    min-height: 28px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* ---------- industry tabs on the home page ---------- */
  .indtabs button {
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* ---------- the "Read the page" link at the foot of a card ---------- */
  .dcard p.out a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
  }

  /* ---------- both logos ----------
     The header wordmark is the primary way back to the home page and was a
     22px-tall target. The footer one is the same element. */
  .hdr-in a.logo,
  .ftr-about a.logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---------- contact rows ---------- */
  .reach div a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
  }
  .art-all a, .note a {
    display: inline-block;
    padding: 3px 0;
    min-height: 24px;
  }

  /* ---------- minimum type ----------
     Only the places that measured under 12px. The uppercase labels keep
     their letter-spacing and their weight; they just stop being 10.5px on
     a phone. */
  .ftr-facts li span       { font-size: 12px }
  .post-meta, .press-meta  { font-size: 12px }
  .subnav-in .pgname       { font-size: 12px }
  .tstm figcaption span    { font-size: 12px }
  .crumb a                 { font-size: 12px }
  .gal-where               { font-size: 12px }
  .art-media figcaption    { font-size: 12px }
  .art-play-h              { font-size: 12px }
  .fform .field label      { font-size: 12.5px }
}

/* ---------- checkboxes and radios ----------
   13 by 13 is below the minimum at every width, not only on a phone, and a
   13px checkbox is a genuinely difficult target with a finger or a shaky
   hand. Sized here rather than in the form styles because it is a
   correction, and kept outside the media query for the same reason. */
.fform input[type="checkbox"],
.fform input[type="radio"],
.choices input[type="checkbox"],
.choices input[type="radio"],
.tickrow input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: none;
  accent-color: var(--orange);
}

/* The row the checkbox sits in becomes the real target: clicking the label
   toggles the box, so making the row tall enough is what actually helps. */
/* .hp is deliberately excluded: it is the honeypot field, parked off-canvas
   as a spam trap. It is not a target and must not be given the size of one. */
.choices label,
.tickrow {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- the sources list at the foot of a post ----------
   A list of links, so SC 2.5.8's exemption for a link inside a sentence
   does not reach it, and each item measured 20px tall. Outside the 600px
   query, unlike the other link lists in this file: those are the footer
   and the mega menu, hundreds of links whose desktop spacing is a
   deliberate density choice, whereas this is five references at the end of
   an article and nothing is gained by leaving them under the minimum on a
   laptop. Padding only, so the list's leading is unchanged.

   The two-pane services mega (.mm2-tab, .mm2-links a) is deliberately not
   corrected anywhere in this file: both already clear 24px from their own
   padding, and .mm2-tab is a grid, so a display:block would flatten its
   layout to buy nothing. */
.art-sources li a {
  display: block;
  padding: 3px 0;
  min-height: 24px;
}