/*
Theme Name: Club One
Description: Block theme for a grassroots football club. The colours are an editable palette (Appearance → Editor → Styles → Colours → Palette), with ready-made palettes to start from. Works with the Club Management plugins, which render their own pages inside this theme's header and footer.
Version: 0.1.9
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Author: Club Management
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: club-one
*/

/*
 * Colours, fonts, spacing and element styles live in theme.json. This file
 * only holds what theme.json can't express, and is loaded on the front end
 * and in the editor by functions.php.
 */

/* Header navigation: underline the page you're on, in the header text colour so it
 * shows whatever colour the header is. */
.clubone-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.clubone-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Header navigation is two levels: top items and one dropdown under each. */
.clubone-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	display: none !important;
}

/* Dropdowns: in the header colour, borderless, so they read as part of the bar.
 * No third-level arrows. */
.clubone-header .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
}

.clubone-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	display: none !important;
}

.clubone-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem !important;
}

/* Mobile menu: bigger tap targets, and dropdown items indented under their parent. */
.clubone-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.clubone-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.clubone-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
}

.clubone-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 1.25rem;
	font-size: var(--wp--preset--font-size--large);
}

.clubone-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	padding: 0.75rem 0 0 0 !important;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* Keep the footer at the bottom of the window on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > footer {
	margin-top: auto;
}

/* Footer navigation is one level: anything nested under a footer link is hidden. */
.clubone-footer .wp-block-navigation__submenu-container,
.clubone-footer .wp-block-navigation__submenu-icon {
	display: none !important;
}

.clubone-footer a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Keyboard focus stays visible on the dark header and footer. */
.clubone-header a:focus-visible,
.clubone-header button:focus-visible,
.clubone-footer a:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Sidebar latest-news list: no bullets, one item per line. */
.wp-block-latest-posts.wp-block-latest-posts__list {
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Post list pattern: one line per title (long titles end in "…"), category and
 * date underneath, a thin rule between posts. */
.clubone-post-list .wp-block-post-template {
	list-style: none;
	padding-left: 0;
}

.clubone-post-list .wp-block-post + .wp-block-post {
	border-top: 1px solid var(--wp--preset--color--border);
}

.clubone-post-list__title {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clubone-post-list__title a {
	display: inline; /* core makes it inline-block, which hides the "…" */
	text-decoration: none;
}

.clubone-post-list__title a:hover,
.clubone-post-list__title a:focus-visible {
	text-decoration: underline;
}

.clubone-post-list__meta .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.clubone-post-list__meta .wp-block-post-terms a:hover,
.clubone-post-list__meta .wp-block-post-terms a:focus-visible {
	text-decoration: underline;
}

.clubone-post-list__meta .wp-block-post-terms::after {
	content: "\00B7";
	margin-left: 0.5rem;
}

/* Hero: sits flush under the header; logo beside the club name on wide screens,
 * stacked and centred on phones. */
/* No gap between the header and a hero. Matched by what is inside as well as
   by class, because a hero swapped in from the Site Editor (Replace on the
   template part) loses the clubone-hero-area class. The last selector is the
   Site Editor, where the slideshow sits a few wrappers deeper. */
.wp-site-blocks > .clubone-hero-area,
.wp-site-blocks > .clubone-wide-image,
.is-root-container > .clubone-wide-image,
.wp-site-blocks > :has(> .clubone-hero),
.wp-site-blocks > :has(> .clubone-featured),
.wp-site-blocks > .clubone-hero,
.wp-site-blocks > .clubone-featured,
.is-root-container > .wp-block-template-part:has(.clubone-hero, .clubone-featured) {
	margin-block-start: 0;
}

.clubone-hero__logo img {
	width: clamp(140px, 30vw, 240px) !important;
	height: auto;
}

@media (max-width: 599px) {
	.clubone-hero__text {
		align-items: center !important;
		text-align: center;
	}

	.clubone-hero__text .wp-block-buttons {
		justify-content: center;
	}
}

/* Previous / next post links under a post: labelled cards, side by side on
   wider screens and stacked on phones. The whole card is the link. */
.clubone-post-nav {
	padding-top: var(--wp--preset--spacing--40, 2rem);
	border-top: 1px solid var(--wp--preset--color--border, #d9ded9);
}

.clubone-post-nav__heading {
	margin-bottom: var(--wp--preset--spacing--30, 1.25rem);
}

.clubone-post-nav__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--30, 1.25rem);
}

.clubone-post-nav__links > * {
	margin: 0;
}

.clubone-post-nav .wp-block-post-navigation-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	background: var(--wp--preset--color--tint, #eaf5e9);
	color: var(--wp--preset--color--contrast, #111412);
}

.clubone-post-nav .post-navigation-link-next {
	grid-column: 2;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
}

.clubone-post-nav .wp-block-post-navigation-link a {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	color: inherit;
	text-decoration: none;
}

.clubone-post-nav .wp-block-post-navigation-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.clubone-post-nav .post-navigation-link__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #5b635c);
}

.clubone-post-nav .post-navigation-link__title {
	font-weight: 700;
	color: var(--wp--preset--color--action, #1f6b2c);
}

.clubone-post-nav .wp-block-post-navigation-link [class*="__arrow"] {
	font-size: 1.5rem;
	color: var(--wp--preset--color--action, #1f6b2c);
}

.clubone-post-nav .wp-block-post-navigation-link:hover .post-navigation-link__title,
.clubone-post-nav .wp-block-post-navigation-link a:focus-visible .post-navigation-link__title {
	text-decoration: underline;
}

.clubone-post-nav .wp-block-post-navigation-link:focus-within {
	outline: 3px solid var(--wp--preset--color--action, #1f6b2c);
	outline-offset: 2px;
}

@media (max-width: 599px) {
	.clubone-post-nav__links {
		grid-template-columns: 1fr;
	}

	.clubone-post-nav .post-navigation-link-next {
		grid-column: auto;
	}
}

/* Club Management's public forms colour their buttons and highlights from
   --cpm-accent, falling back to WordPress blue. Point them at the palette so
   they match the theme's own buttons; a colour picked on a form block still
   wins, as the block sets these on its own wrapper. */
body {
	--cpm-accent: var(--wp--preset--color--action);
	--cpm-accent-hover: var(--wp--preset--color--dark);
	--cpm-accent-tint: color-mix(in srgb, var(--wp--preset--color--action) 10%, transparent);
	--cpm-accent-text: var(--wp--preset--color--base);
}

/* Browsers give buttons their own font; use the theme's. */
.cpm-signup-form button {
	font-family: inherit;
}

/* Stacked columns on phones: the first block in each later column gets its
   top margin dropped (it is a first child), so a heading there sat right
   under the previous column. Give it the same space a section gets. */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column > :first-child {
		margin-block-start: var(--wp--preset--spacing--50, 2rem);
	}
}