/* =============================================================================
   STEMP — stylesheet
   Refined trade aesthetic. Design tokens, fluid type, flex/grid, motion.
   ============================================================================= */

/* --- Modern reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; hyphens: auto; }

/* --- Design tokens ------------------------------------------------------- */
:root {
	/* Colour */
	--gray:        #ebebeb;
	--gray-100:    #f6f6f6;
	--gray-200:    #e4e4e4;
	--gray-500:    #7a7677;
	--gray-700:    #3a3737;
	--red:         #d53131;
	--red-soft:    color-mix(in srgb, var(--red) 14%, transparent);
	--red-shadow:  color-mix(in srgb, var(--red) 22%, transparent);
	--black:       #1f1c1d;
	--white:       #fff;

	/* Type — fluid scale */
	--fs-h1:    clamp(1.65rem, 1.35rem + 1.3vw, 2.25rem);
	--fs-h2:    clamp(1.2rem,  1.08rem + 0.55vw, 1.45rem);
	--fs-h3:    clamp(1.0rem,  0.96rem + 0.25vw, 1.125rem);
	--fs-body:  1rem;
	--fs-small: 0.875rem;
	--fs-micro: 0.75rem;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;

	/* Surface */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 14px;
	--shadow-card:
		0 1px 2px rgba(0,0,0,0.04),
		0 8px 24px -8px rgba(0,0,0,0.10),
		0 32px 64px -24px rgba(0,0,0,0.18);
	--shadow-press: 0 2px 6px rgba(0,0,0,0.10);

	/* Type stacks */
	--font-body:    system-ui, -apple-system, "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-display: system-ui, -apple-system, "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Layout */
	--container: 60rem;
	--gutter:    clamp(1rem, 4vw, 2rem);

	/* Motion */
	--ease:           cubic-bezier(0.32, 0.72, 0, 1);
	--ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--duration-fast:  140ms;
	--duration:       260ms;
}

/* Smooth <details> open/close on browsers that support interpolate-size */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
}

html { scroll-behavior: smooth; scroll-padding-block-start: var(--space-7); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Base ---------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--black);
	background:
		radial-gradient(ellipse 60rem 40rem at 50% -10rem, color-mix(in srgb, var(--gray) 50%, var(--white)) 0%, var(--gray) 70%),
		var(--gray);
	background-attachment: fixed;
	min-block-size: 100dvh;
	min-inline-size: 300px;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
}

h1, h2, h3 {
	font-family: var(--font-display);
	color: var(--black);
	font-weight: 700;
	letter-spacing: -0.015em;
}
h1,
.heading-hero {
	font-size: var(--fs-h1);
	line-height: 1.15;
	margin-block: var(--space-2) var(--space-6);
	padding-block-end: var(--space-3);
	border-block-end: 2px solid var(--red-soft);
}
h2 {
	font-size: var(--fs-h2);
	line-height: 1.25;
	margin-block-end: var(--space-4);
}
h3 {
	font-size: var(--fs-h3);
	line-height: 1.35;
	margin-block: var(--space-5) var(--space-3);
}
p {
	margin-block-end: var(--space-4);
	line-height: 1.6;
	max-inline-size: 70ch;
}
strong { font-weight: 700; color: var(--gray-700); }

a {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--red) 35%, transparent);
	transition: text-decoration-color var(--duration-fast) var(--ease);
}
a:hover { text-decoration-color: var(--red); }
.red { color: var(--red); }

/* --- Container ----------------------------------------------------------- */
.container {
	inline-size: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	position: relative;
}

/* --- Header -------------------------------------------------------------- */
.header {
	background-image: image-set(url('../img/header.webp') type('image/webp'), url('../img/header.png') type('image/png'));
	background-repeat: no-repeat;
	background-position: center center;
	block-size: 192px;
	border-block-end: 2px solid var(--red);
	position: relative;
	z-index: 30;
}
.header > .container {
	block-size: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: var(--space-5);
}
.logo {
	display: block;
	inline-size: 126px;
	block-size: 123px;
	background-image: image-set(url('../img/logo.webp') type('image/webp'), url('../img/logo.png') type('image/png'));
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity var(--duration-fast) var(--ease);
}
.logo:hover { opacity: 0.85; }
.header-man {
	inline-size: 396px;
	block-size: 207px;
	background-image: image-set(url('../img/header-man.webp') type('image/webp'), url('../img/header-man.png') type('image/png'));
	background-repeat: no-repeat;
	background-size: contain;
	justify-self: start;
	pointer-events: none;
}

/* --- Nav ----------------------------------------------------------------- */
.menu {
	display: flex;
	gap: var(--space-1);
	justify-self: end;
}
.menu a {
	display: inline-flex;
	align-items: center;
	block-size: 40px;
	padding-inline: var(--space-4);
	color: var(--red);
	font-weight: 700;
	font-size: var(--fs-small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	position: relative;
	text-decoration: none;
}
.menu a::after {
	content: "";
	position: absolute;
	inset-inline: var(--space-4);
	inset-block-end: 8px;
	block-size: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration) var(--ease-out);
}
.menu a:hover::after,
.menu a:focus-visible::after,
.menu a.active::after,
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--radius-sm); }

/* --- Content surface ----------------------------------------------------- */
.pre-content-border {
	block-size: 2px;
	background: var(--black);
	position: relative;
	z-index: 20;
}
.content {
	background-image: image-set(url('../img/content-bg.webp') type('image/webp'), url('../img/content-bg.png') type('image/png'));
	background-repeat: no-repeat;
	background-position: center top;
	padding-block-end: var(--space-8);
}
.white-bg {
	background: var(--white);
	margin-block: -10px 0;
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-md);
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
	position: relative;
	z-index: 10;
	overflow: clip;
	isolation: isolate;
}
.white-bg::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg,
		var(--red) 0%,
		color-mix(in srgb, var(--red) 60%, var(--black)) 50%,
		var(--red) 100%);
	z-index: 1;
}

/* --- Service lists (homepage) ------------------------------------------- */
ul.list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-6);
	row-gap: var(--space-2);
	margin-block: 0 var(--space-5);
}
ul.list li {
	position: relative;
	padding-inline-start: 1.25em;
	line-height: 1.55;
}
ul.list li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	inline-size: 0.45em;
	block-size: 0.45em;
	background: var(--red);
	transform: rotate(45deg);
}

/* --- Reference lists (referencie page) ---------------------------------- */
ul:not(.list) {
	margin-block: 0 var(--space-6);
	padding-inline-start: var(--space-5);
}
ul:not(.list) li {
	list-style: disc;
	margin-block-end: var(--space-3);
	line-height: 1.55;
}
ul:not(.list) li::marker { color: var(--red); }
ul:not(.list) li ul { margin-block: var(--space-2); padding-inline-start: var(--space-5); }
ul:not(.list) li ul li { list-style: circle; }

/* --- Disclosure: archive + faq ------------------------------------------ */
details.archive,
details.faq { cursor: pointer; }
details.archive {
	margin-block-start: var(--space-6);
	border-block-start: 1px solid var(--gray-200);
	padding-block-start: var(--space-5);
}
details.faq {
	border-block-end: 1px solid var(--gray-200);
	padding-block: var(--space-3);
	transition: background-color var(--duration-fast) var(--ease);
}
details.faq:hover { background: var(--gray-100); }

details.archive > summary,
details.faq > summary {
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	color: var(--black);
	display: flex;
	align-items: baseline;
	gap: 0;
	padding-inline: var(--space-1);
	border-radius: var(--radius-sm);
	transition: color var(--duration-fast) var(--ease);
}
details.faq > summary:hover { color: var(--red); }
details.archive > summary::-webkit-details-marker,
details.faq > summary::-webkit-details-marker { display: none; }

details.archive > summary::before,
details.faq > summary::before {
	content: "›";
	color: var(--red);
	display: inline-block;
	inline-size: 1.25em;
	font-size: 1.4em;
	line-height: 1;
	font-weight: 400;
	transition: transform var(--duration) var(--ease-out);
	transform-origin: center;
}
details.archive[open] > summary::before,
details.faq[open] > summary::before { transform: rotate(90deg); }

details.archive > summary {
	font-size: var(--fs-h2);
	line-height: 1.25;
	margin-block-end: var(--space-4);
}
details.faq > summary {
	font-size: var(--fs-body);
	line-height: 1.35;
}
details.faq > p {
	margin-block: var(--space-3) var(--space-2);
	padding-inline-start: 1.4em;
	color: var(--gray-700);
}
details.archive h3 {
	font-size: 1.05rem;
	margin-block: var(--space-5) var(--space-3);
}
details.archive > summary:focus-visible,
details.faq > summary:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 4px;
}

/* Animate open/close where supported */
@supports (interpolate-size: allow-keywords) {
	details.faq::details-content,
	details.archive::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size var(--duration) var(--ease-out),
		            opacity var(--duration) var(--ease),
		            content-visibility var(--duration) allow-discrete;
	}
	details.faq[open]::details-content,
	details.archive[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* --- Contact ------------------------------------------------------------- */
.kontakt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--space-5) var(--space-6);
	margin-block: var(--space-5) 0;
}
.kontakt {
	padding-inline-start: 60px;
	padding-block: var(--space-1);
	background-repeat: no-repeat;
	background-position: 0 4px;
	background-size: 42px 42px;
	line-height: 1.6;
}
.kontakt.tel  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d53131'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.03-.24 11.7 11.7 0 0 0 3.68.59 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.49a1 1 0 0 1 1 1c0 1.27.2 2.51.59 3.68a1 1 0 0 1-.24 1.03l-2.22 2.08z'/></svg>"); }
.kontakt.info { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d53131'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>"); }
.kontakt a {
	color: var(--black);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease);
}
.kontakt a:hover { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kontakt a:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* --- Footer -------------------------------------------------------------- */
.footer {
	background: var(--black);
	block-size: 80px;
	border-block-start: 2px solid var(--red);
	font-size: var(--fs-micro);
	color: var(--white);
	position: relative;
}
.footer > .container {
	display: flex;
	align-items: center;
	block-size: 100%;
	gap: var(--space-5);
}
.footer-logo {
	inline-size: 112px;
	block-size: 105px;
	background-image: image-set(url('../img/footer-stemp.webp') type('image/webp'), url('../img/footer-stemp.png') type('image/png'));
	background-repeat: no-repeat;
	background-size: contain;
	margin-block-start: -43px;
	flex-shrink: 0;
}
.footer-text { line-height: 1.5; }

/* --- Utility ------------------------------------------------------------- */
.margin-top-30 { margin-block-start: var(--space-6); }
.cf::before, .cf::after { content: " "; display: table; }
.cf::after { clear: both; }

/* Screen-reader-only: keeps semantic headings without visual impact */
.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Responsive ---------------------------------------------------------- */
/* Tablet — hide the cartoon character, keep two-column lists */
@media (max-width: 60rem) {
	.header-man { display: none; }
	.header > .container { grid-template-columns: auto auto; justify-content: space-between; }
}

/* Small tablet — header collapses */
@media (max-width: 51.25rem) {
	.header { block-size: 140px; }
	.logo { inline-size: 85px; block-size: 100px; }
}

/* Mobile */
@media (max-width: 30rem) {
	body { font-size: 0.9375rem; }
	.header { block-size: 110px; }
	.logo { inline-size: 72px; block-size: 80px; }
	.menu a {
		block-size: 36px;
		padding-inline: var(--space-3);
		font-size: 0.75rem;
		letter-spacing: 0.03em;
	}
	ul.list { grid-template-columns: 1fr; }
	.kontakt-grid { gap: var(--space-5); }

	.footer { block-size: auto; padding-block: var(--space-4); }
	.footer > .container { justify-content: center; }
	.footer-logo { display: none; }
	.footer-text { text-align: center; }
}