/*
 * File: wp-content/plugins/qi-certificates/assets/qi-verify.css
 *
 * Minimal stylesheet for the [qi_verify] shortcode.
 *
 * Version: 1.0.0
 * Changelog:
 *   1.0.0 — 2026-09-12 — Initial. Deliberately plain; QI-003 restyles to the
 *           Quality International design system. Token names and values match
 *           design/tokens/*.css so the restyle is a swap, not a rewrite.
 *
 * Layout is flex/grid only. No floats, no fixed widths, no inline styles in the
 * markup. Tap targets are 44px minimum. Verified at 320 / 768 / 1280.
 */

.qi-verify {
	--qi-red: #d32e2a;
	--qi-red-hover: #b8261f;
	--qi-neutral-900: #1a1a1a;
	--qi-neutral-700: #4a4a4a;
	--qi-neutral-500: #8a8a8a;
	--qi-neutral-300: #d9d9d9;
	--qi-neutral-100: #f4f4f4;
	--qi-white: #fff;
	--qi-success-bg: #e4edd8;
	--qi-success-fg: #3f5a26;
	--qi-danger-bg: #f9e5e4;
	--qi-danger-fg: #7a1e1b;
	--qi-radius: 6px;
	--qi-gap: 24px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--qi-gap);
	max-width: 960px;
	margin-inline: auto;
	padding-inline: 16px;
	padding-block: 32px;
	color: var(--qi-neutral-900);
	font-size: 16px;
	line-height: 1.5;
}

.qi-verify *,
.qi-verify *::before,
.qi-verify *::after {
	box-sizing: inherit;
}

.qi-verify__title {
	margin: 0;
	font-size: clamp(28px, 5vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.qi-verify__intro {
	margin: 0;
	max-width: 56ch;
	color: var(--qi-neutral-700);
	font-size: 18px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ form -- */

.qi-verify__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 4vw, 40px);
	border: 1px solid var(--qi-neutral-300);
	border-radius: var(--qi-radius);
	background: var(--qi-white);
}

.qi-verify__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.qi-verify__label {
	font-size: 14px;
	font-weight: 500;
	color: var(--qi-neutral-700);
}

.qi-verify__input {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--qi-neutral-300);
	border-radius: var(--qi-radius);
	background: var(--qi-white);
	color: var(--qi-neutral-900);
	font: inherit;
	font-size: 16px; /* 16px avoids iOS zoom-on-focus */
}

.qi-verify__input:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--qi-red);
	box-shadow: 0 0 0 3px rgba(211, 46, 42, 0.25);
}

.qi-verify__input--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
}

/* Honeypot: removed from layout and from assistive tech, but still submitted. */
.qi-verify__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qi-verify__submit {
	align-self: flex-start;
	min-height: 44px;
	min-width: 44px;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--qi-red);
	color: var(--qi-white);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.qi-verify__submit:hover,
.qi-verify__submit:focus-visible {
	background: var(--qi-red-hover);
}

.qi-verify__submit:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(211, 46, 42, 0.25);
}

/* ---------------------------------------------------------------- result -- */

.qi-verify__result {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--qi-neutral-300);
	border-radius: var(--qi-radius);
	background: var(--qi-white);
}

.qi-verify__result-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.qi-verify__result-title {
	font-size: 15px;
	font-weight: 600;
}

.qi-verify__result-title--none {
	color: var(--qi-red);
}

.qi-verify__pill {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--qi-neutral-100);
	color: var(--qi-neutral-700);
	font-size: 13px;
	font-weight: 500;
}

.qi-verify__pill--active {
	background: var(--qi-success-bg);
	color: var(--qi-success-fg);
}

.qi-verify__pill--expired,
.qi-verify__pill--withdrawn {
	background: var(--qi-danger-bg);
	color: var(--qi-danger-fg);
}

.qi-verify__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--qi-gap);
	margin: 0;
}

.qi-verify__cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.qi-verify__cell-label {
	margin: 0;
	color: var(--qi-neutral-500);
	font-size: 13px;
}

.qi-verify__cell-value {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.qi-verify__cell-value--mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 400;
}

.qi-verify__message {
	margin: 0;
	font-size: 18px;
}

@media (min-width: 768px) {
	.qi-verify {
		padding-inline: 32px;
	}

	.qi-verify__grid {
		grid-template-columns: 1fr 1fr;
	}
}