/*
 * The questionnaire's old stylesheets (libraries.css, style.css — loaded after
 * this file) were written for browser defaults; the site's Tailwind preflight
 * resets those, and the site's own Input / Textarea / Select / Button bring
 * utility classes. Inside the questionnaire (.mq-root) these rules bring the
 * browser defaults back and neutralise the utilities — each with the
 * specificity of what it replaces, so wherever the old stylesheet sets a
 * property it still wins ("revert" = the browser's default value).
 */

/* -------- browser defaults (Tailwind preflight undone). This file is only
   loaded by the questionnaire pages; body / html stay at element specificity
   so the old stylesheet's own body rules (e.g. margin 0 on phones) win. */
body {
	color: revert;
	margin: revert;
	/* the site's overflow-x: hidden makes <body> its own scroller: a focused
	   field then scrolls it, and the step change's scroll to the top (the
	   window) leaves it there */
	overflow-x: revert;
}
html {
	scroll-behavior: auto;
	line-height: revert;
	font-family: revert;
	font-feature-settings: revert;
	font-variation-settings: revert;
	tab-size: revert;
	-webkit-tap-highlight-color: revert;
}
:where(.mq-root) *,
:where(.mq-root) ::before,
:where(.mq-root) ::after {
	box-sizing: revert;
	border-width: revert;
	border-style: revert;
	border-color: revert;
}
:where(.mq-root) :is(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre) {
	margin: revert;
}
:where(.mq-root) :is(h1, h2, h3, h4, h5, h6) {
	font-size: revert;
	font-weight: revert;
}
:where(.mq-root) :is(b, strong) {
	font-weight: revert;
}
:where(.mq-root) :is(ol, ul, menu) {
	list-style: revert;
	margin: revert;
	padding: revert;
}
:where(.mq-root) :is(img, svg, video, canvas, audio, iframe, embed, object) {
	display: revert;
	vertical-align: revert;
}
:where(.mq-root) :is(img, video) {
	max-width: revert;
	height: revert;
}
:where(.mq-root) :is(button, input, optgroup, select, textarea) {
	font-family: revert;
	font-size: revert;
	font-weight: revert;
	line-height: revert;
	letter-spacing: revert;
	color: revert;
	margin: revert;
	padding: revert;
}
:where(.mq-root) :is(button, [type="button"], [type="reset"], [type="submit"]) {
	-webkit-appearance: revert;
	appearance: revert;
	background-color: revert;
	background-image: revert;
	cursor: revert;
}
:where(.mq-root) a {
	color: revert;
	text-decoration: revert;
}
/* preflight sets these with input::placeholder (two selectors deep) */
:where(.mq-root) input::placeholder,
:where(.mq-root) textarea::placeholder {
	color: revert;
	opacity: revert;
}

/* the old page's .container, not Tailwind's (width: 100% + the old padding
   would overflow a phone) */
:where(.mq-root) .container {
	width: auto;
}

/* -------- the site's Input / Textarea: layout-neutral wrappers, old field */
:where(.mq-root) .mq-field,
:where(.mq-root) .mq-field > .relative {
	display: contents;
}
:where(.mq-root) .mq-control {
	font-family: revert;
	line-height: revert;
	color: revert;
	transition: none;
}
:where(.mq-root) input.mq-control:focus,
:where(.mq-root) textarea.mq-control:focus {
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}
/* the old "textarea { … }" rules (element selectors lose to the utilities) */
:where(.mq-root) textarea.mq-control {
	color: #264260;
	background: rgba(0, 0, 0, 0);
	width: 100%;
	border-radius: 14px;
	border: 2px solid #a2a2a2;
	padding: 20px;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
	font-size: revert;
	resize: revert;
}
@media screen and (max-width: 800px) {
	:where(.mq-root) textarea.mq-control {
		background-color: #fff !important;
		width: 100%;
		padding: 0.6375rem 1rem;
		font-size: 1rem;
	}
}

/* -------- the site's Button: its label (a <p>) takes the old button's text */
:where(.mq-root) .sw-btn,
:where(.mq-root) .button,
:where(.mq-root) .custom-skip-button {
	display: revert;
	gap: 0;
	place-items: revert;
	place-content: revert;
	grid-template-columns: revert;
	font-weight: revert;
	color: revert;
	background-color: revert;
	transition: revert;
	width: revert;
}
:where(.mq-root) .sw-btn > p,
:where(.mq-root) .button > p {
	display: inline;
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	cursor: inherit;
}

/* -------- the site's Select as select2 (closed box, open list) */
:where(.mq-root) .select2-selection {
	line-height: revert;
	transition: none;
	font-family: revert;
	/* disabled: select2's gray box (.select2-container--disabled), not a fade */
	opacity: revert;
	cursor: revert;
}
:where(.mq-root) .select2-container .select2-selection--single .select2-selection__rendered {
	display: block;
}
:where(.mq-root) .mq-select-menu {
	top: 100%;
	margin-top: 4px;
	padding: 0;
	gap: 0;
	display: block;
	max-height: 300px;
	background-color: #fbf6f0;
	border: 2px solid #05c2df;
	border-radius: 14px;
	box-shadow: none;
	overflow: auto;
	z-index: 1051;
	list-style: none;
}
:where(.mq-root) .mq-select-item {
	display: block;
	place-content: normal;
	place-items: normal;
	padding: 6px;
	border-radius: 0;
	background-color: transparent;
	text-align: center;
	font-weight: 600;
	color: #264260;
	font-size: 1rem;
	transition: none;
	user-select: none;
}
/* select2's highlighted (hovered) and selected rows: style.css gives both
   the same light cyan over select2's own #5897fb / #ddd */
:where(.mq-root) .mq-select-item:hover,
:where(.mq-root) .mq-select-item[aria-selected="true"] {
	background: rgba(5, 194, 223, 0.2);
	color: #264260;
}

/* -------- the header language switch (a native select as a navy pill) */
:where(.mq-root) .mq-lang {
	width: auto;
	display: inline-block;
}
:where(.mq-root) .pll-switcher-select {
	display: inline-block;
	font-family: Arial, sans-serif;
	/* the native select's box: its text line is Arial's rounded ascent +
	   descent (25px at 22.5px), its width the widest label's ("English" /
	   "Deutsch": 151px) — a hair over, so layout does not round them down */
	line-height: 1.11112;
	width: 6.7112em;
	box-sizing: border-box;
	white-space: nowrap;
	transition: none;
}
:where(.mq-root) .mq-lang-labels {
	display: inline-grid;
}
:where(.mq-root) .mq-lang-labels > span {
	grid-area: 1 / 1;
}
:where(.mq-root) .mq-lang-menu {
	right: 0;
	width: max-content;
	min-width: 100%;
	padding: 4px 0;
	gap: 0;
	display: block;
	border-radius: 14px;
	border: 1px solid #264260;
	background-color: #fff;
	z-index: 1051;
}
:where(.mq-root) .mq-lang-menu .mq-select-item {
	font-family: Arial, sans-serif;
	font-size: 1rem;
	padding: 6px 20px;
}

/* -------- the site's Select as intl-tel-input's flag box */
:where(.mq-root) .mq-iti .iti__selected-flag {
	border: 0;
	padding: 0 6px 0 8px;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	justify-content: normal;
	transition: none;
}
:where(.mq-root) .mq-iti-menu {
	/* where it falls after the flag button, as intl-tel-input's list: inside
	   the flag box's padding */
	top: auto;
	left: auto;
	width: auto;
	margin: 0 0 0 -1px;
	padding: 0;
	gap: 0;
	display: block;
	border-radius: 0;
	max-height: 200px;
}
:where(.mq-root) .mq-iti-menu .iti__country {
	display: flex;
	align-items: center;
	place-content: normal;
	justify-items: normal;
	color: inherit;
	font-weight: inherit;
	border-radius: 0;
	padding: 5px 10px;
	background-color: transparent;
	transition: none;
}
:where(.mq-root) .mq-iti-menu .iti__country:hover,
:where(.mq-root) .mq-iti-menu .iti__country[aria-selected="true"] {
	background-color: rgba(0, 0, 0, 0.05);
}
/* .iti__highlight follows the mouse: off the chosen country meanwhile */
:where(.mq-root) .mq-iti-menu:hover .iti__country[aria-selected="true"]:not(:hover) {
	background-color: transparent;
}
/* li.iti__divider after the preferred countries: 5px, a 1px #ccc line, 5px */
:where(.mq-root) .mq-iti-menu .mq-iti-divider {
	position: relative;
	margin-bottom: 11px;
}
:where(.mq-root) .mq-iti-menu .mq-iti-divider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	border-bottom: 1px solid #ccc;
}
/* .iti__arrow--up while the list is open */
:where(.mq-root) .mq-iti-open .iti__arrow {
	border-top: 0;
	border-bottom: 4px solid #555;
}
/* on a phone (.iti-mobile): the list in .iti--container, fixed 30px from the
   screen's top / bottom / left; style.css's .iti { width: 100% !important }
   also widens that container, so it runs off the right edge */
:where(.mq-root) .mq-iti-mobile .mq-iti-menu {
	position: fixed;
	top: 31px;
	left: 30px;
	width: 100%;
	max-height: calc(100% - 60px);
	margin: 0;
	z-index: 1060;
}
:where(.mq-root) .mq-iti-mobile .mq-iti-menu .iti__country {
	padding: 10px;
	line-height: 1.5em;
}

/* -------- old jQuery animations: .fadeIn() (400ms swing ≈ ease-in-out),
   the first step's fade-in on load */
@keyframes mq-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
:where(.mq-root) .mq-fade-in,
:where(.mq-root) .mq-first-paint {
	animation: mq-fade-in 0.4s ease-in-out both;
}