/*
Theme Name: Casella 21 — Blocksy Child
Theme URI: https://www.casella21.it/
Description: Child theme grafico di Casella 21 basato su Blocksy.
Author: Casella 21
Template: blocksy
Version: 0.1.8
Text Domain: casella21-blocksy
*/

/* =========================================================
   CASELLA 21 — DESIGN SYSTEM
   ========================================================= */
:root {
	--c21-burgundy: #6C0820;
	--c21-pink: #F2AEBC;
	--c21-misty: #F2DCDB;
	--c21-blue: #5A86CB;
	--c21-lapis: #3D5D91;
	--c21-ink: #36282c;
	--c21-paper: #fffaf7;
	--c21-white: #ffffff;
	--c21-radius: 18px;
	--c21-shadow: 0 18px 50px rgba(108, 8, 32, .08);
}

body {
	color: var(--c21-ink);
	background: var(--c21-white);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.c21-page {
	overflow: hidden;
}

.c21-page h1,
.c21-page h2,
.c21-page h3,
.c21-page .c21-serif {
	font-family: Georgia, "Times New Roman", serif;
	color: var(--c21-burgundy);
	font-weight: 400;
	letter-spacing: -.02em;
}

.c21-page h1 {
	font-size: clamp(3rem, 6vw, 5.7rem);
	line-height: .98;
}

.c21-page h2 {
	font-size: clamp(2.25rem, 4vw, 3.8rem);
	line-height: 1.05;
}

.c21-page h3 {
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	line-height: 1.15;
}

.c21-page p {
	font-size: 1.05rem;
	line-height: 1.75;
}

.c21-eyebrow {
	color: var(--c21-lapis);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.c21-heart {
	color: var(--c21-pink);
	font-size: 1.2rem;
	margin-right: .35rem;
}

.c21-button .wp-element-button,
.c21-page .wp-block-button__link {
	border-radius: 3px;
	padding: .95rem 1.5rem;
	font-weight: 600;
	text-decoration: none;
}

.c21-button-primary .wp-element-button,
.c21-button-primary .wp-block-button__link {
	background: var(--c21-burgundy);
	color: #fff;
	border: 1px solid var(--c21-burgundy);
}

.c21-button-secondary .wp-element-button,
.c21-button-secondary .wp-block-button__link {
	background: transparent;
	color: var(--c21-burgundy);
	border: 1px solid var(--c21-burgundy);
}

/* HERO */
.c21-hero {
	background: linear-gradient(90deg, #fff 0%, #fff7f7 100%);
}

.c21-hero .wp-block-columns {
	margin-bottom: 0;
	gap: 0;
}

.c21-hero-photo {
	height: 640px;
	margin: 0;
}

.c21-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 52%;
}

.c21-hero-copy {
	min-height: 640px;
	padding: clamp(2.5rem, 6vw, 6.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(circle at 0% 50%, rgba(242,174,188,.18), transparent 38%),
		linear-gradient(135deg, #fffdfc 0%, #fff4f5 100%);
}

.c21-hero-copy p {
	max-width: 590px;
}

/* SECTIONS */
.c21-section {
	padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 6vw, 7rem);
}

.c21-section-soft {
	background: linear-gradient(180deg, #fff 0%, rgba(242,220,219,.44) 100%);
}

.c21-section-pink {
	background: rgba(242,174,188,.16);
}

.c21-section-blue {
	background: rgba(90,134,203,.08);
}

.c21-intro-copy {
	max-width: 800px;
}

.c21-card {
	height: 100%;
	padding: 2rem 1.55rem;
	border: 1px solid rgba(108, 8, 32, .10);
	background: rgba(255,255,255,.68);
	box-shadow: 0 8px 30px rgba(108,8,32,.035);
}

.c21-card-icon {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--c21-pink);
	color: var(--c21-burgundy);
	font-size: 1.5rem;
}

.c21-card p {
	font-size: .98rem;
	line-height: 1.6;
}

/* HOME GALLERY */
.c21-photo-strip {
	margin: 0;
}

.c21-photo-strip .wp-block-columns {
	gap: 0;
	margin: 0;
}

.c21-photo-strip figure {
	height: 300px;
	margin: 0;
	overflow: hidden;
}

.c21-photo-strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.c21-photo-strip figure:hover img {
	transform: scale(1.025);
}

/* STEPS */
.c21-step {
	position: relative;
	padding: 1.6rem;
}

.c21-step-number {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--c21-pink);
	color: var(--c21-burgundy);
	font-family: Georgia, serif;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

/* SUBSCRIPTION */
.c21-price-card {
	padding: clamp(2rem,4vw,3.5rem);
	background: var(--c21-burgundy);
	color: #fff;
	box-shadow: var(--c21-shadow);
}

.c21-price-card h2,
.c21-price-card h3,
.c21-price-card p {
	color: #fff;
}

.c21-price {
	font-family: Georgia, serif;
	font-size: clamp(3rem,5vw,5rem);
	line-height: 1;
}

.c21-info-box {
	padding: 1.6rem 1.8rem;
	background: rgba(90,134,203,.10);
	border-left: 4px solid var(--c21-blue);
}

.c21-calendar {
	padding: 2rem;
	background: #fff;
	border: 1px solid rgba(61,93,145,.18);
	box-shadow: 0 12px 35px rgba(61,93,145,.07);
}

.c21-calendar strong {
	color: var(--c21-blue);
}

/* FAQ */
.c21-faq details {
	border-bottom: 1px solid rgba(108,8,32,.14);
	padding: 1.15rem 0;
}

.c21-faq summary {
	font-family: Georgia, serif;
	font-size: 1.35rem;
	color: var(--c21-burgundy);
	cursor: pointer;
}

.c21-faq details p {
	padding: .7rem 0 0;
	margin: 0;
}

/* SHORTCODE AREA */
.c21-subscription-widget {
	max-width: 880px;
	margin: 0 auto;
	padding: 2rem;
	background: var(--c21-paper);
	border: 1px solid rgba(108,8,32,.12);
}

/* Blocksy-ish header refinements, intentionally conservative */
#header a,
.site-header a {
	transition: color .2s ease;
}

#header .menu > li > a:hover,
#header .menu > li.current-menu-item > a {
	color: var(--c21-burgundy);
}

/* =========================================================
   RESPONSIVE REFINEMENTS — 0.1.2
   ========================================================= */

/* Desktop hero: use a crop designed for the wide layout. */
.c21-hero-photo {
	height: clamp(560px, 45vw, 720px);
	overflow: hidden;
	background: #dce9f6;
}

.c21-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.c21-hero-copy {
	min-height: clamp(560px, 45vw, 720px);
}

/* Avoid narrow cards in the awkward tablet / small-laptop range. */
@media (max-width: 1100px) {
	.c21-home .c21-section-soft > .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 2.5rem !important;
	}

	.c21-home .c21-section-soft > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.c21-home .c21-section-soft .wp-block-column > .wp-block-columns {
		gap: 1.25rem !important;
	}

	.c21-home .c21-section-soft .c21-card h3 {
		font-size: 1.7rem !important;
	}

	.c21-home .c21-section-soft .c21-card {
		min-height: 0;
	}
}

/* Hero becomes vertical before the mobile viewport gets cramped. */
@media (max-width: 900px) {
	.c21-hero > .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
	}

	.c21-hero > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/*
	 * Dedicated mobile asset. The image itself is already cropped around
	 * the mailbox slot + envelope, so the browser cannot drift toward sky.
	 */
	.c21-hero-photo {
		height: auto;
		background: #dce9f6;
	}

	.c21-hero-photo img {
		content: url("assets/images/hero-mailbox-mobile.webp");
		opacity: 1;
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center center;
	}

	.c21-hero-copy {
		min-height: auto;
		padding: 3.25rem clamp(1.35rem, 6vw, 3rem) 3.75rem;
	}

	.c21-hero-copy .wp-block-buttons {
		gap: .65rem 1rem;
	}

	.c21-section {
		padding: 4rem clamp(1.25rem, 5vw, 2.5rem);
	}

	.c21-home .c21-section-soft .wp-block-column > .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem !important;
	}

	.c21-home .c21-section-soft .c21-card {
		padding: 1.65rem 1.25rem;
	}

	.c21-photo-strip .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c21-photo-strip figure {
		height: 230px;
	}

	.c21-home .c21-section-pink > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.c21-home .c21-section-pink > .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 1rem) !important;
	}
}

@media (max-width: 640px) {
	.c21-page h1 {
		font-size: clamp(2.7rem, 12vw, 3.45rem);
		line-height: 1.02;
	}

	.c21-page h2 {
		font-size: clamp(2.15rem, 9vw, 2.65rem);
	}

	.c21-page h3 {
		font-size: 1.55rem;
	}

	.c21-page p {
		font-size: 1rem;
		line-height: 1.7;
	}

	.c21-hero-photo {
		height: auto;
	}

	.c21-hero-copy {
		padding: 2.75rem 1.35rem 3.25rem;
	}

	.c21-eyebrow {
		font-size: .74rem;
		letter-spacing: .12em;
	}

	.c21-hero-copy .wp-block-buttons {
		display: grid !important;
		grid-template-columns: 1fr;
		width: 100%;
	}

	.c21-hero-copy .wp-block-button,
	.c21-hero-copy .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.c21-home .c21-section-soft .wp-block-column > .wp-block-columns {
		grid-template-columns: 1fr;
	}

	.c21-home .c21-section-soft .c21-card {
		text-align: left;
	}

	.c21-home .c21-section-soft .c21-card-icon {
		margin-left: 0;
	}

	.c21-photo-strip figure {
		height: 185px;
	}

	.c21-home .c21-section-pink > .wp-block-columns {
		display: block !important;
	}

	.c21-home .c21-section-pink > .wp-block-columns > .wp-block-column {
		width: 100% !important;
		margin-bottom: 1rem;
	}

	.c21-step {
		padding: 1.2rem 0;
		border-bottom: 1px solid rgba(108, 8, 32, .10);
	}

	.c21-step:last-child {
		border-bottom: 0;
	}
}


/* 0.1.1 — override Blocksy globals inside Casella 21 layouts */
.c21-page h1,
.c21-page h2,
.c21-page h3,
.c21-page .wp-block-heading {
	font-family: Georgia, "Times New Roman", serif !important;
	color: var(--c21-burgundy) !important;
}

.c21-page .c21-button-primary .wp-block-button__link,
.c21-page .c21-button-primary .wp-element-button {
	background: var(--c21-burgundy) !important;
	border-color: var(--c21-burgundy) !important;
	color: #fff !important;
}

.c21-page .c21-button-secondary .wp-block-button__link,
.c21-page .c21-button-secondary .wp-element-button {
	background: transparent !important;
	border-color: var(--c21-burgundy) !important;
	color: var(--c21-burgundy) !important;
}

.c21-card-icon,
.c21-step-number,
.c21-price {
	margin-top: 0 !important;
}

.c21-card-icon {
	padding: 0 !important;
	line-height: 56px !important;
}

.c21-step-number {
	padding: 0 !important;
	line-height: 42px !important;
	text-align: center;
}

/* Hide Blocksy's automatic page hero/title only on pages containing a Casella 21 layout. */
body:has(.c21-page) .hero-section,
body:has(.c21-page) .entry-header:not(.c21-page .entry-header) {
	display: none;
}


/* 0.1.2 — editorial spacing and medium-width stability */
.c21-home .c21-section-soft > .wp-block-columns {
	align-items: flex-start !important;
	gap: clamp(2rem, 4vw, 4.5rem);
}

.c21-home .c21-section-soft .c21-card {
	border-radius: 6px;
}

.c21-home .c21-section-soft .c21-card h3 {
	text-wrap: balance;
}

.c21-home .c21-section-soft .c21-card p {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}

.c21-home .c21-section-pink {
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.c21-home .c21-section-pink > .wp-block-columns {
	gap: clamp(1.25rem, 3vw, 3rem);
}

.c21-home .c21-section-pink .wp-block-buttons {
	margin-top: 1.5rem;
}

.c21-photo-strip img {
	object-position: center center;
}


/* 0.1.3 — Hero focal point locked on mailbox + envelope */
@media (min-width: 901px) {
	.c21-hero-photo img {
		object-position: 50% 62%;
	}
}

/* Keep the hero action visible even in medium desktop widths. */
@media (min-width: 901px) and (max-width: 1250px) {
	.c21-hero-photo {
		height: clamp(540px, 51vw, 650px);
	}

	.c21-hero-copy {
		min-height: clamp(540px, 51vw, 650px);
	}
}


/* 0.1.4 — fix medium-width hero image fill in editor and frontend */
.c21-hero-photo,
.c21-hero-photo .wp-block-image,
.c21-hero-photo figure,
.c21-hero-photo .wp-block-image img {
	margin: 0;
}

.c21-hero-photo .wp-block-image,
.c21-hero-photo figure {
	height: 100%;
	width: 100%;
}

.c21-hero-photo .wp-block-image img,
.c21-hero-photo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* In the editor, Blocksy/Gutenberg can preserve the image intrinsic height.
   Force the visual to fill the whole column so the blue placeholder area disappears. */
.editor-styles-wrapper .c21-hero-photo,
.block-editor-block-list__layout .c21-hero-photo {
	overflow: hidden;
}

@media (max-width: 900px) {
	.c21-hero-photo .wp-block-image,
	.c21-hero-photo figure {
		height: auto;
	}

	.c21-hero-photo .wp-block-image img,
	.c21-hero-photo > img {
		height: auto;
		object-fit: cover;
	}
}


/* 0.1.7 — anchor interno della Home */
html {
	scroll-behavior: smooth;
}

.c21-home .c21-section-pink {
	scroll-margin-top: 100px;
}


/* 0.1.8 — Pagina Abbonati: parte direttamente da “Come funziona l’abbonamento” */
.c21-subscription-page > .c21-section-soft:first-child {
	display: none !important;
}

.c21-subscription-page > .c21-section-soft:first-child + .c21-section {
	padding-top: clamp(2.75rem, 5vw, 4.5rem);
}

/* Anche nell'editor Gutenberg la vecchia fascia viene nascosta,
   così l'anteprima corrisponde al frontend senza reinserire il pattern. */
.editor-styles-wrapper .c21-subscription-page > .c21-section-soft:first-child,
.block-editor-block-list__layout .c21-subscription-page > .c21-section-soft:first-child {
	display: none !important;
}