/* ============================================================
   Pistakkio® Tools — design system condiviso
   tools.pistakkio.net/assets/pk.css

   Conforme alle Pistakkio® Brand Guidelines v1.1:
   - CTA sempre verde #b8dc16 con testo scuro #1e2228
   - Il verde non si usa mai come testo su bianco (contrasto)
   - Etichette su fondo chiaro in viola #8f0060, su fondo scuro in arancio
   - Link viola con sottolineatura sempre attiva
   - Focus visibile: outline 2px viola
   - Poppins 700/800 per i titoli, Lora per il corpo
   ============================================================ */

/* ---------- Token: palette chiara completa su :root nudo ---------- */
:root{
  /* Palette Pistakkio® — valori ufficiali, non modificare */
  --green:#b8dc16;
  --purple:#8f0060;
  --orange:#ffc106;
  --violet:#9b10eb;
  --yellow:#f2e70c;
  --dark:#1e2228;

  /* Superfici — fondo bianco come da guidelines */
  --ground:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6f6f1;
  --line:#e4e4dc;
  --line-strong:#c9c9bd;

  /* Testo */
  --ink:#1e2228;
  --ink-muted:#5a615c;
  --ink-faint:#868c86;

  /* CTA — costante di brand in entrambi i temi */
  --cta-bg:#b8dc16;
  --cta-text:#1e2228;

  /* Etichette e link, versioni sicure per il contrasto */
  --label:#8f0060;
  --link:#8f0060;

  /* Accento grafico (barre, anelli, bordi) e la sua variante testuale */
  --accent:#b8dc16;
  --accent-text:#8f0060;

  /* Accenti di categoria: --group è grafico, --group-text è leggibile */
  --g-seo:#9b10eb;        --g-seo-text:#7a0cc0;
  --g-biz:#8f0060;        --g-biz-text:#8f0060;
  --g-desk:#ffc106;       --g-desk-text:#8a5d00;

  /* Fasi del timer */
  --focus-graphic:#b8dc16;  --focus-text:#8f0060;
  --break-graphic:#ffc106;  --break-text:#8a5d00;

  --track:#e8e8df;
  --shadow:0 18px 44px rgba(30,34,40,.10);
  --shadow-sm:0 6px 18px rgba(30,34,40,.07);

  --font-heading:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Lora',Georgia,serif;
  --radius:8px;
  --radius-card:12px;
  --shell:1200px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1e2228;
    --surface:#262b32;
    --surface-2:#2e343c;
    --line:#3a414a;
    --line-strong:#4c545e;

    --ink:#ffffff;
    --ink-muted:#b4bab3;
    --ink-faint:#848b85;

    --label:#ffc106;
    --link:#b8dc16;

    --accent:#b8dc16;
    --accent-text:#b8dc16;

    --g-seo:#b44cf5;        --g-seo-text:#c374f7;
    --g-biz:#ef6fc0;        --g-biz-text:#ef6fc0;
    --g-desk:#ffc106;       --g-desk-text:#ffc106;

    --focus-graphic:#b8dc16;  --focus-text:#b8dc16;
    --break-graphic:#ffc106;  --break-text:#ffc106;

    --track:#343b43;
    --shadow:0 22px 56px rgba(0,0,0,.45);
    --shadow-sm:0 8px 22px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"]{
  --ground:#1e2228;
  --surface:#262b32;
  --surface-2:#2e343c;
  --line:#3a414a;
  --line-strong:#4c545e;

  --ink:#ffffff;
  --ink-muted:#b4bab3;
  --ink-faint:#848b85;

  --label:#ffc106;
  --link:#b8dc16;

  --accent:#b8dc16;
  --accent-text:#b8dc16;

  --g-seo:#b44cf5;        --g-seo-text:#c374f7;
  --g-biz:#ef6fc0;        --g-biz-text:#ef6fc0;
  --g-desk:#ffc106;       --g-desk-text:#ffc106;

  --focus-graphic:#b8dc16;  --focus-text:#b8dc16;
  --break-graphic:#ffc106;  --break-text:#ffc106;

  --track:#343b43;
  --shadow:0 22px 56px rgba(0,0,0,.45);
  --shadow-sm:0 8px 22px rgba(0,0,0,.35);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.2}

/* ---------- Header condiviso ---------- */
.pk-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.pk-header-inner{
  max-width:var(--shell);margin:0 auto;
  padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.pk-brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-heading);font-weight:700;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);text-decoration:none;
  transition:color .2s;
}
.pk-brand:hover{color:var(--ink)}
.pk-brand strong{color:var(--ink);font-weight:800}
.pk-seed{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}

.pk-header-actions{display:flex;align-items:center;gap:8px}

/* Menu "Tutti i tool": <details> nativo, nessun JavaScript.
   I link restano nell'HTML grezzo, quindi crawlabili. */
.pk-menu{position:relative}
.pk-menu > summary{
  list-style:none;cursor:pointer;user-select:none;
  font-family:var(--font-heading);font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);
  border:1px solid var(--line-strong);border-radius:6px;padding:9px 16px;
  display:flex;align-items:center;gap:8px;
  transition:border-color .2s,color .2s;
}
.pk-menu > summary::-webkit-details-marker{display:none}
.pk-menu > summary::after{content:"▾";font-size:.8rem;line-height:1}
.pk-menu[open] > summary::after{content:"▴"}
.pk-menu > summary:hover{border-color:var(--accent);color:var(--ink)}

.pk-menu-panel{
  position:absolute;right:0;top:calc(100% + 9px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:20px;min-width:290px;
  display:flex;flex-direction:column;gap:18px;
}
.pk-menu-group{display:flex;flex-direction:column;gap:5px}
.pk-menu-label{
  font-family:var(--font-heading);font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--group-text,var(--label));
  padding-bottom:6px;margin-bottom:4px;
  border-bottom:3px solid var(--group,var(--accent));
}
.pk-menu-group a{
  color:var(--ink);text-decoration:none;font-size:.95rem;
  padding:5px 0;transition:color .2s;
}
.pk-menu-group a:hover{color:var(--group-text,var(--link));text-decoration:underline}
.pk-menu-group a[aria-current="page"]{color:var(--group-text,var(--link));font-weight:600}
.pk-menu-group.seo{--group:var(--g-seo);--group-text:var(--g-seo-text)}
.pk-menu-group.biz{--group:var(--g-biz);--group-text:var(--g-biz-text)}
.pk-menu-group.desk{--group:var(--g-desk);--group-text:var(--g-desk-text)}
.pk-menu-soon{font-size:.88rem;color:var(--ink-faint);font-style:italic;padding:5px 0}

.pk-theme{
  background:none;border:1px solid var(--line-strong);color:var(--ink-muted);
  font-family:var(--font-heading);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 15px;border-radius:6px;cursor:pointer;
  transition:border-color .2s,color .2s;
}
.pk-theme:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- Shell ---------- */
.pk-shell{max-width:var(--shell);margin:0 auto;padding:48px 24px 80px}
.pk-shell.narrow{max-width:640px}

/* ---------- Footer condiviso ---------- */
.pk-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
}
.pk-footer-inner{
  max-width:var(--shell);margin:0 auto;padding:30px 24px;
  text-align:center;font-size:.88rem;color:var(--ink-faint);
  display:flex;flex-direction:column;gap:7px;
}
.pk-footer a{color:var(--link);text-decoration:underline;font-weight:600}
.pk-footer strong{color:var(--ink-muted);font-weight:600}

/* ---------- Bottoni ---------- */
.pk-btn{
  font-family:var(--font-heading);font-weight:700;font-size:.95rem;
  border-radius:6px;cursor:pointer;
  padding:14px 28px;border:1px solid transparent;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease,filter .2s,border-color .2s,color .2s;
}
.pk-btn:active{transform:translateY(1px)}
/* CTA: verde con testo scuro, in entrambi i temi — regola di brand */
.pk-btn-primary{background:var(--cta-bg);color:var(--cta-text);border-color:var(--cta-bg)}
.pk-btn-primary:hover{filter:brightness(1.06)}
.pk-btn-ghost{background:transparent;color:var(--ink-muted);border-color:var(--line-strong)}
.pk-btn-ghost:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- Pannelli ---------- */
.pk-panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);padding:26px;
  display:flex;flex-direction:column;gap:16px;
}
.pk-panel-title{
  font-family:var(--font-heading);font-weight:700;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--label);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pk-tag{
  font-family:var(--font-heading);font-weight:700;font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:4px;
  background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--line);
}
.pk-hint{font-size:.9rem;color:var(--ink-muted);line-height:1.6}
.pk-hint.warn{color:var(--break-text)}

/* Barra accento sotto i titoli: 3-4px, 60-80px — da guidelines */
.pk-rule{width:72px;height:4px;background:var(--accent);border-radius:2px;margin-top:14px}

/* ---------- Link inline: viola, sottolineatura sempre attiva ---------- */
.pk-prose a{color:var(--link);text-decoration:underline;font-weight:600}

/* ---------- Focus visibile: viola, da guidelines ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--purple);outline-offset:2px;
}
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] summary:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] textarea:focus-visible{
  outline-color:var(--green);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) a:focus-visible,
  :root:not([data-theme="light"]) button:focus-visible,
  :root:not([data-theme="light"]) summary:focus-visible,
  :root:not([data-theme="light"]) input:focus-visible,
  :root:not([data-theme="light"]) textarea:focus-visible{
    outline-color:var(--green);
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media (max-width:600px){
  body{font-size:16px}
  .pk-header-inner{padding:11px 16px}
  .pk-brand{font-size:.68rem}
  .pk-shell{padding:30px 16px 52px}

  /* Il pannello va ancorato alla larghezza della testata, non al bottone
     stretto "Tutti i tool": con right:-6px calcolato sul solo bottone
     il pannello (quasi a piena larghezza) sfora fuori dallo schermo
     a sinistra. Spostando il contesto di posizionamento sul contenitore
     .pk-header-actions il right:0 si allinea al bordo destro reale
     della testata (dentro il padding), niente più overflow. */
  .pk-header-actions{position:relative}
  .pk-menu{position:static}
  .pk-menu-panel{min-width:auto;width:calc(100vw - 32px);right:0;left:auto}
}

/* Sotto i 360px (iPhone SE e simili) la testata non ci sta più su una riga:
   brand + menu "Tutti i tool" + tasto tema sforano e mandano l'intera
   pagina in overflow orizzontale, tagliando via il resto del contenuto. */
@media (max-width:360px){
  .pk-header-inner{gap:8px}
  .pk-brand{font-size:.6rem;gap:6px}
  .pk-header-actions{gap:6px}
  .pk-menu > summary{padding:8px 10px;font-size:.66rem;gap:5px}
  .pk-theme{padding:8px 10px;font-size:.66rem}
}