/*
Theme Name: How Badminton Works
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: badminton
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

/* === swiss ruled system === */
:root {
	--ink: var(--wp--preset--color--text);
	--line: var(--wp--preset--color--line);
	--red: var(--wp--preset--color--primary);
	--paper: var(--wp--preset--color--background);
	--gray: var(--wp--preset--color--secondary);
	--f-display: var(--wp--preset--font-size--display);
	--f-headline: var(--wp--preset--font-size--headline);
	--f-label: var(--wp--preset--font-size--label);
}

/* masthead: the first ruled row */
.wp-site-blocks > header {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: 30;
}
.wp-site-blocks .masthead .brand {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.wp-site-blocks .masthead .brand a {
	color: var(--ink);
}
.wp-site-blocks .masthead .brand a:hover {
	color: var(--red);
}
.wp-site-blocks .mastnav ul,
.wp-site-blocks .footnav ul {
	font-size: var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.wp-site-blocks .mastnav .wp-block-navigation-item a,
.wp-site-blocks .footnav .wp-block-navigation-item a {
	color: var(--ink);
	padding-inline: 0.9rem;
}
.wp-site-blocks .mastnav .wp-block-navigation-item a:hover,
.wp-site-blocks .footnav .wp-block-navigation-item a:hover {
	color: var(--red);
}
.wp-site-blocks .mastnav .wp-block-navigation-item + .wp-block-navigation-item a {
	border-left: 1px solid var(--line);
}

/* footer ruled row */
.wp-site-blocks .footer-row {
	border-top: 1px solid var(--line);
}
.wp-site-blocks .foot-note {
	font-size: var(--f-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gray);
}

/* full-bleed ruled section: vertical hairlines run edge to edge */
.ruled {
	position: relative;
}
.ruled::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		to right,
		var(--line) 0,
		var(--line) 1px,
		transparent 1px,
		transparent calc(100% / 6)
	);
	opacity: 0.55;
	pointer-events: none;
}
.ruled > * {
	position: relative;
}
.row-rule {
	border-bottom: 1px solid var(--line);
}

/* hero */
.hero-title {
	font-size: var(--f-display);
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
.hero-title .accent {
	color: var(--red);
}
.hero-kicker {
	font-size: var(--f-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red);
}
.red-rule {
	height: 10px;
	background: var(--red);
}

/* cells */
.cell {
	padding: var(--wp--preset--spacing--sm);
	min-height: 100%;
}
.cell-kicker {
	font-size: var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
	font-weight: 600;
}
.cell-title {
	font-size: var(--f-headline);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1;
	margin: 0.4rem 0 0.5rem;
}
.cell-title .accent {
	color: var(--red);
}
.cell p {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--gray);
}
.stat-num {
	font-size: clamp(3rem, 7vw, 6rem);
	line-height: 0.9;
	font-weight: 800;
	color: var(--red);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* columns: hairline between cells, none on edges */
.ruled .wp-block-columns {
	gap: 0;
}
.ruled .wp-block-column {
	padding: var(--wp--preset--spacing--sm);
}
.ruled .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--line);
}

/* full-bleed sections butt edge-to-edge so the ruled grid is continuous */
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* link hover turns red; never underline buttons */
.wp-site-blocks .entry-content a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Swiss imagery: photography rendered in black and white */
.entry-content .wp-block-image img,
.entry-content img {
	filter: grayscale(1);
}

/* buttons keep the red field */
.wp-element-button {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 0;
	text-decoration: none;
}
.wp-element-button:hover {
	color: #fff;
	background: #a81a14;
}

/* link-style button: flat text, red arrow, no field */
.is-style-plain-link .wp-element-button,
.wp-block-button.is-style-plain-link .wp-element-button,
.wp-block-button.is-style-link .wp-element-button {
	background: transparent;
	color: var(--ink);
	padding: 0.6rem 0;
	border: none;
}
.is-style-plain-link .wp-element-button:hover,
.wp-block-button.is-style-plain-link .wp-element-button:hover,
.wp-block-button.is-style-link .wp-element-button:hover {
	background: transparent;
	color: var(--red);
}

/* outline button: hairline frame, no fill */
.is-style-outline .wp-element-button,
.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}
.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
	background: transparent;
	color: var(--red);
	border-color: var(--red);
}

/* closing band */
.cta-band {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.cta-band p {
	font-size: var(--f-headline);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.1;
	font-weight: 700;
}
.cta-band .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--sm);
}

/* contact page */
.phone-link {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}
.wp-site-blocks .phone-link a {
	color: var(--red);
	text-decoration: none;
}
.wp-site-blocks .phone-link a:hover {
	color: var(--ink);
}
.wp-block-jetpack-contact-form {
	margin-block-start: var(--wp--preset--spacing--sm);
}
.wp-block-jetpack-contact-form label {
	font-size: var(--f-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gray);
	font-weight: 600;
	margin-top: var(--wp--preset--spacing--sm);
	display: block;
}
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	font-family: inherit;
	font-size: 1rem;
	color: var(--ink);
	box-shadow: none;
	padding: 0.4rem 0;
}
.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form textarea:focus {
	outline: none;
	border-bottom-color: var(--red);
}
.wp-block-jetpack-contact-form .wp-block-button {
	margin-top: var(--wp--preset--spacing--md);
}

/* responsive */
@media (max-width: 781px) {
	.ruled .wp-block-columns {
		flex-direction: column;
	}
	.ruled .wp-block-column + .wp-block-column {
		border-left: none;
		border-top: 1px solid var(--line);
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}