/*
Theme Name: GPT Mobile Skin Toggle
Theme URI: https://stubo.it/
Author: GPT per Simone Biliotti
Author URI: https://stubo.it/
Description: Tema minimale ispirato all'interfaccia ChatGPT (mobile/desktop) con switch notte/giorno.
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpt-mobile-skin-toggle
*/

:root{
  /* Palette dark */
  --bg-dark:#020617;
  --bg-soft-dark:#0b1020;
  --bg-softer-dark:#111827;
  --border-soft-dark:#1f2937;
  --text-main-dark:#f9fafb;
  --text-soft-dark:#d1d5db;
  --muted-dark:#9ca3af;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,.18);
  --accent-soft2:rgba(34,197,94,.08);
  --shadow-dark:0 18px 45px rgba(15,23,42,.6);

  /* Palette light */
  --bg-light:#f9fafb;
  --bg-soft-light:#ffffff;
  --bg-softer-light:#e5e7eb;
  --border-soft-light:#d1d5db;
  --text-main-light:#111827;
  --text-soft-light:#4b5563;
  --muted-light:#6b7280;
  --shadow-light:0 16px 30px rgba(15,23,42,.12);

  --radius:18px;
  --radius-lg:22px;
  --maxw:1040px;
  --gutter:18px;
  --body-font:-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Stato di default: dark (come ChatGPT) */
body{
  margin:0;
  padding:0;
  font-family:var(--body-font);
  background:radial-gradient(circle at top, #1f2937 0, #020617 55%);
  color:var(--text-main-dark);
}

/* Modalità light */
body.theme-light{
  background:radial-gradient(circle at top, #e5e7eb 0, #f9fafb 60%);
  color:var(--text-main-light);
}

/* Wrapper app */

.gpt-app{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 12px 24px;
  box-sizing:border-box;
}

@media (min-width:768px){
  .gpt-app{
    padding:16px 16px 32px;
  }
}

.gpt-main{
  display:flex;
  gap:var(--gutter);
}

.gpt-content{
  flex:1 1 auto;
}

/* TOP BAR tipo ChatGPT mobile */
.gpt-topbar{
  position:sticky;
  top:0;
  z-index:20;
  margin:0 0 12px; /* tolti i margini negativi che allargavano oltre viewport */
  padding:10px 12px;
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

body.theme-dark .gpt-topbar{
  background:linear-gradient(90deg,rgba(15,23,42,.92),rgba(15,23,42,.8));
  border-bottom:1px solid rgba(15,23,42,1);
}

body.theme-light .gpt-topbar{
  background:linear-gradient(90deg,rgba(249,250,251,.94),rgba(249,250,251,.9));
  border-bottom:1px solid rgba(209,213,219,1);
}

.gpt-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.gpt-logo-circle{
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:700;
}

body.theme-dark .gpt-logo-circle{
  background:radial-gradient(circle at top,#22c55e,#15803d);
  color:#022c22;
}

body.theme-light .gpt-logo-circle{
  background:radial-gradient(circle at top,#16a34a,#22c55e);
  color:#022c22;
}

.gpt-topbar-title{
  display:flex;
  flex-direction:column;
}

.gpt-topbar-title-main{
  font-size:14px;
  font-weight:600;
}

.gpt-topbar-title-sub{
  font-size:11px;
  opacity:.8;
}

/* Pulsante switch tema */

.gpt-topbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.gpt-theme-toggle{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  padding:4px 9px;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  background:transparent;
}

body.theme-dark .gpt-theme-toggle{
  color:#e5e7eb;
  background:rgba(15,23,42,.9);
}

body.theme-light .gpt-theme-toggle{
  color:#111827;
  background:#ffffff;
}

/* Hero card semplice (contenuto) */

.hero-card{
  margin-top:8px;
  margin-bottom:16px;
  border-radius:var(--radius-lg);
  padding:16px 16px 18px;
  border:1px solid;
  box-shadow:var(--shadow-dark);
}

body.theme-dark .hero-card{
  background:var(--bg-soft-dark);
  border-color:var(--border-soft-dark);
  box-shadow:var(--shadow-dark);
}

body.theme-light .hero-card{
  background:var(--bg-soft-light);
  border-color:var(--border-soft-light);
  box-shadow:var(--shadow-light);
}

.hero-card h1{
  margin:0 0 8px;
  font-size:clamp(20px,3vw,26px);
}

.hero-card p{
  margin:0;
  font-size:14px;
  line-height:1.6;
}

/* Card post */

.post-card{
  border-radius:var(--radius);
  padding:18px;
  border:1px solid;
  margin-top:12px;
  margin-bottom:18px;
}

body.theme-dark .post-card{
  background:var(--bg-soft-dark);
  border-color:var(--border-soft-dark);
}

body.theme-light .post-card{
  background:var(--bg-soft-light);
  border-color:var(--border-soft-light);
}

.post-title{
  font-size:22px;
  margin:0 0 6px;
}

.post-title a{
  text-decoration:none;
}

body.theme-dark .post-title a{
  color:var(--text-main-dark);
}

body.theme-light .post-title a{
  color:var(--text-main-light);
}

.post-title a:hover{
  text-decoration:underline;
}

.post-meta{
  font-size:12px;
  margin-bottom:10px;
}

body.theme-dark .post-meta{
  color:var(--muted-dark);
}

body.theme-light .post-meta{
  color:var(--muted-light);
}

.post-content{
  font-size:15px;
}

body.theme-dark .post-content{
  color:var(--text-soft-dark);
}

body.theme-light .post-content{
  color:var(--text-soft-light);
}

.site-footer{
  margin-top:24px;
  font-size:12px;
  text-align:center;
}

body.theme-dark .site-footer{
  color:var(--muted-dark);
}

body.theme-light .site-footer{
  color:var(--muted-light);
}

/* Scrollbar sempre presente (per non far saltare il layout) */
html{
  overflow-y:scroll;
}

/* Header HTML personalizzabile sopra tutto */
.gpt-custom-header-wrap{
  width:100%;
}

.gpt-custom-header-inner{
  max-width:1040px;
  margin:0 auto;
  padding:8px 12px;
  box-sizing:border-box;
}

/* === HEADER MOBILE ALLINEATA AL CONTENUTO (STESSA LARGHEZZA) === */
.gpt-custom-header-wrap{
  width:100%;
}

.gpt-custom-header-inner{
  max-width:1040px;      /* uguale a .gpt-app */
  margin:0 auto;
  padding:10px 12px;
  box-sizing:border-box;
}

/* Font leggermente più grande nella header per leggibilità */
.gpt-custom-header-inner .gpt-notice-hero{
  font-size:14px;
}
/* === MICRO DESKTOP SOTTO, HEADER MOBILE SOPRA === */

/* Assicuriamo base coerente per layout fluido */
html, body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden; /* niente scroll orizzontale */
}

/* Header HTML personalizzata: stessa larghezza logica della pagina */
.gpt-custom-header-wrap{
  width:100%;
}
.gpt-custom-header-inner{
  max-width:1040px;
  margin:0 auto;
  padding:10px 12px;
  box-sizing:border-box;
}
.gpt-custom-header-inner .gpt-notice-hero{
  font-size:14px; /* header ben leggibile */
}

/* Contenuto sotto in modalità “micro-desktop” ma perfettamente aderente ai margini */
/* trucco: larghezza = 100%/scale, trasformata con scale => visivamente 100% */
.gpt-desktop-mini{
  width:calc(100% / 0.7);
  max-width:calc(1040px / 0.7);
  margin:0 auto;
  transform:scale(0.7);
  transform-origin:top center;
}

/* Dentro il micro-desktop, l’app usa la sua larghezza standard */
.gpt-desktop-mini .gpt-app{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:12px 12px 24px;
  box-sizing:border-box;
}

/* Su schermi grandi (desktop vero) niente effetto micro: torna normale */
@media (min-width: 992px){
  .gpt-desktop-mini{
    width:100%;
    max-width:1040px;
    transform:none;
  }
}

/* Evitiamo overflow orizzontali da elementi interni classici */
img, iframe, video, table{
  max-width:100%;
}
pre, code{
  white-space:pre-wrap;
  word-wrap:break-word;
}

/* === CORREZIONE ALLINEAMENTO: MICRO DESKTOP ADERENTE AI MARGINI === */
.gpt-desktop-mini{
  width:calc(100% / 0.7);   /* larghezza logica più grande, poi scalata a 100% */
  max-width:none;
  margin:0;                 /* attaccato al bordo sinistro del viewport */
  transform:scale(0.7);
  transform-origin:top left;/* scala ancorata all'angolo in alto a sinistra */
}

.gpt-desktop-mini .gpt-app{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:12px 12px 24px;
  box-sizing:border-box;
}

/* Evitiamo qualunque scroll laterale della pagina */
html, body{
  overflow-x:hidden;
}



/* =====================
 * CONSOLE HEADER WIN95
 * ===================== */

.gpt-custom-header-wrap{
  width:100%;
  margin:0 auto 16px;
}

.gpt-custom-header-inner{
  max-width:960px;
  margin:0 auto;
}

.gpt-notice-hero.gpt-notice{
  background:#c0c0c0;
  border:2px solid #000000;
  border-radius:3px;
  box-shadow:none;
  overflow:hidden;
}

/* Barra del titolo blu */
.gpt-notice-hero .notice-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-bottom:1px solid #000000;
  background:#000080;
  color:#ffffff;
}

.gpt-notice-hero .head-left{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Icona stile vecchia app */
.gpt-notice-hero .crest{
  width:20px;
  height:20px;
  border-radius:0;
  border:1px solid #000000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:11px;
  background:#c0c0c0;
  color:#000000;
}

.gpt-notice-hero .crest .ring{
  width:auto;
  height:auto;
  border:none;
  background:transparent;
}

.gpt-notice-hero .head-title{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}

.gpt-notice-hero .service-name{
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  font-weight:bold;
  white-space:nowrap;
}

.gpt-notice-hero .microBadge{
  display:inline;
  padding:0;
  margin-top:1px;
  border-radius:0;
  background:transparent;
  color:#ffffff;
  font-size:10px;
  font-weight:normal;
}

.gpt-notice-hero .service-sub{
  display:none;
}

.gpt-notice-hero .notice-body{
  padding:10px 10px 12px;
  font-size:12px;
}

.gpt-notice-hero h1{
  margin:0 0 8px;
  font-size:14px;
  font-weight:bold;
}

.gpt-notice-hero h1 em{
  font-style:normal;
  text-decoration:underline;
}

/* Layout interna console */
.heroPanel{
  display:grid;
  grid-template-columns: minmax(0,3fr);
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
}

@media(max-width:860px){
  .heroPanel{
    grid-template-columns:1fr;
  }
}

/* Box copertura stile group box */
.coverageHero{
  border-radius:0;
  padding:6px 6px;
  background:#c0c0c0;
  border:1px solid #808080;
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.coverageHero .title{
  font-weight:bold;
  margin-bottom:2px;
  font-size:12px;
}

.coverageHero .sub{
  font-size:11px;
}

.coverageHero .coverageMap{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  border-radius:0;
  border:1px solid #808080;
  padding:2px 4px;
}

/* Pulsanti stile Windows 95 */
.ctaRow{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ctaRow .cta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:0;
  border:2px solid #ffffff;
  border-right-color:#404040;
  border-bottom-color:#404040;
  background:#d4d0c8;
  font-size:11px;
  font-weight:normal;
  color:#000000;
  text-decoration:none;
}

.ctaRow .cta small{
  font-size:9px;
}

.ctaRow .cta.call,
.ctaRow .cta.wa{
  background:#d4d0c8;
}

/* Lista passaggi */
.quickSteps{
  margin:8px 0 0;
  padding-left:18px;
  font-size:11px;
}

.quickSteps .n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:0;
  background:#c0c0c0;
  border:1px solid #808080;
  font-size:9px;
  font-weight:bold;
  margin-right:4px;
}

/* Servizi chip */
.services{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.services .chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:0;
  background:#d4d0c8;
  border:1px solid #808080;
  font-size:10px;
}

/* Logo in barra titolo */
.gpt-custom-header-inner-console .head-logo{
  display:flex;
  align-items:center;
  margin-right:6px;
}
.gpt-custom-header-inner-console .head-logo img{
  display:block;
  max-height:20px;
  width:auto;
}

/* Immagine mappa copertura */
.gpt-custom-header-inner-console .coverageMapImg{
  margin-top:6px;
}
.gpt-custom-header-inner-console .coverageMapImg img{
  display:block;
  max-width:120px;
  height:auto;
  border:1px solid #808080;
}

/* Variante più leggibile: font e bottoni un po' più grandi, wa verde */
.gpt-custom-header-inner-console .notice-body{
  font-size:13px;
}
.gpt-custom-header-inner-console .notice-body h1{
  font-size:15px;
}
.gpt-custom-header-inner-console .ctaRow .cta{
  padding:6px 16px;
  font-size:12px;
}
.gpt-custom-header-inner-console .ctaRow .cta small{
  font-size:10px;
}
.gpt-custom-header-inner-console .ctaRow .cta.wa{
  background:#25D366;
  color:#ffffff;
  border-color:#ffffff;
  border-right-color:#1e7f42;
  border-bottom-color:#1e7f42;
}
.gpt-custom-header-inner-console .ctaRow .cta.wa small{
  color:#eafaf0;
}

/*
 * Touch targets helper per header HTML personalizzata (classi STUBO).
 * Migliora dimensione e spaziatura dei controlli su dispositivi touch.
 */
@media (pointer: coarse){
  .stubo-logo-phone,
  .stubo-btn,
  .stubo-quick-pill{
    font-size:1rem;
    padding:10px 16px;
    min-height:44px;
  }

  /* Mantieni le pill più compatte rispetto ai bottoni */
  .stubo-quick-pill{
    padding:8px 14px;
  }
}