/* ============================================================
   VetNet — עיצוב מאמרי תוכן (SEO)
   ============================================================ */
:root {
  --teal: #142347; --teal-dark: #0b1530; --teal-light: #edf2fb;
  --gold: #ffb400; --gold-light: #fff3d1;
  --ink: #142347; --ink-soft: #5b6b8c; --line: #e2e8f2; --bg: #f4f6fb;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Heebo', 'Segoe UI', Arial, sans-serif; direction: rtl; background: #fff; color: var(--ink); line-height: 1.75; }
a { color: var(--teal); }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
       border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 10px 6vw; }
.nav .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav .brand img { height: 38px; }
.nav .wordmark { direction: ltr; font-size: 1.3rem; font-weight: 900; color: var(--teal); }
.nav .wordmark b { color: var(--gold); }
.nav .sp { flex: 1; }
.nav .cta { background: var(--gold); color: var(--teal); padding: 9px 20px; border-radius: 99px;
            font-weight: 800; text-decoration: none; font-size: .92rem; white-space: nowrap; }

.hero { background: linear-gradient(160deg, var(--teal-dark), var(--teal)); color: #fff; padding: 46px 6vw 40px; }
.hero .inner { max-width: 780px; margin: 0 auto; }
.hero .kicker { color: var(--gold); font-weight: 800; font-size: .88rem; letter-spacing: .5px; margin-bottom: 8px; }
.hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; line-height: 1.25; }
.hero .sub { color: #c3d0ea; margin-top: 12px; font-size: 1.05rem; }
.hero .meta { color: #8fa3c9; font-size: .82rem; margin-top: 14px; }

article { max-width: 780px; margin: 0 auto; padding: 40px 6vw 60px; }
article h2 { font-size: 1.5rem; font-weight: 800; margin: 34px 0 12px; color: var(--teal);
             border-right: 5px solid var(--gold); padding-right: 12px; }
article h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; }
article p { margin-bottom: 15px; }
article ul, article ol { margin: 0 20px 18px 0; }
article li { margin-bottom: 8px; }
article strong { color: var(--teal); }

.toc { background: var(--teal-light); border-radius: 14px; padding: 18px 22px; margin-bottom: 28px; }
.toc b { display: block; margin-bottom: 8px; }
.toc a { display: block; padding: 3px 0; font-size: .95rem; }

.box { background: var(--bg); border-radius: 14px; padding: 18px 22px; margin: 22px 0; }
.box.gold { background: var(--gold-light); border-right: 5px solid var(--gold); }
.box b { display: block; margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .93rem; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: right; }
th { background: var(--teal-light); font-weight: 800; }
td.yes { color: #16a34a; font-weight: 800; text-align: center; }
td.no  { color: #c3cadb; font-weight: 800; text-align: center; }

.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 1.02rem; }
.faq p { margin-top: 8px; color: var(--ink-soft); }

.cta-block { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff;
             border-radius: 20px; padding: 30px 28px; margin: 36px 0 10px; text-align: center; }
.cta-block h3 { font-size: 1.35rem; color: #fff; margin-bottom: 8px; }
.cta-block p { color: #c3d0ea; margin-bottom: 18px; }
.cta-block a { display: inline-block; background: var(--gold); color: var(--teal); padding: 14px 32px;
               border-radius: 99px; font-weight: 900; text-decoration: none; font-size: 1.05rem; }

.related { max-width: 780px; margin: 0 auto; padding: 0 6vw 50px; }
.related h3 { font-size: 1.1rem; margin-bottom: 12px; }
.related a { display: block; background: var(--bg); border-radius: 12px; padding: 14px 18px;
             margin-bottom: 10px; text-decoration: none; font-weight: 600; }
.related a:hover { background: var(--teal-light); }

footer { background: var(--teal-dark); color: #8fa3c9; text-align: center; padding: 26px 6vw; font-size: .85rem; }
footer a { color: var(--gold); }
@media (max-width: 700px) { .nav .wordmark { font-size: 1.1rem; } article { padding: 28px 6vw 44px; } }