/*
 * Pricing page.
 *
 * The currency switch is the only interesting part. Two radio inputs and
 * `body:has(:checked)` - every price is written twice and one is hidden. No
 * JavaScript, so there is nothing for WP Rocket to defer, no flash of the wrong
 * currency before a script runs, and it still works inside the block editor
 * where marketing will be looking at it.
 *
 * `:has()` on `body` rather than a sibling selector because the prices are
 * spread across five full-bleed sections. A `~` selector would need every one of
 * them inside a single container, which would break the alignfull section
 * pattern the rest of the site uses.
 */

/* --- The switch --------------------------------------------------------- */
.wg-curswitch {
	display: flex;
	align-items: center;
	gap: 2px;
	width: fit-content;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 3px;
	min-width: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
}
.wg-curswitch-legend {
	/* Announced, not drawn - the two labels already say what this is. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.wg-curswitch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.wg-curswitch label {
	display: block;
	padding: .35rem 1rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .06em;
	color: #cfd6e8;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wg-curswitch label:hover { color: #fff; }
.wg-curswitch input:checked + label {
	background: var(--wp--preset--color--accent);
	color: #fff;
}
/* Keyboard focus has to be visible even though the input itself is not. */
.wg-curswitch input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--accent-bright);
	outline-offset: 2px;
}

/* --- Which currency shows ---------------------------------------------- */
.wg-cur--gbp { display: none; }
body:has(#wg-cur-gbp:checked) .wg-cur--aud { display: none; }
body:has(#wg-cur-gbp:checked) .wg-cur--gbp { display: inline; }

/* --- Hero price card --------------------------------------------------- */
/*
 * `.wg-hero-media` is a flex box whose children are forced to width:100% - it
 * exists to make a screenshot fill the column. Here it holds a card and the
 * switch, so it reverts to normal flow; without this the fieldset stretched to
 * the column's full height and its 999px radius drew a large empty oval beside
 * the price.
 */
.wg-pricecard-wrap { display: block; }
.wg-pricecard-wrap > * { width: auto; }
/* ...but the switch hugs its two labels rather than filling the column. */
.wg-pricecard-wrap > .wg-curswitch { width: fit-content; }

.wg-pricecard {
	padding: var(--wp--preset--spacing--70);
	border: 2px solid rgba(255, 255, 255, .18);
	border-radius: 15px;
	background: rgba(255, 255, 255, .05);
}
.wg-pricecard-label {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-bright);
}
.wg-pricecard-figure {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1;
	color: #fff;
}
.wg-pricecard-per {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: #cfd6e8;
	margin-left: .35rem;
}
.wg-pricecard-note {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: #cfd6e8;
}

/* --- What's included --------------------------------------------------- */
.wg-included {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: min(100%, var(--wg-col, 1180px));
	margin: var(--wp--preset--spacing--70) auto 0;
}
.wg-included-item {
	padding: .55rem 1rem;
	border: 2px solid var(--wp--preset--color--card-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text-strong);
}

/* --- Add-on and onboarding cards --------------------------------------- */
.wg-addon { display: flex; flex-direction: column; }
.wg-addon-price {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-md);
	line-height: 1;
	color: var(--wp--preset--color--accent-deep);
}
.wg-addon .wg-bullets { margin-block-start: var(--wp--preset--spacing--50); }

/* --- Worked examples table --------------------------------------------- */
.wg-eg {
	width: min(100%, 860px);
	margin: var(--wp--preset--spacing--70) auto 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}
.wg-eg tr { border-bottom: 1px solid var(--wp--preset--color--card-line); }
.wg-eg tr:last-child { border-bottom: 0; }
.wg-eg th,
.wg-eg td {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: baseline;
}
.wg-eg th {
	font-weight: 700;
	color: var(--wp--preset--color--text-strong);
	white-space: nowrap;
}
.wg-eg-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-sm);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
.wg-eg-price span {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.wg-eg-note { color: var(--wp--preset--color--text); }

/* Offset for the in-page jump from the hero button. */
.wg-anchor { scroll-margin-top: 6rem; }

@media (max-width: 767px) {
	.wg-eg,
	.wg-eg tbody,
	.wg-eg tr,
	.wg-eg th,
	.wg-eg td { display: block; }
	.wg-eg tr { padding-block: var(--wp--preset--spacing--50); }
	.wg-eg th,
	.wg-eg td { padding: 0 0 .25rem; }
	.wg-included { justify-content: flex-start; }
}