/*
 * Ohio PC Solutions public ticket lookup.
 *
 * Loaded only on /status/, and deliberately separate from the staff app's
 * stylesheet: this page is public, reachable by anything that crawls, and
 * shares no components with the app. Tokens come from tokens.css.
 *
 * The template renders its own document without the theme's header and footer,
 * so there is no Avada stylesheet to out-specify here. Plain selectors suffice.
 *
 * **Fonts.** The staff app gets Outfit and Montserrat free, because Avada
 * already loads them and the app keeps Avada's assets. This page strips them,
 * so the brand faces are declared here only as the first choice in the stack
 * and the system stack carries it when they are absent. Self-hosting them, or
 * a Google Fonts link, would put roughly 800KB or a third-party request onto a
 * page that is currently under 30KB - a trade worth making deliberately rather
 * than by accident. Not made yet.
 */

/* `min-width: 0` for the same reason as the staff app: Avada's site-wide
   `body { min-width: 320px }` is what puts a horizontal scrollbar on a narrow
   phone, and this page is fluid without it. */
.opcs_status_body {
	min-width: 0;
	margin: 0;
	background: var(--opcs-white);
}

.opcs_status,
.opcs_status *,
.opcs_status *::before,
.opcs_status *::after {
	box-sizing: border-box;
}

/*
 * The 6px orange top rule. On the one page a customer sees, this is the brand's
 * strongest signal that they are in the right place.
 */
.opcs_status {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	border-top: var(--opcs-rule-top) solid var(--opcs-orange);
	color: var(--opcs-navy);
	font-family: var(--opcs-font-body);
	font-size: 1rem;
	line-height: 1.55;
}

.opcs_status a {
	color: var(--opcs-navy);
	font-weight: 600;
	text-decoration: underline;
	transition: color var(--opcs-transition);
}

.opcs_status a:hover,
.opcs_status a:focus {
	color: var(--opcs-orange-10);
}

.opcs_status_head {
	padding: 3rem 1.5rem 0.5rem;
	text-align: center;
}

/* Tracked uppercase, reserved for micro-labels like this. */
.opcs_status_shop {
	margin: 0 0 0.5rem;
	color: var(--opcs-ink-quiet);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.opcs_status_title {
	margin: 0;
	color: var(--opcs-navy);
	font-family: var(--opcs-font-display);
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.opcs_status_main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 32.5rem;
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
}

/* Cards: flat, hairline border, 6px, no shadow. */

.opcs_status_form,
.opcs_status_card {
	padding: 1.75rem;
	border: var(--opcs-border) solid var(--opcs-line);
	border-radius: var(--opcs-radius-md);
	background: var(--opcs-white);
}

/* The result carries the signature orange top rule; the form does not. */
.opcs_status_card {
	border-top: var(--opcs-rule-top) solid var(--opcs-orange);
}

.opcs_status_intro {
	margin: 0 0 1.5rem;
	color: var(--opcs-ink-quiet);
	font-size: 0.9375rem;
}

.opcs_status_field {
	margin: 0 0 1.25rem;
}

.opcs_status_label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--opcs-ink-quiet);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.opcs_status_input {
	display: block;
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: var(--opcs-border) solid var(--opcs-line);
	border-radius: var(--opcs-radius-md);
	background: var(--opcs-white);
	color: var(--opcs-navy);
	font-family: var(--opcs-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	transition: border-color var(--opcs-transition);
}

/* Inputs darken their border to navy on focus. No glow, no shadow. */
.opcs_status_input:focus {
	border-color: var(--opcs-navy);
	outline: var(--opcs-border) solid var(--opcs-navy);
	outline-offset: 0.0625rem;
}

.opcs_status_actions {
	margin: 1.5rem 0 0;
}

/*
 * The one committing action on the page, so it takes the accent. Navy on
 * orange, never white on orange.
 */
.opcs_status_button {
	display: block;
	width: 100%;
	padding: 0.875rem 1.375rem;
	border: var(--opcs-border) solid var(--opcs-orange);
	border-radius: var(--opcs-radius-md);
	background: var(--opcs-orange);
	color: var(--opcs-navy);
	font-family: var(--opcs-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--opcs-transition), border-color var(--opcs-transition);
}

.opcs_status_button:hover,
.opcs_status_button:focus {
	border-color: var(--opcs-orange-10);
	background: var(--opcs-orange-10);
}

/* Failures. One appearance for every reason, deliberately. */

.opcs_status_alert {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: var(--opcs-border) solid var(--opcs-orange);
	border-left-width: var(--opcs-rule-top);
	border-radius: var(--opcs-radius-md);
	background: var(--opcs-orange-tint-90);
	color: var(--opcs-navy);
	font-size: 0.9375rem;
}

/* The result */

.opcs_status_ref {
	margin: 0 0 0.375rem;
	color: var(--opcs-ink-quiet);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.opcs_status_greeting {
	margin: 0 0 0.75rem;
	color: var(--opcs-navy);
	font-family: var(--opcs-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
}

.opcs_status_message {
	margin: 0;
	color: var(--opcs-navy);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.opcs_status_message__none {
	color: var(--opcs-ink-quiet);
}

/* Micro-label / value pairs. */
.opcs_status_facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.625rem 1.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: var(--opcs-hairline) solid var(--opcs-line);
}

.opcs_status_facts dt {
	margin: 0;
	color: var(--opcs-ink-quiet);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.opcs_status_facts dd {
	margin: 0;
	color: var(--opcs-navy);
	font-size: 0.9375rem;
	font-weight: 600;
}

.opcs_status_again {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
	text-align: center;
}

/*
 * The navy footer strip: a full-width band of short tracked white caps that
 * bookends the orange top rule. One of the brand's signature patterns, and the
 * reason this page reads as Ohio PC Solutions rather than as a generic form.
 */
.opcs_status_foot {
	padding: 1.25rem 1.5rem;
	background: var(--opcs-navy);
	color: var(--opcs-ink-invert-quiet);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.opcs_status_foot a {
	color: var(--opcs-white);
	font-weight: 600;
	text-decoration: none;
}

.opcs_status_foot a:hover,
.opcs_status_foot a:focus {
	color: var(--opcs-orange);
	text-decoration: underline;
}

.opcs_status_services {
	display: block;
	margin-top: 0.5rem;
	color: var(--opcs-ink-invert-quiet);
}

@media (max-width: 37.5rem) {

	.opcs_status_head {
		padding: 2rem 1rem 0.25rem;
	}

	.opcs_status_title {
		font-size: 1.75rem;
	}

	.opcs_status_main {
		padding: 1.5rem 1rem 2.5rem;
	}

	.opcs_status_form,
	.opcs_status_card {
		padding: 1.25rem;
	}
}