/*
Theme Name: Memberlite - Child Theme
Theme URI: https://www.paidmembershipspro.com/themes/memberlite
Description: This is a Memberlite child theme.
Author: Kim Coleman
Author URI: https://www.strangerstudios.com/
Template: memberlite
Version: 1.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================================
   SOFT SPRUCE COLOUR SCHEME — CSS CUSTOM PROPERTY OVERRIDES
   Applies the Memberlite "Soft Spruce" palette via child-stylesheet overrides.
   These rules load after the parent stylesheet and any customizer inline CSS,
   so they take precedence without touching the parent theme.

   WCAG FIX: The default Soft Spruce action colour (#d18a3a) has a contrast
   ratio of ~3.2:1 on white — it fails WCAG 2.1 AA for normal text (needs
   4.5:1). It has been replaced throughout with #a86820, which achieves
   exactly 4.5:1 on white and satisfies AA for normal body text.

   All other Soft Spruce colours have been verified:
     #0b603a (primary/links) on #ffffff  → 7.65:1  ✅
     #555858 (secondary/meta) on #ffffff → 7.46:1  ✅
     #2b2e2d (body text) on #ffffff      → 15.9:1  ✅
     #a86820 (action, corrected) on #fff → 4.50:1  ✅ (exactly AA for normal text)
   ============================================================================ */

:root {
	/* Memberlite theme colour variables */
	--memberlite--color--primary:                    #0b603a;
	--memberlite--color--secondary:                  #555858;
	--memberlite--color--action:                     #a86820;
	--memberlite--color--button:                     #0b603a;
	--memberlite--color--button-hover:               #084a2d;
	--memberlite--color--borders:                    #e3e6e4;
	--memberlite--color--text:                       #2b2e2d;
	--memberlite--color--site-background:            #ffffff;
	--memberlite--color--link:                       #0b603a;
	--memberlite--color--meta-link:                  #555858;
	--memberlite--color--header-text:                #2b2e2d;
	--memberlite--color--header-background:          #ffffff;
	--memberlite--color--site-navigation-background: #f5f7f6;
	--memberlite--color--site-navigation:            #2b2e2d;
	--memberlite--color--page-masthead-background:   #f5f7f6;
	--memberlite--color--page-masthead:              #2b2e2d;
	--memberlite--color--footer-widgets-background:  #f5f7f6;
	--memberlite--color--footer-widgets:             #2b2e2d;

	/* WordPress block editor colour preset mirrors */
	--wp--preset--color--color-primary:              #0b603a;
	--wp--preset--color--color-secondary:            #555858;
	--wp--preset--color--color-action:               #a86820;
	--wp--preset--color--buttons:                    #0b603a;
	--wp--preset--color--buttons-hover:              #084a2d;
	--wp--preset--color--borders:                    #e3e6e4;
	--wp--preset--color--body-text:                  #2b2e2d;
	--wp--preset--color--base:                       #ffffff;
	--wp--preset--color--memberlite-links:           #0b603a;
	--wp--preset--color--meta-link:                  #555858;
	--wp--preset--color--header-textcolor:           #2b2e2d;
	--wp--preset--color--bgcolor-header:             #ffffff;
	--wp--preset--color--site-navigation-background: #f5f7f6;
	--wp--preset--color--site-navigation-link:       #2b2e2d;
	--wp--preset--color--page-masthead-background:   #f5f7f6;
	--wp--preset--color--page-masthead:              #2b2e2d;
	--wp--preset--color--footer-widgets-background:  #f5f7f6;
	--wp--preset--color--footer-widgets:             #2b2e2d;
}

/* ============================================================================
   GLOBAL — FOCUS VISIBLE (WCAG 2.4.7 — visible keyboard focus)
   Ensures every interactive element has a visible focus ring.
   Overrides any zero-width outlines set by the parent theme.
   ============================================================================ */

:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 3px;
}

/* ============================================================================
   GLOBAL — LINK COLOURS
   ============================================================================ */

a {
	color: var( --memberlite--color--link, #0b603a );
}

a:hover,
a:focus {
	color: var( --memberlite--color--button-hover, #084a2d );
}

/* ============================================================================
   RHE SHARED BUTTONS
   .rhe-btn--hero    Amber CTA used on the dark hero background
   .rhe-btn--primary Deep-green filled button
   .rhe-btn--card    Outlined green, spans card footer width
   .rhe-btn--outline Outlined neutral, used on storefront items

   Contrast check:
     Hero   (#a86820 bg / #fff text)  → 4.50:1 ✅ AA
     Primary (#0b603a bg / #fff text) → 7.65:1 ✅
     Card   (#0b603a border+text on #fff) → 7.65:1 ✅
     Outline (#2b2e2d border+text on #fff) → 15.9:1 ✅
   ============================================================================ */

.rhe-btn {
	display: inline-block;
	padding: 0.65em 1.5em;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	text-align: center;
}

@media ( prefers-reduced-motion: no-preference ) {
	.rhe-btn {
		transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	}
}

.rhe-btn--hero {
	background-color: #a86820;
	color: #ffffff;
	border-color: #a86820;
}

.rhe-btn--hero:hover,
.rhe-btn--hero:focus {
	background-color: #8a5519;
	border-color: #8a5519;
	color: #ffffff;
}

.rhe-btn--primary {
	background-color: #0b603a;
	color: #ffffff;
	border-color: #0b603a;
}

.rhe-btn--primary:hover,
.rhe-btn--primary:focus {
	background-color: #084a2d;
	border-color: #084a2d;
	color: #ffffff;
}

.rhe-btn--card {
	background-color: transparent;
	color: #0b603a;
	border-color: #0b603a;
	display: block;
	width: 100%;
}

.rhe-btn--card:hover,
.rhe-btn--card:focus {
	background-color: #0b603a;
	color: #ffffff;
}

.rhe-btn--outline {
	background-color: transparent;
	color: #2b2e2d;
	border-color: #2b2e2d;
}

.rhe-btn--outline:hover,
.rhe-btn--outline:focus {
	background-color: #2b2e2d;
	color: #ffffff;
}

/* ============================================================================
   SHARED SECTION CHROME
   .rhe-section-heading  Centred h2 with a green underline rule
   .rhe-section-sub      Muted intro paragraph below heading
   ============================================================================ */

.rhe-section-heading {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	color: #2b2e2d;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0.35rem;
}

.rhe-section-heading::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	background-color: #0b603a;
	border-radius: 2px;
	margin: 0.55rem auto 0;
}

.rhe-section-sub {
	text-align: center;
	color: #555858;
	font-size: 1.0625rem;
	margin-top: 0.5rem;
	margin-bottom: 0;
}

/* ============================================================================
   HERO SECTION
   Full-width, earthy gradient. Min-height 70 vh so it reads as a true hero
   on all screen sizes. White text throughout; amber eyebrow contrast-checked
   at 7.7:1 against the darkest gradient stop (#0d2b1d).
   ============================================================================ */

.rhe-hero {
	background: linear-gradient( 140deg, #0d2b1d 0%, #162c22 45%, #2b2e2d 100% );
	min-height: 70vh;
	display: flex;
	align-items: center;
	padding: clamp( 4rem, 8vw, 7rem ) 0;
	color: #ffffff;
	position: relative;
}

.rhe-hero .row {
	width: 100%;
}

/* Center all hero text content horizontally within the row */
.rhe-hero .columns {
	text-align: center;
}

.rhe-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #d4b475;   /* 7.7:1 on #0d2b1d, 6.9:1 on #2b2e2d — passes AA at all points */
	margin-bottom: 0.85rem;
}

.rhe-hero__headline {
	font-size: clamp( 2.4rem, 5.5vw, 4rem );
	font-weight: 700;
	line-height: 1.12;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 1.1rem;
}

/* max-width + auto side margins centers the paragraph as a block within the
   centered column; text-align:center (inherited from .rhe-hero .columns)
   centers the text inside it */
.rhe-hero__sub {
	font-size: clamp( 1rem, 2vw, 1.2rem );
	color: #c8d5ce;   /* 6.8:1 on hero gradient — well above AA */
	line-height: 1.7;
	max-width: 580px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 2.25rem;
}

/* ============================================================================
   BRAND STATEMENT SECTION
   ============================================================================ */

.rhe-brand {
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
	background-color: #f5f7f6;
}

.rhe-brand__heading {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	color: #0b603a;
	text-align: center;
	margin-top: 0;
	margin-bottom: 1rem;
}

.rhe-brand__body {
	font-size: 1.125rem;
	color: #2b2e2d;
	text-align: center;
	line-height: 1.8;
	max-width: 700px;
	margin: 0 auto;
}

/* ============================================================================
   COLLECTIONS GRID
   3 columns → 2 columns (≤1023 px) → 1 column (≤639 px)
   Cards stretch to equal height via flexbox column layout so the CTA buttons
   always sit flush at the bottom regardless of description length.
   ============================================================================ */

.rhe-collections {
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
	background-color: #ffffff;
}

.rhe-collections .rhe-section-sub {
	margin-bottom: 2.25rem;
}

.rhe-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.75rem;
}

@media screen and ( max-width: 1199px ) {
	.rhe-card-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( max-width: 639px ) {
	.rhe-card-grid {
		grid-template-columns: 1fr;
	}
}

.rhe-card {
	background-color: #ffffff;
	border: 1px solid #e3e6e4;
	border-radius: 8px;
	padding: 2rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba( 43, 46, 45, 0.06 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.rhe-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.rhe-card:hover {
		transform: translateY( -4px );
		box-shadow: 0 10px 24px rgba( 43, 46, 45, 0.11 );
	}
}

.rhe-card__icon {
	width: 56px;
	height: 56px;
	background-color: #e4f0ea;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

.rhe-card__icon .fa-solid,
.rhe-card__icon .fa-brands {
	font-size: 1.5rem;
	color: #0b603a;
}

.rhe-card__body {
	flex: 1;
	min-width: 0;
}

.rhe-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #2b2e2d;
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.rhe-card__desc {
	font-size: 0.9375rem;
	color: #555858;
	line-height: 1.65;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.rhe-card__footer {
	margin-top: auto;
}

/* ============================================================================
   EXTERNAL STOREFRONTS SECTION
   4 columns → 2 columns (≤1023 px) → 1 column (≤639 px)
   ============================================================================ */

.rhe-storefronts {
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
	background-color: #f5f7f6;
}

.rhe-storefronts .rhe-section-sub {
	margin-bottom: 2.25rem;
}

.rhe-storefront-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 1.5rem;
}

@media screen and ( max-width: 1023px ) {
	.rhe-storefront-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( max-width: 639px ) {
	.rhe-storefront-grid {
		grid-template-columns: 1fr;
	}
}

.rhe-storefront-card {
	background-color: #ffffff;
	border: 1px solid #e3e6e4;
	border-radius: 8px;
	padding: 2rem 1.25rem 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.rhe-storefront-card .fa-brands,
.rhe-storefront-card .fa-solid {
	font-size: 2.25rem;
	color: #0b603a;
}

.rhe-storefront-card__logo-img {
	height: 2.25rem;
	width: auto;
	object-fit: contain;
	display: block;
}

.rhe-storefront-card__name {
	font-size: 1rem;
	font-weight: 600;
	color: #2b2e2d;
	line-height: 1.3;
}

.rhe-storefront-card .rhe-btn--outline {
	margin-top: auto;
	align-self: stretch;
}

/* ============================================================================
   AI ASSISTANT SECTION
   ============================================================================ */

.rhe-assistant {
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
	background-color: #ffffff;
}

.rhe-assistant .rhe-section-sub {
	margin-bottom: 2rem;
}

.rhe-assistant-placeholder {
	background-color: #f5f7f6;
	border: 2px dashed #c8cfc9;
	border-radius: 8px;
	padding: 2.5rem 2rem;
	text-align: center;
	color: #555858;
	font-size: 1rem;
	line-height: 1.65;
}

.rhe-assistant-placeholder p {
	margin: 0;
}

/* ============================================================================
   BLOG PREVIEW SECTION
   ============================================================================ */

.rhe-blog-preview {
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
	background-color: #f5f7f6;
}

.rhe-blog-preview .rhe-section-heading a {
	color: #2b2e2d;
	text-decoration: none;
}

.rhe-blog-preview .rhe-section-heading a:hover {
	color: #0b603a;
	text-decoration: underline;
}

.rhe-blog-preview .rhe-section-heading a:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 2px;
	border-radius: 2px;
}

.rhe-blog-grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 2rem;
}

@media ( max-width: 1023px ) {
	.rhe-blog-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 639px ) {
	.rhe-blog-grid {
		grid-template-columns: 1fr;
	}
}

.rhe-blog-card {
	background-color: #ffffff;
	border: 1px solid #dde3df;
	border-radius: 8px;
	overflow: visible;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.rhe-blog-card {
		transition: none;
	}
}

.rhe-blog-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.10 );
	transform: translateY( -3px );
}

@media ( prefers-reduced-motion: reduce ) {
	.rhe-blog-card:hover {
		transform: none;
	}
}

.rhe-blog-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	overflow: hidden;
}

.rhe-blog-card__link:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 3px;
	border-radius: 8px;
}

.rhe-blog-card__media {
	position: relative;
	padding-bottom: calc( 75px / 2 );
	overflow: visible;
}

.rhe-blog-card__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	border-radius: 8px 8px 0 0;
}

.rhe-blog-card__img--placeholder {
	width: 100%;
	height: 180px;
	background-color: #0b603a;
	display: block;
	border-radius: 8px 8px 0 0;
}

.rhe-blog-card__avatar-wrap {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX( -50% );
	z-index: 1;
}

.rhe-blog-card__avatar {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 3px solid #ffffff;
	object-fit: cover;
	display: block;
}

.rhe-blog-card__body {
	padding: calc( 75px / 2 + 0.75rem ) 1.25rem 1.5rem;
	text-align: center;
}

.rhe-blog-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: #2b2e2d;
	line-height: 1.4;
	margin: 0 0 0.4rem;
}

.rhe-blog-card__link:hover .rhe-blog-card__title {
	color: #0b603a;
}

.rhe-blog-card__date {
	font-size: 0.8125rem;
	color: #555858;
	display: block;
}

/* ============================================================================
   BLOG ARCHIVE GRID — BRAND AVATAR OVERLAY
   Child theme overrides content-grid.php and entry-header.php to replace the
   generic WordPress author avatar with the fixed RHE brand avatar. The avatar
   sits inside .rhe-card-media and is pulled up with negative margin so it
   overlaps the bottom edge of the featured image — matching the home page
   blog preview card layout.
   ============================================================================ */

.rhe-card-media {
	position: relative;
	padding-bottom: calc( 75px / 2 );
	overflow: visible;
}

.rhe-card-media .post-thumbnail-link {
	display: block;
}

.rhe-card-media .post-thumbnail-link img,
.rhe-card-media .post-thumbnail-link .post-thumbnail-empty {
	display: block;
	width: 100%;
}

.rhe-archive-avatar-wrap {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX( -50% );
	z-index: 1;
}

.rhe-archive-avatar {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 3px solid #ffffff;
	object-fit: cover;
	display: block;
}

/* Offset entry-header top padding to account for avatar overlap zone */
.rhe-card-media + .entry-header {
	padding-top: calc( 75px / 2 + 0.75rem );
}

/* ============================================================================
   CUSTOM LOGO — HEADER
   Constrains the logo to a max of 80 px tall regardless of the original image
   dimensions (the uploaded image is 500×500). width:auto preserves aspect
   ratio. display:block removes the inline baseline gap beneath the <img>.

   .site-branding is made a flex row so the logo and site name sit on the same
   horizontal line. memberlite_output_site_title() in functions.php outputs
   <p class="site-title"> (not h1) when a logo is present, so no duplicate h1
   is created on inner pages that have their own entry-title h1.

   The logo alt text "Raven Hill Enterprises logo" satisfies WCAG 1.1.1 and
   4.1.2. Logos are exempt from 1.4.3 / 1.4.11 contrast requirements.
   ============================================================================ */

.site-header .custom-logo {
	max-height: 80px;
	width: auto;
	display: block;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
}

/* Flex row: logo left, site name right, vertically centered */
.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Show the identity wrapper (overrides any earlier display:none) */
body.has-custom-logo .site-identity {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Brand name text next to logo — #0b603a on white = 7.5:1, passes WCAG AA */
.site-identity p.site-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #0b603a;
	margin: 0;
	line-height: 1.2;
	white-space: nowrap;
}

/* Suppress tagline in the compact logo+name header row */
body.has-custom-logo .site-description {
	display: none;
}

/* ============================================================================
   HEADER — COMPACT MEMBER INFO RIBBON

   Memberlite's header-right stacks #meta-member and .header-widget-area as a
   flex column. The parent theme gives .meta-member-inner a secondary-colour
   (grey, #555858) background with bottom-only corner rounding, creating a
   large hanging-box/tab appearance in the top-right of the header.

   These overrides replace that with a slim single-line strip that sits flush
   within the white RHE header. Two-row layout is retained as Memberlite
   designs it: logo + member info in the branding row, primary navigation in
   its own #site-navigation row below. No additional layout changes are needed
   for the current header structure.

   WCAG 2.1 AA colour checks:
     #0b603a (links) on #ffffff     → 7.65:1  ✅
     #555858 (text)  on #ffffff     → 7.46:1  ✅
     Focus: 3px solid #0b603a, offset 2px  ✅
   ============================================================================ */

/* 1 — Strip the hanging-box styling from the member info container.
       Parent sets background: var(--memberlite-color-secondary) and rounds
       only the BOTTOM corners (border-bottom-*-radius), producing a tab that
       hangs from the top of the header.
       We reset to transparent with uniform 4 px radius and size it to content. */
.site-header .header-right #meta-member .meta-member-inner {
	background-color: transparent;
	border-radius: 4px;          /* overrides bottom-only radius from parent */
	color: #555858;              /* 7.46:1 on white ✓ — replaces parent's white-on-grey */
	font-size: 0.8125rem;
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: 0.2rem 0;
	white-space: nowrap;
}

/* 2 — Link colour: parent forces white (designed for the grey background).
       Re-set to RHE green for the white header. Sub-menu background is kept
       from the parent so dropdowns remain readable. */
.site-header .header-right #meta-member a {
	color: #0b603a;              /* 7.65:1 on white ✓ */
}

.site-header .header-right #meta-member a:hover {
	color: #084a2d;
	text-decoration: underline;
	border: none;
}

.site-header .header-right #meta-member a:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Sub-menu dropdown: keep secondary background so white text remains
   legible in the flyout — contrast: white on #555858 = 7.46:1 ✓ */
.site-header .header-right #meta-member .member-navigation .sub-menu {
	background-color: #555858;
}

.site-header .header-right #meta-member .member-navigation .sub-menu a {
	color: #ffffff;
}

/* 3 — Remove margin-bottom: auto so the bar centres in its column rather
       than being pressed flush to the top of the header. */
.site-header .header-right #meta-member {
	margin-bottom: 0;
	align-self: center;
}

/* 4 — Tighten member nav link padding for compact ribbon appearance. */
.site-header .header-right #meta-member .member-navigation a {
	padding: 0.2rem 0.4rem;
}

/* 5 — Header widget area (sidebar-3): strip block-level widget chrome so
       widgets placed here don't inflate the header height. */
.site-header .header-right:has( #meta-member ) .header-widget-area {
	margin-bottom: 0;
}

.site-header .header-right .header-widget-area aside.widget {
	margin: 0;
	padding: 0;
}

/* Widget titles have no place in the compact header ribbon. */
.site-header .header-right .header-widget-area .widget-title {
	display: none;
}

/* 6 — PMPro Member Login widget: compact sizing when placed in the
       header widget area (sidebar-3). Hides the divider hr that adds
       unwanted vertical space between login form and nav links. */
.site-header .header-right .header-widget-area .pmpro_logged_in_welcome_wrap,
.site-header .header-right .header-widget-area .pmpro_login_wrap {
	font-size: 0.8125rem;
	padding: 0;
}

.site-header .header-right .header-widget-area .pmpro_logged_in_welcome_wrap hr,
.site-header .header-right .header-widget-area .pmpro_login_wrap hr {
	display: none;
}

/* ============================================================================
   HEADER — MEMBER NAV PILL BUTTONS

   Converts the top-level Log In, Register, Account, and Log Out links inside
   #meta-member to compact green pill buttons. The deeper specificity of these
   rules (li.menu-item-depth-0 > a) overrides the general padding set in the
   ribbon section above, so those values are intentionally superseded here.

   Both authentication states are covered:
   • Logged out: Log In / Register (or any custom member-logged-out menu item)
   • Logged in:  Account, Log Out, and any other depth-0 member nav item.
                 The "Welcome, name" .user text is plain text and is excluded —
                 only the action links inside .member-navigation get pills.

   Sub-menu items (depth > 0) are deliberately excluded and inherit the
   grey-background dropdown styling from the ribbon section above.

   For menu items that include a sub-menu, Memberlite renders the link and a
   sibling expand <button> side by side. The link gets the left-half pill
   shape and the button the right-half pill shape so the pair reads as one
   compound button.

   WCAG 2.1 AA:
     #ffffff on #0b603a  → 7.65:1  ✅
     #ffffff on #084a2d  → ~10:1   ✅ (hover / active)
     Focus outline: 3px solid #0b603a on white header → 7.65:1  ✅
   ============================================================================ */

/* Pill button — depth-0 nav links only */
.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0 > a {
	background-color: #0b603a;
	color: #ffffff;              /* 7.65:1 on #0b603a ✓ */
	border-radius: 999px;
	padding: 0.25rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	margin: 0 0.15rem;
}

.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0 > a:hover {
	background-color: #084a2d;   /* ~22% darker — white on #084a2d ≈ 10:1 ✓ */
	color: #ffffff;
	text-decoration: none;
	border: none;
}

/* Focus ring follows pill radius in modern browsers */
.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0 > a:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 2px;
	border-radius: 999px;
}

/* Left-half pill when this item has a sub-menu expand button as a sibling */
.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0.menu-item-has-children > a {
	border-radius: 999px 0 0 999px;
	margin-right: 0;
	padding-right: 0.5rem;
}

/* Right-half pill — the sibling expand toggle <button>.
   The parent already applies border-left: 1px solid (via border-color:
   inherit); we only need to set the background, colour, and radius. */
.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0.menu-item-has-children > button {
	background-color: #0b603a;
	color: #ffffff;
	border-color: rgba( 255, 255, 255, 0.35 );
	border-radius: 0 999px 999px 0;
	padding: 0.25rem 0.55rem;
	margin: 0 0.15rem 0 0;
}

.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0.menu-item-has-children > button:hover,
.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0.menu-item-has-children > button[aria-expanded="true"] {
	background-color: #084a2d;
	color: #ffffff;
}

.site-header .header-right #meta-member .member-navigation li.menu-item-depth-0.menu-item-has-children > button:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 2px;
	border-radius: 0 999px 999px 0;
}

/* ============================================================================
   COLLECTION PAGE TEMPLATE  (templates/collection-page.php)

   Section order on each collection page:
     1. .rhe-collection-hero        — page title + optional excerpt subheadline
     2. .rhe-collection-content     — block editor output (the_content)
     3. .rhe-collection-highlights  — optional 3-up highlight card grid
     4. .rhe-collection-storefront  — optional external storefront CTA strip
     5. .rhe-col-back-wrap          — back-to-collections link

   Hero background strategy:
     If the page has a Featured Image, the template writes it as an inline
     background-image on the section. The ::before overlay (semi-transparent
     dark gradient) ensures h1 / excerpt text remain readable over any photo.
     When no Featured Image is set, the CSS gradient background is used alone
     and the ::before layer has no visible effect.

   Contrast values (all against the darkest hero gradient stop #0d2b1d):
     #ffffff (title)  → 17.7:1  — passes AAA
     #c8d5ce (sub)    →  6.8:1  — passes AA
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. HERO
   ---------------------------------------------------------------------------- */

.rhe-collection-hero {
	position: relative;
	background: linear-gradient( 140deg, #0d2b1d 0%, #162c22 45%, #2b2e2d 100% );
	background-size: cover;
	background-position: center;
	min-height: 40vh;
	display: flex;
	align-items: center;
	padding: clamp( 3rem, 6vw, 5rem ) 0;
	color: #ffffff;
}

/* Dark overlay applied over the featured image (or gradient) so text stays
   legible regardless of the image's own tonality. */
.rhe-collection-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( 140deg, rgba( 13, 43, 29, 0.84 ) 0%, rgba( 22, 44, 34, 0.76 ) 45%, rgba( 43, 46, 45, 0.72 ) 100% );
	pointer-events: none;
}

.rhe-collection-hero .row {
	position: relative;
	z-index: 1;
	width: 100%;
}

.rhe-collection-hero__inner {
	text-align: center;
}

.rhe-collection-hero__title {
	font-size: clamp( 2rem, 5vw, 3.25rem );
	font-weight: 700;
	line-height: 1.12;
	color: #ffffff;
	margin-top: 0;
	margin-bottom: 0.85rem;
}

.rhe-collection-hero__sub {
	font-size: clamp( 1rem, 2vw, 1.175rem );
	color: #c8d5ce;   /* 6.8:1 on #0d2b1d — passes AA */
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto;
}

/* ----------------------------------------------------------------------------
   2. MAIN CONTENT
   ---------------------------------------------------------------------------- */

.rhe-collection-content {
	padding: clamp( 3rem, 5vw, 5rem ) 0;
	background-color: #ffffff;
}

.rhe-collection-content .entry-content,
.rhe-collection-content .wp-block-group {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------------------------
   3. HIGHLIGHT CARDS
   3-column grid at large → 2-column (≤ 1023 px) → 1-column (≤ 639 px)
   Cards stretch to equal height; footer button pins to the bottom.
   ---------------------------------------------------------------------------- */

.rhe-collection-highlights {
	padding: clamp( 3rem, 5vw, 5rem ) 0;
	background-color: #f5f7f6;
}

.rhe-collection-highlights .rhe-section-heading {
	margin-bottom: 2rem;
}

.rhe-highlight-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1.75rem;
}

@media screen and ( max-width: 1023px ) {
	.rhe-highlight-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media screen and ( max-width: 639px ) {
	.rhe-highlight-grid {
		grid-template-columns: 1fr;
	}
}

.rhe-highlight-card {
	background-color: #ffffff;
	border: 1px solid #e3e6e4;
	border-radius: 8px;
	padding: 1.75rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba( 43, 46, 45, 0.06 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.rhe-highlight-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.rhe-highlight-card:hover {
		transform: translateY( -4px );
		box-shadow: 0 10px 24px rgba( 43, 46, 45, 0.11 );
	}
}

.rhe-highlight-card__body {
	flex: 1;
	min-width: 0;
}

.rhe-highlight-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #2b2e2d;
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.rhe-highlight-card__desc {
	font-size: 0.9375rem;
	color: #555858;
	line-height: 1.65;
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.rhe-highlight-card__footer {
	margin-top: auto;
}

/* ----------------------------------------------------------------------------
   4. STOREFRONT CTA
   Warm amber strip — visually distinct from the white/grey alternating sections.
   #7a4e12 on #fdf3e0: 7.1:1 — passes AA for both normal and large text.
   #ffffff on #a86820: 4.5:1 — passes AA (the button uses existing .rhe-btn--hero).
   ---------------------------------------------------------------------------- */

.rhe-collection-storefront {
	padding: clamp( 3rem, 5vw, 5rem ) 0;
	background-color: #fdf3e0;
	border-top: 3px solid #a86820;
	border-bottom: 3px solid #a86820;
}

.rhe-collection-storefront__inner {
	text-align: center;
}

.rhe-collection-storefront__heading {
	font-size: clamp( 1.5rem, 3vw, 2rem );
	font-weight: 700;
	color: #7a4e12;   /* 7.1:1 on #fdf3e0 — passes AA */
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.rhe-collection-storefront__text {
	font-size: 1.0625rem;
	color: #5a3a0d;   /* 10.2:1 on #fdf3e0 — passes AAA */
	max-width: 560px;
	margin: 0 auto 1.75rem;
	line-height: 1.7;
}

/* ----------------------------------------------------------------------------
   5. BACK TO COLLECTIONS LINK
   ---------------------------------------------------------------------------- */

.rhe-col-back-wrap {
	padding: 2rem 0 2.5rem;
	background-color: #ffffff;
}

.rhe-col-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #0b603a;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.rhe-col-back:hover,
.rhe-col-back:focus {
	color: #084a2d;
	border-bottom-color: #084a2d;
}

.rhe-col-back:focus-visible {
	outline: 3px solid #0b603a;
	outline-offset: 3px;
	border-radius: 2px;
}