/* guide-single.css — Guide single page layout
 *
 * Template: single-guide.php
 *
 * Section sequence:
 *   1. Breadcrumb              .breadcrumb (breadcrumb.css)
 *   2. Guide Hero              .guide-hero[--has-image | --no-image]
 *   3. Guide Body              .guide-body > .guide-body__content
 *   4. Related Communities     .guide-communities (grid only)
 *   5. For OFWs (conditional)  .ofw-callout (ofw-callout.css — spacing only)
 *   6. FAQ Block               .faq-block (faq-block.css — spacing only)
 *   7. Final CTA               .final-cta (final-cta.css — spacing only)
 *
 * CSS ownership: hero layout, editorial body typography rhythm, related
 * communities grid orchestration, section spacing.
 * Does not duplicate: community-card, faq, ofw-callout, final-cta styles.
 */

/* ═══════════════════════════════════════════════════════════
   1. BREADCRUMB — placement within hero area
   ═══════════════════════════════════════════════════════════ */

/* Breadcrumb visual styles live in breadcrumb.css.
   Positioning relative to the guide hero needs a top offset
   on the single-guide template. */
.single-guide .breadcrumb {
	position: relative;
	z-index: 2;
	padding-top: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════
   2. GUIDE HERO
   ═══════════════════════════════════════════════════════════ */

/* ─── Base hero ─────────────────────────────────────────── */

.guide-hero {
	position: relative;
	background-color: var(--green-dark);
	padding: 6rem 0 5rem;
	overflow: hidden;
}

/* Decorative gradient — visible on both variants */
.guide-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 70% 60% at 80% 50%, rgba(42, 82, 57, 0.45) 0%, transparent 70%),
		radial-gradient(ellipse 50% 50% at 10% 90%, rgba(200, 169, 106, 0.05) 0%, transparent 60%);
	z-index: 1;
	pointer-events: none;
}

/* Dot pattern decoration */
.guide-hero::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
	opacity: 0.05;
	background-image: radial-gradient(circle, #C8A96A 1px, transparent 1px);
	background-size: 28px 28px;
	z-index: 1;
	pointer-events: none;
}

/* ─── Image variant ─────────────────────────────────────── */

/* Full-bleed background image with gradient overlay */
.guide-hero--has-image {
	min-height: 440px;
	display: flex;
	align-items: flex-end;
	padding-bottom: 4rem;
}

/* Background image div (style set inline via PHP) */
.guide-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Gradient overlay for image legibility — replaces ::before on image variant */
.guide-hero--has-image::before {
	background-image: linear-gradient(
		to top,
		rgba(22, 44, 31, 0.92) 0%,
		rgba(22, 44, 31, 0.55) 50%,
		rgba(22, 44, 31, 0.25) 100%
	);
}

.guide-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Additional scrim; bg overlay on .guide-hero--has-image::before handles primary darkening */
}

/* ─── Content area (both variants) ─────────────────────── */

.guide-hero .container {
	position: relative;
	z-index: 2;
}

.guide-hero__content {
	max-width: 760px;
}

/* ─── Category eyebrow label ────────────────────────────── */

/* Per FONT_SPEC: DM Sans 500, 10–11px, uppercase, gold, letter-spacing 0.14em */
.guide-hero__category {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--gold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

/* Gold dot before category label */
.guide-hero__category::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--gold);
	flex-shrink: 0;
}

/* ─── Guide title (H1) ──────────────────────────────────── */

/* Per FONT_SPEC: Cormorant Garamond 600, clamp(38px, 5vw, 62px) */
.guide-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 600;
	color: var(--white);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 1.25rem;
}

/* ─── Reading time meta ─────────────────────────────────── */

/* Per FONT_SPEC: DM Sans 500, small, uppercase stat label treatment */
.guide-hero__meta {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: rgba(200, 169, 106, 0.7);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Clock-like separator dot before reading time */
.guide-hero__meta::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(200, 169, 106, 0.5);
	flex-shrink: 0;
}

/* ─── Excerpt ───────────────────────────────────────────── */

/* Per FONT_SPEC: Hero subline — DM Sans 300, 15px, line-height 1.8 */
.guide-hero__excerpt {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	color: rgba(247, 247, 245, 0.65);
	line-height: 1.8;
	margin: 0 0 2rem;
	max-width: 600px;
}

/* ─── CTA actions ───────────────────────────────────────── */

.guide-hero__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   3. GUIDE BODY — Editorial typography
   ═══════════════════════════════════════════════════════════ */

.guide-body {
	padding: var(--space-xl) 0;
	background-color: var(--white);
}

/* Reading column — constrained width for long-form comfort */
.guide-body__content {
	max-width: 760px;
}

/* ─── Paragraph rhythm ──────────────────────────────────── */

.guide-body__content p {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.8;
	margin-bottom: 1.25em;
}

.guide-body__content p:last-child {
	margin-bottom: 0;
}

/* ─── Headings within guide body ────────────────────────── */

/* H2 — major section headings within a guide */
.guide-body__content h2 {
	font-family: var(--font-serif);
	font-size: clamp(22px, 2.8vw, 34px);
	font-weight: 600;
	color: var(--green-dark);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 2.5em 0 0.75em;
}

.guide-body__content h2:first-child {
	margin-top: 0;
}

/* H3 — sub-sections within a guide section */
.guide-body__content h3 {
	font-family: var(--font-serif);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 600;
	color: var(--green-dark);
	line-height: 1.2;
	letter-spacing: 0;
	margin: 2em 0 0.625em;
}

/* H4 — per FONT_SPEC: inherits body text treatment */
.guide-body__content h4 {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--charcoal);
	line-height: 1.5;
	margin: 1.5em 0 0.5em;
}

/* H5, H6 — not used in templates; safe fallback */
.guide-body__content h5,
.guide-body__content h6 {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 1.25em 0 0.5em;
}

/* ─── Links within body ─────────────────────────────────── */

.guide-body__content a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-base);
}

.guide-body__content a:hover {
	color: var(--gold);
}

/* ─── Lists (Classic Editor output) ────────────────────── */

/* Restore list styles removed by reset.css — per base.css pattern */
.guide-body__content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25em;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.guide-body__content ul li {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.7;
	padding-left: 1.25rem;
	position: relative;
}

/* Em-dash bullet — matches the approved design dash-list pattern */
.guide-body__content ul li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--gold);
	font-size: 12px;
	line-height: 1.8;
}

/* Ordered list */
.guide-body__content ol {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25em;
	counter-reset: guide-ol;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.guide-body__content ol li {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--charcoal);
	line-height: 1.7;
	padding-left: 2rem;
	position: relative;
	counter-increment: guide-ol;
}

.guide-body__content ol li::before {
	content: counter(guide-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	font-family: var(--font-serif);
	font-size: 13px;
	font-weight: 400;
	color: var(--gold);
	line-height: 1.7;
}

/* ─── Blockquote ────────────────────────────────────────── */

.guide-body__content blockquote {
	background-color: var(--cream);
	border-left: 3px solid var(--gold);
	padding: 1.5rem 1.75rem;
	margin: 1.75em 0;
}

.guide-body__content blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(16px, 1.8vw, 20px);
	font-weight: 400;
	font-style: italic;
	color: var(--green-dark);
	line-height: 1.6;
	margin: 0;
}

.guide-body__content blockquote cite {
	display: block;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-style: normal;
	margin-top: 0.875rem;
}

/* ─── Tables ────────────────────────────────────────────── */

.guide-body__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.75em 0;
	font-family: var(--font-sans);
	font-size: 13px;
	overflow-x: auto;
	display: block; /* Allows horizontal scroll on narrow viewports */
}

.guide-body__content table thead tr {
	background-color: var(--green);
}

.guide-body__content table thead th {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	color: var(--white);
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	text-align: left;
	white-space: nowrap;
}

.guide-body__content table tbody tr {
	border-bottom: 1px solid var(--cream-dark);
}

.guide-body__content table tbody tr:nth-child(even) {
	background-color: var(--cream);
}

.guide-body__content table tbody td {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--charcoal);
	padding: 0.75rem 1rem;
	line-height: 1.5;
	vertical-align: top;
}

/* ─── Images within guide body ──────────────────────────── */

.guide-body__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.75em 0;
}

/* WordPress-generated image alignment classes */
.guide-body__content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.guide-body__content .alignleft {
	float: left;
	margin: 0.5em 1.5em 1em 0;
}

.guide-body__content .alignright {
	float: right;
	margin: 0.5em 0 1em 1.5em;
}

/* Clearfix for floated images */
.guide-body__content::after {
	content: '';
	display: table;
	clear: both;
}

/* Image captions */
.guide-body__content figcaption,
.guide-body__content .wp-caption-text {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 300;
	color: var(--muted);
	line-height: 1.55;
	margin-top: 0.5rem;
	text-align: center;
}

.guide-body__content figure {
	margin: 1.75em 0;
}

/* ─── Horizontal rule ───────────────────────────────────── */

.guide-body__content hr {
	border: none;
	border-top: 1px solid var(--cream-dark);
	margin: 2.5em 0;
}

/* ─── Code and pre blocks ───────────────────────────────── */

/* Guides may include code examples for calculation references */
.guide-body__content code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 13px;
	background-color: var(--cream);
	color: var(--green-dark);
	padding: 2px 6px;
	border-radius: 2px;
}

.guide-body__content pre {
	background-color: var(--cream);
	border-left: 3px solid var(--cream-dark);
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	margin: 1.75em 0;
}

.guide-body__content pre code {
	background: none;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--charcoal);
}

/* ─── Strong and em within body ─────────────────────────── */

.guide-body__content strong {
	font-weight: 500;
	color: var(--charcoal);
}

.guide-body__content em {
	font-style: italic;
}

/* Cormorant Garamond italic for em in editorial context */
.guide-body__content h2 em,
.guide-body__content h3 em {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   4. RELATED COMMUNITIES — grid orchestration only
   ═══════════════════════════════════════════════════════════ */

/* Community card visual styles live entirely in community-card.css.
   This section owns only the wrapper, section heading, and grid layout. */

.guide-communities {
	padding: var(--space-xl) 0;
	background-color: var(--cream);
}

/* Three-column grid at desktop */
.guide-communities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════
   5. FOR OFWs — page spacing only
   ═══════════════════════════════════════════════════════════ */

/* ofw-callout visual styles live in ofw-callout.css.
   No page-level override needed — background, padding, and
   layout are all component-owned. */

/* ═══════════════════════════════════════════════════════════
   6. FAQ BLOCK — page spacing only
   ═══════════════════════════════════════════════════════════ */

/* faq-block visual styles live in faq-block.css.
   No page-level override needed. */

/* ═══════════════════════════════════════════════════════════
   7. FINAL CTA — page spacing only
   ═══════════════════════════════════════════════════════════ */

/* final-cta visual styles live in final-cta.css.
   No page-level override needed. */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 1024px
   ═══════════════════════════════════════════════════════════ */

@media ( max-width: 1024px ) {

	/* Hero */
	.guide-hero {
		padding: 5rem 0 4rem;
	}

	.guide-hero--has-image {
		min-height: 380px;
		padding-bottom: 3rem;
	}

	/* Guide body */
	.guide-body {
		padding: var(--space-lg) 0;
	}

	/* Related communities: 3-col → 2-col */
	.guide-communities {
		padding: var(--space-lg) 0;
	}

	.guide-communities__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — 640px
   ═══════════════════════════════════════════════════════════ */

@media ( max-width: 640px ) {

	/* Hero */
	.guide-hero {
		padding: 4.5rem 0 3rem;
	}

	.guide-hero--has-image {
		min-height: 320px;
		padding-bottom: 2.5rem;
	}

	.guide-hero__actions {
		flex-direction: column;
	}

	.guide-hero__actions .btn {
		width: 100%;
		text-align: center;
	}

	/* Guide body */
	.guide-body {
		padding: var(--space-lg) 0;
	}

	/* Improve table readability on small screens */
	.guide-body__content table {
		font-size: 12px;
	}

	.guide-body__content table thead th,
	.guide-body__content table tbody td {
		padding: 0.625rem 0.75rem;
	}

	/* Float images become full-width on mobile */
	.guide-body__content .alignleft,
	.guide-body__content .alignright {
		float: none;
		margin: 1.5em 0;
		width: 100%;
	}

	/* Related communities: 2-col → 1-col */
	.guide-communities {
		padding: var(--space-lg) 0;
	}

	.guide-communities__grid {
		grid-template-columns: 1fr;
	}
}