/*
 * Responsive layer shared by every page.
 *
 * It is a plain stylesheet on purpose: the legal pages (cookies, impressum, privacy, terms) load Tailwind from the CDN
 * and not /style.css, so rules that must reach every page cannot live in the compiled Tailwind file. It contains
 *   1. the component CSS of the header language selector (partials/language-switcher.hbs),
 *   2. the compact header (phones, tablets and every touch screen), the consent banner, text, footer and programs table.
 *
 * Three size classes are served:
 *   phone   below 768px            one 56px header row, 44px targets, one-column cards
 *   tablet  768px to 1279px        one 64px header row (portrait and small landscape keep the page links and the
 *                                  Enterprise/Talent switch in a second row that scrolls away), 44px targets,
 *                                  two-column footer and two-column program cards below 1100px
 *           and any touch screen of 1280px or more (large tablets in landscape) with the same header
 *   desktop 1280px and more with a mouse: the layout the pages always had, untouched.
 * The 600px step inside "tablet" only enlarges type and padding for small tablets that still use the phone grid.
 *
 * Selectors are written with two classes (or an element and a class) so that they win over a single Tailwind utility
 * whichever stylesheet is parsed last, the CDN build of the legal pages included. Logical properties only (RTL).
 */

/* ---------------------------------------------------------------------------------------------------------------
   1. Language selector
   Phone and tablet: a 44px button (globe + current language) that opens a panel of 48px targets with the native
   language names. Desktop with a mouse: the inline "EN | FR | IT ..." row under the brand, as before.
   --------------------------------------------------------------------------------------------------------------- */
.lang-switch { margin-top: 0.25rem; }
.lang-switch > summary { list-style: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }

/* Visually hidden, read by screen readers ("Language: EN"). */
.lang-switch .lang-switch__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.lang-switch .lang-switch__toggle {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-width: 44px; min-height: 44px; padding: 0 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s;
}
.lang-switch .lang-switch__toggle:hover,
.lang-switch[open] > .lang-switch__toggle { color: #D4AF37; border-color: #D4AF37; }
.lang-switch .lang-switch__toggle:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.lang-switch .lang-switch__current { white-space: nowrap; }
.lang-switch .lang-switch__globe { width: 16px; height: 16px; flex: none; }
.lang-switch .lang-switch__chevron { width: 10px; height: 10px; flex: none; transition: transform 0.2s; }
.lang-switch[open] .lang-switch__chevron { transform: rotate(180deg); }

/* The open panel hangs under the header (the nearest positioned ancestor, the sticky <nav>) and never pushes the page. */
.lang-switch .lang-switch__list {
  list-style: none; margin: 0; padding: 0.75rem 1rem 1rem;
  position: absolute; top: 100%; inset-inline: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
  max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  background: #050505; border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
}
.lang-switch .lang-switch__link {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 48px; padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere;
  transition: color 0.2s, border-color 0.2s;
}
.lang-switch a.lang-switch__link:hover { color: #D4AF37; border-color: #D4AF37; }
.lang-switch a.lang-switch__link:focus-visible { outline: 2px solid #D4AF37; outline-offset: -2px; }
.lang-switch .lang-switch__link--current { color: #D4AF37; border-color: #D4AF37; background: rgba(212, 175, 55, 0.08); }
.lang-switch .lang-switch__code {
  flex: none; min-width: 1.75rem; color: #D4AF37;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Tablet: the panel is a compact sheet of 4 columns x 2 rows hanging from the end edge of the header, under the button. */
@media (min-width: 768px) {
  .lang-switch .lang-switch__list {
    inset-inline: auto 0; width: min(44rem, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Desktop with a mouse, in browsers that can show the content of a closed <details> (::details-content): the inline
   row. Browsers without it keep the disclosure at every width, which is still fully usable. */
@supports selector(::details-content) {
  @media (min-width: 1280px) and (pointer: fine) {
    .lang-switch::details-content { content-visibility: visible; }
    .lang-switch > summary.lang-switch__toggle { display: none; }
    .lang-switch .lang-switch__list {
      position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem;
      width: auto; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none;
      color: rgba(255, 255, 255, 0.75);
      font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
    }
    .lang-switch .lang-switch__item { display: flex; align-items: center; gap: 0.375rem; }
    .lang-switch .lang-switch__item + .lang-switch__item::before { content: "|"; }
    .lang-switch .lang-switch__link {
      display: inline-flex; justify-content: center; gap: 0; min-height: 0; padding: 0.125rem 0.25rem; border: 0;
      color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit;
    }
    .lang-switch a.lang-switch__link:hover { color: #D4AF37; }
    .lang-switch a.lang-switch__link:focus-visible { outline-offset: 2px; }
    .lang-switch .lang-switch__link--current { background: none; }
    .lang-switch .lang-switch__code { min-width: 0; color: inherit; font-size: inherit; letter-spacing: inherit; }
    .lang-switch .lang-switch__name { display: none; }
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   2. Compact header: one sticky row (logo, brand, [page links], language, "Book a Session"), nothing truncated.
   The brand blocks of the page templates are flattened with display: contents so that the logo, the brand link and
   the language selector become direct items of the header row. A secondary row (the Enterprise/Talent switch of
   /enterprise/ and /talent/, the page links of the other pages from 768px) sits on top of it; that row scrolls away
   (the header sticks at a negative offset) and only the one-row bar stays on screen.
   --------------------------------------------------------------------------------------------------------------- */

/* 2a. Shared by phones, tablets and every touch screen. */
@media (max-width: 1279.98px), (pointer: coarse) {
  :is(nav, div).site-nav {
    --site-nav-row: 3rem; --site-nav-pad: 0.375rem;
    flex-wrap: wrap; align-items: center; justify-content: flex-start; row-gap: 0; height: auto;
  }
  :is(nav, div).site-nav .site-nav__brand,
  :is(nav, div).site-nav .site-nav__text { display: contents; }
  :is(nav, div).site-nav .site-nav__text > a {
    display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; min-width: 0; min-height: 44px;
  }
  :is(nav, div).site-nav .site-nav__name { white-space: nowrap; overflow: visible; text-overflow: clip; }
  :is(nav, div).site-nav .site-nav__tagline { line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; }
  :is(nav, div).site-nav .lang-switch { flex: none; margin-top: 0; order: 2; }
  :is(nav, div).site-nav .site-nav__cta {
    order: 3; display: flex; align-items: center; justify-content: center;
    min-height: 44px; line-height: 1.2; white-space: normal;
  }
  :is(nav, div).site-nav .site-nav__links > a,
  :is(nav, div).site-nav .site-nav__links > div > a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  }
  /* Nothing else from the consent banner may be smaller than a finger. */
  #cmp-banner button { min-height: 44px; }
}

/* 2b. Secondary row on top of the bar, below 1100px: the audience switch at every width, the page links from 768px. */
@media (max-width: 1099.98px) {
  :is(nav, div).site-nav--audience { top: calc(-1 * (var(--site-nav-row) + var(--site-nav-pad))); }
  :is(nav, div).site-nav .site-nav__audience {
    order: -1; flex: 0 0 100%; height: var(--site-nav-row); margin-block-end: var(--site-nav-pad);
    display: flex; align-items: center; justify-content: center;
  }
  :is(nav, div).site-nav .site-nav__audience > [role="group"] { width: 100%; max-width: 26rem; }
  :is(nav, div).site-nav .site-nav__audience a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 2.5rem; padding: 0.375rem 0.5rem; font-size: 10px; line-height: 1.15; letter-spacing: 0.02em;
  }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  :is(nav, div).site-nav--links { top: calc(-1 * (var(--site-nav-row) + var(--site-nav-pad))); }
  :is(nav, div).site-nav .site-nav__links {
    order: -1; flex: 0 0 100%; height: var(--site-nav-row); margin-block-end: var(--site-nav-pad);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; letter-spacing: 0.15em;
  }
}

/* From 1100px the audience wrapper is transparent (as on the desktop) and its switch shares the bar. */
@media (min-width: 1100px) {
  :is(nav, div).site-nav .site-nav__audience { display: contents; }
}
/* Tablet in landscape and touch screens of 1280px or more: logo, brand, page links / audience switch, language, action. */
@media (min-width: 1100px) and (max-width: 1279.98px), (min-width: 1280px) and (pointer: coarse) {
  :is(nav, div).site-nav .site-nav__audience > [role="group"],
  :is(nav, div).site-nav .site-nav__links { order: 1; }
  :is(nav, div).site-nav .site-nav__links { gap: 1.25rem; margin-inline: 0.75rem; letter-spacing: 0.15em; }
}

/* 2c. Phone: 56px bar. */
@media (max-width: 767.98px) {
  :is(nav, div).site-nav { column-gap: 0.375rem; min-height: 3.5rem; padding: 0.375rem 1rem; }
  :is(nav, div).site-nav .site-nav__name { font-size: clamp(11px, 3.4vw, 13px); letter-spacing: 0.08em; }
  :is(nav, div).site-nav .site-nav__tagline { font-size: 10px; letter-spacing: 0.04em; }
  :is(nav, div).site-nav .lang-switch__toggle { padding: 0 0.5rem; gap: 0.3125rem; }
  :is(nav, div).site-nav .site-nav__cta {
    max-width: clamp(5rem, 26vw, 7rem); padding: 0.25rem 0.5rem;
    font-size: 10px; letter-spacing: 0.05em;
  }
  :is(nav, div).site-nav .site-nav__audience a { font-size: 10px; }
}

/* The chevron of the language button needs room that a 320-360px header does not have; the globe says it all. */
@media (max-width: 389.98px) {
  :is(nav, div).site-nav .lang-switch__chevron { display: none; }
}

/* 2d. Tablet (and any touch screen of 1280px or more): a 64px bar with larger type, 44px targets, the 4-column language sheet.
   The 600px step also serves small tablets that still use the phone grid. */
@media (min-width: 600px) and (max-width: 1279.98px), (min-width: 1280px) and (pointer: coarse) {
  :is(nav, div).site-nav { --site-nav-row: 3.25rem; --site-nav-pad: 0.5rem; column-gap: 0.75rem; min-height: 4rem; padding: 0.5rem 1.5rem; }
  /* The brand keeps the width of its words; whatever does not fit moves to the next line instead of running under it. */
  :is(nav, div).site-nav .site-nav__text > a { flex: 1 0 auto; }
  :is(nav, div).site-nav .site-nav__name { font-size: 16px; letter-spacing: 0.2em; }
  :is(nav, div).site-nav .site-nav__tagline { font-size: 10px; letter-spacing: 0.12em; }
  :is(nav, div).site-nav .lang-switch__toggle { padding: 0 0.75rem; gap: 0.375rem; }
  :is(nav, div).site-nav .lang-switch__chevron { display: block; }
  :is(nav, div).site-nav .site-nav__cta {
    max-width: 16rem; padding: 0.5rem 1.25rem; font-size: 11px; letter-spacing: 0.1em;
  }
  :is(nav, div).site-nav .site-nav__audience > [role="group"] { max-width: 30rem; }
  :is(nav, div).site-nav .site-nav__audience a { min-height: 2.75rem; padding: 0.375rem 0.875rem; font-size: 11px; }
  :is(nav, div).site-nav .site-nav__links > a,
  :is(nav, div).site-nav .site-nav__links > div > a { padding-inline: 0.75rem; }
  :is(nav, div).site-nav .site-nav__links > div { gap: 0.25rem; }
}

/* 2e. Phone held sideways: a short, wide touch screen (about 340px high). The audience switch and the page links move into the
   bar, as from 1100px, with the compact type of the phone, so the header is one 56px row and not two rows of about 120px that
   take a third of the screen. From 640px (iPhone 8 and later; every language and page measured); the narrower iPhone SE keeps
   the second row. It comes after 2d to win over its larger type.
   Two guards keep the brand name whole in every language (NXL-PRR-006 PR-29: on /zh/enroll/ the bar was up to 215px high and the
   name was written one letter per line, on /de/enroll/ it was 77px): the brand keeps at least the width of its name (its
   tagline may wrap between words), and whatever does not fit moves to a second row, never into a letter-wide column; and the enrolment page does not show its third link in the bar,
   because that link ("Discovery Chemistry Call", 326px in Chinese) leads where the button of the bar leads, to the call page. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (min-width: 640px) and (max-width: 1099.98px) {
  :is(nav, div).site-nav--audience, :is(nav, div).site-nav--links { top: 0; }
  :is(nav, div).site-nav { column-gap: 0.5rem; min-height: 3.5rem; padding: 0.375rem 1rem; }
  :is(nav, div).site-nav .site-nav__text > a { flex: 1 1 0; min-width: min-content; }
  :is(nav, div).site-nav .site-nav__links > a[href$="/services/discovery-chemistry-call/"] { display: none; }
  :is(nav, div).site-nav .site-nav__name { font-size: 13px; letter-spacing: 0.08em; }
  :is(nav, div).site-nav .site-nav__tagline { font-size: 10px; letter-spacing: 0.04em; }
  :is(nav, div).site-nav .lang-switch__toggle { padding: 0 0.5rem; gap: 0.3125rem; }
  :is(nav, div).site-nav .lang-switch__chevron { display: none; }
  :is(nav, div).site-nav .site-nav__cta { max-width: 7rem; padding: 0.25rem 0.5rem; font-size: 10px; letter-spacing: 0.05em; }
  :is(nav, div).site-nav .site-nav__audience { display: contents; }
  :is(nav, div).site-nav .site-nav__audience > [role="group"] { order: 1; flex: none; width: auto; max-width: none; }
  :is(nav, div).site-nav .site-nav__audience a { flex: 0 1 auto; min-height: 2.5rem; padding: 0.375rem 0.5rem; font-size: 10px; overflow-wrap: normal; }
  :is(nav, div).site-nav .site-nav__links { order: 1; flex: none; height: auto; margin-block-end: 0; gap: 0.75rem; margin-inline: 0.5rem; letter-spacing: 0.08em; }
  :is(nav, div).site-nav .site-nav__links > a,
  :is(nav, div).site-nav .site-nav__links > div > a { padding-inline: 0.375rem; }
}

/* 2e, 640 to 679px: the French and Italian bars of the audience pages need about 40px more than the screen has once the brand keeps
   its name (the audience switch, the language button and the action button are as wide as their words), so the gaps and the
   padding of the bar are tightened by that much; without it the bar would take a second row (107px) here. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (min-width: 640px) and (max-width: 679.98px) {
  :is(nav, div).site-nav { column-gap: 0.25rem; padding-inline: 0.5rem; }
  :is(nav, div).site-nav .site-nav__audience a { padding-inline: 0.375rem; }
  :is(nav, div).site-nav .site-nav__cta { padding-inline: 0.375rem; }
}

/* A short landscape screen (600-700px high): the language sheet scrolls instead of running off the bottom. */
@media (min-width: 768px) and (max-height: 700px) {
  .lang-switch .lang-switch__list { max-height: calc(100dvh - 5rem); }
}

/* Booking modal (shared partial): on a touch screen the close button and the links are finger-sized. The panel itself
   already scrolls inside the screen (max-height 90vh). The close button keeps its look; an invisible 44px area surrounds it. */
@media (max-width: 1279.98px), (pointer: coarse) {
  #modal-overlay > div > button[onclick="closeModal()"]::after { content: ""; position: absolute; inset: -0.625rem; }
  #booking-modal a { min-height: 44px; }
  #booking-modal a.w-full { display: flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------------------------------------------------------
   3. Phone consent banner: compact, the two choices side by side with wrapping labels, never wider than the screen.
   The ids and the markup are the ones assets/js/cmp.js and the home page engine use; only the layout changes.
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #cmp-banner {
    align-items: stretch; gap: 0.75rem;
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    max-height: 85vh; max-height: 85dvh; overflow-y: auto;
  }
  #cmp-banner > div:first-child { max-width: none; font-size: 12px; line-height: 1.45; }
  #cmp-banner > div:last-child {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; white-space: normal;
  }
  #cmp-banner button {
    min-height: 44px; padding: 0.5rem; font-size: 10px; line-height: 1.25; letter-spacing: 0.06em; white-space: normal;
  }
}
/* Tablet: the banner stays a row (text, two buttons) but never taller than half of a landscape screen. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  #cmp-banner { max-height: 50vh; max-height: 50dvh; overflow-y: auto; }
  #cmp-banner button { white-space: normal; line-height: 1.25; }
}

/* ---------------------------------------------------------------------------------------------------------------
   4. Text and footer. Long compound words (German, Italian) hyphenate in headings and break as a last resort; very
   small type is raised to a readable 10px; footer links get finger-sized targets. Phones and tablets alike.
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  body { overflow-wrap: anywhere; }
  h1, h2, h3, h4, h5, h6, .font-serif { hyphens: auto; -webkit-hyphens: auto; }
  /* The brand in the footer: the same word as in the header, a little tighter so that a 4-column footer holds it. */
  footer.site-footer .site-footer__grid > div:first-child > div:first-child { letter-spacing: 0.2em; }
}
@media (max-width: 1279.98px), (pointer: coarse) {
  body .text-\[7px\], body .text-\[8px\], body .text-\[9px\],
  body .md\:text-\[8px\], body .md\:text-\[9px\], body .sm\:text-\[8px\], body .sm\:text-\[9px\] { font-size: 10px; }
  footer.site-footer .site-footer__list > li { display: flex; align-items: center; min-height: 44px; margin-block: 0; }
  footer.site-footer .site-footer__list a,
  footer.site-footer .site-footer__list button,
  footer.site-footer .site-footer__audience a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  footer.site-footer .site-footer__audience { gap: 0 1.5rem; margin-bottom: 1rem; }
  nav[aria-label="Breadcrumb"] a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
@media (max-width: 767.98px) {
  footer.site-footer { padding-block: 2.5rem; }
  textarea { min-height: 8.5rem; }
}
/* Tablet in portrait and small landscape: two footer columns (four columns of 130px cannot hold an e-mail address). */
@media (min-width: 768px) and (max-width: 1099.98px) {
  footer.site-footer .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; margin-bottom: 3rem; }
}

/* Cards: 32px of padding on every side leaves a 200px column on a 320px phone, so below 640px they get 20px. */
@media (max-width: 639.98px) {
  body .p-8, body .p-10 { padding: 1.25rem; }
}

/* ---------------------------------------------------------------------------------------------------------------
   5. Programs comparison table (home and /talent/): below 1100px every program is a card, each value labelled by its
   column heading (data-label), so nothing needs a sideways scroll. One column on a phone, two on a tablet. From 1100px
   the six-column table fits its frame in every language.
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  #programs-comparison-matrix,
  #programs-comparison-matrix tbody,
  #programs-comparison-matrix tr,
  #programs-comparison-matrix th,
  #programs-comparison-matrix td { display: block; }
  #programs-comparison-matrix thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  #programs-comparison-matrix tbody { border: 0; }
  #programs-comparison-matrix tr { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  #programs-comparison-matrix tr:last-child { border-bottom: 0; }
  #programs-comparison-matrix th[scope="row"] { padding: 0 0 0.5rem; border: 0; text-align: start; font-size: 1.125rem; line-height: 1.3; }
  #programs-comparison-matrix td { padding: 0.5rem 0 0; border: 0; overflow-wrap: anywhere; }
  #programs-comparison-matrix td::before {
    content: attr(data-label); display: block; margin-bottom: 0.125rem;
    color: #D4AF37; font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  #programs-comparison-matrix tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #programs-comparison-matrix tr { padding: 1.25rem; }
  #programs-comparison-matrix tr:nth-child(odd) { border-inline-end: 1px solid rgba(255, 255, 255, 0.4); }
  #programs-comparison-matrix tr:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Arabic and Chinese have no italic: the browser would synthesise a slanted face, which distorts the letters (Arabic is
   cursive) or the strokes (Chinese). Emphasis in these two languages keeps the colour and the weight only. */
:lang(ar) .italic,
:lang(ar) em,
:lang(ar) i,
:lang(zh) .italic,
:lang(zh) em,
:lang(zh) i { font-style: normal; }

/* ---------------------------------------------------------------------------------------------------------------
   5. Touch targets (criterion A.5: 44px minimum on mobile) and reduced motion (criterion A.4)
   --------------------------------------------------------------------------------------------------------------- */

/* Phones, tablets and every touch screen: controls that stand alone have a 44px target. Nothing here changes a layout
   that already had 44px; the header logo link, the audience switch, the breadcrumb, the full-width calls to action, the
   links in the programmes table and the form fields were between 15px and 43px high. */
@media (max-width: 1099.98px), (pointer: coarse) {
  :is(nav, div).site-nav .site-nav__brand > a:first-child {
    display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  }
  :is(nav, div).site-nav .site-nav__audience a { min-height: 44px; }
  nav li > a, th > a, td > a, a.inline-flex, [data-segment-strip] > a { display: inline-flex; align-items: center; min-height: 44px; }
  a.block { min-height: 44px; }
  a.block:not(:has(*)) { display: flex; align-items: center; }
  a.block.text-center:not(:has(*)) { justify-content: center; }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([tabindex="-1"]),
  select { min-height: 44px; }
  /* "Book a Session" modal: the icon-only close button measured 24x26px. Padding that a negative margin takes back keeps
     the icon where it was and gives the button a 44px hit area. */
  #modal-overlay > div > button { padding: 10px; margin: -10px; }
}

/* Touch screens: a link or a button inside a sentence keeps its line and gets a taller hit area (padding that a negative
   margin takes back, so nothing moves). Mouse and keyboard users on a desktop are not affected. */
@media (pointer: coarse) {
  #cmp-banner a,
  main :is(p, div, li) > a:not(.block):not(.inline-flex):not([class*="site-nav"]),
  main p > button {
    padding-block: 16px; margin-block: -16px; padding-inline: 4px; margin-inline: -4px;
  }
}

/* Text fields on a touch screen. Safari on an iPhone zooms the page when a field whose text is under 16px receives focus, and
   it stays zoomed after the visitor leaves the field. The forms use text-sm (14px), so on a touch screen the text of every
   input that takes text, select and textarea is 16px; a mouse keeps the 14px of the design. The selector is as specific as
   the other rules of this file, so it wins over the Tailwind utility whichever stylesheet is parsed last. */
@media (pointer: coarse) {
  main :is(
    input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]),
    select,
    textarea
  ) { font-size: 16px; }
}

/* Visitors who ask the system for less motion: no smooth scrolling, no pulsing dots, no sliding banner or fading hover. */
@media (prefers-reduced-motion: reduce) {
  html, html.scroll-smooth { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}