/* Original */
/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); */

/* Combinazione 25 */
/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */

/* Combinazione 7 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* Brand primario — slate navy */
  --navy:          #1B3A5C;
  --navy-mid:      #2D5278;
  --navy-light:    #4A7099;
  --navy-tint:     #EEF3F8;
  --navy-50:       #F4F8FB;

  /* Accento — coral (ex arancione, usato solo per CTA/highlight) */
  --orange:        #E55C2B;
  --orange-dark:   #C94E22;
  --orange-light:  #FDE8DC;
  --orange-100:    #F9CDB8;

  /* Cyan rimosso come colore primario — mantenuto per badge tecnici */
  --cyan:          #0284C7;
  --cyan-dark:     #0369A1;
  --cyan-light:    #E0F2FE;

  /* Neutri caldi */
  --dark:          #111827;
  --dark-2:        #1F2937;
  --slate:         #4B5563;
  --muted:         #6B7280;
  --border:        #E5E9EE;
  --light:         #F8F7F5;
  --warm:          #F5F0EB;
  --white:         #FFFFFF;

  /* Semantic */
  --green:         #10B981;
  --green-bg:      #F0FDF4;
  --yellow:        #F59E0B;
  --red:           #EF4444;
  --blue:          #3B82F6;
  --blue-bg:       #EFF6FF;

  /* Radius / shadow */
  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     22px;
  --radius-pill:   999px;
  --shadow-sm:     0 1px 2px rgba(27,58,92,.04), 0 2px 8px rgba(27,58,92,.04);
  --shadow:        0 2px 6px rgba(27,58,92,.05), 0 12px 28px rgba(27,58,92,.08);
  --shadow-md:     0 4px 16px rgba(27,58,92,.08);
  --shadow-lg:     0 8px 18px rgba(27,58,92,.07), 0 24px 60px rgba(27,58,92,.12);
  --transition:    all .2s ease;

  /* Typography */
  /* --font-title:    "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:     "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; */

  /* comb 25 */
  /* --font-title:    "Playfair Display", serif;
  --font-body:     "Lato", sans-serif;
  --font-mono:     "Space Mono", monospace; */

  /* comb 7 */
  --font-title:    "Inter", sans-serif;
  --font-body:     "Lato", sans-serif;
  --font-mono:     "Space Mono", monospace;  

  /* Sovrascrive la variabile Bootstrap che imposta il body a #fff */
  --bs-body-bg:    #F8F7F5;
  --bs-body-bg-rgb: 248, 247, 245;
}

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-2);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
p { margin-bottom: 1rem; }
::selection { background: var(--orange-100); color: var(--dark); }

/* Fix overflow orizzontale su mobile: .g-5 imposta --bs-gutter-x a 3rem, quindi
   .row applica un margine negativo di -1.5rem (24px) per lato; .container però
   non eredita quella variabile (le custom property non risalgono al genitore)
   e mantiene il proprio padding di 12px per lato (--bs-gutter-x globale 1.5rem).
   Sotto i 576px .container è largo il 100% del viewport, senza margine laterale
   che assorba la differenza: i 12px di sbordo per lato diventano scroll
   orizzontale reale. Sotto il breakpoint md riportiamo .g-5 al gutter di
   default di Bootstrap (1.5rem), che coincide esattamente col padding di
   .container — sbordo azzerato. Sopra md il container ha margine laterale
   sufficiente ad assorbire lo sbordo, quindi il gutter largo resta invariato.
   Tocca solo gutter-x: gutter-y (spaziatura verticale tra colonne impilate)
   non è la causa e non va cambiato. */
@media (max-width: 767.98px) {
  .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ── Skip link (a11y) ─────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Utilità brand ────────────────────────────────────── */
.text-orange   { color: var(--orange) !important; }
.text-cyan     { color: var(--cyan)   !important; }
.text-navy     { color: var(--navy)   !important; }
.bg-light-pw   { background: var(--light); }
.bg-warm-pw    { background: var(--warm); }
.bg-dark-pw    { background: var(--navy); color: var(--white); }
.font-mono     { font-family: var(--font-mono); }
.font-title    { font-family: var(--font-title); }

.section-label, .pw-eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-light);
  display: block;
  margin-bottom: .875rem;
}
.section-label.cyan, .pw-eyebrow.cyan { color: var(--cyan); }
.section-label.accent, .pw-eyebrow.accent { color: var(--orange); }

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.section-desc {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════
   BOTTONI
══════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font-title);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: .65rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  text-decoration: none;
}
/* Primario — coral, solo CTA principali */
.btn-primary {
  background: var(--orange);
  color: var(--white) !important;
  border-color: var(--orange);
  box-shadow: 0 6px 14px rgba(229,92,43,.25);
}
.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(229,92,43,.32);
}
/* Outline — bordo navy per CTA secondarie */
.btn-outline {
  background: transparent;
  color: var(--navy) !important;
  border-color: var(--navy);
}
.btn-outline:hover { background: var(--navy-tint); border-color: var(--navy-mid); }
/* Bottone navy pieno */
.btn-dark {
  background: var(--navy);
  color: var(--white) !important;
  border-color: var(--navy);
}
.btn-dark:hover { background: var(--navy-mid); transform: translateY(-1px); }
/* Cyan (mantenuto per contesti tecnici specifici) */
.btn-cyan {
  background: var(--cyan);
  color: var(--white) !important;
  border-color: var(--cyan);
  box-shadow: 0 6px 14px rgba(2,132,199,.22);
}
.btn-cyan:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); }
/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--slate) !important;
  border: none;
  padding: .4rem .75rem;
}
.btn-ghost:hover { color: var(--navy) !important; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: .45rem .9rem; font-size: .875rem; }

/* Azione icon-only in tabella (es. Modifica/Elimina in /admin/pillole):
   il padding di .btn-sm è tarato per un bottone con testo, su un'icona
   sola lascia troppo respiro — vedi anche .table-actions-tight. */
.btn-icon { padding: .4rem .55rem; line-height: 1; }

/* Bottone "Applica" con modifiche non ancora salvate (vedi admin.js) */
.btn-pending {
  background: var(--orange-light) !important;
  border-color: var(--orange) !important;
  color: var(--orange-dark) !important;
  animation: pw-pending-pulse 1.6s ease-in-out infinite;
}
.btn-pending::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: .4rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
@keyframes pw-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,92,43,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(229,92,43,0); }
}

/* ══════════════════════════════════════════════════════
   BADGE
══════════════════════════════════════════════════════ */
.badge-pw {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: var(--radius-pill);
  padding: .25rem .625rem;
  line-height: 1.4;
  background: var(--navy-tint);
  color: var(--navy);
}
.badge-mono { font-family: var(--font-mono); font-size: .7rem; }
/* Categoria tech — navy tint */
.badge-orange      { background: var(--navy-tint);  color: var(--navy); }
.badge-cyan        { background: var(--cyan-light);  color: var(--cyan-dark); }
.badge-css         { background: var(--navy-tint);   color: var(--navy); }
.badge-javascript  { background: var(--cyan-light);  color: var(--cyan-dark); }
.badge-php         { background: #EDE9FE;             color: #5B21B6; }
.badge-wordpress   { background: var(--navy-tint);   color: var(--navy); }
.badge-python      { background: #DCFCE7;             color: #166534; }
.badge-html        { background: var(--orange-light); color: var(--orange-dark); }
.badge-security,
.badge-cybersecurity { background: var(--navy);      color: var(--white); }
.badge-cat         { background: var(--light);        color: var(--slate); }
.badge-beginner    { background: #DCFCE7;             color: #15803D; }
.badge-intermediate{ background: #FEF3C7;             color: #92400E; }
.badge-advanced    { background: #FEE2E2;             color: #991B1B; }
.badge-nuovo       { background: var(--orange-light); color: var(--orange-dark); }
.badge-letto       { background: #F1F5F9;             color: #475569; }
.badge-risposto    { background: #DCFCE7;             color: #15803D; }
.badge-archiviato  { background: #F1F5F9;             color: #94A3B8; }

.lvl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lvl-dot.beginner     { background: var(--green); }
.lvl-dot.intermediate { background: var(--yellow); }
.lvl-dot.advanced     { background: var(--red); }

/* ══════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════ */
.pw-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--dark) !important;
  text-decoration: none;
  gap: 0;
  line-height: 1;
}
.pw-logo .logo-pill {
  background: var(--orange);
  color: var(--white);
  padding: 4px 18px 4px 14px;
  border-radius: 999px 22px 22px 999px;
  letter-spacing: -.01em;
  font-weight: 600;
}
.pw-logo .logo-web {
  color: var(--navy);
  padding: 4px 0 4px 8px;
  font-weight: 500;
}
.pw-footer .pw-logo { color: var(--white) !important; filter: brightness(1.1); }
/* Logo versione navbar (su sfondo navy) */
.pw-navbar .pw-logo { color: var(--white) !important; }
.pw-navbar .pw-logo .logo-web { color: rgba(255,255,255,.75); }

/* ══════════════════════════════════════════════════════
   NAVBAR — sfondo navy
   Collapse, toggler e show/hide sono di Bootstrap
   (navbar-expand-lg). Attenzione alla fascia 992–1199px:
   la navbar è già orizzontale ma il .container è largo
   solo 960px — logo + 6 voci + 3 CTA ci stanno appena
   (iPad in orizzontale: 1133–1194px). Vedi le regole
   compatte più sotto prima di aggiungere voci o bottoni.
══════════════════════════════════════════════════════ */
.pw-navbar {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-mid);
  /* sticky già gestito da Bootstrap con .sticky-top se serve,
     oppure manteniamo position sticky qui */
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Bootstrap aggiunge .5rem di padding laterale a ogni .nav-link
     (.navbar-expand-lg .navbar-nav .nav-link, più specifica del nostro
     .pw-nav-links .nav-link): la spaziatura tra le voci è già data dal
     margin-left più sotto, quindi qui lo azzeriamo. Così anche la
     sottolineatura della voce attiva è larga quanto il testo. */
  --bs-navbar-nav-link-padding-x: 0;
}

/* Logo: altezza fissa, larghezza automatica — mai schiacciato.
   Il reset globale img { max-width: 100% } e il flex-shrink di default
   del .navbar-brand, quando la riga è stretta, lo comprimevano in
   larghezza mantenendo l'altezza (logo deformato). */
.pw-navbar .navbar-brand { flex-shrink: 0; }
.nav-logo {
  height: 48px;
  width: auto;
  max-width: none;
  display: block;
}

/* Hamburger Bootstrap: solo le 3 linee bianche, nessun bordo */
.pw-navbar .navbar-toggler {
  border: 0;
  padding: .375rem .625rem;
}
.pw-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.pw-navbar .navbar-toggler:focus {
  box-shadow: none;
}

/* Accedi / Registrati nella navbar.
   Usano .btn-outline-secondary di Bootstrap, il cui grigio di default
   (#6c757d) sul navy della navbar dà un contrasto di circa 3.6:1 — sotto
   il minimo WCAG AA di 4.5:1, tanto che i due link risultavano quasi
   invisibili. Qui vengono riportati al bianco (contrasto ~11:1), che è
   anche il colore già usato dalle altre voci di menu. */
.pw-navbar .btn-outline-secondary {
  color: var(--white);
  border-color: rgba(255,255,255,.55);
  background: transparent;
}
.pw-navbar .btn-outline-secondary:hover,
.pw-navbar .btn-outline-secondary:focus-visible {
  color: var(--navy);
  background: var(--white);
  border-color: var(--white);
}
.pw-navbar .btn-outline-secondary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Voci di menu desktop */
.pw-nav-links .nav-link {
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  padding: .5rem 0;
  position: relative;
  transition: color .15s;
  white-space: nowrap; /* "Chi sono" non deve andare a capo */
}
.pw-nav-links .nav-link:hover,
.pw-nav-links .nav-link:focus { color: var(--white); }
.pw-nav-links .nav-link.active {
  color: var(--white);
  font-weight: 600;
}
/* Sottolineatura arancione voce attiva (solo su desktop) */
@media (min-width: 992px) {
  .pw-nav-links .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
  }
}

/* Spaziatura voci su desktop */
@media (min-width: 992px) {
  .pw-nav-links { gap: 0; }
  .pw-nav-links .nav-item + .nav-item { margin-left: 1.5rem; }
}

/* Fascia 992–1199px (iPad in orizzontale, notebook con zoom di sistema,
   finestre non massimizzate): container da 960px, quindi voci e CTA
   più compatte per stare su una riga. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pw-nav-links .nav-item + .nav-item { margin-left: 1rem; }
  .pw-navbar .navbar-brand { margin-right: .75rem; }
  .pw-nav-cta { gap: .5rem !important; }
  .pw-nav-cta .btn-sm { padding: .45rem .75rem; }
}

/* Nickname nel bottone del menu utente: fino a 30 caratteri, troncato
   con i puntini per non allargare la navbar (a qualunque larghezza). */
.pw-nav-nickname {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Menu espanso su mobile: sfondo navy, separatori sottili */
@media (max-width: 991.98px) {
  .pw-navbar .navbar-collapse {
    border-top: 1px solid var(--navy-mid);
    margin-top: .5rem;
    padding: .75rem 0;
  }
  .pw-nav-links .nav-item {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .pw-nav-links .nav-item:last-child { border-bottom: 0; }
  .pw-nav-links .nav-link {
    padding: .75rem 0;
  }

  /* CTA (Accedi/Registrati/Richiedi assistenza): "Richiedi assistenza"
     va a capo per evitare lo scroll orizzontale */
  .pw-nav-cta {
    flex-wrap: wrap;
  }
  .pw-nav-cta a[href="/assistenza/richiesta"] {
    flex: 0 0 100%;
    margin-top: .5rem;
    justify-content: center;
  }
}

/* Bottone "Diagnosi gratuita" */
.pw-nav-diagnosi {
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  padding: .5rem .875rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,.25);
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.pw-nav-diagnosi:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1);
  color: var(--white);
}

/* ══════════════════════════════════════════════════════
   HERO — sfondo warm off-white
══════════════════════════════════════════════════════ */
.hero { position: relative; padding: 5rem 0 0; background: var(--warm); overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

/* Sfondo decorativo: simboli di codice, tono su tono, non interattivo */
.hero-bg-code { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg-code .sym {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy);
  opacity: .07;
  line-height: 1;
  user-select: none;
}
.hero-bg-code .s1 { font-size: 9rem;   top: -2rem;   right: 6%;  transform: rotate(-8deg); }
.hero-bg-code .s2 { font-size: 5rem;   bottom: 12%;  right: 38%; color: var(--orange); opacity: .09; transform: rotate(6deg); }
.hero-bg-code .s3 { font-size: 4rem;   top: 8rem;    left: 42%;  transform: rotate(-4deg); }
.hero-bg-code .s4 { font-size: 6.5rem; bottom: -1.5rem; left: 2%; transform: rotate(5deg); }

@media (max-width: 991.98px) {
  .hero-bg-code .s1 { font-size: 6rem; }
  .hero-bg-code .s3 { display: none; }
  .hero-bg-code .s4 { font-size: 4.5rem; }
}
@media (max-width: 575.98px) {
  .hero-bg-code { opacity: .6; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .375rem .875rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--slate);
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
}
.hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--dark);
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
/* accent = coral, usato solo sulla riga chiave */
.hero-title .accent      { color: var(--orange); }
.hero-title .accent-cyan { color: var(--navy); }

.hero-desc {
  font-size: 1.0625rem;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* Floating cards (fino a 5, ognuna un link a una pillola in evidenza).
   top/left/right sono impostati inline da hero.php: la posizione fisica è
   generata lato server a ogni caricamento pagina (fascia verticale fissa
   per card, coordinate random dentro la fascia) per evitare sovrapposizioni. */
.hero-cards { position: relative; min-height: 360px; }
.hero-floating {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .875rem;
  max-width: 300px;
  transition: var(--transition);
  color: inherit;
  text-decoration: none;
}
.hero-floating:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: inherit; }
.hero-floating .pw-icon-circle {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--navy-tint);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-floating .pw-icon-circle.cyan { background: var(--cyan-light); color: var(--cyan); }
.hero-floating .pw-icon-circle.accent { background: var(--orange-light); color: var(--orange); }
.hero-floating .pw-mono-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-floating .pw-title-label {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--dark);
  font-size: .95rem;
  margin-top: 2px;
}

/* ── Varianti alternative della colonna destra dell'hero ──────────────────
   Scelta in /admin/impostazioni (HeroVariante, impostazione
   hero_variante_visiva, §9 B-bis). Condividono tutte la stessa fonte dati
   (PillolaModel::getLatest()): l'ordine è sempre quello reale di
   pubblicazione, mai casuale — cambia solo la presentazione. A differenza
   di ".hero-cards" (variante "classica"), sono pensate per restare visibili
   anche sotto i 992px. */

/* — Rail cronologico — */
.hero-rail { position: relative; padding-left: 30px; }
.hero-rail::before {
  content: ""; position: absolute; left: 22px; top: 4px; bottom: 4px; width: 2px; background: var(--navy-tint);
}
.hero-rail-node {
  position: relative; display: flex; gap: .85rem; align-items: flex-start;
  margin-bottom: 1.1rem; text-decoration: none; color: inherit;
}
.hero-rail-node:last-child { margin-bottom: 0; }
.hero-rail-node:hover .hero-rail-title { color: var(--orange); }
.hero-rail-dot {
  position: absolute; left: -30px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--navy);
}
.hero-rail-node.is-new .hero-rail-dot { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 4px var(--orange-light); }
.hero-rail .pw-icon-circle {
  width: 38px; height: 38px; border-radius: 10px; background: var(--navy-tint); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-rail .pw-icon-circle.cyan { background: var(--cyan-light); color: var(--cyan); }
.hero-rail .pw-icon-circle.accent { background: var(--orange-light); color: var(--orange); }
.hero-rail-meta {
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .45rem;
}
.hero-rail-meta .is-new-chip {
  background: var(--orange); color: var(--white); border-radius: var(--radius-pill);
  padding: .05rem .55rem; text-transform: none; letter-spacing: 0; font-weight: 600;
}
.hero-rail-title { font-family: var(--font-title); font-weight: 600; font-size: .875rem; color: var(--dark); margin-top: 2px; }

/* — Terminal log — */
.hero-term-win { background: #0E1A26; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-term-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: #14243A; }
.hero-term-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.hero-term-bar .r { background: #FF5F57; }
.hero-term-bar .y { background: #FEBC2E; }
.hero-term-bar .g { background: #28C840; }
.hero-term-bar span { margin-left: .5rem; font-family: var(--font-mono); font-size: .7rem; color: #7C93AC; }
.hero-term-body { padding: .85rem 1.1rem 1rem; font-family: var(--font-mono); font-size: .72rem; }
.hero-term-row {
  display: flex; gap: .55rem; align-items: baseline; padding: .32rem 0;
  color: #C7D3DE; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.hero-term-row:hover { color: var(--white); }
.hero-term-row .hash { color: #4A6A8A; flex-shrink: 0; }
.hero-term-row .when { color: #7C93AC; width: 3.4em; flex-shrink: 0; overflow: hidden; text-overflow: clip; }
.hero-term-row .tag { border-radius: 4px; padding: 0 .4em; flex-shrink: 0; }
.hero-term-row .tag.navy   { background: rgba(27,58,92,.35);   color: #9CC2E8; }
.hero-term-row .tag.cyan   { background: rgba(2,132,199,.28);  color: #7FD4FA; }
.hero-term-row .tag.accent { background: rgba(229,92,43,.28);  color: #FF9B72; }
.hero-term-row .ttl { overflow: hidden; text-overflow: ellipsis; }
.hero-term-row.is-new .ttl { color: var(--white); font-weight: 600; }
.hero-term-caret {
  display: inline-block; width: 7px; height: 1em; background: var(--orange);
  margin-left: .1em; animation: hero-term-blink 1.1s step-end infinite; vertical-align: text-bottom;
}
@keyframes hero-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-term-caret { animation: none; } }

/* — Spotlight + strip — */
.hero-spot-main {
  display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.3rem 1.45rem; box-shadow: var(--shadow-md); margin-bottom: .8rem; text-decoration: none; color: inherit;
}
.hero-spot-main:hover { box-shadow: var(--shadow-lg); color: inherit; }
.hero-spot-badge {
  display: inline-block; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .05em; background: var(--orange-light); color: var(--orange);
  border-radius: var(--radius-pill); padding: .2rem .7rem; margin-bottom: .7rem;
}
.hero-spot-main h3 { font-family: var(--font-title); font-size: 1.08rem; font-weight: 600; margin: 0 0 .45rem; color: var(--dark); line-height: 1.28; }
.hero-spot-main p { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; }
.hero-spot-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.hero-spot-when { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.hero-spot-when .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s infinite; }
.hero-spot-cta { font-family: var(--font-mono); font-size: .72rem; color: var(--orange); font-weight: 600; }
.hero-spot-mini {
  display: flex; gap: .85rem; align-items: center; background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: .65rem .9rem; margin-bottom: .55rem; text-decoration: none; color: inherit;
}
.hero-spot-mini:last-child { margin-bottom: 0; }
.hero-spot-mini:hover { border-color: var(--navy-light); color: inherit; }
.hero-spot-mini .pw-icon-circle {
  width: 32px; height: 32px; border-radius: 9px; background: var(--navy-tint); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem;
}
.hero-spot-mini .pw-icon-circle.cyan { background: var(--cyan-light); color: var(--cyan); }
.hero-spot-mini .pw-icon-circle.accent { background: var(--orange-light); color: var(--orange); }
.hero-spot-mini-title { font-size: .8rem; color: var(--dark); font-weight: 500; }
.hero-spot-mini-when { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }

@media (max-width: 991.98px) {
  .hero-rail, .hero-term-win, .hero-spot-main, .hero-spot-mini { max-width: 480px; }
}

/* Stats row */
.stats-row {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}
/* Numeri stat: navy invece di arancione */
.stat .num {
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  display: block;
}
.stat .lbl {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
  display: block;
  line-height: 1.4;
}

/* ── Tech / Trust bar ───────────────────────────────── */
.tech-stack {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.tech-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tech-item {
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--dark-2);
  font-size: .9375rem;
}

/* ══════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════ */
.services-section { 
  padding: 0 0 4rem 0; background: var(--bs-body-bg); 
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: var(--transition);
}
.service-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--navy-tint);
}
.service-card .svc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service-card .svc-icon {
  width: 48px; height: 48px;
  background: var(--navy-tint);
  color: var(--navy);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.service-card .svc-icon.cyan    { background: var(--cyan-light);  color: var(--cyan); }
.service-card .svc-icon.accent  { background: var(--orange-light); color: var(--orange); }
.service-card .svc-num {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--navy);
  background: var(--navy-tint);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.service-card .svc-num.cyan { color: var(--cyan-dark); background: var(--cyan-light); }
/* Variante arancione del badge, speculare a .svc-icon.accent.
   Usata dalla lista /servizi, che traduce my_servizi.color 'orange' → 'accent'. */
.service-card .svc-num.accent { color: var(--orange); background: var(--orange-light); }
.service-card h3 { font-size: 1.1875rem; line-height: 1.3; margin: 0; }
.service-card p  { font-size: .9375rem; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.service-card .svc-price {
  font-size: .9375rem;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--dark);
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Prezzi in coral — unico accento nella card */
.svc-price .price-val { color: var(--orange); }
.svc-link       { color: var(--navy) !important; display: inline-flex; align-items: center; }
.svc-link:hover { color: var(--orange) !important; }
.svc-link.cyan  { color: var(--cyan) !important; }

/* ══════════════════════════════════════════════════════
   PILLOLE
══════════════════════════════════════════════════════ */

.pillole-section {
  padding: 5.5rem 0;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.article-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  text-decoration: none;
  color: var(--dark);
  transition: var(--transition);
}
.article-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--navy-tint);
}
.article-card .card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.article-card .card-stats { display: flex; align-items: center; gap: .9rem; font-size: .8125rem; color: var(--muted); }
/* Titolo più grande del badge categoria/livello sopra (1.75× invece di
   1.58×) e staccato da esso con un margin-top dedicato, oltre al gap
   uniforme di .article-card: senza, il titolo scorreva alla stessa
   distanza di ogni altro blocco della card e non si distingueva come
   l'elemento principale. */
.article-card h3 { font-size: 1.3125rem; line-height: 1.3; margin: .375rem 0 0; }
.article-card p  { font-size: .9375rem; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.article-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .5rem;
  color: var(--muted);
  font-size: .8125rem;
  margin-top: auto;
  background: transparent;
  border-top: 0;
}
.leggi-link {
  color: var(--orange) !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.leggi-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   DIAGNOSI
══════════════════════════════════════════════════════ */
.diagnosi-section { padding: 5.5rem 0; background: var(--navy-50); }

.diagnosi-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.diagnosi-list li { font-size: .9375rem; color: var(--dark-2); }
.diagnosi-list li svg { color: var(--orange); flex-shrink: 0; }

.checklist-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.checklist-card .ck-header {
  display: flex; align-items: center; gap: .625rem; margin-bottom: 1.25rem;
}
.ck-header .dot-green { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
.ck-header .ck-fname { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); }
.checklist-card h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.ck-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border);
}
.ck-item:last-child { border-bottom: 0; }
.ck-item-content h5 {
  font-family: var(--font-title);
  font-size: .9375rem; font-weight: 600;
  margin: 0 0 2px; color: var(--dark);
}
.ck-item-content p { font-size: .8125rem; color: var(--muted); margin: 0; }
.ck-check { color: var(--green); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   DIFFERENZIATORE — dark section con navy
══════════════════════════════════════════════════════ */
.diff-section {
  background: var(--navy);
  padding: 5.5rem 0;
  color: var(--white);
}
.diff-section .section-label { color: rgba(255,255,255,.55); }
.diff-section .section-title { color: var(--white); }
.diff-section .section-desc  { color: rgba(255,255,255,.65); }

.topic-card {
  display: block;
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 1.125rem;
  transition: var(--transition);
  text-decoration: none;
}
.topic-card:hover { border-color: rgba(255,255,255,.3); background: #345A80; }
.topic-card .t-icon { color: rgba(255,255,255,.7); margin-bottom: .625rem; display: block; }
.topic-card h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin: 0 0 .375rem; }
.topic-card p  { font-size: .8125rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════ */
.newsletter-section {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 3.5rem 0;
}
.newsletter-text h2 { font-size: 1.375rem; margin: 0 0 .25rem; }
.newsletter-text p  { font-size: .9375rem; color: var(--muted); margin: 0; }

.newsletter-form {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  min-width: 320px;
}
.newsletter-form input[type="email"] {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .75rem 1.125rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--dark);
  background: var(--white);
  min-width: 200px;
  outline: none;
  flex: 1;
  transition: var(--transition);
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-tint);
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.pw-footer {
  background: #211C18;            /* espresso caldo — distinto dal navy della cybersecurity */
  color: rgba(255,255,255,.72);
  padding: 4.5rem 0 1.75rem;       /* più aria sopra per distanziarlo dal blocco scuro */
  border-top: 3px solid var(--orange);
}
.footer-brand p {
  font-size: .9rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  max-width: 320px;
  margin-top: 1rem;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--white);
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.footer-col ul a { font-size: .9rem; color: rgba(255,255,255,.6); }
.footer-col ul a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.25rem;
  font-size: .85rem;
  color: rgba(255,255,255,.38);
}
.footer-bottom a { color: rgba(255,255,255,.38); }
.footer-bottom a:hover { color: var(--orange); }

.pw-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.pw-social a, .pw-social span {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
}
.pw-social a:hover { background: var(--orange); color: var(--white); }

/* ══════════════════════════════════════════════════════
   FORM, ALERT, CARD generici
══════════════════════════════════════════════════════ */
.pw-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.pw-card:hover { box-shadow: var(--shadow); }
.pw-card.flat:hover { box-shadow: none; transform: none; }

.pw-form .form-group { margin-bottom: 1.25rem; }
.pw-form label { display: block; font-size: .875rem; font-weight: 500; color: var(--dark-2); margin-bottom: .375rem; }
/* .pw-form input,
.pw-form select,
.pw-form textarea,
.pw-contact-form .form-control {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .75rem .875rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--dark);
  background: var(--white);
  outline: none;
  transition: var(--transition);
} */
.pw-form input:focus,
.pw-form select:focus,
.pw-form textarea:focus,
.pw-contact-form .form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-tint);
}
.pw-form textarea { resize: vertical; min-height: 120px; }
.pw-form .form-hint, .form-text { font-size: .8125rem; color: var(--muted); margin-top: .3rem; }
.pw-form .form-error, .form-error-msg, .pw-flash-err, .alert-error {
  background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626;
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .9rem; margin-bottom: 1.5rem;
}
.form-success, .pw-flash-ok, .alert-success {
  background: var(--green-bg); border: 1px solid #BBF7D0; color: #15803D;
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .9rem; margin-bottom: 1.5rem;
}
.alert-info {
  background: var(--navy-tint); border: 1px solid #B8D4E8; color: var(--navy);
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .9rem; margin-bottom: 1.5rem;
}
.pw-flash { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: .95rem; }

/* ══════════════════════════════════════════════════════
   SERVIZI — lista (/servizi) e dettaglio (/servizi/{slug})
   Le card riusano .service-card (vedi sezione home): qui
   stanno solo gli stili propri della pagina, scopati per
   non toccare la sezione servizi della home.
══════════════════════════════════════════════════════ */

/* Header a piena larghezza: eredita sfondo/padding da .pw-page-header (fascia
   colorata come /pillole). Il sottotitolo replica quello di .pw-pillole-header
   per allineare le due pagine. */
.pw-servizi-header .pw-page-subtitle {
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 640px;
  margin: 0;
  line-height: 1.6;
}
.pw-servizi-header .pw-breadcrumb { margin-bottom: 1.25rem; }
/* svc-head qui è fuori da .service-card, quindi non eredita il flex: lo ridichiara. */
.pw-servizi-header .svc-head { display: flex; align-items: center; gap: .75rem; }

/* Lista: il link della card porta anche l'etichetta "Scopri", non solo la freccia */
.pw-servizi-grid .svc-link {
  gap: .35rem;
  text-decoration: none;
  font-weight: 600;
  font-size: .875rem;
}

/* Box CTA in fondo alla lista */
.pw-servizi-cta {
  margin-top: 3.5rem;
  padding: 2.5rem 2rem;
  background: var(--warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.pw-servizi-cta h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.pw-servizi-cta p {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
.pw-servizi-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* Dettaglio: riquadro dei dati sintetici (per chi / tempi / costo) */
.pw-servizio-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sd-info { font-size: .9375rem; line-height: 1.5; color: var(--dark-2); }
.sd-info dt {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .25rem;
}
.sd-prezzo { color: var(--orange); font-family: var(--font-title); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   FORM DI RICHIESTA — componente condiviso
   Nato su /assistenza/richiesta (stile di riferimento, in precedenza
   in un <style> inline lì dentro), riusato identico da /servizi/{slug}
   (partials/servizio-form.php, prima duplicato come .svc-req) e da
   /contatti. Un solo posto invece di due copie della stessa regola. */
.ass-req-wrap {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 100px; /* l'ancora #richiedi non finisce sotto l'header */
}
.ass-req-wrap h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.ass-req-intro { color: var(--muted); line-height: 1.6; margin-bottom: 1.75rem; }
.ass-req-nota { font-size: .85rem; color: var(--muted); margin: 1rem 0 0; }

.ass-req .form-group { margin-bottom: 1.25rem; }
.ass-req label {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .4rem;
  font-size: .95rem;
}
.ass-req .req { color: var(--orange-dark); }
.ass-req .opt { color: var(--muted); font-weight: 500; font-size: .85rem; }
.ass-req .form-control,
.ass-req .form-select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--dark);
  background: var(--white);
  transition: var(--transition);
}
.ass-req .form-control:focus,
.ass-req .form-select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-tint);
}
.ass-req .form-control.is-invalid,
.ass-req .form-select.is-invalid { border-color: var(--orange-dark); }
.ass-req .form-control.is-invalid:focus,
.ass-req .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
.ass-req .hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.ass-req .field-error {
  display: none;
  color: var(--orange-dark);
  font-size: .82rem;
  font-weight: 600;
  margin-top: .3rem;
}
.ass-req .field-error.show { display: block; }
.ass-req .counter { font-size: .78rem; color: var(--muted); margin-top: .3rem; text-align: right; }

.ass-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; }
.ass-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  cursor: pointer;
  background: var(--white);
}
.ass-check input { accent-color: var(--orange); width: 1rem; height: 1rem; }
.ass-check span { font-size: .9rem; color: var(--slate); }
.ass-check a { text-decoration: underline; }

/* honeypot: fuori schermo, non display:none (i bot lo riconoscerebbero) */
.ass-honey { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Dettaglio: CTA di chiusura */
.art-nav {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

@media (max-width: 575.98px) {
  .pw-servizi-cta { padding: 2rem 1.25rem; }
  .pw-servizi-cta-actions .btn,
  .art-nav .btn { width: 100%; }
}

/* Page header (pagine interne) */
.page-header, .pw-page-header {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0 2.5rem;
}
.page-header h1, .pw-page-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .5rem; }
.page-header p,  .pw-page-header p  { color: var(--muted); font-size: 1.0625rem; max-width: 620px; margin: 0; }
.pw-page-content  { padding: 4rem 0 5rem; }
.container-narrow { max-width: 780px; }
.pw-breadcrumb    { color: var(--muted); text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: 1.5rem; }
.pw-breadcrumb:hover { color: var(--navy); }

/* Pagination */
.pw-pagination { display: flex; gap: 1rem; justify-content: center; margin-top: 3rem; align-items: center; }
.pw-page-btn { padding: .5rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--dark); text-decoration: none; transition: var(--transition); }
.pw-page-btn:hover { border-color: var(--navy); color: var(--navy); }
.pw-page-info  { color: var(--muted); font-size: .9rem; }
.pw-empty-state { text-align: center; padding: 4rem; color: var(--muted); }

/* Filtri */
.pw-cat-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.pw-cat-btn {
  padding: .5rem .875rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--white);
  color: var(--dark-2); text-decoration: none; font-size: .875rem;
  transition: var(--transition);
}
.pw-cat-btn:hover  { border-color: var(--navy-tint); color: var(--navy); }
.pw-cat-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Article body */
.art-body { line-height: 1.75; font-size: 1.0625rem; color: var(--dark-2); }
.art-body h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.75rem; }
.art-body h3 { margin-top: 2rem; margin-bottom: .75rem; font-size: 1.375rem; }
.art-body code { background: #F1F4F7; padding: .1em .4em; border-radius: 6px; font-family: var(--font-mono); font-size: .9em; color: var(--dark); }
.art-body pre { background: #0E1A26; color: #D7E1EA; border-radius: 12px; padding: 1.25rem 1.4rem; overflow-x: auto; margin: 1.5rem 0; font-family: var(--font-mono); font-size: .875rem; line-height: 1.7; }
.art-body pre code { background: none; padding: 0; color: inherit; }
.art-body blockquote { border-left: 4px solid var(--navy); background: var(--navy-50); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 1.5rem 0; font-style: italic; }

/* Progetti (portfolio): riga stack tecnico sulla card, riusa .article-card */
.pw-progetto-stack {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin: -.25rem 0 0;
}

/* Progetti: box demo nel dettaglio, mostrato solo se demo_url è valorizzato */
.pw-demo-box {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--navy-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pw-demo-box p { margin: 0; color: var(--dark-2); font-size: .9375rem; }

/* Variante nella sidebar del case study (colonna stretta): impilata invece
   che in riga, bottone a piena larghezza. */
.art-sidebar-sticky .pw-demo-box {
  flex-direction: column;
  align-items: flex-start;
}
.art-sidebar-sticky .pw-demo-box .btn { width: 100%; }
.pw-demo-box .form-text { display: block; margin-top: .25rem; }

/* ══════════════════════════════════════════════════════
   ADMIN
══════════════════════════════════════════════════════ */
.admin-wrapper { display: flex; min-height: 100vh; background: #F4F6F8; }
.admin-sidebar {
  width: 250px; background: var(--navy); flex-shrink: 0;
  position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 100;
  display: flex; flex-direction: column;
}
.admin-sidebar .sidebar-logo { padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--navy-mid); }
.admin-sidebar .sidebar-logo .pw-logo { font-size: 1.25rem; }
.admin-sidebar nav { padding: 1rem .75rem; flex: 1; }
.admin-sidebar nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar nav li a {
  display: flex; align-items: center; gap: .75rem;
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.65);
  padding: .625rem .9rem; border-radius: 8px;
  transition: var(--transition); text-decoration: none;
}
.admin-sidebar nav li a:hover { background: var(--navy-mid); color: var(--white); }
.admin-sidebar nav li a.active { background: var(--navy-mid); color: var(--white); border-left: 3px solid var(--orange); padding-left: calc(.9rem - 3px); }
.admin-sidebar nav .nav-section { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); padding: 1rem .9rem .35rem; margin: 0; }
.admin-main     { margin-left: 250px; flex: 1; display: flex; flex-direction: column; }
.admin-topbar   { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 1.5rem; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.admin-content  { padding: 1.75rem; flex: 1; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
/* .stat-card, .admin-table-card, .pw-table: definizioni complete più sotto,
   sezione "ADMIN — utility classes & section-builder" (evitata duplicazione). */
.sc-orange { background: var(--orange-light) !important; color: var(--orange) !important; }
.sc-blue   { background: var(--navy-tint)    !important; color: var(--navy)        !important; }
.sc-green  { background: var(--green-bg)     !important; color: var(--green)       !important; }
.sc-purple { background: #F5F3FF !important; color: #8B5CF6 !important; }
.sc-red    { background: #FEF2F2 !important; color: #DC2626 !important; }

/* Login admin */
.login-page { min-height: 100vh; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.login-card .login-logo { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.login-card h1 { font-size: 1.4rem; text-align: center; margin-bottom: .25rem; }
.login-card .login-sub { text-align: center; color: var(--muted); font-size: .875rem; margin-bottom: 2rem; }

/* Error pages */
.error-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; }
.error-page .error-code { font-family: var(--font-mono); font-size: 4rem; font-weight: 600; color: var(--navy); line-height: 1; margin-bottom: .5rem; }

/* Maintenance */
.maintenance-page { min-height: 100vh; background: var(--navy); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); padding: 2rem; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .hero-cards { display: none; }
}
@media (max-width: 768px) {
  .hero      { padding: 3rem 0 0; }
  .stats-row { margin-top: 2rem; }
  .newsletter-form { min-width: 0; width: 100%; }
  .newsletter-form input { min-width: 0; }
  .admin-sidebar { transform: translateX(-100%); transition: transform .3s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .admin-stats-grid { grid-template-columns: 1fr; }
  .hero-title  { font-size: 2rem; }
  .section-title { font-size: 1.7rem; }
  .stat .num { font-size: 1.875rem; }
}

/* ══════════════════════════════════════════════════════
   ADMIN — utility classes & section-builder
══════════════════════════════════════════════════════ */
.td-title {
  font-weight: 600;
  color: var(--dark);
  font-size: .9rem;
}
.td-muted {
  font-size: .8125rem;
  color: var(--muted);
}
.table-actions {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
}
/* Variante compatta per azioni icon-only (.btn-icon), affiancate senza il
   gap pensato per bottoni con testo — usata da /admin/pillole. nowrap
   forza le due icone sulla stessa riga: senza, l'ultima colonna di una
   tabella già stretta le impila una sopra l'altra invece di affiancarle. */
.table-actions-tight { gap: .125rem; flex-wrap: nowrap; }

/* Admin flash alerts */
.alert-pw { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: .9rem; }
.alert-pw.alert-error,
.alert-pw.alert-danger   { background: #FEF2F2; border: 1px solid #FECACA; color: #DC2626; }
.alert-pw.alert-success  { background: var(--green-bg); border: 1px solid #BBF7D0; color: #15803D; }
.alert-pw.alert-info     { background: var(--navy-tint); border: 1px solid #B8D4E8; color: var(--navy); }
.alert-pw.alert-warning  { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }

/* Override Bootstrap form-control */
.pw-form .form-control,
.pw-form .form-select,
.admin-form-card .form-control,
.admin-form-card .form-select {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .75rem .875rem;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--dark);
  background: var(--white);
}
.pw-form .form-control:focus,
.pw-form .form-select:focus,
.admin-form-card .form-control:focus,
.admin-form-card .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-tint);
  outline: none;
}
.pw-form .form-label,
.admin-form-card .form-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--dark-2);
  margin-bottom: .375rem;
}
.pw-form .form-check-input:checked,
.admin-form-card .form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.pw-form .form-check-input:focus,
.admin-form-card .form-check-input:focus {
  box-shadow: 0 0 0 4px var(--navy-tint);
}

/* Admin form card */
.admin-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.admin-form-card > h2,
.admin-form-card .card-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

/* Form pillola (nuova/modifica): sfondo card diverso da quello delle caselle
   di input (entrambi bianchi di default), per distinguerle a colpo d'occhio. */
.pillola-form .admin-form-card {
  background: var(--light);
}
.pillola-form .form-control::placeholder,
.pillola-form .form-select::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* Admin table card */
.admin-table-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.admin-table-card .table-header {
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
/* Paginazione elenchi admin (bottoni custom, non Bootstrap: .disabled non è
   già gestito da nessuna regola esistente). */
.admin-table-card .btn.disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

.admin-table-card .table-header h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* Bootstrap table overrides */
.pw-table.table > thead > tr > th {
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--navy-50);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem;
  vertical-align: middle;
}
.pw-table.table > tbody > tr > td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--dark-2);
  vertical-align: middle;
}
.pw-table.table > tbody > tr:last-child > td { border-bottom: 0; }
.pw-table.table-hover > tbody > tr:hover > td { background-color: var(--navy-50); }

/* Righe alternate (zebra), opt-in con .pw-table-zebra: non nel default
   .pw-table per non toccare le altre tabelle admin che la usano — vedi
   /admin/pillole. */
.pw-table-zebra.table > tbody > tr:nth-child(even) > td { background-color: var(--warm); }
/* Stessa specificità della regola zebra sopra: l'hover deve restare
   visibile anche su una riga pari, quindi ripetuta DOPO per vincere a
   parità di specificità (ordine nel foglio). */
.pw-table-zebra.table-hover > tbody > tr:hover > td { background-color: var(--navy-50); }

/* Pill Section Panel */
.pill-section-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.psp-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: #F8FAFC;
  cursor: pointer;
  user-select: none;
}
.psp-header:hover { background: var(--navy-50); }
.psp-emoji  { font-size: 1rem; line-height: 1; }
.psp-label  { font-size: .9rem; font-weight: 600; color: var(--dark-2); flex: 1; }
.psp-toggle { font-size: .75rem; color: var(--muted); transition: transform .2s; }
.psp-toggle.open { transform: rotate(180deg); }
.psp-body {
  padding: 1rem;
  border-top: 1px solid var(--border);
  background: var(--white);
  display: none;
}
.psp-body.open { display: block; }

/* Repeatable rows */
.repeatable-row {
  display: grid;
  gap: .5rem;
  align-items: start;
  margin-bottom: .625rem;
  position: relative;
  padding-right: 2rem;
}
.repeatable-row.trappola-row { grid-template-columns: 1fr 2fr; }
.repeatable-row.compat-row   { grid-template-columns: 1fr 1fr 1fr; }
.btn-remove-row {
  position: absolute;
  right: 0; top: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: .25rem;
  line-height: 1;
}
.btn-remove-row:hover { color: var(--red); }
.btn-add-row {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: .8125rem;
  padding: .4rem .75rem;
  cursor: pointer;
  margin-top: .25rem;
  width: 100%;
  transition: all .15s;
}
.btn-add-row:hover { border-color: var(--navy); color: var(--navy); }

/* Stat card */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  height: 100%;
  transition: var(--transition);
}
.stat-card .sc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-tint);
  color: var(--navy);
  flex-shrink: 0;
  font-size: 1.25rem;
}
.stat-card .sc-data .num {
  font-family: var(--font-title);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
  display: block;
}
.stat-card .sc-data .lbl {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}
/* Le stat-card di /admin (dashboard) sono avvolte in <a>: hover/focus sul
   link solleva leggermente la card e ne evidenzia il bordo, così si capisce
   che è cliccabile senza dover aggiungere un'icona freccia su ognuna. */
.dash-stat-link { display: block; }
.dash-stat-link:hover .stat-card,
.dash-stat-link:focus-visible .stat-card {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* Dashboard — card "hero" per la metrica principale (Pillole): due numeri
   affiancati (pubblicate / programmate) invece di uno solo, per rispondere
   alla domanda che conta di più su un blog — "quanto ho pubblicato e cosa
   è già in coda?" — senza dover aprire /admin/pillole. */
.dash-hero-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.375rem 1.75rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
  transition: var(--transition);
}
.dash-hero-link:hover .dash-hero-card,
.dash-hero-link:focus-visible .dash-hero-card {
  border-color: var(--navy-light);
  box-shadow: var(--shadow-sm);
}
.dash-hero-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--orange);
}
.dash-hero-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  flex-shrink: 0;
}
.dash-hero-body { flex: 1; min-width: 0; }
.dash-hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: .375rem;
  flex-wrap: wrap;
}
.dash-hero-stat .num {
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
  display: block;
}
.dash-hero-stat .lbl {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .3rem;
  display: block;
}
.dash-hero-stat--scheduled .num { color: var(--orange-dark); }
.dash-hero-stat--scheduled.is-empty .num { color: var(--muted); }
.dash-hero-divider { width: 1px; align-self: stretch; background: var(--border); }
.dash-hero-cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 576px) {
  .dash-hero-card { flex-direction: column; align-items: flex-start; }
  .dash-hero-cta { align-self: stretch; text-align: center; }
}

/* ══════════════════════════════════════════════════════
   PILLOLA — PAGINA DI DETTAGLIO
══════════════════════════════════════════════════════ */
.breadcrumb { --bs-breadcrumb-divider-color: var(--border); font-size: .875rem; }
.art-bc-link { color: var(--muted); }
.art-bc-link:hover { color: var(--navy); }
.breadcrumb-item.active { color: var(--dark-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--border); }

.art-title {
  font-family: var(--font-title);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
  letter-spacing: -.025em;
}

.art-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.art-lead {
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--dark-2);
  padding-bottom: 1.5rem;
  /* border-bottom: 1px solid var(--border); */
  margin: 0;
}

.art-body { 
  line-height: 1.78; 
  font-size: 1.0625rem; 
  color: var(--dark-2); 
  /* padding-top: 1.25rem;
  border-top: 1px solid var(--border); */
}
.art-body section { scroll-margin-top: 90px; }
.art-body h2 { 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: var(--dark); 
  margin: 1.625rem 0 .475rem 0; 
  letter-spacing: -.015em; 
}
.art-body h3 { font-size: 1.1875rem; font-weight: 600; color: var(--dark); margin: 1.75rem 0 .625rem; }
.art-body p  { margin-bottom: 1rem; }
.art-body a  { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.art-body a:hover { color: var(--orange); }
.art-body code { background: #F1F4F7; padding: .1em .4em; border-radius: 6px; font-family: var(--font-mono); font-size: .9em; color: var(--dark); }
.art-body ul, .art-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.art-body li { margin-bottom: .375rem; }

/* Box "esempio pratico": paragrafo di esempio reale nel corpo pillola,
   distinto dalla blockquote (niente corsivo, accento ciano invece di navy) */
.art-body .art-example-box {
  background: #F3FAFD;
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.25rem 1.125rem;
  margin: 1.5rem 0;
}
.art-body .art-example-box::before {
  content: "Nella vita di tutti i giorni";
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: .5rem;
}
.art-body .art-example-box p:last-child { margin-bottom: 0; }

/* Box "Per approfondire" in fondo alla pillola: link interni verso pillole
   collegate (aggiunti il 2026-10-01 dalle analisi di Search Console). Stessa
   struttura del box esempio, accento arancio. Il titolo è nell'HTML, non in
   ::before: il box resta comprensibile anche con il vecchio CSS in cache. */
.art-body .art-approfondisci {
  background: #FFF8F1;
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.25rem 1rem;
  margin: 2rem 0 1.5rem;
}
.art-body .art-approfondisci > p:first-child {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .625rem;
}
.art-body .art-approfondisci ul { margin-bottom: 0; }
.art-body .art-approfondisci li:last-child { margin-bottom: 0; }

/* Box "esempio pratico" B: scheda editoriale su sfondo caldo, senza bordo
   colorato — tono più morbido, vicino al linguaggio delle topic-card */
.art-body .art-example-warm {
  background: var(--warm);
  border-radius: var(--radius);
  padding: 1.375rem 1.5rem 1.25rem;
  margin: 1.5rem 0;
}
.art-body .art-example-warm::before {
  content: "💡 Nella pratica";
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  color: var(--dark);
  margin-bottom: .625rem;
}
.art-body .art-example-warm p:last-child { margin-bottom: 0; }

/* Box "esempio pratico" C: nota marginale tipografica, nessun riempimento —
   solo un filetto tratteggiato e un kicker mono minuscolo, per i casi in cui
   un riquadro pieno appesantirebbe troppo la lettura */
.art-body .art-example-note {
  border-left: 6px dashed var(--dark-2);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 1.75rem 0;
}
.art-body .art-example-note::before {
  content: "esempio";
  display: block;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: .375rem;
}
.art-body .art-example-note p:last-child { margin-bottom: 0; }

/* Doc ufficiale box */
.art-doc-box {
  background: var(--navy-tint);
  border: 1px solid rgba(27,58,92,.18);
  border-radius: var(--radius);
  padding: .875rem 1.125rem;
}
.art-doc-badge {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--navy-light);
}
.art-doc-link {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--navy) !important;
}
.art-doc-link:hover { text-decoration: underline; }

/* Code block */
.art-code-block pre {
  background: #0E1A26;
  color: #D7E1EA;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  overflow-x: auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.72;
}
.art-code-block pre code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }
.art-code-lang {
  top: .75rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  color: #6B8099;
  text-transform: uppercase;
  letter-spacing: .08em;
  z-index: 1;
}

/* Trappole */
.art-trap-item {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: 1rem 1.125rem;
}
.art-trap-icon { font-size: 1.125rem; line-height: 1; margin-top: 2px; }

/* Compatibilità */
.art-compat-table { font-size: .9rem; }
.art-compat-table thead th {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--navy-50);
}

/* CTA box */
.art-cta-box {
  background: var(--navy);
  border-radius: var(--radius);
}

/* Sidebar sticky.
   Richiede che la colonna <aside> sia alta quanto la riga (align-self-stretch):
   con l'altezza al contenuto lo sticky non avrebbe spazio di scorrimento. */
.art-sidebar-sticky {
  position: sticky;
  top: 88px;
}

/* Indice "In questa pillola": nascosto sotto lg (mobile/tablet) */
@media (max-width: 991.98px) {
  .art-toc-index { display: none !important; }
}

/* TOC e widget sidebar */
.art-toc, .art-nl-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.art-toc-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.art-toc-link {
  font-size: .875rem;
  color: var(--dark-2);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: var(--transition);
  text-decoration: none;
}
.art-toc-link:hover { color: var(--navy); border-left-color: var(--navy-tint); }
.art-toc-link.active { color: var(--navy); border-left-color: var(--navy); background: var(--navy-tint); font-weight: 600; }

/* Newsletter input */
.art-nl-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-tint); }

/* Newsletter: messaggio di esito della card pillola (stato is-ok/is-err) */
.art-nl-msg { font-size: .85rem; font-weight: 600; line-height: 1.4; }
.art-nl-msg.is-ok  { color: #065F46; }
.art-nl-msg.is-err { color: #991B1B; }

/* Share buttons */
.art-share-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--light);
  color: var(--dark-2);
  border: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.art-share-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Statistiche in testa all'articolo (mi piace + commenti) */
.art-stat-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8125rem; font-weight: 600; color: var(--muted);
  background: var(--light); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .75rem; text-decoration: none;
}
.art-stat-link { cursor: pointer; transition: var(--transition); }
.art-stat-link:hover { color: var(--navy); border-color: var(--navy-light); background: var(--navy-tint); }
/* Compensa la navbar sticky quando si scorre fino ai commenti */
#pwCommenti { scroll-margin-top: 90px; }


/* ══════════════════════════════════════════════════════
   ARTICOLO — contenitore e tipografia corpo
══════════════════════════════════════════════════════ */

/* Distacca l'area articolo dallo sfondo pagina */
/* .pw-articolo {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
} */
.pw-article-surface {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
}
/* Sotto i 576px il padding fisso (40px per lato) mangiava una fetta
   sproporzionata di schermi piccoli, schiacciando le righe di testo ben
   sotto i 45 caratteri/riga (misurato ~40 CPL su 390px). Ridotto solo qui:
   il contenuto (testo, code block, tabelle) guadagna ~40px di larghezza. */
@media (max-width: 575.98px) {
  .pw-article-surface { padding: 1.5rem 1.25rem; }
}

/* Corpo testo: line-height ribilanciata */
.art-body {
  line-height: 1.68 !important;
  font-size: 1.0625rem;
  color: var(--dark-2);
}

/* Lead: leggermente più alta perché è un blocco intro, non lettura continua */
.art-lead {
  line-height: 1.72;
}

/* Paragrafi nel corpo: margine inferiore più stretto */
.art-body p {
  margin-bottom: .875rem;
}

/* Misura di lettura (Baymard: 50-75 caratteri/riga, idealmente 50-60) —
   solo sul testo che si legge in continuo: paragrafi, liste, citazioni,
   lead. Blocchi di codice, tabelle, immagini e figure restano larghi
   quanto la colonna (.pw-article-surface): il codice legge meglio con
   più respiro orizzontale, il testo no. Valore validato misurando le
   righe rese realmente dal browser (non stimato): a 34rem la riga sta
   tra 63 e 74 caratteri su tutte le larghezze desktop/tablet. */
.art-body p,
.art-body li,
.art-body blockquote,
.art-lead {
  max-width: 34rem;
}

.pw-articolo {
  background: var(--bs-body-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 0 0 1px var(--border);
}
/* ══════════════════════════════════════════════════════
   PILL SECTIONS — stili per il corpo generato da TinyMCE
   Le classi pill-section vengono iniettate dal vecchio
   sistema a sezioni e devono essere stilizzate qui.
══════════════════════════════════════════════════════ */

.pill-section {
  margin-bottom: 1.75rem;
}
.pill-section:last-child {
  margin-bottom: 0;
}

/* Introduzione: testo plain, nessuno sfondo */
.pill-intro p {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--dark-2);
}

/* Concetto chiave: riquadro navy tint con bordo sinistro */
.pill-concetto {
  background: var(--navy-tint);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  color: var(--dark-2);
  line-height: 1.65;
}

/* Link documentazione ufficiale */
.pill-doc {
  padding: .25rem 0;
}
.pill-doc-link {
  font-size: .875rem;
  color: var(--navy) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  text-decoration: none;
}
.pill-doc-link:hover {
  text-decoration: underline;
  color: var(--orange) !important;
}

/* Blocco codice: eredita da .art-code-block / Prism */
.pill-code pre {
  margin: 0;
}

/* Trappole / errori comuni */
.pill-trappole ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
}
.pill-trappole li {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--dark-2);
}

/* CTA finale: sfondo navy, testo chiaro */
.pill-cta {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.pill-cta p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════
Pannello admin
══════════════════════════════════════════════════════ */
.admin-form-card h2 {
  background-color: var(--navy-tint);
  color: var(--navy);
  padding: 0.5rem 0.5rem;
}

 /* Citazione fonte nel corpo pillola: livello visivo secondario rispetto al
    testo dell'articolo (stesso principio del box "Nella vita di tutti i
    giorni") — colore neutro anziché l'accento ciano, dimensione ridotta,
    riga propria per non confondersi con il paragrafo che la precede. */
 .pw-link-esterno {
    display: block;
    margin-top: .375rem;
    margin-bottom: .7rem;
    color: var(--muted);
    text-decoration: none;
    font-size: .8125rem;
    line-height: 1.5;
  }

  .pw-link-esterno > a {
    color: var(--slate);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .pw-link-esterno > a:hover {
    color: var(--navy);
  }

  /* ── Copy button sui blocchi di codice ── */
.pw-code-wrap {
  position: relative;
}

.pw-copy-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  font-size: .72rem;
  font-family: var(--font-mono);
  background: rgba(255,255,255,.08);
  color: #ccc;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .35rem;
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1;
}

.pw-copy-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.pw-copy-btn.copied {
  background: #0284C7;
  color: #fff;
  border-color: #0284C7;
}
/* ══════════════════════════════════════════════════════
   PILLOLE — INDEX (blog): ricerca, filtri, evidenza, paginazione
   Aggiunto per la pagina /pillole. Bootstrap gestisce la griglia;
   qui solo i componenti specifici non coperti dal design system.
══════════════════════════════════════════════════════ */

/* Header pagina: barra strumenti (ricerca + livelli) */
.pw-pillole-header .pw-page-subtitle { color: var(--muted); font-size: 1.0625rem; max-width: 640px; margin: 0; line-height: 1.6; }
.pw-tools-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin-top: 2rem;
}
.pw-search-form { display: flex; gap: .5rem; flex: 1 1 340px; min-width: min(100%, 340px); }
.pw-search { position: relative; flex: 1; display: flex; align-items: center; margin: 0; }
.pw-search svg,
.pw-search i { position: absolute; left: .9rem; color: var(--muted); pointer-events: none; }
.pw-search input {
  width: 100%; padding: .7rem 1rem .7rem 2.6rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white); color: var(--dark);
  font-family: var(--font-body); font-size: .95rem; transition: var(--transition);
}
.pw-search input:focus { outline: none; border-color: var(--navy-light); box-shadow: 0 0 0 3px var(--navy-tint); }
.pw-search-submit { flex-shrink: 0; }

.pw-level-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.pw-lvl-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .875rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--white); color: var(--dark-2);
  font-size: .85rem; text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.pw-lvl-btn:hover { border-color: var(--navy-tint); color: var(--navy); }
.pw-lvl-btn.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pw-lvl-btn .count { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); }
.pw-lvl-btn.active .count { color: rgba(255,255,255,.7); }

/* Riga categorie */
.pw-cat-row {
  display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap;
  margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
}
.pw-cat-label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-shrink: 0;
}
.pw-cat-row .pw-cat-filter { margin-bottom: 0; }
.pw-cat-btn { display: inline-flex; align-items: center; gap: .35rem; }
.pw-cat-btn .count { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); }
.pw-cat-btn.active .count { color: rgba(255,255,255,.7); }

/* Alias badge categoria per gli slug reali del progetto — stessa
   tripartizione cromatica di catFamily()/CoverGenerator::resolveAccent():
   arancio front-end, ciano back-end, navy pieno sicurezza. */
.badge-sicurezza { background: var(--navy); color: var(--white); }
.badge-frontend,
.badge-semantica { background: var(--orange-light); color: var(--orange-dark); }
.badge-backend   { background: var(--cyan-light);   color: var(--cyan-dark); }

/* Pillola in evidenza */
/* "Da dove iniziare" sulle pagine categoria (2026-10-07): prime pillole
   beginner in ordine di uscita. Stessa famiglia visiva del box
   "Per approfondire" delle pillole (fondo caldo, accento arancio). */
.pw-start-here {
  background: #FFF8F1; border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.125rem 1.25rem 1rem; margin: 0 0 2rem;
}
.pw-start-here-title {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 .625rem;
}
.pw-start-here-list { margin: 0; padding-left: 1.25rem; }
.pw-start-here-list li { margin-bottom: .375rem; }
.pw-start-here-list li:last-child { margin-bottom: 0; }
.pw-start-here-list a { color: var(--navy); font-weight: 500; text-underline-offset: 2px; }
.pw-start-here-list a:hover { color: var(--orange); }
.pw-start-here-time { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-left: .35rem; }

/* Lista "Cosa trovi su PillsWeb" in /chi-sono: link riconoscibili come tali
   (il contenitore .pw-article-surface non ha uno stile per i link). */
.pw-chi-sono-links a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.pw-chi-sono-links a:hover { color: var(--orange); }
.pw-chi-sono-links li { margin-bottom: .375rem; }

.pw-featured { margin: .25rem 0 2.5rem; }
.pw-featured-inner {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.pw-featured-body { padding: 2.25rem; display: flex; flex-direction: column; gap: 1rem; }
.pw-featured-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.pw-badge-featured { background: var(--orange-light); color: var(--orange-dark); }
.pw-featured-title { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; margin: 0; }
.pw-featured-title a { color: var(--dark); text-decoration: none; }
.pw-featured-title a:hover { color: var(--navy); }
.pw-featured-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }
.pw-featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: .25rem; }
.pw-featured-meta { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; }
.pw-featured-media { background: #0E1A26; position: relative; min-height: 240px; }
.pw-featured-media a, .pw-featured-media img { display: block; width: 100%; height: 100%; }
.pw-featured-media img { object-fit: cover; }
.pw-featured-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); }

/* Cover thumbnail nelle card (full-bleed in alto) — usata dalle card con
   un'immagine reale (screenshot progetto in /progetti). Le card delle
   pillole non la usano più: vedi .pw-cover-block qui sotto. */
.pw-card-cover {
  display: block; margin: -1.5rem -1.5rem 1rem; aspect-ratio: 1200 / 630;
  overflow: hidden; background: var(--warm);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pw-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Blocco copertina "sobrio" nelle card delle pillole (home, /pillole,
   salvate) — niente immagine generata: solo tinta + icona nella famiglia
   cromatica di categoria (front-end/back-end/sicurezza, vedi catFamily()
   in Helpers.php). La cover con badge/pattern/logo resta riservata alla
   condivisione social (CoverGenerator, og:image).
   Altezza fissa (non aspect-ratio): con l'aspect-ratio 1200/480 di prima,
   su una card di ~360-400px il blocco veniva ~145-160px per una riga sola
   di testo — molto spazio colorato vuoto sopra/sotto l'etichetta. Un'altezza
   fissa e bassa resta una striscia proporzionata al suo contenuto a
   qualunque larghezza di card. */
.pw-cover-block {
  display: flex; align-items: center; gap: .55rem;
  margin: -1.5rem -1.5rem 1rem; padding: 0 1.25rem;
  height: 3rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.pw-cover-block i { flex: 0 0 auto; } /* dimensione impostata inline da pwIcon() */
.pw-cover-block span {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.pw-cover-block.fe          { background: var(--orange-light); }
.pw-cover-block.fe i,
.pw-cover-block.fe span     { color: var(--orange-dark); }
.pw-cover-block.be          { background: var(--cyan-light); }
.pw-cover-block.be i,
.pw-cover-block.be span     { color: var(--cyan-dark); }
.pw-cover-block.sec         { background: var(--navy-tint); }
.pw-cover-block.sec i,
.pw-cover-block.sec span    { color: var(--navy); }

/* Titolo card (h2 al posto di h3, stessa resa di .article-card h3 sopra —
   inclusi il font-size maggiorato e il margin-top dedicato). */
.article-card .card-title { font-size: 1.3125rem; line-height: 1.3; margin: .375rem 0 0; }

/* Titolo cliccabile nei box pillola (home, /pillole, correlate): stesso colore
   del testo non linkato, nessun cambio colore al rollover — solo sottolineatura,
   per non introdurre un accento cromatico nuovo rispetto al resto della grafica. */
.article-card .card-title a,
.article-card h3 a { color: var(--dark); text-decoration: none; }
.article-card .card-title a:hover,
.article-card h3 a:hover { text-decoration: underline; }
/* Box "Pillole correlate": l'intera card è già un unico link (vedi
   pillole/dettaglio.php) — il rollover sottolinea il titolo per coerenza
   visiva con gli altri due contesti, senza bisogno di un <a> annidato. */
a.article-card:hover h3 { text-decoration: underline; }

/* Paginazione numerata */
.pw-pagination-nums { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; margin-top: 3rem; }
.pw-pagination-nums a, .pw-pagination-nums .current, .pw-pagination-nums .gap {
  min-width: 2.4rem; height: 2.4rem; padding: 0 .75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white); color: var(--dark-2); text-decoration: none;
  font-size: .9rem; transition: var(--transition);
}
.pw-pagination-nums a:hover { border-color: var(--navy); color: var(--navy); }
.pw-pagination-nums .current { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
.pw-pagination-nums .gap { border: none; background: transparent; color: var(--muted); min-width: auto; padding: 0 .25rem; }
.pw-pagination-nums .nav-prev, .pw-pagination-nums .nav-next { font-weight: 600; }
.pw-pagination-nums svg.flip { transform: rotate(180deg); }

/* Chiedi una pillola — CTA scura */
.pw-chiedi { background: var(--navy); color: var(--white); border-radius: var(--radius-lg); padding: 2.5rem; margin-top: 3.5rem; }
.pw-chiedi-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; }
.pw-chiedi-text { flex: 1 1 340px; }
.pw-chiedi .section-label { color: var(--orange); margin-bottom: .75rem; }
.pw-chiedi h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 .5rem; color: var(--white); }
.pw-chiedi p { color: rgba(255,255,255,.7); margin: 0; font-size: .95rem; max-width: 520px; line-height: 1.55; }
.pw-chiedi-form { display: flex; gap: .5rem; flex: 1 1 360px; flex-wrap: wrap; }
.pw-chiedi-form input {
  flex: 1 1 220px; padding: .8rem 1.1rem;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); color: var(--white); font-size: .95rem; font-family: var(--font-body);
}
.pw-chiedi-form input::placeholder { color: rgba(255,255,255,.45); }
.pw-chiedi-form input:focus { outline: none; border-color: var(--cyan); background: rgba(255,255,255,.1); }
.pw-chiedi-msg { margin: 1rem 0 0; font-size: .9rem; }
.pw-chiedi-msg.ok  { color: #86EFAC; }
.pw-chiedi-msg.err { color: #FCA5A5; }
.pw-chiedi-guest { flex: 1 1 360px; margin: 0; font-size: .95rem; color: rgba(255,255,255,.8); }
.pw-chiedi-guest a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.pw-chiedi-guest a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
  .pw-featured-media { min-height: 200px; order: -1; }
  .pw-tools-row { flex-direction: column; align-items: stretch; }
  /* .pw-search-form eredita "flex: 1 1 340px" pensato per la riga desktop:
     con .pw-tools-row diventato a colonna, quel 340px si applica all'asse
     verticale (altezza) invece che alla larghezza, gonfiando a dismisura
     il pulsante "Cerca" (align-items:stretch). Riporta il basis ad auto. */
  .pw-search-form { flex: 0 1 auto; }
  .pw-level-filter { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════
   Avatar automatico (iniziali colorate) — Fase 3
══════════════════════════════════════════════════════ */
.pw-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  color: #fff; font-family: var(--font-title); font-weight: 700; font-size: .85rem;
  flex: 0 0 auto; line-height: 1;
}
.pw-avatar-lg { width: 3rem; height: 3rem; font-size: 1.2rem; }
.pw-verificata { color: var(--navy); font-size: .85rem; cursor: help; }