/*
 * Teekonda Guide Engine — shared stylesheet
 * Caricato UNA sola volta dal sito (via wp_enqueue_style), non più duplicato
 * dentro ogni singolo post. Le regole sono identiche al layout Naples originale,
 * solo spostate fuori dal post_content per leggerezza e cache del browser.
 */

/* Header trasparente in cima alla pagina "Travel Guides" (page-id-7877).
   Sui singoli post il tema Salient marca l'header come trasparente lui
   stesso (attributo data-transparent-header="true" già nell'HTML), letto
   dal suo script di inizializzazione. Su questa pagina quell'attributo non
   viene mai emesso, quindi lo script del tema salta l'inizializzazione e
   qualunque tentativo di "sistemarlo" via JS dopo il caricamento arriva
   sempre troppo tardi (quel controllo lo fa una volta sola). Una regola CSS
   con !important non ha invece nessun problema di tempistica: si applica al
   primo paint, prima che qualsiasi script giri. Il passaggio a header
   solido allo scroll oltre l'hero resta gestito da tk-guide.js
   (tkHeaderSolidOnScroll), che a quel punto non deve più vincere nessuna
   corsa contro il caricamento della pagina. */
body.page-id-7877 #header-outer {
  background-color: transparent !important;
}

/* Nasconde l'intero header standard di Salient (#page-header-bg: immagine
   di sfondo, categoria, titolo, autore, commenti, tempo di lettura) sulle
   pagine guida: il nostro layout ha già il suo hero con titolo e immagine.
   #page-header-bg ha anche un'altezza fissa via inline style (es. 550px),
   che display:none elimina insieme al resto — niente più spazio bianco.
   Questo file si carica SOLO sui post con dati guida, quindi non tocca
   il resto del sito. */
#page-header-bg {
  display: none !important;
}
/* Il tema riserva sempre 80px di spazio sopra il contenuto (per il vecchio
   header). Con l'hero a schermo intero non serve: la togliamo e lasciamo
   che l'hero arrivi fino in cima, sotto la nav trasparente in overlay
   (nav e trasparenza gestite via JS in tk-guide.js). */
.container-wrap {
  padding-top: 0 !important;
}
/* Stesso discorso in fondo: 80px di padding standard del tema lasciavano
   una barra bianca prima della sezione "Next Post" di Salient. */
.content-inner {
  padding-bottom: 0 !important;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

.tk-guide, .tk-guide *{
  box-sizing:border-box;
}
.tk-guide{
  --bg:#061115;
  --bg-2:#0a222a;
  --bg-3:#0d262f;
  --card:#12343d;
  --line:rgba(247,244,238,.12);
  --text:#f7f4ee;
  --muted:rgba(247,244,238,.76);
  --soft:rgba(247,244,238,.56);
  --accent:#1cabb0;
  --accent-hover:#27bfc5;
  --gold:#c9a15a;
  --gold-soft:rgba(201,161,90,.16);
  --radius:22px;
  --shadow:0 24px 60px rgba(0,0,0,.30);
  font-family:'Montserrat', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  line-height:1.6;
}
.tk-guide a{ color:inherit; text-decoration:none; }
.tk-guide .tkg-wrap{ width:min(1120px, calc(100% - 48px)); margin:0 auto; }

.tk-guide .tkg-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  background:#04191f;
}
.tk-guide .tkg-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%;
}
.tk-guide .tkg-hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(4,12,15,.94) 0%, rgba(4,14,18,.55) 45%, rgba(4,16,20,.14) 100%),
    radial-gradient(circle at 82% 12%, rgba(28,171,176,.20), transparent 30%);
}
.tk-guide .tkg-hero-inner{ position:relative; z-index:2; width:100%; padding:64px 0 48px; }
.tk-guide .tkg-crumb{
  display:flex; align-items:center; gap:8px; margin-bottom:22px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--soft);
}
.tk-guide .tkg-crumb a{ color:var(--accent); }
.tk-guide .tkg-crumb a:hover{ color:var(--accent-hover); }
.tk-guide .tkg-eyebrow{
  display:inline-block; margin-bottom:16px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:700;
}
.tk-guide h1{
  margin:0 0 20px; max-width:90%;
  font-size:clamp(38px, 5.6vw, 68px); line-height:1.02; letter-spacing:-.03em; font-weight:800;
}
.tk-guide .tkg-lede{
  max-width:90%; font-family:'Montserrat', Arial, sans-serif; font-style:italic; font-weight:500;
  font-size:clamp(18px, 1.9vw, 23px); line-height:1.55; color:var(--muted); margin:0 0 28px;
}
.tk-guide .tkg-pills{ display:flex; flex-wrap:wrap; gap:10px; list-style:none !important; padding:0; margin:0 0 30px; }
.tk-guide .tkg-pills li{
  list-style:none !important;
  background:rgba(247,244,238,.08); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:13px; font-weight:600;
}
.tk-guide .tkg-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.tk-guide .tkg-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px;
  border-radius:999px; font-size:14px; font-weight:700; letter-spacing:.03em; transition:all .25s ease;
}
.tk-guide .tkg-btn-primary{ background:linear-gradient(135deg, var(--accent), #35d1c9); color:#041012; box-shadow:var(--shadow); }
.tk-guide .tkg-btn-primary:hover{ background:linear-gradient(135deg, var(--accent-hover), #4be0d7); transform:translateY(-2px); }
.tk-guide .tkg-btn-ghost{ border:1px solid rgba(247,244,238,.22); color:var(--text); }
.tk-guide .tkg-btn-ghost:hover{ background:rgba(247,244,238,.06); }

.tk-guide .tkg-nav{
  position:sticky; top:0; z-index:20; background:rgba(6,17,21,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
}
.tk-guide .tkg-nav::-webkit-scrollbar{ display:none; }
.tk-guide .tkg-nav-row{ display:flex; gap:6px; padding:14px 0; white-space:nowrap; }
.tk-guide .tkg-nav-row a{
  font-size:13px; font-weight:600; color:var(--soft); padding:8px 14px; border-radius:999px; transition:all .2s ease;
}
.tk-guide .tkg-nav-row a:hover{ color:var(--text); background:rgba(247,244,238,.06); }
.tk-guide .tkg-nav-row a.is-active{ color:#041012; background:var(--accent); }

.tk-guide .tkg-glance{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin:56px 0;
}
.tk-guide .tkg-glance-item{ background:var(--bg-2); padding:22px 18px; }
.tk-guide .tkg-glance-item span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--soft); margin-bottom:8px; font-weight:700; }
.tk-guide .tkg-glance-item strong{ font-size:16px; font-weight:700; }

.tk-guide .tkg-section{ padding:64px 0; }
.tk-guide .tkg-section-alt{ background:var(--bg-2); }
.tk-guide .tkg-head{ margin-bottom:32px; max-width:90%; }
.tk-guide .tkg-kicker{ color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; display:block; }
.tk-guide .tkg-head h2{ margin:0 0 12px; font-size:clamp(26px, 3.4vw, 40px); line-height:1.1; font-weight:800; letter-spacing:-.03em; }
.tk-guide .tkg-head p{ margin:0; color:var(--muted); font-size:16px; line-height:1.75; }

.tk-guide .tkg-feel{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; }
.tk-guide .tkg-feel-list{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.tk-guide .tkg-feel-list li{ display:flex; gap:14px; padding:16px 18px; background:var(--card); border-radius:16px; border:1px solid var(--line); font-size:14px; color:var(--muted); line-height:1.6; }
.tk-guide .tkg-feel-list li i{ color:var(--accent); font-style:normal; font-weight:700; }
.tk-guide .tkg-quote{
  background:var(--bg-3); border:1px solid var(--line); border-radius:20px; padding:30px; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
}
.tk-guide .tkg-quote p{ font-family:'Montserrat', Arial, sans-serif; font-style:italic; font-weight:500; font-size:22px; line-height:1.5; margin:0; color:var(--text); }
.tk-guide .tkg-quote span{ display:block; margin-top:16px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); font-weight:700; }

.tk-guide .tkg-weather{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; }
.tk-guide .tkg-wheel-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.tk-guide .tkg-wheel-legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.tk-guide .tkg-wheel-legend span{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--soft); font-weight:600; }
.tk-guide .tkg-wheel-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--soft); }
.tk-guide .tkg-wheel-legend i.is-best{ background:var(--gold); }
.tk-guide .tkg-seasons{ display:grid; gap:14px; }
.tk-guide .tkg-season-row{
  display:grid; grid-template-columns:52px 1fr; gap:16px; padding:18px 20px; border-radius:16px;
  border:1px solid var(--line); background:var(--card);
}
.tk-guide .tkg-season-row.is-best{ border-color:rgba(201,161,90,.5); background:linear-gradient(135deg, rgba(201,161,90,.10), var(--card)); }
.tk-guide .tkg-season-row .tkg-season-mark{ font-family:'Montserrat', Arial, sans-serif; font-weight:800; font-size:22px; color:var(--accent); }
.tk-guide .tkg-season-row.is-best .tkg-season-mark{ color:var(--gold); }
.tk-guide .tkg-season-row h3{ margin:0 0 6px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:10px; }
.tk-guide .tkg-badge-best{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#3a2c0f; background:var(--gold); padding:3px 9px; border-radius:999px; }
.tk-guide .tkg-season-row p{ margin:0; font-size:14px; color:var(--muted); line-height:1.65; }

.tk-guide .tkg-grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.tk-guide .tkg-grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.tk-guide .tkg-check{
  display:flex; gap:12px; padding:20px; border-radius:16px; border:1px solid var(--line); background:var(--card); font-size:14px; color:var(--muted); line-height:1.6;
}
.tk-guide .tkg-check i{ color:var(--accent); font-weight:700; flex:0 0 auto; }

.tk-guide .tkg-area-card{ padding:24px; border-radius:18px; border:1px solid var(--line); background:var(--card); }
.tk-guide .tkg-area-card span{ color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:10px; }
.tk-guide .tkg-area-card h3{ margin:0 0 10px; font-size:20px; font-weight:700; }
.tk-guide .tkg-area-card p{ margin:0; font-size:14px; color:var(--muted); line-height:1.7; }

.tk-guide .tkg-gallery{ position:relative; }
.tk-guide .tkg-gallery-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:none;
}
.tk-guide .tkg-gallery-track::-webkit-scrollbar{ display:none; }
.tk-guide .tkg-gallery-slide{
  flex:0 0 min(360px, 82%); scroll-snap-align:start; margin:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); position:relative; aspect-ratio:4/5; background:var(--card);
  display:flex; align-items:flex-end;
}
.tk-guide .tkg-gallery-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tk-guide .tkg-gallery-slide.is-placeholder{
  background:linear-gradient(150deg, var(--bg-3), var(--card));
  align-items:center; justify-content:center; text-align:center; padding:24px;
}
.tk-guide .tkg-gallery-slide.is-placeholder span{ font-size:12px; color:var(--soft); }
.tk-guide .tkg-gallery-slide figcaption{
  position:relative; z-index:2; width:100%; padding:16px 18px;
  background:linear-gradient(to top, rgba(4,12,15,.88), transparent);
  font-size:13px; font-weight:700;
}
.tk-guide .tkg-gallery-slide.is-placeholder figcaption{ background:none; position:static; padding:0; margin-top:14px; }
.tk-guide .tkg-gallery-nav{ display:flex; justify-content:center; gap:10px; margin-top:16px; }
.tk-guide .tkg-gallery-nav button{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--text); font-size:16px; cursor:pointer;
}
.tk-guide .tkg-gallery-nav button:hover{ background:rgba(247,244,238,.08); }
.tk-guide .tkg-dishes{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
  scrollbar-width:none;
}
.tk-guide .tkg-dishes::-webkit-scrollbar{ display:none; }
.tk-guide .tkg-dish{
  flex:0 0 220px; scroll-snap-align:start; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; min-height:172px;
}
.tk-guide .tkg-dish:nth-child(5n+1){ background:linear-gradient(150deg, rgba(201,161,90,.10), var(--card)); }
.tk-guide .tkg-dish:nth-child(5n+3){ background:linear-gradient(150deg, rgba(28,171,176,.10), var(--card)); }
.tk-guide .tkg-dish .tkg-dish-num{
  color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em;
}
.tk-guide .tkg-dish h4{ margin:0; font-size:15px; font-weight:700; color:var(--text); }
.tk-guide .tkg-dish p{
  margin:0; font-size:13px; color:var(--muted); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.tk-guide .tkg-dishes-nav{ display:flex; justify-content:center; gap:10px; margin-top:16px; }
.tk-guide .tkg-dishes-nav button{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--text); font-size:16px; cursor:pointer;
}
.tk-guide .tkg-dishes-nav button:hover{ background:rgba(247,244,238,.08); }

.tk-guide .tkg-acc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.tk-guide .tkg-acc-col-label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; display:block; }
.tk-guide details.tkg-acc{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:0; margin-bottom:12px; overflow:hidden; }
.tk-guide details.tkg-acc summary{ cursor:pointer; list-style:none; padding:18px 20px; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tk-guide details.tkg-acc summary::-webkit-details-marker{ display:none; }
.tk-guide details.tkg-acc summary::after{ content:"+"; font-size:20px; color:var(--accent); flex:0 0 auto; }
.tk-guide details.tkg-acc[open] summary::after{ content:"\2212"; }
.tk-guide details.tkg-acc .tkg-acc-body{ padding:0 20px 20px; font-size:14px; color:var(--muted); line-height:1.7; }

.tk-guide .tkg-practical{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.tk-guide .tkg-practical-item{ background:var(--bg-3); padding:22px 20px; }
.tk-guide .tkg-practical-item span{ display:block; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.tk-guide .tkg-practical-item p{ margin:0; font-size:13px; color:var(--muted); line-height:1.65; }
.tk-guide .tkg-disclaimer{ margin-top:16px; font-size:12px; color:var(--soft); line-height:1.6; }

.tk-guide .tkg-tip{
  margin-top:24px; padding:30px; border-radius:20px; border:1px solid rgba(201,161,90,.35);
  background:linear-gradient(135deg, rgba(201,161,90,.10), var(--bg-3));
}
.tk-guide .tkg-tip span.tkg-kicker{ color:var(--gold); }
.tk-guide .tkg-tip p{ margin:0 0 18px; font-size:15px; color:var(--text); line-height:1.75; }
.tk-guide .tkg-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.tk-guide .tkg-badges span{ background:rgba(247,244,238,.08); border:1px solid var(--line); padding:8px 14px; border-radius:999px; font-size:12px; font-weight:600; color:var(--muted); }

.tk-guide .tkg-cta{
  text-align:center; padding:56px 34px; border-radius:30px;
  background:radial-gradient(circle at 0% 0%, rgba(0,104,122,.45), transparent 58%), linear-gradient(135deg, rgba(6,29,35,1), rgba(10,43,50,1));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.tk-guide .tkg-cta h2{ margin:0 0 12px; font-size:clamp(28px, 4vw, 44px); font-weight:800; letter-spacing:-.03em; }
.tk-guide .tkg-cta p{ margin:0 auto 26px; max-width:90%; color:var(--muted); font-size:15px; line-height:1.7; }

.tk-guide .tkg-related{ display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.tk-guide .tkg-related a{ font-size:13px; font-weight:700; color:var(--accent); }
.tk-guide .tkg-related a:hover{ color:var(--accent-hover); }

@media (max-width:900px){
  .tk-guide .tkg-glance{ grid-template-columns:1fr; }
  .tk-guide .tkg-feel,
  .tk-guide .tkg-weather{ grid-template-columns:1fr; }
  .tk-guide .tkg-grid-2,
  .tk-guide .tkg-grid-3{ grid-template-columns:1fr; }
  .tk-guide .tkg-practical{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tk-guide .tkg-acc-cols{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .tk-guide .tkg-wrap{ width:min(100%, calc(100% - 24px)); }
  .tk-guide .tkg-hero{ min-height:auto; }
  .tk-guide .tkg-hero-inner{ padding:88px 0 32px; }
  .tk-guide .tkg-practical{ grid-template-columns:1fr; }
  .tk-guide .tkg-btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .tk-guide *{ scroll-behavior:auto !important; transition:none !important; }
}

/* ---------------------------------------------------------------
 * Landing page "Travel Guides" (/guides/, /it/guide/) — toolbar con
 * contatore e filtro continente sopra la griglia server-side generata
 * dallo shortcode [tk_guides_grid]. Scoped sotto .tk-guides-api così
 * non tocca nient'altro sul sito.
 * --------------------------------------------------------------- */
.tk-guides-api .tk-guides-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:20px 0;
  border-bottom:0.5px solid rgba(247,244,238,.12);
}
.tk-guides-api .tk-guides-count{
  font-size:13px;
  font-weight:600;
  color:rgba(247,244,238,.7);
  white-space:nowrap;
}
.tk-guides-api .tk-guides-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tk-guides-api .tk-guides-pill{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(247,244,238,.2);
  background:transparent;
  color:rgba(247,244,238,.8);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}
.tk-guides-api .tk-guides-pill span{
  opacity:.7;
}
.tk-guides-api .tk-guides-pill:hover{
  border-color:rgba(247,244,238,.4);
}
.tk-guides-api .tk-guides-pill.is-active{
  background:var(--tk-accent, #1cabb0);
  border-color:transparent;
  color:#04222a;
}
.tk-guides-api .tk-guides-grid{
  margin-top:22px;
}
.tk-guides-api .tk-guides-grid.is-capped .tk-guide-card.tk-guide-extra{
  display:none;
}
.tk-guides-api .tk-guides-more{
  text-align:center;
  margin:28px 0 0;
}
.tk-guides-api .tk-guides-empty{
  margin-top:22px;
  background:rgba(2,31,37,.72);
  border:1px solid rgba(247,244,238,.1);
  border-radius:24px;
  padding:22px 24px;
  font-size:14px;
  color:rgba(247,244,238,.84);
}
.tk-guides-api .tk-guides-empty a{
  color:#7fe2e0;
  text-decoration:underline;
}
@media (max-width:640px){
  .tk-guides-api .tk-guides-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }
}