/* Touch refinements — phones and tablets only.
 * ===========================================================================
 *
 * Written against measured defects, not impressions: verify/mobile.mjs walks
 * every route at 375 / 390 / 430 / 768 / 1024 and reports tap targets under
 * 44px, text under 12px, media wider than the viewport and horizontal
 * overflow. The first sweep over 215 views found 168 undersized tap targets
 * and 123 pieces of text too small to read on a phone. No page scrolled
 * sideways, which is the one class of defect that was already clean.
 *
 * Loaded LAST so it wins, and kept in its own file so a re-scrape of
 * dronivo.css cannot overwrite it — same discipline as frontier.css.
 *
 * Two rules govern everything here:
 *
 *   1. Nothing outside a media query. The desktop design is not touched; an
 *      11px eyebrow with wide tracking is a deliberate choice at 1440px and
 *      only becomes a problem in the hand.
 *   2. Grow the hit area, not the ink. Padding and min-height make a link
 *      easier to hit without making it look bigger — the layout keeps its
 *      proportions, the thumb gets its 44px.
 *
 * 44px is Apple's Human Interface Guidelines minimum and roughly the width of
 * an adult fingertip; below it, mis-taps rise sharply. It is why the footer
 * link list — 23px tall, stacked 8px apart — was the worst offender on the
 * site: three targets inside one thumb.
 */

@media screen and (max-width: 991px) {
  /* ------------------------------------------------------------- targets -- */

  /* Footer navigation: 41×23 measured. The underline animation rides on
     ::before at the text baseline, so vertical padding would push it away from
     the text — hence a flex box that keeps the ink where it was and grows the
     box around it. */
  html .footer_link-list a,
  html .footer_link-grid-two a,
  html .footer1_link-column a,
  html a.underline-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* The underline is positioned against the element box; once that box is
     44px tall the line would sit at its bottom edge instead of under the
     text. Pull it back to the text. */
  a.underline-link::before,
  a.underline-link.is--alt::before,
  a.underline-link.is--alt::after {
    bottom: calc(50% - 0.7em) !important;
  }

  /* 107×36 and 128×42 — both just under. */
  html .footer_logo-link,
  html .footer1_credit-text,
  html .iso_link-wrapper,
  html .solutions_more,
  html .newsfeed_more,
  html a.button.w-inline-block,
  html a.fr-tag,
  html a.fr-tag-split,
  html .fr-tag-split__label {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* The slider dots are handled in news-feed.css, not here. Growing them with
     padding and `background-clip: content-box` — which is what this block used
     to do — made the ink the content box, so once seven 44px targets no longer
     fitted the row, flex shrank them to seven different widths. The tap target
     has to be a box around the dash, not the dash itself. */

  /* Arrow buttons at 22×22. */
  html .newsfeed_more,
  .solutions_more {
    min-width: 44px !important;
    justify-content: center !important;
  }
}

/* ------------------------------------------------------------ burger nav -- */

/* Every item in the mobile menu measured 21px tall — Home, Solutions,
 * Trainings, About, the customer area, and each of the seven dropdown entries.
 * Twelve of thirteen targets under the minimum, stacked, in the one menu a
 * phone user has no way around.
 *
 * The original sweep missed all of it: verify/mobile.mjs walks the routes but
 * never opens the burger, so the links were display:none and skipped by the
 * zero-size guard. A closed menu measures clean. That gap is now closed in the
 * harness too.
 *
 * Padding rather than height on the anchors, so the text keeps its position in
 * the stack and only the box around it grows. */
@media screen and (max-width: 991px) {
  html .navbar_menu a.nav_link,
  html .navbar_menu .dropdown-toggle,
  html .navbar_menu .w-dropdown-link {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* The toggle wraps a <div class="nav_link">; without this the label keeps its
     own 21px box and the arrow list opens misaligned against it. */
  html .navbar_menu .dropdown-toggle > .nav_link {
    display: flex !important;
    align-items: center !important;
  }
}

/* ---------------------------------------------------------------- portal -- */

@media screen and (max-width: 991px) {
  html .pf-topbar__logo,
  html .pf-navlink,
  html .pf-chip,
  html .pf-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .pf-link::before {
    bottom: calc(50% - 0.7em) !important;
  }

  html .pf-btn--sm {
    min-height: 44px !important;
  }

  /* A checkbox is a 18px box with a label beside it; the label is the target
     people actually aim at, so the pair has to clear 44px together. */
  html .pf-check {
    min-height: 44px !important;
    align-items: center !important;
  }
}

/* ------------------------------------------------------------ type sizes -- */

/* Phones only. At 768px and up the eyebrow sizes are fine — it is the 375-430
   band where 10 and 11px stop being readable. Sizes are raised to 12px, the
   floor below which body-adjacent text should not go, and the tracking is
   eased slightly because wide letterspacing costs legibility exactly when the
   type is smallest. */
@media screen and (max-width: 479px) {
  html .text-style-tagline-small,
  html .fr-caption-label,
  html .fr-specimen-note,
  html .fr-spec-part,
  html .fr-tag-split__label,
  html .newsfeed_slash,
  html .form_field-label,
  html .pf-topbar__tag,
  html .pf-badge,
  html .pf-stat__label {
    font-size: 12px !important;
  }

  html .text-style-tagline-small,
  html .pf-topbar__tag,
  html .pf-stat__label {
    letter-spacing: 0.16em !important;
  }

  html a.underline-link.is--alt {
    font-size: 12px !important;
  }

  /* The role chips on /about-us — "Part-Time", "Ludwigshafen am Rhein". The
     only text left on the site under the 12px floor. */
  html .fr-role-meta span {
    font-size: 12px !important;
  }
}

/* ------------------------------------------------------------ long words -- */

/* The legal pages carry pasted URLs — paypal.com/de/webapps/mpp/ua/…,
   trustedshops.com/tsdocument/… — and a URL has no spaces to break at. At
   375px they pushed their list items to 611px and dragged the page 292px past
   the right edge. Measured on /terms-and-conditions and /cookie-settings.
 *
 * `anywhere`, not `break-word`, and the difference is the whole fix: both wrap
 * the same way, but only `anywhere` counts the break when the browser computes
 * the element's min-content width. With `break-word` the link wrapped and its
 * list item stayed 591px wide anyway, because the parent was still sized to
 * hold the URL unbroken — measured, after the first attempt.
 *
 * On links generally rather than on the two pages that showed it: the next
 * long string will be pasted into a different block than the last one was. */
@media screen and (max-width: 991px) {
  html a,
  html .accordion-css__item-p,
  html .accordion-css__item-p *,
  html [class*="rich-text"] * {
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------- footer rhythm -- */

/* Three separate spacings were stacking under each footer label: the label
   block's own 12px bottom margin, the column's 40px grid gap, and a 20px
   top margin on the link list that footer.css set back when the column had no
   gap at all. Measured 72px between "// MENU" and "Home" — the label read as
   belonging to nothing.
 *
 * The column gap is the one that should own it, so the list's margin goes and
 * the gap comes down. Only on small screens: the desktop footer is a wide
 * four-column row where the looser rhythm is right. */
@media screen and (max-width: 991px) {
  html .footer_component .footer1_link-column {
    gap: 1rem !important;
  }
  html .footer_component .footer_link-list {
    margin-top: 0 !important;
  }
}


/* --------------------------------------------------- specificity holdouts -- */

/* Not every override loses for the same reason, and guessing cost a round.
   These selectors were read out of the browser with CSS.getMatchedStylesForNode
   — the rules that actually won, rather than the ones assumed to:
 
     .footer_component .text-style-tagline-small   0.6875rem   (0,2,0)
 
   beats `html .text-style-tagline-small` (0,1,1) regardless of load order. Each
   holdout is matched at one level above its competitor, nothing more. */
@media screen and (max-width: 479px) {
  html .footer_component .text-style-tagline-small,
  html .contact_form .form_field-label,
  html .form_field-wrapper .form_field-label,
  html .fr-course-tab .fr-course-tab-num,
  html .fr-specimen .fr-specimen-label {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 991px) {
  /* Every button variant, not just the one that showed up in the report — the
     ported markup has several (.is-learn-more-dark, .bounce-btn wrappers) and
     matching them one at a time is how a defect list stays open for rounds. */
  html a.button,
  html .button.w-inline-block,
  html .bounce-btn > a,
  html .contact_form .button,
  html .cta-block .button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* The split button's tiles are 39px so that tile + gap matches the 45px
     slide Webflow's IX2 writes inline (buttons.css). Resizing them here would
     pull the two halves apart, so the anchor is padded instead: the tap target
     grows to 45px while the geometry the animation depends on is untouched. */
  html .btn-bubble-arrow {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  /* Contact details are mailto/tel links: the thing a visitor on a phone is
     most likely to tap, measured at 27px. */
  html .contact6_item a,
  html .contact6_contact-list a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* The visible checkbox is Webflow's styled div (or the portal's own input);
     the label wrapping both is what people aim at. */
  html .form_checkbox,
  html .w-checkbox {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  html .pf-check input,
  html .form_checkbox-icon {
    min-width: 24px !important;
    min-height: 24px !important;
  }
}

/* The Frontier chip list renders its items at 10px. */
@media screen and (max-width: 479px) {
  html .fr-chips li,
  html .fr-chips dt,
  html .fr-chips dd {
    font-size: 12px !important;
  }
}


/* Containers read out of the browser, not inferred from the class names. */
@media screen and (max-width: 479px) {
  html .fr-spec dt,
  html .fr-spec dd,
  html .fr-course-body dt {
    font-size: 12px !important;
  }
}

@media screen and (max-width: 991px) {
  html .button-group .button,
  html .button-group a {
    min-height: 44px !important;
  }
}

/* The bubble-arrow button, 39px across both sites and every variant. Its
   height comes from the animated inner wrapper, so the minimum goes on the
   anchor and the wrapper is told to fill it rather than dictate it. */
@media screen and (max-width: 991px) {
  html a.btn-bubble-arrow {
    min-height: 44px !important;
    align-items: center !important;
  }

  html a.btn-bubble-arrow .btn-bubble-arrow__content {
    display: flex !important;
    align-items: center !important;
  }
}