/* Il Filo PWA — riga categorie, pannello personalizzazione, pulsantiera in basso.
   Attivo solo quando il sito gira come app installata: app-chrome.js si ferma
   subito se isStandalone() e' falso, quindi queste regole non hanno mai
   effetto per i visitatori normali da browser. */

html.ilfilo-pwa-standalone body {
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* L'header reale del tema (bianco, desktop o mobile) viene sostituito dalla
   nuova app-bar blu qui sotto, fedele al mockup approvato. Hamburger, ricerca
   e toggle tema restano cliccabili via JS anche da nascosti. */
html.ilfilo-pwa-standalone .smart-head {
  display: none !important;
}

.ilfilo-app-bar {
  background: linear-gradient(90deg, #073163 0%, #0064e8 100%);
  padding: 14px 16px 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.site-s-dark .ilfilo-app-bar {
  background: linear-gradient(90deg, #051f40 0%, #0054c4 100%);
}

.ilfilo-app-bar-logo {
  height: 42px;
  width: auto;
  display: block;
}

.ilfilo-app-bar-search-btn,
.ilfilo-app-bar-gear-btn {
  /* Il tema applica a TUTTI i <button> del sito un padding e un'altezza fissi
     via variabili CSS globali: senza azzerarli esplicitamente qui, il nostro
     bottone tondo da 34px diventa ovale (il padding orizzontale del tema si
     somma alla larghezza dichiarata). */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(245,247,251,0.3);
  background: rgba(245,247,251,0.1);
  color: #f5f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.ilfilo-app-bar-search-btn { left: 16px; }
.ilfilo-app-bar-gear-btn { right: 16px; }
.ilfilo-app-bar-search-btn svg,
.ilfilo-app-bar-gear-btn svg { width: 17px; height: 17px; }

.ilfilo-app-catrow-wrap {
  background: #ffffff;
  border-bottom: 1px solid #e2e6ec;
  position: relative;
  z-index: 3;
}
html.site-s-dark .ilfilo-app-catrow-wrap {
  background: #171b22;
  border-bottom-color: #2a2f3a;
}

.ilfilo-app-catrow {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ilfilo-app-catrow::-webkit-scrollbar { display: none; }

.ilfilo-app-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 100px;
  background: #eef1f6;
  color: #5b6472;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
html.site-s-dark .ilfilo-app-chip {
  background: #232833;
  color: #a9b2c0;
}
.ilfilo-app-chip.is-current {
  background: #e01111;
  color: #fff;
}

/* --- pannello di personalizzazione --- */

.ilfilo-app-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20,10,5,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 99996;
}
.ilfilo-app-scrim.is-open { opacity: 1; pointer-events: auto; }

.ilfilo-app-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(.32,.72,0,1);
  z-index: 99997;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: #14181f;
}
html.site-s-dark .ilfilo-app-sheet { background: #171b22; color: #eef1f6; }
.ilfilo-app-sheet.is-open { transform: translateY(0); }

.ilfilo-app-sheet-handle {
  width: 36px; height: 4px; border-radius: 4px;
  background: #e2e6ec; margin: 10px auto 4px; flex-shrink: 0;
}
html.site-s-dark .ilfilo-app-sheet-handle { background: #2a2f3a; }

.ilfilo-app-sheet-head { padding: 8px 20px 12px; flex-shrink: 0; border-bottom: 1px solid #e2e6ec; }
html.site-s-dark .ilfilo-app-sheet-head { border-bottom-color: #2a2f3a; }
.ilfilo-app-sheet-head h2 { font-size: 17px; margin: 0 0 3px; }
.ilfilo-app-sheet-head p { margin: 0; font-size: 12.5px; color: #5b6472; line-height: 1.4; }
html.site-s-dark .ilfilo-app-sheet-head p { color: #a9b2c0; }

.ilfilo-app-theme-row { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2e6ec; flex-shrink: 0; }
html.site-s-dark .ilfilo-app-theme-row { border-bottom-color: #2a2f3a; }
.ilfilo-app-theme-row-label { font-size: 13px; font-weight: 600; color: #171b22; flex-shrink: 0; }
html.site-s-dark .ilfilo-app-theme-row-label { color: #f2f4f7; }
.ilfilo-app-theme-choices { display: flex; background: #e2e6ec; border-radius: 100px; padding: 3px; gap: 2px; }
html.site-s-dark .ilfilo-app-theme-choices { background: #2a2f3a; }
.ilfilo-app-theme-choice {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: auto;
  text-transform: none;
  letter-spacing: normal;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: #5b6472;
  padding: 6px 11px; border-radius: 100px; white-space: nowrap;
}
html.site-s-dark .ilfilo-app-theme-choice { color: #a9b2c0; }
.ilfilo-app-theme-choice.is-selected { background: #ffffff; color: #171b22; }
html.site-s-dark .ilfilo-app-theme-choice.is-selected { background: #171b22; color: #f2f4f7; }

.ilfilo-app-text-row { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2e6ec; flex-shrink: 0; }
html.site-s-dark .ilfilo-app-text-row { border-bottom-color: #2a2f3a; }
.ilfilo-app-text-row-label { font-size: 13px; font-weight: 600; color: #171b22; flex-shrink: 0; }
html.site-s-dark .ilfilo-app-text-row-label { color: #f2f4f7; }
.ilfilo-app-text-choices { display: flex; background: #e2e6ec; border-radius: 100px; padding: 3px; gap: 2px; }
html.site-s-dark .ilfilo-app-text-choices { background: #2a2f3a; }
.ilfilo-app-text-choice {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: auto;
  text-transform: none;
  letter-spacing: normal;
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #5b6472;
  padding: 6px 13px; border-radius: 100px; white-space: nowrap;
}
html.site-s-dark .ilfilo-app-text-choice { color: #a9b2c0; }
.ilfilo-app-text-choice.is-selected { background: #ffffff; color: #171b22; }
html.site-s-dark .ilfilo-app-text-choice.is-selected { background: #171b22; color: #f2f4f7; }

/* Dimensione testo A-/A/A+: si aggancia alle stesse variabili/regole con cui
   il tema dimensiona titolo e corpo articolo (vedi commento in app-chrome.js
   per come sono state trovate), solo moltiplicate. --post-content-size
   alimenta gia' da solo .post-content/.entry-content (desktop e mobile,
   stessa variabile in entrambi i punti nel CSS del tema): basta
   ridefinirla qui, non serve toccare i paragrafi uno per uno. Il titolo
   (h1, regola del tema "font-size: 1.846em") non passa da una variabile,
   quindi va sovrascritto direttamente con lo stesso moltiplicatore. */
html.ilfilo-text-sm .post-title { font-size: calc(1.846em * 0.85) !important; }
html.ilfilo-text-lg .post-title { font-size: calc(1.846em * 1.3) !important; }

/* Puntare alla variabile --post-content-size (anche sullo stesso elemento
   ".entry-content") resta fragile: il tema la fa passare da una catena di
   var() innestate (--post-content-size -> --single-content-size -> nella
   regola mobile anche dentro un calc(max(...))) e non e' garantito che ogni
   punto della catena recepisca la riassegnazione allo stesso modo. Molto
   piu' robusto sovrascrivere direttamente la proprieta' font-size finale,
   che vince su qualunque cosa la produca a monte. */
html.ilfilo-text-sm .post-content { font-size: calc(1.186rem * 0.85) !important; }
html.ilfilo-text-lg .post-content { font-size: calc(1.186rem * 1.3) !important; }

.ilfilo-app-sheet-list { overflow-y: auto; padding: 4px 20px; flex: 1; -webkit-overflow-scrolling: touch; }

.ilfilo-app-sheet-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #e2e6ec;
  background: #ffffff; touch-action: pan-y;
}
html.site-s-dark .ilfilo-app-sheet-row { background: #171b22; border-bottom-color: #2a2f3a; }
.ilfilo-app-sheet-row:last-child { border-bottom: none; }
.ilfilo-app-sheet-row.is-dragging {
  position: relative; z-index: 2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  border-radius: 10px; background: #eef1f6;
}
html.site-s-dark .ilfilo-app-sheet-row.is-dragging { background: #232833; }
.ilfilo-app-sheet-row.drop-before { box-shadow: inset 0 2px 0 #e01111; }
.ilfilo-app-sheet-row.drop-after { box-shadow: inset 0 -2px 0 #e01111; }

.ilfilo-app-sheet-row-label { flex: 1; font-size: 14.5px; font-weight: 600; transition: opacity 0.15s ease; }
.ilfilo-app-sheet-row:not(.is-active) .ilfilo-app-sheet-row-label { opacity: 0.45; }

.ilfilo-app-drag-handle {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #5b6472; cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
html.site-s-dark .ilfilo-app-drag-handle { color: #a9b2c0; }
.ilfilo-app-drag-handle:active { cursor: grabbing; }
.ilfilo-app-drag-handle svg { width: 18px; height: 18px; pointer-events: none; }

.ilfilo-app-switch {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  padding: 0;
  width: 42px; height: 25px; border-radius: 100px;
  background: #e2e6ec; position: relative; border: none;
  cursor: pointer; flex-shrink: 0; transition: background 0.18s ease;
}
html.site-s-dark .ilfilo-app-switch { background: #2a2f3a; }
.ilfilo-app-switch.is-on { background: #e01111; }
.ilfilo-app-switch::after {
  content: "";
  position: absolute; top: 2.5px; left: 2.5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.18s ease;
}
.ilfilo-app-switch.is-on::after { transform: translateX(17px); }

.ilfilo-app-sheet-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; border-top: 1px solid #e2e6ec; }
html.site-s-dark .ilfilo-app-sheet-foot { border-top-color: #2a2f3a; }
.ilfilo-app-save-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: auto;
  width: 100%; background: #e01111; color: #fff; border: none;
  border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.ilfilo-app-save-note { text-align: center; font-size: 11px; color: #5b6472; margin: 8px 0 0; min-height: 14px; }
html.site-s-dark .ilfilo-app-save-note { color: #a9b2c0; }

/* --- pulsantiera in basso --- */

.ilfilo-app-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* L'altezza deve INCLUDERE la safe-area in aggiunta ai 62px di contenuto,
     non condividerla: con height fissa a 62px e basta, il padding extra per
     l'home indicator (env(safe-area-inset-bottom), ~34px sugli iPhone con
     notch/Dynamic Island) mangiava lo spazio utile, schiacciando icona ed
     etichetta verso l'alto della barra. */
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  /* Bug noto WebKit/iOS: un elemento position:fixed puo' "perdere il
     sincrono" tra dove viene disegnato e dove riceve davvero il tocco subito
     dopo uno scroll, facendo arrivare il tap al contenuto reale sottostante
     invece che al bottone. Forzare un livello di compositing separato
     (promozione GPU) tiene la pulsantiera sincronizzata durante lo scroll. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  display: flex;
  border-top: 1px solid #e2e6ec;
  background: #ffffff;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  z-index: 99995;
}
html.site-s-dark .ilfilo-app-tabbar { background: #171b22; border-top-color: #2a2f3a; }

.ilfilo-app-tab {
  /* Il tema forza tutti i <button> del sito a maiuscolo e a un'altezza fissa
     (var(--btn-height), troppo bassa per icona+etichetta impilate): li
     azzeriamo qui, altrimenti il testo diventa "HOME" invece di "Home" e
     l'icona sopra la scritta viene schiacciata/tagliata. */
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: auto;
  text-transform: none;
  letter-spacing: normal;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #5b6472; font-size: 10.5px; font-weight: 600;
  padding: 4px 0; cursor: pointer; font-family: inherit; text-decoration: none;
}
html.site-s-dark .ilfilo-app-tab { color: #a9b2c0; }
/* flex-shrink:0 necessario: dentro un flex-container in colonna (icona sopra
   etichetta), un <svg> senza attributi width/height propri viene trattato
   come "replaced element" con min-height:auto e puo' collassare a 0 invece
   di restare alla dimensione dichiarata. */
.ilfilo-app-tab svg { width: 21px; height: 21px; flex-shrink: 0; }
.ilfilo-app-tab.is-active { color: #e01111; }

@media (prefers-reduced-motion: reduce) {
  .ilfilo-app-sheet, .ilfilo-app-scrim, .ilfilo-app-switch, .ilfilo-app-switch::after { transition: none; }
}