/* ==========================================================================
   PROBAT Security - lean, self-contained stylesheet
   Colours/spacing loosely follow the current probat.com design tokens.
   ========================================================================== */

:root {
	--psec-color-white: hsl(0, 0%, 100%);
	--psec-color-grey: hsl(206, 8%, 34%);
	--psec-color-grey-25: hsl(0, 0%, 91%);
	--psec-color-blue: hsl(195, 78%, 58%);
	--psec-color-error: hsl(352, 71%, 60%);
	--psec-color-background: var(--psec-color-white);
	--psec-color-text: var(--psec-color-grey);

	--psec-space-xs: clamp(.75rem, .25vw + .7rem, 1rem);
	--psec-space-s: 1.25rem;
	--psec-space-m: clamp(1.5rem, .75vw + 1.35rem, 2.25rem);
	--psec-space-l: clamp(2rem, 1vw + 1.8rem, 3rem);
	--psec-space-xl: clamp(2.75rem, 1.5vw + 2.45rem, 4.25rem);
	--psec-space-2xl: clamp(5rem, 2.5vw + 4.5rem, 7.5rem);

	/* grows with the viewport, capped at 3.75rem - matches the live site's grid margin */
	--psec-grid-margin: clamp(1.25rem, 2.5vw + .75rem, 3.75rem);

	/* full-width bars (header/footer) */
	--psec-container-max: 112.5rem;
	/* main content column - yields roughly 50-60% of the viewport on HD screens,
	   matching the "Built to solve. Designed to deliver." block on probat.com */
	--psec-content-max: 56.25rem;
}

/* all width/max-width + padding combinations below assume border-box,
   same as probat.com's own stylesheet - without this reset, padding
   is added on top of width/max-width and blocks overflow the viewport */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Fonts */
@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../../../_assets/605b6d4cdc1ddcafcd47dd6896c7f787/Security/Fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('../../../_assets/605b6d4cdc1ddcafcd47dd6896c7f787/Security/Fonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* ==========================================================================
   Base typography for standard text elements
   ========================================================================== */

html {
	font-family: Roboto, Arial, Verdana, system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.psec-page {
	margin: 0;
	color: var(--psec-color-text);
	background-color: var(--psec-color-background);
	font-size: 1rem;
}

.psec-content h1,
.psec-content h2,
.psec-content h3,
.psec-content h4 {
	font-weight: 500;
	color: var(--psec-color-grey);
	margin: 0 0 var(--psec-space-s);
}

.psec-content h1 { font-size: 2.25rem; line-height: 1.2; }
.psec-content h2 { font-size: 1.875rem; line-height: 1.25; }
.psec-content h3 { font-size: 1.5rem; line-height: 1.3; }
.psec-content h4 { font-size: 1.25rem; line-height: 1.3; }

.psec-content p,
.psec-content ul,
.psec-content ol {
	margin: 0;
	line-height: 1.5;
}

.psec-content ul,
.psec-content ol {
	padding-left: 1.25em;
}

/* only add spacing between block elements that actually follow one another */
.psec-content :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: var(--psec-space-s);
}

.psec-content a {
	color: var(--psec-color-blue);
	text-decoration: underline;
}

.psec-content a:hover {
	text-decoration: none;
}

/* ==========================================================================
   Header - logo + language switch only
   ========================================================================== */

.psec-header {
	background-color: var(--psec-color-white);
	color: var(--psec-color-grey);
}

.psec-header__inner {
	max-width: calc(var(--psec-container-max) + var(--psec-grid-margin) * 2);
	margin-left: auto;
	margin-right: auto;
	padding: var(--psec-space-s) var(--psec-grid-margin);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--psec-space-m);
}

.psec-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.psec-header__logo img {
	display: block;
	height: 56px;
	width: auto;
}

@media screen and (min-width: 75em) {
	.psec-header__logo img {
		height: 80px;
	}
}

.psec-header__lang-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--psec-space-xs);
	margin: 0;
	padding: 0;
	font-size: .875rem;
	line-height: 1.25;
	font-weight: 500;
}

.psec-header__lang-link {
	color: var(--psec-color-grey);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.psec-header__lang-link:hover {
		color: var(--psec-color-blue);
		text-decoration: underline;
		text-decoration-thickness: .08em;
		text-underline-offset: .23em;
	}
}

.psec-header__lang-item--active .psec-header__lang-link {
	color: var(--psec-color-blue);
	text-decoration: underline;
	text-decoration-thickness: .08em;
	text-underline-offset: .23em;
}

/* ==========================================================================
   Main content area - reduced width, like the reference content block
   ========================================================================== */

.psec-main {
	padding-block: var(--psec-space-xl);
}

.psec-content {
	width: 100%;
	max-width: calc(var(--psec-content-max) + var(--psec-grid-margin) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--psec-grid-margin);
	padding-right: var(--psec-grid-margin);
}

/* ==========================================================================
   Footer - copyright + single "Imprint" link
   ========================================================================== */

.psec-footer {
	margin-top: var(--psec-space-2xl);
	padding-block: var(--psec-space-m);
	color: var(--psec-color-white);
	background-color: var(--psec-color-grey);
	/* fixed to the height the probat.com footer currently renders at
	   (derived from its own --space-m/--space-xl/--space-s tokens at
	   desktop width), instead of scaling generically with content */
	min-height: 21rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.psec-footer__inner {
	width: 100%;
	max-width: calc(var(--psec-container-max) + var(--psec-grid-margin) * 2);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--psec-grid-margin);
	display: flex;
	justify-content: flex-start;
}

@media screen and (min-width: 48em) {
	.psec-footer__inner {
		justify-content: flex-end;
	}
}

.psec-footer__copyright {
	width: 100%;
	max-width: calc(var(--psec-container-max) + var(--psec-grid-margin) * 2);
	margin: 0 auto;
	padding: 0 var(--psec-grid-margin);
	font-size: 1rem;
	font-weight: 400;
}

.psec-footer__nav-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--psec-space-s);
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
}

.psec-footer__nav-link {
	color: var(--psec-color-white);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.psec-footer__nav-link:hover {
		color: var(--psec-color-blue);
		text-decoration: underline;
		text-decoration-thickness: .08em;
		text-underline-offset: .23em;
	}
}

/* ==========================================================================
   Form (EXT:form) - matches the layout of probat.com/contact-form
   ========================================================================== */

.frame-type-form_formframework .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.frame-type-form_formframework .form__field:not(:first-child) {
	margin-top: var(--psec-space-l);
}

.frame-type-form_formframework .form__field-error {
	margin-top: var(--psec-space-2xs, .5rem);
	color: var(--psec-color-error);
	font-size: .875rem;
}

.frame-type-form_formframework .input-text,
.frame-type-form_formframework .input-email,
.frame-type-form_formframework .input-textarea,
.frame-type-form_formframework .input-select {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.frame-type-form_formframework .input-text__label,
.frame-type-form_formframework .input-email__label,
.frame-type-form_formframework .input-textarea__label,
.frame-type-form_formframework .input-select__label {
	display: block;
	font-weight: 500;
}

.frame-type-form_formframework .input-text__input,
.frame-type-form_formframework .input-email__input,
.frame-type-form_formframework .input-textarea__input,
.frame-type-form_formframework .input-select__select {
	padding: clamp(.38rem, .125vw + .35rem, .5rem);
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--psec-color-grey);
	background: transparent;
	font: inherit;
	color: var(--psec-color-text);
}

.frame-type-form_formframework .input-text__input:focus,
.frame-type-form_formframework .input-email__input:focus,
.frame-type-form_formframework .input-textarea__input:focus,
.frame-type-form_formframework .input-select__select:focus {
	outline: none;
	border-color: var(--psec-color-blue);
}

.frame-type-form_formframework .input-textarea__input {
	min-height: 8rem;
	resize: vertical;
}

.frame-type-form_formframework .input-select__inner {
	position: relative;
	display: flex;
	align-items: center;
}

.frame-type-form_formframework .input-select__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: none;
	padding-right: 1.88rem;
}

.frame-type-form_formframework .input-select__icon {
	pointer-events: none;
	position: absolute;
	right: .1875rem;
	display: flex;
	align-items: center;
}

.frame-type-form_formframework .input-select__icon svg {
	width: .9375rem;
	transform: rotate(90deg);
}

.frame-type-form_formframework .form__button-group {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--psec-space-l);
}

.frame-type-form_formframework .btn {
	display: inline-block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	padding: .5rem var(--psec-space-s);
	color: var(--psec-color-grey);
	background-color: var(--psec-color-background);
	border: 2px solid var(--psec-color-grey);
	border-radius: 100px;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
	.frame-type-form_formframework .btn:hover,
	.frame-type-form_formframework .btn:focus-visible {
		color: var(--psec-color-white);
		background-color: var(--psec-color-blue);
		border-color: var(--psec-color-blue);
	}
}