/**
 * Cookie consent.
 *
 * The .com site's consent bar and dialogs, redrawn in this theme's tokens. The
 * structure and the rules are its own - grid bar, backdrop overlay, bordered
 * category rows, a switch built from a checkbox - with every colour, radius and
 * step taken from theme.css so the bar belongs to this shop rather than looking
 * like a component bolted on.
 *
 * Loaded on every page, so it is kept to the `.pcs-cc-` prefix and touches
 * nothing else.
 */

/* ---------------------------------------------------------------- the bar */

/* Hidden until the script has read the stored decision. Rendering it open and
   then hiding it makes the bar flash on every visit for somebody who already
   chose, which reads as the site having forgotten. */
.pcs-cc-bar {
	display: none;
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 120;
	background: var(--pc-paper);
	border-block-start: 1px solid var(--pc-line);
	box-shadow: var(--pc-shadow-lift);
	padding: var(--pc-5) var(--pc-gutter);
}

.pcs-cc-bar.is-open {
	display: block;
}

.pcs-cc-bar__in {
	max-width: var(--pc-wrap);
	margin-inline: auto;
	display: grid;
	gap: var(--pc-5);
	grid-template-columns: 1fr auto;
	align-items: center;
}

@media (max-width: 860px) {
	.pcs-cc-bar__in {
		grid-template-columns: 1fr;
	}
}

.pcs-cc-bar h2 {
	font-size: var(--pc-step-1);
	letter-spacing: var(--pc-tight);
	margin: 0 0 var(--pc-1);
	color: var(--pc-ink);
}

.pcs-cc-bar p {
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
	line-height: 1.6;
	margin: 0;
	max-width: 78ch;
}

.pcs-cc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-2);
	align-items: center;
}

.pcs-cc-actions .pcs-btn {
	white-space: nowrap;
}

/* A button that reads as a link: same size and colour as the prose around it,
   so a sentence can carry one without breaking its line. */
.pcs-cc-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: inherit;
	color: var(--pc-mint-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.pcs-cc-link:hover {
	color: var(--pc-ink);
}

.pcs-cc-link:focus-visible {
	outline: 2px solid var(--pc-mint-deep);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------- the dialogs */

.pcs-cc-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 130;
	background: rgba(14, 31, 26, 0.55);
	padding: var(--pc-5);
	overflow-y: auto;
	place-items: start center;
}

.pcs-cc-overlay.is-open {
	display: grid;
}

/* The page behind must not scroll under an open dialog, but the dialog itself
   has to - the policy is longer than a phone screen. */
.pcs-cc-locked {
	overflow: hidden;
}

.pcs-cc-dialog {
	background: var(--pc-paper);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lift);
	width: min(720px, 100%);
	margin-block: auto;
	padding: var(--pc-6);
}

@media (max-width: 600px) {
	.pcs-cc-dialog {
		padding: var(--pc-5);
	}
}

.pcs-cc-dialog h2 {
	font-size: var(--pc-step-2);
	letter-spacing: var(--pc-tight);
	margin: 0;
	color: var(--pc-ink);
}

.pcs-cc-dialog h3 {
	font-size: var(--pc-step-0);
	margin: var(--pc-5) 0 var(--pc-1);
	color: var(--pc-ink);
}

.pcs-cc-dialog p,
.pcs-cc-dialog li {
	font-size: var(--pc-step--1);
	color: var(--pc-muted);
	line-height: 1.65;
}

.pcs-cc-dialog ul {
	margin: var(--pc-1) 0;
	padding-inline-start: 1.15rem;
}

.pcs-cc-dialog a {
	color: var(--pc-mint-deep);
}

.pcs-cc-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-4);
}

.pcs-cc-close {
	background: none;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-pill);
	width: 32px;
	height: 32px;
	flex: none;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--pc-ink);
	cursor: pointer;
	transition: border-color var(--pc-fast) var(--pc-ease), color var(--pc-fast) var(--pc-ease);
}

.pcs-cc-close:hover {
	border-color: var(--pc-mint-deep);
	color: var(--pc-mint-deep);
}

.pcs-cc-body {
	margin-block-start: var(--pc-4);
}

/* ----------------------------------------------------------- the categories */

.pcs-cc-row {
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	padding: var(--pc-3) var(--pc-4);
	margin-block-start: var(--pc-3);
}

.pcs-cc-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-4);
}

.pcs-cc-row b {
	font-size: var(--pc-step-0);
	color: var(--pc-ink);
}

.pcs-cc-row p {
	margin: var(--pc-1) 0 0;
	font-size: var(--pc-step--2);
}

.pcs-cc-always {
	font-size: var(--pc-step--2);
	text-transform: uppercase;
	letter-spacing: var(--pc-wide);
	color: var(--pc-mint-deep);
	font-weight: 600;
}

/* A switch made from a real checkbox: the input stays in the accessibility
   tree and keeps its keyboard behaviour, and the span is what is painted. */
.pcs-cc-sw {
	position: relative;
	flex: none;
	width: 44px;
	height: 25px;
}

.pcs-cc-sw input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.pcs-cc-sw > span:first-of-type {
	position: absolute;
	inset: 0;
	background: var(--pc-sand);
	border-radius: var(--pc-radius-pill);
	transition: background var(--pc-fast) var(--pc-ease);
	pointer-events: none;
}

.pcs-cc-sw > span:first-of-type::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 19px;
	height: 19px;
	background: var(--pc-paper);
	border-radius: 50%;
	box-shadow: var(--pc-shadow);
	transition: transform var(--pc-fast) var(--pc-ease);
}

.pcs-cc-sw input:checked + span {
	background: var(--pc-mint-deep);
}

.pcs-cc-sw input:checked + span::after {
	transform: translateX(19px);
}

.pcs-cc-sw input:focus-visible + span {
	outline: 2px solid var(--pc-mint-deep);
	outline-offset: 2px;
}

.pcs-cc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-2);
	margin-block-start: var(--pc-5);
}

/* ------------------------------------------------------------- the table */

/* The policy's cookie table is four columns of prose and will not fit a phone.
   It scrolls in its own box rather than pushing the dialog wider. */
.pcs-cc-scroll,
.pcs-cc-dialog .cc-scroll {
	overflow-x: auto;
	margin-block-start: var(--pc-2);
}

.pcs-cc-dialog .cc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pc-step--2);
	min-width: 520px;
}

.pcs-cc-dialog .cc-table th,
.pcs-cc-dialog .cc-table td {
	border: 1px solid var(--pc-line);
	padding: var(--pc-2) var(--pc-3);
	text-align: start;
	vertical-align: top;
	color: var(--pc-muted);
}

.pcs-cc-dialog .cc-table th {
	background: var(--pc-cream);
	color: var(--pc-ink);
	font-weight: 600;
}

.pcs-cc-dialog .cc-table code {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
	font-size: 0.95em;
	color: var(--pc-ink);
	word-break: break-word;
}

/* ------------------------------------------------------------- the footer */

.pcs-footer__legal--cc {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-4);
}

.pcs-footer__legal--cc .pcs-cc-link {
	font-size: var(--pc-step--1);
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
}

.pcs-footer__legal--cc .pcs-cc-link:hover {
	opacity: 1;
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ a11y */

/* The theme drops WooCommerce's stylesheets, which is where this normally comes
   from, so the switches' labels would otherwise be visible text. */
.pcs-cc-sw .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pcs-cc-sw > span:first-of-type,
	.pcs-cc-sw > span:first-of-type::after,
	.pcs-cc-close {
		transition: none;
	}
}