/*
 * PrayerPrompt Theme — assets/css/single.css
 *
 * Styles specific to the single post (prayer/devotional) template.
 * Only loaded on is_singular('post') — not on archives or pages.
 *
 * Contents:
 *   1. Post title
 *   2. Post body typography (content-specific overrides)
 *   3. Scripture blockquote (enhanced)
 *   4. H2 section dividers inside post content
 *   5. Prayer declaration blocks
 *   6. Pull quotes
 *   7. Featured image (single-specific sizing)
 *   8. Post entry animations
 *
 * Depends on: base.css, components.css
 *
 * @package PrayerPrompt
 * @since   1.0.0
 */


/* ============================================================
   1. POST TITLE
   ============================================================ */

.post-title {
	font-family: var(--font-serif);
	font-size: clamp(1.625rem, 5vw, 2.5rem);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-navy);
	margin-bottom: var(--sp-5);

	/* Prevent very long titles from breaking layout */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}


/* ============================================================
   2. POST BODY TYPOGRAPHY
   ============================================================ */

.post-body {
	font-size: var(--text-base);  /* 17px */
	line-height: var(--leading-loose);  /* 1.85 */
	color: var(--text-primary);
}

/* First paragraph — slightly larger lead-in */
.post-body > p:first-of-type {
	font-size: 1.0625rem;
	color: var(--text-primary);
}

.post-body p {
	margin-bottom: var(--sp-5);
}

/* H2 inside post content */
.post-body h2 {
	font-family: var(--font-serif);
	font-size: clamp(1.375rem, 3.5vw, 1.75rem);
	font-weight: 600;
	color: var(--color-navy);
	margin-top: var(--sp-12);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border-red);
	line-height: var(--leading-snug);
	letter-spacing: -0.01em;
}

/* Remove top margin on first H2 (sits right after featured image/meta) */
.post-body h2:first-child {
	margin-top: 0;
}

/* H3 inside post content */
.post-body h3 {
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 2.8vw, 1.375rem);
	font-weight: 500;
	font-style: italic;
	color: var(--color-navy-mid);
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-3);
	line-height: var(--leading-snug);
}

/* H4 — rarely used in prayer posts */
.post-body h4 {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-navy);
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-2);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	font-size: var(--text-xs);
}

/* Links inside post content */
.post-body a {
	color: var(--color-navy);
	text-decoration: underline;
	text-decoration-color: var(--border-red);
	text-underline-offset: 3px;
	font-weight: 500;
	transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.post-body a:hover {
	color: var(--color-red);
	text-decoration-color: var(--color-red);
}

/* Bold text */
.post-body strong,
.post-body b {
	font-weight: 500;
	color: var(--color-navy);
}

/* Lists in content */
.post-body ul,
.post-body ol {
	padding-left: var(--sp-6);
	margin-bottom: var(--sp-5);
}

.post-body li {
	margin-bottom: var(--sp-2);
	line-height: var(--leading-relaxed);
}

.post-body ul {
	list-style-type: disc;
}

.post-body ul li::marker {
	color: var(--color-red);
}

.post-body ol {
	list-style-type: decimal;
}

.post-body ol li::marker {
	color: var(--color-burgundy);
	font-weight: 500;
}


/* ============================================================
   3. SCRIPTURE BLOCKQUOTE
   ============================================================ */

/* Standard Gutenberg blockquote inside prayer content */
.post-body blockquote,
.post-body .wp-block-quote {
	margin: var(--sp-7) 0;
	padding: var(--sp-5) var(--sp-6);
	border-left: 3px solid var(--color-red);
	background: var(--bg-red-tint);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;

	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 3vw, 1.375rem);
	font-style: italic;
	line-height: var(--leading-normal);
	color: var(--color-navy);
}

.post-body blockquote p,
.post-body .wp-block-quote p {
	margin-bottom: var(--sp-2);
	max-width: none;
	font-size: inherit;
}

.post-body blockquote p:last-of-type,
.post-body .wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

/* Scripture reference (cite) */
.post-body blockquote cite,
.post-body .wp-block-quote cite,
.post-body blockquote .wp-block-quote__citation,
.post-body .wp-block-quote .wp-block-quote__citation {
	display: block;
	font-size: var(--text-xs);
	font-style: normal;
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-burgundy);
	margin-top: var(--sp-3);
	letter-spacing: var(--tracking-wide);
}


/* ============================================================
   4. PRAYER DECLARATION BLOCKS
   Prayer posts often have structured "I declare..." sections.
   These use a Gutenberg custom class or a specific HTML pattern.
   ============================================================ */

/* Declaration block — styled when author adds class="prayer-declaration" */
.post-body .prayer-declaration {
	background: var(--color-navy);
	color: #ffffff;
	border-radius: var(--radius-md);
	padding: var(--sp-6) var(--sp-7);
	margin: var(--sp-7) 0;
	position: relative;
	overflow: hidden;
}

.post-body .prayer-declaration::before {
	content: '✦';
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-5);
	font-size: 1.5rem;
	color: var(--color-red);
	opacity: 0.4;
}

.post-body .prayer-declaration p {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-style: italic;
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--sp-2);
	max-width: none;
}

.post-body .prayer-declaration p:last-child {
	margin-bottom: 0;
}

/* Affirmation list — numbered declarations */
.post-body .affirmation-list {
	list-style: none;
	padding: 0;
	counter-reset: affirmation;
	margin: var(--sp-6) 0;
}

.post-body .affirmation-list li {
	counter-increment: affirmation;
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 0;
}

.post-body .affirmation-list li:last-child {
	border-bottom: none;
}

.post-body .affirmation-list li::before {
	content: counter(affirmation);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-red);
	flex-shrink: 0;
	width: 24px;
	line-height: 1.4;
}


/* ============================================================
   5. PULL QUOTES
   ============================================================ */

.post-body .pullquote,
.post-body .wp-block-pullquote {
	margin: var(--sp-10) 0;
	padding: var(--sp-6) 0;
	border-top: 2px solid var(--color-red);
	border-bottom: 2px solid var(--color-red);
	text-align: center;
}

.post-body .pullquote p,
.post-body .wp-block-pullquote p,
.post-body .wp-block-pullquote blockquote p {
	font-family: var(--font-serif);
	font-size: clamp(1.25rem, 3vw, 1.625rem);
	font-style: italic;
	color: var(--color-navy);
	line-height: var(--leading-snug);
	max-width: 52ch;
	margin: 0 auto var(--sp-2);
}

.post-body .wp-block-pullquote cite,
.post-body .pullquote cite {
	font-size: var(--text-xs);
	font-style: normal;
	font-family: var(--font-sans);
	color: var(--color-burgundy);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
}


/* ============================================================
   6. FEATURED IMAGE — SINGLE POST SPECIFIC
   ============================================================ */

/* On single posts the featured image is the hero — full bleed feel */
.single-post .featured-image {
	margin-left: calc(-1 * var(--sp-5));
	margin-right: calc(-1 * var(--sp-5));
	border-radius: 0;
	margin-bottom: var(--sp-7);
}
@media (max-width: 719px) {
	.single-post .featured-image {
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
	}
}
/* Restore border-radius on larger screens where we have padding */
@media (min-width: 720px) {
        .single-post .featured-image {
                width: auto;
                position: static;
                left: auto;
                margin-left: 0;
                margin-right: 0;
                border-radius: var(--radius-md);
        }
}
}


/* ============================================================
   7. POST ENTRY ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	@keyframes pp-fade-up {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.article-wrap .breadcrumb      { animation: pp-fade-up 0.35s ease 0.00s both; }
	.article-wrap .post-title      { animation: pp-fade-up 0.35s ease 0.05s both; }
	.article-wrap .post-meta       { animation: pp-fade-up 0.35s ease 0.10s both; }
	.article-wrap .featured-image  { animation: pp-fade-up 0.35s ease 0.15s both; }
	.article-wrap .email-signup    { animation: pp-fade-up 0.35s ease 0.20s both; }
}


/* ============================================================
   TTS PLAYER + TOC SPACING
   ============================================================ */

/* Wrapper around TTS player — ensures gap above and below */
.tts-wrap {
	margin-bottom: var(--sp-5);
}

/* Gap between TTS player and TOC */
.tts-wrap + .toc-wrap,
.tts-wrap + #ez-toc-container,
.tts-wrap + div#ez-toc-container {
	margin-top: var(--sp-5) !important;
}

/* Gap between KP notice and TTS */
.kp-notice + .tts-wrap {
	margin-top: var(--sp-4);
}

/* Ensure EZ TOC has breathing room from everything above it */
#ez-toc-container,
div#ez-toc-container {
	margin-top: var(--sp-5) !important;
}


/* ── TTS player spacing (override previous rules) ─────────────── */
.tts-wrap {
	margin-top: var(--sp-5) !important;
	margin-bottom: var(--sp-5) !important;
}

/* Gap between TTS and TOC specifically */
.tts-wrap + div#ez-toc-container,
.tts-wrap + .toc-wrap {
	margin-top: var(--sp-6) !important;
}

/* AtlasVoice outputs tts-play-button directly — ensure it has space */
tts-play-button {
	display: block !important;
	margin-bottom: var(--sp-4) !important;
}


/* ============================================================
   HOMEPAGE — FULL WIDTH LAYOUT
   ============================================================ */

/* ── Homepage sections ──────────────────────────────────────── */
.homepage-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-10) var(--sp-6) 0;
}

.homepage-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-6);
}

.homepage-section__more {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-navy);
	text-decoration: none;
	border-bottom: 1px solid rgba(244,28,43,0.3);
	padding-bottom: 1px;
	transition: border-color var(--transition-fast);
}

.homepage-section__more:hover {
	border-color: var(--color-red);
	color: var(--color-red);
}

/* ── Hero section ───────────────────────────────────────────── */
.homepage-hero {
	background: var(--color-navy);
	padding: 0;
	margin-bottom: 0;
}

.homepage-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 480px;
}

.homepage-hero__image {
	display: block;
	position: relative;
	overflow: hidden;
}

.homepage-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.homepage-hero__tag {
	position: absolute;
	top: var(--sp-4);
	left: var(--sp-4);
	background: var(--color-red);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	padding: 3px 12px;
	border-radius: var(--radius-pill);
}

.homepage-hero__body {
	padding: var(--sp-10) var(--sp-10) var(--sp-10);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sp-3);
}

.homepage-hero__category {
	color: var(--color-red) !important;
	text-decoration: none;
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
}

.homepage-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 600;
	color: #ffffff;
	line-height: 1.2;
	letter-spacing: var(--tracking-tight);
}

.homepage-hero__title a {
	color: inherit;
	text-decoration: none;
}

.homepage-hero__title a:hover {
	color: rgba(255,255,255,0.85);
}

.homepage-hero__excerpt {
	font-size: var(--text-base);
	color: rgba(255,255,255,0.65);
	line-height: var(--leading-relaxed);
}

.homepage-hero__meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

.homepage-hero__meta .post-meta__author-name,
.homepage-hero__meta time,
.homepage-hero__meta .post-meta__read-time {
	color: rgba(255,255,255,0.55);
	font-size: var(--text-sm);
}

.homepage-hero__meta .post-meta__sep {
	color: rgba(255,255,255,0.25);
}

.homepage-hero__meta .post-meta__avatar {
	width: 28px;
	height: 28px;
}

.btn--red {
	display: inline-flex;
	align-items: center;
	background: var(--color-red);
	color: #ffffff !important;
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	font-family: var(--font-sans);
	transition: background var(--transition-fast);
	width: fit-content;
	margin-top: var(--sp-2);
}

.btn--red:hover {
	background: #d41525;
	color: #ffffff !important;
	text-decoration: none;
}

/* ── Post grid on homepage — full width ─────────────────────── */
.post-grid--homepage {
	grid-template-columns: repeat(3, 1fr) !important;
	max-width: 100%;
}

@media (max-width: 900px) {
	.post-grid--homepage {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.post-grid--homepage {
		grid-template-columns: 1fr !important;
	}
}