/*
Theme Name: CompatSense
Theme URI: https://github.com/
Author: connectivity-intelligence
Description: Theme propio, ligero, sin page builder. Ver docs/ARCHITECTURE.md §2 y docs/DESIGN_SYSTEM.md. Slug interno se mantiene "ci-theme" (docs/DESIGN_SYSTEM.md §5).
Version: 0.3.0
Requires at least: 6.4
Requires PHP: 8.3
Text Domain: ci-theme
*/

/* ==========================================================================
   Base / reset — minimal, not a full reset library (keep the theme light).
   ========================================================================== */

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

body {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--ci-color-fg);
	background: var(--ci-color-bg);
	-webkit-font-smoothing: antialiased;
}

/* Phase 7I ("Signal Path", docs/VISUAL_DIRECTION.md): the one typographic
   departure from the system-font body — headings only, self-hosted,
   docs/DESIGN_SYSTEM.md §2. */
h1,
h2,
h3,
h4 {
	font-family: var(--ci-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: var(--ci-color-accent);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.ci-container {
	width: 100%;
	max-width: var(--ci-wide-width);
	margin-inline: auto;
	padding-inline: var(--ci-space-4);
}

.ci-container--narrow {
	max-width: var(--ci-content-width);
}

.ci-stack > * + * {
	margin-top: var(--ci-space-4);
}

.ci-stack--tight > * + * {
	margin-top: var(--ci-space-2);
}

.ci-stack--loose > * + * {
	margin-top: var(--ci-space-8);
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.ci-text-muted {
	color: var(--ci-color-fg-muted);
}

.ci-text-mono {
	font-family: var(--wp--preset--font-family--mono);
}

.ci-text-xs { font-size: var(--wp--preset--font-size--xs); }
.ci-text-small { font-size: var(--wp--preset--font-size--small); }
.ci-text-large { font-size: var(--wp--preset--font-size--large); }

/* ==========================================================================
   Card — base surface for entity summaries, result sections (7D/7E)
   ========================================================================== */

.ci-card {
	background: var(--ci-color-bg);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
	padding: var(--ci-space-6);
	box-shadow: var(--ci-shadow-sm);
}

.ci-card--subtle {
	background: var(--ci-color-bg-subtle);
	border-color: transparent;
	box-shadow: none;
}

/* ==========================================================================
   Button
   ========================================================================== */

.ci-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ci-space-2);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1;
	padding: var(--ci-space-3) var(--ci-space-6);
	border-radius: var(--ci-radius-sm);
	border: var(--ci-border-width) solid transparent;
	cursor: pointer;
	transition: background-color var(--ci-transition-fast), border-color var(--ci-transition-fast), opacity var(--ci-transition-fast);
	text-decoration: none;
}

.ci-button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.ci-button--primary {
	background: var(--ci-color-accent);
	color: var(--ci-color-accent-fg);
}

.ci-button--primary:hover:not(:disabled) {
	opacity: 0.9;
}

.ci-button--secondary {
	background: var(--ci-color-bg);
	border-color: var(--ci-color-border);
	color: var(--ci-color-fg);
}

.ci-button--secondary:hover:not(:disabled) {
	background: var(--ci-color-bg-subtle);
}

/* ==========================================================================
   Badge / status pill — status colors NEVER carry meaning alone; always
   paired with text (docs/DESIGN_SYSTEM.md §3).
   ========================================================================== */

.ci-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ci-space-1);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: var(--ci-space-1) var(--ci-space-3);
	border-radius: var(--ci-radius-full);
}

.ci-badge--success { background: var(--ci-color-success-bg); color: var(--ci-color-success); }
.ci-badge--warning { background: var(--ci-color-warning-bg); color: var(--ci-color-warning); }
.ci-badge--danger { background: var(--ci-color-danger-bg); color: var(--ci-color-danger); }
.ci-badge--neutral { background: var(--ci-color-neutral-bg); color: var(--ci-color-neutral); }

/* ==========================================================================
   Form fields — inputs, select, search combobox base (7C uses these)
   ========================================================================== */

.ci-field {
	display: block;
}

.ci-field__label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: var(--ci-space-2);
}

.ci-field__hint {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--ci-color-fg-muted);
	margin-top: var(--ci-space-1);
}

.ci-input,
.ci-select {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ci-color-fg);
	background: var(--ci-color-bg);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-sm);
	padding: var(--ci-space-3);
	transition: border-color var(--ci-transition-fast);
}

.ci-input:hover,
.ci-select:hover {
	border-color: var(--ci-color-fg-muted);
}

.ci-input:focus-visible,
.ci-select:focus-visible {
	outline: none;
	border-color: var(--ci-color-accent);
	box-shadow: var(--ci-focus-ring);
}

/* ==========================================================================
   Visually-hidden — for screen-reader-only status text (7F)
   ========================================================================== */

.ci-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Site header / footer
   ========================================================================== */

.ci-header {
	border-bottom: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--ci-space-4);
	gap: var(--ci-space-4);
}

.ci-header__brand {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--ci-color-fg);
	text-decoration: none;
}

.ci-header__nav,
.ci-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-6);
}

.ci-header__nav a,
.ci-footer__nav a,
.ci-footer__consent-btn {
	color: var(--ci-color-fg);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.ci-header__nav a:hover,
.ci-footer__nav a:hover,
.ci-footer__consent-btn:hover {
	color: var(--ci-color-accent);
}

.ci-footer__consent-btn {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	cursor: pointer;
}

.ci-footer {
	border-top: var(--ci-border-width) solid var(--ci-color-border);
	margin-top: var(--ci-space-16);
}

.ci-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ci-space-4);
	padding-block: var(--ci-space-8);
}

.ci-footer__inner p {
	margin: 0;
}

/* ==========================================================================
   Home (Phase 7J — hero product demo, concrete "How it works", trust
   pillars; docs/VISUAL_DIRECTION.md §7J)
   ========================================================================== */

.ci-home {
	max-width: var(--ci-wide-width);
	padding-block: var(--ci-space-12) var(--ci-space-16);
}

.ci-home__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--ci-space-12);
	padding-block: var(--ci-space-8) var(--ci-space-16);
}

.ci-home__hero-copy {
	max-width: var(--ci-content-width);
}

.ci-home__hero-title {
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.15;
	margin: 0;
}

.ci-home__hero-demo {
	display: flex;
	flex-direction: column;
	gap: var(--ci-space-3);
}

.ci-home__hero-demo-caption {
	margin: 0;
	text-align: center;
}

.ci-home__how {
	max-width: var(--ci-wide-width);
}

.ci-home__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ci-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.ci-home__steps li {
	display: flex;
	flex-direction: column;
	gap: var(--ci-space-1);
}

.ci-home__steps li h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.ci-home__steps li p {
	margin: 0;
}

.ci-home__steps-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--ci-space-2);
	border-radius: var(--ci-radius-full);
	background: var(--ci-color-accent);
	color: var(--ci-color-accent-fg);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--sans);
}

/* A thin connecting line behind the three steps — the "How it works"
   section is a light-touch application of the Signal Path language
   (7J.4: YES for How it works), not a decorative repeat of the SVG. */
@media (min-width: 769px) {
	.ci-home__steps::before {
		content: "";
		position: absolute;
		top: 0.875rem;
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 2px;
		background: var(--ci-color-border);
		z-index: 0;
	}
	.ci-home__steps-index {
		position: relative;
		z-index: 1;
	}
}

.ci-home__pillars {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ci-space-6);
}

.ci-home__pillar {
	display: flex;
	flex-direction: column;
	gap: var(--ci-space-1);
	padding-top: var(--ci-space-4);
	border-top: 2px solid var(--ci-color-accent);
}

.ci-home__pillar h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.ci-home__pillar p {
	margin: 0;
}

.ci-home__pillar-mark {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--ci-color-fg-muted);
}

@media (max-width: 768px) {
	.ci-home__hero {
		grid-template-columns: 1fr;
	}
	.ci-home__hero-demo {
		order: -1;
		max-width: 22rem;
		margin-inline: auto;
	}
	.ci-home__steps,
	.ci-home__pillars {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Compatibility Checker (7C) — steps, combobox, requirements form
   ========================================================================== */

.ci-checker {
	padding-block: var(--ci-space-12) var(--ci-space-16);
}

/* Phase 7J: decorative setup-chain indicator — see markup comment in
   compatibility.php. Purely visual reinforcement of the Signal Path
   language; never a second source of truth for form state. */
.ci-checker__chain {
	display: flex;
	align-items: center;
	margin-bottom: var(--ci-space-6);
}

.ci-checker__chain-node {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ci-space-2) var(--ci-space-4);
	border: 2px solid var(--ci-color-border);
	border-radius: var(--ci-radius-full);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--ci-color-fg-muted);
	transition: border-color var(--ci-transition-base), color var(--ci-transition-base);
}

.ci-checker__chain-node.is-active {
	border-color: var(--ci-color-accent);
	color: var(--ci-color-fg);
}

.ci-checker__chain-node.is-complete {
	border-color: var(--ci-color-success);
	color: var(--ci-color-success);
}

.ci-checker__chain-line {
	flex: 1;
	height: 2px;
	background: var(--ci-color-border);
	margin-inline: var(--ci-space-2);
	transition: background-color var(--ci-transition-base);
}

.ci-checker__chain-line.is-complete {
	background: var(--ci-color-success);
}

@media (max-width: 480px) {
	.ci-checker__chain-node span {
		font-size: var(--wp--preset--font-size--xs);
	}
}

.ci-checker__step[aria-disabled="true"] {
	opacity: 0.5;
}

.ci-checker__step[aria-disabled="true"] .ci-input,
.ci-checker__step[aria-disabled="true"] .ci-select {
	pointer-events: none;
}

.ci-checker__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ci-space-4);
}

.ci-checker__custom-resolution {
	display: flex;
	gap: var(--ci-space-2);
	margin-top: var(--ci-space-2);
}

/* Fase 10 QA: an author-stylesheet `display` rule always wins over the
   user-agent `[hidden] { display: none }` rule regardless of source order
   (origin outranks specificity) — without this, the "Custom..." width/
   height inputs stayed visible and tabbable even while `hidden`, on both
   the Checker and the new bandwidth calculator (same class/JS pattern). */
.ci-checker__custom-resolution[hidden] {
	display: none;
}

.ci-checker__advanced {
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-sm);
	padding: var(--ci-space-3) var(--ci-space-4);
}

.ci-checker__advanced summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.ci-checker__advanced[open] summary {
	margin-bottom: var(--ci-space-4);
}

/* Combobox — WAI-ARIA 1.2 editable combobox with list autocomplete */

.ci-combobox {
	position: relative;
}

.ci-combobox__listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--ci-space-1));
	left: 0;
	right: 0;
	margin: 0;
	padding: var(--ci-space-1);
	list-style: none;
	background: var(--ci-color-bg);
	border: var(--ci-border-width) solid var(--ci-color-border);
	border-radius: var(--ci-radius-md);
	box-shadow: var(--ci-shadow-md);
	max-height: 16rem;
	overflow-y: auto;
}

.ci-combobox__option {
	padding: var(--ci-space-2) var(--ci-space-3);
	border-radius: var(--ci-radius-sm);
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.ci-combobox__option-model {
	font-weight: 500;
}

.ci-combobox__option-meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--ci-color-fg-muted);
}

.ci-combobox__option[aria-selected="true"],
.ci-combobox__option:hover {
	background: var(--ci-color-bg-subtle);
}

.ci-combobox__loading {
	padding: var(--ci-space-2) var(--ci-space-3);
	color: var(--ci-color-fg-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 768px) {
	.ci-checker__grid {
		grid-template-columns: 1fr;
	}
	.ci-checker__custom-resolution {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.ci-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.ci-header__nav {
		gap: var(--ci-space-4);
	}
}

/* ==========================================================================
   Compatibility Result (7D)
   ========================================================================== */

.ci-result__header {
	text-align: left;
}

/* Phase 7J: non-color distinction between result states (external
   review — "do not rely on color alone"). Decorative (aria-hidden), the
   badge text carries the real meaning. */
.ci-result__badge-row {
	display: flex;
	align-items: center;
	gap: var(--ci-space-2);
}

.ci-result__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.ci-result__mark--success { color: var(--ci-color-success); }
.ci-result__mark--warning { color: var(--ci-color-warning); }
.ci-result__mark--danger { color: var(--ci-color-danger); }
.ci-result__mark--neutral { color: var(--ci-color-neutral); }

.ci-result__headline {
	margin: var(--ci-space-3) 0 var(--ci-space-2);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.25;
}

/* Phase 7I signature element — "Signal Path" (docs/VISUAL_DIRECTION.md).
   ci-entity-components.js's renderSignalPath(). SVG scales via viewBox,
   no fixed pixel width — safe down to the 390px mobile viewport. */
.ci-signal-path-figure {
	margin: var(--ci-space-4) 0;
}

.ci-signal-path {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
}

.ci-signal-path__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	fill: var(--ci-color-fg);
}

.ci-signal-path__caption {
	margin: var(--ci-space-2) 0 0;
}

/* Phase 7J hero variant — same component language as the Result's Signal
   Path, applied once, at the top of the funnel, to demonstrate the
   product concept (7J.3/7J.4). Not reused decoratively elsewhere. */
.ci-signal-path--hero {
	max-width: 26rem;
	margin-inline: auto;
}

.ci-signal-path__verdict-mark {
	font-size: 20px;
	fill: var(--ci-color-success);
	font-weight: 700;
}

.ci-signal-path__verdict-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	fill: var(--ci-color-success);
}

.ci-result__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ci-space-2) var(--ci-space-4);
	padding-block: var(--ci-space-2);
	border-bottom: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-result__row p {
	flex-basis: 100%;
	margin: 0;
}

.ci-result__row:last-child {
	border-bottom: none;
}

.ci-result__row-label {
	font-weight: 500;
}

#ci-result .ci-checker__advanced summary {
	font-weight: 600;
}

/* ==========================================================================
   Entity components (7E) — device summary, evidence card
   ========================================================================== */

.ci-entity-summary {
	display: flex;
	align-items: center;
	gap: var(--ci-space-2);
	margin-top: var(--ci-space-3);
	padding: var(--ci-space-2) var(--ci-space-3);
	background: var(--ci-color-bg-subtle);
	border-radius: var(--ci-radius-sm);
}

.ci-entity-summary__name {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}

.ci-evidence-card {
	display: flex;
	flex-direction: column;
	gap: var(--ci-space-1);
	padding-block: var(--ci-space-2);
	border-bottom: var(--ci-border-width) solid var(--ci-color-border);
}

.ci-evidence-card:last-child {
	border-bottom: none;
}

/* ==========================================================================
   Methodology (Phase 7J — light-touch Signal Path intro, 7J.4/7J.9:
   sober, not decorative; one line, no card, no color beyond the accent
   arrows already used elsewhere on the page)
   ========================================================================== */

.ci-methodology__chain {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ci-space-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ci-color-fg-muted);
}

.ci-methodology__chain span[aria-hidden="true"] {
	color: var(--ci-color-accent);
}

/* ==========================================================================
   Skip link
   ========================================================================== */

.ci-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ci-color-accent);
	color: var(--ci-color-accent-fg);
	padding: var(--ci-space-3) var(--ci-space-4);
	border-radius: 0 0 var(--ci-radius-sm) 0;
}

.ci-skip-link:focus {
	left: 0;
}