/* ==========================================================================
   Phase 13 (a11y): WCAG 2.1 AA utilities — skip link, focus visibility,
   external-link distinction, small-target padding. Visual parity preserved:
   every rule is visually hidden until focused/hovered or a padding-only change.
   Loaded by ZPSHELL Shell + Page AND Base layout (single source).
   ========================================================================== */
.dn-skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #0F4C5C; color: #FAFAF8; padding: 12px 20px;
  border-radius: 0 0 8px 0; font-family: 'Geist', sans-serif; font-size: 14px;
  text-decoration: none;
}
.dn-skip:focus { left: 0; }
.zptheme-body a:focus-visible,
.zptheme-body button:focus-visible,
.zptheme-body [role="tab"]:focus-visible,
.zptheme-body [role="button"]:focus-visible,
.zptheme-body input:focus-visible,
.zptheme-body select:focus-visible,
.zptheme-body textarea:focus-visible,
.zptheme-body summary:focus-visible,
.zptheme-body .zp-hvlink:focus-visible,
.zptheme-body [data-element-type="accordionheader"]:focus-visible,
.zptheme-body [data-element-type="tabheader"]:focus-visible {
  outline: 2px solid #0F4C5C; outline-offset: 2px;
}
a.dn-ext-link { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
a.dn-ext-link:hover, a.dn-ext-link:focus-visible { text-decoration-style: solid; }
.zptheme-body .zpcarousel-arrow-left, .zptheme-body .zpcarousel-arrow-right,
.zptheme-body .zpcarousel-arrow-l, .zptheme-body .zpcarousel-arrow-r {
  position: absolute;
}
.zptheme-body .zpcarousel-arrow-left::before,
.zptheme-body .zpcarousel-arrow-right::before,
.zptheme-body .zpcarousel-arrow-l::before,
.zptheme-body .zpcarousel-arrow-r::before {
  content: ""; position: absolute; inset: -8px;
}
.zptheme-body a[title^="SEE THE COMPARISON"] { padding: 6px; margin: -6px; display: inline-block; }

/* Visually-hidden text (screen-reader only) — WCAG standard clip pattern.
   Used for empty corner <th> cells (axe empty-table-header needs text). */
.dn-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Phase 13 (r3e, WCAG 2.5.8): bare "→" arrow links (category cards -> catalog tabs)
   are 14px wide — expand the hit area to >= 24px without changing layout.
   FIX (Alek Sep 10 report): text-align LEFT — these anchors are also the category
   TITLES; center made wrapped 2-row titles render centered. */
.zptheme-body a[href*="#tab-"] {
  display: inline-block;
  min-inline-size: 24px;
  min-block-size: 24px;
  line-height: 24px;
  text-align: left;
  margin-inline-end: -10px; /* absorb the added box from the trailing arrow position */
}
/* Alek Sep 10: mobile-only 2px reduction for POPULAR APPS category titles
   (desktop + tablet keep 18px). */
@media (max-width: 767px) {
  .zptheme-body h4.zpheading a[href*="#tab-"] {
    font-size: 16px;
  }
}

/* Phase 13 (r3e): burger trigger hit area >= 24px on mobile. */
@media (max-width: 991px) {
  .zptheme-body [data-zp-burger-clickable-area] {
    min-inline-size: 24px;
    min-block-size: 24px;
  }
}

/* Phase 13 (r3e): bare "→" links in Popular Apps cards ("Replaces X →"). */
.zptheme-body .zpimage-text a[href^="/"] {
  display: inline-block;
  min-inline-size: 24px;
  min-block-size: 24px;
  line-height: 24px;
  vertical-align: middle;
  text-align: left;
}

/* Phase 13 (r3e fix 2): bare "→" app links live in .zpimage-heading (span > a).
   text-align LEFT per the Sep 10 centering-regression fix. */
.zptheme-body .zpimage-heading a[href^="/"] {
  display: inline-block;
  min-inline-size: 24px;
  min-block-size: 24px;
  line-height: 24px;
  vertical-align: middle;
  text-align: left;
}