/*
Theme Name:   Esch Stars
Theme URI:    https://eschstars.nl
Description:  Blokthema voor Volleybalvereniging LEDnovate Esch Stars. Gebouwd op Twenty Twenty-Five. Alle opmaak is te bewerken via de WordPress-editor; er is geen paginabouwer nodig.
Author:       LEDnovate Esch Stars
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  eschstars
Tags:         blog, one-column, custom-colors, block-patterns, full-site-editing
*/

/* Nearly everything lives in theme.json. Only genuinely dynamic behaviour goes here. */

/* Core adds a block gap between header, main and footer. On a page ending with a full-bleed
   dark band that gap shows as a white sliver against the equally dark footer. Sections carry
   their own padding, so no gap is wanted between these three. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* A short page simply ends where its content ends — the footer follows naturally. Any area
   the browser shows below the footer inherits the footer's colour, so it never reads as a
   stray white (or dark) void. A stretched sticky footer was tried and removed: it filled
   the space between a dark call-to-action band and the dark footer with a large void that
   left the band's buttons floating. */
html {
	background-color: var(--wp--preset--color--contrast);
}

/* Where a dark call-to-action band meets the dark footer, a hairline keeps the seam
   deliberate instead of one undifferentiated slab. */
.wp-site-blocks > footer {
	border-top: 1px solid rgb(255 255 255 / 8%);
}

/* Header navigation.
   theme.json's blocks.core/navigation.elements.link rule and its global elements.link
   rule are both emitted inside :where(), so they have equal specificity and source order
   decides — the element rule wins and the menu ends up underlined in link colour.
   Set it here where a real class gives us the specificity to be sure. */
.eschstars-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.eschstars-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.eschstars-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

.eschstars-header .wp-block-navigation a:where(:not(.wp-element-button)):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* The mobile overlay is near-black, so invert the link colour there. */
.eschstars-header .wp-block-navigation__responsive-container.is-menu-open a:where(:not(.wp-element-button)) {
	color: #fff;
}

.eschstars-header .wp-block-navigation__responsive-container.is-menu-open a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--primary);
}

/* Submenus (Clubinfo, Teams) render on white. */
.eschstars-header .wp-block-navigation-submenu__container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: 0 8px 28px rgb(15 17 21 / 10%);
	padding: 0.35rem 0;
}

/* Sponsor logos arrive from many sources at many sizes; normalise them so the grid
   reads as one row of equals rather than a jumble. */
.eschstars-sponsor-grid figure img {
	width: 100%;
	height: 96px;
	object-fit: contain;
	object-position: center;
}

/* Sponsor logos are mostly dark-on-white JPEGs. A white plate keeps them legible
   regardless of the section background they sit on. */
.eschstars-sponsor-grid figure {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1rem;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.eschstars-sponsor-grid figure:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

/* Cards: a hairline border plus a lift on hover. Used by team + committee patterns. */
.eschstars-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	height: 100%;
}

.eschstars-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 24px rgb(15 17 21 / 8%);
}

.eschstars-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/* A card's title is a link, but it should read as a heading. Keep the whole card the
   affordance; colour the title only on hover. */
.eschstars-card :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.eschstars-card:hover :is(h2, h3, h4) a,
.eschstars-card :is(h2, h3, h4) a:hover {
	color: var(--wp--preset--color--primary);
}

/* Keep the keyboard focus ring visible even though we removed the underline. */
.eschstars-card :is(h2, h3, h4) a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* An inset panel with its own background (the Programma links, the postal address on
   Lid worden). Side padding comes from the block itself; this just rounds it and makes
   side-by-side panels finish at the same height instead of ragged. */
.eschstars-box {
	border-radius: 12px;
}

.wp-block-columns .wp-block-column > .eschstars-box {
	height: 100%;
}

/* Cards in a grid stretch to the row height, so push each card's body to fill the
   leftover space — otherwise a card with one line of text collapses next to a card
   with three. */
.eschstars-card {
	display: flex;
	flex-direction: column;
}

.eschstars-card > .wp-block-group {
	flex: 1;
}

/* Contact tiles have no image, so the 4:3 image rule above must not apply; they just
   need the card frame and a red top accent to tie them to the brand. */
.eschstars-tile {
	border-top: 3px solid var(--wp--preset--color--primary);
}

.eschstars-map iframe {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
}

/* Contact Form 7 renders bare inputs; give them the same shape as everything else.
   box-sizing matters: CF7's controls are content-box, so `width: 100%` plus padding and
   border overflows the surrounding box on the right. */
.wpcf7-form-control:not(.wpcf7-submit) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	color: inherit;
}

/* A textarea's default `cols` gives it an intrinsic width wider than its container. */
.wpcf7 textarea.wpcf7-form-control {
	display: block;
	resize: vertical;
	min-height: 9rem;
}

/* CF7 wraps each field in a <p>; strip the stray top margin so fields sit evenly. */
.wpcf7-form p {
	margin: 0 0 1.1rem;
}

.wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

.wpcf7-form-control:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

.wpcf7 label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 0.35rem;
}

.wpcf7-submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0.85rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-submit:hover {
	background: var(--wp--preset--color--contrast);
}

/* A person: name, role, e-mail. Used across all four committee pages so they read as
   one family instead of four different pages. */
.eschstars-person {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: #fff;
	height: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eschstars-person:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 24px rgb(15 17 21 / 8%);
}

/* The hero sits under a transparent header, so it needs its own dark scrim for the
   white headline to stay readable over whatever photo the club swaps in. */
.eschstars-hero {
	position: relative;
	isolation: isolate;
}

.eschstars-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgb(15 17 21 / 65%) 0%,
		rgb(15 17 21 / 45%) 50%,
		rgb(15 17 21 / 75%) 100%
	);
}

/* Social feeds. The Facebook iframe is a fixed 700px tall, so match the Instagram
   side to it — otherwise the two news columns end at wildly different heights. */
/* Facebook's Page Plugin timeline is capped at 500px wide by Facebook itself. If the
   column is wider, the white iframe sits in a wider white box and leaves an empty strip on
   the right ("weird outline"). So cap BOTH feeds at 500px and centre them in their column —
   they then read as two equal, intentional cards whatever the column width. */
.eschstars-fb-embed,
.eschstars-social-fallback {
	box-sizing: border-box; /* the fallback has 2.5rem padding; without this it renders
	                           700 + padding = ~780px and ends up taller than Facebook */
	width: 100%;
	max-width: 500px;
	min-height: 700px;
	border-radius: 12px;
	overflow: hidden;
}

/* Pull the two capped cards toward the centre so they sit as a neat pair with equal outer
   margins, instead of hugging the far edges of their columns. Facebook is the left column,
   Instagram (fallback now, live feed once connected) the right. */
.eschstars-fb-embed {
	margin-left: auto;
	margin-right: 0;
}

.eschstars-social-fallback,
#sb_instagram {
	margin-left: 0;
	margin-right: auto;
}

.eschstars-fb-embed {
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
}

.eschstars-fb-embed iframe {
	display: block;
	width: 100%;
	min-height: 700px;
}

.eschstars-social-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Once the club connects Instagram, Smash Balloon renders here instead; give its
   container the same rounded frame so the two columns stay visually paired. */
#sb_instagram {
	border-radius: 12px;
	overflow: hidden;
}

@media (max-width: 781px) {
	.eschstars-fb-embed,
	.eschstars-fb-embed iframe,
	.eschstars-social-fallback {
		min-height: 520px;
	}
}

/* Document rows on "Voor leden" — make the whole row feel clickable. */
.eschstars-doc-row {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.eschstars-doc-row:hover {
	background: var(--wp--preset--color--muted);
}

/* Dark call-to-action bands (committee pages, programme page). On near-black, club red
   only reaches ~3:1 contrast, under the 4.5:1 WCAG AA minimum, so links go light and keep
   an underline so colour isn't the only signal. Buttons carry their own background.
   Scoped to .wp-block-group deliberately: the navigation block's responsive container
   also carries .has-contrast-background-color (it colours the mobile overlay) even on
   desktop, and a looser selector paints the whole main menu light grey. */
.wp-block-group.has-contrast-background-color a:not(.wp-element-button):not(.wp-block-button__link) {
	color: #d7dbe1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-block-group.has-contrast-background-color a:not(.wp-element-button):not(.wp-block-button__link):hover {
	color: #ffffff;
}

.wp-block-template-part footer a,
footer.wp-block-group a {
	color: #d7dbe1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-block-template-part footer a:hover,
footer.wp-block-group a:hover {
	color: #ffffff;
}

.wp-block-template-part footer a:focus-visible,
footer.wp-block-group a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Core paints each icon its brand colour on the <li> (.wp-social-link-facebook etc.)
   and the <svg> picks it up via `fill: currentColor`. Overriding the svg loses to
   core's higher-specificity rule, so set the colour on the link itself instead —
   Facebook blue and Instagram magenta both read as mud on our near-black footer. */
footer .wp-block-social-links .wp-block-social-link,
footer .wp-block-social-links .wp-block-social-link a {
	color: #ffffff;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

footer .wp-block-social-links .wp-block-social-link:hover {
	opacity: 1;
}

/* ── Team pages ────────────────────────────────────────────────────────────── */

.eschstars-team {
	display: grid;
	gap: 2.5rem;
}

/* Each fact carries its own border. A 1px-gap grid over a coloured background is
   prettier until the last row is short, and then the leftover cell reads as an empty
   box — which looks like a bug. */
.eschstars-team__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.eschstars-team__fact {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
}

.eschstars-team__fact span {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle-text);
	margin-bottom: 0.35rem;
}

.eschstars-team__fact strong {
	font-weight: 600;
	line-height: 1.5;
}

.eschstars-team__nevobo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* The category label above the team title links back to the category page. Left as a
   default link it renders underlined in link colour on the dark hero, which reads as an
   accident. Quiet uppercase eyebrow text, brightening on hover. */
.wp-block-post-terms a {
	color: rgb(255 255 255 / 72%);
	text-decoration: none;
}

.wp-block-post-terms a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-post-terms a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* The team photo sits in the body, where its real aspect ratio and resolution work. */
.eschstars-team__photo img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	display: block;
}

.eschstars-btn {
	display: inline-block;
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.75rem 1.35rem;
	border-radius: 6px;
	border: 2px solid var(--wp--preset--color--primary);
	line-height: 1.2;
}

.eschstars-btn:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: #fff;
}

/* Secondary actions: same shape, no fill, so one action leads. */
.eschstars-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
}

.eschstars-btn--ghost:hover {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.eschstars-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* ── Roster ──
   A flat bordered list reads like a spreadsheet. Each player gets a card with the shirt
   number as a badge, which is how a team sheet actually looks. */
.eschstars-team__roster h2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.eschstars-team__count {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--subtle-text);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
	line-height: 1.6;
}

.eschstars-team__roster ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0.75rem;
}

.eschstars-team__roster li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.7rem 0.9rem;
	transition: border-color 0.15s ease;
}

.eschstars-team__roster li:hover {
	border-color: var(--wp--preset--color--primary);
}

.eschstars-team__nr {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.eschstars-team__roster li:hover .eschstars-team__nr {
	background: var(--wp--preset--color--primary);
}

.eschstars-team__name {
	font-weight: 600;
	line-height: 1.3;
}

/* ── Shirt sponsor ── a quiet credit, not a section heading. */
.eschstars-team__sponsor {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 1.5rem;
}

.eschstars-team__sponsor-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle-text);
}

.eschstars-team__sponsor img {
	max-width: 180px;
	height: auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 0.6rem;
}

/* Team cards in a category listing (core Query Loop). */
.eschstars-teamlist .wp-block-post {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eschstars-teamlist .wp-block-post:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 6px 24px rgb(15 17 21 / 8%);
}

.eschstars-teamlist .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.eschstars-teamlist .wp-block-post-title {
	margin: 1.25rem 1.25rem 0.35rem;
	font-size: 1.25rem;
}

.eschstars-teamlist .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.eschstars-teamlist .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
}

/* The excerpt holds the klasse ("Eerste klasse"). Plain quiet text — a bordered pill read
   as a button, which it is not. */
.eschstars-teamlist .wp-block-post-excerpt {
	margin: 0 1.25rem 1.35rem;
}

.eschstars-teamlist .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--subtle-text);
	font-size: 0.9rem;
}

/* Core appends a "Read more" link and a trailing ellipsis; neither belongs on a pill. */
.eschstars-teamlist .wp-block-post-excerpt__more-text {
	display: none;
}

/* Teams without a klasse render an empty excerpt; don't draw an empty pill. */
.eschstars-teamlist .wp-block-post-excerpt__excerpt:empty {
	display: none;
}

.eschstars-teamlist .wp-block-post-excerpt:not(:has(.wp-block-post-excerpt__excerpt:not(:empty))) {
	margin-bottom: 1.35rem;
}

.eschstars-teamlist .wp-block-post-featured-image {
	margin: 0;
}

/* "De vereniging in cijfers", rendered from the actual team count. */
.eschstars-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1.5rem;
	text-align: center;
}

.eschstars-stat__n {
	display: block;
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.eschstars-stat__l {
	display: block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--subtle-text);
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	.eschstars-card,
	.eschstars-sponsor-grid figure {
		transition: none;
	}

	.eschstars-sponsor-grid figure:hover {
		transform: none;
	}
}