/**
 * Etichetta laterale "torino:" — GdL port
 *
 * Ported from the kb-animazioni "etichetta-laterale" module (valetorino.it),
 * recolored: WHITE background, near-black logo (torino_nero.svg).
 * Class names keep the kb-etichetta- prefix so the JS is used verbatim.
 *
 * It is decorative: no readable text, no link, no function. If it
 * disappeared nothing would be lost but the effect.
 *
 * No !important anywhere: if something does not apply, fix specificity or
 * load order instead.
 *
 * KEY DIFFERENCE vs the original: the bar is white, so on white pages it
 * needs separation. That separation is a box-shadow and MUST NOT become a
 * border: the whole geometry below (height derived from width, exact 10px
 * padding on all four sides) runs through calc() with box-sizing:
 * border-box, and a border would eat into the inner box and break the
 * equal-margins construction. box-shadow is purely paint, no layout.
 */

/* ---------------------------------------------------------------------- */
/* The sentinel                                                           */
/* ---------------------------------------------------------------------- */

/*
 * A block as tall as the scroll threshold, anchored to the TOP of the
 * document. Its bottom edge crosses the top of the viewport exactly when
 * 500px have been scrolled, whatever the viewport height — and crosses
 * back on the way up, so IntersectionObserver reports both directions.
 * The threshold lives ONLY here; the JS never knows the number.
 *
 * opacity and NOT display:none — the observer watches geometry, and
 * display:none would remove the box entirely, reading as "already past
 * the threshold" on every page load.
 */
.kb-etichetta-sentinella {
	--kb-etichetta-soglia: 500px;

	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--kb-etichetta-soglia);

	pointer-events: none;
	opacity: 0;
}

/* ---------------------------------------------------------------------- */
/* The label                                                              */
/* ---------------------------------------------------------------------- */

.kb-etichetta {

	/* --- Sizes -------------------------------------------------------
	 *
	 * THERE IS ONE SIZE TO CHOOSE, THE WIDTH. Height is derived:
	 *
	 *     inner_width  = width - 2*padding
	 *     inner_height = inner_width * ratio
	 *     height       = inner_height + 2*padding
	 *
	 * so the inner box always has the rotated logo's proportions and the
	 * 10px margin is equal on all four sides by construction. To resize,
	 * change --kb-etichetta-larghezza and nothing else.
	 *
	 * posizione-y places the TOP edge of the bar (it goes straight into
	 * top). translateY(-50%) centering is not available: transform is
	 * taken by the enter/leave animation and the declarations would not
	 * compose.
	 */
	--kb-etichetta-larghezza: 48px;
	--kb-etichetta-padding: 10px;
	--kb-etichetta-posizione-y: 66%;

	/* --- Look ---------------------------------------------------------
	 * White bar, near-black logo — the positive version of the Torino
	 * brand (the original is the negative: white logo on #1E1E1E).
	 */
	--kb-etichetta-sfondo: #fff;

	/* --- Enter / leave -------------------------------------------------
	 * Two durations, two mirrored curves: easeOutQuint in, easeInQuint
	 * out — leaving accelerates away instead of braking.
	 */
	--kb-etichetta-entrata: 350ms;
	--kb-etichetta-uscita: 250ms;
	--kb-etichetta-curva-entrata: cubic-bezier(0.22, 1, 0.36, 1);
	--kb-etichetta-curva-uscita: cubic-bezier(0.64, 0, 0.78, 0);

	/* --- Derived geometry ----------------------------------------------
	 *
	 * RATIO = width / height of torino_nero.svg's viewBox
	 * ("0 0 479.58 132.35" -> 3.6236). Rotated a quarter turn the logo
	 * becomes tall and narrow and the number reads "how many times taller
	 * than wide". This is the only place the ratio is written: replace
	 * the file, update this number, everything else follows.
	 *
	 * --kb-etichetta-altezza below is the ONLY declaration of the bar
	 * height in this sheet and must stay the only one: hardcoding a number
	 * in one of the breakpoints re-introduces the mismatched-box defect
	 * this construction removed.
	 */
	--kb-etichetta-logo-proporzione: 3.6236;
	--kb-etichetta-interna-larghezza: calc(var(--kb-etichetta-larghezza) - 2 * var(--kb-etichetta-padding));
	--kb-etichetta-interna-altezza: calc(var(--kb-etichetta-interna-larghezza) * var(--kb-etichetta-logo-proporzione));
	--kb-etichetta-altezza: calc(var(--kb-etichetta-interna-altezza) + 2 * var(--kb-etichetta-padding));

	/* --- Stacking -------------------------------------------------------
	 * Above page content, below anything that must be able to cover the
	 * page (header, cookie banner, accessibility widget). 90 matched the
	 * valetorino stack; on GdL check it on screen against the GDPR banner
	 * and the UserWay launcher and lower it here if it ever wins over
	 * something the user must read.
	 */
	--kb-etichetta-z: 90;

	position: fixed;
	right: 0;
	top: var(--kb-etichetta-posizione-y);
	z-index: var(--kb-etichetta-z);

	width: var(--kb-etichetta-larghezza);
	height: var(--kb-etichetta-altezza);
	padding: var(--kb-etichetta-padding);
	box-sizing: border-box;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--kb-etichetta-sfondo);

	/*
	 * Separation from white pages: a hairline ring plus a soft cast to the
	 * left, the side facing the content. Paint only — see the header note
	 * on why this is not a border.
	 
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.10),
		-4px 0 14px rgba(0, 0, 0, 0.08);

	/*
	 * Safety clip: the logo fits by construction, this only matters if the
	 * declared ratio ever diverges from the file. Better clipped than on
	 * top of the page.
	 */
	overflow: hidden;

	/* Not clickable, intercepts nothing — page nor Elementor canvas. */
	pointer-events: none;

	/*
	 * RESTING state: off-screen right and transparent. Also the state it
	 * RETURNS to above the threshold. translateX and not right: composited,
	 * no reflow. Hidden by default and stays hidden if the JS never runs:
	 * a decoration fails silently.
	 */
	transform: translateX(100%);
	opacity: 0;
}

/* ARRIVAL state. The class is added and removed ONLY by the JS. */
.kb-etichetta--dentro {
	transform: translateX(0);
	opacity: 1;
}

/*
 * Motion, and only motion, is conditional. Reduced-motion users get the
 * base sheet with no transition: the label still appears and disappears,
 * instantly, at the same scroll positions — less movement, not less
 * content. Written in the positive (transition ADDED where welcome) so the
 * no-animation branch is the base one, valid even where the media feature
 * is unknown.
 *
 * The browser uses the transition declared on the ARRIVAL state, so two
 * rules give two different durations: class added -> --dentro's 350ms,
 * class removed -> base 250ms. Mid-flight reversal is the browser's job
 * (reversing-shortening-factor), nothing to manage.
 */
@media (prefers-reduced-motion: no-preference) {

	.kb-etichetta {
		transition:
			transform var(--kb-etichetta-uscita) var(--kb-etichetta-curva-uscita),
			opacity var(--kb-etichetta-uscita) var(--kb-etichetta-curva-uscita);
	}

	.kb-etichetta--dentro {
		transition:
			transform var(--kb-etichetta-entrata) var(--kb-etichetta-curva-entrata),
			opacity var(--kb-etichetta-entrata) var(--kb-etichetta-curva-entrata);
	}
}

/* ---------------------------------------------------------------------- */
/* The logo                                                               */
/* ---------------------------------------------------------------------- */

/*
 * SIZES ARE INVERTED ON PURPOSE. rotate() turns the paint, not the layout
 * box: the box is declared as the file is (wide and low) and the rotation
 * presents it vertical. One declared dimension, the other resolved by the
 * browser from the SVG's intrinsic ratio — so even if the declared ratio
 * above ever went stale, the logo itself would stay proportioned.
 *
 * The box is WIDER than the container (expected): flex: 0 0 auto stops
 * flex from squeezing it, justify-content: center keeps the overflow
 * symmetric, align-items: center stops stretch from killing height: auto.
 */
.kb-etichetta__logo {
	display: block;
	flex: 0 0 auto;
	width: var(--kb-etichetta-interna-altezza);
	height: auto;

	/*
	 * NOT dead code: hello-elementor's reset.css (the SAME theme GdL uses)
	 * ships img { max-width: 100%; height: auto; }. max-width always caps
	 * width regardless of specificity, and 100% here resolves to the 28px
	 * inner box — the logo would shrink to about a quarter. These two lines
	 * are the defense; max-height is the same ambush on the other axis.
	 */
	max-width: none;
	max-height: none;

	/*
	 * MINUS 90deg, counter-clockwise: the logo reads BOTTOM-UP on screen,
	 * same as the original.
	 */
	transform: rotate(-90deg);
}

/* ---------------------------------------------------------------------- */
/* Breakpoints                                                            */
/* ---------------------------------------------------------------------- */

/*
 * Elementor's defaults, same as valetorino: desktop from 1025, tablet from
 * 768. One line changes per branch — the width; height and inner box
 * recompute themselves. Resulting heights: 48 -> 121.46, 42 -> 99.72,
 * 38 -> 85.22 (fractional on purpose: rounding the height by hand would
 * re-introduce the mismatch).
 */

/* Tablet: 768px – 1024.98px. */
@media (max-width: 1024.98px) {
	.kb-etichetta {
		--kb-etichetta-larghezza: 42px;
	}
}

/* Phone: up to 767.98px. */
@media (max-width: 767.98px) {
	.kb-etichetta {
		--kb-etichetta-larghezza: 38px;
	}
}

/*
 * Known limit, inherited from the original and NOT covered: at strong
 * browser zoom (WCAG 1.4.10) the fixed bar covers a stable slice of the
 * screen. Media-query fences were tried upstream and removed — thresholds
 * wide enough to catch zoomed viewports also catch real phones (e.g. a
 * folded Galaxy Fold in landscape). If this ever needs closing, the road
 * is measuring the viewport from JS, not new media queries.
 */