/* ==========================================================================
   Statek — main stylesheet
   Values measured from the legacy statek.com (Panoramic) at 1280px.
   ========================================================================== */

:root {
	--st-blue: #006489;
	--st-blue-nav: rgba(0, 100, 137, 0.7);
	--st-link-table: #127cbb;
	--st-text: #58585a;
	--st-text-dark: #111;
	--st-muted: #666;
	--st-rule: #d0d2d4;
	--st-row-rule: #ddd;
	--st-footer-bg: #eaf1f7;
	--st-gold: #e79d19;
	--st-white: #fff;
	--st-font-body: "Lato", sans-serif;
	--st-font-head: "Raleway", sans-serif;
	--st-container: 1140px;
	--st-gutter: 22px;
	--st-gap: 30px;
}

/* ---------- Reset / base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--st-white);
	color: var(--st-text);
	font-family: var(--st-font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--st-blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

strong, b { font-weight: 700; }

p { margin: 0 0 22.5px; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--st-blue);
	font-family: var(--st-font-head);
	font-weight: 400;
	line-height: 1;
}
h1 { font-size: 32px; margin-bottom: 17.6px; }
h2 { font-size: 28px; margin-bottom: 18.2px; }
h3 { font-size: 22px; margin-bottom: 17.6px; }
h4 { font-size: 20px; line-height: 1.3; margin-bottom: 22px; }
h5 { font-size: 16px; line-height: 1.3; margin-bottom: 20.8px; color: var(--st-muted); }
h6 { font-size: 14px; margin-bottom: 19.6px; }

hr {
	height: 1px;
	margin: 7.5px 0 22.5px;
	border: 0;
	background: var(--st-rule);
}

ul, ol { margin: 0 0 22.5px 45px; padding: 0; }
ul { list-style: disc; }
li > ul, li > ol { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

blockquote { margin: 0 0 22.5px; padding-left: 20px; border-left: 3px solid var(--st-rule); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 8px; left: 8px; z-index: 1000;
	padding: 10px 16px; background: var(--st-white); color: var(--st-blue);
}

.icon { display: inline-flex; width: 1em; height: 1em; }
.icon svg { width: 100%; height: 100%; }

.site-container {
	max-width: var(--st-container);
	margin: 0 auto;
	padding: 0 var(--st-gutter);
}

/* WordPress alignment helpers */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 22.5px 0 0; }
.alignright { float: right; margin: 0 0 0 22.5px; }
.has-text-align-center { text-align: center; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; text-align: center; }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 50; background: var(--st-white); }

.header-inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 167px;
	padding-bottom: 0;
}

.branding { padding: 27px 0 23px; }
.branding .custom-logo-link { display: block; width: max-content; }
.branding .custom-logo { display: block; width: 168px; height: auto; margin-bottom: 10px; }
.site-title { font-family: var(--st-font-head); font-size: 32px; color: var(--st-blue); }
.site-description { padding-top: 4px; font-size: 15px; }

.header-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 30px;
	font-size: 13px;
	line-height: 19.5px;
	letter-spacing: 1px;
}
.info-text { margin: 0 1px 5px 0; color: var(--st-text); }
.info-text a { color: var(--st-text); }
.info-text .phone { color: var(--st-blue); font-weight: 700; }

.search-toggle {
	padding: 0;
	margin: 4px 1px 0 0;
	border: 0;
	background: none;
	color: var(--st-blue);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}

.header-search {
	position: absolute;
	right: var(--st-gutter);
	top: 92px;
	width: 300px;
	z-index: 60;
}
.header-search .search-form { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }

.search-form { display: flex; background: var(--st-white); border: 1px solid #ccc; }
.search-field {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 0;
	font: inherit;
	color: var(--st-text);
}
.search-submit {
	padding: 0 14px;
	border: 0;
	background: var(--st-blue);
	color: var(--st-white);
	cursor: pointer;
}

/* ---------- Main navigation ---------- */

.main-navigation {
	position: relative;
	background: var(--st-blue);
	border-bottom: 2px solid var(--st-white);
}
.home .main-navigation {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--st-blue-nav);
}

.main-navigation .menu,
.main-navigation .menu ul { list-style: none; margin: 0; padding: 0; }
.main-navigation .menu { display: flex; flex-wrap: wrap; }
.main-navigation li { position: relative; }

.main-navigation a {
	display: block;
	padding: 19px 22px 16px;
	color: var(--st-white);
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s;
}
.main-navigation li:hover > a,
.main-navigation li:focus-within > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a { background: rgba(255, 255, 255, 0.3); }

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	min-width: 200px;
	background: var(--st-blue);
	border-top: 2px solid var(--st-white);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0.2s;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.main-navigation .sub-menu a { padding: 15px 32px 15px 20px; white-space: nowrap; }

.menu-toggle { display: none; }

/* ---------- Content ---------- */

.site-content {
	display: flow-root;
	max-width: var(--st-container);
	margin: 25px auto 0;
	padding: 0 var(--st-gutter);
}
.home .site-content { padding-top: 25px; }

.entry-content { margin-top: 22.5px; }
.home .entry-content { margin-top: 0; }
.entry-content::after { content: ""; display: table; clear: both; }

.entry-content a { font-weight: 400; }

/* Rows/columns converted from the old page builder */
.st-row {
	display: flex;
	align-items: flex-start;
	gap: var(--st-gap);
	margin-bottom: var(--st-gap);
}
.st-row:last-child { margin-bottom: 0; }
.st-col { flex: 1 1 0; min-width: 0; }
.st-block { display: flow-root; margin-bottom: var(--st-gap); }
.st-block:last-child { margin-bottom: 0; }
.st-spacer { height: var(--st-gap); }
.st-spacer:last-child { display: none; }
.st-image { margin: 0; }
.st-image img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Core block columns (for newly edited content) */
.wp-block-columns { display: flex; gap: var(--st-gap); margin-bottom: var(--st-gap); }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-image img { height: auto; }

/* ---------- Product table ---------- */

.product-table-wrap { margin: 0 0 10px; }
.product-table { font-weight: 400; color: var(--st-text-dark); }
.product-table th,
.product-table td {
	padding: 5px;
	text-align: center;
	vertical-align: top;
	font-size: 15px;
	font-weight: 400;
	line-height: 22.5px;
}
.product-table td { border-top: 1px solid var(--st-row-rule); }
.product-table td a { color: var(--st-link-table); }
.product-table .col-image img { width: 180px; max-width: none; }
.product-table .sheet-note { display: block; }

/* Legacy tables pasted into content keep the same look */
.entry-content table:not(.product-table) td { padding: 5px; vertical-align: top; }

/* ---------- Sliders ---------- */

.hero-slider {
	position: relative;
	overflow: hidden;
	background: #0b1a24;
	aspect-ratio: 1265 / 526;
}
.hero-track, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-bg { width: 100%; height: 100%; object-fit: cover; }

/* Text sits in the image area below the overlaid menu bar, centred vertically.
   All scenes share one grid cell so each one centres on its own height. */
.hero-text {
	position: absolute;
	inset: 58px 0 0;
	display: grid;
	align-items: center;
	padding-block: 20px;
	pointer-events: none;
}
.hero-scene {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	opacity: 0;
	transition: opacity 0.6s;
}
.hero-scene.is-active { opacity: 1; }
.hero-line {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s, transform 0.6s;
	transition-delay: calc(var(--i) * 0.35s);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.hero-scene.is-active .hero-line { opacity: 1; transform: none; }

.scene-statement .hero-line { font-family: "Cabin", sans-serif; font-size: 38px; line-height: 1.3; color: #fff; }
.scene-list .hero-line { font-family: "Cabin", sans-serif; font-size: 28px; line-height: 1.25; color: var(--st-gold); }
.scene-feature .hero-line { font-family: "Cabin", sans-serif; font-size: 28px; font-weight: 600; line-height: 1.3; color: #fff; }
.scene-feature .hero-line:nth-child(odd) { font-family: "Open Sans", sans-serif; font-size: 32px; font-weight: 700; color: var(--st-gold); }
.scene-bold .hero-line { font-family: "Oswald", sans-serif; font-size: 30px; font-weight: 700; line-height: 1.35; color: #fff; text-transform: uppercase; }
.scene-brand .hero-line { font-family: "Roboto", sans-serif; font-size: 18px; letter-spacing: 3px; color: rgba(255, 255, 255, 0.85); }

.slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 8px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.8);
	font-size: 24px;
	cursor: pointer;
}
.slider-arrow:hover { color: #fff; }
.slider-arrow.prev { left: 10px; }
.slider-arrow.next { right: 10px; }
.hero-slider .slider-arrow { margin-top: 9px; }

.image-slider { position: relative; overflow: hidden; }
.image-slider-track { display: grid; }
.image-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s, visibility 0.8s;
}
.image-slide.is-active { opacity: 1; visibility: visible; }
.image-slide img { display: block; max-width: min(100%, var(--slide-max, 100%)); height: auto; margin: 0 auto; }
/* The news slider used a fixed 1.875:1 frame on the old site; letterbox slides to it. */
.slider-news .image-slider-track { aspect-ratio: 533 / 284; max-height: 286px; }
.slider-news .image-slide img { width: 100%; height: 100%; object-fit: contain; }
.slider-news .slider-arrow { color: rgba(255, 255, 255, 0.85); }

.slider-dots {
	position: absolute;
	left: 0; right: 0; bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.slider-dot {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}
.slider-dot.is-active { background: #fff; }

/* ---------- Home ---------- */

.section-heading { text-align: center; margin-bottom: 48.2px; }

/* Each rule sat in its own page-builder row on the old site (row gap 30px). */
.home-main > hr { margin: 37.5px 0 52.5px; }

.markets-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--st-gap);
	margin-bottom: var(--st-gap);
	text-align: center;
}
.market-image { display: block; width: 215px; margin: 0 auto 22.5px; }
.market h3 { margin-bottom: 17.6px; }
.market-items { list-style: none; margin: 0; }
.market-items li {
	margin-bottom: 19.6px;
	color: var(--st-blue);
	font-family: var(--st-font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.home-promos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--st-gap);
	margin-bottom: var(--st-gap);
}
.home-promos img { display: block; max-width: 100%; height: auto; }

.home-news { width: calc(50% - 15px); margin: 0 auto var(--st-gap); }

.home-logos { text-align: center; }
.home-logos img { max-width: 680px; width: 100%; }

/* ---------- Footer ---------- */

.site-footer { margin-top: 50px; }
.footer-widgets { min-height: 65px; background: var(--st-footer-bg); }
.footer-bottom {
	padding: 41px 0;
	background: var(--st-blue);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--st-white);
	font-size: 13px;
	line-height: 19.5px;
	text-align: center;
}
.footer-bottom a { color: var(--st-white); }
.copyright { margin-bottom: 12px; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6.5px; column-gap: 2.5px; }
.footer-menu a { display: block; padding: 0 7px; line-height: 13px; }

.back-to-top {
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--st-blue);
	color: var(--st-white);
	font-size: 18px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { text-decoration: none; background: #004f6c; }

/* ---------- Contact form ---------- */

.contact-form-wrap { max-width: 760px; margin-bottom: 22.5px; }
.contact-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.contact-form .field { margin-bottom: 15px; }
.contact-form label { display: block; margin-bottom: 4px; font-weight: 400; }
.contact-form .req { color: #c0392b; }
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 2px;
	font: inherit;
	color: var(--st-text);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--st-blue); outline-offset: 0; border-color: var(--st-blue); }
.contact-form .hp { position: absolute; left: -9999px; }
.button {
	display: inline-block;
	padding: 10px 24px;
	border: 0;
	border-radius: 0;
	background: var(--st-blue);
	color: var(--st-white);
	font: inherit;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.button:hover { background: #004f6c; }
.form-notice { padding: 12px 16px; border-left: 4px solid; }
.form-notice.is-success { border-color: #2e8540; background: #eef7f0; }
.form-notice.is-error { border-color: #c0392b; background: #fbeeee; }

/* ---------- Search results ---------- */

.search-results { list-style: none; margin: 0; }
.search-results li { padding: 20px 0; border-bottom: 1px solid var(--st-rule); }
.search-results h2 { font-size: 22px; margin-bottom: 10px; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
	.main-navigation a { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 960px) {
	.header-inner { min-height: 0; }
	.home .main-navigation { position: relative; top: auto; background: var(--st-blue); }

	.menu-toggle {
		display: flex;
		align-items: center;
		height: 57px;
		margin: 0 auto;
		padding: 0 20px;
		border: 0;
		background: none;
		color: var(--st-white);
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
	}
	.main-navigation .menu { display: none; flex-direction: column; padding-bottom: 10px; }
	.main-navigation.is-open .menu { display: flex; }
	.main-navigation a { padding: 12px 10px; }
	.main-navigation .sub-menu {
		position: static;
		width: auto;
		border-top: 0;
		visibility: visible;
		opacity: 1;
		background: transparent;
	}
	.main-navigation .sub-menu a { padding: 10px 10px 10px 30px; font-size: 13px; white-space: normal; }

	.hero-text { inset: 0; }
	.scene-statement .hero-line { font-size: 26px; }
	.scene-list .hero-line,
	.scene-feature .hero-line { font-size: 18px; }
	.scene-feature .hero-line:nth-child(odd) { font-size: 20px; }
	.scene-bold .hero-line { font-size: 18px; }
	.scene-brand .hero-line { font-size: 14px; }
	.hero-slider .slider-arrow { margin-top: -20px; }
}

@media (max-width: 780px) {
	.st-row,
	.wp-block-columns { flex-direction: column; }
	.st-col { width: 100%; flex-basis: auto; }
	.st-col.is-empty { display: none; }

	.markets-grid,
	.home-promos,
	.contact-form .form-grid { grid-template-columns: 1fr; }
	.home-news { width: 100%; }

	/* Header stacks and centres, as on the old theme. */
	.header-inner { flex-direction: column; align-items: center; text-align: center; }
	.branding { width: 100%; padding: 27px 0 10px; }
	.branding .custom-logo { display: block; margin: 0 auto 10px; }
	.branding .custom-logo-link { margin: 0 auto; }
	.header-right { width: 100%; align-items: center; padding: 10px 0 24px; }
	.search-toggle { margin-top: 13px; }
	.header-search { left: 50%; right: auto; top: auto; bottom: 0; width: 300px; max-width: calc(100% - 2 * var(--st-gutter)); transform: translate(-50%, 50%); }

}

@media (max-width: 600px) {
	/* The hero is only ~156px tall on phones; size the longest scene (8 lines) to fit. */
	.hero-text { padding-block: 8px; }
	.hero-line { line-height: 1.2; }
	.scene-statement .hero-line { font-size: 18px; line-height: 1.2; }
	.scene-list .hero-line { font-size: 13px; line-height: 1.2; }
	.scene-feature .hero-line { font-size: 14px; line-height: 1.2; }
	.scene-feature .hero-line:nth-child(odd) { font-size: 15px; }
	.scene-bold .hero-line { font-size: 13px; line-height: 1.25; }
	.scene-brand .hero-line { font-size: 11px; letter-spacing: 2px; }
	/* The old table overflowed phones sideways; stack each product as a card instead. */
	.product-table thead { display: none; }
	.product-table,
	.product-table tbody { display: block; width: 100%; }
	.product-table tr {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
		padding: 12px 0;
		border-top: 1px solid var(--st-row-rule);
	}
	.product-table td { display: block; padding: 0; border: 0; text-align: left; }
	.product-table td.col-image { grid-row: 1 / span 3; padding-top: 3px; }
	.product-table td.col-image img { width: 110px; }
	.product-table td.col-package::before { content: "Package: "; color: var(--st-text); font-weight: 300; }
	.product-table td.col-package::after { content: " mm"; color: var(--st-text); font-weight: 300; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}