/* ==========================================================================
   Securcast Italia — layout contract
   --------------------------------------------------------------------------
   One measure across the whole site. Elementor's global container width is set
   to 1200px by the importer; this file makes the pieces Elementor does not
   control agree with it — the header, the footer, and the full-bleed hero.
   ========================================================================== */

:root {
	--sc-measure: 1200px;
	--sc-gutter: clamp(20px, 4vw, 40px);

	/* .wrap in the reference stylesheet reads --maxw. Overriding it here is
	   what puts every section on the 1200px measure without touching the
	   original CSS. */
	--maxw: 1200px;
}

/* Demo sections run full width and carry the reference `.sec` classes, so the
   original padding, backgrounds and rhythm apply. `.wrap` inside each widget
   holds the measure. Elementor's own container is only used where a section
   was built by hand in the editor. */
.elementor-section.elementor-section-full_width > .elementor-container { max-width: none; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--sc-measure); }
.e-con { --container-max-width: var(--sc-measure); }

/* --------------------------------------------------------------- hero ---- */
/* The hero bleeds edge to edge for its background layers, but its text block
   must land on the same measure as every section below it. */
.hero { padding-inline: var(--sc-gutter); }

.hero-in {
	max-width: var(--sc-measure);
	margin-inline: auto;
	width: 100%;
}

.hero--inner { min-height: min(64svh, 620px); }

/* the node graph is anchored to the measure, not the viewport edge */
@media (min-width: 1025px) {
	.tn-net { right: max(var(--sc-gutter), calc((100vw - var(--sc-measure)) / 2)); }
}

/* ------------------------------------------------------------- header ---- */
.shf-header > .elementor,
.shf-header .elementor-section-wrap { width: 100%; }

.shf-header .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--sc-measure);
}

/* a header bar needs a surface, otherwise it floats over the hero unreadably */
.shf-header {
	background: transparent;
	padding-inline: var(--sc-gutter);
}

.shf-header .elementor-column { justify-content: center; }

/* menus should never wrap onto three lines */
.shf-header .shf-menu--horizontal {
	flex-wrap: nowrap;
	justify-content: center;
	gap: clamp(14px, 1.6vw, 26px);
}

.shf-header .shf-menu--horizontal > li > a {
	white-space: nowrap;
	font-size: clamp(12px, .78vw, 14px);
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.shf-header .shf-contact { justify-content: flex-end; white-space: nowrap; }
.shf-header .shf-logo img { width: clamp(130px, 12vw, 180px); }

/* below the nav breakpoint the burger takes over, so let the row breathe */
@media (max-width: 1024px) {
	.shf-header .elementor-container { align-items: center; }
	.shf-header .shf-contact { display: none; }
}

/* ------------------------------------------------------------- footer ---- */
.shf-footer .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--sc-measure);
}

.shf-footer { padding-inline: var(--sc-gutter); }
.shf-footer .shf-logo img { width: clamp(150px, 14vw, 210px); }

.shf-footer .shf-menu--vertical > li > a {
	padding: 5px 0;
	font-size: 14px;
	color: var(--body, #C9C4CF);
}

.shf-footer .shf-menu--vertical > li > a:hover { color: var(--red-2, #5FBFF2); }
.shf-footer .shf-contact__item { font-size: 14px; line-height: 1.7; }
.shf-footer .shf-copyright { font-size: 12px; color: var(--grey-2, #6E6878); line-height: 1.7; }

/* ------------------------------------------------- section rhythm -------- */
/* Match the mockup: generous but not cavernous, and scaling with the viewport
   rather than a fixed 110px that leaves holes on large screens. */
.elementor-widget-securcast-service + .elementor-widget-securcast-service { margin-top: 0; }

.sc-headingblock + .hex,
.sc-headingblock + .kp,
.sc-headingblock + .cnt-cards,
.sc-headingblock + .mq { margin-top: clamp(30px, 4vw, 58px); }

/* Elementor wraps every widget; stop it adding a second gap on top of ours */
.elementor-widget-securcast-heading:not(:last-child) { --kit-widget-spacing: 0; }

/* ---- demo section wrappers -------------------------------------------- */
/* Elementor adds its own section element around ours; these keep the
   reference rhythm intact rather than letting Elementor's defaults show. */
.sc-hero-section > .elementor-container,
.sc-auth-section > .elementor-container,
.elementor-section.sec > .elementor-container,
.elementor-section.fin > .elementor-container { max-width: none; padding: 0; }

.elementor-section.sec > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0; }

.sc-auth-section { position: relative; z-index: 20; }
.elementor-section.fin { padding-block: clamp(78px, 10.5vw, 166px); }
.elementor-section.fin .wrap { max-width: var(--maxw); }

/* the widget wrapper must not fight .sec's own vertical rhythm */
.elementor-widget-securcast-service:not(:last-child) { --kit-widget-spacing: 0; }
.elementor-section.sec .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* ---- header & footer blocks ------------------------------------------- */
/* The Securcast Header/Footer widgets emit the reference markup, so Elementor
   must not add a container, padding or a measure around them. */
.sc-header-section > .elementor-container,
.sc-footer-section > .elementor-container { max-width: none; padding: 0; }

.sc-header-section .elementor-widget-wrap,
.sc-footer-section .elementor-widget-wrap { padding: 0; }

.shf-header,
.shf-footer { padding-inline: 0; background: none; }

/* .hdr is fixed and .menu is a fixed overlay; neither may be clipped by the
   block wrapper Elementor and the plugin put around them. */
.shf-header,
.sc-header-section,
.sc-header-section .elementor-container,
.sc-header-section .elementor-column,
.sc-header-section .elementor-widget-wrap,
.sc-header-section .elementor-widget-securcast-header,
.sc-header-section .elementor-widget-container { position: static; overflow: visible; }

.shf-header--sticky { position: static; }

/* .hdr carries its own measure through .hdr-in */
.hdr-in { max-width: var(--maxw); }
.ft .wrap { max-width: var(--maxw); }

/* inside the Elementor editor the fixed bar would sit over the canvas */
body.elementor-editor-active .hdr { position: relative; }
body.elementor-editor-active .menu { position: relative; clip-path: none; visibility: visible; }

/* ---- hero: split layout and vertical centring ------------------------- */
/* The measure is the same 1200px as every other section, and both columns
   share one vertical centre so the artwork can never sit off-axis from the
   heading the way an absolutely positioned layer does. */
.hero-in{
	max-width:var(--sc-measure);
	margin-inline:auto;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

/* The reference hero bottom-aligns its content behind asymmetric padding
   (153px top, 135px bottom), which leaves the block a few pixels off the
   optical centre. Matching the two makes "centred" actually centred. */
.hero{
	display:flex;
	align-items:center;
	padding-inline:var(--sc-gutter);
	padding-block:clamp(120px,15vh,170px);
}

.hero--inner{
	padding-block:clamp(140px,18vh,200px) clamp(64px,9vh,120px);
	align-items:center;
}

.hero-in--split{
	display:grid;
	grid-template-columns:52% minmax(0,1fr);
	gap:56px;
	align-items:center;
}

/* min-width:0 on both is what actually stops one column from being pushed
   under the other: a grid item defaults to min-content width, so a long
   unbreakable heading would otherwise force the text column wider than its
   track and shove the artwork out of the row. */
.hero-col{min-width:0;max-width:100%}
.hero-col--text{display:flex;flex-direction:column;justify-content:center}
.hero-col--art{display:flex;align-items:center;justify-content:center}

/* Long compound words — videosorveglianza — must wrap rather than overflow. */
.hero-in--split .hero-col--text .sc-heading{overflow-wrap:break-word;hyphens:auto}
.hero-in--split .hero-col--text .sc-heading .rv{white-space:normal}

/* In split mode the artwork is a column, not an absolute layer. */
.hero-in--split .tn-net{
	position:static;
	transform:none;
	margin-inline:auto;
	max-width:100%;
}

/* Stacking breakpoint, chosen in the panel. */
@media(max-width:768px){
	.hero-in--stack-768{grid-template-columns:1fr !important;gap:clamp(24px,6vw,48px) !important}
	.hero-in--stack-768 .hero-col--art{order:2}
}
@media(max-width:1024px){
	.hero-in--stack-1024{grid-template-columns:1fr !important;gap:clamp(24px,6vw,48px) !important}
	.hero-in--stack-1024 .hero-col--art{order:2}
}
@media(max-width:1280px){
	.hero-in--stack-1280{grid-template-columns:1fr !important;gap:clamp(24px,6vw,48px) !important}
	.hero-in--stack-1280 .hero-col--art{order:2}
}

/* Overlay mode: the artwork is a backdrop, so keep the text clear of it
   rather than letting a long heading run underneath. */
.hero-in:not(.hero-in--split){max-width:var(--sc-measure)}
.hero-in:not(.hero-in--split) .sc-headingblock,
.hero-in:not(.hero-in--split) .btns,
.hero-in:not(.hero-in--split) .hero-sup{max-width:min(58%,720px)}

@media(max-width:1024px){
	.hero-in:not(.hero-in--split) .sc-headingblock,
	.hero-in:not(.hero-in--split) .btns,
	.hero-in:not(.hero-in--split) .hero-sup{max-width:100%}
}

/* ---- custom hero artwork ---------------------------------------------- */
/* Pasted code gets the same column treatment as the built-in artworks, so it
   lands on the shared vertical centre without the author positioning it. */
.hero-art--custom{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-width:0;
}
.hero-art--custom > *{max-width:100%;width:100%}
/* A pasted block that sets its own height needs the column to allow it. */
.hero-col--art{align-self:stretch}
.hero-in--split .hero-col--art{display:flex;align-items:center}
.hero-art--custom svg,
.hero-art--custom img,
.hero-art--custom canvas,
.hero-art--custom video{max-width:100%;height:auto;display:block}

/* Overlay mode keeps the original absolute placement. */
.hero-in:not(.hero-in--split) ~ .hero-art--custom,
.hero > .hero-art--custom{
	position:absolute;top:50%;right:6%;
	transform:translateY(-50%);
	width:min(46%,560px);
	z-index:2;
}
.hero-in--split .hero-art--custom{position:static;transform:none;width:100%}

/* Wrapper for pasted code, so `selector` always has something to match. */
.sc-code{display:contents}
@supports not (display:contents){.sc-code{display:block}}