/* Instal·lació PWA opt-in integrada al megamenú i al drawer mòbil. */

.nav-item--install > .nav-trigger {
  color: var(--color-detailedicon);
  font-weight: 800;
}

.nav-item--install:not(.active) > .nav-trigger:hover,
.nav-item--install > .nav-trigger[data-state="open"] {
  background: var(--color-detailedicon-solid-70);
  color: var(--card);
}

.nav:has(.nav-item--install .nav-trigger[data-state="open"]) > .nav-viewport {
  border-top-color: var(--color-detailedicon-solid-70);
}

.megamenu--install .pwa-install-content {
  min-width: min(320px, calc(100vw - 48px));
}

.megamenu--install .pwa-install-panel__title {
  font-size: var(--font-lg);
}

.pwa-install-panel__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--font-sm);
  color: var(--text-strong);
  line-height: 1.35;
}

.pwa-install-panel__hint {
  margin: 4px 0 0;
  font-size: var(--font-base);
  color: var(--muted);
  line-height: 1.35;
}

.pwa-install-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  align-items: center;
}

/* Botó «Instal·la» — MATEIX model de color que el botó «✕ Tancar»
   (.btn.btn-ghost.sidebar-close a controls.css): píndola sòlida de primari fort
   amb text card, hover a primari ple.
   És autocontingut a propòsit (no usa .btn ni .sidebar-pill-btn): així no
   l'afecten les regles genèriques de controls.css (que amb :is()+:not() tenen
   una especificitat molt alta al hover i sobreescriurien aquests colors). */
.pwa-install-panel__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctrl-min-height);
  padding: var(--ctrl-pad-y) 14px;
  border-radius: var(--ctrl-radius);
  border: 1px solid var(--ui-overlay-subtle);
  background: var(--color-primary-strong);
  color: var(--card);
  font-family: var(--font-ui);
  font-weight: var(--ctrl-font-weight);
  font-size: var(--ctrl-font-size);
  letter-spacing: var(--ctrl-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: var(--ctrl-transition);
}

@media (hover: hover) and (pointer: fine) {
  .pwa-install-panel__cta:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--card);
  }
}

.pwa-install-panel__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* Guia manual d'instal·lació a iOS: es renderitza dins el modal genèric
   (#modalBody), no en línia. Vegeu js/ui/pwa-install.js (acció
   `pwa-install-show-steps`) i partials/pwa-install-content.php. */
.pwa-install-guide__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.45;
}

.pwa-install-guide__steps {
  margin: 0;
  padding-left: 1.3rem;
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.5;
}

.pwa-install-guide__steps li + li {
  margin-top: var(--space-2);
}

.pwa-install-guide__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.3em;
  margin-inline: 2px;
  color: var(--color-detailedicon);
}

/* Variant fallback: dues branques (ja la tens / encara no) */
.pwa-install-panel__fallback-branch {
  margin-top: var(--space-2);
}

.pwa-install-panel__fallback-branch + .pwa-install-panel__fallback-branch {
  margin-top: var(--space-3);
}

.pwa-install-panel__fallback-lead {
  margin: 0;
  font-size: var(--font-base);
  color: var(--ink);
  line-height: 1.45;
}

.pwa-install-panel__fallback-branch a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mobile-nav-item--install summary.mobile-nav-link {
  color: var(--color-detailedicon);
}

.mobile-nav-item--install summary.mobile-nav-link:hover,
.mobile-nav-item--install details[open] > summary.mobile-nav-link {
  background: var(--color-detailedicon-solid-70);
  color: var(--card);
}

.mobile-nav-item--install summary.mobile-nav-link:hover svg,
.mobile-nav-item--install details[open] > summary.mobile-nav-link svg {
  stroke: var(--card);
}

.mobile-submenu--install {
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.mobile-submenu--install .pwa-install-panel__title {
  font-size: var(--font-md);
}

.mobile-submenu--install .pwa-install-panel__hint {
  font-size: var(--font-md-sm);
}

/* ⚠️ CONTRACTE ANTI-GLITCH — no el trenquis en cap refactor.
 * Les entrades d'instal·lació estan AMAGADES per defecte i es revelen NOMÉS amb
 * `html.pwa-install-ready`, classe que es decideix ABANS del primer paint
 * (script inline del <head> a index.php: iOS Safari + elegibilitat recordada a
 * localStorage; el JS diferit només la confirma amb `beforeinstallprompt`).
 * Si reveles aquestes entrades per una altra via que s'apliqui després del paint
 * (p. ex. un atribut [hidden] tret des del JS diferit, o un `display` que depengui
 * només d'un esdeveniment asíncron), tornarà el reflow d'arrancada. Guardià:
 * tests/php/pwa-shell.smoke.php. */
.nav-item--install,
.mobile-nav-item--install {
  display: none;
}

@media (min-width: 981px) {
  html.pwa-install-ready .nav-item--install {
    display: block;
  }
}

@media (max-width: 980px) {
  html.pwa-install-ready .mobile-nav-item--install {
    display: block;
  }
}