/* =============================================================================
   CSS CUSTOM (prosilver_fr) - GUIDA ALLA STRUTTURA
   =============================================================================
   - Ogni sezione è dedicata a una specifica estensione o funzionalità.
   - Usa il pattern di intestazione "ESTENSIONE:" per aggiungere nuovo codice.
   - I commenti spiegano in modo sintetico il ruolo delle regole CSS.
   -----------------------------------------------------------------------------
   Indice attuale:
     1. Modifiche generali al forum – Canvas particelle & toggle
     2. Estensione: prosilver_fr – Switch tema (allineamento icone)
     3. Estensione: prosilver_fr – Link "Passa al contenuto"
     4. Estensione: hifikabin/stickybar – Allineamento con prosilver_fr
*/

/* ============================================================================
   1) MODIFICHE GENERALI – Canvas particelle & layering
   - Rende trasparente lo sfondo del documento per vedere il canvas sotto.
   - Fissa il canvas a pieno schermo dietro a tutto il contenuto del forum.
   ============================================================================ */

html,
body {
  background: transparent;
  height: 100%;
}

#particles-js {
  position: fixed;
  inset: 0;
  z-index: 1;                      /* Forum sopra (z-index maggiore su #wrap) */
  pointer-events: none;            /* Il canvas non intercetta click */
}

#wrap {
  position: relative;
  z-index: 2;
  border-color: var(--color03);
}

#particles-js canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.navbar #search-box {
    padding: 2px 0px 0px 5px !important;
}

/* ============================================================================
   1-bis) TOOLBAR – Contenitore strumenti, icone e divider
   - Allineamento verticale, spaziature orizzontali e stile del separatore.
   ============================================================================ */

.icd-tools-scope {
  --icd-toolbar-height: 2.2em;     /* Altezza coerente con le voci della navbar */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  min-height: var(--icd-toolbar-height);
}

.icd-tools-scope > .icd-switch,
.icd-tools-scope > .icd-divider,
.icd-tools-scope > a.dropdown-trigger,
.icd-tools-scope > a.switch-theme {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.icd-tools-scope > a.switch-theme {
  justify-content: center;
  min-height: var(--icd-toolbar-height);
  padding: 0 0.35rem;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  opacity: 0.95;
}

/* Hover (sole/luna) – colore coerente con il resto del forum */
.icd-tools-scope > a.switch-theme:hover {
  color: var(--color11);
  opacity: 1;
  filter: none;
  text-decoration: none;
}

/* Focus tastiera (sole/luna) – outline visibile senza cambiare colore */
.icd-tools-scope > a.switch-theme:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color11) 75%, transparent);
  outline-offset: 2px;
  opacity: 1;
  filter: none;
}

.icd-tools-scope > a.dropdown-trigger {
  line-height: 1;
  padding-top: 0;
  min-height: var(--icd-toolbar-height);
}

/* Divider verticale tra controlli */
.icd-divider {
  display: inline-flex;
  width: 1px;
  height: 1.25rem;
  background: color-mix(in srgb, currentColor 40%, transparent);
  margin: 0 0.45rem 0 0.25rem;
  align-self: center;
}

/* ============================================================================
   2) INTERRUTTORE CANVAS – Stile unificato per navbar + Sticky Bar
   - Palette in variabili; dimensioni; thumb; transizioni; stato OFF/ON.
   - Tutto in sRGB per coerenza cromatica.
   ============================================================================ */

.icd-switch {
  /* Palette attuale (richiesta) */
  --icd-switch-track-current:    var(--icd-switch-track);
  --icd-switch-track-on-current: var(--icd-switch-track-on);
  --icd-switch-thumb-current:    var(--icd-switch-thumb);
  --icd-switch-thumb-on-current: var(--icd-switch-thumb-on);

  --icd-switch-track:    color-mix(in srgb, var(--color04) 85%, transparent);
  --icd-switch-track-on: color-mix(in srgb, var(--color04) 85%, transparent);
  --icd-switch-thumb:    color-mix(in srgb, var(--color08) 100%, transparent);
  --icd-switch-thumb-on: color-mix(in srgb, var(--color01) 100%, transparent);

  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color05), transparent 25%);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color03), transparent 75%);
  background: var(--icd-switch-track-current);
  transition:
    background 0.18s ease,
    opacity 0.18s ease,
    filter 0.15s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  opacity: 1;
  top: 0;
}

/* Thumb (pallino) e sua ombra */
.icd-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--icd-switch-thumb-current);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color03), transparent 55%);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.2s ease;
}

/* Stato OFF (attenuato ma leggibile) */
.icd-switch[aria-pressed="false"] {
  opacity: 0.65;
  filter: saturate(0.6);
  --icd-switch-track-current: color-mix(in srgb, var(--icd-switch-track), transparent 12%);
  --icd-switch-thumb-current: color-mix(in srgb, var(--icd-switch-thumb), black 15%);
}

/* Stato ON – pista e thumb attivi */
.icd-switch.is-on {
  background: var(--icd-switch-track-on-current);
}
.icd-switch.is-on::after {
  transform: translateX(14px);
  background: var(--icd-switch-thumb-on-current);
}

/* Hover/focus (OFF) – priorità finale: thumb + bordo in var(--color11) */
.icd-switch[aria-pressed="false"]:hover,
.icd-switch[aria-pressed="false"]:focus-visible {
  --icd-switch-thumb-current: var(--color11);
  box-shadow: 0 0 0 1px var(--color11) inset;
  opacity: 1;
  filter: none;
}

/* Hover/focus (ON) – priorità finale: thumb + bordo in var(--color11) */
.icd-switch.is-on:hover,
.icd-switch.is-on:focus-visible {
  --icd-switch-thumb-on-current: var(--color11);
  box-shadow: 0 0 0 1px var(--color11) inset;
  opacity: 1;
  filter: none;
}

/* ============================================================================
   2-bis) SOLE/LUNA – Stile base + interazioni generiche (navbar + Sticky)
   - Hover a tinta piena; focus tastiera con outline visibile.
   ============================================================================ */

.switch-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--icd-toolbar-height, 2.2em);
  line-height: 1;
  padding-top: 0;
  opacity: 0.95;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Hover (colore pieno) */
.switch-theme:hover {
  color: var(--color11);
  opacity: 1;
  filter: none;
  text-decoration: none;
}

/* Focus tastiera (outline visibile) */
.switch-theme:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color11) 75%, transparent);
  outline-offset: 2px;
  opacity: 1;
  filter: none;
}

/* Icone allineate alla baseline */
.switch-theme .icon,
a .fa-brush,
a .fa-paint-brush,
a .fa-moon,
a .fa-sun {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ============================================================================
   3) SKIPLINK – Link "Passa al contenuto"
   - Invisibile fuori dal focus; visibile e leggibile al focus.
   ============================================================================ */

.skiplink {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 9999;
}

.skiplink a {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.skiplink a:focus,
.skiplink a:active {
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--color03);
  color: var(--color11);
  border-radius: 0.375rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color11), transparent 75%);
}

html.dark .skiplink a:focus,
html.dark .skiplink a:active {
  background: var(--color03);
  color: var(--color13);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color02), transparent 70%);
}

/* ============================================================================
   4) STICKY BAR – Allineamento con prosilver_fr
   - Colori coerenti; visibilità di switch/divider; hover dei dropdown; accessibilità.
   ============================================================================ */

#static-header {
  background: var(--color02) !important;
  color: var(--color11);
}

html.dark #static-header {
  color: var(--color13);
}

/* Switch & divider visibili su entrambe le barre (navbar + Sticky) */
#page-header > .navbar .icd-switch,
#static-header .navbar .icd-switch {
  display: inline-flex;
  visibility: visible;
  opacity: 1;
}
#page-header > .navbar .icd-divider,
#static-header .navbar .icd-divider {
  display: inline-flex;
  visibility: visible;
  opacity: 0.35;
}

/* Hover/focus dei trigger dei dropdown – stesso comportamento su entrambe */
#page-header > .navbar .dropdown-trigger:hover,
#page-header > .navbar .dropdown-trigger:focus-visible,
#static-header .navbar .dropdown-trigger:hover,
#static-header .navbar .dropdown-trigger:focus-visible {
  color: var(--color11);
  opacity: 1;
  filter: none;
  text-decoration: none;
}

/* Icone dei trigger allineate */
#static-header .dropdown-trigger .icon {
  line-height: 1;
}

/* Quick links sempre presenti quando la Sticky è visibile */
#static-header #quick-links {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Burger in Sticky: bordi coerenti con il testo */
#static-header ul.linklist li.responsive-menu a.responsive-menu-link::before {
  border-color: currentColor !important;
}

/* Accessibilità: barra nascosta = non interattiva */
#page-header > .navbar[inert],
#static-header .navbar[inert] {
  pointer-events: none;
}

/* ============================================================================
   4-bis) Hover globale per le voci dei dropdown
   - Usa la palette prosilver_fr e rispetta il raggio standard.
   ============================================================================ */
.dropdown-contents a:hover,
.dropdown-contents a:focus {
  background-color: var(--color05);
  border-radius: var(--radius, 4px);
  color: var(--color11) !important;
  text-decoration: none;
}

.caret i {
    padding-bottom: 5px;
    position: relative;
    left: 3px;
}

/* ============================================================================
   5) RESPONSIVITÀ – Compatta gli strumenti su schermi piccoli
   - Nasconde switch e divider per ridurre l’ingombro.
   ============================================================================ */

@media (max-width: 768px) {
  .icd-switch,
  .icd-divider {
    display: none !important;
  }
}

#page-header > .navbar .linklist li.rightside.responsive-search {
   transform: translateY(1px);
}

/* ============================================================================
   6) INTESTAZIONE – Dimensioni header e spaziatura collegamenti
   - Mantiene lo sfondo e il colore originali rimuovendo le proprietà superflue.
   - Imposta l’altezza richiesta dell’header.
   - Allinea i link supplementari con il bordo superiore.
   ============================================================================ */

.headerbar {
  background: var(--color03) !important;
  color: var(--color13);
  height: 190px;
}

.headerlink-wrap {
  padding-top: 0px;
}

/* ============================================================================
   7) WELCOME BACK
   ============================================================================ */

.welcbackhide {
  --wb-control-border: color-mix(in srgb, var(--color05) 55%, transparent);
  --wb-control-bg: color-mix(in srgb, var(--color13) 90%, white 10%);
  --wb-control-color: var(--color11);
  --wb-control-active-color: var(--color11);
  --wb-control-radius: 6px;
  --wb-control-focus-bg: color-mix(in srgb, var(--color05) 25%, transparent);
  --wb-control-focus-border: var(--color05);
  --wb-control-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--color05) 45%, transparent);
  --wb-icon-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color09) 30%, transparent),
    color-mix(in srgb, var(--color09) 60%, transparent)
  );
  --wb-link-bg: transparent;
  --wb-link-border: color-mix(in srgb, var(--color05) 20%, transparent);
  --wb-link-color: var(--color13);
  --wb-link-hover-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color05) 82%, transparent),
    color-mix(in srgb, var(--color05) 65%, transparent)
  );
  --wb-link-hover-border: color-mix(in srgb, var(--color05) 90%, transparent);
  --wb-link-hover-color: var(--color13);
  --wb-link-hover-shadow: 0 8px 20px -12px color-mix(in srgb, var(--color05) 65%, transparent);
  --wb-link-radius: 6px;
  --wb-transition: 0.25s ease;
}

.wb-title {
    font-size: 14px !important;
    color: var(--color13) !important;
    padding: 0px 0px 4px 0px !important;
    text-align: center;
    border-bottom: 1px solid var(--color04);
}

.welcome-avatar img {
   border: 2px solid var(--color01) !important;
}

/* WelcomeBack - rimozione spazi superflui - by JackSparrow1980*/
.welcbackhide #blockwb2 br:nth-of-type(3) {
  display: none;
}

/* WelcomeBack – stile selettore per prosilver_fr */
.welcbackhide .wb-style-switcher {
  display: inline-flex;
  align-items: stretch;
  margin: 4px 0 4px;
  overflow: hidden;
  border: 1px solid var(--wb-control-border);
  background-color: var(--wb-control-bg);
  border-radius: var(--wb-control-radius);
}

.welcbackhide .wb-style-switcher-select {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 0 25px 0 0;
  background: var(--wb-control-bg);
  color: var(--wb-control-active-color, var(--wb-control-color));
  transition: background-color var(--wb-transition),
    color var(--wb-transition),
    box-shadow var(--wb-transition);
}

.welcbackhide .wb-style-switcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
  min-width: 30px;
  background: var(--wb-icon-gradient);
  color: var(--color09);
  font-size: 16px;
  border-radius: var(--wb-control-radius) 0 0 var(--wb-control-radius);
  background-color: var(--wb-control-bg);
}

.welcbackhide .wb-style-switcher-select:focus {
  background-color: var(--wb-control-focus-bg);
  border-color: var(--wb-control-focus-border);
  color: var(--wb-control-active-color, var(--wb-control-color));
  outline: none;
  box-shadow: var(--wb-control-focus-shadow) !important;
}