/*
 * Lalegold Universal Mobile Compatibility — v1 — 16 October 2026
 *
 * Scope: The existing `.de-mobile-nav` quick navigation only, at usable mobile
 * widths. It deliberately does not change footer geometry, forms, colours,
 * viewport/safe-area behaviour, or historical max-device-width rules.
 *
 * Why this exists: Journal's phone/tablet user-agent classes differ between
 * browsers (notably Android Firefox tablet). These rules target the component,
 * rather than a device name, while preserving the approved Safari appearance.
 *
 * State contract:
 * - idle: gold outline;
 * - current route: `.is-active` (set in header.twig): filled icon;
 * - tap/keyboard activation: temporary filled icon;
 * - hover: only on a fine hover-capable primary input.
 *
 * Rollback: remove the <link id="lalegold-universal-mobile-css"> element from
 * both active header.twig files. Never reuse this version query string.
 */

@media (max-width: 1024.98px) {
  .de-mobile-nav .de-nav-link,
  .de-mobile-nav .de-nav-link > * {
    min-inline-size: 0;
  }

  /* Approved Safari idle outline, now independent of Journal device classes. */
  .de-mobile-nav .de-nav-link :is(i, .fa) {
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke: 2px currentColor !important;
    transition: -webkit-text-fill-color 120ms ease, -webkit-text-stroke-width 120ms ease !important;
  }

  /* Anmeldung / Mein Konto intentionally remains one step stronger at rest. */
  .de-mobile-nav .de-nav-link:is([href$="/login"], [href$="/account"]) :is(i, .fa) {
    -webkit-text-stroke-width: 2.6px !important;
  }

  /* Route state, actual tap, and keyboard focus are the only filled states. */
  .de-mobile-nav .de-nav-link:is(:active, :focus-visible, .is-active) :is(i, .fa) {
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke-width: 0 !important;
  }

  .de-mobile-nav .de-nav-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  /* A browser without text stroke still shows an accessible, filled icon. */
  @supports not (-webkit-text-stroke: 1px red) {
    .de-mobile-nav .de-nav-link :is(i, .fa) {
      -webkit-text-fill-color: currentColor !important;
    }
  }
}

/* Do not let the older generic hover rule stick on touch-first interfaces. */
@media (max-width: 1024.98px) and (hover: none), (max-width: 1024.98px) and (pointer: coarse) {
  .de-mobile-nav .de-nav-link:hover:not(.is-active):not(:active):not(:focus-visible) :is(i, .fa) {
    -webkit-text-fill-color: transparent !important;
    -webkit-text-stroke-width: 2px !important;
  }

  .de-mobile-nav .de-nav-link:is([href$="/login"], [href$="/account"]):hover:not(.is-active):not(:active):not(:focus-visible) :is(i, .fa) {
    -webkit-text-stroke-width: 2.6px !important;
  }
}

/* Fine-pointer hover remains an intentional preview only where hover is real. */
@media (max-width: 1024.98px) and (hover: hover) and (pointer: fine) {
  .de-mobile-nav .de-nav-link:hover :is(i, .fa) {
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke-width: 0 !important;
  }
}