/*
 * IBASTOM blog – writing-topic pages (category archives, template category.html, inc/blog-topics.php). Same family as
 * the blog ("מגזין הידע": newsprint, ink, highlighter); each topic replaces the blog's editor's red with its own
 * accent (text-safe on paper and behind white text). Also: the linked topic cards on the blog page.
 */

/* ---------- Topic accents ---------- */
body.ibastom-blgt-ecommerce, body.ibastom-blgt-ecommerce .sv-page--blog, .blgt-nav__topic--ecommerce { --sv-signal: #0b6b61; --sv-signal-deep: #095a52; --sv-signal-soft: #7fd8cc; --blgt-tint: #e3f1ee; }
body.ibastom-blgt-social, body.ibastom-blgt-social .sv-page--blog, .blgt-nav__topic--social { --sv-signal: #2b4fbd; --sv-signal-deep: #23429f; --sv-signal-soft: #a9bcff; --blgt-tint: #e6ebfa; }
body.ibastom-blgt-ppc, body.ibastom-blgt-ppc .sv-page--blog, .blgt-nav__topic--ppc { --sv-signal: #a84300; --sv-signal-deep: #8f3900; --sv-signal-soft: #ffb27a; --blgt-tint: #f8e9de; }
body.ibastom-blgt-seo, body.ibastom-blgt-seo .sv-page--blog, .blgt-nav__topic--seo { --sv-signal: #2f6b14; --sv-signal-deep: #275a10; --sv-signal-soft: #a9dd8c; --blgt-tint: #e7f1e1; }

/* ---------- Topic hero ---------- */
.blgt-top { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--blgt-tint, var(--sv-paper-2)), var(--sv-paper)); border-block-end: 4px double var(--sv-ink); }
/* minmax(0, 1fr): a long hero line must not widen the column (and the topic list with it) past the screen. */
.blgt-top__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 1024px) {
	.blgt-top__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
}
.blgt-hero { display: grid; gap: 1rem; justify-items: start; padding-block-start: 1rem; border-block-start: 1.5px solid var(--sv-ink); }
.blgt-hero__eyebrow::before { content: "№"; }
.blgt-hero__num { font-family: var(--sv-mono); padding: .05rem .45rem; background: var(--sv-signal); color: #fff; border-radius: 3px; }
.blgt-hero__eyebrow [lang="en"] { font-family: var(--sv-mono); color: var(--sv-signal-deep); }
/* Long English labels ("Generative Engine Optimization") drop to their own line instead of overflowing. */
.blgt-hero__eyebrow { flex-wrap: wrap; row-gap: .25rem; max-width: 100%; }
.blgt-hero__eyebrow [lang="en"] { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 420px) {
	.blgt-hero__eyebrow::after { display: none; }
}
.blgt-h1 { margin: 0; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5rem); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; color: var(--sv-ink); text-wrap: balance; }
.blgt-h1::after { content: ""; display: block; width: min(100%, 5.5em); height: .12em; margin-block-start: .18em; background: var(--sv-signal); border-radius: 999px; }
.blgt-hero__term { margin: 0; font-weight: 700; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--sv-ink); }
.blgt-hero__key { display: inline-block; margin-inline-end: .5rem; padding: .05rem .55rem; font-size: .8125rem; font-weight: 700; color: var(--sv-ink); background: var(--sv-accent); border-radius: 3px; vertical-align: .1em; }
.blgt-hero__desc { max-width: 46rem; color: var(--sv-ink-3); font-size: 1.0625rem; line-height: 1.8; }
.blgt-hero__desc p { margin: 0 0 .5rem; }
.blgt-hero__count { margin: 0; font-size: .9375rem; color: var(--sv-muted); }
.blgt-hero__count strong { color: var(--sv-ink); }
.blgt-hero__count a { color: var(--sv-signal-deep); font-weight: 700; }

/* ---------- Topic navigation (all articles + other topics) ---------- */
.blgt-nav__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* Long topic names wrap inside the pill (taller button) rather than run past the list. */
.blgt-nav__list > li { max-width: 100%; }
.blgt-nav a { max-width: 100%; }
.blgt-nav a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .4rem .9rem; font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--sv-ink); text-decoration: none; background: var(--sv-card); border: 1px solid var(--sv-ink); border-radius: 999px; transition: background-color .2s var(--sv-ease), color .2s var(--sv-ease); }
.blgt-nav a:hover { background: var(--sv-accent); }
.blgt-nav__num { flex-shrink: 0; white-space: nowrap; font-family: var(--sv-mono); font-size: .75rem; font-weight: 500; color: var(--sv-signal-deep); }
.blgt-nav a[aria-current="page"] { background: var(--sv-signal); border-color: var(--sv-signal); color: #fff; }
.blgt-nav a[aria-current="page"] .blgt-nav__num { color: #fff; }
.blgt-nav__all { border-style: dashed !important; }

/* ---------- Articles ---------- */
.blgt-articles .blg-filter { box-shadow: 6px 6px 0 var(--sv-signal); }
@media (max-width: 599px) {
	.blgt-articles .blg-filter { box-shadow: 4px 4px 0 var(--sv-signal); }
}
.blgt-feed .blg-card:hover { box-shadow: 6px 6px 0 var(--sv-signal); border-color: var(--sv-signal); }
/* A post without a featured image: the card starts with its text (no placeholder image is drawn). */
.blgt-feed .blg-card:not(:has(.blg-card__media)) { grid-template-rows: 1fr; border-block-start: 4px solid var(--sv-signal); }

/* ---------- Blog page: linked topic cards (one link per card, on the title; the whole card is its target) ---------- */
.blg-topic:has(.blg-topic__link) { position: relative; }
.blg-topic__link { color: inherit; text-decoration: none; }
.blg-topic__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blg-topic__link:focus-visible { outline: none; }
.blg-topic:has(.blg-topic__link:focus-visible) { outline: 3px solid var(--sv-signal-deep); outline-offset: -3px; }
.blg-topic:has(.blg-topic__link):hover .blg-topic__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.blg-topic__go { margin: .25rem 0 0; font-size: .875rem; font-weight: 700; color: var(--sv-signal-deep); }
.blg-topic__count { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--sv-ink-3); }
.blg-topic__go span { display: inline-block; transition: transform .2s var(--sv-ease); }
.blg-topic:has(.blg-topic__link):hover .blg-topic__go span { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
	.blgt-nav a, .blg-topic__go span { transition: none; }
}
.blg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.blgt-hero__desc :is(p, div, h2, h3) { text-align: start !important; font-size: inherit; font-weight: inherit; margin: 0 0 .5rem; } /* descriptions carry inline centring from the editor */

/* Five more topics (categories 1898–1902). */
body.ibastom-blgt-corporate, body.ibastom-blgt-corporate .sv-page--blog, .blgt-nav__topic--corporate { --sv-signal: #6b3fa0; --sv-signal-deep: #5a3388; --sv-signal-soft: #c9b0ef; --blgt-tint: #efe8f8; }
body.ibastom-blgt-google, body.ibastom-blgt-google .sv-page--blog, .blgt-nav__topic--google { --sv-signal: #8a5a00; --sv-signal-deep: #734b00; --sv-signal-soft: #f2c46b; --blgt-tint: #f6ecd9; }
body.ibastom-blgt-malls, body.ibastom-blgt-malls .sv-page--blog, .blgt-nav__topic--malls { --sv-signal: #a3125a; --sv-signal-deep: #8a0f4c; --sv-signal-soft: #f59cc8; --blgt-tint: #f8e4ee; }
body.ibastom-blgt-data, body.ibastom-blgt-data .sv-page--blog, .blgt-nav__topic--data { --sv-signal: #0f5f8a; --sv-signal-deep: #0c5075; --sv-signal-soft: #8ccbef; --blgt-tint: #e2eff6; }
body.ibastom-blgt-digital, body.ibastom-blgt-digital .sv-page--blog, .blgt-nav__topic--digital { --sv-signal: #3f4a5c; --sv-signal-deep: #343d4d; --sv-signal-soft: #b7c1d1; --blgt-tint: #e8ebf0; }

/* Dropshipping collection: same blog system, distinct petrol accent. */
body.ibastom-blgt-dropshipping, body.ibastom-blgt-dropshipping .sv-page--blog, .blgt-nav__topic--dropshipping { --sv-signal: #285f6c; --sv-signal-deep: #1e4d59; --sv-signal-soft: #9ad4d6; --blgt-tint: #e4f1f1; }

/* GEO collection (category 1904): the green-teal signal of the GEO service page (assets/service-3/geo.css) and its mid shade as tint. */
body.ibastom-blgt-geo, body.ibastom-blgt-geo .sv-page--blog, .blgt-nav__topic--geo { --sv-signal: #2e6b45; --sv-signal-deep: #255a39; --sv-signal-soft: #a8dcb9; --blgt-tint: #e8ebdc; }

/* Link to the topic's service page (inc/related-content.php): hero line on the topic page, own line on articles. */
.blgt-hero__service a, .blgt-service__line a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.blgt-hero__service a:hover, .blgt-service__line a:hover { text-decoration-thickness: 2px; }
.blgt-service { margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.blgt-service__line { margin: 0; font-weight: 700; color: var(--sv-ink); }