/* The support page's header and footer.
 *
 * Loaded only on the support template. Every selector is either prefixed .bps- or parented
 * by one, so nothing here can reach the theme's own markup on any other page -- no bare
 * `nav ul li a`, `header a`, `footer a` or `li`. An over-broad selector is what produced the
 * last mobile-navigation regression.
 *
 * The values are the static site's own, so the two headers are the same header rather than
 * an approximation of it. The typeface is pulled from the static site, which serves it from
 * this same origin, so this adds no third party and no second copy of a font.
 */

@font-face {
	font-family: "BPSSans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url(/fonts/open-sans-latin.woff2) format("woff2-variations");
}
@font-face {
	font-family: "BPSKaushan";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/kaushan-script-400-latin.woff2) format("woff2");
}

.bps-header,
.bps-footer,
.bps-announce {
	--bps-ink: #4B0353;
	--bps-club: #A60CB6;
	--bps-line: #E5D7EC;
	--bps-teal: #4ECAC2;
	font-family: "BPSSans", system-ui, -apple-system, "Segoe UI", sans-serif;
	box-sizing: border-box;
}
.bps-header *,
.bps-footer *,
.bps-announce * { box-sizing: border-box; }

.bps-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- announcement bar ------------------------------------------------------------- */
.bps-announce { background: var(--bps-ink); color: #fff; font-size: 14px; text-align: center; padding: 9px 0; }
.bps-announce .bps-wrap { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; }
.bps-announce a { color: var(--bps-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.bps-announce a:hover { color: #fff; }

/* --- header ----------------------------------------------------------------------- */
.bps-header { background: var(--bps-ink); position: sticky; top: 0; z-index: 50; }
.bps-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 70px; padding: 12px 24px; position: relative; }
.bps-nav > * { min-width: 0; }
.bps-logo { display: flex; align-items: center; flex: none; }
.bps-logo img { height: 42px; width: auto; max-width: 100%; display: block; }

.bps-header nav > ul { display: flex; gap: 26px; align-items: center; list-style: none; margin: 0; padding: 0; }
.bps-header nav ul li { margin: 0; padding: 0; list-style: none; }
.bps-header nav > ul > li { display: flex; align-items: center; }
.bps-header nav > ul > li > a { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: 15px; white-space: nowrap; text-decoration: none; }
.bps-header nav > ul > li > a:hover { color: #fff; }
.bps-header nav > ul > li > a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The Club button is a button, not a row. */
.bps-header .bps-club {
	position: relative; display: inline-block; background: var(--bps-club); color: #fff;
	font-family: "BPSKaushan", cursive; font-size: 24px; line-height: 1.2;
	padding: 8px 24px 10px 18px; border-radius: 12px;
}
.bps-header .bps-club:hover { background: #be08d3; color: #fff; }
.bps-header .bps-new {
	position: absolute; top: -10px; right: -14px; background: #111; color: #fff;
	font-family: "BPSSans", sans-serif; font-size: 11px; font-weight: 700;
	padding: 3px 10px; border-radius: 999px;
}

/* Cart and account keep their own shape: the two controls that stay on WordPress. */
.bps-header .bps-shoplinks { display: flex; align-items: center; gap: 8px; }
.bps-header .bps-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; transition: background .2s;
}
.bps-header .bps-icon:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.bps-header .bps-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- the menu control ------------------------------------------------------------- */
.bps-nav-toggle { display: none; background: none; border: 0; padding: 10px; margin-left: auto; cursor: pointer; color: #fff; }
.bps-nav-toggle__bars,
.bps-nav-toggle__bars::before,
.bps-nav-toggle__bars::after {
	display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.bps-nav-toggle__bars::before,
.bps-nav-toggle__bars::after { content: ""; position: relative; }
.bps-nav-toggle__bars::before { top: -7px; }
.bps-nav-toggle__bars::after { top: 5px; }
.bps-nav-toggle[aria-expanded="true"] .bps-nav-toggle__bars { background: transparent; }
.bps-nav-toggle[aria-expanded="true"] .bps-nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.bps-nav-toggle[aria-expanded="true"] .bps-nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
.bps-nav-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- footer ----------------------------------------------------------------------- */
.bps-footer { background: var(--bps-ink); color: rgba(255, 255, 255, .75); padding: 60px 0 36px; font-size: 15px; }
.bps-fcols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.bps-fcols > * { min-width: 0; }
.bps-fbrand img { height: 40px; width: auto; margin-bottom: 18px; display: block; }
.bps-fbrand p { margin: 0; }
.bps-footer h3 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.bps-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bps-footer li { margin: 0; padding: 0; list-style: none; }
.bps-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; overflow-wrap: anywhere; }
.bps-footer a:hover { color: #fff; text-decoration: underline; }
.bps-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bps-legal {
	border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 26px;
	display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 14px;
}

/* --- narrow screens ---------------------------------------------------------------
 * The panel switches in at 900px rather than the static site's 760px. Between those two
 * widths the full navigation does not fit beside a full-size logo, and the static site
 * resolves that by letting the logo shrink -- at 768px it renders the mark at 81px of its
 * 231px. On a page meant to look like the rest of the site, that trade is the wrong way
 * round, so the menu control appears a little earlier and the mark stays intact.
 */
@media (max-width: 900px) {
	.bps-nav-toggle { display: block; }
	.bps-header nav { position: static; }
	.bps-header nav > ul { display: none; }
	.bps-header nav.bps-open > ul {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 0 14px;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--bps-ink);
		padding: 6px 24px 20px;
		box-shadow: 0 18px 30px rgba(75, 3, 83, .35);
	}
	/* The two icon controls take the top row; everything else spans the panel beneath. */
	.bps-header nav.bps-open > ul > li.bps-shoplinks {
		grid-row: 1; grid-column: 2; justify-self: end; padding: 12px 0 8px;
	}
	.bps-header nav.bps-open > ul > li:not(.bps-shoplinks) { grid-column: 1 / -1; }
	/* Full-width rows are for plain links only -- excluding the Club pill is the point. */
	.bps-header nav.bps-open > ul > li:not(.bps-shoplinks) > a:not(.bps-club) {
		display: block; padding: 13px 0;
	}
	.bps-header nav.bps-open > ul > li > a.bps-club {
		display: inline-block; width: auto; margin: 14px 0 2px; font-size: 22px; padding: 7px 22px 9px 16px;
	}
	.bps-header nav.bps-open > ul > li > a.bps-club .bps-new { top: -9px; right: -10px; }
	.bps-header nav.bps-open > ul > li.bps-shoplinks > a.bps-icon { display: inline-flex; padding: 0; }

	.bps-fcols { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 480px) {
	/* At 320 the full-size mark plus the menu control does not fit between 24px gutters --
	 * the bars ran 16px past the viewport. A narrower gutter and a slightly smaller mark
	 * fit both, rather than letting the logo squash or the row overflow. */
	.bps-nav { padding: 12px 16px; gap: 12px; }
	.bps-logo img { height: 34px; }
	.bps-announce .bps-wrap,
	.bps-footer .bps-wrap { padding: 0 16px; }
	.bps-header nav.bps-open > ul { padding: 6px 16px 20px; }

	.bps-fcols { grid-template-columns: 1fr; }
	.bps-legal { flex-direction: column; gap: 10px; }
}