/* ============================================================
   Content / article template — pairs with foundation.css
   Reuses .two-col-layout, .term-sidebar, .side-box, .toc-list,
   .key-facts, .faq-item, .term-trust-bar, .takeaway-box, .vet-warning
   from foundation.css so this file only holds what's unique to
   long-form articles (header, byline, hazard cards, tables).
   ============================================================ */

.art-header{max-width:var(--container);margin:0 auto;padding:2.5rem 2rem 0}
.art-eyebrow{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:.7rem;display:block}
.art-header h1{font-size:2.35rem;line-height:1.18;margin-bottom:1rem;max-width:820px}
.art-subtitle{font-size:1.05rem;color:var(--on-surface-variant);max-width:720px;margin-bottom:1.75rem}
.art-hero-img{border-radius:14px;overflow:hidden;margin-bottom:1.75rem;max-height:440px}
.art-hero-img img{width:100%;height:100%;object-fit:cover;max-height:440px}

.art-byline{max-width:var(--container);margin:0 auto;padding:0 2rem 1.75rem;display:flex;align-items:center;gap:.9rem;border-bottom:1px solid var(--outline)}
.art-byline img{border-radius:50%;object-fit:cover;flex-shrink:0}
.art-byline-text{font-size:.9rem;color:var(--on-surface-variant)}
.art-byline-text a{font-weight:700;color:var(--primary)}
.art-byline-text .sep{margin:0 .4rem}
.art-byline-text .meta{display:block;font-size:.83rem;margin-top:.15rem}

.art-main h2{font-size:1.5rem;margin:2.3rem 0 1rem;scroll-margin-top:90px}
.art-main h3{font-size:1.12rem;margin:1.6rem 0 .7rem}
.art-main > p, .art-main li{font-size:.97rem;line-height:1.75;color:var(--on-surface)}
.art-main > p{margin-bottom:1.1rem}
.art-main ul, .art-main ol{margin:0 0 1.2rem 1.3rem}
.art-main ul li{list-style:disc;margin-bottom:.55rem}
.art-main ol li{list-style:decimal;margin-bottom:.55rem}
.art-main a{color:var(--primary);font-weight:600;text-decoration:underline;text-decoration-color:var(--outline-strong)}
.art-main strong{color:var(--on-surface)}

/* hazard / info card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin:1.25rem 0 1.75rem}
.info-card{border:1px solid var(--outline);border-radius:10px;padding:1.1rem}
.info-card .icon{color:var(--danger);margin-bottom:.5rem}
.info-card h3{font-size:.98rem;margin:0 0 .4rem}
.info-card p{font-size:.86rem;color:var(--on-surface-variant);line-height:1.55}

/* generic content table */
.art-main table{width:100%;border-collapse:collapse;margin:1.25rem 0 1.75rem;font-size:.9rem}
.art-main table th{background:var(--surface-container);text-align:left;padding:.7rem .9rem;font-weight:700;border:1px solid var(--outline)}
.art-main table td{padding:.7rem .9rem;border:1px solid var(--outline);color:var(--on-surface-variant)}
.art-main table tr td:first-child{font-weight:700;color:var(--on-surface);white-space:nowrap}

/* trusted resources callout */
.authority-box{background:var(--surface-container);border-left:4px solid var(--primary);border-radius:0 8px 8px 0;padding:1rem 1.25rem;margin:1.75rem 0;font-size:.88rem;color:var(--on-surface-variant)}
.authority-box strong{color:var(--on-surface)}
.authority-box a{color:var(--primary);font-weight:600}

/* important / never-do callout (amber) */
.callout-warn{background:#fdf6ec;border:1px solid #f0dfb8;border-radius:8px;padding:1.1rem 1.4rem;margin:1.25rem 0 1.75rem}
.callout-warn strong{display:block;margin-bottom:.35rem;color:#8a6116}
.callout-warn p{margin:0;font-size:.9rem;color:var(--on-surface-variant)}

/* quick facts / breed stats reuses .key-facts from foundation, add a heading style */
.facts-heading{font-size:1rem;font-weight:700;margin-bottom:.75rem}

/* continue reading control (for very long guides) */
.continue-reading{display:flex;justify-content:center;margin:1.5rem 0 2.5rem}

/* ---- simple utility pages (about, contact, author bio) ---- */
.simple-page{max-width:820px;margin:0 auto;padding:2.5rem 2rem 3.5rem}
.simple-page h2{font-size:1.4rem;margin:2rem 0 .9rem}
.simple-page h3{font-size:1.1rem;margin:1.4rem 0 .6rem}
.simple-page p{font-size:.97rem;line-height:1.75;color:var(--on-surface);margin-bottom:1.05rem}
.simple-page ul,.simple-page ol{margin:0 0 1.1rem 1.3rem}
.simple-page li{font-size:.96rem;line-height:1.7;margin-bottom:.5rem;list-style:disc;color:var(--on-surface)}
.simple-page a{color:var(--primary);font-weight:600}
.highlight-box{background:var(--surface-container);border-radius:10px;padding:1.4rem 1.6rem;margin:1.5rem 0}
.highlight-box h3{margin-top:0}

.contact-grid{max-width:var(--container);margin:0 auto;padding:2.5rem 2rem 3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:flex;flex-direction:column;gap:1.25rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-icon{width:40px;height:40px;border-radius:50%;background:var(--surface-container);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.85rem;font-weight:700}
.form-group input,.form-group textarea{border:1px solid var(--outline-strong);border-radius:8px;padding:.7rem .9rem;font-family:var(--sans);font-size:.92rem}
.form-group input:focus,.form-group textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
.contact-form button{align-self:flex-start;background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.8rem 1.6rem;font-family:var(--sans);font-weight:700;font-size:.92rem;cursor:pointer}
.contact-form button:hover{background:var(--primary-dark)}

.author-hero{max-width:var(--container);margin:0 auto;padding:2.5rem 2rem 0}
.author-container{max-width:var(--container);margin:0 auto;padding:1.5rem 2rem 3.5rem;display:flex;gap:2.5rem;align-items:flex-start}
@media(max-width:760px){.author-container{flex-direction:column}}
.author-image img{border-radius:50%;width:160px;height:160px;object-fit:cover;flex-shrink:0}
.author-content h2{font-size:1.3rem;margin:1.75rem 0 .8rem}
.author-content p{font-size:.97rem;line-height:1.75;color:var(--on-surface);margin-bottom:1rem}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.25rem;margin-top:1rem}
.book-card{border:1px solid var(--outline);border-radius:10px;padding:1rem;text-align:center}
.book-card img{border-radius:6px;margin-bottom:.6rem}
.social-links{display:flex;gap:.7rem;margin-top:1rem}
.social-links a{width:36px;height:36px;border:1px solid var(--outline-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant)}

/* ---- overrides for legacy one-off pages that still load the old site.css
   alongside the new stylesheets, so a few old rules win on specificity ---- */
.navbar .nav-links a{text-transform:none !important;letter-spacing:normal !important}
.breadcrumb-container .current, .breadcrumb span.current, .breadcrumb-container span:last-child{color:var(--on-surface) !important;font-weight:600 !important;opacity:1 !important}
.hub-hero{background:var(--surface-alt);border-bottom:1px solid var(--outline);padding:3rem 2rem}
.hub-hero-inner{max-width:var(--container);margin:0 auto}
.hub-hero h1{font-size:2.3rem;margin-bottom:.7rem}
.hub-hero p{color:var(--on-surface-variant);font-size:1rem;max-width:620px}
.hub-main{max-width:var(--container);margin:0 auto;padding:2.5rem 2rem 3.5rem}
.hub-section-head{margin-bottom:1.5rem}
.hub-section-head h2{font-size:1.5rem;margin-bottom:.3rem}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}
@media(max-width:900px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hub-grid{grid-template-columns:1fr}}
.hub-card{border:1px solid var(--outline);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.hub-card img{width:100%;height:150px;object-fit:cover}
.hub-card-body{padding:1.1rem 1.25rem}
.hub-card .cat-badge{display:inline-block;font-size:.7rem;font-weight:700;color:#fff;background:var(--primary);padding:.2rem .55rem;border-radius:4px;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.03em}
.hub-card h3{font-size:1rem;margin-bottom:.5rem;line-height:1.35}
.hub-card a.read-more{font-size:.85rem;font-weight:700;color:var(--primary)}
.hub-card .breed-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.6rem;font-size:.78rem;color:var(--on-surface-variant)}
.hub-card .breed-meta span{display:flex;align-items:center;gap:.3rem}
.hub-card p{font-size:.85rem;color:var(--on-surface-variant);margin-bottom:.7rem;line-height:1.5}

.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:2.5rem}
@media(max-width:900px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topic-grid{grid-template-columns:1fr}}
.topic-card{border:1px solid var(--outline);border-radius:12px;padding:1.4rem;display:block}
.topic-card:hover{border-color:var(--primary)}
.topic-card .icon{width:42px;height:42px;border-radius:50%;background:var(--surface-container);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
.topic-card h3{font-size:1rem;margin-bottom:.4rem}
.topic-card p{font-size:.85rem;color:var(--on-surface-variant);margin-bottom:.7rem;line-height:1.5}
.topic-card .topic-link{font-size:.85rem;font-weight:700;color:var(--primary)}