/* Testata e menu delle lingue.
   La testata e' appiccicata in alto; quando la pagina scorre v2.js aggiunge .is-stuck (si compatta e prende fondo).
   .top.over: sopra una foto parte trasparente; senza .over parte gia' col fondo bianco.
   .top.static: non appiccicata (home). */

@layer components {
  .top {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 16px;
    background: var(--ground);
    transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    &.over { padding-block: 20px; background: transparent; }

    /* .static: non resta in alto mentre si scorre (home, decisione del 03/11/2026) */
    &.static { position: relative; }

    &.is-stuck {
      padding-block: 10px;
      background: color-mix(in srgb, var(--ground) 90%, transparent);
      -webkit-backdrop-filter: saturate(1.4) blur(14px);
      backdrop-filter: saturate(1.4) blur(14px);
      box-shadow: var(--shadow-stuck);
    }

    & .logo { flex: none; }
    & .logo img { width: auto; height: 38px; transition: height var(--dur) var(--ease); }
    &.is-stuck .logo img { height: 32px; }

    /* Sezioni principali: pillola con la voce corrente in bianco */
    & nav ul {
      display: flex;
      gap: 6px;
      margin: 0;
      padding: 4px;
      list-style: none;
      background: var(--tint);
      border-radius: var(--r-pill);
    }
    & nav a {
      display: block;
      padding: 8px 16px;
      border-radius: var(--r-pill);
      font-weight: 500;
      text-decoration: none;
      transition: background-color var(--dur-fast) var(--ease);
    }
    & nav a:hover { background: var(--tint-2); }
    & nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }

    & .account { display: flex; align-items: center; gap: 20px; }
    & .account > a:not(.btn) { font-weight: 500; text-decoration: none; }
    & .account > a:not(.btn):hover { color: var(--accent); }
  }

  /* Utente collegato: il nome con i tre puntini apre Profilo ed Esci (dropdown.css, v2.js) */
  .account-btn {
    width: auto;
    gap: 6px;
    padding: 0 8px 0 14px;
    background: transparent;
    color: inherit;
    font-size: inherit;
    white-space: nowrap;

    &::after { display: none; }
    &:hover, &[aria-expanded="true"] { background: var(--tint); box-shadow: none; }
  }
  .account-dots { flex: none; width: 18px; height: 18px; fill: currentColor; }

  @media (max-width: 1080px) {
    .top nav { display: none; }
  }
  @media (max-width: 640px) {
    .top .logo img { height: 30px; }
    .top .account { gap: 10px; }
    .top .account > a:not(.btn) { display: none; }
    .account-name { display: none; } /* su telefono non c'e' posto: restano i puntini */
    .account-btn { padding: 0 6px; }
    .top .account .btn { min-height: var(--control-h-sm); padding: 0 16px; }
  }

  /* ---------- Lingue ---------- */
  .lang { position: relative; }

  .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--control-h-sm);
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--tint);
    color: var(--ink);
    font: 600 var(--step-small) var(--font);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);

    &:hover { background: var(--tint-2); }
    & .icon { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .25s var(--ease); }
  }
  .lang.open .lang-btn { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .lang.open .lang-btn .icon { transform: rotate(180deg); }

  .lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: var(--z-menu);
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ground);
    border-radius: 16px;
    box-shadow: var(--shadow-menu);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity var(--dur-fast) var(--ease), transform .25s var(--ease), visibility 0s .25s;

    & a {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-decoration: none;
      padding: 10px 12px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink);
      font: 500 var(--step-small) var(--font);
      text-align: left;
      cursor: pointer;
      transition: background-color .15s var(--ease);
    }
    & a:is(:hover, :focus-visible) { background: var(--tint); outline: none; }
    & a[aria-current="true"] { background: var(--select-soft); font-weight: 600; }
    & a[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--select); }
  }
  .lang.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-fast) var(--ease), transform .25s var(--ease), visibility 0s;
  }

  /* Bandierine disegnate in CSS: nessuna immagine da caricare */
  .flag {
    flex: none;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
    background-size: cover;
  }
  .f-it { background: linear-gradient(90deg, #009246 33.4%, #FFFFFF 0 66.6%, #CE2B37 0); }
  .f-en { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23012169%22/%3E%3Cpath%20d%3D%22M0%200L60%2030M60%200L0%2030%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22/%3E%3Cpath%20d%3D%22M0%200L60%2030M60%200L0%2030%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%222%22/%3E%3Cpath%20d%3D%22M30%200V30M0%2015H60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22/%3E%3Cpath%20d%3D%22M30%200V30M0%2015H60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22/%3E%3C/svg%3E") center / 100% 100%; }
  .f-de { background: linear-gradient(#000000 33.4%, #DD0000 0 66.6%, #FFCE00 0); }
  .f-fr { background: linear-gradient(90deg, #0055A4 33.4%, #FFFFFF 0 66.6%, #EF4135 0); }
  .f-es { background: linear-gradient(#AA151B 25%, #F1BF00 0 75%, #AA151B 0); }
  .f-ru { background: linear-gradient(#FFFFFF 33.4%, #0039A6 0 66.6%, #D52B1E 0); }
  .f-pt { background: linear-gradient(90deg, #046A38 40%, #DA291C 0); }

  @media (prefers-reduced-motion: no-preference) {
    .lang.open .lang-menu li { animation: rise .3s var(--ease) both; }
    .lang.open .lang-menu li:nth-child(2) { animation-delay: .02s; }
    .lang.open .lang-menu li:nth-child(3) { animation-delay: .04s; }
    .lang.open .lang-menu li:nth-child(4) { animation-delay: .06s; }
    .lang.open .lang-menu li:nth-child(5) { animation-delay: .08s; }
    .lang.open .lang-menu li:nth-child(6) { animation-delay: .1s; }
    .lang.open .lang-menu li:nth-child(7) { animation-delay: .12s; }
  }
}