/*
Theme Name:         Northern Wellbeing FC
Theme URI:          https://northernwellbeingfootball.co.uk/
Author:             Northern Wellbeing Football
Author URI:         https://northernwellbeingfootball.co.uk/
Description:        A bold, modern block theme for a wellbeing football league. Big type, deep navy and pitch-side energy, with dedicated templates for teams, players and fixtures. Designed to pair with the NWF League Manager plugin.
Requires at least:  6.4
Tested up to:       6.7
Requires PHP:       7.4
Version:            1.1.0
License:            GNU General Public License v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        nwf-theme
Tags:               blog, one-column, custom-colors, custom-logo, custom-menu, editor-style, block-patterns, full-site-editing, block-styles, wide-blocks, accessibility-ready, sticky-post, threaded-comments, translation-ready
*/

/*
 * Block themes take their design tokens from theme.json. This file carries the
 * handful of things theme.json cannot express: layout scaffolding for the PHP
 * templates, the hero treatment, and a few utility classes used by patterns.
 *
 * Everything below resolves through theme.json presets, so recolouring the site
 * in the Site Editor updates these too.
 */

/* ------------------------------------------------------------ Foundations */

:root {
	--nwf-radius-sm: var(--wp--custom--radius--small, 8px);
	--nwf-radius: var(--wp--custom--radius--medium, 14px);
	--nwf-radius-lg: var(--wp--custom--radius--large, 22px);
	--nwf-shadow: var(--wp--preset--shadow--soft);
	--nwf-header-height: 4.5rem;
}

*:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 3px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* Skip link, visible only when focused. */

.nwf-skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 0 0 var(--nwf-radius-sm) var(--nwf-radius-sm);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-decoration: none;
}

.nwf-skip-link:focus {
	top: 0;
}

/* --------------------------------------------------- PHP template scaffold */

.nwf-page {
	display: flow-root;
	min-height: 50vh;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}

.nwf-page__inner {
	max-width: var(--wp--style--global--wide-size, 88rem);
	margin-inline: auto;
}

.nwf-page__narrow {
	max-width: var(--wp--style--global--content-size, 44rem);
	margin-inline: auto;
}

.nwf-page > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Entry header used by the team, player and fixture templates. */

.nwf-entry-header {
	position: relative;
	margin-block-end: var(--wp--preset--spacing--50);
	padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
	border-radius: var(--nwf-radius-lg);
	background: var(--nwf-header-bg, var(--wp--preset--gradient--navy-blue));
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* A subtle pitch-marking motif, purely decorative. */
.nwf-entry-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: -30%;
	inset-inline-end: -8%;
	aspect-ratio: 1;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	pointer-events: none;
}

/* Links on dark surfaces.
 *
 * The global link hover is navy, which is also the colour of the header, the
 * footer and the entry headers — so without this a hovered link turns exactly
 * the shade of its own background and disappears. On any dark band a link keeps
 * its inherited colour and underlines instead. */
.nwf-entry-header a,
.nwf-site-header a,
.has-navy-background-color a,
.has-navy-blue-gradient-background a,
.has-pitch-gradient-background a {
	color: currentColor;
}

.nwf-entry-header a:hover,
.nwf-entry-header a:focus-visible,
.nwf-site-header a:hover,
.nwf-site-header a:focus-visible,
.has-navy-background-color a:hover,
.has-navy-background-color a:focus-visible,
.has-navy-blue-gradient-background a:hover,
.has-navy-blue-gradient-background a:focus-visible,
.has-pitch-gradient-background a:hover,
.has-pitch-gradient-background a:focus-visible {
	color: currentColor;
	text-decoration: underline;
}

/* Buttons keep their own colours — they are not plain links. */
.nwf-entry-header .wp-element-button,
.nwf-site-header .wp-element-button,
.has-navy-background-color .wp-element-button,
.has-navy-blue-gradient-background .wp-element-button {
	color: inherit;
}

.nwf-entry-header__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.75);
}

.nwf-entry-header__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
}

.nwf-entry-header__lede {
	max-width: 46ch;
	margin: 0.85rem 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--wp--preset--font-size--medium);
}

.nwf-entry-header__flex {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	flex-wrap: wrap;
}

.nwf-entry-header__badge {
	display: grid;
	place-items: center;
	width: clamp(72px, 12vw, 120px);
	aspect-ratio: 1;
	padding: 0.65rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--nwf-radius);
	backdrop-filter: blur(4px);
}

.nwf-entry-header__badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nwf-entry-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.nwf-entry-content h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------------- Home  hero */

.nwf-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The mesh is a child of the hero's constrained layout, which would otherwise
   cap it at the content width and leave the background as a centred band
   instead of a full-bleed wash. */
.nwf-hero__mesh {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	background:
		radial-gradient(60rem 30rem at 78% 12%, rgba(22, 104, 227, 0.55), transparent 60%),
		radial-gradient(40rem 28rem at 12% 88%, rgba(27, 122, 62, 0.4), transparent 62%),
		var(--wp--preset--color--navy);
}

/* Faint pitch lines behind the hero copy. */
.nwf-hero__mesh::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 5rem 5rem;
	mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 100%);
}

/* --------------------------------------------------------------- Utilities */

/* Block, not inline-block: an inline-block shrinks to fit and then ignores
   the centring that `has-text-align-center` is meant to apply, which pins the
   label to the left edge of a wide section. */
.nwf-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand);
}

.nwf-rule {
	width: 3.5rem;
	height: 4px;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--brand);
}

.nwf-card {
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--nwf-radius);
	box-shadow: var(--nwf-shadow);
}

.nwf-card--accent,
.is-style-nwf-card-accent {
	border-top: 4px solid var(--wp--preset--color--brand);
}

/* Registered block styles, so the same look is available from the inspector. */

.is-style-nwf-card,
.is-style-nwf-card-accent {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--nwf-radius);
	box-shadow: var(--nwf-shadow);
}

.is-style-nwf-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brand);
}

.is-style-nwf-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

/* Pull a block up over the section above it. */
.nwf-overlap {
	position: relative;
	z-index: 2;
	margin-block-start: -4rem;
}

.nwf-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.nwf-balance {
	text-wrap: balance;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ------------------------------------------------------------ Navigation */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}

.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
}

/* -------------------------------------------------------- Post & comments */

.nwf-meta-line {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--nwf-radius-sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------- League page sections */

.nwf-competition-block + .nwf-competition-block {
	margin-block-start: var(--wp--preset--spacing--60);
}

.nwf-fixture-archive {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 60rem) {
	.nwf-fixture-archive {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

/* --------------------------------------------------------------- Printing */

@media print {
	.wp-block-navigation,
	.wp-block-search,
	.nwf-skip-link,
	.nwf-hero__mesh {
		display: none !important;
	}

	.nwf-entry-header {
		background: none !important;
		color: #000;
	}

	.nwf-entry-header__title {
		color: #000;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}