/*
Theme Name: Ayght Sports
Theme URI: https://www.ayghtsports.com
Author: Ayght LLC
Description: Information theme for Ayght Sports. Probability-first sports research. Carries the Ayght platform design language: navy anchor, semantic value colours, tabular figures.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ayghtsports
*/

/* -------------------------------------------------------------------------
   Design tokens live in theme.json. This file holds component styles only.
   Never hardcode a hex value here -- reference the custom properties that
   theme.json emits, so the palette stays changeable in one place.
   ------------------------------------------------------------------------- */

:root {
	--ay-navy:      var(--wp--preset--color--navy);
	--ay-depth:     var(--wp--preset--color--depth);
	--ay-positive:  var(--wp--preset--color--positive);
	--ay-negative:  var(--wp--preset--color--negative);
	--ay-ink:       var(--wp--preset--color--ink);
	--ay-paper:     var(--wp--preset--color--paper);
	--ay-rule:      var(--wp--preset--color--rule);
	--ay-muted:     var(--wp--preset--color--muted);

	--ay-radius:    8px;
	--ay-card-pad:  18px;
}

/* --- Event card -----------------------------------------------------------
   Direct descendant of the platform card. Same structure, same colours,
   theme-controlled instead of inline.
   ------------------------------------------------------------------------ */

.ay-card {
	background: #fff;
	border: 1px solid var(--ay-rule);
	border-radius: var(--ay-radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.ay-card__head {
	background: var(--ay-navy);
	color: #fff;
	padding: 14px var(--ay-card-pad);
	display: flex;
	align-items: center;
	gap: 14px;
}

.ay-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.ay-card__meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.72;
	margin-top: 3px;
}

.ay-card__body { padding: var(--ay-card-pad); }

/* --- Monogram -------------------------------------------------------------
   In-house identity mark. No third-party imagery anywhere on this site.
   ------------------------------------------------------------------------ */

.ay-mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
}

.ay-mark--round { border-radius: 50%; }

.ay-mark--onlight {
	background: var(--ay-paper);
	color: var(--ay-muted);
}

/* --- Figures --------------------------------------------------------------
   Every number on this site is monospaced and tabular. Probability columns
   must align down the page.
   ------------------------------------------------------------------------ */

.ay-fig,
.ay-table td.ay-num,
.ay-prob {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.ay-prob {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ay-ink);
}

.ay-prob__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ay-muted);
	margin-top: 2px;
}

.ay-up   { color: var(--ay-positive); }
.ay-down { color: var(--ay-negative); }

/* --- Data table ---------------------------------------------------------- */

.ay-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.ay-table th {
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ay-muted);
	padding: 8px 10px;
	border-bottom: 1px solid var(--ay-rule);
}

.ay-table td {
	padding: 10px;
	border-bottom: 1px solid var(--ay-rule);
}

.ay-table td.ay-num { text-align: right; }
.ay-table tr:last-child td { border-bottom: 0; }

/* --- Horizon rail ---------------------------------------------------------
   The signature element. A time axis showing how far forward coverage runs.
   The short bright segment is the window bookmakers publish; the long
   segment is Ayght's. The gap is the product.
   ------------------------------------------------------------------------ */

.ay-horizon {
	position: relative;
	padding: 26px 0 34px;
}

.ay-horizon__track {
	position: relative;
	height: 3px;
	background: var(--ay-rule);
	border-radius: 2px;
}

.ay-horizon__seg {
	position: absolute;
	top: 0;
	height: 3px;
	border-radius: 2px;
}

.ay-horizon__seg--book {
	background: var(--ay-muted);
	left: 0;
}

.ay-horizon__seg--ayght {
	background: var(--ay-depth);
	left: 0;
	height: 3px;
	top: 12px;
}

.ay-horizon__tick {
	position: absolute;
	top: -22px;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--ay-muted);
	white-space: nowrap;
}

.ay-horizon__tick::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 18px;
	width: 1px;
	height: 6px;
	background: var(--ay-rule);
}

.ay-horizon__key {
	display: flex;
	gap: 22px;
	margin-top: 26px;
	font-size: 0.8125rem;
	color: var(--ay-muted);
}

.ay-horizon__key span::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	margin-right: 7px;
	vertical-align: middle;
}

.ay-horizon__key .is-book::before  { background: var(--ay-muted); }
.ay-horizon__key .is-ayght::before { background: var(--ay-depth); }

/* --- Quality floor ------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.ay-card a:focus-visible {
	outline: 2px solid var(--ay-depth);
	outline-offset: 2px;
}

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

@media (max-width: 600px) {
	.ay-card__head { gap: 10px; padding: 12px 14px; }
	.ay-mark { width: 38px; height: 38px; font-size: 0.8125rem; }
	.ay-prob { font-size: 1.25rem; }
	.ay-horizon__key { flex-direction: column; gap: 8px; }
}

/* =========================================================================
   HOME PAGE
   ========================================================================= */

/* --- Hero ---------------------------------------------------------------- */

.ay-hero {
	padding: clamp(40px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
}

.ay-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ay-muted);
	margin: 0 0 18px;
}

.ay-hero__head {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2rem, 5.2vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.032em;
	color: var(--ay-navy);
	margin: 0 0 20px;
	max-width: 20ch;
}

.ay-hero__sub {
	font-size: clamp(1rem, 1.9vw, 1.1875rem);
	line-height: 1.6;
	color: var(--ay-ink);
	max-width: 56ch;
	margin: 0;
}

/* --- Horizon rail, hero variant ------------------------------------------
   The signature. Two segments on one time axis. The market segment is short
   because the market has not priced these games yet. That gap is the point,
   so it gets the one animated moment on the page and nothing else moves.
   ------------------------------------------------------------------------ */

.ay-horizon--hero { padding: 8px 0 0; }

.ay-horizon--hero .ay-horizon__row {
	display: grid;
	grid-template-columns: 84px 1fr;
	align-items: center;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ay-rule);
}

.ay-horizon--hero .ay-horizon__row:last-child { border-bottom: 0; }

.ay-horizon__sport {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--ay-navy);
}

.ay-horizon__bars { position: relative; }

.ay-bar {
	position: relative;
	height: 7px;
	border-radius: 4px;
	margin: 5px 0;
	transform-origin: left center;
}

.ay-bar--book  { background: #cfd8e0; }
.ay-bar--ayght { background: var(--ay-depth); }

.ay-bar__tag {
	position: absolute;
	left: calc(100% + 9px);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	white-space: nowrap;
	color: var(--ay-muted);
}

.ay-bar--ayght .ay-bar__tag { color: var(--ay-depth); font-weight: 500; }

.ay-bar--empty {
	background: repeating-linear-gradient(
		90deg, var(--ay-rule) 0 5px, transparent 5px 10px);
	height: 7px;
}

.ay-horizon__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-left: 100px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	color: var(--ay-muted);
}

@keyframes ay-extend { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ay-bar--anim {
	animation: ay-extend 900ms cubic-bezier(0.16, 0.84, 0.34, 1) both;
}

.ay-bar--anim.ay-bar--ayght { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
	.ay-bar--anim { animation: none; }
}

/* --- Section furniture --------------------------------------------------- */

.ay-section { padding: clamp(36px, 5vw, 64px) 0; }

.ay-section + .ay-section { border-top: 1px solid var(--ay-rule); }

.ay-section__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ay-muted);
	margin: 0 0 10px;
}

.ay-section__head {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.022em;
	color: var(--ay-navy);
	margin: 0 0 12px;
}

.ay-section__note {
	font-size: 0.9375rem;
	color: var(--ay-muted);
	max-width: 62ch;
	margin: 0 0 26px;
}

/* --- Forward event grid -------------------------------------------------- */

.ay-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 16px;
}

.ay-event {
	border: 1px solid var(--ay-rule);
	border-radius: var(--ay-radius);
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.ay-event__head {
	background: var(--ay-navy);
	color: #fff;
	padding: 9px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.ay-event__league {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	opacity: 0.8;
}

.ay-event__lead {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	background: rgba(255, 255, 255, 0.16);
	padding: 3px 8px;
	border-radius: 20px;
	white-space: nowrap;
}

.ay-event__side {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
}

.ay-event__side + .ay-event__side { border-top: 1px solid var(--ay-rule); }

.ay-event__name {
	flex: 1;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ay-ink);
	line-height: 1.3;
}

.ay-event__pct {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.1875rem;
	font-weight: 500;
	color: var(--ay-navy);
	letter-spacing: -0.02em;
}

.ay-event__foot {
	margin-top: auto;
	padding: 9px 14px;
	background: var(--ay-paper);
	border-top: 1px solid var(--ay-rule);
	font-size: 0.75rem;
	color: var(--ay-muted);
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.ay-event__market { font-family: var(--wp--preset--font-family--mono); }

.ay-empty {
	border: 1px dashed var(--ay-rule);
	border-radius: var(--ay-radius);
	padding: 30px;
	text-align: center;
	color: var(--ay-muted);
	font-size: 0.9375rem;
}

@media (max-width: 600px) {
	.ay-horizon--hero .ay-horizon__row { grid-template-columns: 62px 1fr; gap: 11px; }
	.ay-horizon__scale { padding-left: 73px; }
	.ay-bar__tag { position: static; display: block; transform: none; margin-top: 3px; }
	.ay-hero__head { max-width: none; }
}

/* =========================================================================
   TOURNAMENT BOARD
   ========================================================================= */

.ay-tour { margin: 0 0 clamp(32px, 5vw, 56px); }

.ay-tour__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ay-navy);
}

.ay-tour__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.5rem, 3.4vw, 2.125rem);
	line-height: 1.12;
	letter-spacing: -0.026em;
	color: var(--ay-navy);
	margin: 0;
}

.ay-tour__sub {
	font-size: 0.9375rem;
	color: var(--ay-muted);
	margin: 5px 0 0;
}

.ay-tour__status {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ay-positive);
	border: 1px solid var(--ay-positive);
	border-radius: 20px;
	padding: 4px 11px;
	margin-top: 5px;
}

/* --- Field coverage callout ---------------------------------------------
   The breadth claim, rendered rather than asserted.
   ----------------------------------------------------------------------- */

.ay-coverage {
	display: flex;
	align-items: baseline;
	gap: 13px;
	padding: 20px 0 22px;
	border-bottom: 1px solid var(--ay-rule);
}

.ay-coverage__fig {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ay-depth);
}

.ay-coverage__txt {
	font-size: 0.9375rem;
	color: var(--ay-ink);
	max-width: 44ch;
	line-height: 1.5;
}

/* --- Board -------------------------------------------------------------- */

.ay-board { margin-top: 4px; }

.ay-board__hd,
.ay-row__sum {
	display: grid;
	grid-template-columns: 30px 30px 1fr 82px 82px 68px;
	align-items: center;
	gap: 11px;
}

.ay-board__hd {
	grid-template-columns: 30px 30px 1fr 82px 82px 68px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ay-rule);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ay-muted);
}

.ay-board__c1 { grid-column: 3; }
.ay-board__c2 { grid-column: 4; text-align: right; }
.ay-board__c3 { grid-column: 5; text-align: right; }
.ay-board__c4 { grid-column: 6; text-align: right; }

.ay-board__split {
	margin-top: 22px;
	padding: 9px 0;
	border-top: 1px solid var(--ay-rule);
	border-bottom: 1px solid var(--ay-rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ay-muted);
}

/* --- Row ---------------------------------------------------------------- */

.ay-row { border-bottom: 1px solid var(--ay-rule); }

.ay-row__sum {
	padding: 11px 0;
	cursor: pointer;
	list-style: none;
}

.ay-row__sum::-webkit-details-marker { display: none; }

.ay-row__sum:hover { background: var(--ay-paper); }

.ay-row__sum:focus-visible {
	outline: 2px solid var(--ay-depth);
	outline-offset: -2px;
}

.ay-row__rank {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
	color: var(--ay-muted);
	text-align: right;
}

.ay-row__sum .ay-mark {
	width: 26px;
	height: 26px;
	font-size: 0.625rem;
}

.ay-row__name {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ay-ink);
	line-height: 1.3;
}

.ay-row__flag {
	font-family: var(--wp--preset--font-family--mono);
	font-style: normal;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ay-muted);
	margin-left: 6px;
}

.ay-row__ay,
.ay-row__bk,
.ay-row__df {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	font-size: 0.9375rem;
}

.ay-row__ay { color: var(--ay-navy); font-weight: 500; }
.ay-row__bk { color: var(--ay-muted); }
.ay-row__df { font-size: 0.875rem; }

.ay-none {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 0.6875rem;
	color: var(--ay-muted);
}

.ay-row--out .ay-row__name,
.ay-row--out .ay-row__ay { color: var(--ay-muted); }

.ay-row__body {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 4px 0 18px 71px;
}

.ay-row__note {
	font-size: 0.8125rem;
	color: var(--ay-muted);
	margin: 0;
	max-width: 46ch;
	line-height: 1.5;
}

.ay-spark { display: block; flex-shrink: 0; }

.ay-spark--none {
	font-size: 0.75rem;
	color: var(--ay-muted);
	white-space: nowrap;
}

.ay-tour__foot {
	margin-top: 22px;
	font-size: 0.8125rem;
	color: var(--ay-muted);
	max-width: 66ch;
	line-height: 1.55;
}

@media (max-width: 700px) {
	.ay-board__hd,
	.ay-row__sum {
		grid-template-columns: 24px 1fr 66px 66px;
		gap: 9px;
	}
	.ay-board__hd .ay-board__c1 { grid-column: 2; }
	.ay-board__hd .ay-board__c2 { grid-column: 3; }
	.ay-board__hd .ay-board__c3 { grid-column: 4; }
	.ay-board__hd .ay-board__c4 { display: none; }
	.ay-row__sum .ay-mark { display: none; }
	.ay-row__df { display: none; }
	.ay-row__body { padding-left: 33px; flex-direction: column; align-items: flex-start; gap: 10px; }
	.ay-coverage__fig { font-size: 2rem; }
}