/**
 * Chip lingua porte pubbliche (famiglia PUBLIC — non app coach).
 *
 * Desktop/tablet ≥768: alto-dx fixed (inset chrome).
 * Phone ≤767: foot quiet IT|EN (stesso comportamento welcome/pricing/privacy).
 * Host fuori dallo scroll colonna su desktop.
 *
 * Login: overlay = telaio; scroll solo .gateway-login-scroll (B) + clearance
 * --t1-porte-lang-clearance* — così la chip non “viaggia” sotto il form.
 *
 * App coach (Palco/Studio): NON usare questo file per chrome fisso —
 * riusa zona A già presente (?, Zen, FS, sigillo). Vedi t1-new-page-layout.mdc.
 */

:root {
  --t1-porte-lang-clearance: 7.5rem;
  --t1-porte-lang-clearance-top: 3.25rem;
  --t1-porte-lang-clearance-left: 4.5rem;
}

.porte-lang-host {
  display: none;
}

/*
 * Gateway (non login-only): chip alto-dx solo mentre overlay auth è aperto.
 * Host è sibling fuori dallo scroll — pattern zona A Studio.
 */
body.gateway-app:not([data-t1-login-only]) #porte-lang-switch[data-t1-login-lang] {
  display: none !important;
}

.porte-lang-host--mobile {
  display: none;
}

@media (max-width: 767px) {
  .porte-lang-host--mobile {
    display: inline-flex;
    position: static;
    margin: 0;
    width: fit-content;
    max-width: 100%;
    z-index: auto;
  }

  .porte-lang-host--mobile.porte-lang,
  .porte-lang-host--mobile .porte-lang {
    display: inline-flex;
  }

  .porte-lang-host--mobile.porte-lang,
  .porte-lang-host--mobile.porte-lang {
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-family: 'Plus Jakarta Sans', var(--t1-font-ui, system-ui), sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .porte-lang-host--mobile .porte-lang__sep {
    display: inline;
    opacity: 0.35;
    padding: 0 0.05rem;
  }

  .porte-lang-host--mobile .porte-lang__btn {
    appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 48%, transparent);
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    font: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: 1.2;
  }

  .porte-lang-host--mobile .porte-lang__btn[aria-pressed='true'] {
    color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 88%, transparent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  .porte-lang-host--mobile .porte-lang__btn:hover:not([aria-pressed='true']),
  .porte-lang-host--mobile .porte-lang__btn:focus-visible:not([aria-pressed='true']) {
    color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 75%, transparent);
    outline: none;
  }

  .gateway-app .porte-lang-host--mobile .porte-lang__btn {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 52%, white);
  }

  .gateway-app .porte-lang-host--mobile .porte-lang__btn[aria-pressed='true'] {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 88%, white);
  }

  .gateway-app .porte-lang-host--mobile .porte-lang__btn:hover:not([aria-pressed='true']),
  .gateway-app .porte-lang-host--mobile .porte-lang__btn:focus-visible:not([aria-pressed='true']) {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 78%, white);
  }
}

@media (min-width: 768px) {
  .porte-lang-host:not(.porte-lang-host--mobile):not(.porte-lang-host--settings) {
    display: block;
    position: fixed;
    top: max(18px, var(--t1-chrome-inset-top, env(safe-area-inset-top, 0px)));
    right: max(18px, var(--t1-chrome-inset-right, env(safe-area-inset-right, 0px)));
    z-index: 10020;
    margin: 0;
    width: fit-content;
    max-width: calc(100vw - 2.25rem);
    pointer-events: auto;
  }

  body.gateway-app:has(#gateway-login-overlay:not([hidden]))
    #porte-lang-switch[data-t1-login-lang]:not(.porte-lang-host--mobile):not(.porte-lang-host--settings) {
    display: block !important;
  }

  /* Host = anche .porte-lang dopo mount */
  .porte-lang-host:not(.porte-lang-host--mobile):not(.porte-lang-host--settings).porte-lang,
  .porte-lang-host:not(.porte-lang-host--mobile):not(.porte-lang-host--settings) .porte-lang {
    display: inline-flex;
  }

  .porte-lang-host:not(.porte-lang-host--mobile).porte-lang,
  .porte-lang-host:not(.porte-lang-host--mobile).porte-lang {
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: fit-content;
    margin: 0;
    padding: 0.2rem;
    font-family: 'Plus Jakarta Sans', var(--t1-font-ui, system-ui), sans-serif;
    font-size: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--t1-pearl, #e8f0fa) 22%, transparent);
    background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 6%, rgba(3, 3, 5, 0.55));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__sep {
    display: none;
  }

  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn {
    appearance: none;
    border: 0;
    border-radius: 0.32rem;
    background: transparent;
    color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 42%, transparent);
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    font: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: 1.2;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
  }

  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn[aria-pressed='true'] {
    color: var(--t1-pearl, #e8f0fa);
    font-weight: 600;
    background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 14%, transparent);
  }

  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn:hover:not([aria-pressed='true']),
  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn:focus-visible:not([aria-pressed='true']) {
    color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 78%, transparent);
    background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 7%, transparent);
    outline: none;
  }

  .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--t1-pearl, #e8f0fa) 40%, transparent);
    outline-offset: 1px;
  }

  /* Login — accent ciano, stesso fixed */
  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile).porte-lang,
  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile).porte-lang {
    border-color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 28%, transparent);
    background: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 8%, rgba(3, 3, 5, 0.55));
  }

  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 48%, white);
  }

  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn[aria-pressed='true'] {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 92%, white);
    background: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 16%, transparent);
  }

  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn:hover:not([aria-pressed='true']),
  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile) .porte-lang__btn:focus-visible:not([aria-pressed='true']) {
    color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 82%, white);
    background: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 9%, transparent);
  }

  .gateway-app .porte-lang-host:not(.porte-lang-host--mobile):not(.porte-lang-host--settings) .porte-lang__btn:focus-visible {
    outline-color: color-mix(in srgb, var(--gw-cyan, #7dd3fc) 45%, transparent);
  }
}

/* Impostazioni coach — segment inline (EN-S4), stesso t1_lang delle porte */
.porte-lang-host--settings {
  display: inline-flex;
  position: static;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  z-index: auto;
}

.porte-lang-host--settings.porte-lang {
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.2rem;
  font-family: 'Plus Jakarta Sans', var(--t1-font-ui, system-ui), sans-serif;
  font-size: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--t1-pearl, #e8f0fa) 22%, transparent);
  background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 6%, rgba(3, 3, 5, 0.35));
}

.porte-lang-host--settings .porte-lang__sep {
  display: none;
}

.porte-lang-host--settings .porte-lang__btn {
  appearance: none;
  border: 0;
  border-radius: 0.32rem;
  background: transparent;
  color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 42%, transparent);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: 1.2;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.porte-lang-host--settings .porte-lang__btn[aria-pressed='true'] {
  color: var(--t1-pearl, #e8f0fa);
  font-weight: 600;
  background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 14%, transparent);
}

.porte-lang-host--settings .porte-lang__btn:hover:not([aria-pressed='true']),
.porte-lang-host--settings .porte-lang__btn:focus-visible:not([aria-pressed='true']) {
  color: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 78%, transparent);
  background: color-mix(in srgb, var(--t1-pearl, #e8f0fa) 7%, transparent);
  outline: none;
}

.porte-lang-host--settings .porte-lang__btn:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--t1-pearl, #e8f0fa) 40%, transparent);
  outline-offset: 1px;
}