/*
Theme Name:  Scoprire Istanbul
Description: Child theme di "scoprire" (amaltea-scoprire) con le personalizzazioni di Scoprire Istanbul.
Template:    scoprire
Version:     0.2
Text Domain: scoprire-istanbul
*/

/* =============================================================================================
 * Correzioni al tema padre
 * =========================================================================================== */

/* Il padre (da Descubrir) scrive "ABRE EL MENU" / "CIERRA EL MENU" accanto all'hamburger */
body button.navbar-toggler:before,
body button.navbar-toggler[aria-expanded="false"]:before {
	content: "APRI IL MENU" !important;
}
body button.navbar-toggler[aria-expanded="true"]:before {
	content: "CHIUDI IL MENU" !important;
}

/* "Torna su" del padre sta nello stesso angolo del pulsante chat (GetButton, alto ~90 px): va sopra */
#topbutton {
	bottom: 104px !important;
}

/* Su mobile la barra a icone in basso (4rem) coprirebbe il pulsante chat (GetButton) e "torna su" */
@media only screen and (max-width: 768px) {
	/* il widget scrive "bottom: 14px !important" inline, quindi lo si sposta con transform */
	[id^="gb-widget-"] {
		transform: translateY(-4rem);
	}
	#topbutton {
		bottom: calc(4rem + 96px) !important;
	}
}

/* =============================================================================================
 * Stile Scoprire Istanbul (desktop e mobile)
 * Colori: rosso del tema #b82502, crema e sabbia dal logo, blu dei link storico del blog.
 * =========================================================================================== */

:root {
	--si-rosso: #b82502;
	--si-rosso-scuro: #8f1c01;
	--si-crema: #fbf4e8;
	--si-sabbia: #d8c1a0;
	--si-testo: #3a3a51; /* ardesia di Passenger, per testo e titoli */
	--si-titoli: #3a3a51;
	--si-blu: #1f4fa8;
	--si-font-testo: "SI Roboto Condensed", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--si-font-titoli: "SI Novecento Wide", "Novecento Wide Bold", Arial, sans-serif;
}

/* Caratteri di Passenger, ospitati nel child (fonts/). Nomi con prefisso "SI" per non confondersi
   con il "Roboto" e il "Novecento Wide Normal" che il padre dichiara a sua volta. */
@font-face {
	font-family: "SI Roboto Condensed";
	src: url(fonts/Roboto-Condensed.ttf) format("truetype");
	font-weight: normal;
	font-display: swap;
}
@font-face {
	font-family: "SI Novecento Wide";
	src: url(fonts/Novecento-WideBold.otf) format("opentype");
	font-weight: bold;
	font-display: swap;
}
/* Icone (28/10): il tema padre scarica due Font Awesome da 153 KB l'uno. La "5" (fonts/fontawesome-webfonts)
   si carica su tutte le pagine; la "6" (css/webfonts, da mobile-menu.css) serve solo alle 5 icone della barra in
   basso sul telefono, che esistono anche nella 5 (home f015, moschea f678, hotel f594, aereo f5af, impronte f54b).
   Questo foglio viene dopo quello del padre, quindi questa regola vince e la "6" usa il file della 5, già scaricato.
   (Il browser scarica comunque il file di ogni foglio che dichiara la stessa famiglia: per questo non si può
   togliere anche il Font Awesome di wpDiscuz negli articoli con i commenti.) */
@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url(/wp-content/themes/scoprire/fonts/fontawesome-webfonts/fa-solid-900.woff2) format("woff2");
}

body,
button,
input,
select,
textarea {
	font-family: var(--si-font-testo);
	color: var(--si-testo);
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
.widget-area aside.widget .widget-title {
	font-family: var(--si-font-titoli);
	font-weight: bold;
	color: var(--si-titoli);
}
.widget-area aside.widget .widget-title {
	color: #fff;
}

#site-title {
	font-family: var(--si-font-titoli);
}

/* Il motto accanto al logo resta nel Lemon/Milk del padre (scelta dell'utente del 25/10) */

/* Titolo dell'articolo centrato e senza data, come su Passenger */
body .entry-header .entry-title {
	text-align: center;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1.25;
	margin-bottom: 24px;
}
@media (max-width: 767.98px) {
	body .entry-header .entry-title {
		font-size: 21px;
	}
}
.entry-header .entry-meta {
	display: none;
}

/* Intestazione (header.php del child): logo a sinistra; a destra il motto e, sotto, il menu, alti quanto il
   logo. Sotto 768 px resta l'impaginazione del padre (logo e motto in colonna, menu = barra a icone in basso). */
@media (min-width: 768px) {
	#wrapper-navbar .divider {
		padding-bottom: 32px; /* aria prima del contenuto */
	}
	#wrapper-navbar .divider .container.si-intestazione {
		display: flex;
		align-items: center;
		gap: 28px;
	}
	.si-intestazione .navbar-brand {
		flex: 0 0 auto;
		margin: 0;
	}
	.si-intestazione-destra {
		flex: 1 1 auto;
		min-width: 0;
	}
	body #wrapper-navbar .si-intestazione-destra .site-description {
		display: block;
		margin: 0 0 18px; /* 28/10: motto e menu erano troppo attaccati (10 px) */
		font-size: 26px;
		line-height: 1.2;
	}
	body .si-intestazione-destra #dous-main-menu .navbar {
		padding: 0;
		box-shadow: none;
	}
	body .si-intestazione-destra #dous-main-menu .navbar-nav {
		margin: 0 !important; /* la classe Bootstrap m-auto lo centrerebbe con !important */
		flex-wrap: wrap;
	}
}
/* Ricerca (riga del motto) e icone social (riga del menu): solo da 1200 px, cioè sui computer.
   Su tablet e telefono non ci sono; la ricerca resta come sezione della home. */
.si-cerca-alto,
.si-riga-menu .si-social-icone {
	display: none;
}
@media (min-width: 1200px) {
	.si-riga-motto,
	.si-riga-menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px 16px;
	}
	.si-riga-motto {
		flex-wrap: wrap;
		margin-bottom: 18px; /* 28/10: motto e menu erano troppo attaccati (10 px) */
	}
	body #wrapper-navbar .si-riga-motto .site-description {
		margin: 0;
	}
	.si-riga-menu #dous-main-menu {
		flex: 1 1 auto;
		min-width: 0;
	}
	body .si-riga-menu #dous-main-menu .navbar .navbar-nav > li > a.nav-link {
		font-size: 14px; /* spazio per le icone */
		padding-right: 12px;
	}

	.si-cerca-alto {
		display: flex;
		flex: 0 0 260px;
	}
	.si-cerca-alto input {
		flex: 1 1 auto;
		min-width: 0;
		height: 36px;
		padding: 0 12px;
		border: 1px solid #ddd3c4;
		border-right: 0;
		border-radius: 18px 0 0 18px;
		font-size: 15px;
	}
	.si-cerca-alto button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 36px;
		border: 0;
		border-radius: 0 18px 18px 0;
		background: var(--si-rosso);
		color: #fff;
	}

	.si-riga-menu .si-social-icone {
		display: flex;
		flex: 0 0 auto;
		gap: 4px;
	}
	.si-social-icone a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: 0;
		border-radius: 50%;
		background: var(--si-crema);
		color: var(--si-titoli);
		text-decoration: none;
	}
	.si-social-icone a:hover {
		background: var(--si-rosso);
		color: #fff;
	}

	/* In home la sezione "Cerca nella guida" non serve: la ricerca è in alto */
	.si-cerca-sezione {
		display: none;
	}
}

/* Telefono (27/10, richiesta dell'utente): logo a sinistra e motto a destra, invece che uno sotto l'altro;
   niente ombra sotto l'intestazione e niente spazio prima della foto in home: era spazio perso. */
@media (max-width: 767.98px) {
	#wrapper-navbar .divider {
		padding: 12px 0;
	}
	#wrapper-navbar .divider .container.si-intestazione {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.si-intestazione .navbar-brand {
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
	}
	.si-intestazione .dous-logo {
		width: 88px;
		height: auto;
	}
	.si-intestazione-destra {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* Al posto del motto grande: il nome del sito in grande e un motto più corto sotto (esempio dell'utente) */
	body #wrapper-navbar .si-intestazione-destra .site-description {
		display: none;
	}
	.si-marchio-telefono {
		margin: 0;
		text-align: left;
	}
	/* Nome su una riga e motto su una (al massimo due) anche sui telefoni stretti: le dimensioni seguono la
	   larghezza dello schermo. 114 px = margini 30 + logo 72 + spazio 12; il nome è largo circa 10,5 volte la
	   sua dimensione, il motto circa 15,7 volte. */
	.si-intestazione .dous-logo {
		width: 72px;
	}
	#wrapper-navbar .divider .container.si-intestazione {
		gap: 12px;
	}
	.si-marchio-nome {
		display: block;
		font-family: var(--si-font-titoli);
		font-weight: bold;
		font-size: clamp(17px, calc((100vw - 114px) / 11.4), 24px); /* 11,4: un po' di margine */
		line-height: 1.1;
		white-space: nowrap;
		text-transform: uppercase;
		color: var(--si-rosso);
	}
	.si-marchio-motto {
		display: block;
		margin-top: 3px;
		font-size: clamp(13px, calc((100vw - 114px) / 16), 15px);
		line-height: 1.3;
		color: #6b6b80;
	}
	body #wrapper-navbar {
		box-shadow: none;
	}
	body.home article.page {
		margin-top: 0;
	}
	/* Il titolo "Benvenuti" occupava spazio: sul telefono il benvenuto apre il testo. Il titolo resta nella
	   pagina per Google e per i lettori di schermo, solo non si vede. */
	.si-alto h1 {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}
@media (min-width: 768px) {
	.si-benvenuti-testo,
	.si-marchio-telefono {
		display: none;
	}
}
/* Ordine delle sezioni sul telefono (27/10, richiesta dell'utente). Il computer resta nell'ordine del testo.
   Sul telefono: Dicono di noi prima di Da non perdere, Cerca tra Da non perdere e Ultimi commenti.
   .si-due (le due colonne del computer) si "apre" con display: contents, così le sue due parti si ordinano come
   le altre sezioni. Quello che non ha un ordine (es. paragrafi vuoti aggiunti da WordPress) va in fondo. */
@media (max-width: 767.98px) {
	.home .entry-content {
		display: flex;
		flex-direction: column;
	}
	.home .entry-content > * { order: 99; }
	.home .si-alto { order: 1; }
	.home .si-b-prima { order: 2; }
	.home .si-b-visita { order: 3; }
	.home .si-b-visitare { order: 4; }
	.home .si-b-testo { order: 5; }
	.home .si-b-dicono { order: 6; }
	.home .si-due { display: contents; }
	.home .si-b-nonperdere { order: 7; }
	.home .si-cerca-sezione { order: 8; }
	.home .si-b-commenti { order: 9; }
	.home .si-b-seguici { order: 10; }

	/* Meno spazio tra le sezioni (era circa 60 px: 44 sopra il titolo + 16 sotto le schede) */
	body.home .entry-content h2.si-sezione {
		margin-top: 28px;
	}
	.home .si-blocco > :last-child,
	.home .si-due > div > :last-child {
		margin-bottom: 0;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.si-intestazione .dous-logo {
		max-width: 110px;
	}
	body #wrapper-navbar .si-intestazione-destra .site-description {
		font-size: 21px;
	}
}

/* Menu principale (desktop): leggibile; "Visite guidate" in rosso come su Passenger */
@media (min-width: 768px) {
	body #dous-main-menu .navbar .navbar-nav > li > a.nav-link {
		padding: 6px 14px 6px 0;
		font-size: 15px;
		font-weight: 500;
		color: var(--si-titoli);
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	body #dous-main-menu .navbar .navbar-nav > li > a.nav-link {
		padding-right: 8px;
		font-size: 13px;
		letter-spacing: .3px;
	}
}
@media (min-width: 768px) {
	body #dous-main-menu .navbar .navbar-nav > li > a.nav-link:hover,
	body #dous-main-menu .navbar .navbar-nav > li.current-menu-item > a.nav-link,
	body #dous-main-menu .navbar .navbar-nav > li.current-menu-ancestor > a.nav-link {
		color: var(--si-rosso);
	}
	body #dous-main-menu .navbar .navbar-nav > li#menu-item-4881 > a.nav-link {
		color: var(--si-rosso);
		font-weight: 700;
	}
}

/* Link nei testi: un solo blu, una sola sottolineatura (il padre aggiunge anche un bordo inferiore) */
body article .entry-content a:not([class]),
body .comment-content a:not([class]),
body .widget a:not([class]) {
	color: var(--si-blu);
	border-bottom: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
body article .entry-content a:not([class]):hover,
body .comment-content a:not([class]):hover,
body .widget a:not([class]):hover {
	color: var(--si-rosso);
}
/* Il blu puro scritto a mano negli articoli (#0000ff, 717 volte) diventa lo stesso blu, più morbido */
.entry-content [style*="color: #0000ff" i],
.entry-content [style*="color:#0000ff" i],
.entry-content [style*="color: #3366ff" i] {
	color: var(--si-blu) !important;
}
.entry-content a:hover [style*="color: #0000ff" i],
.entry-content a:hover [style*="color:#0000ff" i],
.entry-content a:hover [style*="color: #3366ff" i] {
	color: var(--si-rosso) !important;
}

/* Titoli dentro articoli e pagine (27/10, richiesta dell'utente): tutti rosso mattone. Nei testi 363 titoli su 554
   hanno un colore scritto a mano (303 rosso acceso #ff0000, poi nero, bordeaux, blu…): qui vince il tema,
   senza modificare gli articoli. La home ha i suoi titoli (barra rossa) e resta com'è. I link nei titoli restano blu. */
body:not(.home) .entry-content :is(h2, h3, h4, h5, h6),
body:not(.home) .entry-content :is(h2, h3, h4, h5, h6)[style*="color"] {
	color: var(--si-rosso) !important;
}
body:not(.home) .entry-content :is(h2, h3, h4, h5, h6) :not(a)[style*="color"] {
	color: inherit !important;
}

/* Box della sidebar: crema e sabbia del logo invece del rosa del padre (Cappadocia usa il suo crema) */
.widget-area aside.widget {
	background-color: var(--si-crema);
	box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.25);
}
.widget-area aside.widget:before {
	border-color: var(--si-sabbia);
}
/* Tablet in verticale (768-1023 px): la sidebar a 1/3 è troppo stretta (pulsante Cerca tagliato,
   email fuori dal box), quindi va sotto l'articolo a tutta larghezza, come su mobile */
@media (min-width: 768px) and (max-width: 1023.98px) {
	#primary.col-md-8,
	#right-sidebar.col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
.widget-area aside.widget {
	overflow-wrap: anywhere;
}

/* Sidebar degli articoli (27/10, 08-scripts\sidebar-articoli.php): Benvenuti, Visita con noi, Dicono di noi,
   Seguici. Tutti senza box, con i titoli come le sezioni della home (barra rossa a sinistra): la colonna è più
   leggera e uguale alla home. */
#right-sidebar aside.widget {
	background: none;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
#right-sidebar aside.widget:before {
	display: none;
}
/* Avviso di Trustindex visibile solo agli amministratori ("usate lo shortcode"): dentro un widget lo shortcode
   non disegna le recensioni, quindi resta lo script e l'avviso non serve. */
#right-sidebar .textwidget > div[style*="d9edf7"] {
	display: none;
}
body #right-sidebar aside.widget .widget-title {
	display: block;
	margin: 0 0 12px;
	padding: 0 0 0 12px;
	background: none;
	border-left: 4px solid var(--si-rosso);
	border-radius: 0;
	color: var(--si-titoli);
	font-size: 20px;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
}
body #right-sidebar aside.widget .widget-title:before,
body #right-sidebar aside.widget .widget-title:after {
	display: none;
}
.widget .si-tutte {
	margin: 10px 0 0;
	text-align: right;
}
body .widget .si-tutte a {
	color: var(--si-rosso);
	font-weight: bold;
	text-decoration: none;
}
.widget .si-feed .ti-widget-layout {
	grid-template-columns: repeat(3, 1fr);
	gap: 6px !important;
}

/* Stesso crema per l'indice dei contenuti (Easy TOC) */
body .entry-content div#ez-toc-container > nav {
	background: var(--si-crema);
}

/* Gallery classiche di WordPress ([gallery], 7 in tutto, 4-5 colonne). Con Passenger usavano lo stile
   di base di WordPress (colonne, bordo grigio 2px); il padre non lo carica, quindi le foto finivano
   una sotto l'altra. Stesso aspetto, in griglia; su mobile al massimo 3 colonne. */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 1.5em 0;
}
.entry-content .gallery-columns-1 { grid-template-columns: 1fr; }
.entry-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
	.entry-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
	.entry-content .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
	.entry-content .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
}
.entry-content .gallery .gallery-item {
	margin: 0;
	text-align: center;
}
.entry-content .gallery .gallery-item a {
	display: block;
	border-bottom: 0;
}
.entry-content .gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid #cfcfcf;
}
.entry-content .gallery .gallery-caption {
	font-size: 14px;
	margin-top: 4px;
}

/* Footer (27/10): come con Passenger. A sinistra azienda, mail, indirizzo, Privacy Policy e Mesafeli Satış
   Sözleşmesi, a destra il logo TÜRSAB (widget spostati da 08-scripts\footer-widget.php); sotto, in una fascia
   più scura, il copyright. */
body #wrapper-footer { /* "body" perché il padre lo mette grigio Bootstrap con "body #wrapper-footer" */
	background: #292938;
	color: #e6e6ea;
	padding-bottom: 0;
}
/* È un container dentro il container: il testo va allineato al copyright, senza rientri */
#footer-full-content {
	padding: 0;
}
#footer-full-content > .row {
	margin: 0;
}
#wrapper-footer-full .footer-widget {
	padding: 0;
}
#wrapper-footer #colophon {
	display: flex;
	flex-direction: column;
}
#wrapper-footer-full {
	padding: 8px 0 24px;
}
#wrapper-footer-full .footer-widget {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	line-height: 1.5;
}
#wrapper-footer-full .footer-widget p {
	margin-bottom: 0;
}
#wrapper-footer-full a,
#wrapper-footer-full a:hover {
	color: #fff !important; /* il padre e il CSS di Passenger li fanno blu */
	text-decoration: none;
}
#wrapper-footer-full a:hover {
	text-decoration: underline;
}
#wrapper-footer-full .footer-widget:last-child .textwidget {
	display: inline-block;
	text-align: left;
	text-transform: none;
	font-weight: normal;
	margin-top: 16px;
}
@media (min-width: 768px) {
	#wrapper-footer-full .footer-widget:last-child {
		text-align: right;
	}
	#wrapper-footer-full .footer-widget:last-child .textwidget {
		margin-top: 0;
	}
}
#wrapper-footer .site-info {
	order: 2;
	padding: 18px 0;
	font-size: 12px;
	text-transform: uppercase;
	color: #9a9aa8;
	background: #1f1f2b;
	box-shadow: 0 0 0 100vmax #1f1f2b; /* fascia a tutta larghezza */
	clip-path: inset(0 -100vmax);
}
#wrapper-footer #colophon > .row {
	order: 3; /* spazio per il menu fisso in basso sul telefono */
	background: #1f1f2b;
	box-shadow: 0 0 0 100vmax #1f1f2b;
	clip-path: inset(0 -100vmax);
	color: #1f1f2b !important;
}
@media (min-width: 768px) {
	#wrapper-footer #colophon > .row {
		display: none;
	}
}

/* =============================================================================================
 * Home (pagina statica "Home", 08-scripts\home-crea.php) - dal mockup 3 con i caratteri di Passenger
 * =========================================================================================== */

/* La home non ha sidebar (functions.php): il contenuto dei widget è diventato sezioni della pagina.
   Il titolo "Home" della pagina non viene stampato (loop-templates/content-page.php). */

/* Cerca nella guida */
.si-cerca form {
	max-width: 640px;
}

/* Dal blog | Ultimi commenti, affiancati da 992 px */
@media (min-width: 992px) {
	.si-due {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
		align-items: start;
	}
}
/* Visita con noi: 2 colonne anche su desktop; foto più basse, sennò con 2 colonne le schede diventano enormi */
@media (min-width: 768px) {
	.si-visita .si-scheda-img {
		aspect-ratio: 16 / 7;
	}
}
.si-su {
	font-weight: normal;
	color: #6b6b80;
}
.si-estratto {
	display: block;
	margin-top: 3px;
	font-weight: normal;
	font-size: 14px;
	color: #6b6b80;
}
.entry-content .si-commenti a {
	padding: 12px 0;
}

/* Seguici (scelta C del 27/10): una riga di 6 foto Instagram e sotto i pulsanti dei social.
   Il feed è di Trustindex (9 post, intestazione e griglia sua): qui teniamo solo le foto, le prime 6.
   Telefono: 3 foto per riga (2 righe), pulsanti 2 per riga. */
.si-feed {
	min-height: 120px;
}
.si-feed .ti-header,
.si-feed .ti-widget-footer,
.si-feed .ti-post-content,
.si-feed .ti-nav-arrow,
.si-feed .ti-image-counter,
.si-feed .ti-layout-item:nth-child(n+7) {
	display: none !important;
}
.si-feed .ti-widget-layout {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px !important;
	margin: 0 !important;
}
@media (min-width: 768px) {
	.si-feed .ti-widget-layout {
		grid-template-columns: repeat(6, 1fr);
		gap: 8px !important;
	}
}
.si-feed .ti-layout-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.si-feed .ti-widget-card {
	margin: 0 !important;
	border-radius: 6px !important;
	overflow: hidden;
}
.entry-content .si-social,
.widget .si-social {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 14px;
}
@media (min-width: 768px) {
	.entry-content .si-social {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}
}
.entry-content a.si-social-link,
.widget a.si-social-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 8px;
	border: 1px solid #ece6dc;
	border-radius: 8px;
	background: #fff;
	color: var(--si-titoli);
	text-align: center;
	text-decoration: none;
}
.entry-content a.si-social-link svg,
.widget a.si-social-link svg {
	color: var(--si-rosso);
	margin-bottom: 4px;
}
.si-social-nome {
	font-weight: bold;
}
.si-social-sotto {
	font-size: 14px;
	color: #6b6b80;
}
.entry-content a.si-social-link:hover,
.widget a.si-social-link:hover {
	border-color: var(--si-sabbia);
}
.entry-content a.si-social-link:hover .si-social-nome,
.widget a.si-social-link:hover .si-social-nome {
	color: var(--si-rosso);
}

/* Parte alta (.si-alto, scelta "B" del 26/10): foto e benvenuto mai sovrapposti.
   Telefono: foto a tutta larghezza sopra, testo sotto. Da 768 px: foto 40% e testo 60%, la foto alta
   quanto il testo (minimo 160 px), senza vuoti accanto. */
.si-hero img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: 50% 85%; /* foto del tè: tiene bicchiere, piattino e ringhiera (da rivedere se cambia la foto) */
}
@media (max-width: 767.98px) {
	.si-hero {
		margin: 0 -15px; /* a tutta larghezza sul telefono */
	}
	.si-benvenuti {
		margin-top: 18px;
	}
}
@media (min-width: 768px) {
	.si-alto {
		display: grid;
		grid-template-columns: 2fr 3fr;
		gap: 32px;
		align-items: stretch;
	}
	.si-hero {
		position: relative;
		min-height: 160px;
	}
	.si-hero img {
		position: absolute;
		inset: 0;
		height: 100%;
		border-radius: 6px;
	}
	.si-benvenuti p:last-child {
		margin-bottom: 0;
	}
}
body .si-benvenuti h1 {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--si-rosso);
}
@media (min-width: 768px) {
	body .si-benvenuti h1 { font-size: 22px; }
}

/* Titoli di sezione: barretta rossa a sinistra */
body .entry-content h2.si-sezione {
	margin: 2.2em 0 0.3em;
	padding-left: 12px;
	border-left: 4px solid var(--si-rosso);
	font-size: 20px;
	line-height: 1.3;
	text-transform: uppercase;
}
.entry-content .si-intro {
	color: #6b6b80;
	margin-bottom: 14px;
}

/* Schede ([grid]) */
.si-schede {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 1rem;
}
@media (min-width: 768px) {
	.si-schede { gap: 16px; }
	.si-schede-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.si-schede-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.entry-content a.si-scheda {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ece6dc;
	border-radius: 10px;
	overflow: hidden;
	color: var(--si-titoli);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: box-shadow .2s ease;
}
.entry-content a.si-scheda:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	color: var(--si-rosso);
}
.si-scheda-img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--si-crema);
}
.si-scheda-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.si-scheda:hover .si-scheda-img img {
	transform: scale(1.05);
}
.si-scheda-titolo {
	padding: 9px 10px 11px;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.25;
}
.si-scheda-grande {
	grid-column: 1 / -1;
}
.si-scheda-grande .si-scheda-img {
	aspect-ratio: 16 / 8;
}
@media (min-width: 768px) {
	.si-scheda-grande .si-scheda-img {
		aspect-ratio: 21 / 8; /* su desktop la scheda grande resta una fascia, non un muro di foto */
	}
}
.si-scheda-grande .si-scheda-titolo {
	padding: 12px 14px 14px;
	font-family: var(--si-font-titoli);
	font-size: 18px;
	text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
	.si-scheda-img img, .entry-content a.si-scheda { transition: none; }
}

/* "Istanbul, raccontata da chi ci vive" (27/10, impaginazione Y, 08-scripts\home-testo.inc.php): testo a sinistra,
   i punti chiave in un riquadro crema a destra; sul telefono il riquadro va sotto il testo. */
.si-testo-home {
	display: grid;
	gap: 20px;
}
@media (min-width: 768px) {
	.si-testo-home {
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 32px;
		align-items: start;
	}
}
.si-testo-corpo p:last-child {
	margin-bottom: 0;
}
.entry-content ul.si-numeri {
	list-style: none;
	margin: 0;
	padding: 6px 18px;
	background: var(--si-crema);
	border: 1px solid #ece6dc;
	border-radius: 10px;
}
.entry-content .si-numeri li {
	padding: 10px 0;
	margin: 0;
	color: #6b6b80;
	line-height: 1.35;
}
.entry-content .si-numeri li::before {
	display: none;
}
.si-numeri li + li {
	border-top: 1px solid #e9dcc6;
}
.si-numeri strong {
	display: block;
	font-family: var(--si-font-titoli);
	font-size: 17px;
	color: var(--si-rosso);
}

/* Guida di Istanbul (27/10, 08-scripts\guida-crea.php): introduzione, indice delle sezioni come una riga di testo
   (scelta "A": nomi corti in rosso mattone separati da puntini, come un sommario; le pillole non piacevano),
   sezioni con le schede della home. scroll-margin: il titolo della sezione non finisce sotto il menu fisso. */
.entry-content .si-guida-intro {
	font-size: 17px;
	margin-bottom: 10px;
}
/* flex-wrap: guida-crea.php scrive i link uno attaccato all'altro, senza spazi, quindi in riga normale non
   andrebbero mai a capo e sul telefono allargavano tutta la pagina (28/10) */
.si-indice {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 8px;
	padding-top: 10px;
	border-top: 1px solid #ece6dc;
	line-height: 1.9;
}
body article .entry-content .si-indice a {
	color: var(--si-rosso);
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
}
body article .entry-content .si-indice a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* il puntino sta dopo ogni nome (non prima): quando la riga va a capo resta in fondo alla riga sopra */
.si-indice a:not(:last-child)::after {
	content: "·";
	display: inline-block;
	margin: 0 10px;
	color: #b9b2a6;
	font-weight: normal;
}
.entry-content .si-blocco[id] {
	scroll-margin-top: 80px;
}
body.page-id-549 .entry-content h2.si-sezione {
	color: var(--si-titoli) !important; /* titoli di sezione come in home, non rossi come i titoli degli articoli */
}

/* Elenchi di articoli: ricerca, categorie, archivi, blog (scelta "A" del 27/10, loop-templates/content.php).
   Foto piccola a sinistra, titolo rosso mattone e due righe di testo; tutta la riga è un link. */
.page-header .page-title {
	font-size: 24px;
	margin-bottom: 8px;
}
.page-header .page-title span {
	color: var(--si-rosso);
}
article.si-risultato {
	margin: 0;
	border-bottom: 1px solid #ece6dc;
}
body a.si-risultato-link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	color: var(--si-testo);
	text-decoration: none;
	border-bottom: 0;
}
.si-risultato-img {
	flex: 0 0 120px;
	height: 90px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--si-crema);
}
.si-risultato-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.si-risultato-testo {
	min-width: 0;
}
body h2.si-risultato-titolo {
	margin: 0 0 4px;
	font-family: var(--si-font-testo); /* come "Da non perdere": il maiuscolo dei titoli pesa troppo in un elenco */
	font-weight: bold;
	font-size: 20px;
	line-height: 1.25;
	text-align: left;
	text-transform: none !important;
	letter-spacing: 0;
	color: var(--si-rosso);
}
.si-risultato .si-estratto {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: #6b6b80;
}
body a.si-risultato-link:hover h2.si-risultato-titolo {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 575.98px) {
	body a.si-risultato-link {
		align-items: flex-start;
		gap: 12px;
	}
	.si-risultato-img {
		flex-basis: 88px;
		height: 66px;
	}
	body h2.si-risultato-titolo {
		font-size: 17px;
	}
	.si-risultato .si-estratto {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 14px;
	}
}

/* Dal blog ([si_blog]) */
.entry-content ul.si-blog,
body .widget-area ul.si-blog {
	list-style: none;
	margin: 0;
	padding: 4px 14px;
	background: #fff;
	border: 1px solid #ece6dc;
	border-radius: 10px;
}
.entry-content .si-blog li,
.widget .si-blog li {
	padding-left: 0;
	margin: 0;
}
.entry-content .si-blog li::before,
.widget .si-blog li::before {
	display: none; /* pallino delle liste del padre */
}
.si-blog li + li {
	border-top: 1px solid #ece6dc;
}
.entry-content .si-blog a,
.widget .si-blog a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: var(--si-titoli);
	text-decoration: none;
}
.entry-content .si-blog a:hover,
.widget .si-blog a:hover {
	color: var(--si-rosso);
}
.si-blog-img {
	flex: 0 0 80px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--si-crema);
}
.si-blog-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.si-blog-titolo {
	font-weight: bold;
	font-size: 16px;
	line-height: 1.3;
}
.entry-content .si-blog-tutti a {
	color: var(--si-rosso);
	font-weight: bold;
	text-decoration: none;
}

/* =============================================================================================
 * Da Passenger: CSS aggiuntivo del Personalizza (post custom_css 3980, copia locale del 23/10)
 * + regola "Tabelle scorrevoli su mobile" aggiunta in produzione il 25/10.
 * Le regole legate al menu di Passenger (#menu-main-menu, #menu-item-4881) non servono più.
 * =========================================================================================== */

/* Niente tag/categorie e "articolo precedente/successivo" sotto gli articoli, come su Passenger */
.entry-footer,
.navigation-post {
	display: none !important;
}

/* Tabelle scorrevoli su mobile */
@media (max-width: 767px) {
	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.entry-content table td,
	.entry-content table th {
		padding: 6px 8px;
	}
}

/* Box luogo */
.box-luogo {
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 32px;
	background: #fafafa;
}
.box-luogo-img img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 12px;
}
.box-luogo-testo p {
	margin-bottom: 10px;
}
@media (min-width: 768px) {
	.box-luogo {
		display: flex;
		gap: 16px;
		align-items: flex-start;
	}
	.box-luogo-img {
		flex: 0 0 320px;
	}
	.box-luogo-testo {
		flex: 1;
	}
}

/* Box giorno (itinerari) */
.box-giorno {
	padding: 18px 20px;
	border-radius: 10px;
	margin-bottom: 22px;
	color: #000;
}
.box-giorno h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.3em;
	font-weight: 700;
	color: #000;
}
.box-giorno ul {
	margin: 0;
	padding-left: 20px;
}
.box-giorno p {
	margin-top: 10px;
	margin-bottom: 0;
}
.box-giorno-1 { background: #AFEEEE; } /* azzurro sultanahmet */
.box-giorno-2 { background: #FFFACD; } /* giallo fener/balat */
.box-giorno-3 { background: #FFE4E1; } /* rosa bosforo */

/* Galleria bazar */
.bz-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px !important;
	margin: 1.5em 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	list-style: none !important;
	padding: 0 !important;
}
.bz-gallery .bz-item {
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	border-radius: 6px;
	aspect-ratio: 4/3;
	cursor: pointer;
	background: #eee;
	line-height: 0;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
.bz-gallery .bz-item img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	transition: transform .4s ease;
}
.bz-gallery .bz-item:hover img { transform: scale(1.06); }
.bz-gallery .bz-item:focus-visible { outline: 3px solid #b8860b; outline-offset: 2px; }

/* Lightbox della galleria bazar */
.bz-lightbox {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.92);
	display: none; align-items: center; justify-content: center;
	z-index: 99999; opacity: 0; transition: opacity .25s ease;
}
.bz-lightbox.is-open { display: flex; opacity: 1; }
.bz-figure { margin: 0; max-width: 90vw; max-height: 90vh; text-align: center; }
.bz-img {
	max-width: 90vw; max-height: 80vh; object-fit: contain;
	border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: none;
}
.bz-caption { color: #eee; font-size: 15px; margin-top: 14px; font-family: inherit; padding: 0 20px; }
.bz-counter { position: absolute; top: 18px; left: 24px; color: #bbb; font-size: 14px; letter-spacing: .5px; }
.bz-close, .bz-prev, .bz-next {
	position: absolute; background: rgba(255,255,255,.08); border: none; color: #fff;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: background .2s ease; -webkit-tap-highlight-color: transparent;
}
.bz-close:hover, .bz-prev:hover, .bz-next:hover { background: rgba(255,255,255,.2); }
.bz-close { top: 14px; right: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1; }
.bz-prev, .bz-next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 22px; }
.bz-prev { left: 18px; }
.bz-next { right: 18px; }
@media (max-width: 768px) {
	.bz-gallery { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
	.bz-prev, .bz-next { width: 44px; height: 44px; font-size: 18px; }
	.bz-prev { left: 8px; }
	.bz-next { right: 8px; }
	.bz-img { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
	.bz-gallery .bz-item img, .bz-lightbox { transition: none; }
}

/* Popup */
.si-popup-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	z-index: 99999;
	justify-content: center;
	align-items: center;
}
.si-popup-overlay.si-active {
	display: flex;
}
.si-popup-box {
	background: #fff;
	max-width: 420px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 30px;
	border-radius: 8px;
	position: relative;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.si-popup-box h3 {
	color: #b31b1b;
	margin-top: 0;
}
.si-popup-close {
	position: absolute;
	top: 10px; right: 14px;
	font-size: 24px;
	cursor: pointer;
	color: #999;
	line-height: 1;
}
.si-popup-cta {
	display: inline-block !important;
	margin-top: 15px;
	padding: 12px 28px;
	background: #b31b1b;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 4px;
	font-weight: bold;
	visibility: visible !important;
}
.si-popup-title {
	color: #b31b1b;
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 12px 0;
}