/* Readability and touch fixes, loaded last on every page (templates/base.html).
   From Playwright audits at 320–1920px: no text under 12px, form fields at 16px on touch screens
   (smaller makes iPhone/iPad zoom in on focus), tap targets at least 44px on touch screens,
   long text at least 14px on phones, nothing wider than the screen. */

/* ---- All widths: chips, badges and labels at least 12px ---- */
.chip, .chip.ind, .pill, .wi-card__badge, .wd-chip, .wd-chip span, .c-chip, .cm-chip, .sr-chip,
.float-card__live, .hp-row__ind, .speaker-card__area, .wd-tile__date b, .wi-card__date b,
.sp-card__area, .pf-od, .wcard__status, .hp .speaker-card__area {
  font-size: 12px !important;
}

/* ---- Touch screens (phones and tablets, up to 1024px) ---- */
@media (max-width: 1024px) {
  /* Form fields: 16px so iPhone/iPad don't zoom in when one is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
  select, textarea {
    font-size: 16px !important;
  }

  /* Checkboxes and radios: bigger box (the whole label is tappable too) */
  .ax-check input, .nl-pref input, .cm-chk input, .wb-length input, label > input[type=checkbox], label > input[type=radio] {
    width: 22px !important; height: 22px !important;
  }

  /* Buttons at least 44px tall */
  .app-banner .btn { min-height: 44px; padding-inline: 16px; }
  .app-banner__close { width: 44px !important; height: 44px !important; }
  .sr-form button, .sr-filters button, .ex-tile, button.ind, .i-btn, .art-share__copy, .cm-btn, .wi-seg button,
  .tabs > button, .pf-alert-form__row > button {
    min-height: 44px;
  }
  .ax-pw button { min-height: 44px; min-width: 44px; }

  /* Standalone text links: 44px tap area without moving the layout */
  .footer-phone__contact a, .footer-contact a, .footer-col > a, .footer-all, .c-crumbs a, .wi-crumbs a, .crumbs a,
  .attp__crumbs a, .i-link, .wi-sec__head a, .wd-about__text > a, .wd-more__head a, .cm-head a, .hp-seeall,
  .fq-help__item a, .in-apply__q a, .ax-row a, .ax-back, .attp__back, .cm-links a, .cm-rm, .cm-who a, .smd-brochure,
  .pol-help a, .pol-sec a[href^="tel"], .pol-sec a[href^="mailto"], .ax-check a,
  .wcard__title > a, .wd-crumbs a, .hp-link, .hp-applink, .wb-promo a, .cm-item__body > a, .topbar a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  .footer-col > a, .footer-all { display: block; }
  .footer-phone__contact { gap: 18px !important; }
}

/* ---- Phones (up to 760px) ---- */
@media (max-width: 760px) {
  /* Long text at least 14px */
  .footer-phone__bottom, .wd-app span, .wd-speaker__cred, .mb-note, .ex-disclaimer,
  .cm-note, .cm-att__note, .cm-trust li, .cm-hide-phone {
    font-size: 14px !important;
  }

  /* Headings that wrapped into 5+ lines */
  .ax-brand .ax-title, .ax-mid--forgot .ax-title { font-size: 28px !important; }
  .art-head h1, .wrap > h1.art-title, .art-head .wrap > h1 { font-size: 24px !important; line-height: 1.2 !important; }

  /* Header: the logo was squeezed to 11px wide on search pages by the spacer */
  .site-header__spacer { display: none !important; }
  .site-header__logo { flex: 1 0 auto; }

  /* Sign in / register / reset: the brand panel pushed the form below the first screen */
  .ax-brand { padding: 20px 16px 24px !important; gap: 16px !important; }
  .ax-brand .ax-list, .ax-brand .ax-qr, .ax-brand .ax-brand-help { display: none !important; }
  .ax-brand .ax-title { font-size: 24px !important; }
  .ax-logo img { height: 34px !important; }
  .ax-ring { width: 360px !important; height: 360px !important; right: -200px !important; bottom: -220px !important; }

  /* Article headings sized for a phone */
  .art-prose h2 { font-size: 22px !important; }
  .art-prose h3 { font-size: 18px !important; }
  .art-prose blockquote { font-size: 18px !important; padding: 18px 18px 18px 24px !important; }
  .art-prose > p:first-child:not(:has(br)) { font-size: 18px !important; }
}

/* ---- Small phones (up to 360px) ---- */
@media (max-width: 360px) {
  /* Long words and addresses (e.g. the FAQ email) must wrap instead of widening the page */
  .fq-help__item, .fq-help__item * { overflow-wrap: anywhere; min-width: 0; }
  /* Google's reCAPTCHA box is a fixed 304px wide: scale it to fit */
  .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
  /* Search results: long unbroken words in a speaker bio or title wrap instead of widening the page */
  .sr-row, .sr-row__main { min-width: 0; }
  .sr-row__main, .sr-row__main * { overflow-wrap: anywhere; }
  /* Big page headings */
  .title-band h1, .wd-title, .wrap > h1 { font-size: 24px !important; line-height: 1.2 !important; }
  .art-head .wrap > h1 { font-size: 22px !important; }
}

/* Zendesk "Help" button: keep it above the webinar page's sticky Enroll bar, which shows up to 1060px */
@media (max-width: 1060px) {
  body:has(.wd-bar) iframe#launcher { bottom: 84px !important; }
}