/* ============================================================
   Task 6 - responsive / accessibility guarantees.
   Loaded on every page. Deliberately small and specific: it enforces
   the three measurable rules from the brief (no overflow, 44px tap
   targets, no sub-12px body text) plus the SSR block styling.
   ============================================================ */

/* ---- 1. No horizontal overflow at any width ---- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

pre,
code,
table {
  max-width: 100%;
  overflow-x: auto;
}

/* Long unbroken strings (ad titles, emails, URLs) are the usual cause of
   overflow at 360px. */
h1,
h2,
h3,
h4,
p,
li,
a,
dd,
dt,
span {
  overflow-wrap: anywhere;
}

/* ---- 2. Tap targets at least 44x44 on touch/mobile ---- */
@media (max-width: 1023px) {
  button,
  a[role="button"],
  [type="button"],
  [type="submit"],
  select,
  summary,
  .tx-chip,
  nav a {
    min-height: 44px;
    min-width: 44px;
    /* min-height is ignored on inline non-replaced boxes, which is what a
       <button class="flex ..."> falls back to before the stylesheet that
       defines .flex arrives. Forcing inline-flex makes the 44px floor
       hold in every load order. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Header/footer nav links sit in flex rows; keep them block-level so the
     44px box applies rather than collapsing to the text line height. */
  header a,
  footer a,
  nav a {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* Every standalone link is a tap target too: category chips, card links,
     breadcrumb items, "see all" links. Measured at 360/390/768 these were
     25-40px tall, below the 44px minimum. */
  header a[href],
  footer a[href],
  main a[href],
  nav a[href],
  button,
  [role="button"],
  [type="button"],
  [type="submit"],
  select,
  summary {
    /* 48px, not 44px: several controls carry a utility height of 2.7rem
       (43.2px) with higher specificity, which rounded to 43px in the device
       pass and failed the 44px minimum by a single pixel. !important keeps
       the floor above any utility height class regardless of load order. */
    min-height: 48px !important;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }

  /* ...except links that sit inside a sentence, where a 44px box would
     break the line box. Those are exempt by the same rule the audit uses. */
  p a[href],
  li a[href],
  dd a[href],
  span a[href] {
    min-height: 0;
    display: inline;
  }

  /* Text floor: no body text under 12px. Applied to leaf nodes only so the
     max(1em, 12px) cannot compound down a nested tree. */
  main *:not(:has(*)),
  header *:not(:has(*)),
  footer *:not(:has(*)) {
    /* Utility classes such as .text-label-sm hard-set 10.5px, so the floor
       has to win the cascade to keep mobile body text legible. */
    font-size: max(1em, 12px) !important;
  }

  /* Horizontal overflow: the header/utility bars are single-line flex rows
     that were pushing 500-816px of content through a 360px viewport. */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  header .flex,
  nav .flex,
  footer .flex {
    flex-wrap: wrap;
    min-width: 0;
  }

  header,
  nav,
  footer,
  main,
  section,
  div {
    min-width: 0;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  /* Icon-only controls need the box without gaining visual bulk. */
  button:has(> .material-symbols-outlined:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Inline links inside body copy are exempt - a 44px line box would
     break paragraph rhythm and WCAG 2.5.8 exempts inline text links. */
  p a,
  li a,
  dd a {
    min-height: 0;
    min-width: 0;
  }
}

/* ---- 3. Readable text without zoom ---- */
@media (max-width: 767px) {
  body,
  p,
  li,
  dd,
  dt,
  td,
  label,
  input,
  select,
  textarea {
    font-size: max(1em, 14px);
  }

  .text-body-sm,
  .text-label-md,
  .text-label-sm,
  .font-body-sm {
    font-size: max(1em, 12px) !important;
  }

  /* iOS zooms the viewport when a focused field is under 16px. */
  input,
  select,
  textarea {
    font-size: max(1em, 16px);
  }
}

/* ---- 4. Reserve image boxes so CLS stays near zero ---- */
img[width][height] {
  height: auto;
}

img.object-cover[width][height],
img[class*="h-full"][width][height] {
  height: 100%;
}

/* ---- 5. Edge-rendered content regions ---- */
.tx-ssr-block h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.25rem;
}

.tx-ssr-block h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

.tx-ssr-block p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.tx-ssr-links ul,
.tx-ssr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
}

.tx-ssr-links a {
  text-decoration: underline;
}

.tx-ssr-meta {
  opacity: 0.75;
}

/* The SSR listing list exists for crawlers; the interactive grid above it
   is the visual surface. Keep it reachable, not duplicated on screen. */
.tx-ssr-block .sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 6. Mega menu on touch devices ---- */
@media (hover: none) {
  .tx-megamenu {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tx-megamenu [data-tx-cat],
  .tx-megamenu [data-tx-sub] {
    min-height: 44px;
  }
}


/* V164 hardening: close remaining mobile audit gaps.
   Icon-only action buttons inherited fixed 43px width from utility classes;
   hidden desktop nav/search rows still participated in headless file:// layout;
   one emphasized label rendered at 11px. */
@media (max-width: 1023px) {
  button,
  a[role="button"],
  main a[href]:not(p a):not(li a):not(dd a):not(span a),
  header a[href],
  footer a[href],
  nav a[href],
  [type="button"],
  [type="submit"],
  select,
  summary {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  em,
  .text-\[10px\],
  .text-\[11px\],
  .text-xs,
  .text-label-sm {
    font-size: 12px !important;
    line-height: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .hidden.md\:flex,
  .hidden.md\:grid,
  .hidden.md\:block,
  .hidden.lg\:flex,
  .hidden.lg\:grid,
  .hidden.lg\:block {
    display: none !important;
  }
}