/* ══════════════════════════════════════════════════════
   Dalla parte dei crostacei — campaign shell
   ══════════════════════════════════════════════════════

   The page body is Gutenberg blocks (ali-blocks + the theme's own), so this
   file no longer styles any section. What is left is the chrome the blocks
   cannot provide — the sticky campaign nav, the footer, the language switcher —
   plus the token bridge below, which is what re-skins every block into the
   campaign palette. Section styling that used to live here was deleted with
   the markup it belonged to; see git history for the pre-blocks version.
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   Dalla parte dei crostacei — Campaign Styles
   ══════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────── */
:root {
	--cro-brown: #7a2e1e;
	--cro-brown-light: #9a4a36;
	--cro-red: #d94f3d;
	--cro-red-deep: #c43a28;
	--cro-cream: #fdf5ef;
	--cro-cream-dark: #f4ece3;
	--cro-dark: #3a1a10;
	--cro-navy: #1a2332;
	--cro-text: #333;
	--cro-text-sec: #444;
	--cro-text-light: #555;
	--cro-radius: 12px;
	--cro-radius-sm: 8px;
}

/* ── Reset & Base ─────────────────────────────────── */
.crostacei-page *,
.crostacei-page *::before,
.crostacei-page *::after {
	box-sizing: border-box;
}

/* Responsive-image default, deliberately kept BELOW block specificity.
 *
 * As `body.crostacei-page img` this was (0,1,1) and beat `.cs-hero-bg` (0,1,0),
 * so `height: auto` collapsed the hero's absolutely-positioned background image
 * to its intrinsic height and left a strip of bare section under it. :where()
 * on the body drops the whole selector to (0,0,1) — still a sane default for
 * plain images, no longer a rule that overrides any block that sizes its own. */
:where(body.crostacei-page) img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Reset Elementor kit typography overrides.
 *
 * Font family ONLY. The pre-blocks version of this rule also set `color:
 * inherit`, `font-weight` and margins, and at (0,1,2) it out-specified every
 * block's own variant rules — `.cs-intro--bg-navy p { color: rgba(255,255,255,.85) }`
 * is (0,1,1) — so the white copy on the dark bands rendered near-black on
 * near-black. That was invisible while the page drew its own `.cro-*` markup at
 * higher specificity; the moment the body became blocks it broke them.
 * Anything the blocks style themselves must not be reset here. */
body.crostacei-page h1,
body.crostacei-page h2,
body.crostacei-page h3,
body.crostacei-page h4,
body.crostacei-page h5,
body.crostacei-page h6,
body.crostacei-page p,
body.crostacei-page li,
body.crostacei-page button {
	font-family: 'Montserrat', sans-serif;
}

/* Chrome links only — inside blocks the block decides. */
body.crostacei-page .cro-nav a,
body.crostacei-page .cro-footer a {
	text-decoration: none;
	transition: opacity .2s;
}
body.crostacei-page .cro-nav a:hover,
body.crostacei-page .cro-footer a:hover {
	opacity: .8;
}

/* ══════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════ */
body.crostacei-page .cro-nav{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--cro-brown);
	transition: box-shadow .3s;
}

body.crostacei-page .cro-nav--scrolled{
	box-shadow: 0 2px 20px rgba(0,0,0,.3);
}

body.crostacei-page .cro-nav-inner{
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	gap: .75rem;
}

body.crostacei-page .cro-nav-ali-link{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none !important;
}

body.crostacei-page .cro-nav-ali-logo{
	height: 28px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .85;
	transition: opacity .2s;
}

body.crostacei-page .cro-nav-ali-link:hover .cro-nav-ali-logo{
	opacity: 1;
}

body.crostacei-page .cro-nav-logo-link{
	display: flex;
	align-items: center;
	padding-left: .75rem;
	border-left: 1px solid rgba(255,255,255,.25);
}

body.crostacei-page .cro-nav-logo{
	height: 40px;
	width: auto;
	opacity: 0;
	transition: opacity .3s ease;
	filter: brightness(0) invert(1);
}

body.crostacei-page .cro-nav--logo-visible .cro-nav-logo{
	opacity: 1;
}

body.crostacei-page .cro-nav-links{
	display: flex;
	list-style: none;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

body.crostacei-page .cro-nav-links a{
	color: #fff;
	text-decoration: none;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	transition: opacity .2s;
}

/* English labels are longer than the Italian ones — tighten the row so the
   eight items still fit on a single line at the 1140px desktop cap. */
body.crostacei-page--en .cro-nav-links{
	gap: 1rem;
}

body.crostacei-page .cro-nav-links a:hover{
	opacity: .8;
}

/* Current subpage. aria-current already says so to a screen reader; this is the
   same information for everyone else. */
body.crostacei-page .cro-nav-links a[aria-current="page"]{
	box-shadow: inset 0 -2px 0 currentColor;
}

body.crostacei-page .cro-nav-toggle{
	display: none;
	background: none !important;
	border: none !important;
	cursor: pointer;
	padding: .5rem !important;
	flex-direction: column;
	gap: 5px;
	box-shadow: none !important;
	outline: none;
}

body.crostacei-page .cro-nav-toggle:hover,
body.crostacei-page .cro-nav-toggle:focus{
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

body.crostacei-page .cro-nav-toggle span{
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	transition: all .3s;
}

body.crostacei-page .cro-nav-toggle.active span:nth-child(1){
	transform: rotate(45deg) translate(5px, 5px);
}

body.crostacei-page .cro-nav-toggle.active span:nth-child(2){
	opacity: 0;
}

body.crostacei-page .cro-nav-toggle.active span:nth-child(3){
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
body.crostacei-page .cro-footer{
	background: var(--cro-red);
	padding: 3rem 0 1.5rem;
	text-align: center;
	color: #fff;
}

body.crostacei-page .cro-footer-brand{
	margin-bottom: 1.5rem;
}

body.crostacei-page .cro-footer-brand p{
	font-size: .9rem;
	margin: 0 0 .75rem;
	color: rgba(255,255,255,.8);
}

body.crostacei-page .cro-footer-logo{
	height: 60px;
	max-height: 60px;
	width: auto;
	max-width: 200px;
	margin: 0 auto;
	filter: brightness(0) invert(1);
}

body.crostacei-page .cro-footer-legal{
	display: flex;
	justify-content: center;
	gap: .75rem;
	margin-bottom: 1rem;
	font-size: .85rem;
}

body.crostacei-page .cro-footer-legal a{
	color: rgba(255,255,255,.75);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}

body.crostacei-page .cro-footer-legal a:hover{
	color: #fff;
	opacity: 1;
}

body.crostacei-page .cro-footer-legal span{
	color: rgba(255,255,255,.3);
}

body.crostacei-page .cro-footer-text{
	font-size: .8rem;
	color: rgba(255,255,255,.5);
	margin: 0;
}

/* ══════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════════════ */
body.crostacei-page .cro-lang-switch{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .65rem;
	border: 1.5px solid rgba(255,255,255,.55);
	border-radius: 999px;
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	transition: background .2s, color .2s;
	flex-shrink: 0;
}

body.crostacei-page .cro-lang-switch:hover{
	background: #fff;
	color: var(--cro-brown);
}

/* Pill in the nav bar itself — shown on mobile only (desktop uses the
   .cro-nav-lang item at the end of the links list) */
body.crostacei-page .cro-lang-switch--bar{
	display: none;
	margin-left: auto;
}

/* Footer text link */
body.crostacei-page .cro-footer-lang{
	margin-bottom: 1rem;
}

body.crostacei-page .cro-lang-switch--text{
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.crostacei-page .cro-lang-switch--text:hover{
	background: none;
	color: #fff;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE NAV
   ══════════════════════════════════════════════════════
   The nav is the one piece of chrome the blocks do not own, so its breakpoints
   live here. Below 1100px the links row gets tight and the pill moves out of
   the list into the bar; below 900px (1100px in English, whose labels are
   wider) the row collapses into the hamburger panel.
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px){
	body.crostacei-page .cro-lang-switch--bar{
		display: inline-flex;
	}

	body.crostacei-page .cro-nav-lang{
		display: none;
	}
}

@media (max-width: 1100px){
	body.crostacei-page--en .cro-nav-toggle{
		display: flex;
	}

	body.crostacei-page--en .cro-nav-links{
		display: none;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: var(--cro-brown);
		flex-direction: column;
		padding: 1rem 1.5rem 1.5rem;
		gap: 0;
		box-shadow: 0 4px 10px rgba(0,0,0,.2);
	}

	body.crostacei-page--en .cro-nav-links.open{
		display: flex;
	}

	body.crostacei-page--en .cro-nav-links li{
		padding: .75rem 0;
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	body.crostacei-page--en .cro-nav-links li:last-child{
		border-bottom: none;
	}
}

@media (max-width: 900px){
	body.crostacei-page .cro-nav-toggle{
		display: flex;
	}

	body.crostacei-page .cro-nav-links{
		display: none;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: var(--cro-brown);
		flex-direction: column;
		padding: 1rem 1.5rem 1.5rem;
		gap: 0;
		box-shadow: 0 4px 10px rgba(0,0,0,.2);
	}

	body.crostacei-page .cro-nav-links.open{
		display: flex;
	}

	body.crostacei-page .cro-nav-links li{
		padding: .75rem 0;
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	body.crostacei-page .cro-nav-links li:last-child{
		border-bottom: none;
	}
}

/* ══════════════════════════════════════════════════════
   TOKEN BRIDGE — maps the campaign palette onto ali-blocks
   ══════════════════════════════════════════════════════

   Every ali-block reads --block-*; pointing those at the --cro-* values is what
   turns the shared teal/navy component library into this campaign. Values are
   the ones the pre-blocks stylesheet used, so the rebuilt page keeps the
   original's colours rather than approximating them.

   Note --block-dark: in this campaign the DARK surface is the red, not the
   brown — `agire subito`, `una sofferenza inaccettabile` and `problematiche`
   were all --cro-red bands. Brown is chrome only: the nav and the footer.
   ══════════════════════════════════════════════════════ */
body.crostacei-page{
	--block-accent: var(--cro-red);
	--block-accent-deep: var(--cro-red-deep);
	--block-accent-pale: #f2a89e;
	--block-accent-ink: #fff;
	--block-accent-text: var(--cro-red-deep);
	--block-dark: var(--cro-red);
	--block-heading-color: var(--cro-red);
	--block-heading-weight: 800;
	--block-bg: var(--cro-cream);
	--block-bg-warm: var(--cro-cream-dark);
	--block-bg-sky: var(--cro-cream);
	--block-warm-gray: var(--cro-cream-dark);
	--block-text: var(--cro-text);
	--block-text-secondary: var(--cro-text-sec);
	--block-font-heading: 'Montserrat', sans-serif;
	--block-font-body: 'Montserrat', sans-serif;
	--block-radius: var(--cro-radius);
	--block-radius-sm: var(--cro-radius-sm);
	/* Survey bars keep the report's own navy scale, which is deliberately
	   outside the brand palette so the data reads as data. */
	--block-chart-strong: #1a3a6b;
	--block-chart-soft: #6b7faa;
	--block-chart-muted: #bbb;

	/* Some blocks read the WP preset first and only fall back to --block-bg
	   (`var(--wp--preset--color--cream, var(--block-bg, …))`), so on a site whose
	   theme.json defines that preset the campaign's own cream was ignored and
	   those sections drew the site-wide #faf9f7 instead. Overriding the preset
	   inside the campaign scope brings them back in line. */
	--wp--preset--color--cream: var(--cro-cream);
}

/* ══════════════════════════════════════════════════════
   SHELL CLASSES — the two things tokens cannot express
   ══════════════════════════════════════════════════════ */

/* Body copy on the red bands.
 *
 * --cro-red is a mid-tone, not the dark surface the block variants assume, so
 * their 80–85% white renders dimmer than intended. Pure white is the best that
 * can be done directly on the band: #fff on #d94f3d is 4.09:1, the CEILING for
 * that surface — under the 4.5:1 AA floor for body text, and no text colour on
 * this red will clear it. Long prose has therefore been moved off the red
 * entirely; what is left on it is headings and short card copy. */
body.crostacei-page .cs-tools--bg-navy .cs-tool-card p,
body.crostacei-page .cs-tools--bg-navy .cs-tools-header p{
	color: #fff;
}

/* The hero overlay has to be a genuinely dark one.
 *
 * hero-page builds it out of --block-dark, and in this campaign --block-dark is
 * the RED. Layering red over a warm, bright, red-toned photo adds almost no
 * luminance contrast, which is why the title and subtitle washed out. Pointing
 * just the hero at the campaign's true dark makes the same overlay work. */
body.crostacei-page #cro-hero{
	--block-dark: var(--cro-dark);
}

/* …but on a phone that overlay eats the photo.
 *
 * The gradient is bottom-heavy (92% dark at the bottom, fading out at the top)
 * because the content is bottom-aligned. On a narrow viewport the logo, title,
 * subtitle and CTA fill nearly the whole hero, so the dark end of the gradient
 * covers nearly all of it — and `cover` crops a 2400×1800 photo to its narrow
 * middle, which in this shot is out-of-focus rock rather than the crab. The
 * result was a flat grey-brown slab with no image in it.
 *
 * Easing the overlay to .62 lets the photo back in; the gradient still puts
 * ~57% dark behind the text, and the shadow carries the rest. (Shifting
 * object-position instead does not help: measured colour spread across every
 * possible crop of this image is 17–24, and the centre is already the best
 * of them.) */
@media (max-width: 900px){
	/* The subtitle ships at 85% white, which is fine over a solid dark overlay
	   and not fine over shell detail once that overlay is eased. Full white on
	   mobile; the block's `strong` shadow (set on the block) does the rest. */
	body.crostacei-page #cro-hero .cs-hero-sub{
		color: #fff;
	}
}