/*
Theme Name: Berge 2026
Theme URI: https://bergerschuetzen.de
Description: Second design for bergerschuetzen.de, following the 2026 draft: parchment ground, deep club green, gold accent, and the crest as a watermark. Runs alongside the first design — switch between them in Appearance.
Author: Schützengesellschaft Berge e.V.
Template: generatepress
Version: 1.1.0
Text Domain: berge-2026
*/

/* ---------------------------------------------------------------------------
   Fonts are served from this theme, not from Google.

   The site currently loads nothing from a third party, and the privacy policy
   says so in as many words. Pulling three families from fonts.gstatic.com
   would send every visitor's IP address to Google and make that sentence
   false, so the files live here. Latin subsets - the German umlauts and the
   sharp s are in them.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces.woff2") format("woff2-variations");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Public Sans";
	src: url("fonts/public-sans.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Mono";
	src: url("fonts/space-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Mono";
	src: url("fonts/space-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--green-900: #1f3d2b;
	--green-700: #2f5138;
	--green-600: #3c6647;
	--gold-600: #b8862b;
	--gold-400: #d8ad5c;
	--burgundy-600: #7a2e2e;
	--parchment-100: #f6f2e7;
	--parchment-200: #ede4cd;
	--ink-900: #211f1b;
	--ink-600: #4a473f;
	--white: #fffdf8;

	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--measure: 46rem;
	--shell: 1120px;
}

/* ---------------------------------------------------------------------------
   Ground.
   --------------------------------------------------------------------------- */

/* The green runs the whole page, not just the hero: switching to parchment
   below it cut the site in two. Content that needs a long read sits on a light
   sheet floating on the green instead, so nothing turns into pale text on a
   dark ground for paragraphs at a time. */
body {
	background: var(--green-900);
	color: rgba(255, 253, 248, 0.86);
	font-family: var(--sans);
	line-height: 1.55;
}

/* The crest follows the whole page rather than living in the hero, which is
   what makes the green read as one surface. It is fixed, so scrolling moves
   the content across it.

   The mask is not the crest's own alpha: its divisions and inscriptions are
   drawn in opaque white, so masking by alpha filled them in and the shape
   flattened into a blob. crest-mask.png inverts by brightness instead - the
   dark green becomes surface, the white line work becomes hole - so the
   background shows through the drawing exactly where the lines are. */
body::before {
	content: "";
	position: fixed;
	right: -8%;
	top: 46%;
	transform: translateY(-50%);
	width: min(780px, 88vw);
	aspect-ratio: 1;
	background-image: linear-gradient(
		118deg,
		rgba(255, 253, 248, 0.95) 0%,
		rgba(255, 253, 248, 0.55) 28%,
		rgba(216, 173, 92, 0.85) 52%,
		rgba(255, 253, 248, 0.4) 78%,
		rgba(255, 253, 248, 0.75) 100%
	);
	-webkit-mask-image: var(--berge-crest-mask);
	mask-image: var(--berge-crest-mask);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 899px) {
	body::before {
		right: -32%;
		top: 40%;
		width: min(620px, 118vw);
		opacity: 0.13;
	}
}

h1, h2, h3, h4 { color: var(--white); }

a { color: var(--gold-400); }

a:hover,
a:focus-visible { color: var(--white); }

.site-content,
.site .grid-container {
	max-width: var(--shell);
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	letter-spacing: -0.01em;
	color: var(--ink-900);
	font-weight: 600;
}

a {
	color: var(--green-700);
}

a:hover,
a:focus-visible {
	color: var(--gold-600);
}

.berge-eyebrow {
	display: block;
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-600);
	margin-bottom: 0.5em;
}

/* ---------------------------------------------------------------------------
   Header: sticky, deep green, crest on a light plaque.

   The crest is a bright kelly green and the header is a dark forest green.
   Setting one on the other muddies both, so the crest always sits on a
   parchment plaque - never directly on the green.
   --------------------------------------------------------------------------- */

.berge-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--green-900);
	color: var(--parchment-100);
}

.berge-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0.9em 1.5em;
}

.berge-brand {
	display: flex;
	align-items: center;
	gap: 0.8em;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--parchment-100);
	text-decoration: none;
	line-height: 1.2;
}

.berge-plaque {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--parchment-100);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(184, 134, 43, 0.4);
	flex-shrink: 0;
	padding: 5px 7px;
	height: 46px;
}

.berge-plaque img {
	display: block;
	height: 100%;
	width: auto;
}

/* First navigation row */
.berge-nav {
	display: none;
	gap: 1.75em;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
}

.berge-nav a {
	color: var(--parchment-100);
	text-decoration: none;
	opacity: 0.88;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.berge-nav a:hover,
.berge-nav a:focus-visible,
.berge-nav .current-menu-item > a {
	opacity: 1;
	color: var(--parchment-100);
	border-color: var(--gold-400);
}

/* A first-row entry may carry its own pages — Schützenfest carries the
   Anzugsordnung and the Rechte und Pflichten. They open downwards out of the
   bar, in the same green as the departments' dropdown so the two rows do not
   invent two different ways of saying "there is more here". */
.berge-nav > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.35em;
	/* The padding is what the pointer travels through on its way down to the
	   dropdown. Without it the panel hangs below the entry's box, and crossing
	   the gap unhovers the entry and closes the panel mid-reach. */
	padding: 0.45em 0;
}

.berge-nav__caret {
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--gold-400);
	border-bottom: 2px solid var(--gold-400);
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.berge-nav > li:hover .berge-nav__caret,
.berge-nav > li:focus-within .berge-nav__caret {
	transform: translateY(0.05em) rotate(225deg);
}

.berge-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -0.9em;
	z-index: 6;
	min-width: 15em;
	margin: 0;
	padding: 0.35em 0;
	list-style: none;
	background: var(--green-900);
	border-top: 2px solid var(--gold-400);
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}

.berge-nav > li:hover > .sub-menu,
.berge-nav > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.berge-nav .sub-menu a {
	display: block;
	padding: 0.5em 1.1em;
	color: rgba(246, 242, 231, 0.88);
	text-decoration: none;
	font-size: 0.86rem;
	border-bottom: 0;
	opacity: 1;
}

.berge-nav .sub-menu a:hover,
.berge-nav .sub-menu a:focus-visible {
	background: var(--green-700);
	color: var(--parchment-100);
	border-color: transparent;
}

/* Second row: the departments, spread across the full width. */
.berge-subrow {
	display: none;
	background: var(--green-700);
	border-top: 1px solid rgba(216, 173, 92, 0.28);
}

.berge-subrow__inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 1.5em;
}

.berge-subrow__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.berge-subrow__list > li {
	position: relative;
}

.berge-subrow__list > li > a {
	display: flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.6em 1.1em;
	color: rgba(246, 242, 231, 0.9);
	text-decoration: none;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
}

.berge-subrow__list > li > a:hover,
.berge-subrow__list > li:hover > a,
.berge-subrow__list > li:focus-within > a {
	background: var(--green-900);
	color: var(--parchment-100);
}

/* A chevron rather than a dot: a dot says "something is here", an arrow says
   which way it opens. */
.berge-subrow__caret {
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-left: 0.15em;
	border-right: 2px solid var(--gold-400);
	border-bottom: 2px solid var(--gold-400);
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.berge-subrow__list > li:hover > a .berge-subrow__caret,
.berge-subrow__list > li:focus-within > a .berge-subrow__caret {
	transform: translateY(0.05em) rotate(225deg);
}

.berge-subrow .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	min-width: 15em;
	margin: 0;
	padding: 0.35em 0;
	list-style: none;
	background: var(--green-900);
	border-top: 2px solid var(--gold-400);
	box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
}

.berge-subrow li:hover > .sub-menu,
.berge-subrow li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.berge-subrow .sub-menu a {
	display: block;
	padding: 0.5em 1.1em;
	color: rgba(246, 242, 231, 0.88);
	text-decoration: none;
	font-size: 0.86rem;
}

.berge-subrow .sub-menu a:hover,
.berge-subrow .sub-menu a:focus-visible {
	background: var(--green-700);
	color: var(--parchment-100);
}

.berge-burger {
	background: none;
	border: 1px solid rgba(246, 242, 231, 0.4);
	color: var(--parchment-100);
	padding: 0.55em 0.9em;
	border-radius: 6px;
	font-family: var(--mono);
	font-size: 0.82rem;
	cursor: pointer;
}

@media (min-width: 900px) {
	.berge-nav { display: flex; }
	.berge-subrow { display: block; }
	.berge-burger { display: none; }
}

/* ---------------------------------------------------------------------------
   Hero, with the crest as a watermark.

   The draft put abstract gold rings here. The crest says the same thing and
   says whose it is - but it carries lettering and two charges, and at a
   watermark's opacity that detail turns into noise. So it is blown up far
   past the frame and cropped: only the shield's silhouette and the wreath
   survive, which is exactly what a watermark should be.
   --------------------------------------------------------------------------- */

.berge-hero {
	position: relative;
	overflow: hidden;
	color: var(--white);
	padding: 4.5rem 0 4rem;
}

.berge-hero__inner {
	position: relative;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 1.5em;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.berge-hero__inner {
		grid-template-columns: 1.3fr 1fr;
		align-items: center;
	}
}

.berge-hero .berge-eyebrow { color: var(--gold-400); }

.berge-hero h1 {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	line-height: 1.08;
	color: var(--white);
	margin: 0;
}

.berge-hero__lede {
	margin-top: 1.2rem;
	max-width: 46ch;
	color: rgba(255, 253, 248, 0.82);
	font-size: 1.05rem;
}

.berge-hero__ctas {
	display: flex;
	gap: 0.85em;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.berge-btn {
	display: inline-block;
	padding: 0.8em 1.5em;
	border-radius: 2px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.berge-btn:hover { transform: translateY(-1px); }

.berge-btn--gold {
	background: var(--gold-400);
	color: var(--green-900);
}

.berge-btn--gold:hover {
	background: var(--gold-600);
	color: var(--green-900);
}

.berge-btn--outline {
	border-color: rgba(246, 242, 231, 0.5);
	color: var(--white);
}

.berge-btn--outline:hover {
	border-color: var(--gold-400);
	color: var(--gold-400);
}

/* The next-event card, with its burgundy pennant. */
.berge-eventcard {
	background: var(--parchment-100);
	color: var(--ink-900);
	border-radius: 4px;
	padding: 1.8em;
	position: relative;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.berge-eventcard::before {
	content: "";
	position: absolute;
	top: 0;
	right: 1.8em;
	width: 34px;
	height: 52px;
	background: var(--burgundy-600);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

.berge-eventcard .berge-eyebrow { color: var(--burgundy-600); }

.berge-eventcard__date {
	font-family: var(--mono);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--green-900);
	line-height: 1.1;
}

.berge-eventcard__name {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0.3em;
}

.berge-eventcard__meta {
	margin-top: 0.6em;
	font-size: 0.9rem;
	color: var(--ink-600);
}

.berge-eventcard__empty {
	color: var(--ink-600);
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Content, mobile menu, footer.
   --------------------------------------------------------------------------- */

.berge-skip {
	position: absolute;
	left: -9999px;
}

.berge-skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	background: var(--gold-400);
	color: var(--green-900);
	padding: 0.6em 1em;
	border-radius: 3px;
}

.berge-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#berge-content {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 1.5em;
}

.berge-hero { margin: 0 calc(50% - 50vw); padding-inline: max(1.5em, calc(50vw - var(--shell) / 2)); }

.berge-main,
.site-main {
	padding: 3rem 0 4rem;
}

/* Prose keeps a readable measure; tables, galleries and the boxes stay wide. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote,
.berge-main > .entry-content > p {
	max-width: var(--measure);
}

.entry-content table,
.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.berge-mobile {
	background: var(--green-700);
	border-top: 1px solid rgba(216, 173, 92, 0.28);
	padding: 0.6em 1.5em 1.2em;
}

.berge-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.berge-mobile__link,
.berge-mobile__grouptitle {
	display: block;
	padding: 0.55em 0;
	color: var(--parchment-100);
	text-decoration: none;
	font-size: 0.95rem;
}

.berge-mobile__grouptitle {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-400);
	margin-top: 0.8em;
}

/* Any nested list is a level down, whether it hangs under a department or
   under a first-row entry such as Schützenfest. */
.berge-mobile li ul .berge-mobile__link {
	padding-left: 1em;
	opacity: 0.9;
}

@media (min-width: 900px) {
	.berge-mobile { display: none !important; }
}

.berge-footer {
	background: var(--green-900);
	color: rgba(255, 253, 248, 0.72);
	padding: 3rem 0 1.6rem;
	font-size: 0.9rem;
	margin-top: 3rem;
}

.berge-footer__inner,
.berge-footer__bottom {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 1.5em;
}

.berge-footer__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.berge-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.berge-footer__brand {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.berge-footer__brand strong {
	color: var(--white);
	font-family: var(--serif);
	font-size: 1.02rem;
}

.berge-footer__brand p {
	margin: 0.4em 0 0;
	max-width: 32ch;
	color: rgba(255, 253, 248, 0.6);
}

.berge-plaque--footer { height: 56px; }

.berge-footer .widget-title,
.berge-footer h2,
.berge-footer h4 {
	color: var(--white);
	font-family: var(--sans);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.9em;
}

.berge-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.berge-footer a {
	color: rgba(255, 253, 248, 0.78);
	text-decoration: none;
}

.berge-footer a:hover,
.berge-footer a:focus-visible { color: var(--gold-400); }

.berge-footer__bottom {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(246, 242, 231, 0.14);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.8em;
	font-size: 0.82rem;
}

.berge-footer__bottom ul {
	flex-direction: row;
	gap: 1.2em;
}

/* ---------------------------------------------------------------------------
   The shared components, dressed in this design's language.
   The plugin renders the same markup for both themes; only this changes.
   --------------------------------------------------------------------------- */

.berge-next {
	background: var(--white);
	border: 1px solid var(--parchment-200);
	border-top: 3px solid var(--gold-400);
	border-radius: 3px;
	padding: 1.6em 1.8em 1.3em;
	margin: 0 0 3rem;
}

.berge-next__title { font-size: 1.4rem; }
.berge-next__all { font-family: var(--mono); font-size: 0.82rem; }
.berge-next__date { background: var(--green-900); border-radius: 2px; }
.berge-next__day { font-family: var(--mono); }
.berge-next__month { font-family: var(--mono); color: var(--gold-400); }
.berge-next__link { font-family: var(--serif); font-size: 1.05rem; }
.berge-next__item { border-bottom-color: var(--parchment-200); }

.berge-news__list {
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.berge-news__list { grid-template-columns: repeat(3, 1fr); }
}

.berge-news__item {
	background: var(--white);
	border: 1px solid var(--parchment-200);
	border-radius: 3px;
	overflow: hidden;
}

.berge-news__link {
	display: block;
	grid-template-columns: none;
}

/* The pictures here are mostly flyers, and a flyer is the message: dates,
   times and the venue sit near its edges, so a crop cuts away the very thing
   the card exists to show. They are fitted whole into a portrait frame and
   letterboxed on the parchment instead. Landscape photos lose a little height
   to that, which is the cheaper loss. */
.berge-news__media {
	background: var(--parchment-200);
}

.berge-news__media img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.berge-news__body { padding: 1.1em 1.2em 1.3em; }
.berge-news__meta { font-family: var(--mono); font-size: 0.76rem; color: var(--gold-600); order: -1; }
.berge-news__title { font-family: var(--serif); font-size: 1.06rem; }
.berge-news__excerpt { color: var(--ink-600); font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   Cookie notice, in this design's language.

   Both choices are the same size: refusing must not be the harder option.
   --------------------------------------------------------------------------- */

#cookie-law-info-bar {
	background: var(--green-900) !important;
	color: rgba(255, 253, 248, 0.85) !important;
	border-top: 2px solid var(--gold-400) !important;
	padding: 1em 1.2em !important;
	font-size: 0.9rem;
	line-height: 1.5;
}

#cookie-law-info-bar a.cli-plugin-main-link {
	color: var(--gold-400) !important;
}

#cookie-law-info-bar a.cli_action_button,
#cookie-law-info-bar a.cli-plugin-button {
	display: inline-block;
	margin: 0.6em 0.4em 0 0;
	padding: 0.55em 1.3em;
	min-width: 10em;
	text-align: center;
	border-radius: 2px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

#cookie-law-info-bar a.wt-cli-accept-btn {
	background: var(--gold-400) !important;
	color: var(--green-900) !important;
}

#cookie-law-info-bar a.wt-cli-accept-btn:hover {
	background: var(--gold-600) !important;
}

#cookie-law-info-bar a.cookie_action_close_header_reject {
	background: transparent !important;
	color: var(--parchment-100) !important;
	border: 1px solid rgba(246, 242, 231, 0.5);
}

#cookie-law-info-bar a.cookie_action_close_header_reject:hover {
	border-color: var(--gold-400);
	color: var(--gold-400) !important;
}

@media (max-width: 600px) {
	#cookie-law-info-bar a.cli_action_button,
	#cookie-law-info-bar a.cli-plugin-button {
		display: block;
		width: 100%;
		margin: 0.5em 0 0;
	}
}

/* ---------------------------------------------------------------------------
   The hero card cycles through the next dates.

   Slides are stacked rather than laid side by side, so the card keeps the
   height of its tallest entry and nothing below it jumps when the date
   changes.
   --------------------------------------------------------------------------- */

.berge-eventcard__deck {
	display: grid;
}

.berge-eventcard__slide {
	grid-area: 1 / 1;
}

.berge-eventcard__slide[hidden] {
	display: none;
}

.berge-eventcard__name {
	font-family: var(--serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0.3em 0 0;
	color: var(--ink-900);
}

.berge-eventcard__link {
	margin: 0.7em 0 0;
	font-size: 0.9rem;
}

.berge-eventcard__dots {
	display: flex;
	gap: 0.5em;
	margin-top: 1.2em;
}

.berge-eventcard__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--green-900);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.berge-eventcard__dot:hover { transform: scale(1.25); }

.berge-eventcard__dot[aria-selected="true"] {
	background: var(--green-900);
}

.berge-eventcard__dot:focus-visible {
	outline: 2px solid var(--gold-600);
	outline-offset: 3px;
}

.berge-eventcard__all {
	margin: 0.8em 0 0;
	font-family: var(--mono);
	font-size: 0.78rem;
}

/* Give the dots a comfortable target on touch without changing how they look. */
@media (pointer: coarse) {
	.berge-eventcard__dot {
		position: relative;
	}

	.berge-eventcard__dot::after {
		content: "";
		position: absolute;
		inset: -12px;
	}
}


/* ---------------------------------------------------------------------------
   Light sheets on the green.

   Cards and article bodies bring their own ground. Everything inside them goes
   back to dark ink, because the page default is now the other way round.
   --------------------------------------------------------------------------- */

.berge-eventcard,
.berge-next,
.berge-news__item,
.berge-sheet,
.entry-content > .wp-block-table {
	color: var(--ink-900);
}

.berge-eventcard a,
.berge-next a,
.berge-news__item a,
.berge-sheet a,
body:not(.home) .berge-main .entry-content a {
	color: var(--green-700);
}

.berge-eventcard a:hover,
.berge-next a:hover,
.berge-news__item a:hover,
body:not(.home) .berge-main .entry-content a:hover {
	color: var(--gold-600);
}

.berge-next__title,
.berge-news__title,
.berge-eventcard__name {
	color: var(--ink-900);
}

/* On the front page the content sits straight on the green, so its own
   headings and text stay light. Only the cards inside it turn dark. */
/* Direct children only. Written as a descendant rule this also painted the
   text inside the cards, which sit on cream - the excerpts turned nearly
   invisible. */
.home .berge-main .entry-content,
.home .berge-main .entry-content > p {
	color: rgba(255, 253, 248, 0.86);
}

.home .berge-main .entry-content > h2,
.home .berge-main .entry-content > h3 {
	color: var(--white);
}

.home .berge-main .entry-content > p > a,
.home .berge-main .entry-content > h2 a {
	color: var(--gold-400);
}

/* Pages that are mostly reading - the tables of kings, the dress code, the
   privacy policy - keep their own light sheet so long text is never pale on
   dark. The green stays visible around it. */
body:not(.home) .site-main,
body:not(.home) .berge-main {
	background: var(--parchment-100);
	color: var(--ink-900);
	border-radius: 4px;
	padding: 2.5rem 2rem 3rem;
	margin: 2.5rem 0 3rem;
}

body:not(.home) .site-main h1,
body:not(.home) .site-main h2,
body:not(.home) .site-main h3,
body:not(.home) .site-main h4 {
	color: var(--ink-900);
}

body:not(.home) .site-main a {
	color: var(--green-700);
}

body:not(.home) .site-main a:hover {
	color: var(--gold-600);
}

@media (max-width: 600px) {
	body:not(.home) .site-main,
	body:not(.home) .berge-main {
		padding: 1.6rem 1.1rem 2rem;
	}
}

/* Content must sit above the fixed crest, not behind it. The header needs a
   layer of its own and a higher one: it was swept into this rule and lost the
   z-index it was given, which put its dropdowns behind the page - they looked
   transparent because the content was painting over them. */
#berge-content,
.berge-footer {
	position: relative;
	z-index: 1;
}

.berge-header {
	position: sticky;
	z-index: 60;
}

/* ---------------------------------------------------------------------------
   One cream, one dark green.

   The cards were white on a parchment page on a green ground - three surfaces
   where two will do. Everything that is not the green now sits on the same
   cream, and every heading on it is the club green rather than near-black, so
   the colour that carries the site also carries its type.
   --------------------------------------------------------------------------- */

.berge-news__item,
.berge-eventcard,
.berge-next,
.berge-sheet {
	background: var(--parchment-100);
}

/* The flyer is letterboxed on the same cream as the card, so the picture sits
   in the card rather than in a frame inside it. */
.berge-news__media {
	background: var(--parchment-100);
}

.berge-news__title,
.berge-eventcard__name,
.berge-next__title,
.berge-next__link,
.berge-sheet h2,
.berge-sheet h3 {
	color: var(--green-900);
}

.berge-news__excerpt,
.berge-eventcard__meta,
.berge-next__meta {
	color: var(--ink-600);
}

/* GeneratePress gives articles their own white box; on a cream sheet that
   reads as a second frame around the same content. */
body:not(.home) .site-main .inside-article,
body:not(.home) .site-main .entry-content,
body:not(.home) .site-main article {
	background: transparent;
	box-shadow: none;
}

body:not(.home) .site-main h1,
body:not(.home) .site-main h2,
body:not(.home) .site-main h3,
body:not(.home) .site-main h4 {
	color: var(--green-900);
}