/* Hallmark · genre: atmospheric · macrostructure: Ecosystem Index / Long Document (inherited)
 * design-system: design-123bet.md · theme: custom · vibe: "late-night neon, boxed, smooth, electric"
 * source of truth: 123bet Brand Guidelines v1.0 (Northgate Nine, 28 Jul 2026)
 * paper: Deep Ink oklch(19.6% 0.025 214) · accent: Volt Purple oklch(62.2% 0.221 302)
 * second signal: Electric Cyan oklch(76% 0.130 205) · spark: Neon Lime oklch(85.9% 0.214 125)
 * display: Sora · body: Inter · axes: dark / geometric-sans / cool (purple on teal-black)
 * nav: N11 mega-menu in an N5 floating-pill shell · footer: Ft5 statement
 * studied: no · context: user-provided · pre-emit critique: P5 H4 E4 S5 R4 V5
 *
 * 123Bet — the night-mode skin for the Highstakes platform, on the parent's own
 * templates. Same layouts; a different surface language: elevated rounded boxes
 * instead of hairlines, a floating pill navbar instead of a broadsheet masthead,
 * one violet accent with a cyan second signal, and no serif anywhere.
 *
 * This file replaces the parent's assets/css/theme.css (the parent enqueues the
 * path through get_theme_file_uri(), which resolves child-first) and layers on top
 * of the parent's chrome-night.css, which carries the tokens and every shared
 * component. What's left here is only what belongs to *these* layouts: the post
 * card, the magazine split, the article split and the immersive hero.
 *
 * Every colour references a theme.json preset — no inline OKLCH in this file.
 */

/* ================================================================= Brand logo */
/* The 123Bet lockup — "123" in violet, "bet" in the band's ink, and the gradient
 * arc sweeping violet to cyan. It ships as two files because the wordmark is a
 * flat brand colour, not a tintable one: #fff on a dark band, #06181c on a light
 * one. Named for the ground they sit on rather than the artwork's own lightness,
 * which is the direction the supplied filenames read in and the easier one to get
 * backwards.
 *
 * It lives here and not in the parent's chrome-night.css: the parent owns the
 * *treatment* of a masthead, but this is 123Bet's mark, and a shared sheet has no
 * business pointing at one child's asset directory.
 *
 * Painted onto the site-title link rather than inlined as markup, so the core
 * block keeps resolving the real home URL and the accessible name stays the site
 * name. The text is pushed out of the box rather than hidden — display:none or
 * visibility:hidden would take it from screen readers too. */
.hs-navbar--pill              { --hs-logo: url("../img/logo-on-dark.svg"); }
[data-theme="light"] .hs-navbar--pill { --hs-logo: url("../img/logo-on-light.svg"); }
/* The footer band stays night in both themes, so its lockup does too. If the
 * footer is ever lightened, this is the line that moves with it. */
.hs-footer                    { --hs-logo: url("../img/logo-on-dark.svg"); }

.hs-logo.wp-block-site-title {
	/* Block axis only. The inline margins belong to the parent, which hangs
	 * `margin-right: auto` here on mobile to push the burger to the far edge — a
	 * blanket `margin: 0` outranks that rule and collapses the two together. */
	margin-block: 0;
	line-height: 0; /* the anchor is the whole box; no half-leading around it */
}
.hs-logo.wp-block-site-title a {
	display: block;
	/* Width drives the pair, not height — the brand's constraint is a minimum
	 * *width*, and the artwork is 372.96 × 166.86, so the height is width ÷ 2.2352.
	 *
	 * 124px is **under the guidelines' 140px digital floor** (§02), by request, and
	 * it is the one place this theme knowingly undercuts a hard brand constraint —
	 * the display-face substitution aside, which at least matches behaviour. What
	 * bought it: the pill is packed at its 1180px cap on wide desktop, where the
	 * search field is the item that yields, and 16px off the mark plus the tighter
	 * column gap in the parent's chrome go straight back to that field. Raise this
	 * to var(--hs-logo-min-w) to return to spec; nothing else has to move with it,
	 * since the pill's height is derived from the floor and not from this.
	 *
	 * One width at every tier, not a per-tier ramp. The three shrinks that used to
	 * live at the foot of this block are gone: they put the mark at 78–92px below
	 * 1366px, which is small enough that the wordmark stops resolving. */
	--hs-logo-w: 124px;
	--hs-logo-h: calc(var(--hs-logo-w) / 2.2352);
	height: var(--hs-logo-h);
	width: var(--hs-logo-w);
	background: var(--hs-logo) no-repeat center / contain;
	/* Push the text out of the box, keeping it in the accessibility tree. */
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
}
/* No hover state, by request — the logo is a fixed brand asset and stays put. The
 * parent's chrome-night.css recolours .hs-pill .wp-block-site-title a on hover;
 * that lands on text this element no longer shows, so it needs no undoing. */

/* The parent aligns these two lockups on the baseline, because the mark they used
 * to hold was a set of bars meant to stand on the wordmark's. An image box has no
 * such relationship — its baseline is its bottom edge — so they centre now. Same
 * selectors and specificity as the parent's, winning on load order. */
body .hs-masthead__brand,
body .hs-footer__lockup { align-items: center; }

/* The footer has room to run the mark larger than the pill's floor. */
.hs-footer .hs-logo.wp-block-site-title a { --hs-logo-w: 190px; }

/* ================================================================ Post cards */
/* Elevated boxes — the parent's hairline card, re-cut as a filled surface */
.hs-post-grid { --wp--style--block-gap: var(--wp--preset--spacing--40); }
.hs-card {
	background: var(--hs-surface);
	border: 1px solid var(--hs-rule);
	border-radius: var(--radius-card);
	overflow: hidden;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	transition: transform var(--dur-short) var(--hs-ease),
		border-color var(--dur-short) var(--hs-ease),
		box-shadow var(--dur-short) var(--hs-ease);
}
.hs-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklch, var(--hs-accent) 45%, var(--hs-rule));
	box-shadow: var(--hs-lift);
}
.hs-card > * { padding-left: 0; padding-right: 0; }
.hs-card .hs-card__img,
.hs-card > figure {
	padding: 0;
	margin: 0 0 0.6rem;
	order: -1;
}
.hs-card__img img {
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-media);
}
.hs-card__cat a { color: var(--hs-accent-strong); text-decoration: none; }
.hs-card h3 {
	margin: 0;
	line-height: 1.2;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
}
.hs-card h3 a {
	color: var(--hs-ink);
	text-decoration: none;
	transition: color var(--dur-short) var(--hs-ease);
}
.hs-card h3 a:hover { color: var(--hs-accent-strong); }
.hs-card__meta,
.hs-card .wp-block-post-date {
	color: var(--hs-muted);
	font-family: var(--hs-body);
	font-size: 0.78rem;
	letter-spacing: 0;
	margin-top: auto;
}
.hs-card .wp-block-post-excerpt { color: var(--hs-ink-2); }

@media (prefers-reduced-motion: reduce) {
	.hs-card:hover { transform: none; }
}

/* ====================================================== Magazine home layout */
.hs-home-split { align-items: start; }
.hs-home-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}
.hs-home-main,
.hs-hub-main { min-width: 0; }
.hs-hub-split { align-items: start; }

/* ====================================================== Article (two-column) */
.hs-article-split { align-items: start; }
.hs-article-main { min-width: 0; }
.hs-article-main .wp-block-post-featured-image { margin-bottom: var(--wp--preset--spacing--40); }
.hs-article-main .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.hs-article > .hs-mag-feed--grid { margin-top: var(--wp--preset--spacing--60); }

/* ============================================ Immersive post hero (template) */
.hs-post-hero.wp-block-cover {
	border-radius: var(--radius-card);
	overflow: hidden;
}
.hs-post-hero .wp-block-cover__inner-container {
	padding-block: clamp(1.5rem, 4vw, 3rem);
	padding-inline: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	animation: hs-rise var(--dur-mid) var(--hs-ease) both;
}
.hs-post-hero__cat { margin: 0; }
.hs-post-hero__cat a {
	display: inline-block;
	background: var(--hs-band);
	color: var(--hs-accent-strong);
	font-family: var(--hs-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.36rem 0.8rem;
	border-radius: 999px;
	text-decoration: none;
}
.hs-post-hero__title {
	color: var(--hs-on-band);
	font-family: var(--hs-display);
	font-weight: 800;
	font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.7rem);
	line-height: 1.06;
	letter-spacing: -0.035em;
	margin: 0;
	max-width: 22ch;
	overflow-wrap: anywhere;
	min-width: 0;
}
.hs-post-hero__meta {
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--hs-on-band);
}
.hs-post-hero__meta a { color: var(--hs-on-band); font-weight: 700; }
.hs-post-hero__meta .wp-block-post-author__byline { color: var(--hs-on-band); }
.hs-post-hero__meta .wp-block-post-author__avatar img { border: 1px solid color-mix(in oklch, var(--hs-on-band) 35%, transparent); }

/* Hero pages sit flush under the floating pill's body offset. */
.wp-site-blocks > .hs-post-hero,
.wp-site-blocks > .hs-main--hub { margin-top: 0; }

/* Search: the magazine split is the "has results" view. */
body.search-no-results .hs-home-split { display: none; }

/* ================================================================== Mobile */
@media (max-width: 782px) {
	.hs-post-hero.wp-block-cover { min-height: 52vh !important; }
	.hs-post-hero__meta { flex-direction: row; }
}