/* ════════════════════════════════════════════
   pages.css — Content pages generated by scripts/build-pages.js
   Harmony Féminine
   Uses only the palette tokens from main.css / theme.css.
   ════════════════════════════════════════════ */

/* ── Navbar (keep labels on one line) ── */
.navbar .nav-link { white-space: nowrap; }

/* ── Hero ── */
.hf-page-hero { padding: 110px 0 56px; }
.hf-page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.2; margin-bottom: 1rem; }
.hf-lead { font-size: 1.15rem; line-height: 1.8; max-width: 720px; margin: 0; }

/* ── Breadcrumb ── */
.hf-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; font-size: .8rem; }
.hf-breadcrumb li + li::before { content: "›"; margin-right: .4rem; opacity: .6; }
.hf-breadcrumb a { color: var(--bs-primary); text-decoration: none; }
.hf-breadcrumb a:hover { text-decoration: underline; }

/* ── Article ── */
.hf-page-body { padding-top: 56px; padding-bottom: 40px; }
.hf-article { font-size: 1.05rem; line-height: 1.85; color: var(--bs-body-color); }
.hf-article h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; margin: 2.5rem 0 1rem; }
.hf-article h2:first-child { margin-top: 0; }
.hf-article h3 { font-size: 1.3rem; margin: 1.75rem 0 .6rem; }
.hf-article p { margin-bottom: 1.1rem; }
.hf-article ul, .hf-article ol { padding-left: 1.3rem; margin-bottom: 1.25rem; }
.hf-article li { margin-bottom: .5rem; }
.hf-article li::marker { color: var(--bs-primary); }
.hf-article a { color: var(--bs-primary); }
.hf-article a:hover { color: var(--bs-link-hover-color); }
.hf-byline { font-size: .85rem; opacity: .85; margin-bottom: 2rem !important; }
.hf-byline a { text-decoration: none; }

.hf-steps { counter-reset: step; list-style: none; padding-left: 0 !important; }
.hf-steps li { counter-increment: step; position: relative; padding: .9rem 1rem .9rem 3.6rem; margin-bottom: .75rem; background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.hf-steps li::before { content: counter(step); position: absolute; left: 1rem; top: .85rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: .9rem; display: flex; align-items: center; justify-content: center; }

.hf-quote { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--bs-primary); border-left: 3px solid var(--bs-secondary); padding-left: 1.25rem; margin: 2rem 0; }

.hf-portrait { float: right; width: 42%; max-width: 300px; margin: 0 0 1.5rem 2rem; }
.hf-portrait img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--bs-border-radius-lg); box-shadow: 0 20px 60px rgba(var(--bs-primary-rgb), .18); }
.hf-portrait figcaption { font-size: .8rem; text-align: center; margin-top: .5rem; opacity: .8; }
@media (max-width: 576px) { .hf-portrait { float: none; width: 100%; max-width: none; margin: 0 0 1.5rem; } }

.hf-address { font-style: normal; background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 1.25rem 1.5rem; line-height: 1.8; }

/* ── FAQ ── */
.hf-faq { margin-top: 3rem; padding: 0; }
.hf-faq details { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-card-bg, #fff); margin-bottom: .75rem; }
.hf-faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; list-style: none; position: relative; padding-right: 3rem; }
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: .8rem; font-size: 1.3rem; color: var(--bs-primary); }
.hf-faq details[open] summary::after { content: "–"; }
.hf-faq-answer { padding: 0 1.25rem 1.1rem; }

/* ── Related / symptom cards ── */
.hf-related { margin-top: 3rem; }
.hf-symptom-grid { margin: 1.5rem 0 2rem; }
.hf-related-card { display: block; height: 100%; padding: 1.25rem 1.4rem; background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); text-decoration: none; transition: all .3s; }
.hf-related-card:hover { transform: translateY(-4px); border-color: var(--bs-secondary); box-shadow: 0 16px 40px rgba(var(--bs-primary-rgb), .14); }
.hf-related-title { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--bs-dark); margin-bottom: .35rem; }
.hf-related-title i { color: var(--bs-primary); margin-right: .35rem; }
.hf-related-text { display: block; font-size: .9rem; line-height: 1.6; color: var(--bs-body-color); }

/* ── Sidebar ── */
.hf-sticky { position: sticky; top: 100px; }
.hf-author-card { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-card-bg, #fff); text-decoration: none; color: var(--bs-body-color); }
.hf-author-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hf-author-card strong { display: block; font-family: var(--font-display); font-weight: 400; color: var(--bs-dark); font-size: 1.1rem; }
.hf-author-card span span { font-size: .82rem; }

/* ── Dark mode ── */
[data-bs-theme="dark"] .hf-steps li,
[data-bs-theme="dark"] .hf-address,
[data-bs-theme="dark"] .hf-faq details,
[data-bs-theme="dark"] .hf-related-card,
[data-bs-theme="dark"] .hf-author-card { background: #2A1E1C; border-color: var(--bs-info); }