/* ==========================================================================
   Rackit theme, main stylesheet
   Color system: one accent color for every CTA + highlighted heading words.
   Sections rotate background: white / near-black / grey / full-bleed image.
   ========================================================================== */

:root {
	--color-accent: #D2232A; /* Industrial red, matching the RACKIT logo, overridable in Customizer */
	--color-accent-dark: #A81C22;
	--color-dark: #14171A;
	--color-grey: #F2F3F5;
	--color-grey-dark: #6B7280;
	--color-white: #FFFFFF;
	--color-border: #E2E4E8;

	--font-heading: 'Oswald', 'Arial Narrow', sans-serif;
	--font-body: 'Poppins', -apple-system, sans-serif;

	--wrap-width: 1280px;
	--radius: 4px;
	--radius-pill: 9999px; /* matches manorga's .wp-block-button__link border-radius */
	--transition: 0.2s ease;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* keeps anchored sections clear of the sticky header */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------------
   Scroll-reveal: fade + rise into view, staggered per group (main.js adds
   .reveal on load and .reveal--visible once each element enters the viewport)
   ------------------------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--reveal-index, 0) * 0.08s);
}
.reveal--visible {
	opacity: 1;
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-dark);
	background: var(--color-white);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 1rem;
	letter-spacing: 0.02em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

.wrap {
	max-width: var(--wrap-width);
	margin-inline: auto;
	padding-inline: 24px;
}

.text-accent { color: var(--color-accent); }

.bg-white { background: var(--color-white); color: var(--color-dark); }
.bg-dark { background: var(--color-dark); color: var(--color-white); }
.bg-grey { background: var(--color-grey); color: var(--color-dark); }
.bg-img { background-size: cover; background-position: center; position: relative; color: var(--color-white); }
.bg-img::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 0; }
.bg-img > .block-content { position: relative; z-index: 1; }

/* Every homepage section shares this outer/inner wrapper convention. */
.block { padding-block: 64px; }
.block-content { }

@media (max-width: 768px) {
	.block { padding-block: 40px; }
}

/* -------------------------------------------------------------------------
   Shared button component: .btn.btn--{style}.btn--{color}
   ------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform var(--transition);
}
.btn__icon svg { width: 100%; height: 100%; }
.btn:hover .btn__icon { transform: translateX(5px); }

/* style: solid */
.btn--solid.btn--accent { background: var(--color-accent); color: var(--color-white); }
.btn--solid.btn--accent:hover { background: var(--color-accent-dark); }
.btn--solid.btn--dark { background: var(--color-dark); color: var(--color-white); }
.btn--solid.btn--dark:hover { background: #000; }
.btn--solid.btn--grey { background: var(--color-grey); color: var(--color-dark); }
.btn--solid.btn--grey:hover { background: var(--color-border); }

/* style: outline */
.btn--outline { background: transparent; padding: 12px 26px; }
.btn--outline.btn--accent { border-color: var(--color-accent); color: var(--color-accent); }
.btn--outline.btn--accent:hover { background: var(--color-accent); color: var(--color-white); }
.btn--outline.btn--dark { border-color: currentColor; color: inherit; }
.btn--outline.btn--dark:hover { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.btn--outline.btn--grey { border-color: var(--color-grey-dark); color: var(--color-grey-dark); }

/* style: text link with arrow */
.btn--text { padding: 0; text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-weight: 600; }
.btn--text.btn--accent { color: var(--color-accent); }
.btn--text.btn--dark { color: var(--color-dark); }
.btn--text.btn--grey { color: var(--color-grey-dark); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-accent);
}
.link-arrow__icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--transition); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition);
}
.site-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Nav menu text turns red on hover */
.main-nav__list > .menu-item > a {
	transition: color 0.2s ease;
}
.main-nav__list > .menu-item > a:hover {
	color: var(--color-accent);
}

.site-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}

.site-header__left { display: flex; align-items: center; gap: 10px; }

.site-header__logo-text {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.05em;
}

.site-header__logo .custom-logo { max-height: 42px; width: auto; }

/* Burger + off-canvas nav drawer, used at every viewport width ("website
   mode" included), not just mobile. The inline horizontal nav variant this
   theme used to have on desktop has been removed entirely per direction. */
.bt-menumobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-dark);
	border: none;
	border-radius: var(--radius);
	padding: 0;
	flex-shrink: 0;
}

.main-nav {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(320px, 85vw);
	background: var(--color-white);
	transform: translateX(-100%);
	transition: transform var(--transition);
	padding: 24px;
	overflow-y: auto;
	z-index: 100;
}
.main-nav.is-open { transform: translateX(0); }

.main-nav__list {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.main-nav__list > .menu-item {
	position: relative;
	border-bottom: 1px solid var(--color-dark);
}

.main-nav__list > .menu-item > a {
	font-family: var(--font-heading);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.95rem;
	display: block;
	padding-block: 14px;
}

.main-nav__list .sub-menu {
	display: block;
	position: static;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0 0 10px 12px;
}
.main-nav__list .sub-menu li { border-bottom: 1px solid var(--color-border); }

.main-nav__list .sub-menu a {
	display: block;
	padding: 8px 20px;
}
.main-nav__list .sub-menu a:hover { background: var(--color-grey); color: var(--color-accent); }

.site-header__right { display: flex; align-items: center; gap: 16px; }

/* Polylang language switcher, flag icons only (show_flags=1, show_names=0
   in header.php). Given extra left margin so it sits well clear of the
   search icon rather than crowding it. */
.lang-switcher { margin-left: 14px; }
.lang-switcher ul, .lang-switcher li { list-style: none !important; margin: 0; padding: 0; }
.lang-switcher ul { display: flex; align-items: center; gap: 12px; }
.lang-switcher a {
	display: inline-flex;
	border-radius: 3px;
	overflow: hidden;
	opacity: 0.55;
	transition: opacity var(--transition), box-shadow var(--transition);
}
.lang-switcher img.pll-flag { display: block; width: 32px; height: auto; }
.lang-switcher a:hover { opacity: 0.85; }
.lang-switcher li.current-lang a { opacity: 1; box-shadow: 0 0 0 2px var(--color-dark); }

.icon-btn { display: inline-flex; color: var(--color-dark); background: none; border: none; padding: 4px; cursor: pointer; }

/* Expanding header search */
.header-search-wrap { position: relative; }
.header-search {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	align-items: center;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	padding: 6px;
	width: 260px;
	z-index: 10;
}
.header-search-wrap.is-open .header-search { display: flex; }
.header-search input[type="search"] {
	flex: 1;
	border: none;
	outline: none;
	padding: 8px 10px;
	font-family: var(--font-body);
	font-size: 0.9rem;
}
.header-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-pill);
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	cursor: pointer;
}

.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

.site-header__secondary {
	display: flex;
	justify-content: flex-end;
	padding-block: 8px;
	border-top: 1px solid var(--color-border);
}

.social-nav__list { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social-nav__list a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	color: var(--color-dark);
	transition: color var(--transition), transform var(--transition);
}
.social-nav__list a:hover { color: var(--color-accent); transform: translateY(-2px); }
.social-nav__list svg { width: 100%; height: 100%; fill: currentColor; }

/* On very narrow phones the search + Contact button crowd the burger and
   logo, so they're hidden there, everything (nav, search, contact, social)
   is always reachable, search/contact just move into a slimmer header. */
@media (max-width: 480px) {
	.site-header__right { display: none; }
	.site-header__secondary { display: none; }
}

/* Dark backdrop behind the open nav drawer; click to close */
.nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 99;
}
.site-header.nav-open .nav-backdrop { display: block; }

/* Burger animation (open state toggled via JS on .site-header) */
.site-header.nav-open .b1 { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .b2 { opacity: 0; }
.site-header.nav-open .b3 { transform: translateY(-7px) rotate(-45deg); }
.menu-burger path { transform-origin: center; transition: transform var(--transition), opacity var(--transition); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.block--hero {
	position: relative;
	min-height: calc(100vh - 120px);
	display: flex;
	align-items: flex-end;
	padding-block: 60px;
	color: var(--color-white);
	overflow: hidden;
}
.hero__media {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	background-color: var(--color-dark); /* fallback while lazy image/video loads */
	overflow: hidden;
}
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.1)); }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__content { position: relative; z-index: 1; width: 100%; }
/* 80%-wide text column, mirroring the manorga.com hero's wp-block-column flex-basis:80% */
.hero__col { max-width: 80%; }
@media (max-width: 768px) {
	.hero__col { max-width: 100%; }
}
/* Sentence case, not the site-wide forced uppercase, matches the manorga.com reference h1 */
.hero__title { text-transform: none; }
.hero__subhead { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin-bottom: 1.5rem; }

/* Diagonal triangle photo cutout on the right of the hero, matching the
   manorga.com reference, an accent-colored diagonal "frame" with a photo
   inset inside it, layered over the video/background. */
.hero__triangle-border {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	background: var(--color-accent);
	clip-path: polygon(32% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 1;
}
.hero__triangle-img {
	position: absolute;
	inset: 4px 4px 4px 10px;
	background-size: cover;
	background-position: center;
	background-color: var(--color-dark);
	clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media (max-width: 900px) {
	.hero__triangle-border { display: none; }
}

/* -------------------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------------------- */
.block--trust-strip { padding-block: 40px; }
.trust-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
.trust-strip__item { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; }
.trust-strip__icon { width: 52px; height: 52px; flex-shrink: 0; display: block; }
.trust-strip__icon svg { width: 100%; height: 100%; }
.trust-strip__label { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; max-width: 220px; text-align: left; }

@media (max-width: 768px) {
	.trust-strip { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   Product grid
   ------------------------------------------------------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.product-card {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-grey);
	transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}
.product-card:hover .product-card__media { transform: scale(1.06); }
.product-card__media {
	aspect-ratio: 16/9;
	background-size: cover;
	transition: transform 0.5s ease;
	background-position: center;
	background-color: var(--color-border);
	position: relative;
}
.product-card__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.product-card__badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--color-accent); color: var(--color-white);
	font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 4px 10px; border-radius: 999px;
}
.product-card__body { padding: 18px; }
.product-card__title { margin-bottom: 6px; font-size: 1.1rem; }
.product-card__desc { margin: 0; font-size: 0.9rem; color: var(--color-grey-dark); }

@media (max-width: 900px) {
	.product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.product-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Dual CTA
   ------------------------------------------------------------------------- */
.dual-cta { display: flex; gap: 20px; flex-wrap: wrap; }
.dual-cta .btn { flex: 1 1 280px; justify-content: center; padding-block: 20px; }

/* -------------------------------------------------------------------------
   Usage section
   ------------------------------------------------------------------------- */
.usage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.usage__list { display: flex; flex-direction: column; gap: 14px; }
.usage__list .btn { justify-content: space-between; width: 100%; }

@media (max-width: 800px) {
	.usage { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Intralogistics Division, homepage teaser
   ------------------------------------------------------------------------- */
.block--division-teaser {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--color-accent-dark) 0%, var(--color-accent) 55%, var(--color-accent-dark) 100%);
	color: var(--color-white);
}
/* Slow-moving diagonal shine sweeping across the band, to draw the eye. */
.block--division-teaser::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -20%;
	width: 40%;
	height: 200%;
	background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 100%);
	transform: translateX(-100%);
	animation: rackit-shine 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes rackit-shine {
	0% { transform: translateX(-150%); }
	40% { transform: translateX(320%); }
	100% { transform: translateX(320%); }
}
.division-teaser { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; }
.division-teaser__text p { margin-top: 10px; max-width: 620px; }
.block--division-teaser .btn--accent {
	background: var(--color-dark);
	box-shadow: 0 0 0 0 rgba(20, 23, 26, 0.55);
	animation: rackit-pulse 2.4s ease-out infinite;
}
.block--division-teaser .btn--accent:hover { animation-play-state: paused; }
@keyframes rackit-pulse {
	0% { box-shadow: 0 0 0 0 rgba(20, 23, 26, 0.5); }
	70% { box-shadow: 0 0 0 14px rgba(20, 23, 26, 0); }
	100% { box-shadow: 0 0 0 0 rgba(20, 23, 26, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.block--division-teaser::before { display: none; }
	.block--division-teaser .btn--accent { animation: none; }
}
@media (max-width: 700px) {
	.division-teaser { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Intralogistics Division, solutions grid
   ------------------------------------------------------------------------- */
.solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.solution-card {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: transform var(--transition), box-shadow var(--transition);
}
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); }
.solution-card:hover .solution-card__media { transform: scale(1.06); }
.solution-card__media {
	display: block;
	aspect-ratio: 4/3;
	background-size: cover;
	background-position: center;
	background-color: var(--color-border);
	transition: transform 0.5s ease;
}
.solution-card__body { padding: 20px; }
.solution-card__title { margin-bottom: 8px; font-size: 1.05rem; }
.solution-card__desc { margin: 0 0 14px; font-size: 0.88rem; color: var(--color-grey-dark); }
@media (max-width: 1100px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .solutions-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Intralogistics Division, case study
   ------------------------------------------------------------------------- */
.case-study { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.case-study__media, .case-study__media-img {
	aspect-ratio: 16/9;
	border-radius: var(--radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: var(--color-border);
}
.case-study__media iframe { width: 100%; height: 100%; display: block; border: 0; }
.case-study__text p { margin-bottom: 20px; }
@media (max-width: 900px) {
	.case-study { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Near-you / credibility
   ------------------------------------------------------------------------- */
.near-you { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.near-you__media {
	aspect-ratio: 16/10;
	background-size: cover; background-position: center;
	background-color: rgba(255,255,255,0.05);
	border-radius: var(--radius);
	margin-block: 20px;
}
.near-you__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.near-you__intro { grid-column: 1 / -1; opacity: 0.85; }
.stat__icon { display: block; width: 36px; height: 36px; margin-bottom: 10px; }
.stat__icon svg { width: 100%; height: 100%; }
.stat__value { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-accent); margin-bottom: 4px; }
.stat__label { font-size: 0.85rem; opacity: 0.8; margin: 0; }

@media (max-width: 800px) {
	.near-you { grid-template-columns: 1fr; }
	.near-you__stats { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Values / engagement
   ------------------------------------------------------------------------- */
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.values__collage {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 540px;
}
/* Portrait-style photos are landscape 3:2, a matching box keeps faces and
   shoulders intact instead of cover-cropping them into a tall sliver. The
   focus point sits slightly above centre so heads are never clipped. */
.values__img {
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center 20%;
	background-color: var(--color-border);
	border-radius: var(--radius);
}

@media (max-width: 800px) {
	.values { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   News carousel (Swiper)
   ------------------------------------------------------------------------- */
.news__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.news-swiper { padding-bottom: 40px; }
.news-card { display: block; }
.news-card { overflow: hidden; border-radius: var(--radius); }
.news-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/1;
	background-size: cover; background-position: center;
	background-color: var(--color-grey);
	border-radius: var(--radius);
	margin-bottom: 14px;
	transition: transform 0.5s ease;
}
.news-card:hover .news-card__media { transform: scale(1.04); }
.news-card__title { font-size: 1rem; margin-bottom: 8px; transition: color var(--transition); }
.news-card__title a { text-transform: none; }
.news-card:hover .news-card__title { color: var(--color-accent); }
.news-card__excerpt { font-size: 0.9rem; color: var(--color-grey-dark); }

/* If assets/js/vendor/swiper-bundle.min.js isn't present yet, fall back to a
   simple horizontal scroll so the section still works without the library. */
.news-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.news-swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
   Contact CTA banner
   ------------------------------------------------------------------------- */
.contact-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.contact-cta h2 { margin: 0; }

/* -------------------------------------------------------------------------
   Footer picto strip (site-wide, sits directly above the footer)
   ------------------------------------------------------------------------- */
.footer-picto-strip.bg-color-grey { background: var(--color-grey); }
.footer-picto-strip__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding-block: 40px;
}
.footer-picto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; color: var(--color-dark); }
.footer-picto__icon { display: block; width: 44px; height: 44px; }
.footer-picto__icon svg { width: 100%; height: 100%; }
.footer-picto__label { font-size: 0.85rem; font-weight: 600; max-width: 200px; }
@media (max-width: 900px) { .footer-picto-strip__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .footer-picto-strip__inner { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--color-white); border-top: 1px solid var(--color-border); }
.site-footer__main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.4fr 1fr;
	gap: 24px;
	align-items: start;
	padding-block: 48px;
}
.site-footer__tagline { color: var(--color-grey-dark); margin-top: 12px; }
.footer-nav__list .sub-menu { margin-top: 8px; }
.footer-nav__list > li { margin-bottom: 10px; }
.footer-nav__list a { font-family: var(--font-heading); text-transform: uppercase; font-size: 0.9rem; }
.footer-nav__list .sub-menu a { text-transform: none; font-family: var(--font-body); font-size: 0.85rem; color: var(--color-grey-dark); }

.phone-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-heading); font-weight: 600;
	background: var(--color-dark); color: var(--color-white);
	padding: 12px 20px; border-radius: var(--radius);
	justify-self: start;
}

.site-footer__contact { display: flex; flex-direction: column; align-items: start; gap: 8px; }
.footer-contact__line {
	display: block;
	font-size: 0.85rem;
	color: var(--color-grey-dark);
	font-style: normal;
	line-height: 1.4;
}
a.footer-contact__line:hover { color: var(--color-accent); }
.footer-contact__address { max-width: 220px; }

.site-footer__legal {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	padding-block: 16px;
	border-top: 1px solid var(--color-border);
	font-size: 0.8rem; color: var(--color-grey-dark);
}
.legal-nav__list { display: flex; gap: 16px; }

@media (max-width: 900px) {
	.site-footer__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.site-footer__main { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Generic page/content (page.php, single.php, index.php)
   ------------------------------------------------------------------------- */
.generic-content { padding-block: 60px; max-width: 860px; }
.contact-form { margin-top: 32px; max-width: 640px; }

/* -------------------------------------------------------------------------
   Contact Form 7, styled to match the rest of the design system
   ------------------------------------------------------------------------- */
.contact-form .wpcf7-form { display: grid; gap: 22px; }
.contact-form .wpcf7-form p { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }

.contact-form label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8rem;
	color: var(--color-dark);
	margin-bottom: 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--color-dark);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 14px 16px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(210, 35, 42, 0.12);
}

.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder,
.contact-form textarea::placeholder { color: var(--color-grey-dark); opacity: 0.7; }

/* Two fields side by side on the first row (Name / Email), matching whichever
   two [text*]/[email*] tags come first, wrap them in a shared
   .contact-form__row div in the CF7 form template to activate this. */
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) {
	.contact-form__row { grid-template-columns: 1fr; }
}

.contact-form input[type="submit"] {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	color: var(--color-white);
	background: var(--color-accent);
	border: none;
	border-radius: var(--radius-pill);
	padding: 15px 34px;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}
.contact-form input[type="submit"]:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.contact-form input[type="submit"]:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* Validation + status messages */
.contact-form .wpcf7-not-valid-tip {
	display: block;
	color: var(--color-accent);
	font-size: 0.8rem;
	margin-top: 6px;
}
.contact-form .wpcf7-form-control.wpcf7-not-valid { border-color: var(--color-accent); }
.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--radius);
	font-size: 0.9rem;
	border: 1px solid var(--color-border);
}
.contact-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: #2f7d4f;
	background: #eefaf1;
	color: #205c38;
}
.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.failed .wpcf7-response-output,
.contact-form .wpcf7-form.aborted .wpcf7-response-output {
	border-color: var(--color-accent);
	background: #fdecec;
	color: var(--color-accent-dark);
}
.contact-form .wpcf7-spinner { margin-left: 10px; }

/* -------------------------------------------------------------------------
   Interior pages: banner + breadcrumb + shared building blocks
   (About, Sectors, Services, Certifications, Catalogue, Products, Contact, News)
   ------------------------------------------------------------------------- */
.interior-banner {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	padding-block: 48px 32px;
	background: var(--color-dark);
	color: var(--color-white);
}
.interior-banner__content { position: relative; z-index: 2; }
.interior-banner__content h1 { margin-bottom: 8px; }
.interior-banner__subtitle { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; opacity: 0.9; margin: 0; }

/* Large, subtle Rackit logo watermark centered in every interior banner */
.interior-banner__logo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.interior-banner__logo img {
	width: 60%;
	max-width: 640px;
	height: auto;
	opacity: 0.14;
	filter: grayscale(1) brightness(3);
}
.interior-banner__logo-text {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12rem;
	letter-spacing: 0.02em;
	color: var(--color-white);
	opacity: 0.08;
	white-space: nowrap;
}

/* Diagonal product-photo cutout on product pages (mirrors the homepage hero) */
.interior-banner__triangle-border {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	background: var(--color-accent);
	clip-path: polygon(32% 0%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 1;
}
.interior-banner__triangle-img {
	position: absolute;
	inset: 4px 4px 4px 10px;
	background-size: cover;
	background-position: center;
	background-color: var(--color-dark);
	clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media (max-width: 900px) {
	.interior-banner__triangle-border { display: none; }
	.interior-banner__logo img { width: 80%; }
	.interior-banner__logo-text { font-size: 6rem; }
}

.site-breadcrumb {
	padding-block: 14px;
	font-size: 0.85rem;
	color: var(--color-grey-dark);
	border-bottom: 1px solid var(--color-border);
}
.bc-item { color: var(--color-grey-dark); }
.bc-item--home::before { content: "\2302\00a0"; } /* small home glyph */
.bc-item--current { color: var(--color-dark); font-weight: 600; }
.bc-sep { margin: 0 8px; color: var(--color-border); }

.intro-lede { font-size: 1.15rem; max-width: 780px; }

/* Two-column text+image sections reused across About / Certifications / Products */
.interior-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.interior-columns--reverse .interior-columns__media { order: -1; }
.interior-columns__media { aspect-ratio: 4/3; background-size: cover; background-position: center; background-color: var(--color-border); border-radius: var(--radius); }

.specs-list { margin: 0 0 24px; padding: 0; list-style: none; }
.specs-list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 12px;
	font-size: 0.95rem;
	color: var(--color-dark);
	line-height: 1.5;
}
.specs-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}
@media (max-width: 800px) {
	.interior-columns { grid-template-columns: 1fr; }
	.interior-columns--reverse .interior-columns__media { order: 0; }
}

/* Sectors: numbered rows */
.numbered-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; align-items: start; }
.numbered-row__index { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-accent); line-height: 1; }
@media (max-width: 600px) {
	.numbered-row { grid-template-columns: 1fr; }
}

/* Services grid */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { background: var(--color-white); padding: 28px; border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
.service-card__index { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-accent); display: block; margin-bottom: 10px; }
.service-card h3 { text-transform: none; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* Certifications */
.certifications-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cert-chip {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 0.85rem;
	font-weight: 600;
}
.cert-card {
	flex: 1 1 300px;
	max-width: 360px;
	background: var(--color-white);
	border-radius: var(--radius);
	padding: 24px;
	transition: transform var(--transition), box-shadow var(--transition);
}
.cert-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
.cert-card__title { font-size: 1rem; margin-bottom: 10px; }
.cert-card__desc { font-size: 0.88rem; color: var(--color-grey-dark); margin: 0 0 16px; }
.cert-card .btn { padding: 10px 20px; font-size: 0.85rem; }

/* Catalogue */
.catalogue-download { text-align: center; max-width: 640px; margin-inline: auto; }
.catalogue-download .btn { margin-top: 12px; }

/* Products landing / product detail already reuse .product-grid, .interior-columns, .contact-cta */

/* Blog listing grid (home.php), reuses .news-card styling from the homepage carousel */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.news-pagination { margin-top: 40px; text-align: center; }
.news-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 4px; border-radius: 50%; font-weight: 600; }
.news-pagination .page-numbers.current { background: var(--color-accent); color: var(--color-white); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* Lazy-loaded background images: fade + subtle zoom in once main.js swaps
   data-bg into a real background-image, matching manorga.com's lazyloaded reveal. */
[data-bg] {
	background-image: none;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.6s ease, transform 0.8s ease;
}
[data-bg].is-loaded {
	opacity: 1;
	transform: scale(1);
}
/* The hero's dark fallback must stay solid instantly, only the photo swap fades, not the whole panel */
.hero__media[data-bg] { opacity: 1; transform: none; }
/* Any background-photo section that also carries its own readable text (the
   usage/sectors teaser, every interior page banner) must never hide that
   text while its photo is still loading, only decorative image tiles
   (product/news cards, collages) should fade in with the image itself. */
.bg-img[data-bg] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-bg] { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   Homepage warranty section
   ------------------------------------------------------------------------- */
.warranty { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.warranty__media {
	aspect-ratio: 16 / 9;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #ececec;
	border-radius: var(--radius);
}
.warranty__text p { margin: 14px 0 26px; max-width: 52ch; color: var(--color-grey-dark); }
@media (max-width: 800px) {
	.warranty { grid-template-columns: 1fr; gap: 28px; }
}

/* Product FAQ accordion */
.faq { max-width: 820px; margin-top: 16px; }
.faq__item { border-bottom: 1px solid var(--color-border); padding: 14px 0; }
.faq__item summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 28px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 1.3rem; line-height: 1; color: var(--color-accent); }
.faq__item[open] summary::after { content: '\2212'; }
.faq__item p { margin: 10px 0 0; color: var(--color-grey-dark); }

/* Single post: meta, featured image, table of contents, references, related */
.post-single { max-width: 820px; }
.post-meta { display: flex; gap: 10px; align-items: center; color: var(--color-grey-dark); font-size: 0.9rem; margin: 0 0 20px; }
.post-featured { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; background: var(--color-grey); }
.post-featured img { display: block; width: 100%; height: auto; }
.post-toc { background: var(--color-grey); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 32px; }
.post-toc__title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; margin: 0 0 8px; }
.post-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.post-toc a { color: var(--color-dark); text-decoration: none; }
.post-toc a:hover { color: var(--color-accent); text-decoration: underline; }
.post-body { font-size: 1.05rem; line-height: 1.75; }
.post-body h2 { margin-top: 2.2em; scroll-margin-top: 100px; }
.post-body h3 { margin-top: 1.6em; scroll-margin-top: 100px; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 1.2em; }
.post-body li { margin-bottom: 0.4em; }
.post-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--color-accent-dark); }
.post-refs { margin: 40px 0 0; padding: 20px 24px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.post-refs__title { font-family: var(--font-heading); font-weight: 700; margin: 0 0 8px; }
.post-refs ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.post-related { margin-top: 48px; }
.post-related__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.post-related__list li { border-bottom: 1px solid var(--color-border); padding-bottom: 14px; display: grid; gap: 4px; }
.post-related__list a { font-weight: 600; color: var(--color-dark); text-decoration: none; }
.post-related__list a:hover { color: var(--color-accent); }
.post-related__list span { color: var(--color-grey-dark); font-size: 0.92rem; }

.news-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Footer: visible hover/focus states on every link and button */
.site-footer a { transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition); }
.site-footer .footer-nav__list a:hover,
.site-footer .footer-nav__list a:focus-visible,
.site-footer .legal-nav__list a:hover,
.site-footer .legal-nav__list a:focus-visible,
.site-footer .footer-nav__list .sub-menu a:hover,
.site-footer .footer-nav__list .sub-menu a:focus-visible { color: var(--color-accent); }
.site-footer .legal-nav__list a { color: var(--color-grey-dark); }
.phone-btn:hover,
.phone-btn:focus-visible { background: var(--color-accent); color: var(--color-white); transform: translateY(-2px); }
.phone-btn:hover svg path,
.phone-btn:focus-visible svg path { stroke: var(--color-white); }
.phone-btn svg path { transition: stroke var(--transition); }
.site-footer .social-nav__list a:hover,
.site-footer .social-nav__list a:focus-visible { color: var(--color-accent); }
.footer-picto { transition: transform var(--transition), color var(--transition); }
.footer-picto:hover { transform: translateY(-3px); color: var(--color-accent); }

/* Language switcher on phones: .site-header__right (search, flags, Contact)
   is hidden under 480px, so the flags get their own compact copy in the
   header bar, plus a labelled version at the bottom of the menu drawer. */
.lang-switcher--mobile { display: none; }
.drawer-lang { display: none; }
@media (max-width: 480px) {
	.lang-switcher--mobile { display: block; margin-left: auto; }
	.lang-switcher--mobile img.pll-flag { width: 28px; }
	.lang-switcher--mobile ul { gap: 8px; }
	.drawer-lang { display: block; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--color-border); }
	.drawer-lang ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
	.drawer-lang li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); font-weight: 600; color: var(--color-dark); background: var(--color-grey); }
	.drawer-lang li.current-lang a { background: var(--color-dark); color: var(--color-white); }
	.drawer-lang img.pll-flag { width: 24px; height: auto; display: block; }
}

/* Single floating WhatsApp button */
.whatsapp-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	width: 58px; height: 58px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #25D366; color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.whatsapp-float:hover, .whatsapp-float:focus-visible { background: #1EBE5A; transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
@media print { .whatsapp-float { display: none; } }
@media (max-width: 480px) { .whatsapp-float { right: 14px; bottom: 14px; width: 54px; height: 54px; } }

/* Contact page: details beside the form */
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; max-width: 1100px; }
.contact-info h2, .contact-form h2 { margin-bottom: 14px; }
.contact-info__lead { color: var(--color-grey-dark); margin-bottom: 24px; }
.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-card { background: var(--color-grey); border-left: 4px solid var(--color-accent); border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 4px; }
.contact-card__label { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; color: var(--color-grey-dark); }
.contact-card address { font-style: normal; }
.contact-card a { color: var(--color-dark); font-weight: 600; text-decoration: none; }
.contact-card a:hover { color: var(--color-accent); }
.contact-form { margin-top: 0; max-width: none; }
.contact-form .fluentform .ff-el-form-control,
.contact-form .fluentform input[type="text"],
.contact-form .fluentform input[type="email"],
.contact-form .fluentform input[type="tel"],
.contact-form .fluentform textarea {
	width: 100%; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-dark);
	background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px 14px;
}
.contact-form .fluentform .ff-el-form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(210, 35, 42, 0.15); }
.contact-form .fluentform label, .contact-form .fluentform .ff-el-input--label label {
	font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem; color: var(--color-dark);
}
.contact-form .fluentform .ff-btn-submit,
.contact-form .fluentform button[type="submit"] {
	background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius-pill);
	padding: 14px 32px; font-family: var(--font-heading); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}
.contact-form .fluentform .ff-btn-submit:hover, .contact-form .fluentform button[type="submit"]:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; } }

/* Warranty badge (replaces the old graphic with typos) */
.warranty__badge { background: #ececec; border-radius: var(--radius); aspect-ratio: 16/9; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10px; }
.warranty__badge svg { display: block; max-width: 100%; max-height: 100%; }

/* Sector pages */
.sector-section { max-width: 860px; }
.sector-section h2 { margin-bottom: 14px; }
.sector-section p { margin-bottom: 1.1em; line-height: 1.75; }
.sector-products { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.sector-products a { display: grid; gap: 4px; padding: 18px 20px; background: var(--color-grey); border-left: 4px solid var(--color-accent); border-radius: var(--radius); color: var(--color-dark); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.sector-products a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); }
.sector-products span { color: var(--color-grey-dark); font-size: 0.9rem; }
.numbered-row__body .link-arrow { margin-top: 10px; }