/* ==========================================================================
   MOBILSISTEMI — a11y.css
   Accessibility overrides. Loaded LAST on every page, deliberately.

   These rules have to beat component rules that live in components.css,
   layout.css and pages.css. Winning that by inflating selector specificity
   would scatter the reasoning across four files and make each rule look
   arbitrary where it sits. Keeping them together in the last stylesheet says
   what they are: the accessibility floor, applied after the design.
   ========================================================================== */

/* ==========================================================================
   TOUCH TARGETS
   The brief sets 44x44 on touch, above WCAG 2.2 SC 2.5.8's 24x24 minimum.

   Matched on coarse pointers and on narrow viewports: the pointer query is
   the one that is true on a real phone, and the width query is the one a
   desktop test harness can reproduce. Both are correct — a 390px-wide window
   on a laptop benefits from the same targets.

   Links running inside a sentence are deliberately excluded. SC 2.5.8 exempts
   them, and padding them out would wreck the leading of the paragraph they
   sit in. Only a link that stands on its own gets the enlarged target.
   ========================================================================== */

@media (hover: none), (pointer: coarse), (max-width: 860px){

  /* .link's content box is only ~13px tall (12.5px mono at line-height 1),
     so it needs 31px of padding to clear 44. */
  .link{
    padding-block: 16px 15px;
    padding-bottom: 15px;   /* beats .link's own 4px in components.css */
  }

  /* The checkbox itself is smaller than 44px, but its <label> wraps it and is
     the real activation area. Bringing the box to 26px still clears WCAG
     2.2's own 24x24 minimum for the control in isolation. */
  .check{ grid-template-columns: 26px 1fr; align-items: center; min-height: 44px; }
  .check input{ width: 26px; height: 26px; }

  .site-nav__brand{ display: flex; align-items: center; min-height: 44px; }

  .breadcrumb a,
  .footer-col a,
  .site-footer__legal a,
  .menu__foot a,
  .contact-block__title + p a,
  p > a.link-text:only-child{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .filter{ min-height: 44px; }

  .skip-link{ padding-block: var(--s-4); }

  /* Two adjacent inline links (Instagram · LinkedIn) must not overlap once
     they are 44px tall. */
  .site-footer__legal span{ display: inline-flex; align-items: center; gap: var(--s-2); }
}

/* ==========================================================================
   FORCED COLORS (Windows high contrast)
   Backgrounds and clip-paths are stripped by the OS, so anything that carried
   meaning through colour alone needs a border to survive.
   ========================================================================== */

@media (forced-colors: active){
  .btn{ border: 2px solid ButtonText; }
  .frame, .feature__figure, .model-cta{ border: 1px solid CanvasText; }
  .rule, .card__rule, .stat__rule, .progress-line__fill{
    forced-color-adjust: none;
    background: Highlight;
  }
  .filter[aria-pressed="true"]{ border: 2px solid Highlight; }
  .cursor, .cursor-media{ display: none !important; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

/* A buyer will print a model page and take it into a meeting. The spec table
   is the reason they printed it, so it must survive the page break intact. */
@media print{
  .site-nav, .menu, .cursor, .cursor-media, .preloader,
  .scroll-progress, .mobile-bar, .filters,
  .assistant, .to-top, .hero-controls, .hero__rail,
  .skip-link{ display: none !important; }

  /* No grain, no vignette, no image grade on paper. */
  body::after, .frame--16x9::before, .hero__media::before{ display: none !important; }
  img{ filter: none !important; }

  @page{ margin: 16mm 14mm; }
  html{ font-size: 11pt; }

  /* Keep a specification together. A table split across a page break is the
     one thing that makes a printout useless. */
  .spec-list, .meta-row, table, .model-cta,
  figure, .card, .model-card{ break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3{ break-after: avoid; page-break-after: avoid; }

  /* The hero is a full-screen image; on paper it is a wasted first page. */
  .hero{ min-height: auto !important; padding-block: 0 var(--s-5) !important; }
  .hero__media{ position: static; height: 60mm; }

  body{ background: #fff; color: #000; }
  .surface--dark, .factory, .site-footer{ background: #fff !important; color: #000 !important; }

  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  [data-morph]{ clip-path: none !important; transform: none !important; }
  .word{ color: #000 !important; }
  .polyfield{ display: none; }

  /* A printed page cannot be clicked, so the destination has to be readable. */
  main a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .8em; }
  main a[href^="tel:"]::after{ content: " (" attr(href) ")"; font-size: .8em; }
  .faq__a[hidden]{ display: block !important; }
}