/* ==========================================================================
   Mobile floor
   --------------------------------------------------------------------------
   Loaded last. One place states the rules that apply to every control on a
   touch screen, instead of each component remembering them separately — which
   is how the site ended up with 41px buttons, 38px filter fields and a 34px
   facet chip, none of them wrong in isolation and all of them wrong to a thumb.

   The floor is 44px, from WCAG 2.5.5 Target Size (Enhanced) and from both
   platform guidelines. Links inside a sentence are exempt and are left alone:
   padding them to 44px would break the line spacing of the paragraph they are
   part of, which is the exception the success criterion makes for exactly this
   reason.
   ========================================================================== */

@media (max-width: 1039px) {

  /* --- Buttons and calls to action ------------------------------------- */

  .fame-btn,
  .fame-jumps__link,
  .fame-pagination .page-numbers {
    min-height: 44px;
    padding-block: 0;
  }

  .fame-btn--small,
  .fame-globe__toggle { min-height: 44px; }

  /* Header controls. The brand is a link to the homepage and the commonest
     tap on any site; 34px was the height of the logo, not of a target. */
  .fame-header__brand   { min-height: 44px; }
  .fame-hsearch__submit { width: 44px; height: 44px; }
  .fame-hsearch         { height: 44px; }

  /* The drawer's own search sets its own, larger size, and this file loads
     after components.css — without the extra class the 44px above won and the
     52px submit inside it overhung the field it sits in by eight pixels. */
  .fame-nav .fame-hsearch--drawer         { height: 52px; }
  .fame-nav .fame-hsearch--drawer .fame-hsearch__submit { width: 52px; height: 52px; }

  /* Standalone calls to action that sit on their own line. */
  .fame-omap__more,
  .fame-filters__clear,
  .fame-megapanel__all,
  .fame-section__more a,
  .fame-contact__links a,
  .fame-contactcard__rows a,

  /* .fame-link is the site's standalone "go here next" link. It is always on
     its own line and never inside a run of prose, so the inline-link exception
     to the 44px rule does not apply to it. */
  .fame-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The assignment title is the row's control and the whole reason the table
     is a table of links; 41px was one pixel of carelessness away from fine. */
  .fame-db__title,
  .fame-parties a,
  .fame-instlist a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Every remaining link that stands on its own line rather than inside a
     sentence. Each of these was found by measuring the rendered page at 390px,
     not by reading the markup — the list is what was actually under 44px, and
     what is deliberately not here is the links inside running prose. */
  .fame-hero__livelink,             /* live-assignments aside */
  .fame-panelgrid .fame-link,       /* "see all N" at the foot of a tab panel */
  .fame-routelink a,                /* commissioning-route list */
  .fame-triptych__assignment a,     /* the assignment a photograph was taken on */
  .fame-chart__legend a,            /* legend entries that filter the database */
  .fame-pagehero .fame-eyebrow a,   /* breadcrumb back to the parent section */
  .fame-acc__links a,               /* "read the full policy" under a panel */
  .fame-factbox dd a,               /* the record's taxonomy links */
  .fame-footer__address a {         /* telephone and any address link */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- Form controls ---------------------------------------------------- */

  /* 16px on anything typed into. Below it, iOS zooms the viewport on focus and
     does not zoom back — the reader is left on a page 1.3x too wide with no
     obvious way back. */
  .fame-filters select,
  .fame-filters input,
  .fame-range__field input,
  .fame-bigsearch__input,
  input[type="search"],
  input[type="text"],
  input[type="number"],
  input[type="email"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  /* --- Facet chips ------------------------------------------------------- */

  /* The search page's facet toggles, which are links and therefore targets.
     This used to say .fame-chip, which also matched the evidence database's
     metadata pills — inflating a non-interactive label to a 44px target and
     making every row on the database twice as tall as it needed to be. */
  .fame-facet__chip {
    min-height: 44px;
    padding-inline: var(--s-4);
    font-size: var(--t-sm);
  }

  /* --- Lists of links ---------------------------------------------------- */

  /* A link on its own line in a list is a target, not prose. The footer
     columns, the mega-panel and the in-page jump strips all qualify; a link
     inside a paragraph does not and is deliberately absent from this list. */
  .fame-footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Column, not row. The mega-panel link is a label with a description under
     it; flex defaulting to a row put the two side by side and broke "Our story"
     across two lines to make room for the sentence beside it. */
  .fame-megacol__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 44px;
  }

  /* The card is the hit target and it is large, but the heading is the actual
     control, so it gets the height too — otherwise a screen reader user
     activating by name is aiming at an 18px strip. */
  .fame-person__trigger {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .fame-person--interactive .fame-person__name { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Scroll behaviour
   -------------------------------------------------------------------------- */

/* Sticky headers and in-page anchors: without this an anchor lands with its
   heading hidden underneath the header, which reads as the link not working. */
:root { scroll-padding-top: calc(var(--header-h) + var(--s-4)); }

@media (max-width: 1039px) {
  /* Momentum scrolling inside the drawer and any horizontal strip, and no
     scroll chaining out to the document behind them. */
  .fame-nav,
  .fame-tabs__scroller,
  .fame-facets {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Long unbroken strings — contract titles, programme acronyms, donor names —
     are the usual cause of a phone-width page scrolling sideways. */
  .fame-db__title,
  .fame-result__title,
  .fame-panelist__inst,
  .fame-megacol__label,
  h1, h2, h3 {
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  /* Tables reflow to stacked records elsewhere; this catches anything that
     does not, so a wide table scrolls inside itself rather than taking the
     page with it. */
  .fame-tablewrap,
  .fame-section table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}