/* =====================================================================
BestPetCareTips — Reusable Article Template
---------------------------------------------------------------------
Content-agnostic visual template for editorial articles. Extracted
from the approved Dog Health prototype (Phase 6H) into a shared,
reuse-ready stylesheet.
USAGE
Link this file AFTER /assets/css/styles.css so equal-specificity
rules win by source order:
Then structure the article body as:
…
BUILDING BLOCKS (all optional, use what the article needs)
.art-head / .art-eyebrow / .art-meta / .lede / .art-intro — header & lede
.art-answer (+ .art-answer__label) — short-answer / key-takeaway box
.art-toc (+ .art-toc__title/__intro/__list) — "on this page" contents card
.art-section — article section (h2 + prose)
.art-list (+ .art-list--feature / .art-list--warn) — styled lists
.art-safety (+ .art-safety__label) — safety / important-note callout
.art-faq (used with base .qa; native /) — FAQ accordion, no JavaScript
.art-guides / .art-guide-card (+ __title/__desc/__cta) — related-guide cards
.art-endnote — closing / end note
NOTES
- Reuses existing design tokens only (--g-core, --g-deep, --g-mid,
--mint, --gold-1, --line, --grey-bg, --ink, --ink-soft, --muted,
--cta). No new tokens, fonts, libraries, or JavaScript.
- The FAQ builds on the site's base .qa/summary component and only
enhances it; it injects no FAQPage schema. Schema stays page-specific.
- This stylesheet defines presentation only. It hardcodes no article
titles, wording, images, links, or product/affiliate content — those
remain per-article data in each page's HTML.
===================================================================== */
/* ---- Reading column & base typographic rhythm ---- */
.article-doc{max-width:824px;margin-inline:auto}
.article-doc.prose p{font-size:1.075rem;line-height:1.75;color:var(--ink-soft);margin:0 0 1.2rem}
.article-doc.prose p strong{color:var(--ink);font-weight:700}
.article-doc.prose > p,.article-doc .art-section > p{max-width:70ch}
.article-doc.prose a{color:var(--g-deep);text-decoration:underline;text-decoration-color:rgba(15,74,94,.32);text-underline-offset:2px;text-decoration-thickness:1.5px;transition:color .15s ease,text-decoration-color .15s ease}
.article-doc.prose a:hover{color:var(--g-core);text-decoration-color:currentColor}
/* ---- Article header ---- */
.art-head{max-width:100%;border-bottom:1px solid var(--line);padding-bottom:1.5rem;margin-bottom:1.7rem}
.art-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--g-core);background:var(--mint);padding:.34rem .8rem;border-radius:999px;margin:0 0 .95rem}
.article-doc h1{margin:.1rem 0 .7rem}
.art-meta{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem;margin:0 0 1.15rem}
.art-meta::before{content:"";width:1.05rem;height:1.05rem;flex:0 0 auto;background:var(--g-mid);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.58z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.58z'/%3E%3C/svg%3E") center/contain no-repeat}
.article-doc .lede{font-size:1.24rem;line-height:1.6;color:var(--ink);max-width:100%;margin:0}
.art-intro{font-size:1.115rem !important;color:var(--ink) !important}
/* ---- Hero & inline images (760px desktop cap preserved) ---- */
.article-doc .post-hero{max-width:760px;margin:1.6rem auto 2.3rem}
.article-doc .post-hero img{border-radius:14px;box-shadow:0 10px 30px rgba(18,39,51,.14)}
/* ---- Sections & headings ---- */
.art-section{padding-top:2.3rem;margin-top:2.3rem;border-top:1px solid var(--line)}
.art-section:first-of-type{border-top:0;margin-top:1.1rem;padding-top:0}
.article-doc h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,1.95rem);line-height:1.22;color:#122733;letter-spacing:-.01em;margin:0 0 .95rem;position:relative;padding-left:1rem}
.article-doc h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--g-core),var(--g-mid))}
/* ---- Polished lists ---- */
.art-list{list-style:none;padding:0;margin:1.15rem 0 1.35rem;display:grid;gap:.72rem}
.art-list li{position:relative;padding-left:1.95rem;line-height:1.62}
.art-list--feature li::before{content:"";position:absolute;left:0;top:.28em;width:1.2rem;height:1.2rem;background:var(--mint);border-radius:50%}
.art-list--feature li::after{content:"";position:absolute;left:.34rem;top:.52em;width:.52rem;height:.28rem;border-left:2px solid var(--g-core);border-bottom:2px solid var(--g-core);transform:rotate(-45deg)}
/* ---- "Short answer" / key-takeaway box ---- */
.art-answer{background:linear-gradient(180deg,#f3f9fb,#e9f3f6);border:1px solid #cfe6ec;border-left:5px solid var(--g-core);border-radius:12px;padding:1.3rem 1.45rem;margin:1.35rem 0}
.art-answer__label{display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g-deep);margin:0 0 .55rem !important}
.art-answer__label::before{content:"";width:1.1rem;height:1.1rem;flex:0 0 auto;background:var(--g-core);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.art-answer p{color:var(--ink) !important;margin:0 !important}
/* ---- "On this page" contents card ---- */
.art-toc{background:var(--grey-bg);border:1px solid var(--line);border-radius:14px;padding:1.35rem 1.5rem;margin:1.9rem 0}
.art-toc__title{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g-deep);margin:0 0 .65rem}
.art-toc__title::before{content:"";width:1.05rem;height:1.05rem;flex:0 0 auto;background:var(--g-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'/%3E%3C/svg%3E") center/contain no-repeat}
.art-toc__intro{font-size:.99rem !important;margin:0 0 .85rem !important;color:var(--ink-soft) !important}
.art-toc__list{list-style:none;padding:0;margin:0;display:grid;gap:.58rem}
@media(min-width:620px){.art-toc__list{grid-template-columns:1fr 1fr;gap:.58rem 1.7rem}}
.art-toc__list li{position:relative;padding-left:1.35rem;font-size:.98rem;line-height:1.5;color:var(--ink-soft)}
.art-toc__list li::before{content:"";position:absolute;left:.05rem;top:.5em;width:.5rem;height:.5rem;border-right:2px solid var(--g-mid);border-bottom:2px solid var(--g-mid);transform:rotate(-45deg)}
.art-toc__list a{font-weight:600}
/* ---- Safety callout (restrained amber, not alarming red) ---- */
.art-safety{background:#fff8ec;border:1px solid #f2dca8;border-left:5px solid var(--gold-1);border-radius:12px;padding:1.25rem 1.45rem 1.35rem;margin:1.35rem 0}
.art-safety__label{display:flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a5a12;margin:0 0 .75rem !important}
.art-safety__label::before{content:"";width:1.25rem;height:1.25rem;flex:0 0 auto;background:var(--gold-1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E") center/contain no-repeat}
.art-safety .art-list{margin:0}
.art-list--warn li{padding-left:1.7rem}
.art-list--warn li::before{content:"";position:absolute;left:.15rem;top:.5em;width:.6rem;height:.6rem;border-radius:50%;background:var(--gold-1)}
/* ---- FAQ accordion (native , enhanced) ---- */
.art-faq{max-width:100%;margin-top:1.5rem}
.art-faq details{border:1px solid var(--line);border-radius:14px;margin-bottom:.85rem;background:#fff;box-shadow:0 2px 10px rgba(18,39,51,.05);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}
.art-faq details[open]{border-color:#cfe6ec;box-shadow:0 8px 24px rgba(18,39,51,.09)}
.art-faq summary{padding:1.1rem 3.5rem 1.1rem 1.35rem;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.art-faq summary:hover,.art-faq details[open] summary{color:var(--g-deep)}
.art-faq summary::after{right:1.2rem;background:var(--g-core)}
.art-faq .qa__a{padding:0 1.35rem 1.2rem}
.art-faq .qa__a p{font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
/* ---- Related-guide cards ---- */
.art-guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:1rem;margin-top:1.4rem}
.art-guide-card{display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.25rem;text-decoration:none !important;box-shadow:0 2px 10px rgba(18,39,51,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.art-guide-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,39,51,.12);border-color:#cfe6ec}
.art-guide-card__title{font-weight:700;font-size:1.08rem;color:var(--g-deep);line-height:1.25}
.art-guide-card__desc{font-size:.96rem;color:var(--ink-soft);line-height:1.55;flex:1 1 auto}
.art-guide-card__cta{font-size:.85rem;font-weight:700;color:var(--g-core);letter-spacing:.02em;margin-top:.15rem}
.art-guide-card:hover .art-guide-card__cta{color:var(--cta)}
/* ---- Closing medical note ---- */
.art-endnote{max-width:100% !important;background:var(--mint);border-radius:12px;padding:1.15rem 1.35rem;color:var(--ink-soft) !important;margin:2.1rem 0 0 !important;font-size:1rem !important}
.art-endnote strong{color:var(--g-deep)}
/* ---- Focus visibility ---- */
.article-doc a:focus-visible,.art-guide-card:focus-visible,.art-faq summary:focus-visible{outline:3px solid var(--g-core);outline-offset:2px;border-radius:6px}
/* ---- Respect reduced-motion ---- */
@media(prefers-reduced-motion:reduce){
.art-guide-card,.art-faq details,.article-doc .post-hero img,.article-doc.prose a{transition:none}
.art-guide-card:hover{transform:none}
}
/* ---- Responsive ---- */
@media(max-width:640px){
.article-doc.prose p{font-size:1.03rem;line-height:1.7}
.article-doc .lede{font-size:1.12rem}
.art-answer,.art-safety,.art-toc{padding:1.1rem 1.15rem}
.art-section{padding-top:1.9rem;margin-top:1.9rem}
.article-doc h2{padding-left:.85rem}
.art-guides{grid-template-columns:1fr}
.art-list li{padding-left:1.75rem}
}