/*!
 * Harmonious Way — Page Styles
 * Version: 2.21.0
 *
 * Block-specific styles only. Shared variables (--shinwado-red,
 * --shinwado-gold, --shinwado-cream, font stacks, etc.), the reset, the
 * .shinwado-btn button system, and the lightbox all come from
 * shinwado.css, loaded alongside this file — see
 * includes/harmonious-way-render.php.
 *
 * Contents:
 *   1. Our Logo block
 *   2. Mission block
 *   2b. Programs block
 *   3. Federation Benefits & Membership block
 *   4. Closing Quote block
 *   5. CTA block
 *   6. Responsive
 */

/* 0. Back to Home link (page-level, sits above the Our Logo block) ---------------- */
/* Stays pinned at the top once scrolled past it, shrinking and gaining
   a shadow at the same time — positioning is controlled entirely by JS
   (assets/js/shinwado.js) applying position: fixed via an inline style
   once scrolled, the same mechanism already proven working for the
   admin-style pages' own, separate back-link (assets/css/admin.css) —
   this page has its own, completely separate .hw-back-link class and
   never actually had this at all before, despite looking similar. */
.hw-back-link {
	display: inline-block;
	background: var(--shinwado-cream);
	padding: 1rem 2rem;
	color: var(--shinwado-red); /* #B60004 */
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.hw-back-link:hover {
	text-decoration: underline;
}
.hw-back-link.is-scrolled {
	padding: 0.6rem 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hw-back-link--fixed {
	z-index: 100;
}
/* Same-height placeholder JS inserts the moment the link switches to
   position: fixed — fixed positioning removes it from normal document
   flow entirely, so without this, the page content below would jump
   upward by the link's own height at that instant. */
.hw-back-link-placeholder {
	height: 0;
}

/* 1. Our Logo block ---------------------------------------------------------------- */
.hw-logo {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4rem 2rem;
}
.hw-logo__grid {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

/* Left column: eyebrow, underline, title, description, large logo graphic */
.hw-logo__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Small
	   Title field's typography controls, applied inline. */
}
.hw-logo__eyebrow-line {
	width: 48px;
	height: 3px;
	margin-bottom: 1.25rem;
}
.hw-logo__title {
	margin: 0 0 1rem;
	line-height: 1.3;
}
.hw-logo__description {
	margin: 1.5rem 0 2rem;
	line-height: 1.6;
}
.hw-logo__graphic {
	max-width: 420px;
	width: 100%;
	height: auto;
}

/* Right column: title, item list, closing box */
.hw-logo__right-title {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hw-logo__items {
	display: flex;
	flex-direction: column;
}
.hw-logo__item {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hw-logo__item:first-child {
	padding-top: 0;
}
.hw-logo__item:last-child {
	border-bottom: none;
}
.hw-logo__item-image {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
}
.hw-logo__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hw-logo__item-text {
	flex: 1 1 auto;
}
.hw-logo__item-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--shinwado-ink);
	margin-bottom: 0.35rem;
}
.hw-logo__item-desc {
	font-size: 0.92rem;
	line-height: 1.55;
	color: #444444;
}
.hw-logo__closing {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 1.25rem 1.5rem;
	background: #EFE2C6;
	border-radius: 8px;
}
.hw-logo__closing-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
}
.hw-logo__closing-text {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--shinwado-ink);
}

/* Shared block wrapper (all blocks below use this) */
.hw-block {
	padding: 4rem 2rem;
	scroll-margin-top: 2rem;
}
.hw-block__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}

/* 2. Mission block ---------------------------------------------------------------- */
.hw-mission {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4.5rem 2rem;
}

/*
 * The eyebrow sits in its OWN wide container (matching Our Logo's full
 * content width, --shinwado-max-width), separate from .hw-mission__inner
 * below — which stays narrow for readable line-length on the mission
 * statement/explanation. Without this, "left-aligned" would only ever
 * mean "the left edge of the narrow centered column," which sits well
 * short of the true page margin Our Logo's label reaches.
 */
.hw-mission__eyebrow-wrap {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.hw-mission__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Small
	   Title field's typography controls, applied inline — matches
	   .hw-logo__eyebrow's styling exactly. */
}
.hw-mission__eyebrow-line {
	width: 48px;
	height: 3px;
	margin: 0 0 2.5rem;
}

.hw-mission__inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}
.hw-mission__statement {
	font-family: 'Playfair Display', serif;
	font-size: 1.75rem;
	line-height: 1.4;
	font-weight: 700;
	color: var(--shinwado-ink);
}
.hw-mission__statement p {
	margin: 0;
}
.hw-mission__explanation {
	max-width: 440px;
	margin: 0 auto;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4a423a;
}
.hw-mission__explanation p {
	margin: 0 0 0.85rem;
}
.hw-mission__explanation p:last-child {
	margin-bottom: 0;
}

/* "Why We Exist" panel — a raised card sitting on top of the section's
   shared background, giving it just enough separation to read as its
   own moment without a hard color break from the rest of the section. */
.hw-mission__why-panel {
	margin-top: 2.5rem;
	padding: 2rem 2.25rem;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 12px;
	text-align: left;
	/* Slight 3D/embossed look: a soft light edge along the top plus a
	   diffused shadow underneath, rather than a hard drop shadow. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		0 10px 24px rgba(0, 0, 0, 0.08);
}
.hw-mission__why-title {
	font-family: 'Playfair Display', serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--shinwado-ink);
	margin: 0 0 0.75rem;
}
.hw-mission__why-content {
	font-size: 0.92rem;
	line-height: 1.7;
	color: #4a423a;
}
.hw-mission__why-content p {
	margin: 0 0 0.85rem;
}
.hw-mission__why-content p:last-child {
	margin-bottom: 0;
}

/* 2b. Programs block ---------------------------------------------------------------- */
.hw-pr {
	/* Matches the homepage's own Our Programs section background exactly
	   — these cards (reused .shinwado-programs__panel from shinwado.css)
	   were specifically designed with a subtle embossed look meant to
	   contrast against this dark backdrop, not a light one. An optional
	   admin-uploaded background image (set inline via style="") layers
	   on top of this gradient. */
	background: linear-gradient(180deg, var(--shinwado-navy-top) 0%, var(--shinwado-navy-bottom) 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4.5rem 2rem;
}
.hw-pr__eyebrow-wrap {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.hw-pr__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the
	   Section Label field's typography controls, applied inline. */
}
.hw-pr__eyebrow-line {
	width: 48px;
	height: 3px;
	margin: 0 0 2.5rem;
}
.hw-pr__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.hw-pr__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
}
.hw-pr__intro h2 {
	font-family: 'Playfair Display', serif;
	font-size: 1.85rem;
	line-height: 1.3;
	/* White, not --shinwado-ink like .hw-bm__intro h2 — this section's
	   dark background needs light text, unlike Federation Benefits'
	   white one. */
	color: #ffffff;
	margin: 0 0 0.85rem;
}
.hw-pr__intro p {
	font-size: 0.98rem;
	line-height: 1.6;
	color: #c7cede; /* Same light gray-blue used by .shinwado-programs__panel-desc, for consistency on this same dark background. */
	margin: 0;
}
/* The cards themselves are fully styled via the reused
   .shinwado-programs__panel classes (from shinwado.css) — this wrapper
   only needs to lay them out. Same 3-column grid pattern as
   .hw-bm__cards below, just under a section-appropriate class name. */
.hw-pr__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

/* Programs cards' WYSIWYG content — same h3/p-targeting pattern as
   .hw-bm__card-content below, styled to match
   .shinwado-programs__panel-title/-desc (from shinwado.css) exactly,
   since the admin types both the title and description into one
   editor here rather than two separate fields. A base color is set on
   the wrapper itself (inherited by any child element by default)
   rather than only targeting p — deliberately broad, since the
   WYSIWYG editor can produce a range of tags (h2 vs h3, spans, etc.)
   depending on which toolbar options get used, and this way anything
   typed stays readable on the dark background regardless. Headings at
   any level (h1-h6) get the same specific title treatment; lists are
   also covered, not just paragraphs. */
.shinwado-programs__panel-content {
	color: #c7cede;
}
.shinwado-programs__panel-content h1,
.shinwado-programs__panel-content h2,
.shinwado-programs__panel-content h3,
.shinwado-programs__panel-content h4,
.shinwado-programs__panel-content h5,
.shinwado-programs__panel-content h6 {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
	margin: 0 0 0.6rem;
}
.shinwado-programs__panel-content p,
.shinwado-programs__panel-content li {
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}
.shinwado-programs__panel-content ul,
.shinwado-programs__panel-content ol {
	margin: 0;
	padding-left: 1.1rem;
	text-align: left;
}

/* 3. Federation Benefits & Membership block ---------------------------------------- */
.hw-bm {
	background-color: #ffffff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 4.5rem 2rem;
}
.hw-bm__eyebrow-wrap {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.hw-bm__eyebrow {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the
	   Section Label field's typography controls, applied inline. */
}
.hw-bm__eyebrow-line {
	width: 48px;
	height: 3px;
	margin: 0 0 2.5rem;
}

.hw-bm__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.hw-bm__intro {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
}
.hw-bm__intro h2 {
	font-family: 'Playfair Display', serif;
	font-size: 1.85rem;
	line-height: 1.3;
	color: var(--shinwado-ink);
	margin: 0 0 0.85rem;
}
.hw-bm__intro p {
	font-size: 0.98rem;
	line-height: 1.6;
	color: #4a423a;
	margin: 0;
}

/* Card row */
.hw-bm__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.hw-bm__card {
	background: var(--shinwado-cream);
	border-radius: 10px;
	padding: 1.75rem 1.5rem 2rem;
	text-align: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.hw-bm__card-image {
	width: 100%;
	max-width: 160px;
	margin: 0 auto 1.25rem;
	border-radius: 8px;
	overflow: hidden;
}
.hw-bm__card-image img {
	width: 100%;
	height: auto;
	display: block;
}
.hw-bm__card-content {
	text-align: left;
}
.hw-bm__card-content h3 {
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--shinwado-ink);
	margin: 0 0 0.75rem;
	text-align: center;
}
.hw-bm__card-content ul {
	margin: 0;
	padding-left: 1.1rem;
}
.hw-bm__card-content li {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #4a423a;
	margin-bottom: 0.4rem;
}
.hw-bm__card-content li:last-child {
	margin-bottom: 0;
}

/* Pricing sub-card — nested within each Federation Benefits card
   (.hw-bm__card, cream background). Deliberately darker than its
   parent card, per explicit request — reuses the beige/tan tone the
   original standalone pricing card used as its border color, already
   part of this section's palette rather than a new, unrelated color.
   The combined inset top-highlight + inset bottom-shadow + outer
   drop-shadow together create a soft, beveled 3D look. Sizing (font
   sizes, padding) reduced slightly from the original standalone
   version, appropriate for sitting inside a smaller nested card rather
   than a standalone 420px-wide block. */
.hw-bm__card-pricing {
	margin-top: 1.75rem;
	background: #e3d9c4;
	border: 1px solid #cbbfa0;
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
	text-align: center;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 0 rgba(0, 0, 0, 0.08),
		0 8px 18px rgba(0, 0, 0, 0.14);
}
.hw-bm__card-pricing-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--shinwado-red);
	margin-bottom: 0.85rem;
}
.hw-bm__card-pricing-price {
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	font-weight: 700;
	color: var(--shinwado-ink);
	line-height: 1;
	margin-bottom: 0.3rem;
}
.hw-bm__card-pricing-secondary {
	font-size: 0.78rem;
	color: #6b6255;
	margin-bottom: 1.25rem;
}
.hw-bm__card-pricing .shinwado-divider {
	max-width: 36px;
	margin: 0 auto 1.25rem;
}
.hw-bm__card-pricing-body {
	font-size: 0.85rem;
	line-height: 1.55;
	color: #4a423a;
	margin: 0 0 1.1rem;
}
.hw-bm__card-pricing-checks {
	text-align: left;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	color: #333333;
}
.hw-bm__card-pricing-checks li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 0.5rem;
}
.hw-bm__card-pricing-checks li:last-child {
	margin-bottom: 0;
}
.hw-bm__card-pricing-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--shinwado-red);
}
/* Empty items (deliberately rendered, not skipped — see
   includes/harmonious-way-render.php) get no checkmark icon, since a
   checkmark next to nothing would look like a mistake rather than
   intentional vertical padding. Hidden entirely on mobile — see the
   Responsive section further below. Deliberately includes "li" in this
   selector, not just the class alone — the original rule above also
   includes "li", giving it equal specificity to this override; without
   matching that, the original rule would win regardless of source
   order and the checkmark would never actually be suppressed. */
.hw-bm__card-pricing-checks li.hw-bm__card-pricing-checks-empty::before {
	content: none;
}
.hw-bm__card-pricing-button {
	margin: 0;
}

/* 4. Closing Quote block ------------------------------------------------------------ */
.hw-quote {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
}
.hw-quote__inner {
	max-width: 720px;
}
.hw-quote__text {
	margin: 0 0 1rem;
	line-height: 1.6;
}
.hw-quote__signature {
	letter-spacing: 0.04em;
}

/* 5. CTA block --------------------------------------------------------------------- */
.hw-cta {
	position: relative;
	background-color: var(--shinwado-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 3rem 2rem;
	text-align: center;
	overflow: hidden;
}
.hw-cta__inner {
	max-width: 640px;
	margin: 0 auto;
}
.hw-cta__image {
	max-height: 56px;
	width: auto;
	margin: 0 auto 1rem;
}
.hw-cta__title {
	margin: 0 0 0.75rem;
	font-family: 'Playfair Display', serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
}
.hw-cta__description {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
}
.hw-cta__button {
	margin: 0;
}

/* 6. Responsive ---------------------------------------------------------------------- */
@media (max-width: 780px) {
	.hw-logo__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.hw-mission__why-panel {
		padding: 1.5rem 1.5rem;
	}
	.hw-pr__cards {
		grid-template-columns: 1fr;
	}
	.hw-bm__cards {
		grid-template-columns: 1fr;
	}
	/* Empty checkmark items exist purely to line up card heights when
	   several sit side by side on desktop — with cards stacked on
	   mobile instead, that alignment concern doesn't apply, so these
	   are hidden entirely here rather than taking up needless space. */
	.hw-bm__card-pricing-checks-empty {
		display: none;
	}
}