/* Dandelion Allergy Centre blog. Inherits tokens from /styles.css; the
   :root below is a same-value fallback so pages render standalone too. */
:root{
  --paper:#F5F8F2; --card:#FFFFFF; --mint:#E7F1E8; --line:#DCEAE0;
  --ink:#143B2E; --ink-soft:#4A6B5C;
  --green:#2E9E6B; --green-deep:#1F7E54; --gold:#F2B705; --gold-soft:#FDF3D6;
  --radius:18px; --maxw:1120px;
  --shadow:0 1px 2px rgba(20,59,46,.05), 0 18px 40px rgba(20,59,46,.07);
  --display:"Fraunces",Georgia,serif; --body:"Inter",system-ui,sans-serif;
}

/* Header */
.bheader{position:sticky;top:0;z-index:40;background:rgba(245,248,242,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bnav{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px}
.bbrand{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.bbrand span{color:var(--green-deep)}
.blinks{display:flex;gap:20px;margin-left:auto}
.blinks a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.95rem}
.blinks a:hover,.blinks a.active{color:var(--green-deep)}
.bcta{white-space:nowrap}
.bphone{margin-left:auto;text-decoration:none;color:var(--green-deep);font-weight:700;white-space:nowrap}
.blinks{margin-left:auto}
.blinks + .bphone{margin-left:0}

/* Layout */
.bmain{padding-top:44px;padding-bottom:70px}
.bhero{max-width:720px;margin-bottom:36px}
.bhero h1{font-size:clamp(2rem,4.5vw,3rem);margin:10px 0 12px}
.bhero-sub{color:var(--ink-soft);font-size:1.06rem;margin:0}

/* Index cards */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s ease}
.bcard:hover{transform:translateY(-3px)}
.bcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bcard-body{padding:14px 16px 18px}
.bcard time{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.bcard h2{font-size:1.05rem;margin:6px 0 8px;line-height:1.25}
.bcard p{color:var(--ink-soft);font-size:.86rem;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmore{font-weight:700;color:var(--green-deep);font-size:.85rem}
.bnote{margin-top:30px;color:var(--ink-soft);font-size:.95rem;background:var(--gold-soft);border:1px dashed var(--gold);border-radius:14px;padding:14px 18px;display:inline-block}

/* Article */
.bpost{max-width:760px}
.bpost h1{font-size:clamp(1.9rem,4.2vw,2.7rem);margin:10px 0 10px}
.bmeta{color:var(--ink-soft);font-size:.95rem;margin:0 0 22px}
.bfeatured{width:100%;max-height:520px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:28px}
.bbody{font-size:1.05rem;color:var(--ink)}
.bbody p{margin:0 0 16px}
.bbody h2{font-size:1.5rem;margin:30px 0 12px}
.bbody h3{font-size:1.15rem;margin:22px 0 8px;font-family:var(--body);font-weight:700;color:var(--green-deep)}
.bbody ul{margin:0 0 16px;padding-left:24px}
.bbody li{margin:6px 0}
.bbody li::marker{color:var(--green)}
.bbody em{color:var(--ink-soft)}

/* Referral card and back link */
.breferral{max-width:760px;background:var(--mint);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-top:38px}
.breferral h2{font-size:1.35rem;margin:0 0 8px}
.breferral p{color:var(--ink-soft);margin:0 0 16px}
.bback{margin-top:26px}
.bback a{font-weight:700;color:var(--green-deep)}

/* Footer */
.bfooter{background:var(--card);border-top:1px solid var(--line);padding:40px 0 90px;color:var(--ink-soft);font-size:.95rem}
.bfoot-brand{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);margin:0 0 8px}
.bfoot-brand span{color:var(--green-deep)}
.bfoot-links a{color:var(--ink);font-weight:600;margin-right:16px}
.bfoot-fine{font-size:.85rem;margin-top:14px}

@media (max-width:1000px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bgrid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .blinks{display:none}
  .bphone{display:none}
  .bnav{gap:12px}
}

/* Related reading */
.brelated{max-width:760px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.brelated h2{font-size:1.1rem;margin:0 0 10px}
.brelated a{display:inline-block;margin:0 10px 8px 0;padding:8px 14px;background:var(--card);border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--green-deep);font-weight:600;font-size:.92rem}
.brelated a:hover{border-color:var(--green);background:var(--mint)}