/*
Theme Name: Corveto
Theme URI: https://github.com/pattonwebz/demo-corveto
Description: Child theme for the Corveto demo site — a light, product-UI look for a fictional uptime-monitoring company. Presentation only: page content is ordinary WordPress pages built from core blocks, seeded by scripts/bootstrap-wp.sh.
Author: Demo
Template: twentytwentyfive
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: corveto
*/

/* ==========================================================================
   Corveto — design system
   Light and airy, product-UI rather than brochure. Deliberately unlike the
   Demo Bakery site (dark, photographic, monochrome): the two demos must not
   look like siblings on a projector.

   Contrast is computed, not eyeballed, and stated beside each value. Status
   indicators never rely on colour alone — the state is always present as text.
   ========================================================================== */

:root {
	--cv-ink: #10151c;        /* 17.6:1 on white */
	--cv-ink-soft: #414a57;   /* 8.9:1 on white — AAA body */
	--cv-ink-faint: #5b6472;  /* 6.2:1 on white */
	--cv-line: #e2e6ec;
	--cv-line-strong: #cfd5de;
	--cv-surface: #ffffff;
	--cv-surface-sunk: #f6f8fa;
	--cv-surface-tint: #eef4fb;

	--cv-accent: #14548a;       /* 7.4:1 on white — AAA */
	--cv-accent-strong: #0e3f6b;
	--cv-accent-wash: #e8f0f8;

	--cv-ok: #1c6b3f;
	--cv-ok-wash: #e6f4ec;
	--cv-ok-ink: #14522f;     /* 7.6:1 on the wash */
	--cv-warn: #8a5000;
	--cv-warn-wash: #fdf1e0;
	--cv-warn-ink: #6d3f00;   /* 7.8:1 on the wash */
	--cv-info: #2c5a91;
	--cv-info-wash: #eaf0f8;
	--cv-info-ink: #234067;   /* 8.1:1 on the wash */

	--cv-radius-sm: 6px;
	--cv-radius: 10px;
	--cv-radius-lg: 16px;
	--cv-shadow-1: 0 1px 2px rgb(16 21 28 / 5%), 0 2px 8px rgb(16 21 28 / 5%);
	--cv-shadow-2: 0 2px 4px rgb(16 21 28 / 6%), 0 14px 32px rgb(16 21 28 / 9%);
}

/* --------------------------------------------------------------------------
   Base
   Most typography, spacing and colour comes from theme.json. This file styles
   the things core blocks cannot express on their own.
   -------------------------------------------------------------------------- */

body {
	color: var(--cv-ink);
	-webkit-font-smoothing: antialiased;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 3px solid var(--cv-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Eyebrow — a small uppercase label above a heading
   -------------------------------------------------------------------------- */

.cv-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cv-accent);
}

/* --------------------------------------------------------------------------
   Cards — used for feature grids and metric tiles
   -------------------------------------------------------------------------- */

.cv-card {
	padding: 2rem;
	background: var(--cv-surface);
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius);
	height: 100%;
}

.cv-card h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.cv-card p {
	color: var(--cv-ink-soft);
	margin-bottom: 0;
}

.cv-metric {
	padding: 1.5rem;
	background: var(--cv-surface);
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius);
	height: 100%;
}

.cv-metric__figure {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.cv-metric__label {
	font-weight: 600;
	margin: 0.25rem 0 0;
}

.cv-metric__detail {
	font-size: 0.9375rem;
	color: var(--cv-ink-soft);
	margin: 0.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Status table
   Written as a core/html block so the table keeps <th scope> and a caption.
   The core table block emits neither, and both matter: scope is what makes a
   cell's meaning unambiguous, and the caption is the only thing that tells a
   screen reader user what they have landed in before they hear data.
   -------------------------------------------------------------------------- */

.cv-table-scroll {
	overflow-x: auto;
}

.cv-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cv-surface);
	font-size: 0.9375rem;
}

.cv-table caption {
	padding-bottom: 1rem;
	color: var(--cv-ink-soft);
	text-align: left;
}

.cv-table th,
.cv-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--cv-line);
	vertical-align: top;
}

.cv-table thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cv-ink-soft);
	border-bottom: 1px solid var(--cv-line-strong);
	white-space: nowrap;
}

.cv-table tbody th {
	font-weight: 600;
}

.cv-table .cv-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Status pills
   Colour is never the only channel: the state is spelled out as text beside
   the dot, and the dot's SHAPE differs per state so the three remain
   distinguishable in greyscale.
   -------------------------------------------------------------------------- */

.cv-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2em 0.6em 0.2em 0.5em;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.cv-status__dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	flex: none;
}

.cv-status--operational { background: var(--cv-ok-wash); color: var(--cv-ok-ink); }
.cv-status--operational .cv-status__dot { background: var(--cv-ok); }

.cv-status--degraded { background: var(--cv-warn-wash); color: var(--cv-warn-ink); }
.cv-status--degraded .cv-status__dot { background: var(--cv-warn); border-radius: 2px; }

.cv-status--maintenance { background: var(--cv-info-wash); color: var(--cv-info-ink); }
.cv-status--maintenance .cv-status__dot {
	background: var(--cv-info);
	border-radius: 0;
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Incidents
   -------------------------------------------------------------------------- */

.cv-incident {
	padding-block: 2rem;
	border-bottom: 1px solid var(--cv-line);
}

.cv-incident__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
	color: var(--cv-ink-soft);
}

.cv-incident h3 { margin: 0 0 0.5rem; }
.cv-incident p { margin: 0; color: var(--cv-ink-soft); max-width: 66ch; }

/* --------------------------------------------------------------------------
   Pricing
   The featured plan is marked by a border, a label and its position — never by
   colour alone.
   -------------------------------------------------------------------------- */

.cv-plan {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	background: var(--cv-surface);
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-lg);
	height: 100%;
}

.cv-plan--featured {
	border-color: var(--cv-accent);
	border-width: 2px;
	box-shadow: var(--cv-shadow-2);
}

.cv-plan__badge {
	align-self: flex-start;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--cv-accent-wash);
	color: var(--cv-accent-strong);   /* 9.2:1 on the wash */
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

.cv-plan h3 { margin: 0; }

.cv-plan__price {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.cv-plan__period {
	font-size: 0.9375rem;
	color: var(--cv-ink-soft);
	font-weight: 400;
}

.cv-plan__summary { color: var(--cv-ink-soft); margin: 0; }

.cv-plan ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.cv-plan ul li {
	padding-left: 1.4em;
	position: relative;
	color: var(--cv-ink-soft);
}

.cv-plan ul li::before {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0.55em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--cv-accent);
}

/* --------------------------------------------------------------------------
   Quotes
   Text only. Invented words are never attached to a photograph of a real,
   identifiable person — see media/ATTRIBUTIONS.md.
   -------------------------------------------------------------------------- */

.cv-quote {
	margin: 0;
	padding: 2rem;
	background: var(--cv-surface);
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius);
	height: 100%;
}

.cv-quote blockquote {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-size: 1.25rem;
	line-height: 1.45;
}

.cv-quote figcaption {
	font-size: 0.9375rem;
	color: var(--cv-ink-soft);
}

.cv-quote figcaption strong {
	display: block;
	color: var(--cv-ink);
}

/* --------------------------------------------------------------------------
   Contact details
   -------------------------------------------------------------------------- */

.cv-details {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
}

.cv-details dt {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cv-ink-soft);
}

.cv-details dd {
	margin: 0.25rem 0 0;
	font-size: 1.125rem;
}

.cv-details address { font-style: normal; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Contact form
   Written as a core/html block. Every control has a real <label for>, and the
   hints are wired with aria-describedby rather than left as placeholder text —
   a placeholder satisfies the accessible-name computation, so a scan passes,
   and then vanishes the moment somebody starts typing.
   -------------------------------------------------------------------------- */

.cv-form {
	max-width: 32rem;
}

.cv-form p {
	margin: 0 0 1.25rem;
}

.cv-form label {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

.cv-form input,
.cv-form textarea,
.cv-form select {
	width: 100%;
	padding: 0.6em 0.75em;
	border: 1px solid var(--cv-line-strong);
	border-radius: var(--cv-radius-sm);
	background: var(--cv-surface);
	color: var(--cv-ink);
	font: inherit;
	font-size: 0.9375rem;
}

.cv-form input:hover,
.cv-form textarea:hover,
.cv-form select:hover {
	border-color: var(--cv-ink-faint);
}

.cv-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.cv-hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	color: var(--cv-ink-soft);
}