/* A11y fine-tune (A11Y-STATEMENT-GAP-20261028 #5 + #6). Loaded after the route bundle; no markup/JS/consent change. */

/* #6 WCAG 2.5.8: tile colour links keep their 18px (desktop) / 14px (<=900px) fill; a centred transparent
   pseudo-element makes the hit area 24x24. The 10px mobile gap gives a 24px pitch, so hit areas never overlap. */
a.wfl-tile__swatch { position: relative; }
a.wfl-tile__swatch::before { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
@media (max-width: 900px) { .wfl-tile__swatches { gap: 10px; } }

/* #5 WCAG 2.4.11: on short viewports the consent banner stays compact (<= 40% of the height). The three equal
   choices sit in one row and stay visible; only the copy scrolls. cookie-consent.js already measures the banner
   for body padding + scroll-padding-bottom, so a smaller banner means less page hidden behind it. */
@media (max-height: 500px) {
  .cb-banner { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }
  .cb-banner__inner { grid-template-columns: minmax(0, 1fr); padding: 8px 16px; gap: 6px; }
  .cb-banner__copy { max-width: none; max-height: calc(40vh - 76px); max-height: calc(40dvh - 76px); overflow-y: auto; }
  .cb-banner__title { font-size: 14px; margin: 0 0 2px; }
  .cb-banner__sub { font-size: 12px; line-height: 1.4; max-width: none; }
  .cb-banner__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex-direction: row; gap: 8px; }
  .cb-banner__actions .cb-btn { width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 4px 8px; white-space: normal; line-height: 1.2; }
}