/* HORET Guide — the article reader and the tree index.
   Same tokens as the provider surfaces, wider measure: these pages are read
   rather than scanned, so the body column is set for a long sitting. */
:root{--teal:#0f766e;--deep:#063f3d;--ink:#172a43;--slate:#64716e;--line:#dfe8e5;--paper:#fbfaf6;--coral:#ff7a59;--coral-ink:#b85840;--yellow:#f4b860;--star:#b07510;--container:min(1080px,calc(100% - 40px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Alexandria,"Plus Jakarta Sans",sans-serif;line-height:1.7}
body[data-lang=en]{direction:ltr}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.lang-en{display:none}
body[data-lang=en] .lang-ar{display:none}
body[data-lang=en] .lang-en{display:inline}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guide-container{width:var(--container);margin-inline:auto}

.guide-header{height:76px;background:rgba(251,250,246,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.header-inner img{width:126px}
.header-inner nav{display:flex;align-items:center;gap:23px;font-size:10px;font-weight:600}
.header-inner button{border:1px solid var(--line);background:#fff;color:var(--teal);width:38px;height:38px;border-radius:50%;font-size:10px;cursor:pointer}
.primary-button,.quiet-button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;min-height:47px;padding:11px 21px;font-size:10px;font-weight:700}
.primary-button{background:var(--teal);color:#fff;box-shadow:0 10px 26px rgba(15,118,110,.18)}
.primary-button:hover{background:var(--deep)}
.quiet-button{background:#fff;border:1px solid var(--line);color:var(--teal)}

/* ---- article ---- */
.article-head{padding:52px 0 0}
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:9px;color:var(--teal);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.trail-sep{color:#6b7875}
.article-head h1{font-size:clamp(38px,5vw,62px);line-height:1.16;letter-spacing:-.045em;margin:14px 0 14px;font-weight:600;max-width:16ch}
.article-intro{font-size:14px;color:var(--slate);line-height:1.85;max-width:62ch}
.article-intro p{margin:0 0 12px}
.review-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.review-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-size:9px;color:var(--slate)}
.review-chip strong{color:var(--ink);font-weight:650;margin-inline-start:4px}
.review-chip.is-vet{border-color:#bfe0d6;background:#f1f8f5;color:var(--teal)}
.topic-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.topic-chip{background:#eef3f1;border-radius:999px;padding:6px 12px;font-size:9px;color:var(--slate)}
.disclaimer{margin:26px 0 0;padding:15px 18px;border-radius:16px;background:#fff4e0;border-inline-start:3px solid var(--yellow);color:#7c5a12;font-size:10px;line-height:1.85}
.attribution{margin:26px 0 0;padding:15px 18px;border-radius:16px;background:#eef4f3;border-inline-start:3px solid var(--teal);color:#28403c;font-size:10px;line-height:1.85}
.attribution--vet_reviewed{background:#eaf5ef;border-inline-start-color:#2f7d52;color:#22402f}

.index-lead{font-size:10px;color:var(--slate);margin:0 0 20px}
.section-grid{display:grid;gap:12px;padding-bottom:70px}
.section-block h2{margin:0;font-size:inherit;font-weight:inherit}
.section-door{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:20px;background:#fff;cursor:pointer;text-align:start;font:inherit;color:var(--deep)}
.section-door:hover,.section-door:focus-visible{border-color:var(--teal)}
.section-door img{width:46px;height:46px;object-fit:cover;border-radius:14px;flex:none}
.door-dot{width:46px;height:46px;border-radius:14px;background:#eef4f3;flex:none}
.door-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.door-title{font-size:13px;font-weight:700;line-height:1.4}
.door-count{font-size:9px;color:var(--slate)}
.door-chevron{width:9px;height:9px;border-inline-end:2px solid var(--slate);border-block-end:2px solid var(--slate);transform:rotate(-45deg);flex:none;transition:transform .18s ease}
[dir="rtl"] .door-chevron{transform:rotate(135deg)}
.section-door[aria-expanded="true"] .door-chevron{transform:rotate(45deg)}
.section-panel{padding:14px 4px 4px}

.breed-strip{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:-8px 0 18px;padding-inline-start:4px}
.breed-label{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:700}
.breed-chip{font-size:9px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--deep);line-height:1.4}
.breed-chip:hover,.breed-chip:focus-visible{border-color:var(--teal);color:var(--teal)}
.breed-count{font-size:8px;color:var(--teal);font-weight:700}
.section-sources{margin:14px 0 0;font-size:9px;line-height:1.9;color:var(--slate)}
.section-sources .sources-label{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:8px;color:var(--slate);margin-inline-end:7px}
.section-sources a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}

.article-image{width:100%;height:clamp(220px,34vw,380px);object-fit:cover;border-radius:28px 28px 70px 28px;margin-top:30px}

.article-layout{display:grid;grid-template-columns:230px 1fr;gap:48px;align-items:start;padding-top:56px;padding-bottom:80px}
.section-nav{position:sticky;top:100px;border-inline-start:2px solid var(--line);padding-inline-start:18px}
.nav-title{font-size:8px;color:var(--teal);font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px}
.section-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:s}
.section-nav li{counter-increment:s}
.section-nav a{font-size:9px;color:var(--slate);line-height:1.6;display:block}
.section-nav a:hover{color:var(--teal)}
.section-nav li:before{content:counter(s,decimal-leading-zero);font-size:8px;color:#6b7875;margin-inline-end:7px}

.article-body{display:grid}
.article-section{display:grid;grid-template-columns:55px 1fr;gap:24px;padding:0 0 46px;margin-bottom:46px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.article-section:last-child{border-bottom:0}
.section-index{font-size:9px;color:#5f6b68;padding-top:11px}
.article-section h2{font-size:27px;line-height:1.35;letter-spacing:-.035em;margin:0 0 8px;font-weight:600}
.health-flag{display:inline-block;background:#f1f8f5;color:var(--teal);border-radius:999px;padding:5px 11px;font-size:8px;font-weight:700;margin-bottom:12px}
.prose{font-size:11px;color:var(--slate);line-height:1.95;max-width:68ch}
.prose p{margin:0 0 13px}
.prose p:last-child{margin-bottom:0}
.article-section.is-health .prose{border-inline-start:2px solid #e4efea;padding-inline-start:16px}

.sources .section-index{color:var(--teal)}
.sources-note{font-size:9px;color:var(--slate);margin:0 0 16px;max-width:60ch}
.source-list{margin:0;padding-inline-start:18px;display:grid;gap:12px;font-size:10px}
.source-list a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.source-list small{display:block;font-size:8px;color:var(--slate);margin-top:2px}

.article-foot{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:80px}
.foot-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 18px 45px rgba(23,42,67,.05)}
.foot-card.quiet{background:transparent;box-shadow:none;border-style:dashed}
.foot-card h2{font-size:21px;letter-spacing:-.03em;margin:0 0 8px;font-weight:600}
.foot-card p{font-size:10px;color:var(--slate);line-height:1.85;margin:0 0 18px}

.missing-article{min-height:calc(100vh - 76px);display:grid;place-content:center;text-align:center}
.missing-article>span{font-size:10px;color:var(--teal)}
.missing-article h1{font-size:42px;margin:8px}
.missing-article p{font-size:11px;color:var(--slate);margin:0 0 24px;max-width:52ch}
.missing-article .primary-button{justify-self:center}

/* ---- index ---- */
.index-hero{padding:70px 0 52px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#f0f6f4,#fff 68%)}
.kicker{font-size:9px;color:var(--teal);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.index-hero h1{font-size:clamp(42px,5.8vw,72px);line-height:1.14;letter-spacing:-.05em;margin:12px 0 14px;font-weight:600}
.index-hero p{font-size:12px;color:var(--slate);line-height:1.9;margin:0;max-width:72ch}
.index-count{font-size:9px!important;color:var(--teal)!important;font-weight:700;margin-top:14px!important}
.index-search{display:block;margin-top:22px;max-width:420px}
.index-search input{width:100%;border:1px solid var(--line);border-radius:999px;padding:12px 18px;background:#fff;outline:none;font-size:10px;font-family:inherit;min-height:46px}
.index-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,118,110,.08)}

.index-body{padding-top:46px;padding-bottom:90px}
.group-block{margin-bottom:50px}
.group-block[hidden]{display:none}
.group-title{font-size:26px;letter-spacing:-.035em;margin:0 0 18px;font-weight:600;display:flex;align-items:baseline;gap:10px}
.group-title small{font-size:9px;color:var(--slate);background:#eef3f1;border-radius:999px;padding:4px 10px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.article-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.25s;display:block}
.article-card[hidden]{display:none}
.article-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(23,42,67,.08)}
.article-card>img{width:100%;height:170px;object-fit:cover}
.card-body{padding:20px}
.card-trail{font-size:8px;color:var(--teal);font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.card-body h3{font-size:18px;line-height:1.4;margin:6px 0 6px;font-weight:600}
.card-body p{font-size:9px;color:var(--slate);line-height:1.8;margin:0;min-height:32px}
.card-foot{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #edf1f0;margin-top:16px;padding-top:12px;font-size:8px;color:var(--slate)}
.vet-flag{background:#f1f8f5;color:var(--teal);border-radius:999px;padding:3px 9px;font-weight:700}
.no-results{font-size:11px;color:var(--slate);text-align:center;padding:40px 0}
.no-results[hidden]{display:none}
.empty-index{min-height:300px;border:1px dashed #cbd9d6;background:#fff;border-radius:24px;display:grid;place-items:center;align-content:center;text-align:center;padding:40px}
.empty-index h2{font-size:26px;margin:0 0 8px;font-weight:600}
.empty-index p{font-size:10px;color:var(--slate);max-width:56ch;margin:0 auto 20px;line-height:1.9}

.guide-footer{border-top:1px solid var(--line);padding:26px 0;font-size:9px;color:var(--slate);text-align:center}

@media(max-width:900px){
  .article-layout{grid-template-columns:1fr;gap:26px}
  .section-nav{position:static;border-inline-start:0;border-top:1px solid var(--line);padding:18px 0 0}
  .section-nav ol{grid-template-columns:1fr 1fr;display:grid}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-foot{grid-template-columns:1fr}
}
@media(max-width:600px){
  :root{--container:calc(100% - 28px)}
  .guide-header{height:66px}
  .header-inner img{width:108px}
  .header-inner nav>a{display:none}
  .article-head{padding-top:28px}
  .article-head h1{font-size:33px;max-width:none}
  .article-intro{font-size:12px}
  .article-image{border-radius:20px 20px 48px 20px}
  .article-layout{padding-top:30px;padding-bottom:50px}
  .section-nav ol{grid-template-columns:1fr}
  .article-section{grid-template-columns:1fr;padding-bottom:32px;margin-bottom:32px}
  .section-index{display:none}
  .article-section h2{font-size:23px}
  .prose{font-size:12px}
  .index-hero{padding:36px 0 32px}
  .index-hero h1{font-size:38px}
  .index-hero p{font-size:11px}
  .article-grid{grid-template-columns:1fr}
  .group-title{font-size:22px}
  .card-body h3{font-size:17px}
  .card-body p{font-size:11px}
}

/* The article's own language. Shown only to a reader whose interface language
   is not the one the article was written in — otherwise it is noise. */
.language-note{margin:12px 0 0;font-size:9px;color:var(--slate);background:#eef3f1;border-radius:12px;padding:9px 13px;display:inline-block}
body:not([data-lang=en]) .language-note[data-article-language=ar],
body[data-lang=en] .language-note[data-article-language=en]{display:none}

/* ===== Accessibility ===========================================
   One deliberate focus ring, and motion that yields to a system preference. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The structured half of an article: facts with their citations, the starter
   checklist, the shopping list, the breed links and the vet specialty. Risk is
   carried by a border and a label, never by colour alone. */
.fact-group{margin:0 0 22px}
.fact-group h3{font-size:16px;margin:0 0 10px;color:var(--slate,#5f6f82)}
.fact-group>ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fact{border-inline-start:3px solid var(--line,#dfe7e5);padding:10px 14px;background:var(--mist,#f1f5f3);border-radius:0 12px 12px 0}
html[dir=ltr] .fact{border-radius:12px 0 0 12px}
.fact.risk-urgent{border-inline-start-color:var(--danger,#bc4935);background:#fdf2ef}
.fact.risk-high{border-inline-start-color:var(--coral-ink,#b85840)}
.fact.risk-medium{border-inline-start-color:var(--star,#b07510)}
.fact p{margin:0}
.fact-value{margin-top:6px!important;font-weight:600;color:var(--teal-900,#064b4b)}
.fact-breed{display:inline-block;font-size:11px;font-weight:600;background:var(--teal,#0f766e);color:#fff;border-radius:999px;padding:2px 9px;margin-bottom:6px}
.fact-sources{list-style:none;margin:8px 0 0;padding:0;font-size:13px}
.fact-sources li{margin-top:3px}
.fact-sources a{text-decoration:underline}
.fact-sources small{color:var(--slate,#5f6f82);display:block}
.starter-phase{margin:0 0 18px}
.starter-phase h3{font-size:15px;margin:0 0 8px}
.starter-phase ul,.shopping-list{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.breed-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.breed-links a{display:inline-block;border:1px solid var(--line,#dfe7e5);border-radius:999px;padding:6px 16px;background:#fff}
.breed-links a:hover{border-color:var(--teal,#0f766e)}
.welfare-dot{color:var(--danger,#bc4935)}
.welfare-flag{background:#fdf2ef;border-inline-start:3px solid var(--danger,#bc4935);padding:10px 14px;border-radius:0 12px 12px 0}
.vet-link .primary-button{margin-top:10px;display:inline-block}