/* ==========================================================================
   Foundryline — phone
   --------------------------------------------------------------------------
   Most visitors arrive on a phone. The desktop version is finished; this file
   is the difference between a site that works in a hand and one that was
   merely made narrow enough not to break.

   Everything here is either an iOS behaviour that has no equivalent on a
   desktop browser, or a touch target that is too small to hit. Nothing
   changes how the site looks on a laptop.

   THE SIX THINGS THIS FIXES

   1. THE GREY FLASH. iOS paints a translucent grey box over any element you
      tap unless `-webkit-tap-highlight-color` is set. It looks like a
      rendering bug and it appears on every link and button. Removing it and
      replacing it with a real `:active` state gives feedback that matches the
      design instead of fighting it.

   2. THE HOME BAR. On every iPhone since the X, and on Android gesture
      navigation, a bar sits across the bottom of the screen. Anything pinned
      within about 34px of the bottom edge is underneath it. `env(safe-area-
      inset-bottom)` reports that strip of screen, and `max()` keeps the
      original spacing on devices that do not have one.

   3. 100vh IS A LIE ON iOS. The address bar hides and shows as you scroll, and
      `100vh` is calculated as though it were always hidden. Anything sized to
      a full screen ends up taller than the screen. `100dvh` is the dynamic
      value and is correct at every scroll position.

   4. TAP TARGETS. Apple asks for 44x44 CSS pixels, Google for 48x48. The
      navigation links, the language button and the small buttons were all
      built for a mouse and are between 32 and 40px tall. On a phone they are
      padded out to a comfortable size without changing the visual design.

   5. TEXT THAT ZOOMS AND STAYS ZOOMED. iOS zooms the page when a field smaller
      than 16px is focused, and does not zoom back out. Every input is 16px on
      a phone.

   6. THE STICKY HEADER EATING THE SCREEN. A sticky bar plus the browser's own
      toolbar can take a third of a small phone. Below 520px the header is
      shorter, and a heading scrolled to with an anchor link is given enough
      scroll margin to clear it instead of hiding underneath.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tap feedback
   -------------------------------------------------------------------------- */
html {
  -webkit-tap-highlight-color: transparent;
  /* iOS inflates text in landscape unless this is set */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A real press state instead of the grey box. Subtle on purpose: enough to
   confirm the tap landed, not enough to flash. */
@media (hover: none) {
  .btn:active,
  .navlink:active,
  .lang-btn:active,
  .nav-toggle:active,
  .card:active,
  .tpl-tab:active,
  button:active,
  a:active {
    opacity: 0.72;
  }

  /* and nothing should get stuck in a hover state after a tap */
  .btn:hover,
  .card:hover,
  .tpl-card:hover,
  .price-card:hover,
  .tile:hover,
  .sample:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   2. The home bar, and things pinned near it
   -------------------------------------------------------------------------- */
.lang-nudge {
  /* was bottom: 18px, which sits under the home bar on an iPhone */
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px);
}

.site-foot,
.d-foot {
  padding-bottom: max(34px, env(safe-area-inset-bottom, 0px) + 20px);
}

/* the pop-up card sits centred, so it only needs side insets on a notched
   phone held in landscape */
@media (orientation: landscape) {
  .gate,
  .d-auth {
    padding-left: max(20px, env(safe-area-inset-left, 0px) + 12px);
    padding-right: max(20px, env(safe-area-inset-right, 0px) + 12px);
  }
}

/* --------------------------------------------------------------------------
   3. Full-height areas that respect the browser's own chrome
   -------------------------------------------------------------------------- */
@supports (height: 100dvh) {
  .gate,
  .d-auth {
    min-height: 100dvh;
  }
}

/* --------------------------------------------------------------------------
   4. Touch targets
   --------------------------------------------------------------------------
   Padded rather than resized: the visual weight of a button should not change
   between a laptop and a phone, but the area that responds to a thumb should.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .navlink,
  .d-nav a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .lang-btn,
  .nav-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  .lang-menu a,
  .lang-menu .lang-current {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .btn,
  .d-btn {
    min-height: 46px;
  }

  .btn-sm,
  .d-btn-sm {
    min-height: 42px;
  }

  /* the footer's link lists are the most-missed targets on the site: they are
     small text with no padding, stacked tightly */
  .foot-grid a,
  .d-foot-grid a,
  .site-foot a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* the small circular swatches on the gallery customiser */
  .cz-dot {
    width: 32px;
    height: 32px;
  }

  /* the quiz options are the main interaction in the demos */
  .qz-opt {
    min-height: 54px;
  }

  .qz-back,
  .qz-restart {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   5. Fields do not trigger the iOS zoom
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  input,
  select,
  textarea,
  .gate-form input[type="email"],
  .d-field input,
  .d-field select,
  .d-field textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   6. A shorter header, and anchors that land below it
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .site-head .wrap,
  .d-head .d-wrap {
    min-height: 58px;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* When an in-page link scrolls to a heading, the sticky header would cover it.
   This gives every anchor target a landing strip the height of the header. */
:target,
[id] {
  scroll-margin-top: 84px;
}

@media (max-width: 520px) {
  :target,
  [id] {
    scroll-margin-top: 70px;
  }
}

/* --------------------------------------------------------------------------
   7. Long words and wide content
   --------------------------------------------------------------------------
   A single long URL or a long Bulgarian compound can push a narrow column
   wider than the screen. Breaking only where it is needed keeps normal text
   wrapping the way it should.
   -------------------------------------------------------------------------- */
p, li, h1, h2, h3, h4, dd, dt, td, th, .lede, .d-lede {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

h1, h2, h3, h4 {
  hyphens: none;   /* headings should break at spaces, not mid-word */
}

/* tables and preformatted blocks scroll inside themselves rather than
   dragging the whole page sideways */
.d-table,
.clin-table,
.st-index,
.app-compare,
.st-index {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   8. Do less on a device that is struggling
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}