/* Page clickouts: header button and bottom bar. See inc/clickout.php. */

/* Header button. Sits between the wordmark and the nav, pushed right so it
   ends up beside the menu toggle on phones. */
.pf-head-cta {
	/* WordPress zeroes margins on flex children; auto is what pushes it right. */
	margin-left: auto !important;
	margin-right: 0.75rem !important;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.45rem 0.9rem;
	border-radius: 7px;
	background: var(--wp--preset--color--amber);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.86rem;
	line-height: 1.15;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 0.15s;
}
.pf-head-cta:hover,
.pf-head-cta:focus-visible { background: var(--wp--preset--color--ink); }
.pf-head-cta.pf-ext::after { opacity: 0.85; }
.pf-head-cta-site { font-weight: 400; opacity: 0.85; }
.pf-head-cta-short { display: none; }

@media (max-width: 1100px) {
	.pf-head-cta-site { display: none; }
}
/* Phones: short label so the wordmark, button and toggle fit on one line
   down to 320px. The header and utility bar had no side gutter here at all,
   and the utility bar's two lines wrapped into a 97px block before the page
   even started; the strapline goes, the gutter comes back. */
@media (max-width: 900px) {
	.pf-utility-bar > .alignwide,
	.site-header-wrap > .alignwide { padding-left: 16px !important; padding-right: 16px !important; }
	.pf-utility-bar p { padding: 0.35rem 0; font-size: 0.74rem; }
	.pf-utility-bar p + p { display: none; }
	.site-header-wrap > .alignwide { flex-wrap: nowrap !important; gap: 0.5rem; padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
	.pf-head-cta { margin-right: 0.25rem !important; padding: 0.4rem 0.75rem; font-size: 0.82rem; }
	.pf-head-cta-long { display: none; }
	.pf-head-cta-short { display: inline; }
}
@media (max-width: 400px) {
	.pf-wordmark { font-size: 1.28rem; }
}
/* 320px: measured, wordmark 172 + button 58 + toggle 44 + gaps fits 320. */
@media (max-width: 360px) {
	.pf-utility-bar > .alignwide,
	.site-header-wrap > .alignwide { padding-left: 12px !important; padding-right: 12px !important; gap: 0.375rem; }
	.pf-wordmark { font-size: 1.1rem; }
	.pf-head-cta { margin-right: 0 !important; padding: 0.4rem 0.6rem; font-size: 0.78rem; }
	.pf-head-cta.pf-ext::after { display: none; }
}

/* Bottom bar. Hidden until clickout.js decides it is useful. */
.pf-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	transform: translateY(120%);
	/* Hidden from keyboard and screen readers once it has slid away. */
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.pf-bar[hidden] { display: block; }
.pf-bar.is-on { transform: none; visibility: visible; transition: transform 0.25s ease; }
.pf-bar-inner {
	pointer-events: auto;
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.6rem 0.6rem 1rem;
	border-radius: 11px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	box-shadow: 0 6px 24px rgba(28, 47, 74, 0.28);
}
.pf-bar-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.pf-bar-text strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
}
.pf-bar-text span { font-size: 0.74rem; opacity: 0.75; }
.pf-bar-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: 7px;
	background: var(--wp--preset--color--amber);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none !important;
	white-space: nowrap;
}
.pf-bar-cta:hover,
.pf-bar-cta:focus-visible { background: #fff; color: var(--wp--preset--color--ink) !important; }
.pf-bar-close {
	flex: 0 0 auto;
	width: 32px;
	height: 44px;
	margin-left: -0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	opacity: 0.6;
	font: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.pf-bar-close:hover,
.pf-bar-close:focus-visible { opacity: 1; }

/* Keep the end of the page reachable while the bar is up. */
body.pf-bar-on { padding-bottom: 5.5rem; }

@media (max-width: 420px) {
	.pf-bar { padding-left: 0.5rem; padding-right: 0.5rem; }
	.pf-bar-inner { gap: 0.5rem; padding-left: 0.8rem; }
	.pf-bar-text span { display: none; }
	.pf-bar-text strong { font-size: 0.88rem; }
	.pf-bar-cta { padding: 0 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pf-bar { transition: none; }
}
@media print {
	.pf-bar, .pf-head-cta { display: none !important; }
}