/*
 * Specialty Coffee Colombia
 *
 * Misure: la bozza è una card di 596,258 x 381,688 pt. --u è un punto della
 * bozza sul foglio reale (100cqw / 596,258), quindi testata e hero restano
 * nelle proporzioni dell'originale a ogni larghezza da 860 px in su.
 * Sotto quella soglia la home passa a una colonna.
 */

:root {
	--c-peach: #FCBF95;
	--c-cream: #FFF8F0;
	--c-sand: #FFE9D6;
	--c-orange: #FFA969;
	--c-caramel: #9E673E;
	--c-logo: #9C673E;
	--c-espresso: #5B371E;
	--c-roast: #653416;
	--c-ink: #443A2A;
	--c-foam: #FCF7EF;
	--c-line: #F1D9C3;
	--f-slab: "Roboto Slab", Rockwell, Georgia, serif;
	--f-sans: "Fira Sans", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: clamp(10px, 4.2vw, 64px) clamp(10px, 5.4vw, 104px);
	background: var(--c-peach);
	color: var(--c-ink);
	font: 400 17px/1.65 var(--f-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.drawer-open { overflow: hidden; }

img, video { max-width: 100%; height: auto; }

a { color: var(--c-roast); }
a:hover { color: var(--c-espresso); }

:focus-visible { outline: 2px solid var(--c-roast); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	clip: auto; clip-path: none;
	width: auto; height: auto;
	top: 12px; left: 12px; z-index: 2000;
	padding: 10px 16px;
	background: var(--c-espresso); color: var(--c-foam);
	border-radius: 999px; text-decoration: none;
}

/* ---------- Foglio: la card della bozza con la sua ombra ---------- */

.sheet {
	container: sheet / inline-size;
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	overflow: hidden;
	background: var(--c-cream);
	/* Ombra della bozza: nero al 40 %, 7 pt in basso, sfocatura 12 pt. */
	box-shadow: 0 14px 24px 3px rgba(0, 0, 0, .4);
	--u: calc(100cqw / 596.258);
	--pad: max(20px, calc(31.13 * var(--u)));
}

.deco {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: auto;
	display: block;
	pointer-events: none;
}

/* ---------- Testata ---------- */

.masthead {
	position: relative;
	height: calc(118.2 * var(--u));
}

/* Logo e menu sopra tutto; le forme della testata restano sotto i titoli dell'hero. */
.brand, .nav { z-index: 6; }

.brand {
	position: absolute;
	left: calc(32 * var(--u));
	top: calc(15.48 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--c-logo);
	line-height: 1;
	text-decoration: none;
}
.brand:hover { color: var(--c-espresso); }

.brand__beans { display: block; width: calc(45.74 * var(--u)); height: auto; }
.brand__beans path { fill: currentColor; }

.brand__word {
	margin-top: calc(1.3 * var(--u));
	font: 400 calc(20.5 * var(--u))/1 var(--f-sans);
	letter-spacing: .06em;
	margin-right: -.06em;
}

.brand__sub {
	margin-top: calc(.13 * var(--u));
	font: 500 calc(4.76 * var(--u))/1 var(--f-sans);
	letter-spacing: .16em;
	margin-right: -.16em;
}

.brand__pre {
	margin-top: calc(1.6 * var(--u));
	font: 500 calc(6.4 * var(--u))/1 var(--f-sans);
	letter-spacing: .3em;
	margin-right: -.3em;
	text-transform: uppercase;
}
/* Con la riga sopra, la parola principale si stringe un poco per tenere il logo nell'area della bozza. */
.brand--pre .brand__word { margin-top: calc(.4 * var(--u)); font-size: calc(18.5 * var(--u)); }
.brand--pre .brand__sub { margin-top: calc(.8 * var(--u)); font-size: calc(5.2 * var(--u)); letter-spacing: .34em; margin-right: -.34em; }

.brand--image img { display: block; width: auto; max-height: calc(56 * var(--u)); }

.nav {
	position: absolute;
	top: calc(28.48 * var(--u));
	right: calc(36.82 * var(--u));
	display: flex;
	align-items: flex-start;
}

.nav__list {
	display: flex;
}
/* In testata il menu resta chiuso anche su desktop: si apre solo dall'hamburger (scelta del 20/10/2026). */
.masthead .nav__list { display: none; }
.drawer .nav__list {
	gap: calc(24.8 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list a {
	position: relative;
	display: block;
	padding: 0 calc(5.1 * var(--u));
	font: 400 calc(10.62 * var(--u))/1.2 var(--f-slab);
	letter-spacing: .06em;
	color: var(--c-roast);
	text-decoration: none;
	white-space: nowrap;
	/* Alone crema: invisibile sul fondo pieno, tiene leggibili le voci lunghe sopra la palma. */
	text-shadow: 0 0 2px var(--c-cream), 0 0 4px var(--c-cream), 0 0 6px var(--c-cream);
}

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { font-weight: 700; }

.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after,
.nav__list a:hover::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + .26 * var(--u));
	height: calc(1.17 * var(--u));
	background: currentColor;
}

.nav-toggle {
	position: relative;
	width: calc(17.4 * var(--u));
	height: calc(8.43 * var(--u));
	margin: calc(2.7 * var(--u)) 0 0 calc(11.6 * var(--u));
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-roast);
	cursor: pointer;
}
.nav-toggle::before { content: ""; position: absolute; inset: -12px; }

.nav-toggle__bars {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.nav-toggle__bars span { display: block; height: calc(1.2 * var(--u)); background: currentColor; }

/* ---------- Selettore di lingua ---------- */

.lang-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lang-switch a {
	position: relative;
	display: block;
	padding: 0 2px 4px;
	font: 400 16px/1.2 var(--f-slab);
	letter-spacing: .06em;
	color: var(--c-roast);
	text-decoration: none;
}
.lang-switch .is-current a { font-weight: 700; }
.lang-switch .is-current a::after,
.lang-switch a:hover::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: currentColor;
}

/* In testata, stesso corpo e stessa sottolineatura delle voci di menu. */
.lang-switch--nav { gap: calc(8 * var(--u)); margin-left: calc(24.8 * var(--u)); }
.lang-switch--nav a { padding: 0 calc(2 * var(--u)); font-size: calc(10.62 * var(--u)); text-shadow: 0 0 2px var(--c-cream), 0 0 4px var(--c-cream), 0 0 6px var(--c-cream); }
.lang-switch--nav .is-current a::after,
.lang-switch--nav a:hover::after { top: calc(100% + .26 * var(--u)); bottom: auto; height: calc(1.17 * var(--u)); }

.lang-switch--drawer { position: relative; margin: -42px 0 34px 60px; }
.lang-switch--footer { margin-top: 20px; }

/* ---------- Composizione rotonda (cerchio, macchia, chicchi, fiore) ---------- */

.visual {
	position: relative;
	width: calc(304.258 * var(--u));
	height: calc(301.688 * var(--u));
}

.visual__circle {
	position: absolute;
	z-index: 1;
	left: calc(16.1 * var(--u));
	top: calc(5.3 * var(--u));
	width: calc(253.5 * var(--u));
	height: calc(253.5 * var(--u));
	border-radius: 50%;
	overflow: hidden;
}

.visual__beans { z-index: 2; }

/* Macchia intera fuori dall'hero; nell'hero (desktop) quella tagliata dal bordo, come nella bozza. */
.visual .svg-blob-br { display: none; }

.visual__social {
	position: absolute;
	z-index: 3;
	left: calc(214.83 * var(--u));
	top: calc(254.22 * var(--u));
	display: flex;
}
.visual__social.social { gap: calc(3.61 * var(--u)); }
.visual__social.social svg { display: block; width: calc(15.5 * var(--u)); height: auto; }

.circle-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.circle-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FDD8BC;
	color: var(--c-logo);
}
.circle-img--empty svg { width: 34%; height: auto; }
.circle-img--empty svg path { fill: currentColor; }

/* ---------- Hero ---------- */

/* L'hero misura se stesso: identico a tutta larghezza, in scala dentro una colonna di Elementor. */
.hero-wrap { container: hero / inline-size; position: relative; }

/* Sale sotto la testata, come nella bozza dove logo e menu stanno sopra la stessa card. */
@container sheet (min-width: 860px) {
	.hero-wrap--overlap { margin-top: calc(-118.2 * var(--u)); }
}

.hero {
	--u: calc(100cqw / 596.258);
	position: relative;
	aspect-ratio: 596.258 / 381.688;
}

.hero__visual {
	position: absolute;
	z-index: 1;
	left: calc(292 * var(--u));
	top: calc(80 * var(--u));
}
.hero__visual .svg-blob-br { display: block; }
.hero__visual .svg-blob-b { display: none; }

.hero__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.hero__image.is-active { opacity: 1; }

.hero__slides {
	position: absolute;
	z-index: 2;
	left: calc(30.17 * var(--u));
	bottom: calc(73.01 * var(--u));
	width: calc(269 * var(--u));
	display: grid;
}

.hero__slide {
	grid-area: 1 / 1;
	align-self: end;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }

.hero__title {
	margin: 0;
	font: 700 calc(46 * var(--u))/1.1 var(--f-slab);
	color: var(--c-espresso);
}
.hero__title a { color: inherit; text-decoration: none; }
.hero__title.is-l { font-size: calc(34 * var(--u)); }
.hero__title.is-m { font-size: calc(26 * var(--u)); }
.hero__title.is-s {
	font-size: calc(22 * var(--u));
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero__subtitle {
	margin: calc(1.94 * var(--u)) 0 0;
	font: 400 calc(19.32 * var(--u))/1.2 var(--f-sans);
	color: var(--c-caramel);
}

.hero__text {
	margin: calc(8.65 * var(--u)) 0 0;
	font: 400 calc(8.8 * var(--u))/calc(10.5 * var(--u)) var(--f-sans);
	color: var(--c-ink);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hero__kicker {
	margin: calc(11.13 * var(--u)) 0 0 calc(1.44 * var(--u));
	font: 400 calc(19.7 * var(--u))/1.2 var(--f-slab);
	color: var(--c-espresso);
}

.hero .hero__button {
	display: block;
	width: fit-content;
	min-height: 0;
	height: calc(24.2 * var(--u));
	margin: calc(12.03 * var(--u)) 0 0 calc(1.44 * var(--u));
	padding: 0 calc(15.2 * var(--u)) calc(2 * var(--u));
	border-radius: calc(12.1 * var(--u));
	font-weight: 400;
	font-size: calc(14 * var(--u));
	line-height: calc(22.2 * var(--u));
}

.hero__dots {
	position: absolute;
	z-index: 2;
	left: calc(267.45 * var(--u));
	top: calc(338.85 * var(--u));
	display: flex;
	gap: calc(14.94 * var(--u));
}

.dot {
	display: block;
	width: calc(9.7 * var(--u));
	height: calc(9.7 * var(--u));
	padding: 0;
	border: calc(1.53 * var(--u)) solid var(--c-roast);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.dot.is-active { background: var(--c-roast); }
span.dot { cursor: default; }

/* ---------- Elementi comuni ---------- */

.btn,
.wp-block-button__link,
.wp-element-button,
.search-form__submit,
.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 30px 2px;
	border: 0;
	border-radius: 999px;
	background: var(--c-espresso);
	color: var(--c-foam);
	font: 500 18px/1 var(--f-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}
.btn:hover, .wp-block-button__link:hover, .wp-element-button:hover,
.search-form__submit:hover, .comment-form .submit:hover { background: var(--c-caramel); color: var(--c-foam); }

.eyebrow {
	margin: 0 0 10px;
	font: 500 13px/1.3 var(--f-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--c-caramel);
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--c-espresso); }

.link-more {
	position: relative;
	display: inline-block;
	padding: 0 4px 5px;
	font: 700 16px/1.2 var(--f-slab);
	letter-spacing: .04em;
	color: var(--c-roast);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
}
.link-more::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: currentColor;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin: 0;
	font: 400 14px/1.4 var(--f-sans);
	color: var(--c-caramel);
}
.meta__author { font-weight: 500; color: var(--c-ink); }

.pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }

.pill,
.drawer__more li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px 10px;
	border: 1.5px solid var(--c-roast);
	border-radius: 999px;
	font: 400 16px/1 var(--f-slab);
	letter-spacing: .03em;
	color: var(--c-roast);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.pill span {
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--c-sand);
	font: 500 12px/1 var(--f-sans);
}
.pill:hover, .drawer__more li a:hover { background: var(--c-roast); color: var(--c-foam); }
.pill:hover span { background: var(--c-caramel); }
.pills--small .pill { padding: 7px 14px 8px; font-size: 14px; }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea {
	width: 100%;
	padding: 12px 18px;
	border: 1.5px solid #E9CDB5;
	border-radius: 14px;
	background: #fff;
	color: var(--c-ink);
	font: 400 16px/1.4 var(--f-sans);
}
input:focus, textarea:focus {
	outline: none;
	border-color: var(--c-roast);
	box-shadow: 0 0 0 3px rgba(255, 169, 105, .4);
}

.search-form { display: flex; gap: 8px; max-width: 440px; }
.search-form__field { flex: 1; min-width: 0; border-radius: 999px; }
.search-form__submit { min-height: 46px; padding: 0 22px 2px; font-size: 16px; }

.social { display: flex; gap: 8px; }
.social a, .social span { display: block; color: var(--c-caramel); }
.social a:hover { color: var(--c-espresso); }
.social svg { display: block; width: 40px; height: auto; }
.social svg path, .share svg path { fill: currentColor; }

/* ---------- Sezioni ---------- */

.section {
	position: relative;
	padding: clamp(48px, 7cqw, 96px) var(--pad);
}
.section--band { background: var(--c-sand); }
.section--listing { padding-top: 0; }

.section__zigzag {
	position: absolute;
	top: clamp(44px, 6.4cqw, 88px);
	right: var(--pad);
	width: clamp(70px, 9cqw, 120px);
	height: auto;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 24px;
	margin-bottom: clamp(28px, 4cqw, 52px);
}
.section-head .eyebrow { flex-basis: 100%; margin: 0; }
.section-head .link-more { margin-left: auto; }
.section--band .section-head .link-more { margin-right: calc(clamp(70px, 9cqw, 120px) + 24px); }

.section-title {
	display: flex;
	align-items: center;
	gap: .3em;
	margin: 0;
	font: 700 clamp(30px, 3.6cqw, 46px)/1.1 var(--f-slab);
	color: var(--c-espresso);
}
.section-title__flower { flex: none; width: .6em; height: auto; margin-top: -.6em; }

/* Card */

.cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(44px, 5cqw, 68px) clamp(28px, 3.4cqw, 48px);
}

.card { position: relative; display: flex; flex-direction: column; }

.card__media {
	position: relative;
	display: block;
	width: 80%;
	aspect-ratio: 1;
	margin: 0 0 28px 3%;
}
.card__blob {
	position: absolute;
	z-index: 0;
	left: 34%;
	top: 40%;
	width: 88%;
	height: auto;
}
.card__media .circle-img {
	position: relative;
	z-index: 1;
	transition: transform .5s ease;
}
.card:hover .card__media .circle-img { transform: scale(1.03); }

.card__body { position: relative; z-index: 1; }

.card__title {
	margin: 0 0 10px;
	font: 700 clamp(20px, 1.95cqw, 25px)/1.22 var(--f-slab);
	color: var(--c-espresso);
}
.card__title a {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size .3s ease;
}
.card__title a:hover { background-size: 100% 2px; }

.card__excerpt { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }

.cards--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; }
.card--row { flex-direction: row; align-items: center; gap: 24px; }
.card--row .card__media { flex: none; width: 128px; margin: 0; }
.card--row .card__blob { left: 30%; top: 36%; width: 90%; }
.card--row .card__title { font-size: 20px; }
.cards--two { margin-top: clamp(64px, 10cqw, 140px); }

/* Articolo grande a specchio dell'hero */

.feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 4cqw, 64px);
}
.feature__visual { --u: calc(40cqw / 304.258); }
.feature__body { position: relative; z-index: 2; }
.feature__title {
	margin: 0 0 14px;
	font: 700 clamp(28px, 3.4cqw, 44px)/1.12 var(--f-slab);
	color: var(--c-espresso);
}
.feature__title a { color: inherit; text-decoration: none; }
.feature__text { margin: 0 0 14px; font-size: 18px; }
.feature .btn { margin-top: 24px; }

/* ---------- Intestazioni di pagina ed elenchi ---------- */

.page-head {
	position: relative;
	max-width: 62rem;
	padding: clamp(8px, 1.6cqw, 20px) var(--pad) clamp(36px, 4.4cqw, 56px);
}
.page-title {
	margin: 0;
	font: 700 clamp(36px, 5.4cqw, 66px)/1.08 var(--f-slab);
	color: var(--c-espresso);
}
.page-head__text { max-width: 40rem; margin-top: 12px; font-size: 19px; color: var(--c-caramel); }
.page-head__text p { margin: 0 0 .6em; }
.page-head__zigzag { display: block; width: 84px; height: auto; margin-top: 22px; }
.page-head__flower { position: absolute; top: 0; right: var(--pad); width: 30px; height: auto; }

.dots-pagination { margin-top: clamp(44px, 5cqw, 64px); }
.dots-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--c-roast);
	border-radius: 50%;
	font: 700 16px/1 var(--f-slab);
	color: var(--c-roast);
	text-decoration: none;
}
.page-numbers.current, a.page-numbers:hover { background: var(--c-roast); color: var(--c-foam); }
.page-numbers.dots { border: 0; }

.empty { max-width: 34rem; }

/* ---------- Articolo ---------- */

.entry-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 0 0 clamp(24px, 3cqw, 48px) var(--pad);
}
.entry-hero__visual { --u: calc(44cqw / 304.258); }
.entry-hero__text { position: relative; z-index: 2; }
.entry-hero__flower {
	position: absolute;
	left: calc(var(--pad) - 6px);
	bottom: 0;
	width: 26px;
	height: auto;
}
.entry-title {
	margin: 0 0 14px;
	font: 700 clamp(34px, 4.6cqw, 58px)/1.1 var(--f-slab);
	color: var(--c-espresso);
}
.entry-standfirst {
	margin: 0 0 18px;
	font: 400 clamp(19px, 1.8cqw, 23px)/1.4 var(--f-sans);
	color: var(--c-caramel);
}

.entry-credit { margin: 8px 0 0; font-size: 12px; color: var(--c-caramel); opacity: .85; }

.entry-cover { margin: 0 var(--pad) 24px; }
.entry-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 28px; }

.entry-content {
	padding: clamp(16px, 3cqw, 40px) var(--pad) 24px;
	font-size: clamp(17px, 1.5cqw, 19px);
	line-height: 1.75;
}
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: 1100px; }
.entry-content > .alignfull { max-width: none; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }

.entry-content p, .editor-styles-wrapper p { margin-top: 0; margin-bottom: 1.15em; }

.entry-content h2, .entry-content h3, .entry-content h4,
.editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4 {
	font-family: var(--f-slab);
	color: var(--c-espresso);
	line-height: 1.2;
}
.entry-content h2, .editor-styles-wrapper h2 { margin: 1.9em auto .6em; font-size: clamp(27px, 2.6cqw, 34px); font-weight: 700; }
.entry-content h3, .editor-styles-wrapper h3 { margin: 1.6em auto .5em; font-size: clamp(22px, 2cqw, 26px); font-weight: 700; }
.entry-content h4, .editor-styles-wrapper h4 { margin: 1.4em auto .4em; font-size: 20px; font-weight: 400; }

.entry-content a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.entry-content ul li::marker { color: var(--c-orange); }
.entry-content ol li::marker { color: var(--c-caramel); font-family: var(--f-slab); font-weight: 700; }
.entry-content li { margin-bottom: .35em; }

.entry-content blockquote, .editor-styles-wrapper blockquote {
	margin: 1.8em auto;
	padding: 4px 0 4px 26px;
	border-left: 4px solid var(--c-orange);
	font: 400 1.25em/1.5 var(--f-slab);
	color: var(--c-espresso);
}
.entry-content blockquote cite, .editor-styles-wrapper blockquote cite {
	display: block;
	margin-top: 10px;
	font: 500 13px/1.3 var(--f-sans);
	font-style: normal;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--c-caramel);
}
.wp-block-quote.is-style-scc-flower {
	position: relative;
	padding: 6px 0 6px 64px;
	border: 0;
}
.wp-block-quote.is-style-scc-flower::before {
	content: "";
	position: absolute;
	left: 0; top: 8px;
	width: 42px; height: 40px;
	background: url(../svg/flower.svg) center / contain no-repeat;
}

.entry-content figure { margin-top: 2em; margin-bottom: 2em; }
.entry-content img { border-radius: 24px; }
.entry-content figcaption, .wp-element-caption {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
	color: var(--c-caramel);
}

.entry-content hr, .wp-block-separator {
	height: 28px;
	margin: 2.4em auto;
	border: 0;
	background: url(../svg/zigzag.svg) center / auto 100% no-repeat;
	opacity: 1;
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: .92em; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1.5px solid var(--c-line); text-align: left; }
.entry-content th { font-family: var(--f-slab); color: var(--c-espresso); }

.entry-content code, .entry-content pre { background: var(--c-sand); border-radius: 8px; font-size: .88em; }
.entry-content code { padding: 2px 6px; }
.entry-content pre { padding: 18px 20px; overflow: auto; }

.scc-box {
	margin: 2em auto;
	padding: 28px 32px;
	border-radius: 28px;
	background: var(--c-sand);
}
.scc-box > .eyebrow { margin-bottom: 4px; }
.scc-box h3 { margin-top: 0 !important; }
.scc-specs { gap: 18px 28px; margin: 18px 0 20px; }
.scc-specs p {
	margin: 0 !important;
	font: 400 20px/1.3 var(--f-slab);
	color: var(--c-espresso);
}
.scc-specs strong {
	display: block;
	margin-bottom: 4px;
	font: 500 12px/1.3 var(--f-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-caramel);
}
.scc-box ol { margin-bottom: 0; }

.page-links { display: flex; gap: 10px; align-items: center; margin-top: 2em; }

.entry-footer {
	max-width: calc(760px + 2 * var(--pad));
	margin: 0 auto;
	padding: 8px var(--pad) clamp(40px, 5cqw, 72px);
}

.share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0;
	padding: 16px 0;
	border-top: 1.5px solid var(--c-line);
	border-bottom: 1.5px solid var(--c-line);
}
.share a { display: block; color: var(--c-caramel); }
.share a:hover { color: var(--c-espresso); }
.share svg { display: block; width: 36px; height: auto; }
.share__label { margin-right: 6px; font: 700 16px/1 var(--f-slab); color: var(--c-roast); }
.share__copy { margin-left: auto; }
.share__copy { position: relative; padding: 0 4px 5px; font: 700 15px/1.2 var(--f-slab); color: var(--c-roast); background: none; border: 0; cursor: pointer; }
.share__copy::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; }

.author-box {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 28px 0;
	padding: 22px 26px;
	border-radius: 28px;
	background: var(--c-sand);
}
.author-box__avatar { flex: none; width: 80px; height: 80px; border-radius: 50%; }
.author-box .eyebrow { margin-bottom: 2px; }
.author-box__name { margin: 0; font: 700 20px/1.3 var(--f-slab); color: var(--c-espresso); }
.author-box__name a { color: inherit; text-decoration: none; }
.author-box__bio { margin: 6px 0 0; font-size: 16px; }

.post-nav .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post-nav .nav-next { grid-column: 2; text-align: right; }
.post-nav a { display: block; text-decoration: none; }
.post-nav .eyebrow { display: block; }
.post-nav__title { display: block; font: 700 18px/1.3 var(--f-slab); color: var(--c-espresso); }
.post-nav a:hover .post-nav__title { color: var(--c-caramel); }

/* ---------- Commenti ---------- */

.comments {
	max-width: calc(760px + 2 * var(--pad));
	margin: 0 auto;
	padding: clamp(40px, 5cqw, 72px) var(--pad);
}
.comment-list { margin: 24px 0 44px; padding: 0; list-style: none; }
.comment-list .children { padding-left: clamp(16px, 4cqw, 48px); list-style: none; }
.comment-body { padding: 20px 0; border-bottom: 1.5px solid var(--c-line); }
.comment-author .avatar { float: left; margin-right: 14px; border-radius: 50%; }
.comment-author .fn { font: 700 17px/1.3 var(--f-slab); font-style: normal; color: var(--c-espresso); }
.comment-author .fn a { color: inherit; text-decoration: none; }
.comment-author .says { display: none; }
.comment-metadata { font-size: 13px; }
.comment-metadata a { color: var(--c-caramel); text-decoration: none; }
.comment-content { clear: both; padding-top: 8px; }
.reply a { font: 700 14px/1 var(--f-slab); color: var(--c-roast); }
.comment-respond { margin-top: 12px; }
.comment-form p { margin: 0 0 16px; }
.comment-form label {
	display: block;
	margin-bottom: 6px;
	font: 500 12px/1.3 var(--f-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--c-caramel);
}
.comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.comment-notes, .logged-in-as { font-size: 14px; color: var(--c-caramel); }

/* ---------- 404 ---------- */

.not-found {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 0 0 clamp(40px, 6cqw, 80px) var(--pad);
}
.not-found__visual { --u: calc(42cqw / 304.258); }
.not-found__lead { font-size: 19px; max-width: 32rem; }
.not-found .search-form { margin: 24px 0; }
.circle-img--404 { font: 700 clamp(64px, 9cqw, 120px)/1 var(--f-slab); color: var(--c-espresso); }

/* ---------- Piè di pagina ---------- */

.site-footer {
	position: relative;
	padding: clamp(48px, 6cqw, 88px) var(--pad) 28px;
	overflow: hidden;
}
.site-footer__blob { position: absolute; z-index: 0; right: -7%; bottom: -46%; width: clamp(240px, 32cqw, 420px); height: auto; }
.site-footer__leaf { position: absolute; z-index: 0; left: 21%; bottom: 0; width: clamp(64px, 17.3cqw, 214px); height: auto; }
.site-footer__zigzag { position: absolute; z-index: 0; left: calc(46.13 / 31.13 * var(--pad)); bottom: 26px; width: clamp(56px, 14cqw, 174px); height: auto; }

.site-footer__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 40px;
}
.site-footer .brand { position: static; --u: 1.9px; display: inline-flex; }
.site-footer__about p { max-width: 32ch; margin: 18px 0 0; }
.site-footer__about p a:not(#scc) { color: var(--c-roast); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__nav ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__nav a { font: 400 17px/1.3 var(--f-slab); letter-spacing: .04em; color: var(--c-roast); text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__side .social { margin-bottom: 20px; }

.site-footer__copy {
	position: relative;
	z-index: 1;
	margin: clamp(48px, 7cqw, 120px) 0 0;
	font-size: 14px;
	text-align: right;
	color: var(--c-caramel);
}
.site-footer__copy a { color: inherit; }

/* ---------- Pannello hamburger ---------- */

.drawer { position: fixed; inset: 0; z-index: 1000; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(68, 58, 42, .45); animation: scc-fade .25s ease; }
.drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(420px, 92vw);
	padding: 88px 36px 36px;
	overflow: auto;
	background: var(--c-cream);
	box-shadow: -10px 0 30px rgba(0, 0, 0, .25);
	animation: scc-slide .3s ease;
}
.drawer__palm { position: absolute; top: -34px; right: -26px; width: 150px; height: auto; pointer-events: none; }
.drawer__close {
	position: absolute;
	top: 22px; left: 26px;
	width: 44px; height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.drawer__close span::before, .drawer__close span::after {
	content: "";
	position: absolute;
	left: 9px; top: 21px;
	width: 26px; height: 2px;
	background: var(--c-roast);
	transform: rotate(45deg);
}
.drawer__close span::after { transform: rotate(-45deg); }
.drawer__nav .nav__list { display: block; margin: 0 0 28px; }
.drawer__nav .nav__list a { padding: 6px 0; font: 700 30px/1.25 var(--f-slab); letter-spacing: 0; color: var(--c-espresso); }
.drawer__nav .nav__list a::after { display: none; }
.drawer__more ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.drawer__more li a { padding: 8px 14px 9px; font-size: 15px; }
.drawer .social { margin-top: 24px; }

@keyframes scc-fade { from { opacity: 0; } }
@keyframes scc-slide { from { transform: translateX(100%); } }

/* ---------- Widget Elementor del tema ---------- */

/* Nei contenitori flex di Elementor un figlio con container-type viene misurato a larghezza
   intrinseca e l'altezza esce sbagliata: il widget deve occupare tutta la riga. */
.elementor-widget-scc-hero, .elementor-widget-scc-visual { width: 100%; }
.scc-visual-wrap { container-type: inline-size; width: 100%; }
.scc-visual-wrap .visual { --u: calc(100cqw / 304.258); }
.scc-visual-wrap a { display: block; }
.no-blob .svg-blob-b, .no-blob .svg-blob-br, .no-beans .visual__beans, .no-flower .visual > .svg-flower { display: none; }

.scc-deco { display: flex; }
.scc-deco svg { display: block; max-width: 100%; height: auto; }

.cards--no-excerpt .card__excerpt { display: none; }

.scc-specs--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.scc-box__title { margin: 0; font: 700 clamp(22px, 2cqw, 26px)/1.2 var(--f-slab); color: var(--c-espresso); }
.scc-steps { margin: 0; padding-left: 1.3em; }
.scc-steps li::marker { color: var(--c-caramel); font-family: var(--f-slab); font-weight: 700; }

/* ---------- Sotto i 860 px di foglio: una colonna ---------- */

@container sheet (max-width: 859.98px) {
	.masthead { --u: calc(100cqw / 380); height: calc(86 * var(--u)); }
	.nav__list, .lang-switch--nav { display: none; }
	.nav { top: calc(27 * var(--u)); right: calc(26 * var(--u)); }
	.nav-toggle { width: 26px; height: 18px; margin: 0; }
	.nav-toggle__bars span { height: 2px; }


	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards--rows { grid-template-columns: minmax(0, 1fr); }
	.section--band .section-head .link-more { margin-right: 0; }
	.section__zigzag { display: none; }

	.feature { grid-template-columns: minmax(0, 1fr); }
	.feature__visual { --u: calc(84cqw / 304.258); }

	.entry-hero, .not-found { grid-template-columns: minmax(0, 1fr); padding-right: var(--pad); }
	.entry-hero__visual, .not-found__visual { --u: calc(100cqw / 304.258); order: -1; margin-right: calc(-1 * var(--pad)); justify-self: end; }
	.entry-hero__flower { display: none; }

	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.site-footer__copy { text-align: left; margin-top: 100px; }
}

@container hero (max-width: 859.98px) {
	.hero { aspect-ratio: auto; display: flex; flex-direction: column; padding-bottom: 28px; }
	.hero__visual {
		--u: calc(100cqw / 304.258);
		position: relative;
		left: auto; top: auto;
		order: 1;
	}
	.hero__visual .svg-blob-br { display: none; }
	.hero__visual .svg-blob-b { display: block; }
	.hero__slides { position: relative; left: auto; bottom: auto; width: auto; order: 2; padding: 4px var(--pad) 0; }
	.hero__title { font-size: 11.6cqw; }
	.hero__title.is-l { font-size: 9.4cqw; }
	.hero__title.is-m { font-size: 7.8cqw; }
	.hero__title.is-s { font-size: 7cqw; }
	.hero__subtitle { margin-top: 6px; font-size: 20px; }
	.hero__text { margin-top: 14px; font-size: 16px; line-height: 1.55; }
	.hero__kicker { margin: 16px 0 0; font-size: 20px; }
	.hero .hero__button { height: 46px; margin: 16px 0 0; padding: 0 26px 2px; border-radius: 23px; font-size: 17px; line-height: 44px; }
	.hero__dots { position: relative; left: auto; top: auto; order: 3; gap: 14px; padding: 24px var(--pad) 0; }
	.dot { width: 12px; height: 12px; border-width: 2px; }
	.hero__leaf, .hero__zigzag, .hero__flower { display: none; }
}

@container sheet (max-width: 560px) {
	.cards { grid-template-columns: minmax(0, 1fr); }
	.card--row { gap: 18px; }
	.card--row .card__media { width: 104px; }
	.post-nav .nav-links { grid-template-columns: minmax(0, 1fr); }
	.post-nav .nav-next { grid-column: 1; }
	.share { flex-wrap: wrap; }
}

/* ---------- Convivenza con Elementor ----------
 * Il Kit di Elementor stila ogni link e ogni <button> della pagina (".elementor-kit-N a",
 * ".elementor-kit-N button") e il suo CSS mette "border-radius: 0; height: auto" su tutte le
 * immagini. :not(#scc) alza la specificità sopra quelle regole senza cambiare cosa si seleziona.
 */
img.circle-img:not(#scc) { width: 100%; height: 100%; border-radius: 50%; }

.brand:not(#scc) { color: var(--c-logo); }
.brand:not(#scc):hover { color: var(--c-espresso); }

.btn:not(#scc), .btn:not(#scc):hover, .btn:not(#scc):focus { color: var(--c-foam); }

.hero__title a:not(#scc), .card__title a:not(#scc), .feature__title a:not(#scc),
.author-box__name a:not(#scc), .comment-author .fn a:not(#scc), .eyebrow a:not(#scc),
.site-footer__copy a:not(#scc), .post-nav a:not(#scc) { color: inherit; }
.eyebrow a:not(#scc):hover { color: var(--c-espresso); }

.social a:not(#scc), .share a:not(#scc) { color: var(--c-caramel); }
.social a:not(#scc):hover, .share a:not(#scc):hover { color: var(--c-espresso); }

.lang-switch a:not(#scc),
.nav__list a:not(#scc), .site-footer__nav a:not(#scc), .link-more:not(#scc),
.pill:not(#scc), .drawer__more li a:not(#scc), .page-numbers:not(#scc) { color: var(--c-roast); }
.drawer__nav .nav__list a:not(#scc) { color: var(--c-espresso); }
.pill:not(#scc):hover, .drawer__more li a:not(#scc):hover,
a.page-numbers:not(#scc):hover, .page-numbers.current:not(#scc) { color: var(--c-foam); }

.dot:not(#scc), .dot:not(#scc):hover, .dot:not(#scc):focus {
	padding: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}
.dot.is-active:not(#scc) { background: var(--c-roast); }
.dot:not(#scc) { border-style: solid; border-color: var(--c-roast); }

.nav-toggle:not(#scc), .nav-toggle:not(#scc):hover, .nav-toggle:not(#scc):focus,
.drawer__close:not(#scc), .drawer__close:not(#scc):hover, .drawer__close:not(#scc):focus,
.share__copy:not(#scc), .share__copy:not(#scc):hover, .share__copy:not(#scc):focus {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--c-roast);
}
.share__copy:not(#scc) { padding: 0 4px 5px; font: 700 15px/1.2 var(--f-slab); }

.search-form__submit:not(#scc), .comment-form .submit:not(#scc) {
	padding: 0 22px 2px;
	border: 0;
	border-radius: 999px;
	background: var(--c-espresso);
	color: var(--c-foam);
	font: 500 16px/1 var(--f-sans);
}
.search-form__submit:not(#scc):hover, .comment-form .submit:not(#scc):hover { background: var(--c-caramel); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}