.wp-block-post-excerpt__more-text {
	margin-top: 20px;
}

/* Background image behind the "Why chess?" section. */
.why-chess-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(180deg, rgba(4, 24, 15, 0.72) 0%, rgba(4, 24, 15, 0.4) 45%, rgba(4, 24, 15, 0.72) 100%),
		linear-gradient(90deg, rgba(4, 73, 29, 0.55) 0%, rgba(4, 73, 29, 0.15) 50%, rgba(4, 73, 29, 0.55) 100%),
		url('/wp-content/uploads/2026/07/why-chess-bg-2.jpg');
	background-size: cover;
	background-position: center;
	opacity: 1;
}

.section-why-chess h2.wp-block-heading,
.section-why-chess .why-chess-card__title,
.section-why-chess .why-chess-card__text,
.section-why-chess .why-chess-icon-wrap {
	color: #ffffff;
}

.section-why-chess .why-chess-card:hover .why-chess-icon-wrap {
	color: var(--wp--preset--color--accent);
}

/* Faint chessboard background image behind the "Upcoming events" section. */
.upcoming-events-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('https://new.eikersjakklubb.no/wp-content/uploads/2026/07/upcoming-events-bg.png');
	background-size: cover;
	background-position: center;
	opacity: 0.4;
}

/* Homepage section gutters. The block editor constrained layout supplies the
   max-width, but not consistent side padding at viewport widths below that. */
body.home .wp-site-blocks > .wp-block-group:not(.visit-us) {
	box-sizing: border-box;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	body.home .wp-site-blocks > .wp-block-group:not(.visit-us) {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}

	body.home .wp-site-blocks > .wp-block-group.section-why-chess,
	body.home .wp-site-blocks > .wp-block-group.home-upcoming-events {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	body.home .wp-site-blocks > .wp-block-group:not(.visit-us) {
		padding-left: 18px;
		padding-right: 18px;
	}

	body.home .wp-site-blocks > .wp-block-group.section-why-chess,
	body.home .wp-site-blocks > .wp-block-group.home-upcoming-events {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Chess piece silhouette row + checkered pattern divider, straddling the section's top edge:
   pieces poke up above the edge, the checkered board sits right at/inside the edge. */
.chess-pieces-divider {
	margin-top: calc(-1 * (var(--wp--preset--spacing--30) + 134px));
	margin-bottom: var(--wp--preset--spacing--30);
	position: relative;
}

.chess-pieces-divider__row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0;
	max-width: 540px;
	margin: 0 auto;
}

.chess-piece-icon {
	width: auto;
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
}

.chess-pieces-divider__pattern {
	margin-top: -2px;
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

.chess-pieces-divider__pattern svg {
	width: 100%;
	height: 100px;
	display: block;
}

/* Decorative accent line under the header, echoing the oak-leaf green in the logo.
   Positioning/z-index for .site-header now live in header.css (sticky header);
   z-index is high there so the nav dropdown always renders above the hero
   slideshow right below it (hero slides/arrows/dots use z-index up to 10). */
.wp-block-navigation__submenu-container {
	z-index: 100;
}

header.wp-block-group::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(to right, #b0e87a 0%, #1f4d3a 100%);
}

/* Borderless card style: soft shadow + lift on hover, instead of a hard border (Audience Cards). */
.audience-card {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.audience-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.audience-card .audience-card__image {
	margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) var(--wp--preset--spacing--40) calc(-1 * var(--wp--preset--spacing--50));
	border-radius: 20px 20px 0 0;
	overflow: hidden;
}

.audience-card .audience-card__image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.audience-card:hover .audience-card__image img {
	transform: scale(1.06);
}

.audience-card h3.wp-block-heading {
	margin-top: 0;
}

.audience-card p {
	line-height: 1.65;
}

.audience-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.audience-card__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.audience-card__cta:hover .audience-card__cta-arrow {
	transform: translateX(4px);
}

/* Soft acorn-gradient glow behind cards on hover (Tournament / Sponsor / Audience cards). */
.hero-card-glow {
	position: relative;
}

.hero-card-glow::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: linear-gradient(to right, #a57445 0%, #04491d 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: -1;
}

.hero-card-glow:hover::before {
	opacity: 0.18;
}

/* Footer headings: global heading color (dark brown) has poor contrast on the dark green footer background. */
footer.wp-block-group .wp-block-heading {
	color: #b0e87a;
}

/* H2 headings use the same brown as the main menu, distinct from the darker default heading color. */
h2.wp-block-heading {
	color: var(--wp--preset--color--acorn);
}

/* Equal-height cards inside Query Loop grids (Tournament Cards, Sponsor Cards). */
.wp-block-post-template.is-layout-grid {
	align-items: stretch;
}

.wp-block-post-template.is-layout-grid > li.wp-block-post {
	height: 100%;
}

.wp-block-post-template.is-layout-grid > li.wp-block-post > .hero-card-glow {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Tag / category pills on News listing and single post pages. */
.wp-block-post-terms {
	margin: 4px 0;
}

.wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms a {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none;
	padding: 4px 12px;
	border-radius: 999px;
	margin: 2px 4px 2px 0;
}

.wp-block-post-terms.taxonomy-category a {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

.wp-block-post-terms.taxonomy-category a:hover {
	background-color: #183d2d;
}

.wp-block-post-terms.taxonomy-post_tag a {
	background-color: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-post-terms.taxonomy-post_tag a:hover {
	background-color: var(--wp--preset--color--line);
}

/* Protect H2s that are deliberately set to white on dark green backgrounds (CTA Banner, Footer). */
.has-primary-background-color h2.wp-block-heading,
footer.wp-block-group h2.wp-block-heading {
	color: #ffffff;
}

/* "Join today" CTA banner: benefit list + stronger CTA. */
.cta-banner__benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 900px;
	margin: 0 auto;
}

.cta-banner__benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.cta-banner__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--background-alt);
	color: var(--wp--preset--color--primary);
}

.cta-banner__benefit-icon svg {
	width: 24px;
	height: 24px;
}

.cta-banner__benefit p {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.cta-banner__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 32px;
	font-size: 1.05rem;
}

.cta-banner__cta-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

.cta-banner__cta:hover .cta-banner__cta-arrow {
	transform: translateX(4px);
}

@media (max-width: 768px) {
	.cta-banner__benefits {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Small icon in front of a section heading (e.g. "Activities", "Club Evening"). */
.section-heading-icon {
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-heading-icon svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--wp--preset--color--primary);
}

/* Separates the CTA banner from the footer directly below it — both use
   the same dark green background, so without this they read as one block. */
footer.wp-block-group {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}