/* ==========================================================
   Save Your Planet – stile
   ========================================================== */
:root {
	--syp-green: #2e6b3f;
	--syp-green-dark: #1f4d2c;
	--syp-mint: #eaf4ec;
	--syp-mint-2: #d5eadb;
	--syp-line: #dce8de;
	--syp-text-soft: #5b6b60;
	--syp-radius: 18px;
}

/* ---------- Header ---------- */
.syp-header { border-bottom: 1px solid var(--syp-line); background: #fff; }
.syp-header .wp-block-site-title a {
	display: inline-flex; align-items: center; gap: .6rem;
	font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--syp-green-dark);
}
.syp-header .wp-block-site-title a::before {
	content: ""; width: 34px; height: 34px; flex: none; border-radius: 9px;
	background: url(icons/favicon.svg) center / cover no-repeat;
}
.syp-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--syp-mint); gap: 2px; }
.syp-lang a {
	min-width: 44px; padding: .4rem .8rem; border-radius: 999px; text-align: center;
	font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-decoration: none; color: var(--syp-green);
}
.syp-lang a.is-active { background: var(--syp-green); color: #fff; }
.syp-lang a:not(.is-active):hover { background: #fff; }

/* ---------- Pagina principale ---------- */
.syp-landing .wp-block-post-title { display: none; }
.syp-landing main.wp-block-group { margin-block-start: 0 !important; }
.syp-landing main .wp-block-group.has-global-padding:first-child { padding-block-start: 2rem !important; }

/* Hero */
.syp-hero {
	position: relative; overflow: hidden; border-radius: 28px;
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
	background: linear-gradient(135deg, #eff7f0 0%, var(--syp-mint-2) 100%);
	margin-block-end: 1rem;
}
.syp-hero::after {
	content: ""; position: absolute; right: -40px; bottom: -60px; width: 280px; height: 280px; opacity: .12;
	background: url(icons/riciclo.svg) center / contain no-repeat; pointer-events: none;
}
.syp-hero > * { position: relative; }
.syp-hero h1 { margin: .6rem 0 .4rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; color: var(--syp-green-dark); }
.syp-kicker {
	display: inline-flex; align-items: center; margin: 0; padding: .35rem .85rem .35rem .6rem;
	border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 600; color: var(--syp-green);
}
.syp-lead { margin: 0; max-width: 40rem; font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--syp-text-soft); }

/* Titoli di sezione */
.syp-landing .wp-block-post-content > h2.syp-h { display: flex; align-items: center; gap: .75rem; margin-block-start: 3rem; font-size: clamp(1.35rem, 3vw, 1.8rem); color: var(--syp-green-dark); }
.syp-h-ico { box-sizing: border-box; width: 52px; height: 52px; padding: 10px; border-radius: 50%; background: var(--syp-mint); flex: none; }

/* ---------- Tabelle (desktop) ---------- */
.wp-block-table.syp-tabella { margin-block: 1rem 1.25rem; overflow-x: auto; }
.wp-block-table.syp-tabella table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem;
	border: 1px solid var(--syp-line); border-radius: var(--syp-radius); overflow: hidden; background: #fff;
	box-shadow: 0 6px 24px rgba(31, 77, 44, .06);
}
.wp-block-table.syp-tabella thead { border: 0; }
.wp-block-table.syp-tabella th,
.wp-block-table.syp-tabella td { border: 0; border-left: 1px solid var(--syp-line); border-top: 1px solid var(--syp-line); text-align: center; vertical-align: middle; padding: .9em .7em; }
.wp-block-table.syp-tabella tr > :first-child { border-left: 0; }
.wp-block-table.syp-tabella thead th { border-top: 0; background: var(--syp-mint); color: var(--syp-green-dark); font-size: .85rem; font-weight: 700; letter-spacing: .04em; vertical-align: top; padding-block: 1.1em .9em; }
.wp-block-table.syp-tabella tbody tr:first-child td { font-size: .92rem; }
.wp-block-table.syp-tabella tbody tr:last-child td { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--syp-green); background: #f6faf6; }
.wp-block-table.syp-tabella tbody tr:last-child td:empty { background: #fff; }
.syp-ico { box-sizing: border-box; display: block; width: 48px; height: 48px; margin: 0 auto .55em; padding: 7px; border-radius: 12px; background: #fff; }
.syp-ico-inline { width: 20px; height: 20px; vertical-align: -5px; margin-right: .45em; }

/* Codici come "pillole" */
.syp-tabella code, .syp-m-code code {
	display: inline-block; padding: .3em .75em; border-radius: 999px; background: var(--syp-green); color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}

/* Nota "Verifica..." */
.syp-nota {
	/* blocco (non inline): così il layout di WordPress lo allinea alla colonna della tabella */
	display: flex; align-items: center; box-sizing: border-box; margin-block-start: .25rem; padding: .6rem 1rem .6rem .8rem;
	border-radius: 12px; background: #fff7e0; color: #6b5314; font-size: .9rem;
}
.syp-nota .syp-ico-inline { filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(.7); }

/* ---------- Footer ---------- */
.syp-footer { margin-block-start: 4rem; padding-block: 3rem 3.5rem; background: var(--syp-green-dark); color: #e6efe8; font-size: .95rem; }
.syp-footer p { margin-block: .4rem; }
.syp-footer strong { color: #fff; }
.syp-footer a { color: #fff; text-decoration: none; }
.syp-footer a:hover { text-decoration: underline; }
.syp-footer .syp-ico-inline { filter: brightness(0) invert(1); opacity: .85; }
.syp-footer-title { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fd0ab !important; margin-block-end: .9rem !important; }
.syp-footer-legal { margin-block-start: 1.4rem !important; font-size: .8rem; color: #b8cabd; }
.syp-footer-legal a { text-decoration: underline; color: #e6efe8; }

/* ---------- Mobile ---------- */
.syp-mobile { display: none; }

@media (max-width: 720px) {
	.wp-block-table.syp-tabella { display: none; }
	.syp-mobile { display: block; margin-block: .75rem 1rem; }
	.syp-m-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--syp-line); border-radius: var(--syp-radius); overflow: hidden; background: #fff; box-shadow: 0 6px 20px rgba(31, 77, 44, .06); }
	.syp-m-item {
		display: grid; grid-template-columns: 44px 1fr auto;
		grid-template-areas: "ico head code" "ico mat code";
		column-gap: .8rem; row-gap: .1rem; align-items: center;
		padding: .85rem .9rem; border-top: 1px solid var(--syp-line);
	}
	.syp-m-item:first-child { border-top: 0; }
	.syp-m-ico { grid-area: ico; }
	.syp-m-ico img { box-sizing: border-box; display: block; width: 44px; height: 44px; margin: 0; padding: 8px; border-radius: 12px; background: var(--syp-mint); }
	.syp-m-head { grid-area: head; align-self: end; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--syp-green); }
	.syp-m-mat { grid-area: mat; align-self: start; font-size: .95rem; line-height: 1.3; }
	.syp-m-code { grid-area: code; text-align: right; }
	.syp-m-code code { font-size: .8rem; }
	.syp-m-note { display: flex; justify-content: center; align-items: center; margin: 0; padding: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--syp-green); background: #f6faf6; border: 1px solid var(--syp-line); border-top: 0; border-radius: 0 0 var(--syp-radius) var(--syp-radius); }
	.syp-mobile:has(.syp-m-note) .syp-m-list { border-radius: var(--syp-radius) var(--syp-radius) 0 0; }

	.syp-landing main .wp-block-group.has-global-padding:first-child { padding-block-start: 1rem !important; }
	.syp-hero { border-radius: 22px; }
	.syp-hero::after { width: 180px; height: 180px; right: -40px; bottom: -40px; }
	.syp-landing .wp-block-post-content > h2.syp-h { margin-block-start: 2.25rem; }
	.syp-h-ico { width: 44px; height: 44px; padding: 8px; }
	.syp-nota { border-radius: 14px; font-size: .85rem; }
	.syp-lang a { min-width: 40px; padding: .35rem .7rem; }
	.syp-header .wp-block-site-title a { font-size: 1rem; }
	.syp-header .wp-block-site-title a::before { width: 30px; height: 30px; }

	.syp-footer { padding-block: 2.25rem 2.5rem; margin-block-start: 3rem; }
	.syp-footer a { display: inline-block; padding-block: .3rem; }
	.syp-footer-legal { line-height: 1.5; }
}

/* Tabella a una sola voce (es. Lattina) */
.wp-block-table.syp-singola table { width: auto; min-width: 240px; max-width: 100%; }