/*
 * Article Detail (Single Post) Redesign — Phase 6
 * "Dark Forest / Imperial Gold / Cream"
 * Loaded only on is_singular('post') via NOVAMIRA_ARTICLE_REDESIGN.
 * Ported from design bundle styles.css (ARTICLE DETAIL section), scoped under
 * .eh-article. Per user: NO read-time, NO "On This Page" TOC, NO Article Info
 * box, NO author bio card — those design blocks are intentionally not ported.
 * Related cards reuse the Phase 5 .eh-journal card (journal-redesign.css).
 */

.eh-article {
	--eh-forest-900: #0d2a20;
	--eh-forest-800: #14392c;
	--eh-forest-700: #1b4332;
	--eh-herb-600: #2d6a4f;
	--eh-herb-500: #3b8466;
	--eh-gold-600: #b78712;
	--eh-gold-500: #d4a017;
	--eh-gold-400: #e6bf4f;
	--eh-cream-50: #faf7f1;
	--eh-cream-100: #f8f5f0;
	--eh-cream-200: #efe8d9;
	--eh-ink-900: #14201a;
	--eh-ink-700: #2f3a32;
	--eh-ink-500: #6b7368;
	--eh-line: rgba(20, 32, 26, 0.12);
	--eh-line-dark: rgba(243, 228, 182, 0.18);
	--eh-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--eh-font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--eh-font-body);
	color: var(--eh-ink-700);
	background: var(--eh-cream-50);
	padding-bottom: 80px;
}

.eh-article *,
.eh-article *::before,
.eh-article *::after { box-sizing: border-box; }

.eh-article img { max-width: 100%; height: auto; display: block; }
.eh-article a { color: inherit; text-decoration: none; }
.eh-article button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* === Reading progress === */
.eh-a-progress { position: sticky; top: 0; z-index: 30; height: 3px; background: rgba(20, 32, 26, 0.06); }
.eh-a-progress .fill { height: 100%; background: var(--eh-gold-500); width: 0; transition: width .15s; }

/* === Hero === */
.eh-a-hero { background: var(--eh-forest-900); color: var(--eh-cream-100); padding: 70px 0 100px; position: relative; overflow: hidden; }
.eh-a-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 80% 30%, rgba(45, 106, 79, 0.45), transparent 60%); }
.eh-a-hero-inner { position: relative; max-width: 920px; margin: 0 auto; padding: 0 40px; text-align: center; }
.eh-a-hero .eh-breadcrumbs { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(243, 228, 182, 0.55); margin-bottom: 30px; }
.eh-a-hero .eh-breadcrumbs a { color: var(--eh-gold-400); }
.eh-a-hero .eh-breadcrumbs .sep { margin: 0 12px; opacity: 0.5; }
.eh-a-hero .eh-a-cat { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-400); font-weight: 700; margin-bottom: 28px; }
.eh-a-hero .eh-a-cat::before, .eh-a-hero .eh-a-cat::after { content: ""; width: 28px; height: 1px; background: var(--eh-gold-400); }
.eh-a-hero h1 { color: var(--eh-cream-100); font-family: var(--eh-font-display); font-size: clamp(40px, 5.5vw, 72px); font-weight: 400; line-height: 1.08; margin: 0; }
.eh-a-hero h1 .gold { color: var(--eh-gold-500); font-style: italic; }
.eh-a-hero .dek { font-size: 18px; line-height: 1.7; color: rgba(243, 228, 182, 0.75); margin: 30px auto 40px; max-width: 720px; font-family: var(--eh-font-display); font-style: italic; font-weight: 400; }
.eh-a-hero-meta { display: inline-flex; align-items: center; gap: 24px; padding: 18px 32px; border: 1px solid var(--eh-line-dark); background: rgba(13, 42, 32, 0.5); }
.eh-a-hero-meta .who-block { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.eh-a-hero-meta .av { width: 36px; height: 36px; border-radius: 50%; background: var(--eh-gold-500); color: var(--eh-forest-900); display: inline-flex; align-items: center; justify-content: center; font-family: var(--eh-font-display); font-size: 14px; font-weight: 500; }
.eh-a-hero-meta .who { font-family: var(--eh-font-display); font-size: 16px; color: var(--eh-cream-100); line-height: 1.1; }
.eh-a-hero-meta .role { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 228, 182, 0.55); font-weight: 700; margin-top: 2px; }
.eh-a-hero-meta .divider { width: 1px; height: 24px; background: var(--eh-line-dark); }
.eh-a-hero-meta .when { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243, 228, 182, 0.65); font-weight: 700; }
@media (max-width: 600px) { .eh-a-hero-meta { flex-wrap: wrap; gap: 14px; justify-content: center; } }

/* === Featured image === */
.eh-a-feature { max-width: 1200px; margin: -60px auto 0; padding: 0 40px; position: relative; z-index: 2; }
.eh-a-feature .frame { aspect-ratio: 16/9; background: linear-gradient(160deg, rgba(45, 106, 79, 0.18), rgba(13, 42, 32, 0.08)); border: 1px solid var(--eh-line); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eh-a-feature .frame::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(243, 228, 182, 0.35); pointer-events: none; z-index: 2; }
.eh-a-feature .frame img { width: 100%; height: 100%; object-fit: cover; }
.eh-a-feature .illu { width: 30%; height: 65%; color: var(--eh-gold-500); display: flex; align-items: center; justify-content: center; }
.eh-a-feature .illu svg { width: 100%; height: 100%; }
.eh-a-feature .cap-tag { position: absolute; top: 26px; left: 26px; z-index: 3; background: var(--eh-forest-900); color: var(--eh-gold-400); padding: 8px 14px; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.eh-a-feature-caption { max-width: 1200px; margin: 14px auto 0; padding: 0 40px; font-size: 12px; letter-spacing: 0.06em; color: var(--eh-ink-500); font-style: italic; font-family: var(--eh-font-display); }
.eh-a-feature-caption strong { font-style: normal; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eh-forest-900); font-family: var(--eh-font-body); font-size: 10px; margin-right: 10px; }

/* === Body layout === */
.eh-a-body { max-width: 1200px; margin: 70px auto 0; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 80px; align-items: start; }
@media (max-width: 960px) { .eh-a-body { grid-template-columns: 1fr; gap: 50px; } }

/* === Prose (styles standard the_content markup) === */
.eh-article .prose { font-size: 18px; line-height: 1.85; color: var(--eh-ink-700); font-family: var(--eh-font-body); counter-reset: eh-sec; }
.eh-article .prose > * + * { margin-top: 1.3em; }
.eh-article .prose p { margin: 0; }
.eh-article .prose > p:first-of-type { font-size: 22px; line-height: 1.7; color: var(--eh-forest-900); font-family: var(--eh-font-display); font-weight: 400; }
.eh-article .prose > p:first-of-type::first-letter { font-family: var(--eh-font-display); font-size: 80px; font-weight: 400; line-height: 0.85; color: var(--eh-gold-600); float: left; margin: 8px 14px 0 0; }
.eh-article .prose h2 { font-family: var(--eh-font-display); font-size: 36px; font-weight: 500; color: var(--eh-forest-900); line-height: 1.15; margin: 2em 0 0; }
.eh-article .prose h2::before { counter-increment: eh-sec; content: "— Section " counter(eh-sec, decimal-leading-zero); display: block; font-family: var(--eh-font-display); font-style: italic; font-size: 14px; color: var(--eh-gold-600); margin-bottom: 12px; letter-spacing: 0.02em; }
.eh-article .prose h3 { font-family: var(--eh-font-display); font-size: 26px; font-weight: 500; color: var(--eh-forest-900); margin: 1.6em 0 0; }
.eh-article .prose strong { color: var(--eh-forest-900); font-weight: 700; }
.eh-article .prose em { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-herb-600); }
.eh-article .prose a { color: var(--eh-forest-900); border-bottom: 1px solid var(--eh-gold-500); transition: color .2s; }
.eh-article .prose a:hover { color: var(--eh-gold-600); }
.eh-article .prose ul, .eh-article .prose ol { padding-left: 28px; margin: 0; }
.eh-article .prose li { margin-top: 0.6em; }

/* Figures / inline images in content */
.eh-article .prose figure { margin: 50px 0; }
.eh-article .prose figure img, .eh-article .prose > img { width: 100%; border: 1px solid var(--eh-line); }
.eh-article .prose figcaption, .eh-article .prose .wp-caption-text { margin-top: 14px; font-size: 12px; letter-spacing: 0.06em; color: var(--eh-ink-500); font-style: italic; font-family: var(--eh-font-display); text-align: left; }

/* Blockquote → pull quote */
.eh-article .prose blockquote { border-top: 1px solid var(--eh-line); border-bottom: 1px solid var(--eh-line); padding: 36px 0; margin: 50px 0; font-family: var(--eh-font-display); font-size: 30px; font-weight: 400; line-height: 1.3; color: var(--eh-forest-900); text-align: center; font-style: italic; }
.eh-article .prose blockquote::before { content: "\201C"; display: block; font-size: 80px; color: var(--eh-gold-500); line-height: 0.7; margin-bottom: 14px; font-style: normal; }
.eh-article .prose blockquote p { margin: 0; }
.eh-article .prose blockquote cite { display: block; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-ink-500); font-style: normal; font-family: var(--eh-font-body); font-weight: 700; margin-top: 20px; }

/* Data tables in content */
.eh-article .prose table { width: 100%; border-collapse: collapse; font-family: var(--eh-font-body); margin: 50px 0; border: 1px solid var(--eh-line); }
.eh-article .prose thead th { background: var(--eh-cream-100); padding: 14px 24px; text-align: left; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--eh-ink-700); border-bottom: 1px solid var(--eh-line); }
.eh-article .prose thead th:not(:first-child) { text-align: right; }
.eh-article .prose tbody td { padding: 16px 24px; font-size: 15px; color: var(--eh-ink-700); border-bottom: 1px solid var(--eh-line); }
.eh-article .prose tbody td:first-child { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-forest-900); font-size: 16px; }
.eh-article .prose tbody td:not(:first-child) { text-align: right; font-family: var(--eh-font-display); font-size: 18px; color: var(--eh-forest-900); font-variant-numeric: tabular-nums; }
.eh-article .prose tbody tr:last-child td { border-bottom: 0; }

/* References list (author writes <ol class="eh-refs-list"> or a heading "References") */
.eh-article .prose .eh-refs-list { padding-left: 24px; color: var(--eh-ink-500); font-size: 13px; line-height: 1.7; }
.eh-article .prose .eh-refs-list li em { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-forest-900); }

/* === Inline product cite (shortcode output) === */
.eh-a-cite { display: grid; grid-template-columns: 140px 1fr auto; gap: 28px; align-items: center; margin: 50px 0; padding: 24px; background: var(--eh-cream-100); border: 1px solid var(--eh-line); transition: all .25s; }
.eh-a-cite:hover { border-color: var(--eh-gold-500); }
.eh-a-cite .img { aspect-ratio: 1; background: var(--eh-cream-50); border: 1px solid var(--eh-line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.eh-a-cite .img img { width: 100%; height: 100%; object-fit: cover; }
.eh-a-cite .eb { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; margin-bottom: 6px; }
.eh-a-cite h4 { font-family: var(--eh-font-display); font-size: 22px; color: var(--eh-forest-900); margin: 0; font-weight: 500; }
.eh-a-cite .botanical { font-family: var(--eh-font-display); font-style: italic; color: var(--eh-gold-600); font-size: 14px; margin-top: 4px; }
.eh-a-cite .price { font-family: var(--eh-font-display); font-size: 28px; color: var(--eh-forest-900); margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.eh-a-cite .price .currency { font-size: 14px; color: var(--eh-ink-500); vertical-align: 4px; margin-right: 2px; }
.eh-a-cite a.cite-cta, .eh-a-cite a.cite-cta:link, .eh-a-cite a.cite-cta:visited { height: 56px; padding: 0 28px; display: inline-flex; align-items: center; gap: 14px; background: var(--eh-forest-900); color: var(--eh-cream-100); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; transition: all .25s; white-space: nowrap; text-decoration: none; }
.eh-a-cite a.cite-cta:hover { background: var(--eh-gold-500); color: var(--eh-forest-900); }
.eh-a-cite .cite-cta .arrow { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .2s; }
.eh-a-cite .cite-cta .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.eh-a-cite:hover .cite-cta .arrow { width: 24px; }
@media (max-width: 800px) { .eh-a-cite { grid-template-columns: 100px 1fr; row-gap: 18px; } .eh-a-cite .cite-cta { grid-column: 1 / -1; justify-content: center; } }

/* === Sidebar (Botanicals Discussed + Share only) === */
.eh-a-aside { position: sticky; top: 40px; align-self: start; display: flex; flex-direction: column; gap: 30px; }
@media (max-width: 960px) { .eh-a-aside { position: static; } }
.eh-a-aside .block { padding-bottom: 26px; border-bottom: 1px solid var(--eh-line); }
.eh-a-aside .block:last-child { border-bottom: 0; padding-bottom: 0; }
.eh-a-aside h5 { font-family: var(--eh-font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--eh-forest-900); margin: 0 0 18px; }

.eh-a-bot-list { list-style: none; padding: 0; margin: 0; }
.eh-a-bot-list a { padding: 12px 0; border-bottom: 1px solid var(--eh-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: color .2s; color: var(--eh-forest-900); }
.eh-a-bot-list li:last-child a { border-bottom: 0; }
.eh-a-bot-list a:hover { color: var(--eh-gold-600); }
.eh-a-bot-list em { font-family: var(--eh-font-display); font-style: italic; font-size: 14px; }
.eh-a-bot-list .arrow { width: 28px; height: 1px; background: currentColor; position: relative; flex-shrink: 0; }
.eh-a-bot-list .arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.eh-a-share { display: flex; gap: 10px; flex-wrap: wrap; }
.eh-a-share a, .eh-a-share button { width: 38px; height: 38px; border: 1px solid var(--eh-line); display: inline-flex; align-items: center; justify-content: center; color: var(--eh-forest-700); transition: all .2s; font-size: 12px; font-weight: 700; }
.eh-a-share a:hover, .eh-a-share button:hover { background: var(--eh-forest-900); color: var(--eh-gold-400); border-color: var(--eh-forest-900); }
.eh-a-share svg { width: 15px; height: 15px; }
.eh-a-copied { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; margin-top: 10px; opacity: 0; transition: opacity .2s; }
.eh-a-copied.show { opacity: 1; }

/* === Footer matter === */
.eh-a-footer { max-width: 1200px; margin: 80px auto 0; padding: 0 40px; }

/* Tags row (no author card; share-r kept) */
.eh-a-tags { display: flex; align-items: center; gap: 18px; margin-top: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--eh-line); }
.eh-a-tags .lbl { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; color: var(--eh-ink-500); }
.eh-a-tags .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.eh-a-tags .tags a { font-size: 11px; padding: 8px 14px; border: 1px solid var(--eh-line); color: var(--eh-ink-700); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; transition: all .2s; }
.eh-a-tags .tags a:hover { border-color: var(--eh-forest-700); background: var(--eh-forest-900); color: var(--eh-gold-400); }

/* Up next */
.eh-a-upnext { margin: 50px 0 0; background: var(--eh-forest-900); color: var(--eh-cream-100); display: grid; grid-template-columns: 1fr 240px; gap: 0; position: relative; overflow: hidden; transition: all .3s; }
.eh-a-upnext:hover { background: #102e23; }
.eh-a-upnext:hover .up-arrow { background: var(--eh-gold-500); color: var(--eh-forest-900); transform: rotate(-45deg); }
.eh-a-upnext .copy { padding: 50px; }
.eh-a-upnext .label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-400); font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.eh-a-upnext .label::before { content: ""; width: 22px; height: 1px; background: var(--eh-gold-500); }
.eh-a-upnext h3 { color: var(--eh-cream-100); font-family: var(--eh-font-display); font-size: 36px; font-weight: 500; line-height: 1.15; margin: 16px 0 14px; }
.eh-a-upnext .meta { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243, 228, 182, 0.55); font-weight: 700; }
.eh-a-upnext .img-side { background: linear-gradient(160deg, rgba(45, 106, 79, 0.4), rgba(13, 42, 32, 0.5)); border-left: 1px solid var(--eh-line-dark); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.eh-a-upnext .img-side img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.eh-a-upnext .img-side .illu { width: 50%; height: 50%; color: var(--eh-gold-500); display: flex; align-items: center; justify-content: center; }
.eh-a-upnext .img-side .illu svg { width: 100%; height: 100%; }
.eh-a-upnext .up-arrow { position: absolute; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--eh-gold-400); color: var(--eh-gold-400); display: inline-flex; align-items: center; justify-content: center; transition: all .3s; z-index: 2; }
.eh-a-upnext .up-arrow svg { width: 16px; height: 16px; }
@media (max-width: 800px) { .eh-a-upnext { grid-template-columns: 1fr; } .eh-a-upnext .copy { padding: 32px; } .eh-a-upnext .img-side { min-height: 180px; } }

/* === Related (reuses .eh-journal cards) === */
.eh-a-related { background: var(--eh-cream-100); padding: 90px 0; margin-top: 80px; }
.eh-a-related .eh-container { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.eh-a-related .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.eh-a-related .head .eyebrow { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eh-gold-600); font-weight: 700; }
.eh-a-related .head h2 { font-family: var(--eh-font-display); font-weight: 500; font-size: clamp(32px, 3.5vw, 44px); color: var(--eh-forest-900); margin: 18px 0 0; }
.eh-a-related .head h2 .gold { color: var(--eh-gold-500); font-style: italic; font-weight: 400; }
.eh-a-related .link-more { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--eh-forest-700); display: inline-flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--eh-gold-500); padding-bottom: 4px; white-space: nowrap; }
@media (max-width: 720px) { .eh-a-related .head { flex-direction: column; align-items: flex-start; gap: 16px; } }