/* Loaded after the Hello theme's reset.css, whose button rules have equal or higher specificity. */
.tpm-header .tpm-menu-toggle {
	display: none;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	padding: 0;
	color: #000000;
	background: transparent;
	border: 1px solid #e4e4e4;
	border-radius: 4px;
}

.tpm-header .tpm-menu-toggle:hover,
.tpm-header .tpm-menu-toggle:focus {
	color: #000000;
	background: #f3f5f9;
	border-color: #0d46b6;
}

.tpm-form .tpm-form__submit,
.tpm-form .tpm-form__submit:focus {
	color: #ffffff;
	background: #0055ff;
	border: 2px solid #0055ff;
	border-radius: 4px;
}

.tpm-form .tpm-form__submit:hover {
	color: #ffffff;
	background: #032d7f;
	border-color: #032d7f;
}

.tpm-form .tpm-form__submit:focus-visible {
	outline: 3px solid #032d7f;
	outline-offset: 3px;
}

/* Site fonts: Manrope for headings and the wordmark, Inter for text. */
.tpm-header,
.tpm-footer,
.tpm-enquiry {
	--tpm-serif: "Manrope", Arial, sans-serif;
	--tpm-sans: "Inter", Arial, sans-serif;
}

.tpm-skip,
.tpm-table {
	font-family: "Inter", Arial, sans-serif;
}

.tpm-brand__name {
	font-weight: 800;
	letter-spacing: -0.03em;
}

.tpm-enquiry__title {
	font-weight: 800;
	letter-spacing: -0.025em;
}

/* Header row: emblem, "Tobique Prediction Market Authority" wordmark, eight menu items and the
   button need about 1,300px, so the header is wider than the page content and switches to
   the menu button below 1,366px. */
.tpm-header .tpm-header__inner {
	max-width: 88rem;
	gap: 1.5rem;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

/* Centre the menu in the space between the wordmark and the Apply button (chrome.css already
   sets margin-left: auto, which on its own pushes the menu against the button). */
.tpm-header .tpm-nav {
	margin-right: auto;
}

.tpm-header .tpm-nav__list {
	gap: 0;
}

.tpm-header .tpm-nav__link {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font-size: 0.875rem;
}

.tpm-header .tpm-nav__link::after {
	left: 0.5rem;
	right: 0.5rem;
}

.tpm-header .tpm-header__cta {
	padding-left: 1.125rem;
	padding-right: 1.125rem;
	font-size: 0.875rem;
}

@media (max-width: 1365px) {
	.tpm-header .tpm-nav,
	.tpm-header .tpm-header__cta {
		display: none;
	}

	.tpm-header .tpm-menu-toggle {
		display: inline-flex;
	}

	.tpm-header .tpm-mobile:not([hidden]) {
		display: block;
	}
}

/* Neqotkuk emblem beside the wordmark. The rule moves from the link to the text block. */
.tpm-header .tpm-brand,
.tpm-footer .tpm-brand {
	flex-direction: row;
	align-items: center;
	gap: 0.875rem;
	padding: 0;
	border-left: 0;
}

.tpm-brand__mark {
	display: flex;
	flex-shrink: 0;
}

.tpm-brand__logo {
	display: block;
	width: auto;
	height: 4rem;
}

.tpm-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1;
	padding: 0.125rem 0 0.125rem 0.75rem;
	border-left: 3px solid #0d46b6;
}

.tpm-footer .tpm-brand__text {
	border-left-color: #f0ae0d;
}

.tpm-footer .tpm-brand__mark {
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	padding: 0.5rem;
	background: #ffffff;
	border-radius: 6px;
}

.tpm-footer .tpm-brand__logo {
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	/* Let the wordmark shrink, and the second line wrap on very narrow phones, so the
	   menu button always stays on screen. */
	.tpm-header .tpm-brand {
		flex-shrink: 1;
		min-width: 0;
		gap: 0.625rem;
	}

	.tpm-header .tpm-brand__logo {
		height: 3.25rem;
	}

	/* 11px keeps "Prediction Market Authority" on one line on phones 375px and wider. */
	.tpm-header .tpm-brand__sub {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
		line-height: 1.3;
	}

	/* The footer has room for a larger second line. */
	.tpm-footer .tpm-brand__sub {
		font-size: 0.75rem;
	}

	.tpm-header .tpm-header__inner {
		gap: 1rem;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	/* The cookie settings and accessibility buttons float in the bottom-right corner. Keep the
	   copyright line and policy links clear of them, and lift the footer columns above them
	   when the page is scrolled to the end. */
	.tpm-footer .tpm-footer__bar-inner {
		padding-right: 5rem;
		padding-bottom: 3rem;
	}
}

/* FAQ accordion: Elementor's icon slot renders empty without an uploaded SVG,
   so draw a plus that turns into a cross when the question is open. */
.tpm-faq-header::-webkit-details-marker {
	display: none;
}

.tpm-faq-header > .e-accordion-item-icon-base,
.tpm-faq-header > [data-element_type="e-accordion-item-icon"] {
	display: none;
}

.tpm-faq-header::after {
	content: "";
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin-left: auto;
	border-radius: 50%;
	background: #f3f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23032D7F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

details[open] > .tpm-faq-header::after {
	transform: rotate(45deg);
	background-color: #0d46b6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

details[open] > .tpm-faq-header {
	background-color: #f3f5f9;
}

.tpm-faq-a ul {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
}

.tpm-faq-a li + li {
	margin-top: 0.375rem;
}

/* Elementor interactions ignore reduced-motion preferences. Important declarations outrank
   running animations in the cascade, so elements always show in their final state. */
@media (prefers-reduced-motion: reduce) {
	[data-interaction-id] {
		opacity: 1 !important;
		transform: none !important;
	}
}