/* Hithub Arena: the design system. Colours, type, buttons, header, footer. Loaded on every page. */

/* One family, one job per width: wide for display, normal for reading. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	unicode-range: U+20A0-20AB, U+20AD-20C0; /* Carries the rupee sign. */
}

:root {
	--grass: #007A3A;
	--grass-2: #006F33;
	--chalk: #F8F9F3;
	--sign: #FFC200;
	--sign-hot: #FFD447;
	--blue: #123EB2;
	--ink: #0D1F16;
	--ink-soft: #425148;
	--line: rgba(11, 36, 21, .16);
	--line-strong: rgba(11, 36, 21, .4);
	--error: #B42318;

	--font-display: "Archivo", Arial, sans-serif;
	--font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ease: cubic-bezier(.22, 1, .36, 1);

	--gutter: 16px;
	--max: 1200px;
	--radius-btn: 3px;
	--radius: 3px;
	--bar-h: 4rem;
}

@media (min-width: 768px) {
	:root { --gutter: 40px; }
}
/* Large monitors: every rem-based size grows with the screen, so nothing looks tiny on 2K and 4K. */
@media (min-width: 1920px) {
	:root { font-size: clamp(16px, .84vw, 26px); --gutter: 3.5vw; }
}

/* `.wp-theme-astra` lifts these over Astra's own inline typography. */
body.wp-theme-astra,
.wp-theme-astra button,
.wp-theme-astra input,
.wp-theme-astra select,
.wp-theme-astra textarea { font-family: var(--font-body); }
.wp-theme-astra h1, .wp-theme-astra h2, .wp-theme-astra h3, .wp-theme-astra h4, .wp-theme-astra h5, .wp-theme-astra h6,
.wp-theme-astra .entry-title { font-family: var(--font-display) !important; font-stretch: 112%; letter-spacing: -.025em; text-transform: none !important; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--sign); color: var(--ink); }

.skip-link {
	position: absolute; left: var(--gutter); top: -100px; z-index: 100;
	background: var(--ink); color: var(--chalk); padding: 12px 16px; border-radius: var(--radius-btn);
}
.skip-link:focus { top: 12px; }

/* Buttons are painted: flat enamel that presses in. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border-radius: var(--radius-btn);
	font: 600 1rem/1 var(--font-body);
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn:focus-visible,
.sticky-bar a:focus-visible,
.site-bar a:focus-visible,
.site-menu summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}
.btn--book, .btn--book:visited { background: var(--sign); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 36, 21, .18); }
.btn--book:hover, .btn--book:focus { background: var(--sign-hot); color: var(--ink); }
.btn--ink, .btn--ink:visited { background: var(--ink); color: var(--chalk); }
.btn--ink:hover, .btn--ink:focus { background: var(--grass); color: #fff; }
.btn--chalk, .btn--chalk:visited { border-color: #fff; color: #fff; }
.btn--chalk:hover, .btn--chalk:focus { background: #fff; color: var(--ink); }
.btn--large { min-height: 60px; padding: 0 40px; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Header: one chalk bar on every page. */
.site-bar {
	position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h);
	display: flex; align-items: center; gap: 32px;
	padding: 0 var(--gutter);
	background: var(--chalk);
	box-shadow: 0 1px 0 var(--line);
	color: var(--ink);
	font-family: var(--font-body);
}
.site-bar *, .site-foot * { box-sizing: border-box; }
.admin-bar .site-bar { top: var(--wp-admin--admin-bar--height, 32px); }
#page { padding-top: var(--bar-h); }
.site-bar__brand, .site-bar__brand:hover, .site-bar__brand:visited {
	font: 600 .9375rem/1 var(--font-display); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; color: var(--ink);
	margin-right: auto; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; min-width: 0;
}
.site-bar__logo { display: block; width: 3rem; height: 3rem; flex: none; }
.site-bar__nav { display: none; gap: 28px; }
.site-bar__nav a, .site-bar__nav a:visited { display: inline-block; padding: 10px 0; text-decoration: none; font-size: .9375rem; font-weight: 600; color: var(--ink-soft); transition: color .25s var(--ease); }
.site-bar__nav a:hover, .site-bar__nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Phones: a menu button with a full-width panel. Native <details>, so it works without JS. */
.site-menu summary {
	list-style: none; cursor: pointer;
	width: 48px; height: 48px; margin-right: -12px;
	display: grid; place-items: center;
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu__icon, .site-menu__icon::before, .site-menu__icon::after {
	display: block; width: 22px; height: 2px; background: var(--ink);
	transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.site-menu__icon { position: relative; }
.site-menu__icon::before, .site-menu__icon::after { content: ""; position: absolute; left: 0; }
.site-menu__icon::before { transform: translateY(-7px); }
.site-menu__icon::after { transform: translateY(7px); }
.site-menu[open] .site-menu__icon { background: transparent; }
.site-menu[open] .site-menu__icon::before { transform: rotate(45deg); }
.site-menu[open] .site-menu__icon::after { transform: rotate(-45deg); }
.site-menu__panel {
	position: fixed; inset: var(--bar-h) 0 auto 0;
	background: var(--chalk); box-shadow: 0 1px 0 var(--line);
	padding: 8px var(--gutter) 24px;
	display: grid;
}
.admin-bar .site-menu__panel { top: calc(var(--bar-h) + var(--wp-admin--admin-bar--height, 46px)); }
.site-menu__panel a, .site-menu__panel a:visited {
	font: 600 1.5rem/1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em;
	color: var(--ink); text-decoration: none; padding: 14px 0;
}
.site-menu__panel a[aria-current="page"] { color: var(--grass); }
@media (min-width: 1100px) {
	.site-bar__nav { display: flex; }
	.site-menu { display: none; }
}
@media (max-width: 767px) {
	.site-bar .btn { display: none; } /* Phones hold Book in the bottom bar. */
}

/* Footer: one blue band on every page. */
.site-foot {
	background: var(--blue); color: #fff;
	padding: clamp(48px, 8vh, 80px) var(--gutter) 24px;
	font: 400 1rem/1.5 var(--font-body);
}
.site-foot a, .site-foot a:visited { display: inline-block; padding: 6px 0; color: #fff; text-decoration: none; }
.site-foot a:hover { color: var(--sign); text-decoration: underline; text-underline-offset: 4px; }
.site-foot a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-foot__grid { display: grid; gap: 32px; }
.site-foot__brand { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 600 1rem/1 var(--font-display); font-stretch: 118%; letter-spacing: .1em; text-transform: uppercase; }
.site-foot__logo { width: 72px; height: 72px; }
.site-foot p { margin: 0; }
.site-foot__title { font: 600 1rem/1 var(--font-body) !important; letter-spacing: 0; font-stretch: 100%; color: var(--sign); margin: 0 0 12px !important; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-foot__legal { margin-top: 32px !important; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: .875rem; text-transform: capitalize; }
@media (min-width: 768px) {
	.site-foot__grid { grid-template-columns: 1.6fr 1fr 1.4fr; gap: 48px; }
}

/* Astra's scroll-to-top button, in the site's colours. */
#ast-scroll-top { background: var(--ink) !important; color: var(--chalk) !important; border-radius: var(--radius-btn) !important; }
@media (max-width: 767px) { #ast-scroll-top { display: none !important; } } /* It would sit on the bottom bar. */

/* Mobile quick actions on every page. */
.sticky-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1.1fr 1.2fr .9fr;
	gap: 8px;
	padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
	background: var(--chalk);
	border-top: 1px solid var(--line);
}
.sticky-bar a, .sticky-bar a:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: var(--radius-btn);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	font: 600 .9375rem/1 var(--font-body);
	text-decoration: none;
	white-space: nowrap;
}
.sticky-bar a.sticky-bar__book { background: var(--sign); border-color: var(--sign); color: var(--ink); }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 768px) {
	.sticky-bar { display: none; }
	body { padding-bottom: 0; }
}

/* Turf Booking Pro's promo banner, re-dressed to match (its markup and JS are untouched).
   `body` lifts specificity over the plugin's inline <style>, which prints later. */
body .tbp-promotion-overlay { background: rgba(13, 31, 22, .7); backdrop-filter: blur(8px); }
body .tbp-promotion-modal { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 40px 80px -20px rgba(13, 31, 22, .5); }
body .tbp-promotion-content { border-radius: var(--radius); }
body .tbp-promotion-close { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); }
body .tbp-promotion-close:hover { background: var(--chalk); }
@media (max-width: 768px) {
	body .tbp-promotion-modal, body .tbp-promotion-content { border-radius: var(--radius); }
}

/* Shared by the homepage and inner pages. */
/* Mown stripes: the material of every green field on the page. */
.grass {
	color: #fff;
	background: repeating-linear-gradient(90deg, var(--grass) 0 clamp(64px, 9vw, 132px), var(--grass-2) 0 clamp(128px, 18vw, 264px));
}

.section-title {
	font: 600 clamp(2.5rem, 6vw, 5rem)/1.04 var(--font-display);
	text-wrap: balance;
	margin: 0;
}

/* The boards */
.ch-games { padding: clamp(72px, 12vh, 128px) 0 clamp(56px, 9vh, 96px); overflow: hidden; }
.ch-games .section-title { padding: 0 var(--gutter); margin-bottom: clamp(24px, 4vh, 48px); }
.boards { display: grid; }
/* Boards are joined hoardings: lettering fills the panel, the court diagram stays in the corner. */
.board {
	position: relative;
	padding: clamp(20px, 2.4vw, 32px);
	display: grid; align-content: space-between; gap: 16px;
	overflow: hidden;
	transform-origin: 50% 100%;
}
.board--grass { background: var(--grass); color: #fff; }
.board--sign { background: var(--sign); color: var(--ink); }
.board--blue { background: var(--blue); color: #fff; }
.board--blue a:focus-visible { outline-color: #fff; }
.board__art {
	position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px);
	width: clamp(96px, 22%, 170px); height: auto;
	fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .6;
}
.board__name { font: 600 clamp(2.25rem, 7vh, 3.75rem)/1.02 var(--font-display); margin: 0; max-width: 9ch; }
.board__text { margin: 0; max-width: 40ch; font-weight: 500; text-wrap: pretty; }
.board__deal { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.board__price { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.board__amount { font: 600 clamp(2.5rem, 8vh, 4.25rem)/1 var(--font-display); }
.board__weekend { display: block; font-weight: 500; font-size: .9375rem; }
.rope { display: none; }
@media (max-width: 767px) {
	.board__name { font-size: clamp(2.25rem, 10.5vw, 3rem); max-width: 8ch; } /* Clears the corner diagram on the longest name. */
	.board__art { width: 84px; }
	.ch-hero { min-height: calc(100svh - var(--bar-h)); } /* The sticky bar takes the bottom; keep the board's button above it. */
	.js-motion .ch-hero { min-height: 100svh; } /* With motion the bar waits until the yellow board has gone. */
	.js-motion .sticky-bar { transform: translateY(110%); transition: transform .4s var(--ease); }
	.js-motion .sticky-bar.is-on { transform: none; }
}

[data-words] .word { display: inline-block; opacity: .3; }
.is-accent { color: var(--sign); }
.section-title .is-accent { color: var(--grass); }

/* Split headings: each word is a mask its letters rise out of. */
[data-chars] .w { display: inline-block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
[data-chars] .c { display: inline-block; will-change: transform; }

/* The type bands between the hero and the boards. */
.band { overflow: hidden; }
.band__row { padding: clamp(10px, 1.4vw, 18px) 0; }
.band__row--sign { background: var(--sign); color: var(--ink); }
.band__row--blue { background: var(--blue); color: #fff; }
.band__track { display: flex; width: max-content; will-change: transform; font: 600 clamp(2.25rem, 6vw, 5.5rem)/1.05 var(--font-display); }
.band__row--blue .band__track { margin-left: -60vw; }
.band__word { display: flex; align-items: center; white-space: nowrap; }
.band__word::after { content: ""; width: .28em; height: .28em; margin: 0 .55em; border-radius: 50%; background: currentColor; }

/* The big statement line. */
.line {
	font: 600 clamp(2.5rem, 6vw, 5.5rem)/1.06 var(--font-display);
	margin: 0; max-width: 22ch; text-wrap: balance;
}

/* Display voice: wide, tightly set, sentence case. Last in the file: the font shorthands above reset font-stretch. */
.band__track, .section-title, .hero__title, .slots__slot, .slots__fallback, .board__name, .board__amount, .line, .club__title, .final__title, .find__links a, .score__value, .quote--lead blockquote {
	font-stretch: 112%;
	letter-spacing: -.025em;
}

/* Very small phones: keep the bar, the board names and the quick actions on one line. */
@media (max-width: 400px) {
	.site-bar { gap: 12px; }
	.site-bar__brand, .site-bar__brand:hover, .site-bar__brand:visited { font-size: .8125rem; letter-spacing: .06em; gap: 8px; }
	.site-bar__logo { width: 2.5rem; height: 2.5rem; }
	.sticky-bar { gap: 6px; }
	.sticky-bar a, .sticky-bar a:visited { font-size: .875rem; }
	.board__name { font-size: clamp(1.75rem, 9.5vw, 2.5rem); }
}