/* Cookie banner: a card in the bottom-right corner on desktop, away from the hero's
   left-aligned heading and phone number; a bar along the bottom on phones. */
.locus-consent {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99990;
	max-width: 400px;
	border-radius: 6px;
	background: #235F73;
	color: #FFFFFF;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.locus-consent[hidden] {
	display: none;
}

.locus-consent__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.locus-consent__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #FFFFFF;
}

.locus-consent__text a {
	color: #FFFFFF;
	text-decoration: underline;
}

.locus-consent__buttons {
	display: flex;
	gap: 12px;
}

/* Reject and Accept look the same, so neither choice is pushed. */
.locus-consent__button {
	flex: 1;
	min-height: 44px;
	padding: 10px 20px;
	border: 2px solid #FFFFFF;
	border-radius: 4px;
	background: #FFFFFF;
	color: #235F73;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.locus-consent__button:hover,
.locus-consent__button:focus-visible {
	background: #45A1C6;
	border-color: #45A1C6;
	color: #FFFFFF;
}

.locus-consent__button:focus-visible,
.locus-consent__text a:focus-visible {
	outline: 3px solid #45A1C6;
	outline-offset: 2px;
}

/* "Privacy and cookie policy" and "Cookie settings" links added to the footer's copyright row. */
.locus-consent-policy {
	margin-left: 12px;
	color: inherit;
	text-decoration: underline;
}

.locus-consent-open {
	margin-left: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Privacy and cookie policy page. It uses the default page template, which has no
   width or padding of its own. The homepage uses that template too, so this targets
   the body class WordPress gives the page chosen in Settings › Privacy. */
.privacy-policy .content-area {
	max-width: 860px;
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.privacy-policy .content-area table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.privacy-policy .content-area th,
.privacy-policy .content-area td {
	padding: 8px 10px;
	border: 1px solid #D5DEE2;
	text-align: left;
	vertical-align: top;
}

.privacy-policy .content-area th {
	background: #EEF4F6;
}

/* Pinned to the visible screen (vw/dvh) rather than bottom: 0, because a page that is
   wider than the phone (e.g. /pigeon-guano/) stretches the area fixed elements sit in,
   which would push the buttons off-screen. */
@media (max-width: 700px) {
	.locus-consent {
		top: 100vh;
		top: 100dvh;
		right: auto;
		bottom: auto;
		left: 0;
		width: 100vw;
		max-width: none;
		transform: translateY(-100%);
		border-radius: 0;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
	}

	.locus-consent__inner {
		gap: 12px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	}

	.locus-consent__text {
		font-size: 14px;
	}

	.privacy-policy .content-area {
		padding: 32px 16px 48px;
	}

	/* Columns size to their words instead of splitting them mid-word; a table that
	   still doesn't fit scrolls sideways inside its block (core gives it overflow-x). */
	.privacy-policy .content-area table {
		table-layout: auto !important;
		font-size: 14px;
	}

	.privacy-policy .content-area th,
	.privacy-policy .content-area td {
		padding: 6px 8px;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: none;
	}
}