/* Biology Turk blog — RTL-first, brand-matched, scoped under .bt-* to avoid Astra collisions. */

.bt-blog{background:var(--bt-paper);color:var(--bt-text);font-family:var(--bt-font-body);line-height:1.85}
.bt-container{max-inline-size:var(--bt-maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);padding-block:clamp(1.5rem,4vw,3rem)}
.bt-container--read{max-inline-size:min(860px,100%)}
.bt-blog *{box-sizing:border-box}

/* headings use Arabic-safe font */
.bt-blog h1,.bt-blog h2,.bt-blog h3,.bt-blog h4{font-family:var(--bt-font-head);color:var(--bt-green-dark);line-height:1.35;text-wrap:balance}

/* ---- breadcrumbs (quiet) ---- */
.bt-breadcrumbs{margin-block:0 1rem;font-size:13px}
.bt-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.bt-breadcrumbs li{display:flex;align-items:center;gap:.4rem;color:var(--bt-muted)}
.bt-breadcrumbs li:not(:last-child)::after{content:"‹";color:var(--bt-gray)}
.bt-breadcrumbs a{color:var(--bt-muted);text-decoration:none}
.bt-breadcrumbs a:hover{color:var(--bt-green);text-decoration:underline}
.bt-breadcrumbs [aria-current="page"]{color:var(--bt-muted);opacity:.85}

/* ---- hero ---- */
.bt-hero{margin-block-end:1.75rem;padding-block-end:1.5rem;border-block-end:1px solid var(--bt-gray)}
.bt-hero__eyebrow{color:var(--bt-green);font-weight:700;font-size:.8rem;letter-spacing:.08em;margin:0 0 .35rem}
.bt-hero__title{font-size:clamp(1.8rem,4.5vw,2.75rem);margin:0 0 .5rem}
.bt-hero__sub{font-size:1.05rem;max-inline-size:62ch;color:var(--bt-text)}

/* ---- category nav ---- */
.bt-catnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:1.75rem}
.bt-chip{display:inline-block;padding:.35rem .85rem;border-radius:999px;background:var(--bt-off);color:var(--bt-green-mid);font-size:.85rem;font-weight:600;text-decoration:none;border:1px solid var(--bt-gray);transition:background .15s,color .15s}
.bt-chip:hover,.bt-chip.is-active{background:var(--bt-green);color:#fff;border-color:var(--bt-green)}

/* ---- grid + cards ---- */
.bt-grid{display:grid;gap:clamp(1rem,2.5vw,1.75rem)}
.bt-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bt-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bt-grid--3{grid-template-columns:1fr}}
.bt-card{background:var(--bt-white);border:1px solid var(--bt-gray);border-radius:var(--bt-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--bt-shadow);transition:transform .18s,box-shadow .18s}
.bt-card:hover{transform:translateY(-3px);box-shadow:var(--bt-shadow-lg)}
.bt-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bt-off)}
.bt-card__media img,.bt-featured{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.bt-card__body{padding:1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.bt-card__title{font-size:1.15rem;margin:0}
.bt-card__title a{color:var(--bt-green-dark);text-decoration:none}
.bt-card__title a:hover{color:var(--bt-green)}
.bt-card__excerpt{margin:0;font-size:.95rem;flex:1}
.bt-card__meta{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--bt-green-mid);flex-wrap:wrap}
.bt-card__more{margin-inline-start:auto;font-weight:700;color:var(--bt-green);text-decoration:none}

/* ---- article header (restrained editorial, RTL start-aligned — not a centered hero) ---- */
.bt-article__header{margin-block:.25rem 1.4rem;text-align:start}
.bt-article__header .bt-chip{font-size:.72rem;font-weight:700;padding:.24rem .7rem;background:var(--bt-off);color:var(--bt-green-mid);border-color:var(--bt-gray)}
.bt-article__header .bt-chip:hover{background:var(--bt-green);color:#fff}
.bt-article__title{font-size:clamp(34px,2.6vw,42px);line-height:1.35;font-weight:800;letter-spacing:0;text-wrap:balance;color:var(--bt-green-dark);margin:.6rem 0 .65rem}
.bt-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem;font-size:14px;color:var(--bt-muted);line-height:1.6}
.bt-byline__reviewer{color:var(--bt-text)}
.bt-dot{opacity:.45}
.bt-article__hero{margin:0 0 1.5rem;border-radius:var(--bt-radius);overflow:hidden}
.bt-article__hero img{inline-size:100%;block-size:auto;display:block}
.bt-article__hero figcaption{font-size:.82rem;color:var(--bt-text);opacity:.75;padding:.5rem .25rem;text-align:start}

/* article body typography — Almarai editorial scale, strong contrast */
.bt-article__body{font-size:17px;line-height:1.85;color:var(--bt-text)}
.bt-article__body>*{margin-block:0 1.15rem}
.bt-article__body h2{font-size:clamp(23px,1.8vw,28px);font-weight:700;line-height:1.45;color:var(--bt-green-dark);margin-block:2.2rem .6rem;padding:0;border:0;position:relative;padding-inline-start:.7rem}
.bt-article__body h2::before{content:"";position:absolute;inset-inline-start:0;inset-block:.18em .12em;inline-size:4px;border-radius:2px;background:var(--bt-green-light)}
.bt-article__body h3{font-size:clamp(19px,1.35vw,22px);font-weight:700;line-height:1.5;color:var(--bt-green-dark);margin-block:1.5rem .4rem}
.bt-article__body h4{font-size:1.05rem;font-weight:700;margin-block:1.25rem .4rem}
.bt-article__body :is(h2,h3)[id]{scroll-margin-top:90px}
.bt-article__body a{color:var(--bt-green-mid);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.bt-article__body a:hover{color:var(--bt-green)}
.bt-article__body ul,.bt-article__body ol{padding-inline-start:1.4rem}
.bt-article__body li{margin-block:.4rem;line-height:1.85}
.bt-article__body img{max-inline-size:100%;block-size:auto;border-radius:var(--bt-radius-sm)}
.bt-article__body blockquote{margin-inline:0;padding-inline-start:1.1rem;border-inline-start:4px solid var(--bt-green-light);color:var(--bt-green-dg);font-style:normal;background:var(--bt-off);padding-block:.75rem;border-radius:0 var(--bt-radius-sm) var(--bt-radius-sm) 0}
.bt-article__body table{inline-size:100%;border-collapse:collapse;font-size:15px}
.bt-article__body figure.wp-block-table,.bt-article__body .wp-block-table{overflow-x:auto}
.bt-article__body th,.bt-article__body td{border:1px solid var(--bt-gray);padding:.6rem .8rem;text-align:start;vertical-align:top}
.bt-article__body thead th{background:var(--bt-off);color:var(--bt-green-dark);font-weight:700}
@media(min-width:768px){.bt-article__body{font-size:18px}.bt-article__body table{font-size:16px}}

/* ---- TOC off-canvas drawer (single source; native <details>, enhanced by toc.js) ---- */
.bt-toc{margin:0}
.bt-toc>summary{list-style:none}
.bt-toc>summary::-webkit-details-marker{display:none}
/* trigger: a side tab pinned to the physical right, vertically centred */
.bt-toc__toggle{position:fixed;z-index:1200;cursor:pointer;right:0;top:46%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .85rem;
  color:#fff;background:var(--bt-green);font-weight:700;font-size:.9rem;
  border-top-left-radius:12px;border-bottom-left-radius:12px;box-shadow:0 6px 20px rgba(13,31,13,.22)}
.bt-toc__toggle:hover{background:var(--bt-green-mid)}
.bt-toc__icon{inline-size:18px;block-size:18px;flex:none}
.bt-toc__toggle-x{display:none;flex:none}
.bt-toc__toggle-x svg{inline-size:20px;block-size:20px}
/* when open, the summary becomes the drawer's header bar + close control (works w/o JS) */
.bt-toc[open] .bt-toc__toggle{top:0;bottom:auto;right:0;transform:none;inline-size:min(360px,90vw);
  justify-content:space-between;gap:1rem;min-block-size:56px;padding:1rem 1.15rem;border-radius:0;z-index:1202;
  background:var(--bt-white);color:var(--bt-green-dark);box-shadow:0 1px 0 var(--bt-gray)}
.bt-toc[open] .bt-toc__toggle .bt-toc__icon{display:none}
.bt-toc[open] .bt-toc__toggle-label{font-weight:800;font-size:1.05rem}
.bt-toc[open] .bt-toc__toggle-x{display:inline-flex;color:var(--bt-green-dark)}
.bt-toc__backdrop{position:fixed;inset:0;z-index:1200;background:rgba(13,31,13,.42);opacity:1;animation:bt-toc-fade .2s ease}
.bt-toc__panel{position:fixed;top:0;right:0;bottom:0;z-index:1201;inline-size:min(360px,90vw);
  background:var(--bt-white);box-shadow:-12px 0 40px rgba(13,31,13,.18);
  display:flex;flex-direction:column;overflow:hidden;padding-block-start:56px;animation:bt-toc-slide .22s ease}
.bt-toc__list{list-style:none;margin:0;padding:.6rem .5rem 1.4rem;overflow-y:auto;flex:1;overscroll-behavior:contain}
.bt-toc__item{margin:0}
.bt-toc__item--h2>.bt-toc__link{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--bt-green-dark);text-decoration:none;font-weight:700;font-size:.98rem;line-height:1.5}
.bt-toc__sub{list-style:none;margin:.1rem 0 .5rem;padding-inline-start:.85rem}
.bt-toc__item--h3>.bt-toc__link{display:block;padding:.38rem .7rem;border-radius:8px;color:var(--bt-muted);text-decoration:none;font-size:.9rem;line-height:1.5}
.bt-toc__link:hover{background:var(--bt-off);color:var(--bt-green)}
.bt-toc__item--h2>.bt-toc__link.is-active{background:var(--bt-off);color:var(--bt-green);box-shadow:inset -3px 0 0 var(--bt-green)}
html.bt-toc-lock{overflow:hidden}
@keyframes bt-toc-fade{from{opacity:0}to{opacity:1}}
@keyframes bt-toc-slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.bt-toc__panel,.bt-toc__backdrop{animation:none}}
/* mobile: compact circular trigger, physical bottom-left, clear of contact controls */
@media(max-width:900px){
  .bt-toc__toggle{top:auto;bottom:16px;left:14px;right:auto;transform:none;inline-size:52px;block-size:52px;
    padding:0;justify-content:center;border-radius:50%}
  .bt-toc__toggle-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bt-toc__icon{inline-size:22px;block-size:22px}
  .bt-toc[open] .bt-toc__toggle{inline-size:min(360px,90vw);block-size:auto;border-radius:0}
}

/* ---- FAQ accordions (compact, semantic details/summary; white cards) ---- */
.bt-faq{margin-block:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.bt-faq__title{font-size:1.5rem;margin-block-end:.75rem}
.bt-faq__item{border:1px solid var(--bt-gray);border-radius:var(--bt-radius-sm);background:var(--bt-white)}
.bt-faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.8rem 1rem;font-weight:700;font-size:17px;line-height:1.5;color:var(--bt-green-dark)}
.bt-faq__item summary::-webkit-details-marker{display:none}
.bt-faq__item summary::after{content:"+";flex:none;inline-size:1.5em;block-size:1.5em;display:grid;place-items:center;
  border-radius:50%;background:var(--bt-off);color:var(--bt-green);font-weight:700;line-height:1;font-size:1.05em}
.bt-faq__item[open] summary::after{content:"–"}
.bt-faq__item[open] summary{border-block-end:1px solid var(--bt-gray)}
.bt-faq__answer{padding:.8rem 1rem;font-size:17px;line-height:1.85;color:var(--bt-text)}
.bt-faq__answer p{margin:0}
@media(min-width:768px){.bt-faq__item summary,.bt-faq__answer{font-size:18px}}

/* ---- CTA ---- */
.bt-cta{margin-block:2.25rem;background:linear-gradient(135deg,var(--bt-green-dark),var(--bt-green-mid));color:#fff;border-radius:var(--bt-radius);padding:clamp(1.25rem,3vw,2rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.bt-cta__title{color:#fff;font-size:1.35rem;margin:0 0 .3rem}
.bt-cta__sub{margin:0;opacity:.92;max-inline-size:48ch}
.bt-cta__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.bt-btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.3rem;border-radius:var(--bt-radius-sm,8px);font-weight:700;text-decoration:none;min-block-size:44px;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}
.bt-btn:hover{transform:translateY(-2px)}
.bt-btn:active{transform:translateY(0)}
.bt-btn:focus-visible{outline:3px solid var(--bt-green-light,#8ecf5f);outline-offset:2px}
/* Every state below sets `color` explicitly — Astra ships a global `a:hover{color:...}`
   rule at (0,1,1) specificity that otherwise wins over an un-stated color on `:hover`
   (it doesn't win over a *declared* color, since `.bt-btn--x:hover{color:...}` is (0,2,0)). */
.bt-btn--wa{background:#25d366;color:#0d1f0d}
.bt-btn--wa:hover{background:#1ebe5b;color:#0d1f0d}
.bt-btn--wa:active{background:#17a34c;color:#0d1f0d}
.bt-btn--wa:focus-visible{color:#0d1f0d}
.bt-btn--solid{background:var(--bt-green);color:#fff}
.bt-btn--solid:hover{background:var(--bt-green-mid);color:#fff}
.bt-btn--solid:active{background:var(--bt-green-dark);color:#fff}
.bt-btn--solid:focus-visible{color:#fff}
.bt-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.bt-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.bt-btn--ghost:active{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
.bt-btn--ghost:focus-visible{color:#fff}
.bt-404 .bt-btn--ghost{color:var(--bt-green);border-color:var(--bt-green)}
.bt-404 .bt-btn--ghost:hover{background:var(--bt-off);color:var(--bt-green);border-color:var(--bt-green)}
.bt-404 .bt-btn--ghost:active{background:var(--bt-gray);color:var(--bt-green);border-color:var(--bt-green)}
.bt-404 .bt-btn--ghost:focus-visible{color:var(--bt-green)}

/* ---- related + post nav ---- */
.bt-related{margin-block:2.5rem}
.bt-section-title{font-size:1.5rem;margin-block-end:1rem}
.bt-postnav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-block:2rem 1rem}
@media(max-width:600px){.bt-postnav{grid-template-columns:1fr}}
.bt-postnav a{display:flex;flex-direction:column;gap:.2rem;padding:1rem;border:1px solid var(--bt-gray);border-radius:var(--bt-radius);background:var(--bt-white);text-decoration:none;color:var(--bt-green-dark)}
.bt-postnav a span{font-size:.78rem;color:var(--bt-green-mid)}
.bt-postnav__next{text-align:start}

/* ---- pagination ---- */
.bt-pagination{margin-block:2rem}
.bt-pagination ul{list-style:none;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:0;margin:0}
.bt-pagination a,.bt-pagination span{display:inline-flex;min-inline-size:44px;min-block-size:44px;align-items:center;justify-content:center;padding:.4rem .7rem;border-radius:var(--bt-radius-sm);border:1px solid var(--bt-gray);color:var(--bt-green-mid);text-decoration:none}
.bt-pagination .current{background:var(--bt-green);color:#fff;border-color:var(--bt-green)}
.bt-pagination a:hover{background:var(--bt-off)}

/* ---- empty state ---- */
.bt-empty{text-align:center;padding:3rem 1rem;background:var(--bt-white);border:1px dashed var(--bt-gray);border-radius:var(--bt-radius)}

/* ---- editorial block patterns (biologyturk-core) ---- */
.bt-article__body .bt-intro{font-size:1.18rem;color:var(--bt-green-dg);font-weight:500}
.bt-article__body .bt-callout{background:var(--bt-off);border-inline-start:4px solid var(--bt-green);border-radius:0 var(--bt-radius-sm) var(--bt-radius-sm) 0;padding:1rem 1.15rem;margin-block:1.5rem}
.bt-article__body .bt-callout p{margin:0}
.bt-article__body .bt-inline-cta{background:var(--bt-white);border:1px solid var(--bt-gray);border-radius:var(--bt-radius);padding:clamp(1.1rem,3vw,1.6rem);margin-block:2rem;text-align:center}
.bt-article__body .bt-inline-cta h3{margin:0 0 .4rem}
.bt-article__body .bt-inline-cta .wp-block-button__link{background:var(--bt-green);color:#fff;border-radius:var(--bt-radius-sm,8px);padding:.7rem 1.4rem;font-weight:700;min-block-size:44px;display:inline-flex;align-items:center;transition:background .15s ease}
.bt-article__body .bt-inline-cta .wp-block-button__link:hover{background:var(--bt-green-mid)}
.bt-article__body .bt-compare th{background:var(--bt-green);color:#fff}

/* ---- in-article CTAs + quick-answer callout ---- */
.bt-article__body .bt-article-cta{margin-block:1.9rem;text-align:center}
.bt-article__body .bt-article-cta--dual{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.bt-article__body .bt-article-cta .bt-btn{min-block-size:48px}
.bt-article__body .bt-answer{border-inline-start-width:5px;font-size:1.05rem}
.bt-article__body .bt-answer p{margin:0}

/* ---- single-article tiered widths (all blog articles; responsive, centered, RTL) ----
   Fixes the "narrow mobile column on desktop" problem. Each tier is centered on the
   same page axis, so 848px text, 944px emphasis blocks and the 1008px hero all share
   one centre line. Widths are rem-based (min()/max-inline-size), never fixed px. */

/* Astra's "narrow container" layout caps the single-post content area at 750px via
   `@media(min-width:922px) .ast-narrow-container .site-content>.ast-container` (3 classes)
   and pads the article 40px. Match that specificity + media query to widen it, and drop
   the doubled gutter, so our own container controls width. Scoped to single posts only —
   archive, pages and Astra's global container width stay untouched. */
@media (min-width:922px){
  /* widen + centre: .ast-container is display:flex; with no sidebar the article column
     would otherwise pin to flex-start (the RIGHT edge in RTL), so justify-content:center
     keeps the whole article centred in the content area. */
  .single-post.ast-narrow-container .site-content>.ast-container,
  .bt-wide-page.ast-narrow-container .site-content>.ast-container{max-inline-size:min(75rem,100%);justify-content:center}
}
.bt-blog--single .bt-article,
.bt-wide-page article{padding-inline:0}

.bt-blog--single .bt-container--read{max-inline-size:min(69rem,100%)} /* ~1104 shell */

/* reading measure (~848) for the text-flow tiers (the TOC is now a fixed drawer) */
.bt-blog--single .bt-breadcrumbs,
.bt-blog--single .bt-article__header,
.bt-blog--single .bt-faq{max-inline-size:53rem;margin-inline:auto}

/* body spans the mid width; its text children self-limit to the reading measure */
.bt-blog--single .bt-article__body{max-inline-size:59rem;margin-inline:auto}
.bt-blog--single .bt-article__body>p,
.bt-blog--single .bt-article__body>h2,
.bt-blog--single .bt-article__body>h3,
.bt-blog--single .bt-article__body>h4,
.bt-blog--single .bt-article__body>ul,
.bt-blog--single .bt-article__body>ol,
.bt-blog--single .bt-article__body>blockquote{max-inline-size:53rem;margin-inline:auto}

/* emphasis blocks break out to the mid width (~944): tables, callouts, in-body CTAs */
.bt-blog--single .bt-article__body>.bt-article-cta,
.bt-blog--single .bt-article__body>.bt-callout,
.bt-blog--single .bt-article__body>.wp-block-table,
.bt-blog--single .bt-article__body>figure.wp-block-table{max-inline-size:59rem;margin-inline:auto}

/* featured image is the widest tier (~1008), centered, 16:9 preserved */
.bt-blog--single .bt-article__hero{max-inline-size:63rem;margin-inline:auto}
.bt-blog--single .bt-article__hero img{aspect-ratio:16/9;object-fit:cover}
.bt-wide-page .ast-single-post-featured-section{max-width:63rem!important;width:100%!important;margin-inline:auto!important}
.bt-wide-page .ast-single-post-featured-section img{aspect-ratio:16/9;object-fit:cover;width:100%!important;height:auto!important}

/* service CTA, related grid + post-nav share the mid width */
.bt-blog--single .bt-cta,
.bt-blog--single .bt-related,
.bt-blog--single .bt-postnav{max-inline-size:59rem;margin-inline:auto}

/* mobile H1: sized so long titles settle into ~2 lines across common 390–430px phones;
   body text unchanged. The clamp floor/ceiling are measured, not guessed — a 27px floor
   left the (long) cockroach title at 3 lines by 390px, so the fluid range is tuned to
   land ~24.6–27px there = 2 lines, wrapping naturally to 3 only below ~380px where 2
   lines is impossible for a title this long. text-wrap:pretty overrides the heading
   balance so lines fill greedily. ~18px page gutter per spec. */
@media (max-width:480px){
  .bt-blog--single .bt-container--read{padding-inline:1.15rem}
  .bt-article__title{font-size:clamp(24px,6.3vw,30px);line-height:1.35;text-wrap:balance}
}

/* focus + motion */
.bt-blog a:focus-visible,.bt-blog summary:focus-visible,.bt-blog button:focus-visible,
.bt-service-page a:focus-visible,.bt-service-page summary:focus-visible,.bt-service-page button:focus-visible{outline:3px solid var(--bt-green-light);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.bt-blog *{transition:none!important;scroll-behavior:auto!important}}