/*
 * Securdia Cookies: how the cookie banner looks.
 *
 * The class names are the ones G-Cookies used (see templates/banner.php). The look matches the
 * current banner: a dark see-through layer over the page with a white box in the middle.
 */

.g-cookies {
	--securdia-cookies-text: #333;
	--securdia-cookies-blue: #0067e4;
	--securdia-cookies-dark-blue: #0048a0;
	--securdia-cookies-border: #cbcbcb;
	--securdia-cookies-light-grey: #f5f5f5;
	--securdia-cookies-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ---------------------------------------------------------------- the window */

/* The dialog covers the whole browser window. It fades in when the script adds "opened". */
.g-cookies {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	border: none;
	overflow-y: auto;
	opacity: 0;
	background-color: rgba(51, 51, 51, 0);
	font-family: var(--securdia-cookies-font);
	transition: opacity 0.4s ease, background-color 0.4s ease;
}

.g-cookies[open] {
	display: flex;
	flex-direction: column;
}

.g-cookies.opened {
	opacity: 1;
	background-color: rgba(51, 51, 51, 0.5);
}

/* The dialog paints its own dark layer, so the browser's default one is switched off. */
.g-cookies::backdrop {
	display: none;
}

/* Centres the white box vertically when there is room, and lets it scroll when there isn't. */
.g-cookies .g-cookies-container {
	margin: auto 0;
}

.g-cookies .g-cookies-wrapper {
	display: flex;
	flex-direction: column;
	width: 95%;
	max-width: 620px;
	margin: 20px auto;
}

.g-cookies .g-cookies-inner {
	margin-top: auto;
	margin-bottom: auto;
	background-color: #fff;
}

.g-cookies p {
	font-family: var(--securdia-cookies-font);
}

/* Text only for screen readers. */
.g-cookies .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ---------------------------------------------------------------- intro */

.g-cookies .g-cookies-intro {
	padding: 32px 32px 24px;
}

.g-cookies .g-cookies-intro .g-cookies-headline {
	margin: 0;
	padding: 0 0 14px;
	color: var(--securdia-cookies-text);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

.g-cookies .g-cookies-intro p {
	margin: 0;
	padding: 0 0 20px;
	color: var(--securdia-cookies-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

.g-cookies .g-cookies-intro p:last-child {
	padding-bottom: 0;
}

.g-cookies .g-cookies-intro a {
	color: var(--securdia-cookies-text);
	font-weight: 500;
	text-decoration: underline;
}

.g-cookies .g-cookies-intro a:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------------- categories */

.g-cookies .g-cookies-settings .g-cookies-settings-inner {
	padding: 24px 32px;
	background-color: var(--securdia-cookies-light-grey);
}

.g-cookies .g-cookies-settings .g-cookies-settings-inner .g-cookies-headline {
	margin: 0;
	padding: 0 0 14px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

/* The categories form one list with a shared border. */
.g-cookies .g-cookies-setting {
	border: 1px solid var(--securdia-cookies-border);
	background-color: #fff;
}

.g-cookies .g-cookies-setting + .g-cookies-setting {
	border-top: none;
}

/* The right padding leaves room for the switch. */
.g-cookies .g-cookies-setting-heading {
	position: relative;
	padding: 12px 70px 12px 12px;
}

.g-cookies .g-cookies-setting-heading-label {
	margin: 0;
	padding: 0;
	color: var(--securdia-cookies-text);
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

.g-cookies .g-cookies-setting-heading fieldset {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/* The small arrow before each category name: points down when closed, up when open. */
.g-cookies .g-cookies-setting-heading-icon {
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

/* The arrow is two short bars tilted towards each other, forming a "v". */
.g-cookies .g-cookies-setting-heading-icon::before,
.g-cookies .g-cookies-setting-heading-icon::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 8px;
	width: 2px;
	height: 8px;
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
	background-color: var(--securdia-cookies-text);
	transition: transform 0.4s ease;
}

/* Left half of the "v": tilts left around its bottom-left corner. */
.g-cookies .g-cookies-setting-heading-icon::before {
	transform-origin: bottom left;
	transform: rotate(-45deg);
}

/* Right half of the "v": tilts right around its bottom-right corner. */
.g-cookies .g-cookies-setting-heading-icon::after {
	transform-origin: bottom right;
	transform: rotate(45deg) translate(-1px, 1px);
}

/* Open category: both halves turn over, so the arrow points up. */
.g-cookies .g-cookies-setting.active .g-cookies-setting-heading-icon::before {
	transform: rotate(-135deg) translate(4px, 6px);
}

.g-cookies .g-cookies-setting.active .g-cookies-setting-heading-icon::after {
	transform: rotate(135deg) translate(-3px, 7px);
}

/* The on/off switch. The real checkbox is hidden; its label is drawn as the switch. */
.g-cookies .g-cookies-setting-heading input[type="checkbox"] {
	display: none;
}

.g-cookies .g-cookies-setting-heading input[type="checkbox"] + label {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-block;
	width: 48px;
	height: 26px;
	border-radius: 16px;
	background-color: var(--securdia-cookies-border);
	cursor: pointer;
	transition: background-color 0.4s ease, opacity 0.4s ease;
}

/* The round knob inside the switch. */
.g-cookies .g-cookies-setting-heading input[type="checkbox"] + label::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background-color: #fff;
	transition: transform 0.4s ease;
}

.g-cookies .g-cookies-setting-heading input[type="checkbox"]:checked + label {
	background-color: var(--securdia-cookies-blue);
}

.g-cookies .g-cookies-setting-heading input[type="checkbox"]:checked + label::before {
	transform: translateX(22px);
}

/* A locked switch ("Necessary cookies") is shown faded. */
.g-cookies .g-cookies-setting-heading input[type="checkbox"]:disabled + label {
	opacity: 0.4;
	cursor: not-allowed;
}

.g-cookies .g-cookies-setting-heading input[type="checkbox"]:disabled + label::before {
	cursor: not-allowed;
}

/* The description that opens below a category. */
.g-cookies .g-cookies-setting-body {
	box-sizing: border-box;
	overflow: hidden;
	padding: 12px 36px;
	border-top: 1px solid var(--securdia-cookies-light-grey);
	color: var(--securdia-cookies-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}

.g-cookies .g-cookies-setting-body[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- buttons */

.g-cookies .g-cookies-settings .g-cookies-settings-footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 24px 32px;
}

.g-cookies .g-cookies-settings .g-cookies-settings-acceptance {
	display: flex;
	gap: 10px;
}

.g-cookies .g-cookies-btn {
	display: inline-block;
	padding: 14px 20px;
	border-radius: 4px;
	color: var(--securdia-cookies-text);
	font-family: var(--securdia-cookies-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: all 0.2s ease;
}

.g-cookies .g-cookies-btn.g-cookies-btn-primary {
	border: 1px solid transparent;
	background-color: var(--securdia-cookies-blue);
	color: #fff;
}

.g-cookies .g-cookies-btn.g-cookies-btn-primary:hover,
.g-cookies .g-cookies-btn.g-cookies-btn-primary:focus {
	background-color: var(--securdia-cookies-dark-blue);
	cursor: pointer;
}

/* ---------------------------------------------------------------- small screens */

@media only screen and (max-width: 600px) {
	.g-cookies .g-cookies-btn {
		padding: 8px 12px;
		font-size: 14px;
	}

	.g-cookies .g-cookies-intro {
		padding: 14px;
	}

	.g-cookies .g-cookies-intro .g-cookies-headline {
		padding-bottom: 8px;
		font-size: 22px;
	}

	.g-cookies .g-cookies-intro p {
		font-size: 14px;
	}

	.g-cookies .g-cookies-settings .g-cookies-settings-inner {
		padding: 14px;
	}

	.g-cookies .g-cookies-settings .g-cookies-settings-inner .g-cookies-headline {
		padding-bottom: 8px;
		font-size: 18px;
	}

	.g-cookies .g-cookies-settings .g-cookies-settings-footer {
		padding: 14px;
	}

	.g-cookies .g-cookies-setting-heading-label,
	.g-cookies .g-cookies-setting-body {
		font-size: 14px;
	}
}