/* Nakama luxury refinement — reviews, headings, footer newsletter.
   Third file in the layer; pairs with luxury-foundation.css and
   luxury-product-cards.css. Everything here is presentation only.

   NOT TOUCHED ON PURPOSE — both look like dead space in a screenshot and
   are not:
   - the navy band under Subscribe in Join The Crew is the Cloudflare
     Turnstile slot (.cf7-cf-turnstile, measured 72px, order:3 so it sits
     after the button). It renders blank for automated browsers only.
   - the 72px between the footer email field and its button is the same
     widget in the same form (CF7 #27340).
   Collapsing either would delete the anti-spam checkbox real visitors use. */

/* ---- section headings ------------------------------------------------- */
/* The earlier rule was scoped to section > .row > .col > h2 and matched
   nothing: these headings sit deeper. A short rule under the title is the
   cheapest way to make a heading read as typeset rather than dropped in. */
.home #content section h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	margin: 16px auto 0;
	background: currentColor;
	opacity: 0.28;
}

.home .nakama-join-crew h2::after {
	background: #fff;
	opacity: 0.4;
}

/* ---- reviews ---------------------------------------------------------- */
/* Three greys were stacked here: section band, card, and a filled box
   around the review text. Flattening to one surface plus a hairline is what
   separates an editorial testimonial from a support-ticket screenshot. */
/* !important is load-bearing here and nowhere else in this layer: the reviews
   plugin writes its palette as inline style attributes on every card
   (style="border-color:#ebebeb;background-color:#ffffff") and on every
   .review-product (style="background-color:#f4f4f4"). Inline beats any
   stylesheet rule, so the first version of these rules matched and still lost.
   The tidier fix is to change the plugin's own colour settings in wp-admin —
   worth doing if this layer becomes permanent. */
.home .cr-review-card {
	border-color: var(--nk-line) !important;
	border-radius: 0;
	box-shadow: none;
}

/* .middle-row ships bg #fcfcfc on a #fff card and .review-product ships
   #f4f4f4 — three near-identical greys stacked. Verified class names by
   reading the rendered card, not by guessing at the plugin's prefix. */
.home .cr-review-card .middle-row {
	background: transparent;
	border-color: transparent;
}

.home .cr-review-card .review-product {
	background-color: transparent !important;
	border-top: 1px solid var(--nk-line);
}

.home .cr-review-card .review-product a {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.55;
	color: var(--nk-ink);
}

/* The "5/5" beside five gold stars says the same thing twice; it recedes.
   The stars themselves stay — they are the social proof, and muting them
   would cost more than the tidiness is worth. */
.home .cr-review-card .rating-label,
.home .cr-review-card .datetime {
	color: var(--nk-ink-soft);
	font-size: 11px;
	letter-spacing: 0.08em;
}

/* Colcade already gives the three columns equal height; what looked ragged
   was the LAST CARD in each column ending 63px apart, because card height
   follows review length. Letting the cards flex to fill the column they are
   already in fixes it with no fixed heights, so it survives translations
   and longer reviews. margin-top:auto pins the product strip to the card
   floor, which is what makes the strips line up in clean rows.
   Measured desktop: last-card bottoms 4356 / 4398 / 4419 -> all 4419.
   Mobile is a single column, so none of this applies there. */
.home [class*="cr-reviews-grid-col"] {
	display: flex;
	flex-direction: column;
}

.home [class*="cr-reviews-grid-col"] > .cr-review-card {
	flex: 1 1 auto;
}

.home .cr-review-card .cr-review-card-content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.home .cr-review-card .review-product {
	margin-top: auto;
}

/* ---- footer newsletter ------------------------------------------------ */
/* Two signup forms on one page rendered in two different styles reads as
   unfinished. Colour only — the flex/height rules that keep Turnstile on
   its own row stay where they are. */
.home .footer-widgets .wpcf7 input[type="email"] {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	letter-spacing: 0.06em;
}

.home .footer-widgets .wpcf7 input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.home .footer-widgets .wpcf7 input[type="email"]:focus {
	border-bottom-color: #fff;
}

.home .footer-widgets .wpcf7 input[type="submit"] {
	border-radius: 0;
	letter-spacing: 0.16em;
	font-weight: 600;
}