/* =============================================================================
   redess.it — BLOG: elenco articoli e barra laterale
   Si accoda dopo negozio.css. File a parte apposta: negozio.css e' condiviso.
   ========================================================================== */

/* --- barra laterale: i titoli non sono piu' in Roboto Slab maiuscolo -------
   E' lo stesso passaggio gia' fatto sulla griglia dei prodotti: lo slab serif
   tutto maiuscolo e' cio' che data una pagina piu' di ogni altra cosa. */
#right-sidebar .widget-container .widget-title-wrapper h3.widget-title,
#left-sidebar .widget-container .widget-title-wrapper h3.widget-title,
.wpb_widgetised_column .widget-container .widget-title-wrapper h3.widget-title {
	font-family: Roboto, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: #221e1a;
}

/* --- ⚠️⚠️ widget CATEGORIE: via i due comandi che non comandano ------------
   1. davanti a ogni voce il tema mette `content:"\f096"` in FontAwesome, che
      e' `fa-square-o`: una CASELLA DI SPUNTA VUOTA. Sembra un modulo da
      compilare, invece e' un elenco di collegamenti.
   2. sulle categorie con figlie mette `\f067` (`fa-plus`) in `position:absolute
      right:0`: finisce contro il bordo del riquadro, lontanissimo dalla parola
      a cui si riferisce, e sembra decorativo.
   Le sottocategorie qui sono cinque in tutto: si mostrano e basta, cosi' non
   c'e' piu' niente da aprire. */
.widget-container.widget_categories ul li a::before,
body.wpb-js-composer:not(.woocommerce-page) .widget-container.widget_categories ul li a::before,
.blog1-sidebar .widget-container.widget_categories ul li a::before { content: none; margin-right: 0; }

.widget-container.widget_categories li.cat-parent::after { content: none; }

/* ⚠️ Le figlie le spegne `.widget-container.widget_categories li.cat-parent
   ul.children` (0,4,2). Per riaccenderle serve la STESSA specificita', non una
   inferiore con un !important appiccicato sopra. */
.widget-container.widget_categories li.cat-parent ul.children { display: block; }

.widget-container.widget_categories ul { margin: 0; padding: 0; }
/* ⚠️ I 20px sotto ogni voce arrivano da un selettore del tema lungo
   `body.wpb-js-composer:not(.woocommerce-page) .widget-container...` (0,4,3):
   si ripete lo stesso prefisso, altrimenti la riga resta alta 60px. */
.widget-container.widget_categories ul li,
body.wpb-js-composer:not(.woocommerce-page) .widget-container.widget_categories ul li {
	position: relative;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #f1eade;
}
.widget-container.widget_categories ul li:last-child { border-bottom: 0; }
.widget-container.widget_categories ul li a {
	display: block;
	padding: 10px 2px;
	font-size: 14.5px;
	line-height: 1.35;
	color: #3f3830;
}
.widget-container.widget_categories ul li a:hover { color: #be1e2d; }
.widget-container.widget_categories ul li.current-cat > a { color: #be1e2d; font-weight: 600; }

/* --- ⚠️⚠️ le SOTTOCATEGORIE: allineamento e apertura (31/8) ----------------
   Come stava prima, misurato:
   - il filo di separazione stava sul `<li>` ESTERNO, che contiene anche le
     figlie: «Ricette» e «Studi» erano le uniche due voci SENZA riga sotto, e
     la riga compariva dopo l'ultima figlia, a 170 px di distanza;
   - le figlie stavano a 25 px di rientro con 15 px di stacco sopra, imposti
     dal tema con `!important`, e senza alcun segno che le legasse alla madre:
     il filo verticale scritto qui non è mai comparso, perché una regola del
     tema con un ID (`… #right-sidebar …`) azzera `padding-left` e
     `border-left` e batte questa per specificità;
   - il clic apriva e chiudeva l'intero `<li>` (vedi `categorie.js`).
   Adesso la riga della madre è un elemento suo, `.kta-riga`, con il suo filo e
   il suo pulsante; le figlie scendono da un filo verticale.
   ⚠️ Finché `categorie.js` non gira le figlie restano APERTE: se il
   JavaScript non arriva si vedono lo stesso invece di sparire. La chiusura la
   attiva la classe `.kta-js`, che mette lo script sul widget. */

/* Il filo passa dal `<li>` esterno alla riga della madre. */
.widget-container.widget_categories ul li.cat-parent,
body.wpb-js-composer:not(.woocommerce-page) .widget-container.widget_categories ul li.cat-parent {
	border-bottom: 0;
}

.widget-container.widget_categories .kta-riga {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f1eade;
}

.widget-container.widget_categories > ul > li:last-child > .kta-riga {
	border-bottom: 0;
}

.widget-container.widget_categories .kta-riga > a {
	flex: 1 1 auto;
	min-width: 0;
}

.widget-container.widget_categories .kta-apri {
	flex: 0 0 40px;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: #a2988a;
	cursor: pointer;
	transition: color .15s ease;
}

.widget-container.widget_categories .kta-apri:hover,
.widget-container.widget_categories .kta-apri:focus-visible {
	color: #be1e2d;
}

.widget-container.widget_categories .kta-apri svg {
	width: 12px;
	height: 8px;
	transition: transform .22s ease;
}

.widget-container.widget_categories li.cat-parent.kta-aperta > .kta-riga .kta-apri svg {
	transform: rotate(180deg);
}

/* ⚠️ Tre `!important` non per pigrizia: `margin-left: 25px` e
   `margin-top: 15px` arrivano dal tema già con `!important` e la stessa
   specificità (0,4,2) — vince chi è caricato dopo, cioè questo foglio — mentre
   `padding-left` e `border-left` li azzera una regola con un ID, contro cui
   la specificità non basta. */
.widget-container.widget_categories li.cat-parent ul.children {
	margin: 0 0 0 6px !important;
	padding: 2px 0 6px 13px !important;
	border-left: 2px solid #efe6d6 !important;
	overflow: hidden;
}

.widget-container.widget_categories.kta-js li.cat-parent ul.children {
	max-height: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-left-color: transparent !important;
	transition: max-height .24s ease, padding .24s ease, border-color .24s ease;
}

.widget-container.widget_categories.kta-js li.cat-parent.kta-aperta ul.children {
	max-height: 340px;
	padding-top: 2px !important;
	padding-bottom: 6px !important;
	border-left-color: #efe6d6 !important;
}

.widget-container.widget_categories .children li,
body.wpb-js-composer:not(.woocommerce-page) .widget-container.widget_categories .children li {
	border-bottom: 0;
	padding: 0;
}

.widget-container.widget_categories .children li a {
	padding: 6px 2px;
	font-size: 13.5px;
	line-height: 1.35;
	color: #6f655c;
}

.widget-container.widget_categories .children li a:hover {
	color: #be1e2d;
}

/* Sul telefono le righe e il pulsante crescono fino alla misura del dito: 40
   px di lato erano sotto i 44 raccomandati. */
@media only screen and (max-width: 767px) {

	.widget-container.widget_categories ul li a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.widget-container.widget_categories .children li a {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.widget-container.widget_categories .kta-apri {
		flex-basis: 46px;
	}
}

/* --- l'elenco degli articoli ---------------------------------------------- */
.blogs article.post-wrapper .entry-content p,
.blogs article.post-wrapper .post-info p {
	color: #5c534b;          /* 6,7:1 sul bianco: prima era piu' chiaro */
	font-size: 14.5px;
	line-height: 1.6;
}
.blogs article.post-wrapper .post-title,
.blogs article.post-wrapper h3 a {
	font-family: Roboto, system-ui, sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

/* =============================================================================
   ARCHIVI DI CATEGORIA (/category/...)
   Impianto diverso dall'elenco /news/: colonna singola con foto grandi.
   Qui non si cambia impianto, si toglie cio' che lo faceva sembrare rotto.
   ========================================================================== */

/* ⚠️⚠️ Le foto erano alte 450px con `object-fit: fill`: una sorgente 297x315
   veniva STIRATA a 297x450 e una 300x130 a 300x450. Non erano immagini
   sbagliate, erano immagini deformate — e larghe una diversa dall'altra,
   percio' la colonna sembrava spaginata. `cover` ritaglia invece di stirare. */
#main article.post-item .post-img img.thumbnail-blog,
#main article.post-item .post-img img.wp-post-image {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
	object-position: center;
	background: #f4ecdc;
}

/* il titolo: stesso passaggio fatto ovunque, via lo slab serif maiuscolo */
#main article.post-item h3.entry-title,
#main article.post-item h3.entry-title a {
	font-family: Roboto, system-ui, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
}

/* il sommario: si ferma a cinque righe, tanto sotto c'e' «Leggi tutto».
   Prima ogni articolo era alto mille pixel e l'archivio arrivava a diecimila. */
#main article.post-item .entry-content p,
#main article.post-item > p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: left;
	color: #5c534b;
}

/* ⚠️ La categoria corrente era marcata con `\f046` di FontAwesome, cioe'
   `fa-check-square-o`: una casella di spunta SPUNTATA. Stessa famiglia della
   casella vuota davanti alle altre voci: sembra un modulo, non un elenco. */
/* ⚠️ Qui l'!important non e' pigrizia: la regola del tema e' gia' `!important`
   (`content:"\f046"!important`), e contro un !important vince solo un altro
   !important. E' l'unico caso di tutto questo foglio. */
.widget-container.widget_categories ul li.current-cat > a::before,
body.wpb-js-composer:not(.woocommerce-page) .widget-container.widget_categories ul li.current-cat > a::before {
	content: none !important;
	margin-right: 0;
}

/* =============================================================================
   BARRA LATERALE del blog (#right-sidebar): articolo, archivi, ricerca
   ========================================================================== */

/* ⚠️⚠️ Le schede avevano padding ZERO e il testo toccava il bordo bianco.
   La regola che vinceva e' del tema e ha un ID:
   `body.wpb-js-composer:not(.woocommerce-page) #right-sidebar .widget-container
    { padding:0 !important }`  → (1,3,1) con !important.
   I 20px che avevo messo in negozio.css erano (0,3,2): piu' classi non bastano,
   contro un id si perde comunque. Qui si ripete lo STESSO selettore, che essendo
   piu' avanti nella cascata vince a parita'. */
body.wpb-js-composer:not(.woocommerce-page) #right-sidebar .widget-container {
	padding: 20px !important;
}

/* ⚠️ Il carattere dei titoli lo impone il CSS dinamico delle opzioni del tema,
   in linea nella pagina, con `.widget-title.product_title { font-family:
   "Roboto Slab" !important }`. Contro un !important serve un !important. */
/* ⚠️ Misura e colore arrivano dal CSS del PERSONALIZZATORE (24px rossi,
   `!important`), non dal tema: e' una scelta fatta a suo tempo per tutte le
   barre laterali. Qui si scavalca SOLO `#right-sidebar`, che sul sito e' la
   barra del blog — il negozio usa `#left-sidebar` e resta com'e'. L'id basta
   a vincere anche contro il loro !important. */
#right-sidebar .widget-container .widget-title,
#right-sidebar .widget-container .widget-title-wrapper h3.widget-title,
.ftc-sidebar .widget-container .widget-title {
	font-family: Roboto, system-ui, sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: none;
	color: #221e1a !important;
}
#right-sidebar .widget-container .widget-title-wrapper { margin-bottom: 14px; }

/* --- widget «Ultime Notizie» ---------------------------------------------
   Era una fila di titoli a 16px tutti attaccati, senza stacchi, con la data
   sopra grande quanto il titolo. */
.ftc_blog_widget .post_list_widget { margin: 0; padding: 0; }
.ftc_blog_widget .post_list_widget li {
	display: block;
	padding: 0 0 12px;
	margin: 0 0 12px;
	border-bottom: 1px solid #f1eade;
}
.ftc_blog_widget .post_list_widget li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ftc_blog_widget .post_list_widget .post-date {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1;
	color: #8a7f74;
}
.ftc_blog_widget .post_list_widget .post-date .day,
.ftc_blog_widget .post_list_widget .post-date .month {
	display: inline;
	font-size: 12px;
	font-weight: 500;
	color: #8a7f74;
	background: none;
	padding: 0;
	margin: 0 2px 0 0;
}
/* ⚠️ Il titolo lo scrivono in maiuscolo GLI AUTORI, nel titolo del post: qui
   si puo' solo dargli una misura leggibile e fermarlo a due righe. Toglierlo
   davvero vuol dire rinominare i post dal pannello. */
.ftc_blog_widget .post_list_widget .post-title {
	/* ⚠️⚠️ Il ritaglio con `-webkit-line-clamp` QUI NON FUNZIONA: il display
	   dichiarato (-webkit-box) viene ricondotto a `flow-root` dal contenitore,
	   e il clamp senza -webkit-box e' inerte — si vedeva la terza riga
	   tagliata a meta'. Il tetto d'altezza non dipende da niente: due righe
	   esatte di 1,4 = 2,8em, e il taglio cade PRECISO fra una riga e l'altra. */
	display: block;
	max-height: 2.8em;
	overflow: hidden;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: none;
	color: #3f3830;
}
.ftc_blog_widget .post_list_widget .post-title:hover { color: #be1e2d; }

/* --- la ricerca nella barra laterale --------------------------------------- */
#right-sidebar .widget_search .search-form input[type="text"],
#right-sidebar .widget_search .search-form input[type="search"] {
	height: 44px;
	border: 1px solid #e3d9c7;
	border-radius: 10px;
	padding: 0 12px;
	font-size: 14px;
}

/* --- il titolo dell'articolo: stesso carattere di elenco e archivi --------- */
body.single-post .entry-header h1.entry-title,
body.single-post h1.entry-title,
body.single-post h3.entry-title {
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: #221e1a;
}