/**
 * PressPrimer Certificate - front-end styles: verification page,
 * certificate view page, and the My Certificates list.
 *
 * Token architecture mirrors the PressPrimer house front-end style
 * (Assignment submission.css / Quiz 3.0 shell): the WP-admin palette
 * (#0073aa primary), the shared spacing/radius/shadow scales, the
 * card + pill + button recipes, and the print/reduced-motion/
 * high-contrast/RTL blocks every sibling sheet ships.
 */

:root {

	/* Palette - aligned with PressPrimer Quiz 3.0 shell + Assignment. */
	--ppcert-primary: #0073aa;
	--ppcert-primary-hover: #005a87;
	--ppcert-primary-light: #e5f3fa;
	--ppcert-success: #00a32a;
	--ppcert-success-light: #d8f4e0;
	--ppcert-success-strong: #0a6b21;
	--ppcert-warning: #dba617;
	--ppcert-warning-light: #fef8e7;
	--ppcert-warning-strong: #8a6d3b;
	--ppcert-error: #d63638;
	--ppcert-error-light: #fce4e4;
	--ppcert-error-strong: #a8201f;
	--ppcert-text: #1d2327;
	--ppcert-text-secondary: #50575e;
	--ppcert-text-light: #787c82;
	--ppcert-border: #c3c4c7;
	--ppcert-border-light: #dcdcde;
	--ppcert-background: #fff;
	--ppcert-background-gray: #f6f7f7;

	/* Shared scales (identical across the sibling plugins). */
	--ppcert-space-xs: 0.25rem;
	--ppcert-space-sm: 0.5rem;
	--ppcert-space-md: 1rem;
	--ppcert-space-lg: 1.5rem;
	--ppcert-space-xl: 2rem;
	--ppcert-space-2xl: 3rem;
	/* Squared corners throughout: the front end is deliberately
	 * hard-edged, so every radius resolves to 0. Kept as tokens rather
	 * than deleted so a site can restore curves by redefining these
	 * four values alone. */
	--ppcert-radius-sm: 0;
	--ppcert-radius-md: 0;
	--ppcert-radius-lg: 0;
	--ppcert-radius-full: 0;

	/* Border weights. The heavy weight carries the structure now that
	 * there are no rounded corners doing it. */
	--ppcert-border-width: 3px;
	--ppcert-border-width-thin: 2px;
	--ppcert-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
	--ppcert-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
	--ppcert-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

	/* A single soft drop for result/status containers - present enough
	 * to lift the panel off the page, never a glow. */
	--ppcert-shadow-subtle: 0 2px 6px rgb(0 0 0 / 8%);
	--ppcert-transition: all 0.2s ease-in-out;
	--ppcert-max-width: 800px;

	/* Inherit the theme's typeface (Inter on this site) rather than
	 * imposing the WP-admin stack. Only the credential ID itself stays
	 * monospace, where character shape carries meaning. */
	--ppcert-font-sans: inherit;
}

/* ------------------------------------------------------------------ *
 * Shared recipes
 * ------------------------------------------------------------------ */

.ppcert-verify,
.ppcert-view,
.ppcert-my-certificates {
	margin: var(--ppcert-space-xl) auto;
	max-width: var(--ppcert-max-width);
	font-family: var(--ppcert-font-sans);
	color: var(--ppcert-text);
}

/* The verification block is a single input and a button, not prose, so
 * the 800px reading measure that suits the view and list pages only made
 * the field look stunted on a desktop. It fills whatever container the
 * shortcode or block is placed in instead. */
.ppcert-verify {
	width: 100%;
	max-width: none;
}

/* Buttons: filled primary + bordered secondary (house recipe). */
.ppcert-button-primary,
.ppcert-view__download {
	display: inline-flex;
	align-items: center;
	gap: var(--ppcert-space-sm);
	padding: var(--ppcert-space-sm) var(--ppcert-space-lg);
	background: var(--ppcert-primary);
	border: 2px solid var(--ppcert-primary);
	border-radius: var(--ppcert-radius-md);
	color: #fff;

	/* Never inherit the theme's body size (default themes run 18-20px);
	 * cap at 16px, shrinking with smaller theme roots. */
	font-size: min(1rem, 16px);
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
	transition: var(--ppcert-transition);
}

/* Buttons keep their colors against theme link/visited/focus styles -
 * never the theme's blue on a visited Download button. */
.ppcert-button-primary:visited,
.ppcert-button-primary:focus,
.ppcert-button-primary:active,
.ppcert-view__download:visited,
.ppcert-view__download:focus,
.ppcert-view__download:active {
	color: #fff;
}

.ppcert-button-primary:focus-visible,
.ppcert-view__download:focus-visible {
	outline: 2px solid var(--ppcert-primary);
	outline-offset: 2px;
}

.ppcert-button-primary:hover,
.ppcert-view__download:hover {
	background: var(--ppcert-primary-hover);
	border-color: var(--ppcert-primary-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--ppcert-shadow-md);
}

.ppcert-button-secondary,
.ppcert-view__verify {
	display: inline-flex;
	align-items: center;
	gap: var(--ppcert-space-sm);
	padding: var(--ppcert-space-sm) var(--ppcert-space-lg);
	background: var(--ppcert-background);
	border: 2px solid var(--ppcert-border);
	border-radius: var(--ppcert-radius-md);
	color: var(--ppcert-text);

	/* Same 16px cap as the primary recipe. */
	font-size: min(1rem, 16px);
	line-height: 1.5;
	font-weight: 600;
	text-decoration: none;
	transition: var(--ppcert-transition);
}

.ppcert-button-secondary:hover,
.ppcert-view__verify:hover {
	border-color: var(--ppcert-primary);
	color: var(--ppcert-primary);
	transform: translateY(-1px);
	box-shadow: var(--ppcert-shadow-sm);
}

.ppcert-button-secondary:visited,
.ppcert-view__verify:visited {
	color: var(--ppcert-text);
}

.ppcert-button-secondary:focus,
.ppcert-button-secondary:active,
.ppcert-view__verify:focus,
.ppcert-view__verify:active {
	color: var(--ppcert-primary);
}

.ppcert-button-secondary:focus-visible,
.ppcert-view__verify:focus-visible {
	outline: 2px solid var(--ppcert-primary);
	outline-offset: 2px;
}

/* Status pills: light background + saturated foreground (house recipe). */
.ppcert-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--ppcert-space-xs) var(--ppcert-space-md);
	border-radius: var(--ppcert-radius-full);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ppcert-pill--valid {
	background: var(--ppcert-success-light);
	color: var(--ppcert-success-strong);
}

.ppcert-pill--expired {
	background: var(--ppcert-warning-light);
	color: var(--ppcert-warning-strong);
}

.ppcert-pill--revoked {
	background: var(--ppcert-error-light);
	color: var(--ppcert-error-strong);
}

/* ------------------------------------------------------------------ *
 * Verification page
 * ------------------------------------------------------------------ */

/* The lookup form is a two-row grid, not a wrapping flex row: the label
 * owns the first row and the input + button share the second. The old
 * flex row let all three items wrap against each other, which is what
 * squashed the input on narrow screens. */
.ppcert-verify__form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--ppcert-space-sm);
	align-items: stretch;
	margin-bottom: var(--ppcert-space-lg);
}

.ppcert-verify__label {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppcert-text-secondary);
}

/* Specificity note, and the reason this selector is not a bare class:
 * themes style form controls as `input[type="text"]` (0,1,1) or
 * `.entry-content input[type="text"]` (0,2,1), both of which outrank a
 * lone `.ppcert-verify__input` (0,1,0). That is what put the theme's
 * corner radius and its default field width back on this input. Naming
 * the ancestors and the element takes this to (0,3,1); the two properties
 * a theme is most likely to still win by source order - the radius and
 * the width - are pinned outright, since the whole point of both is that
 * they must not be negotiable. */
.ppcert-verify .ppcert-verify__form input.ppcert-verify__input {

	/* Fill the grid track. width alone is not enough on a shrink-to-fit
	 * track: min-width:0 overrides the input's intrinsic min size, which
	 * is what otherwise forces horizontal overflow on a phone. */
	width: 100% !important;
	min-width: 0;
	max-width: none;
	box-sizing: border-box;

	/* Squared, and not open to a theme's opinion. */
	border-radius: 0 !important;
	padding: var(--ppcert-space-sm) var(--ppcert-space-md);
	background: var(--ppcert-background);
	border: var(--ppcert-border-width) solid var(--ppcert-text);
	color: var(--ppcert-text);
	font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;

	/* 16px minimum: anything smaller makes iOS Safari zoom the page on
	 * focus, which is most of why this form felt broken on a phone. */
	font-size: max(1rem, 16px);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: var(--ppcert-transition);
}

.ppcert-verify .ppcert-verify__form input.ppcert-verify__input::placeholder {
	color: var(--ppcert-text-light);
	letter-spacing: 0.08em;
}

.ppcert-verify .ppcert-verify__form input.ppcert-verify__input:focus {
	border-color: var(--ppcert-primary);
	outline: var(--ppcert-border-width-thin) solid var(--ppcert-primary-light);
	outline-offset: 0;
}

/* Previously unstyled, so it rendered as the theme's own button next to
 * a plugin-styled input - the visible half of the "squished" report. */
/* Same specificity reasoning as the input above: themes reach these with
 * `button[type="submit"]` and friends. */
.ppcert-verify .ppcert-verify__form button.ppcert-verify__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--ppcert-space-sm) var(--ppcert-space-lg);
	background: var(--ppcert-primary);
	border: var(--ppcert-border-width) solid var(--ppcert-primary);
	border-radius: 0 !important;
	color: #fff;
	font-family: inherit;
	font-size: max(1rem, 16px);
	line-height: 1.5;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--ppcert-transition);
}

.ppcert-verify .ppcert-verify__form button.ppcert-verify__submit:hover {
	background: var(--ppcert-primary-hover);
	border-color: var(--ppcert-primary-hover);
	color: #fff;
}

.ppcert-verify .ppcert-verify__form button.ppcert-verify__submit:focus-visible {
	outline: var(--ppcert-border-width-thin) solid var(--ppcert-primary);
	outline-offset: 2px;
}

/* The result panel carries the verdict as colour, not just as words:
 * the modifier class the JS sets (and the server-rendered fallback
 * mirrors) tints the panel, its border, and a heavy leading edge. The
 * neutral rule below is the base every state overrides, so an unknown
 * state still renders as a legible panel. */
.ppcert-verify__result:not(:empty) {
	background: var(--ppcert-background);
	border: var(--ppcert-border-width) solid var(--ppcert-border);
	border-left-width: calc(var(--ppcert-border-width) * 3);
	border-radius: var(--ppcert-radius-lg);
	box-shadow: var(--ppcert-shadow-subtle);
	padding: var(--ppcert-space-lg) var(--ppcert-space-xl);
}

/* Valid - the only affirmative state. */
.ppcert-verify__result--valid:not(:empty) {
	background: var(--ppcert-success-light);
	border-color: var(--ppcert-success);
	color: var(--ppcert-success-strong);
}

/* Expired - genuine but no longer current: a caution, not a failure. */
.ppcert-verify__result--expired:not(:empty) {
	background: var(--ppcert-warning-light);
	border-color: var(--ppcert-warning);
	color: var(--ppcert-warning-strong);
}

/* Revoked and not-found both mean "do not trust this credential". */
.ppcert-verify__result--revoked:not(:empty),
.ppcert-verify__result--not_found:not(:empty) {
	background: var(--ppcert-error-light);
	border-color: var(--ppcert-error);
	color: var(--ppcert-error-strong);
}

/* Typo, rate limit and transport errors say nothing about the
 * credential itself, so they stay neutral rather than alarming. */
.ppcert-verify__result--typo:not(:empty),
.ppcert-verify__result--rate_limited:not(:empty),
.ppcert-verify__result--error:not(:empty),
.ppcert-verify__result--checking:not(:empty) {
	background: var(--ppcert-background-gray);
	border-color: var(--ppcert-border);
	color: var(--ppcert-text-secondary);
}

.ppcert-verify__status {
	margin: 0 0 var(--ppcert-space-md);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;

	/* Inherit the panel's semantic colour by default; the explicit
	 * status modifiers below still win where the server renders them
	 * without a panel modifier. */
	color: inherit;
}

/* The heading is the last child only when there are no detail rows
 * (every non-valid state), where the bottom margin would be dead space. */
.ppcert-verify__status:last-child {
	margin-bottom: 0;
}

.ppcert-verify__status--valid {
	color: var(--ppcert-success-strong);
}

.ppcert-verify__status--expired {
	color: var(--ppcert-warning-strong);
}

.ppcert-verify__status--revoked,
.ppcert-verify__status--not_found {
	color: var(--ppcert-error-strong);
}

/* Detail rows sit on the tinted panel, so they drop back to the neutral
 * text colours rather than inheriting the verdict colour. */
.ppcert-verify__result .ppcert-verify__details dd {
	color: var(--ppcert-text);
}

.ppcert-verify__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--ppcert-space-xs) var(--ppcert-space-lg);
	margin: 0;
}

.ppcert-verify__details dt {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppcert-text-light);
	align-self: center;
}

.ppcert-verify__details dd {
	margin: 0;
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Certificate view page (/certificate/{credential_id}/)
 * ------------------------------------------------------------------ */

/* The certificate page's status banner is the view-page counterpart of
 * the verification panel, so it carries the same weight, leading edge,
 * and drop. */
.ppcert-view__banner {
	padding: var(--ppcert-space-md) var(--ppcert-space-lg);
	border: var(--ppcert-border-width) solid;
	border-left-width: calc(var(--ppcert-border-width) * 3);
	border-radius: var(--ppcert-radius-lg);
	box-shadow: var(--ppcert-shadow-subtle);
	margin-bottom: var(--ppcert-space-lg);
	font-weight: 600;
}

.ppcert-view__banner--expired {
	background: var(--ppcert-warning-light);
	border-color: var(--ppcert-warning);
	color: var(--ppcert-warning-strong);
}

.ppcert-view__banner--revoked {
	background: var(--ppcert-error-light);
	border-color: var(--ppcert-error);
	color: var(--ppcert-error-strong);
}

.ppcert-view__preview {
	margin-bottom: var(--ppcert-space-lg);
}

.ppcert-view__preview img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--ppcert-border-light);
	border-radius: var(--ppcert-radius-md);
	box-shadow: var(--ppcert-shadow-lg);
}

/* Text-card fallback when no preview renders. */
.ppcert-view__card {
	background: linear-gradient(135deg, var(--ppcert-primary-light) 0%, var(--ppcert-background) 60%);
	border: 2px solid var(--ppcert-border);
	border-radius: var(--ppcert-radius-lg);
	padding: var(--ppcert-space-2xl);
	text-align: center;
	margin-bottom: var(--ppcert-space-lg);
}

.ppcert-view__card-recipient {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ppcert-view__card-subject {
	font-size: 1.125rem;
	color: var(--ppcert-text-secondary);
	margin-top: var(--ppcert-space-xs);
}

.ppcert-view__card-date {
	margin-top: var(--ppcert-space-md);
	color: var(--ppcert-text-light);
}

.ppcert-view__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--ppcert-space-sm) var(--ppcert-space-lg);
	background: var(--ppcert-background-gray);
	border: 1px solid var(--ppcert-border-light);
	border-radius: var(--ppcert-radius-lg);
	padding: var(--ppcert-space-lg);
	margin: 0 0 var(--ppcert-space-lg);
}

.ppcert-view__details dt {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppcert-text-light);
	align-self: center;
}

.ppcert-view__details dd {
	margin: 0;
	font-weight: 600;
}

.ppcert-view__actions {
	display: flex;
	gap: var(--ppcert-space-md);
	flex-wrap: wrap;
	align-items: center;
}

/* ------------------------------------------------------------------ *
 * My Certificates list ([ppcert_my_certificates] + block)
 * ------------------------------------------------------------------ */

.ppcert-my-certificates__empty,
.ppcert-my-certificates__login {
	background: var(--ppcert-background-gray);
	border: 1px solid var(--ppcert-border-light);
	border-radius: var(--ppcert-radius-lg);
	padding: var(--ppcert-space-xl);
	text-align: center;
	color: var(--ppcert-text-secondary);
}

.ppcert-my-certificates__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ppcert-space-md) var(--ppcert-space-xl);
	flex-wrap: wrap;
	margin-bottom: var(--ppcert-space-md);
}

.ppcert-my-certificates__control-group {
	display: inline-flex;
	align-items: center;
	gap: var(--ppcert-space-xs);
	flex-wrap: wrap;
}

.ppcert-my-certificates__control-label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ppcert-text-light);
	margin-right: var(--ppcert-space-xs);
}

.ppcert-my-certificates__chip {
	display: inline-flex;
	align-items: center;
	padding: var(--ppcert-space-xs) var(--ppcert-space-md);
	border: 1px solid var(--ppcert-border);
	border-radius: var(--ppcert-radius-full);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ppcert-text-secondary);
	background: var(--ppcert-background);
	text-decoration: none;
	transition: var(--ppcert-transition);
}

.ppcert-my-certificates__chip:hover {
	border-color: var(--ppcert-primary);
	color: var(--ppcert-primary);
}

.ppcert-my-certificates__chip:visited {
	color: var(--ppcert-text-secondary);
}

.ppcert-my-certificates__chip:focus-visible {
	outline: 2px solid var(--ppcert-primary);
	outline-offset: 2px;
}

.ppcert-my-certificates__chip.is-active,
.ppcert-my-certificates__chip.is-active:visited {
	background: var(--ppcert-primary);
	border-color: var(--ppcert-primary);
	color: #fff;
}

.ppcert-my-certificates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ppcert-space-md);
}

.ppcert-my-certificates__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ppcert-space-lg);
	flex-wrap: wrap;
	background: var(--ppcert-background);
	border: 2px solid var(--ppcert-border-light);
	border-radius: var(--ppcert-radius-lg);
	padding: var(--ppcert-space-md) var(--ppcert-space-lg);
	transition: var(--ppcert-transition);
}

.ppcert-my-certificates__item:hover {
	border-color: var(--ppcert-primary-light);
	box-shadow: var(--ppcert-shadow-md);
}

.ppcert-my-certificates__title {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 var(--ppcert-space-xs);
}

.ppcert-my-certificates__meta {
	display: flex;
	gap: var(--ppcert-space-md);
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--ppcert-text-secondary);
}

.ppcert-my-certificates__meta strong {
	color: var(--ppcert-text);
}

.ppcert-my-certificates__links {
	display: flex;
	gap: var(--ppcert-space-sm);
	flex-wrap: wrap;
}

.ppcert-my-certificates__pagination {
	margin-top: var(--ppcert-space-lg);
	display: flex;
	gap: var(--ppcert-space-sm);
	justify-content: center;
	flex-wrap: wrap;
}

.ppcert-my-certificates__pagination .page-numbers {
	padding: var(--ppcert-space-xs) var(--ppcert-space-md);
	border: 1px solid var(--ppcert-border);
	border-radius: var(--ppcert-radius-sm);
	text-decoration: none;
	color: var(--ppcert-text);
}

.ppcert-my-certificates__pagination .page-numbers.current {
	background: var(--ppcert-primary);
	border-color: var(--ppcert-primary);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Utility
 * ------------------------------------------------------------------ */

.ppcert-hidden {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {

	.ppcert-view__details,
	.ppcert-verify__details {
		grid-template-columns: 1fr;
		gap: var(--ppcert-space-xs);
	}

	.ppcert-view__details dt,
	.ppcert-verify__details dt {
		margin-top: var(--ppcert-space-sm);
	}

	.ppcert-my-certificates__item {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {

	/* One column: the input takes the full width and the button sits
	 * beneath it at full width, instead of the two fighting for a row
	 * barely wide enough for a 14-character credential.
	 *
	 * A media query adds no specificity of its own, so this selector has
	 * to match the weight of the base rule above or the base would simply
	 * win here. */
	.ppcert-verify .ppcert-verify__form {
		grid-template-columns: 1fr;
	}

	.ppcert-verify .ppcert-verify__form button.ppcert-verify__submit {
		width: 100%;
	}

	.ppcert-verify__result:not(:empty) {
		padding: var(--ppcert-space-md);
	}

	.ppcert-view__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ppcert-view__download,
	.ppcert-view__verify,
	.ppcert-button-primary,
	.ppcert-button-secondary {
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ *
 * Print, motion, contrast, RTL (house parity blocks)
 * ------------------------------------------------------------------ */

@media print {

	.ppcert-view__actions,
	.ppcert-verify__form,
	.ppcert-my-certificates__controls,
	.ppcert-my-certificates__links,
	.ppcert-my-certificates__pagination {
		display: none;
	}

	.ppcert-view__preview img {
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ppcert-verify *,
	.ppcert-view *,
	.ppcert-my-certificates * {
		transition: none !important;
		transform: none !important;
	}
}

@media (prefers-contrast: more) {

	.ppcert-view__details,
	.ppcert-my-certificates__item,
	.ppcert-verify__result:not(:empty) {
		border-color: var(--ppcert-text);
	}
}

[dir="rtl"] .ppcert-view__details,
[dir="rtl"] .ppcert-verify__details {
	direction: rtl;
}