/* ==========================================================================
   seo-aeo.css
   Components added for SEO / GEO / AEO work.

   Design constraint: the existing visual identity does not change. Every
   colour below is drawn from the tokens already declared in custom.css
   (--accent-color #c9ceb6, --secondary-color #FCF4F1, --text-color #69615D,
   with #423c3c as the existing dark ink). No new palette is introduced.
   ========================================================================== */

:root {
	--aeo-ink:        #423c3c;
	--aeo-body:       var(--text-color, #69615D);
	--aeo-accent:     var(--accent-color, #c9ceb6);
	--aeo-accent-ink: #6f7754;              /* accent darkened to pass AA on white */
	--aeo-surface:    var(--secondary-color, #FCF4F1);
	--aeo-surface-2:  #f6f6f6;
	--aeo-line:       #e4e0dc;
	--aeo-radius:     14px;
	--aeo-measure:    68ch;                 /* readable line length */
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 12px 20px;
	background: var(--aeo-ink);
	color: #fff;
	border-radius: 0 0 var(--aeo-radius) 0;
	text-decoration: none;
	display: none;
}
.skip-to-content:focus { left: 0; }

/* Every interactive element needs a visible keyboard ring. The original
   theme removed outlines globally, which is a WCAG 2.4.7 failure. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--aeo-accent-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.aeo-breadcrumb {
	padding: 0;
	border-bottom: 0;
	font-size: 14px;
	line-height: 1.5;
}
.aeo-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0; padding: 0;
	list-style: none;
}
.aeo-breadcrumb li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--aeo-line);
}
.aeo-breadcrumb a { color: var(--aeo-body); text-decoration: none; }
.aeo-breadcrumb a:hover { color: var(--aeo-ink); text-decoration: underline; }
.aeo-breadcrumb [aria-current="page"] { color: var(--aeo-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Quick answer  — the featured-snippet / AI-Overview block
   -------------------------------------------------------------------------- */

.aeo-quick-answer {
	max-width: var(--aeo-measure);
	margin: 0 0 40px;
	padding: 26px 30px;
	background: var(--aeo-surface);
	border-left: 4px solid var(--aeo-accent);
	border-radius: 0 var(--aeo-radius) var(--aeo-radius) 0;
}
.aeo-quick-answer__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--aeo-accent-ink);
}
.aeo-quick-answer__body {
	margin: 0;
	font-size: 19px;
	line-height: 1.62;
	color: var(--aeo-ink);
}
.aeo-quick-answer__meta {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--aeo-body);
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */

.aeo-toc {
	margin: 0 0 40px;
	padding: 24px 28px;
	border: 1px solid var(--aeo-line);
	border-radius: var(--aeo-radius);
}
.aeo-toc h2 {
	margin: 0 0 14px;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aeo-accent-ink);
}
.aeo-toc ol {
	margin: 0; padding: 0;
	list-style: none;
	counter-reset: toc;
	columns: 2;
	column-gap: 32px;
}
.aeo-toc li {
	counter-increment: toc;
	margin: 0 0 9px;
	break-inside: avoid;
}
.aeo-toc li::before {
	content: counter(toc, decimal-leading-zero);
	margin-right: 10px;
	font-size: 12px;
	color: var(--aeo-accent-ink);
}
.aeo-toc a { color: var(--aeo-ink); text-decoration: none; }
.aeo-toc a:hover { text-decoration: underline; }

@media (max-width: 767px) { .aeo-toc ol { columns: 1; } }

/* --------------------------------------------------------------------------
   Key facts / comparison tables
   -------------------------------------------------------------------------- */

.aeo-key-facts,
.aeo-comparison { margin: 0 0 48px; }

.aeo-key-facts h2,
.aeo-comparison h2 {
	margin: 0 0 18px;
	font-size: 26px;
	color: var(--aeo-ink);
}

.aeo-key-facts table,
.aeo-comparison table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.55;
}
.aeo-key-facts th[scope="row"],
.aeo-comparison th[scope="row"] {
	width: 38%;
	text-align: left;
	font-weight: 600;
	color: var(--aeo-ink);
	vertical-align: top;
}
.aeo-key-facts td,
.aeo-comparison td { color: var(--aeo-body); vertical-align: top; }

.aeo-key-facts th,
.aeo-key-facts td,
.aeo-comparison th,
.aeo-comparison td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--aeo-line);
}
.aeo-key-facts tr:nth-child(odd) th,
.aeo-key-facts tr:nth-child(odd) td { background: var(--aeo-surface-2); }

.aeo-comparison thead th {
	background: var(--aeo-accent);
	color: var(--aeo-ink);
	font-weight: 700;
}
.aeo-comparison__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.aeo-key-facts__note,
.aeo-comparison__note {
	margin: 14px 0 0;
	font-size: 14px;
	font-style: italic;
	color: var(--aeo-body);
}

@media (max-width: 575px) {
	.aeo-key-facts th[scope="row"] { width: 46%; }
	.aeo-key-facts th, .aeo-key-facts td { padding: 12px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   FAQ  (native details/summary — answers stay in the DOM, no JS required)
   -------------------------------------------------------------------------- */

.aeo-faq { margin: 0 0 48px; }
.aeo-faq > h2 { margin: 0 0 20px; font-size: 26px; color: var(--aeo-ink); }

.aeo-faq__item {
	border-bottom: 1px solid var(--aeo-line);
}
.aeo-faq__item summary {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}
.aeo-faq__item summary::-webkit-details-marker { display: none; }
.aeo-faq__item summary h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--aeo-ink);
	flex: 1;
}
.aeo-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1;
	color: var(--aeo-accent-ink);
	transition: transform .18s ease;
}
.aeo-faq__item[open] summary::after { content: "−"; }

.aeo-faq__answer {
	padding: 0 0 22px;
	max-width: var(--aeo-measure);
	color: var(--aeo-body);
	line-height: 1.72;
}
.aeo-faq__answer p { margin: 0 0 14px; }
.aeo-faq__answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Author / medical review (E-E-A-T)
   -------------------------------------------------------------------------- */

.aeo-byline {
	margin: 0 0 28px;
	font-size: 14px;
	color: var(--aeo-body);
}
.aeo-byline a { color: var(--aeo-ink); font-weight: 600; }

.aeo-review {
	margin: 56px 0 0;
	padding: 32px 0 0;
	border-top: 2px solid var(--aeo-accent);
}
.aeo-review__card {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 26px;
	background: var(--aeo-surface);
	border-radius: var(--aeo-radius);
}
.aeo-review__card img {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	border-radius: 50%;
	object-fit: cover;
}
.aeo-review__role {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--aeo-accent-ink);
}
.aeo-review__name { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.aeo-review__name a { color: var(--aeo-ink); text-decoration: none; }
.aeo-review__title { margin: 0 0 12px; font-size: 15px; color: var(--aeo-body); }
.aeo-review__credentials {
	margin: 0 0 10px; padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--aeo-body);
}
.aeo-review__credentials li { position: relative; padding-left: 16px; margin-bottom: 4px; }
.aeo-review__credentials li::before {
	content: ""; position: absolute; left: 0; top: 8px;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--aeo-accent);
}
.aeo-review__memberships,
.aeo-review__dates { margin: 0 0 6px; font-size: 14px; color: var(--aeo-body); }
.aeo-review__memberships a { color: var(--aeo-accent-ink); }

.aeo-review__references { margin: 32px 0 0; }
.aeo-review__references h3 { font-size: 18px; margin: 0 0 12px; color: var(--aeo-ink); }
.aeo-review__references ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--aeo-body); }
.aeo-review__references a { color: var(--aeo-accent-ink); }

.aeo-review__disclaimer,
.aeo-review__scope {
	margin: 22px 0 0;
	padding: 16px 18px;
	background: var(--aeo-surface-2);
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--aeo-body);
}

@media (max-width: 575px) {
	.aeo-review__card { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Educational CTA
   -------------------------------------------------------------------------- */

.aeo-cta {
	margin: 48px 0;
	padding: 36px 34px;
	background: var(--aeo-surface);
	border-radius: var(--aeo-radius);
	max-width: var(--aeo-measure);
}
.aeo-cta h2 { margin: 0 0 12px; font-size: 24px; color: var(--aeo-ink); }
.aeo-cta p { margin: 0 0 20px; line-height: 1.7; color: var(--aeo-body); }

.aeo-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.aeo-cta__primary,
.aeo-cta__secondary,
.header-cta-btn {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 26px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.aeo-cta__primary,
.header-cta-btn { background: var(--aeo-accent); color: var(--aeo-ink); }
.aeo-cta__primary:hover,
.header-cta-btn:hover { background: #bec2ac; color: var(--aeo-ink); }
.aeo-cta__secondary {
	background: transparent;
	color: var(--aeo-ink);
	border: 1px solid var(--aeo-ink);
}
.aeo-cta__secondary:hover { background: var(--aeo-ink); color: #fff; }
.aeo-cta__note { margin: 16px 0 0; font-size: 13px; color: var(--aeo-body); }

/* --------------------------------------------------------------------------
   Article body typography — long-form pages need a comfortable measure
   -------------------------------------------------------------------------- */

.aeo-article { max-width: var(--aeo-measure); }
.aeo-article h2 { margin: 44px 0 16px; font-size: 28px; line-height: 1.3; color: var(--aeo-ink); scroll-margin-top: 100px; }
.aeo-article h3 { margin: 32px 0 12px; font-size: 21px; line-height: 1.35; color: var(--aeo-ink); scroll-margin-top: 100px; }
.aeo-article p  { margin: 0 0 18px; font-size: 17px; line-height: 1.75; color: var(--aeo-body); }
.aeo-article ul,
.aeo-article ol { margin: 0 0 22px; padding-left: 22px; font-size: 17px; line-height: 1.75; color: var(--aeo-body); }
.aeo-article li { margin-bottom: 9px; }
.aeo-article a  { color: var(--aeo-accent-ink); text-underline-offset: 3px; }
.aeo-article img { max-width: 100%; height: auto; border-radius: var(--aeo-radius); }
.aeo-article figure { margin: 32px 0; }
.aeo-article figcaption { margin-top: 10px; font-size: 14px; font-style: italic; color: var(--aeo-body); }

/* --------------------------------------------------------------------------
   Related links (internal linking module)
   -------------------------------------------------------------------------- */

.aeo-related { margin: 48px 0; }
.aeo-related h2 { margin: 0 0 18px; font-size: 22px; color: var(--aeo-ink); }
.aeo-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}
.aeo-related__card {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--aeo-line);
	border-radius: var(--aeo-radius);
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}
.aeo-related__card:hover { border-color: var(--aeo-accent); background: var(--aeo-surface); }
.aeo-related__card strong { display: block; color: var(--aeo-ink); font-size: 16px; margin-bottom: 5px; }
.aeo-related__card span   { display: block; color: var(--aeo-body); font-size: 13.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Print — patients genuinely print recovery timelines
   -------------------------------------------------------------------------- */

@media print {
	.main-header, .main-footer, .aeo-cta, .aeo-toc, .skip-to-content { display: none !important; }
	.aeo-faq__item { break-inside: avoid; }
	.aeo-faq__answer { display: block !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}