/* ---------- Cookie consent ----------
   Built from what the site already uses rather than a new look: the footer's
   navy, the gold gradient buttons (the --lm-btn-gold-* tokens), DM Sans for
   headings and Inter for text, and the licence dialog's overlay, panel and
   gold close button for the settings dialog.

   Button rules carry two classes plus the state so they outrank the reset
   stylesheet, whose generic button:focus fill otherwise paints them crimson. */

/* ---------- Banner ---------- */
.lm-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	background: #011735;
	border-top: 3px solid #dfa33e;
	box-shadow: 0 -10px 30px rgba( 2, 10, 26, 0.28 );
	color: #ffffff;
}

.lm-consent[hidden] {
	display: none !important;
}

.lm-consent__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px;
}

.lm-consent__text {
	flex: 1 1 auto;
	min-width: 0;
}

.lm-consent__title {
	margin: 0 0 6px;
	font-family: "DM Sans", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
}

.lm-consent__body {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.86 );
}

.lm-consent .lm-consent__policy,
.lm-consent-dialog .lm-consent__policy {
	color: #dfa33e;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.lm-consent .lm-consent__policy:hover,
.lm-consent-dialog .lm-consent__policy:hover {
	color: #f1c56a;
}

.lm-consent__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
}

/* ---------- Buttons ---------- */
.lm-consent .lm-consent__btn,
.lm-consent-dialog .lm-consent__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 11px 20px;
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lm-consent .lm-consent__btn:focus-visible,
.lm-consent-dialog .lm-consent__btn:focus-visible {
	outline: 2px solid #dfa33e;
	outline-offset: 2px;
}

/* Accept: the site's gold button. */
.lm-consent .lm-consent__btn--accept,
.lm-consent .lm-consent__btn--accept:hover,
.lm-consent .lm-consent__btn--accept:focus,
.lm-consent-dialog .lm-consent__btn--accept,
.lm-consent-dialog .lm-consent__btn--accept:hover,
.lm-consent-dialog .lm-consent__btn--accept:focus {
	background: linear-gradient( var( --lm-btn-gold-angle, 59deg ), var( --lm-btn-gold-stops, #c49c3f 0%, #e6d181 55%, #b58b2d 100% ) );
	color: var( --lm-btn-gold-label, #6a4a09 );
	border-color: transparent;
	box-shadow: var( --lm-btn-gold-rim, inset 0 0 0 1px rgba( 120, 86, 14, 0.45 ) );
}

.lm-consent .lm-consent__btn--accept:hover,
.lm-consent-dialog .lm-consent__btn--accept:hover {
	filter: brightness( 1.05 );
}

/* Reject on the navy banner: as prominent as Accept, as guidance expects. */
.lm-consent .lm-consent__btn--reject,
.lm-consent .lm-consent__btn--reject:focus {
	background: transparent;
	color: #ffffff;
	border-color: rgba( 255, 255, 255, 0.72 );
}

.lm-consent .lm-consent__btn--reject:hover {
	background: #ffffff;
	color: #011735;
	border-color: #ffffff;
}

/* Settings on the banner: a quieter text button. */
.lm-consent .lm-consent__btn--link,
.lm-consent .lm-consent__btn--link:focus {
	padding-left: 8px;
	padding-right: 8px;
	background: transparent;
	color: #ffffff;
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lm-consent .lm-consent__btn--link:hover {
	background: transparent;
	color: #dfa33e;
}

/* In the white dialog. */
.lm-consent-dialog .lm-consent__btn--outline,
.lm-consent-dialog .lm-consent__btn--outline:focus {
	background: #ffffff;
	color: #011735;
	border-color: #011735;
}

.lm-consent-dialog .lm-consent__btn--outline:hover {
	background: #011735;
	color: #ffffff;
}

.lm-consent-dialog .lm-consent__btn--navy,
.lm-consent-dialog .lm-consent__btn--navy:focus {
	background: #011735;
	color: #ffffff;
	border-color: #011735;
}

.lm-consent-dialog .lm-consent__btn--navy:hover {
	background: #0c2a5c;
	border-color: #0c2a5c;
	color: #ffffff;
}

/* Room at the foot of the page while the banner is up. */
html.lm-consent-open body {
	padding-bottom: var( --lm-consent-space, 0px );
}

/* ---------- Settings dialog ---------- */
.lm-consent-dialog {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 2, 10, 26, 0.72 );
}

.lm-consent-dialog[hidden] {
	display: none !important;
}

.lm-consent-dialog__panel {
	position: relative;
	width: min( 640px, 100% );
	max-height: 86vh;
	overflow-y: auto;
	padding: 36px 40px 34px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.45 );
	scrollbar-width: thin;
	scrollbar-color: #9aa3c4 #eef0f7;
}

/* Centred on the title's first line: the panel's top padding, plus half
   the title's line box (26px at 1.2), less half the button's 34px. Phones
   restate it for their own padding and title size below. */
.lm-consent-dialog .lm-consent-dialog__close {
	position: absolute;
	top: calc( 36px + 26px * 1.2 / 2 - 17px );
	right: 16px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	/* The cross is drawn, not typed: the × character sits below the middle
	   of its own line in the system font, so centring the character still
	   left the mark low in the box. Two bars pinned to the exact centre, as the
	   licence dialog's close button does. The character stays in the markup
	   for readers without styles; the button's aria-label names it. */
	font-size: 0;
	line-height: 1;
	color: #dfa33e;
	background: #ffffff;
	border: 1px solid #dfa33e;
	border-radius: 3px;
	cursor: pointer;
}

.lm-consent-dialog .lm-consent-dialog__close::before,
.lm-consent-dialog .lm-consent-dialog__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 1px;
	background: currentColor;
}

.lm-consent-dialog .lm-consent-dialog__close::before {
	transform: rotate( 45deg );
}

.lm-consent-dialog .lm-consent-dialog__close::after {
	transform: rotate( -45deg );
}

/* Filled, it takes the About page's "Click here to view license details"
   gold as that button renders it: the brushed gold re-angled to 133deg, its
   dark label colour for the cross, and its 2px inset rim - both set here on
   the button, as that one sets them on itself. The border goes transparent so the
   flat #dfa33e line does not frame the gradient; it keeps its 1px, so the
   box does not change size. The dialog focuses this button as it opens, so
   this is also how it first appears.

   On a button this small the full-strength gold read as a dark block beside
   the title, so a 30% white veil is laid over the same gradient - lighter,
   with the brushed highlights still showing through - and the rim eases
   from 0.6 to 0.35. */
.lm-consent-dialog .lm-consent-dialog__close:hover,
.lm-consent-dialog .lm-consent-dialog__close:focus {
	--lm-btn-gold-angle: 133deg;
	--lm-btn-gold-rim: inset 0 0 0 2px rgba( 120, 86, 14, 0.35 );
	background:
		linear-gradient( rgba( 255, 255, 255, 0.3 ), rgba( 255, 255, 255, 0.3 ) ),
		linear-gradient( var( --lm-btn-gold-angle ), var( --lm-btn-gold-stops ) );
	border-color: transparent;
	color: var( --lm-btn-gold-label );
	box-shadow: var( --lm-btn-gold-rim );
}

.lm-consent-dialog__title {
	margin: 0 44px 16px 0;
	font-family: "DM Sans", sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	color: #011735;
}

.lm-consent-dialog__rule {
	margin: 0 0 18px;
	border: 0;
	border-top: 1px solid #e7e9ee;
}

.lm-consent-dialog__intro {
	margin: 0 0 20px;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #3d4a5c;
}

.lm-consent-dialog .lm-consent__policy {
	color: #b58b2d;
}

.lm-consent-dialog__categories {
	display: grid;
	gap: 12px;
}

.lm-consent-cat {
	padding: 16px 18px;
	background: #f7f8fa;
	border: 1px solid #e7e9ee;
	border-radius: 8px;
}

.lm-consent-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lm-consent-cat__name {
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #011735;
	cursor: pointer;
}

.lm-consent-cat__always {
	flex-shrink: 0;
	padding: 4px 10px;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #8a5a0a;
	background: #fdf4e3;
	border-radius: 999px;
}

.lm-consent-cat__input--hidden {
	display: none;
}

.lm-consent-cat__desc {
	margin: 8px 0 0;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #555555;
}

/* The switch is a real checkbox laid over its track, so it keeps keyboard,
   label and screen-reader behaviour for free. */
.lm-consent-switch {
	position: relative;
	flex-shrink: 0;
	width: 46px;
	height: 26px;
}

.lm-consent-switch__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.lm-consent-switch__track {
	position: absolute;
	inset: 0;
	background: #c9cfdb;
	border-radius: 999px;
	transition: background-color 0.18s ease;
}

.lm-consent-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.18s ease;
}

.lm-consent-switch__input:checked + .lm-consent-switch__track {
	background: #011735;
}

.lm-consent-switch__input:checked + .lm-consent-switch__track::after {
	transform: translateX( 20px );
}

.lm-consent-switch__input:focus-visible + .lm-consent-switch__track {
	outline: 2px solid #dfa33e;
	outline-offset: 2px;
}

.lm-consent-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 24px;
}

/* ---------- Footer link ---------- */
.lm-cookie-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Gold under the pointer and for keyboard focus only. Closing the dialog
   hands focus back to this link, as a dialog should, and with plain :focus
   that left it gold after a mouse click until something else was clicked.
   :focus-visible holds for the keyboard - where the gold marks the way back -
   and lets the link return to white for everyone else. */
.lm-cookie-link:hover,
.lm-cookie-link:focus-visible {
	color: #dfa33e;
}

/* On phones the footer strip's list (9990bc7) centres each line. The
   copyright wraps across the full width and so starts at the edge, but
   "Cookie Settings" is short and sat in the middle above it. Both lines
   start at the same left edge instead, the link above the copyright. Phones
   only: tablet and desktop already align the two at the start. The
   .elementor-mobile-align-center class is named so this outranks the
   widget's own centring at the same breakpoint. */
@media ( max-width: 767px ) {
	.elementor-element.elementor-element-9990bc7.elementor-mobile-align-center .elementor-icon-list-item {
		justify-content: flex-start;
		text-align: start;
	}
}

/* ---------- Tablet and below ---------- */
@media ( max-width: 1024px ) {
	.lm-consent__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.lm-consent__actions {
		flex-wrap: wrap;
	}
}

/* ---------- Phone ---------- */
@media ( max-width: 767px ) {
	.lm-consent__inner {
		padding: 16px 16px 18px;
		gap: 12px;
	}

	.lm-consent__title {
		font-size: 15px;
	}

	.lm-consent__body {
		font-size: 13px;
	}

	/* Accept and Reject side by side and equal, Settings full width below. */
	.lm-consent__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.lm-consent .lm-consent__btn {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 13px;
		white-space: normal;
		text-align: center;
	}

	.lm-consent .lm-consent__btn--link {
		grid-column: 1 / -1;
		min-height: 36px;
	}

	.lm-consent-dialog {
		padding: 12px;
		align-items: flex-end;
	}

	.lm-consent-dialog__panel {
		max-height: 92vh;
		padding: 28px 18px 22px;
	}

	.lm-consent-dialog__title {
		font-size: 21px;
	}

	.lm-consent-dialog .lm-consent-dialog__close {
		top: calc( 28px + 21px * 1.2 / 2 - 17px );
	}

	.lm-consent-dialog__intro {
		font-size: 14px;
	}

	.lm-consent-dialog__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}