/**
 * Membership page sections.
 *
 * Every rule is scoped under .mdc-mem. The scoping runs in both directions: it keeps
 * these rules off the rest of the page, and it makes them specific enough to win
 * against the theme and Beaver Builder, which both style table, th, td, a and button
 * heavily, without resorting to !important.
 *
 * Headings deliberately inherit the theme's font so the page keeps the existing
 * Maison de Chloé identity rather than introducing a second typeface.
 *
 * Sizes are in px, not rem, and that is deliberate. bb-theme's base.min.css sets
 * html { font-size: 10px }, the 62.5% convention, so 1rem is 10px on this site rather
 * than the 16px a stylesheet normally assumes. The first version of this file was
 * written in rem against a 16px root, which rendered every size at 62.5% of its
 * intended value: 13px legal text came out at 8px and the whole section sat visibly
 * smaller than the calculator below it. px cannot be moved by a theme changing its
 * root, and it is what bb-theme's own customiser and mdc-calculator.css already emit,
 * so the two sections of this page now share one scale.
 *
 * Two exceptions, both correct as they stand:
 *   - letter-spacing and the bullet offset are in em, which is relative to the
 *     element's own font-size, so they track whatever size that element ends up.
 *   - the media queries below are in em, which in a media query is relative to the
 *     initial 16px and is NOT affected by the root override. 48em is 768px here.
 *     Do not "correct" these to match the px above.
 */

.mdc-mem {
	--mdc-beige: #f0ddcc;
	--mdc-cream: #f6f1eb;
	--mdc-card: #ffffff;
	--mdc-ink: #000000;
	--mdc-body: #434343;
	--mdc-muted: #7a7167;
	--mdc-line: #e0d2c2;
	--mdc-line-soft: #ede4d9;
	--mdc-terra: #c04732;
	--mdc-terra-dk: #9e3826;

	/*
	 * Gold is the site's button colour: it is what the theme paints every WooCommerce
	 * button, and what the Beaver Builder pages use throughout. Terracotta is the site's
	 * link and accent colour. So anything here that is a button is gold, and terracotta
	 * is kept for accents: the badge, the bullets, the focus rings and the open marker.
	 *
	 * These two values, and the black hover, are taken from the theme's own button rule
	 * so a Join button and an Add to cart button are indistinguishable.
	 */
	--mdc-gold: #9b6c1b;
	--mdc-gold-dk: #674812;

	box-sizing: border-box;
	color: var(--mdc-body);
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	/*
	 * The same base the calculator sets on .mdc-calc. Stating it here rather than
	 * inheriting matters: the theme puts 14px on body, which is smaller than this
	 * section was designed at and smaller than the calculator directly below it.
	 */
	font-size: 17px;
	line-height: 1.65;
	/*
	 * Deliberately no overflow here. Setting overflow-x alone would make the browser
	 * compute overflow-y as auto rather than visible, which turns this into a clipping
	 * box and cuts the top off the Recommended badge. Sideways scrolling is already
	 * contained by .mdc-mem__scroll around each table, which is where it belongs.
	 */
}

.mdc-mem *,
.mdc-mem *::before,
.mdc-mem *::after {
	box-sizing: border-box;
}

.mdc-mem__title {
	color: var(--mdc-ink);
	margin: 0 0 24px;
	text-align: center;
}

/* ---------------------------------------------------------------- cards */

/*
 * Mobile first: one column, so the cards stack in the order they appear in the
 * markup, which is Le Club, La Maison, Privé.
 */
.mdc-mem__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 48em) {
	.mdc-mem__cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

.mdc-mem__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mdc-card);
	border: 1px solid var(--mdc-line);
	border-radius: 2px;
	padding: 36px 28px 28px;
	text-align: center;
}

.mdc-mem__card--featured {
	border-color: var(--mdc-terra);
	box-shadow: 0 2px 24px rgba(192, 71, 50, 0.1);
}

/*
 * Sits wholly inside the card rather than straddling its top border. Straddling looked
 * better but relied on nothing above it ever clipping, and Beaver Builder rows and
 * columns clip in places, so the badge kept losing its top half.
 */
.mdc-mem__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mdc-terra);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 14px;
	white-space: nowrap;
}

.mdc-mem__cardname {
	color: var(--mdc-ink);
	margin: 0 0 12px;
	font-size: 26px;
	line-height: 1.25;
}

.mdc-mem__price {
	margin: 0;
	line-height: 1;
}

.mdc-mem__amount {
	color: var(--mdc-ink);
	font-size: 40px;
	font-weight: 400;
}

.mdc-mem__per {
	color: var(--mdc-muted);
	font-size: 15px;
}

.mdc-mem__annual {
	color: var(--mdc-muted);
	font-size: 15px;
	margin: 8px 0 0;
}

.mdc-mem__pricenote {
	color: var(--mdc-muted);
	font-size: 16px;
}

.mdc-mem__benefits {
	list-style: none;
	margin: 24px 0 28px;
	padding: 0;
	text-align: left;
	font-size: 16px;
	line-height: 1.6;
	/* Pushes the join button to the foot of every card, so they line up. */
	flex: 1 1 auto;
}

.mdc-mem__benefits li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	list-style: none;
}

.mdc-mem__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mdc-terra);
}

.mdc-mem__join,
.mdc-mem .mdc-mem__join {
	display: block;
	width: 100%;
	background: var(--mdc-gold);
	color: #fff;
	border: 1px solid var(--mdc-gold-dk);
	border-radius: 4px;
	padding: 14px 20px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

/* Black on hover, which is what the theme does to every other button on the site. */
.mdc-mem .mdc-mem__join:hover,
.mdc-mem .mdc-mem__join:focus {
	background: #000;
	border-color: #000;
	color: #fff;
	text-decoration: none;
}

.mdc-mem__joinalt,
.mdc-mem .mdc-mem__joinalt {
	display: block;
	margin-top: 12px;
	color: var(--mdc-muted);
	font-size: 13px;
	text-decoration: underline;
}

.mdc-mem .mdc-mem__joinalt:hover,
.mdc-mem .mdc-mem__joinalt:focus {
	color: var(--mdc-terra-dk);
}

.mdc-mem__household {
	margin: 28px 0 0;
	text-align: center;
	color: var(--mdc-ink);
	font-size: 17px;
}

.mdc-mem__prompt {
	margin-top: 24px;
	padding: 20px;
	background: var(--mdc-beige);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

@media (min-width: 40em) {
	.mdc-mem__prompt {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
	}
}

.mdc-mem__promptlink,
.mdc-mem .mdc-mem__promptlink {
	background: transparent;
	border: 1px solid var(--mdc-ink);
	border-radius: 0;
	color: var(--mdc-ink);
	padding: 10px 20px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.mdc-mem .mdc-mem__promptlink:hover,
.mdc-mem .mdc-mem__promptlink:focus {
	background: var(--mdc-ink);
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------- tables */

.mdc-mem__group {
	margin: 0 0 40px;
}

.mdc-mem__grouptitle {
	color: var(--mdc-ink);
	margin: 0 0 6px;
	font-size: 22px;
}

.mdc-mem__groupnote {
	color: var(--mdc-muted);
	font-size: 15px;
	margin: 0 0 14px;
	line-height: 1.5;
}

.mdc-mem__soon {
	margin: 0;
	padding: 14px 18px;
	background: var(--mdc-cream);
	border: 1px solid var(--mdc-line-soft);
	color: var(--mdc-muted);
	font-size: 15px;
}

/*
 * A wide table scrolls inside here rather than widening the page. tabindex makes it
 * reachable by keyboard, so the scroll is not mouse-only, and the outline confirms
 * focus when it is.
 */
.mdc-mem__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.mdc-mem__scroll:focus-visible {
	outline: 2px solid var(--mdc-terra);
	outline-offset: 2px;
}

.mdc-mem table.mdc-mem__table {
	width: 100%;
	min-width: 544px;
	border-collapse: collapse;
	background: var(--mdc-card);
	font-size: 16px;
	margin: 0;
	table-layout: auto;
}

.mdc-mem table.mdc-mem__table--wide {
	min-width: 704px;
}

.mdc-mem .mdc-mem__table th,
.mdc-mem .mdc-mem__table td {
	border: 1px solid var(--mdc-line-soft);
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	line-height: 1.4;
	background: none;
	color: var(--mdc-body);
}

.mdc-mem .mdc-mem__table thead th {
	background: var(--mdc-beige);
	color: var(--mdc-ink);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mdc-mem .mdc-mem__table tbody th {
	background: var(--mdc-cream);
	color: var(--mdc-ink);
	font-weight: 500;
}

.mdc-mem .mdc-mem__table tbody tr:hover th,
.mdc-mem .mdc-mem__table tbody tr:hover td {
	background: rgba(240, 221, 204, 0.28);
}

/* A group heading inside the comparison table. */
.mdc-mem .mdc-mem__grouprow th {
	background: var(--mdc-ink);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

.mdc-mem .mdc-mem__grouprow:hover th {
	background: var(--mdc-ink);
}

/* ------------------------------------------------------------ collapsed */

.mdc-mem__details {
	border: 1px solid var(--mdc-line);
	background: var(--mdc-card);
}

.mdc-mem__summary {
	cursor: pointer;
	padding: 18px 22px;
	color: var(--mdc-ink);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	list-style: none;
}

.mdc-mem__summary::-webkit-details-marker {
	display: none;
}

.mdc-mem__summary::after {
	content: "+";
	float: right;
	color: var(--mdc-terra);
	font-size: 18px;
	line-height: 1;
}

.mdc-mem__details[open] .mdc-mem__summary::after {
	content: "\2013";
}

.mdc-mem__summary:focus-visible {
	outline: 2px solid var(--mdc-terra);
	outline-offset: -2px;
}

.mdc-mem__detailsbody {
	padding: 0 22px 22px;
}

/*
 * The price tables folded away. Without the top padding the first service heading sits
 * hard against the summary once opened, and the last group's own bottom margin would
 * otherwise double up with the padding below it.
 */
.mdc-mem__details--tables .mdc-mem__detailsbody {
	padding-top: 18px;
}

.mdc-mem__details--tables .mdc-mem__group:last-of-type {
	margin-bottom: 0;
}

.mdc-mem__definitions {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	color: var(--mdc-muted);
	font-size: 13px;
	line-height: 1.5;
}

.mdc-mem__definitions li {
	margin: 0 0 8px;
	list-style: none;
}

/* ---------------------------------------------------------------- non-member */

.mdc-mem__nonmember {
	margin-top: 28px;
	padding: 36px 28px 28px;
	background: var(--mdc-card);
	border: 1px solid var(--mdc-line);
	text-align: center;
}

.mdc-mem__amount--words {
	font-size: 32px;
}

.mdc-mem__nonlead {
	max-width: 640px;
	margin: 12px auto 0;
	color: var(--mdc-body);
	font-size: 17px;
}

.mdc-mem__nonmember .mdc-mem__join {
	display: inline-block;
	margin-top: 20px;
	text-decoration: none;
}

.mdc-mem__nonprices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 28px;
	margin-top: 28px;
	text-align: left;
}

@media (min-width: 48em) {
	.mdc-mem__nonprices {
		grid-template-columns: 1fr 1fr;
	}
}

.mdc-mem__nongroup {
	margin: 0;
	padding-top: 8px;
}

.mdc-mem__nonlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdc-mem__nonlist li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--mdc-line-soft);
	font-size: 16px;
}

.mdc-mem__nonlist li span:last-child {
	color: var(--mdc-ink);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- admin */

.mdc-mem__adminnotice {
	margin: 20px 0 0;
	padding: 13px 16px;
	background: #f8e7e3;
	border-left: 3px solid #a8382a;
	color: #a8382a;
	font-size: 14px;
}