/*
 * Tema «ToBePolo nazionale» (30/9 notte, kit rilascio/tema-nazionale-30-9).
 * CEO: «Colore ToBePolo nazionale: fallo meglio, non mi piace così com'è con quel verde oliva come maschera».
 *
 * Vale solo con html[data-tbp-theme="tobepolo"]: i temi chiaro e scuro non cambiano.
 * Si carica dopo tbp-linguaggio.css (inc/appearance.php). Le tre proposte (A «Carta», B «Testata verde»,
 * C «Nebbia») hanno le stesse regole: cambia solo il blocco dei token qui sotto
 * (proposte/token/A.css, B.css, C.css; proposte/scegli.sh rifa' questo file).
 */
/* ===== TOKEN: proposta A «Carta» =====
   Fondo carta calda, intestazione dello stesso fondo e filo tricolore sotto l'intestazione.
   Il verde e il rosso del marchio restano negli accenti; il velo e' carta. */
html[data-tbp-theme="tobepolo"] {
  --tbn-fondo: #FAF6EE;               /* fondo pagina, pannelli di accesso, cassetto, sotto la mappa */
  --tbn-testata: #FAF6EE;             /* intestazione, anche quando resta attaccata in alto */
  --tbn-testata-testo: #084828;       /* titolo della Home */
  --tbn-testata-testo-2: #10261B;     /* firma, sottotitolo e frase della Home */
  --tbn-menu-fondo: #084828;          /* bottone del menu (telefono) */
  --tbn-menu-segno: #FFFFFF;
  --tbn-contorno-bordo: #084828;      /* «Diventa Mastro» nella Home */
  --tbn-contorno-fondo: #FFFFFF;
  --tbn-contorno-testo: #084828;
  --tbn-contorno-su: #EDF4EF;
  --tbn-fuoco: #084828;
  --tbn-filo: linear-gradient(90deg, #145E3F 0 33.34%, #FFFFFF 33.34% 66.67%, #D0161A 66.67%);
  --tbn-filo-h: 3px;
  --tbn-testata-linea: rgba(8, 72, 40, .10);
  --tbn-velo: #FAF6EE;                /* velo sui Paesi fuori dall'Italia */
  --tbn-velo-op: 1;                   /* pieno come l'intestazione: niente Paesi in trasparenza (Elind, 30/9) */
  --tbn-barra: rgba(255, 255, 255, .94);  /* barra in basso (telefono) */
  --tbn-stato: #FAF6EE;               /* barra di stato del telefono (meta theme-color) */
  --tbn-marchio-chiaro: none;         /* marchio della testata: versione trasparente di Starlight... */
  --tbn-marchio-scuro: none;          /* ...versione di Space Gray (ToBe bianco)... */
  --tbn-marchio-tessera: block;       /* ...o quadrato bianco con ToBe verde (CEO, 30/9): una sola e' «block» */
}

/* Il fondo della pagina segue i token: niente piu' sfumatura verde-rosa (--tbp-flag-wash la usano
   body::before, i pannelli di accesso, il cassetto e l'intestazione della Home). */
html[data-tbp-theme="tobepolo"] {
  --tbp-flag-wash: linear-gradient(var(--tbn-fondo), var(--tbn-fondo));
  /* Il grigio-verde dei testi secondari arrivava a 3,7:1 sul rosa: qui 5:1 su ogni fondo. */
  --tbp-muted: #557062;
}

/* Stesso strato dei temi chiaro e scuro (tbp-appearance.css): i suoi !important vincono sulle
   regole vecchie senza strato, e dentro lo strato vince il selettore piu' preciso. */
@layer tbp-appearance {

  /* 1. Intestazione piena.
     Chiaro e scuro le danno un fondo pieno; il tema ToBePolo no: tbp-ui-cleanup.css la rende
     trasparente e il bianco arrivava solo con la classe «stuck» di Flatsome, dopo circa 300 px.
     Fra 0 e 300 px il contenuto passava sotto il logo e la barra (CEO, 30/9, Comuni in inglese). */
  html[data-tbp-theme="tobepolo"] body[class] #header {
    background-color: var(--tbn-testata) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  html[data-tbp-theme="tobepolo"] body[class] #header .header-wrapper {
    background-color: var(--tbn-testata) !important;
    background-image: var(--tbn-filo) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: 100% var(--tbn-filo-h) !important;
    box-shadow: 0 1px 0 var(--tbn-testata-linea) !important;
  }
  html[data-tbp-theme="tobepolo"] body[class] #header :is(#masthead, .header-main, .header-bg-container, .header-bg-color, .header-top, .header-bottom) {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* 2. Testi e comandi dell'intestazione (il marchio chiaro/scuro lo sceglie gia' tbp-appearance.js
     guardando il colore che ha dietro). */
  html[data-tbp-theme="tobepolo"] body[class] #header .tbp-header-signature {
    color: var(--tbn-testata-testo-2) !important;
    -webkit-text-fill-color: var(--tbn-testata-testo-2) !important;
  }
  html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #header .tbp-home-map__title {
    color: var(--tbn-testata-testo) !important;
    -webkit-text-fill-color: var(--tbn-testata-testo) !important;
  }
  html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #header :is(.tbp-home-map__lede, .tbp-home-map__frase, .tbp-home-map__frase-pezzo) {
    color: var(--tbn-testata-testo-2) !important;
    -webkit-text-fill-color: var(--tbn-testata-testo-2) !important;
  }
  html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #header .tbp-home-map__azione--contorno {
    border-color: var(--tbn-contorno-bordo) !important;
    background: var(--tbn-contorno-fondo) !important;
    color: var(--tbn-contorno-testo) !important;
    -webkit-text-fill-color: var(--tbn-contorno-testo) !important;
  }
  @media (hover: hover) {
    html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #header .tbp-home-map__azione--contorno:hover { background: var(--tbn-contorno-su) !important; }
  }
  html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #header .tbp-home-map__azione:focus-visible { outline-color: var(--tbn-fuoco) !important; }
  html[data-tbp-theme="tobepolo"] body[class] #masthead .mobile-nav button[data-open="#main-menu"] {
    background: var(--tbn-menu-fondo) !important;
    color: var(--tbn-menu-segno) !important;
  }
  html[data-tbp-theme="tobepolo"] body[class] #masthead .mobile-nav .icon-menu,
  html[data-tbp-theme="tobepolo"] body[class] #masthead .mobile-nav .icon-menu::before {
    color: var(--tbn-menu-segno) !important;
  }

  /* 3. Velo sui Paesi fuori dall'Italia. Il canvas sfumato (js/tbp-mappa-paesi.js, 29/9) legge
     colore e opacita' da una sonda con questa classe: la sfumatura del bordo non cambia. */
  html[data-tbp-theme="tobepolo"] .tbp-velo-paesi {
    fill: var(--tbn-velo) !important;
    fill-opacity: var(--tbn-velo-op) !important;
  }

  /* 4. Sotto la mappa della Home il tema ToBePolo prendeva il fondo notte #121a18 del tema scuro
     (tbp-home-map.css li raggruppa): una striscia nera fra la mappa e il nastro dei territori. */
  html[data-tbp-theme="tobepolo"] body[class].tbp-home-map #tbp-home-map .tbp-map-frame {
    background: var(--tbn-fondo) !important;
  }

  /* 5. Barra in basso. */
  @media (max-width: 849px) {
    html[data-tbp-theme="tobepolo"] body[class].tbp-has-app-bar.tbp-has-app-bar #tbp-app-bar .tbp-app-bar__material {
      background: var(--tbn-barra) !important;
    }
  }

  /* 6. Ritagli del tema scuro rimasti nel tema ToBePolo (tbp-linguaggio.css, tbp-notifiche.css,
     tbp-ui-cleanup.css li raggruppano con «dark»): la X nera accanto ad AI Colombo, l'invito alle
     notifiche e gli avvisi del Mio account su fondo quasi nero. Tornano come nel tema chiaro:
     revert-layer toglie solo le regole di questo strato, il resto resta di chi lo possiede. */
  html[data-tbp-theme="tobepolo"] body[class] .tbp-colombo-chat__dismiss,
  html[data-tbp-theme="tobepolo"] body[class] .tbp-notifiche-invito,
  html[data-tbp-theme="tobepolo"] body[class] .tbp-notifiche-invito button.tbp-notifiche-invito__no {
    background: revert-layer !important;
    border-color: revert-layer !important;
    color: revert-layer !important;
    -webkit-text-fill-color: revert-layer !important;
  }
  html[data-tbp-theme="tobepolo"] body[class] .tbp-notifiche-invito :is(p, span, strong, .tbp-notifiche-invito__testo) {
    color: revert-layer !important;
    -webkit-text-fill-color: revert-layer !important;
  }
  html[data-tbp-theme="tobepolo"] body[class].woocommerce-account .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info),
  html[data-tbp-theme="tobepolo"] body[class].woocommerce-account .woocommerce > :is(.woocommerce-message, .woocommerce-info) {
    background: revert-layer !important;
    border-color: revert-layer !important;
    color: revert-layer !important;
    -webkit-text-fill-color: revert-layer !important;
  }
}

/* 7. Marchio della testata: le versioni sono gia' nella pagina e il CSS sceglie quale si vede
   (tbp-linguaggio.css, 23/9). CEO, 30/9: «in tobepolo nazionale theme, il logo deve essere bianco
   come in space gray, non trasparente come in starlight». Si vede la «tessera» (quadrato bianco
   dietro il pittogramma come in Space Gray, ToBe verde sulla testata chiara); il resto del sito
   la prende da js/tbp-appearance.js. */
@layer tbp-appearance {
  html[data-tbp-theme="tobepolo"] body[class] #header img.tbp-brand-lockup__img--chiaro { display: var(--tbn-marchio-chiaro) !important; }
  html[data-tbp-theme="tobepolo"] body[class] #header :is(img.tbp-brand-lockup__img--scuro, img.tbp-brand-lockup__img--tessera) {
    width: auto !important;
    max-width: min(100%, 62vw) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
  }
  html[data-tbp-theme="tobepolo"] body[class] #header img.tbp-brand-lockup__img--scuro { display: var(--tbn-marchio-scuro) !important; }
  html[data-tbp-theme="tobepolo"] body[class] #header img.tbp-brand-lockup__img--tessera { display: var(--tbn-marchio-tessera, none) !important; }
  /* Pagina senza la terza versione (HTML in cache di prima): resta il marchio chiaro, mai la testata vuota. */
  html[data-tbp-theme="tobepolo"] body[class] #header .tbp-brand-lockup:not(:has(img.tbp-brand-lockup__img--tessera)) img.tbp-brand-lockup__img--chiaro { display: block !important; }
}