/*
 * Word-lid-pagina + ledenportal.
 *
 * Leunt op de CSS-variabelen van het Dreamkit-thema en valt terug op neutrale
 * waarden, zodat de pagina ook zonder die variabelen leesbaar blijft.
 */

.wings-republiek-wordlid,
.wings-republiek-portal {
	--wr-border: var(--wings-card-border-color, var(--wings-border-color, #dcdcdc));
	--wr-border-soft: var(--wings-border-color, #d3d5de);
	--wr-radius: var(--wings-border-radius, 6px);
	--wr-accent: var(--wings-accent-color, #f59e0b);
	--wr-muted: var(--wings-background-muted, #f5f5f4);
	--wr-navy: var(--wings-button-secondary-text-color, #232d59);
	--wr-button: var(--wings-button-background, #ffcaf5);
	--wr-button-hover: var(--wings-button-hover-background, #d9acd0);
}

/* ---------------------------------------------------------------- knoppen */

/*
 * Volgt de knoppentaal van het thema (roze vlak, navy tekst, donkerder roze op
 * hover) in plaats van een eigen accent-invulling — anders vloekt onze knop met
 * elke andere knop op de site. text-decoration met !important: de
 * geconsolideerde theme-CSS onderstreept links met hogere specificiteit.
 */
.wings-republiek-button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 2px solid var(--wr-button);
	border-radius: var(--wings-button-border-radius, var(--wr-radius));
	background: var(--wr-button);
	color: var(--wr-navy);
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.wings-republiek-button:hover,
.wings-republiek-button:focus {
	background: var(--wr-button-hover);
	border-color: var(--wr-button-hover);
	color: var(--wr-navy);
}

.wings-republiek-button--secondary {
	background: transparent;
	border-color: var(--wr-navy);
	color: var(--wr-navy);
}

.wings-republiek-button--secondary:hover,
.wings-republiek-button--secondary:focus {
	background: var(--wr-navy);
	border-color: var(--wr-navy);
	color: #fff;
}

.wings-republiek-button--quiet {
	background: transparent;
	border-color: var(--wr-border);
	color: inherit;
	font-weight: var(--font-weight-normal, 400);
}

.wings-republiek-button--quiet:hover,
.wings-republiek-button--quiet:focus {
	background: var(--wr-muted);
	border-color: currentColor;
	color: inherit;
}

/* -------------------------------------------------------- word-lid-pagina */

/*
 * Het ontwerp is `republiek/docs/design/word-lid/mockup-v2.html` (A4); de
 * README ernaast legt de keuzes uit. Kleuren uit wings-tokens.json (navy,
 * roze, mint, papier), koppen in de displayletter van het thema (Cubano),
 * lopende tekst in de broodletter (Adelle).
 *
 * De maten staan in em ten opzichte van het blok zelf, niet in rem: de root
 * van het thema staat op 18px en de body op 20px, en zo blijven de
 * verhoudingen uit de mockup staan als het thema zijn schaal verandert.
 * Media queries staan in em omdat die altijd tegen de browserstandaard van
 * 16px rekenen, zodat de breekpunten gelijk zijn aan die van de mockup.
 */
.wings-republiek-wordlid {
	--wl-navy: #232d59;
	--wl-navy-soft: #39426a;
	--wl-pink: #ffcaf5;
	--wl-pink-dark: #d9acd0;
	--wl-mint: #37d3b5;
	--wl-muted: #656c8b;
	--wl-display: var(--wings-font-family-headings, cubano, "Arial Black", sans-serif);
	--wl-gutter: clamp(1.25rem, 4vw, 3.5rem);

	/*
	 * Uit de leeskolom van het thema (743px) naar de volle breedte: de pagina
	 * werkt, zoals de rest van republiek.org, met kleurvlakken van rand tot
	 * rand. De kolom staat gecentreerd, dus `50% - 50vw` is precies de afstand
	 * tot de rand van het scherm.
	 */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	color: var(--wl-navy);
	font-size: 0.95em;
	line-height: 1.55;
	text-align: left;
}

/*
 * `100vw` telt op Windows de scrollbalk mee; zonder deze regel krijgt de
 * pagina daar een horizontale scrollbalk van een paar pixels. `clip` en niet
 * `hidden`: clip maakt geen scrollcontainer, dus een sticky header blijft
 * werken.
 */
.wings-republiek-wordlid-page .page-wrapper {
	overflow-x: clip;
}

.wings-republiek-wordlid__inner {
	box-sizing: border-box;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: var(--wl-gutter);
}

/*
 * Het thema geeft alinea's en lijstregels in de inhoud een eigen maat en
 * kleur (`.entry-content p`, `.entry-content li`). Hier erven ze van hun
 * vlak: anders wordt de tekst in het navy vlak navy op navy.
 */
.wings-republiek-wordlid .wings-republiek-wordlid__inner :where(p, li) {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/* ---- het eerste scherm */

/*
 * Eén vlak met kop, rechten en bedragen. De hoogte staat niet vast op de
 * viewport: op een korte laptop zou dat de kaarten juist wegduwen. Elk
 * onderdeel is krap gehouden, zodat het geheel op 1280x660 binnen het scherm
 * valt en op een groot scherm niet uit elkaar valt.
 */
.wings-republiek-wordlid__top {
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 2.75rem);
	background: var(--wl-navy);
	color: #fff;
}

.wings-republiek-wordlid .wings-republiek-wordlid__notice {
	margin-bottom: 1.25em;
	color: #dcdeea;
	font-size: 0.9em;
}

.wings-republiek-wordlid__head {
	display: grid;
	gap: 1.5rem 3.5rem;
	align-items: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 60em) {
	.wings-republiek-wordlid__head {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	}
}

.wings-republiek-wordlid .wings-republiek-wordlid__title {
	max-width: 24ch;
	margin: 0;
	color: #fff;
	font-family: var(--wl-display);
	font-size: clamp(1.75em, 4.2vw, 2.6em);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: 0.005em;
	text-transform: none;
}

.wings-republiek-wordlid .wings-republiek-wordlid__lead {
	max-width: 44ch;
	margin-top: 0.8em;
	color: #dcdeea;
}

/*
 * De rechten van een lid: klein en naast de kop. Geen kopje erboven, dat zou
 * ze weer tot een sectie promoveren.
 */
.wings-republiek-wordlid .wings-republiek-wordlid__rights {
	margin: 0;
	padding: 0;
	color: #c8ccdd;
	font-size: 0.9em;
	list-style: none;
}

.wings-republiek-wordlid .wings-republiek-wordlid__rights li {
	position: relative;
	margin: 0;
	padding: 0.45em 0 0.45em 1.1em;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wings-republiek-wordlid .wings-republiek-wordlid__rights li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.wings-republiek-wordlid .wings-republiek-wordlid__rights li::before {
	content: "";
	position: absolute;
	top: 1.05em;
	left: 0;
	width: 0.4em;
	height: 0.4em;
	margin: 0;
	border-radius: 50%;
	background: var(--wl-pink);
}

/* ---- de twee bedragen */

.wings-republiek-wordlid__amounts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 46em) {
	.wings-republiek-wordlid__amounts {
		grid-template-columns: 1fr 1fr;
	}
}

/*
 * Twee blokken die niet op elkaar lijken: wit tegenover vol roze. Het
 * verschil zit in het vlak, niet in een badge, want er is geen bedrag dat
 * beter is dan het andere (D-18).
 */
.wings-republiek-wordlid__amount {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.35em 1.5em;
	align-items: center;
	padding: clamp(1.05rem, 2.2vw, 1.45rem) clamp(1.15rem, 2.4vw, 1.6rem);
	border-radius: 8px;
	background: #fff;
	color: var(--wl-navy);
}

.wings-republiek-wordlid__amount--plus {
	background: var(--wl-pink);
}

.wings-republiek-wordlid .wings-republiek-wordlid__figure {
	display: flex;
	grid-column: 1;
	gap: 0.18em;
	align-items: flex-start;
	font-family: var(--wl-display);
	font-size: clamp(2.2em, 5.5vw, 2.95em);
	line-height: 0.95;
}

/*
 * Niet op de basislijn van het bedrag: dan hangt "per jaar" onderaan een
 * cijfer van drie centimeter en leest het als een voetnoot. Iets onder de
 * bovenkant van de cijfers hoort het bij het bedrag.
 */
.wings-republiek-wordlid__period {
	margin-top: 0.62em;
	color: var(--wl-muted);
	font-family: var(--wings-font-family-body, inherit);
	font-size: max(0.3em, 0.9rem);
	line-height: 1;
	white-space: nowrap;
}

.wings-republiek-wordlid__amount--plus .wings-republiek-wordlid__period {
	color: var(--wl-navy);
	opacity: 0.7;
}

.wings-republiek-wordlid .wings-republiek-wordlid__note {
	grid-column: 1;
	max-width: 26ch;
	margin-top: 0.35em;
	font-size: 0.95em;
}

.wings-republiek-wordlid .wings-republiek-wordlid__pet {
	display: block;
	grid-row: 1 / span 2;
	grid-column: 2;
	width: 6.3em;
	height: auto;
	margin: 0;
	border-radius: 6px;
	background: #fff;
}

.wings-republiek-wordlid .wings-republiek-wordlid__action {
	grid-column: 1 / -1;
	margin-top: 0.6em;
}

/*
 * Smal scherm: de pet blijft naast het bedrag staan maar wordt kleiner, en de
 * regel eronder loopt over de volle breedte in plaats van te knellen in een
 * kolom van vier woorden.
 */
@media (max-width: 34em) {
	.wings-republiek-wordlid .wings-republiek-wordlid__pet {
		grid-row: 1;
		align-self: start;
		width: 4.8em;
	}

	.wings-republiek-wordlid .wings-republiek-wordlid__note {
		grid-column: 1 / -1;
	}
}

/*
 * Eigen knop in plaats van `.wings-republiek-button`: op de witte en roze
 * vlakken en op het mint van "Lid voor het leven" is navy de knop, en het
 * sitebrede roze zou op de roze kaart verdwijnen. `text-decoration` met
 * !important omdat de geconsolideerde theme-CSS links onderstreept.
 */
.wings-republiek-wordlid .wings-republiek-wordlid__button {
	display: inline-block;
	padding: 0.75em 1.4em;
	border: 2px solid var(--wl-navy);
	border-radius: 8px;
	background: var(--wl-navy);
	color: #fff;
	font-family: inherit;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.wings-republiek-wordlid .wings-republiek-wordlid__button:hover,
.wings-republiek-wordlid .wings-republiek-wordlid__button:focus-visible {
	border-color: var(--wl-navy-soft);
	background: var(--wl-navy-soft);
	color: #fff;
}

.wings-republiek-wordlid a:focus-visible {
	outline: 3px solid var(--wl-mint);
	outline-offset: 3px;
}

/* ---- de betaalregel */

.wings-republiek-wordlid__steps {
	display: grid;
	gap: 0.4em 2.5em;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	color: #c8ccdd;
	font-size: 0.9em;
}

@media (min-width: 46em) {
	.wings-republiek-wordlid__steps {
		grid-template-columns: repeat(2, minmax(0, 22rem));
	}
}

.wings-republiek-wordlid__step {
	color: #fff;
	font-family: var(--wl-display);
}

/* ---- de staart */

/*
 * Wat niet op het eerste scherm hoeft: de afwijkende bedragen en het
 * lidmaatschap voor het leven. Wie hier komt, zoekt iets specifieks.
 */
.wings-republiek-wordlid__tail {
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.wings-republiek-wordlid__tail-grid {
	display: grid;
	gap: 2.5rem 4rem;
}

@media (min-width: 60em) {
	.wings-republiek-wordlid__tail-grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.wings-republiek-wordlid .wings-republiek-wordlid__tail h2 {
	margin: 0;
	color: var(--wl-navy);
	font-family: var(--wl-display);
	font-size: clamp(1.2em, 2.2vw, 1.45em);
	font-weight: 400;
	line-height: 1.04;
	text-transform: none;
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links {
	margin: 1.1em 0 0;
	padding: 0;
	list-style: none;
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links li {
	margin: 0;
	padding: 0;
	border-top: 2px solid rgba(35, 45, 89, 0.14);
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links li::before {
	content: none;
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links li:last-child {
	border-bottom: 2px solid rgba(35, 45, 89, 0.14);
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links a {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1em;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 0.8em;
	color: var(--wl-navy);
	font-size: 0.95em;
	text-decoration: none !important;
}

.wings-republiek-wordlid .wings-republiek-wordlid__other-links a:hover .wings-republiek-wordlid__other-label,
.wings-republiek-wordlid .wings-republiek-wordlid__other-links a:focus-visible .wings-republiek-wordlid__other-label {
	text-decoration: underline;
}

.wings-republiek-wordlid__other-price {
	color: var(--wl-muted);
	font-family: var(--wl-display);
	font-size: 1.05em;
}

@media (max-width: 40em) {
	.wings-republiek-wordlid .wings-republiek-wordlid__other-links a {
		display: block;
	}

	.wings-republiek-wordlid__other-price {
		display: block;
		margin-top: 0.15em;
	}
}

.wings-republiek-wordlid__lifetime {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: 8px;
	background: var(--wl-mint);
}

.wings-republiek-wordlid .wings-republiek-wordlid__lifetime p {
	max-width: 40ch;
	margin-top: 0.75em;
	font-size: 0.95em;
}

.wings-republiek-wordlid .wings-republiek-wordlid__lifetime .wings-republiek-wordlid__action {
	margin-top: 1.1em;
	font-size: 1em;
}

@media (prefers-reduced-motion: reduce) {
	.wings-republiek-wordlid * {
		transition: none !important;
	}
}

/* ------------------------------------------------------------ ledenportal */

.wings-republiek-portal__section {
	margin-bottom: 2.5rem;
}

.wings-republiek-portal__card,
.wings-republiek-portal__block {
	margin-bottom: 1.25rem;
	padding: 1.5rem;
	border: 1px solid var(--wr-border);
	border-radius: var(--wr-radius);
}

.wings-republiek-portal__tier {
	margin-top: 0;
}

.wings-republiek-portal__details {
	display: grid;
	gap: 0.35rem 1.5rem;
	grid-template-columns: minmax(9rem, max-content) 1fr;
	margin: 0 0 1.25rem;
}

.wings-republiek-portal__details dt {
	font-weight: var(--font-weight-bold, 700);
}

.wings-republiek-portal__details dd {
	margin: 0;
}

.wings-republiek-portal__status {
	display: inline-block;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: var(--wr-muted);
	font-size: var(--font-size-sm, 0.875rem);
}

.wings-republiek-portal__status.is-active {
	background: #e4f4e8;
}

.wings-republiek-portal__status.is-pending-cancel,
.wings-republiek-portal__status.is-on-hold {
	background: #fdf1d8;
}

.wings-republiek-portal__notice {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wr-accent);
	background: var(--wr-muted);
}

.wings-republiek-portal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.wings-republiek-portal__block--cancel {
	background: var(--wr-muted);
}

.wings-republiek-portal__links,
.wings-republiek-portal__past {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wings-republiek-portal__links li,
.wings-republiek-portal__past li {
	margin-bottom: 0.4rem;
}

.wings-republiek-portal__membernumber {
	margin-bottom: 0;
	opacity: 0.8;
}