/*
 * PYS Cookie Consent — "Editorial Almanac" skin.
 *
 * Subject world: browned butter, toasted dough, dark chocolate and flour under
 * warm kitchen light. Deep roasted cocoa ground, golden-crust warm accent,
 * pistachio cool accent, flour-cream floating surface.
 *
 * Colour tokens are injected as CSS variables from PHP so they stay editable
 * in the admin. Font stacks degrade gracefully when Google Fonts are not loaded.
 */

.pyscc-root {
	--pyscc-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
	--pyscc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--pyscc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	--pyscc-line: rgba(31, 22, 17, 0.10);
	--pyscc-line-soft: rgba(31, 22, 17, 0.06);

	/*
	 * Card envelope. The banner is a small centred panel, not a full-bleed
	 * takeover: the page stays visible behind it so the visitor can see what
	 * they are consenting to before they click. Overridden per view below and
	 * per breakpoint at the bottom of the file.
	 */
	--pyscc-card-w: 540px;   /* preferred width, whichever is smaller wins */
	--pyscc-max-w: 70vw;     /* hard ceiling on width  */
	--pyscc-max-h: 50vh;     /* hard ceiling on height */
	--pyscc-pad-b: clamp(16px, 2.4vh, 24px); /* body bottom padding, reused by the sticky action row */

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 32px);
	font-family: var(--pyscc-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/* Mobile browsers paint a translucent rectangle over any tapped control. */
	-webkit-tap-highlight-color: transparent;
}

/*
 * If a visitor does select text in the banner, tint it to the palette rather
 * than leaving the browser's default blue over the cream surface.
 */
.pyscc-card ::selection {
	background: color-mix(in srgb, var(--pyscc-warm) 26%, transparent);
	color: var(--pyscc-ink);
}

.pyscc-root.pyscc-hidden { display: none; }
.pyscc-hidden { display: none !important; }

/* ---------- Ground: tinted scrim over a still-legible page ---------- */

/*
 * The scrim is deliberately thin. It has to do two jobs at once: push the page
 * back far enough that the card reads as the only thing to act on, and leave
 * the page recognisable underneath so the visitor sees what they arrived for.
 * A light blur separates the two planes without hiding the layout.
 */
.pyscc-overlay {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(2px) saturate(105%);
	-webkit-backdrop-filter: blur(2px) saturate(105%);
	background:
		radial-gradient(120% 80% at 78% -10%, color-mix(in srgb, var(--pyscc-warm) 14%, transparent), transparent 55%),
		radial-gradient(90% 70% at 8% 0%, color-mix(in srgb, var(--pyscc-cool) 12%, transparent), transparent 50%),
		linear-gradient(180deg, color-mix(in srgb, var(--pyscc-deep) 46%, transparent) 0%, color-mix(in srgb, var(--pyscc-deep2) 56%, transparent) 100%);
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.pyscc-overlay {
		background: linear-gradient(180deg, var(--pyscc-deep) 0%, var(--pyscc-deep2) 100%);
		opacity: 0.5;
	}
}

/* ---------- Floating cream surface ---------- */

.pyscc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: min(var(--pyscc-card-w), var(--pyscc-max-w));
	max-height: var(--pyscc-max-h);
	/*
	 * The card clips; the body inside it scrolls. Keeping the scroll off the
	 * card itself means the gradient accent bar and the rounded corners stay
	 * put instead of sliding away with the content.
	 */
	overflow: hidden;
	background: var(--pyscc-card);
	border-radius: var(--pyscc-radius, 22px);
	box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.55);
	animation: pyscc-rise 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Thin gradient accent bar along the top edge. */
.pyscc-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--pyscc-warm), var(--pyscc-cool));
}

@keyframes pyscc-rise {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

.pyscc-card__body {
	/* min-height:0 lets a flex child actually shrink and scroll. */
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(20px, 3.4vh, 32px) clamp(20px, 4vw, 36px) var(--pyscc-pad-b);
	text-align: center;
}

/* A hairline scrollbar, only when the content actually overflows. */
.pyscc-card__body { scrollbar-width: thin; scrollbar-color: var(--pyscc-line) transparent; }
.pyscc-card__body::-webkit-scrollbar { width: 8px; }
.pyscc-card__body::-webkit-scrollbar-thumb {
	background: var(--pyscc-line);
	border: 2px solid transparent;
	background-clip: content-box;
	border-radius: 999px;
}

/* ---------- Signature element: the cookie + consent meter ring ---------- */

.pyscc-cookie {
	position: relative;
	display: grid;
	place-items: center;
	/* Sized against viewport height now — it is the first thing to cost space
	   in a 50vh card. */
	width: clamp(62px, 11vh, 96px);
	height: clamp(62px, 11vh, 96px);
	margin: 0 auto clamp(12px, 1.8vh, 18px);
}

.pyscc-cookie__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.pyscc-cookie__track {
	fill: none;
	stroke: var(--pyscc-line);
	stroke-width: 3;
}

.pyscc-cookie__value {
	fill: none;
	stroke: url(#pyscc-ring-grad);
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dasharray 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pyscc-cookie__emoji {
	font-size: clamp(28px, 5.4vh, 44px);
	line-height: 1;
	user-select: none;
	filter: drop-shadow(0 6px 14px rgba(31, 22, 17, 0.18));
}

/* ---------- Eyebrow: mono, uppercase, wide tracking + gradient rule ---------- */

.pyscc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin: 0 0 clamp(9px, 1.4vh, 14px);
	font-family: var(--pyscc-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: var(--pyscc-muted);
}

.pyscc-eyebrow::after {
	content: '';
	flex: 0 1 96px;
	height: 1px;
	background: linear-gradient(90deg, var(--pyscc-warm), transparent);
}

.pyscc-card--prefs .pyscc-eyebrow { justify-content: flex-start; }

/* ---------- Type ---------- */

.pyscc-heading {
	margin: 0 0 clamp(8px, 1.3vh, 13px);
	font-family: var(--pyscc-font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	font-size: clamp(22px, 3.6vh, 32px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--pyscc-ink);
}

.pyscc-heading em {
	font-style: italic;
	font-weight: 500;
	color: var(--pyscc-warm);
}

.pyscc-heading--sm { font-size: clamp(19px, 2.9vh, 25px); }

.pyscc-message {
	margin: 0 auto clamp(14px, 2.2vh, 22px);
	max-width: 54ch;
	font-size: clamp(13.5px, 1.7vh, 15px);
	line-height: 1.55;
	color: var(--pyscc-muted);
}

/* ---------- Inline link inside the message copy ---------- */

/*
 * Reads as part of the sentence: same colour and same stroke weight as the
 * surrounding copy. 'from-font' takes the underline thickness from the
 * typeface
 * itself, so it matches the letterforms rather than sitting heavier.
 */
.pyscc-root .pyscc-inline-link,
.pyscc-root .pyscc-inline-link:hover,
.pyscc-root .pyscc-inline-link:focus,
.pyscc-root .pyscc-inline-link:active {
	appearance: none;
	display: inline;
	margin: 0;
	padding: 0;
	/*
	 * WordPress themes style buttons aggressively and often win on specificity,
	 * repainting this control with a background, border or shadow. Every state
	 * is reset explicitly so the link stays part of the sentence.
	 */
	background: none;
	background-image: none;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	border-radius: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	/* A stray drag or double-click would otherwise select the word. */
	user-select: none;
	-webkit-user-select: none;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
	cursor: pointer;
	transition: opacity 160ms ease;
}

.pyscc-root .pyscc-inline-link:hover {
	opacity: 0.7;
}

/* ---------- Secondary links ---------- */

.pyscc-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin-bottom: clamp(12px, 2vh, 20px);
}

.pyscc-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 3px 0;
	font-family: var(--pyscc-font-mono);
	font-size: 11.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pyscc-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--pyscc-line);
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease;
}

.pyscc-link:hover {
	color: var(--pyscc-ink);
	border-bottom-color: var(--pyscc-warm);
}

/* ---------- Buttons: mono, uppercase, nudging arrow ---------- */

/*
 * The buttons stay pinned to the bottom edge of the scroll area. In a card this
 * short the copy can overflow — on a small laptop, or with a long message, or
 * in the preferences list — and "Accept" scrolling out of sight is exactly the
 * failure that makes people give up on a banner. The negative offsets cancel
 * the body's bottom padding so the row sits flush against the card edge while
 * it is stuck, and the gradient hides the text passing underneath it.
 */
.pyscc-actions {
	position: sticky;
	bottom: calc(var(--pyscc-pad-b) * -1);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: calc(var(--pyscc-pad-b) * -1);
	padding: 12px 0 var(--pyscc-pad-b);
	background: linear-gradient(180deg, transparent 0%, var(--pyscc-card) 34%);
}

/*
 * Scoped under .pyscc-root and with :hover/:focus/:active listed so theme
 * button rules cannot repaint these on interaction.
 */
.pyscc-root .pyscc-btn,
.pyscc-root .pyscc-btn:hover,
.pyscc-root .pyscc-btn:focus,
.pyscc-root .pyscc-btn:active {
	text-shadow: none;
	background-image: none;
	user-select: none;
	-webkit-user-select: none;
}

.pyscc-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 150px;
	padding: clamp(12px, 1.7vh, 15px) 22px;
	border: 1px solid transparent;
	border-radius: 11px;
	font-family: var(--pyscc-font-mono);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1;
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.pyscc-btn__arrow {
	display: inline-block;
	transition: transform 180ms ease;
}

.pyscc-btn:hover .pyscc-btn__arrow { transform: translate(3px, -3px); }

.pyscc-btn--accent {
	background: var(--pyscc-warm);
	color: var(--pyscc-card);
	box-shadow: 0 14px 28px -18px rgba(31, 22, 17, 0.9);
}

.pyscc-btn--accent:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 38px -18px rgba(31, 22, 17, 0.95);
}

.pyscc-btn--ghost {
	background: transparent;
	color: var(--pyscc-ink);
	border-color: var(--pyscc-line);
}

.pyscc-btn--ghost:hover {
	transform: translateY(-3px);
	border-color: var(--pyscc-cool);
	background: color-mix(in srgb, var(--pyscc-cool) 8%, transparent);
}

.pyscc-btn:active { transform: translateY(0); }

/* ---------- Preferences ---------- */

/*
 * The second layer carries four categories with descriptions and toggles, so it
 * gets a taller envelope than the first. 50vh there would be almost entirely
 * scrollbar. The width ceiling still applies.
 */
.pyscc-card--prefs {
	--pyscc-card-w: 580px;
	--pyscc-max-h: 80vh;
}
.pyscc-card--prefs .pyscc-card__body { text-align: left; }
.pyscc-card--prefs .pyscc-message { margin-left: 0; }
.pyscc-card--prefs .pyscc-actions { justify-content: flex-start; }

/* Compact cookie + ring in the preferences header. */
.pyscc-prefs-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: clamp(12px, 2vh, 20px);
}

.pyscc-prefs-head .pyscc-cookie {
	width: 74px;
	height: 74px;
	margin: 0;
	flex: 0 0 auto;
}

.pyscc-prefs-head .pyscc-cookie__emoji { font-size: 34px; }

.pyscc-meter {
	font-family: var(--pyscc-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--pyscc-muted);
	font-variant-numeric: tabular-nums;
}

.pyscc-meter strong {
	color: var(--pyscc-ink);
	font-weight: 600;
}

.pyscc-cats {
	list-style: none;
	margin: 0 0 clamp(12px, 2vh, 20px);
	padding: 0;
}

.pyscc-cat {
	padding: clamp(11px, 1.6vh, 15px) 0;
	border-top: 1px solid var(--pyscc-line-soft);
}

.pyscc-cat:last-child { border-bottom: 1px solid var(--pyscc-line-soft); }

.pyscc-cat__head {
	user-select: none;
	-webkit-user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
}

.pyscc-cat__label {
	font-family: var(--pyscc-font-mono);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--pyscc-ink);
}

/* Pill badge — translucent tint + darker text of the same hue. */
.pyscc-pill {
	display: inline-block;
	margin-left: 9px;
	padding: 4px 9px;
	border-radius: 20px;
	font-family: var(--pyscc-font-mono);
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--pyscc-cool) 14%, transparent);
	color: color-mix(in srgb, var(--pyscc-cool) 72%, #000);
	vertical-align: middle;
}

.pyscc-cat__desc {
	margin: 7px 0 0;
	max-width: 52ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--pyscc-muted);
}

/* Toggle switch */

.pyscc-switch { position: relative; flex: 0 0 auto; }

.pyscc-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.pyscc-switch__track {
	display: block;
	width: 44px;
	height: 25px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pyscc-ink) 16%, transparent);
	transition: background 200ms ease;
}

.pyscc-switch__thumb {
	display: block;
	width: 19px;
	height: 19px;
	margin: 3px;
	border-radius: 50%;
	background: var(--pyscc-card);
	box-shadow: 0 1px 3px rgba(31, 22, 17, 0.3);
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pyscc-switch input:checked + .pyscc-switch__track { background: var(--pyscc-cool); }
.pyscc-switch input:checked + .pyscc-switch__track .pyscc-switch__thumb { transform: translateX(19px); }

.pyscc-switch--locked { opacity: 0.5; }
.pyscc-switch--locked input { cursor: not-allowed; }

/* ---------- Reopen trigger (shortcode) ---------- */

.pyscc-reopen {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------- Accessibility & responsive ---------- */

/*
 * Focus rings belong on controls the visitor can operate, not on containers.
 *
 * A bare descendant selector (.pyscc-root :focus-visible) also matched the card,
 * which takes focus programmatically when the banner opens — drawing an outline
 * around the whole panel. Listing the interactive elements keeps the ring where
 * it is useful and off everything else.
 */
.pyscc-root button:focus-visible,
.pyscc-root a:focus-visible,
.pyscc-root input:focus-visible,
.pyscc-root select:focus-visible,
.pyscc-root textarea:focus-visible,
.pyscc-root [tabindex="0"]:focus-visible {
	outline: 2px solid var(--pyscc-warm);
	outline-offset: 3px;
	border-radius: 6px;
}

/*
 * The inline link is a <button>, so it would otherwise pick up the ring above.
 * It shows keyboard focus as a double underline instead, keeping it inline.
 */
.pyscc-root .pyscc-inline-link:focus-visible {
	outline: none;
	border-radius: 0;
	text-decoration-style: double;
}

/* Containers never show a ring, however they received focus. */
.pyscc-root .pyscc-card:focus,
.pyscc-root .pyscc-card:focus-visible,
.pyscc-root .pyscc-card__body:focus,
.pyscc-root:focus,
.pyscc-root:focus-visible {
	outline: none;
	box-shadow: none;
}

/*
 * On a 720p or 900p laptop the ceiling is 360-450px, and the emblem is the cheapest thing
 * to give back — it is decoration, the copy and the buttons are not. Shrinking
 * it here buys the paragraph enough room to fit without a scrollbar.
 */
@media (max-height: 950px) {
	.pyscc-card__body { padding-top: clamp(16px, 2.6vh, 24px); }

	.pyscc-cookie {
		width: clamp(54px, 8.4vh, 72px);
		height: clamp(54px, 8.4vh, 72px);
		margin-bottom: clamp(8px, 1.3vh, 12px);
	}

	.pyscc-cookie__emoji { font-size: clamp(24px, 4vh, 33px); }
	.pyscc-message { margin-bottom: clamp(10px, 1.5vh, 16px); }
	.pyscc-links { margin-bottom: clamp(8px, 1.25vh, 14px); }
}

/*
 * Short viewports: 50vh of a 620px-tall window is ~310px, which the first layer
 * fits but leaves no slack. The ceiling is relaxed rather than letting the card
 * become a scroll box on every visit. It stays centred either way.
 */
@media (max-height: 640px) {
	.pyscc-root { --pyscc-max-h: 78vh; }
	.pyscc-card--prefs { --pyscc-max-h: 88vh; }
}

/*
 * Phones: 70vw is only ~270px on a typical handset, far too narrow to read.
 * The width ceiling is lifted to the full padded viewport and the height
 * ceiling relaxed, but the card keeps its centred position — no bottom bar.
 */
@media (max-width: 560px) {
	.pyscc-root {
		--pyscc-max-w: 100%;
		--pyscc-max-h: 76vh;
	}
	.pyscc-card--prefs { --pyscc-max-h: 86vh; }
	.pyscc-actions { flex-direction: column-reverse; }
	.pyscc-btn { width: 100%; min-width: 0; }
	.pyscc-prefs-head { gap: 14px; }
	.pyscc-cat__head { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.pyscc-root *,
	.pyscc-root *::before,
	.pyscc-root *::after {
		animation: none !important;
		transition: none !important;
	}
}