/* ----------------------------------------------------------------
 * theme-overrides.css — late-loaded layer.
 *
 * Loaded AFTER context-aware DS components (article-hero,
 * video-embed, reading-progress-bar, footer, …) so its overrides
 * actually win the cascade without `!important`.
 *
 * Rule of thumb: anything that targets a DS component class
 * (`.dh-ah2`, `.dh-rpb`, `.vid-media`, etc.) belongs here. Pure
 * layout / WordPress-class bridge stays in theme.css.
 * ---------------------------------------------------------------- */


/* ════════════════════════════════════════════════════════════════
   ARTICLE HERO (DS .dh-ah2)
   ════════════════════════════════════════════════════════════════ */

/* Optional opt-out for the DS top accent ribbon (`.dh-ah2::before`).
 * Replaces the previous global `!important` override — adding the class
 * via PHP is now an explicit, cascade-friendly choice per-template. */
.dh-ah2--no-ribbon::before {
	content: none;
	background: none;
	height: 0;
}

/* ── Top clearance — single owner: `.ah2-inner` ─────────────────────
 * Audit P2: previously `.dh-ah2` wrapper had `padding-top` for nav clearance
 * AND `.ah2-inner` had its own `var(--sp-24)` top padding from DS. Sum was
 * unpredictable, especially on video/stream where the embed pushed the
 * content even further down.
 *
 * Now there is one owner — `.ah2-inner`. The wrapper has zero top padding
 * (so `bg-image` runs flush to viewport top), and the inner element
 * combines DS visual breath + nav clearance via `--ah2-nav-clearance`.
 *
 * `--ah2-nav-clearance` is recomputed per breakpoint to absorb the WP
 * admin bar (which is fixed above 600px, non-fixed at/below 600px). */
.dh-ah2 {
	--ah2-nav-clearance: calc(var(--nav-height, 64px) + var(--nav-top, 12px));
	padding-top: 0;
}
body.admin-bar .dh-ah2 {
	--ah2-nav-clearance: calc(var(--nav-height, 64px) + var(--nav-top, 12px) + 32px);
}
@media (max-width: 782px) {
	body.admin-bar .dh-ah2 {
		--ah2-nav-clearance: calc(var(--nav-height, 64px) + var(--nav-top, 12px) + 46px);
	}
}
@media (max-width: 600px) {
	/* Below 600px WP renders the admin bar non-fixed, so we drop the offset. */
	body.admin-bar .dh-ah2 {
		--ah2-nav-clearance: calc(var(--nav-height, 64px) + var(--nav-top, 12px));
	}
}

/* DS `.ah2-inner` ships `padding: var(--sp-24) var(--sp-6) var(--sp-12)`. We
 * keep the side and bottom values intact and only re-own the top: visual
 * breath (sp-24/16/12 per breakpoint, mirroring DS responsive scale) + nav
 * clearance variable. */
.dh-ah2 .ah2-inner {
	padding-top: calc(var(--sp-24) + var(--ah2-nav-clearance));
}
@media (max-width: 768px) {
	.dh-ah2 .ah2-inner { padding-top: calc(var(--sp-16) + var(--ah2-nav-clearance)); }
}
@media (max-width: 480px) {
	.dh-ah2 .ah2-inner { padding-top: calc(var(--sp-12) + var(--ah2-nav-clearance)); }
}

/* On desktop the hero text column should match the article column width
 * exactly (both `var(--max-w-narrow)`). DS adds 24px horizontal padding
 * to `.ah2-inner` which made the hero content 48px narrower than the
 * article. Drop it. tip/memo formats keep their `border-left + padding-left`
 * rule thanks to higher CSS specificity. Mobile breakpoints in DS preserved. */
@media (min-width: 1024px) {
	.dh-ah2 .ah2-inner { padding-inline: 0; }
}

/* When the hero has a background image, the eyebrow sits on top of the
 * image. DS forces white text in that mode (`article-hero.css:146-154`),
 * so the wrapper plate must be **dark** regardless of light/dark theme —
 * otherwise white text lands on a `var(--bg-card)` plate (white in light
 * theme) and disappears. Audit P1 «контрастный CSS-баг в light mode». */
.dh-ah2.dh-ah2--bg-image .ah2-eyebrow {
	display: inline-flex;
	flex-wrap: nowrap;
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-pill);
	padding: var(--sp-2) var(--sp-4);
	max-width: fit-content;
	color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.dh-ah2.dh-ah2--bg-image .ah2-eyebrow a {
	color: inherit;
}

/* Force the hero divider to span full column width — browser default
 * <hr> styling collapses it without explicit width:100% in some engines. */
.dh-ah2 .ah2-divider {
	width: 100%;
	margin-inline: 0;
}

/* DS format variants (tip/news/memo) use `padding-top: var(--sp-16)` with a
 * higher specificity selector (0,2,1) which beats our .dh-ah2 .ah2-inner (0,2,0)
 * and strips --ah2-nav-clearance, hiding content under the fixed nav.
 * Re-add clearance with matching specificity. */
.dh-ah2[data-format="tip"] .ah2-inner,
.dh-ah2[data-format="news"] .ah2-inner,
.dh-ah2[data-format="memo"] .ah2-inner {
	padding-top: calc(var(--sp-16) + var(--ah2-nav-clearance)) !important;
}
@media (max-width: 480px) {
	.dh-ah2[data-format="tip"] .ah2-inner,
	.dh-ah2[data-format="news"] .ah2-inner,
	.dh-ah2[data-format="memo"] .ah2-inner {
		padding-top: calc(var(--sp-10) + var(--ah2-nav-clearance)) !important;
	}
}

/* Compact hero modifier — used on `video` / `stream` formats now that the
 * iframe lives in `.dh-post-media`. Trims top + bottom padding so the
 * meta block + embed combo doesn't blow past viewport on first paint.
 * Top still combines with `--ah2-nav-clearance` (single-owner rule above). */
.dh-ah2--media-compact .ah2-inner {
	padding-top: calc(var(--sp-12) + var(--ah2-nav-clearance));
	padding-bottom: var(--sp-8);
}
@media (max-width: 768px) {
	.dh-ah2--media-compact .ah2-inner {
		padding-top: calc(var(--sp-10) + var(--ah2-nav-clearance));
	}
}
.dh-ah2--media-compact .ah2-divider {
	margin-block: var(--sp-4);
}


/* ════════════════════════════════════════════════════════════════
   ARTICLE MEDIA (sibling block to .dh-ah2 on video/stream)
   Width matches the DS reference for `.ah2-video` — `--max-w` (1200px),
   intentionally **wider** than the prose column (`--max-w-narrow` 800px).
   ════════════════════════════════════════════════════════════════ */
.dh-post-media {
	display: block;
	max-width: var(--max-w);
	margin: var(--sp-6) auto var(--sp-12);
	padding-inline: var(--sp-6);
}
@media (max-width: 768px) {
	/* Edge-to-edge on mobile so the embed visually aligns with the hero
	 * (hero `.dh-ah2` is full-bleed, only `.ah2-inner` is padded). Without
	 * this the video card sat inset by 16px and looked like a step under
	 * the hero. */
	.dh-post-media { padding-inline: 0; margin-block: var(--sp-4) var(--sp-8); }
}

/* Event bar + iframe panel are visually joined (DS pattern from
 * article-hero.css:509-548): bar has rounded top, panel has rounded
 * bottom only, shared border between them collapses. Mirrors the original
 * `.ah2-event-bar + .ah2-video-wrap` rule. */
.dh-post-media__event-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-5);
	background: var(--bg-elevated);
	border: 1px solid var(--border-s);
	border-bottom: none;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.dh-post-media__event-date {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--fg-2);
}
.dh-post-media__event-date svg {
	width: 14px;
	height: 14px;
	color: var(--accent-text);
	flex-shrink: 0;
}
.dh-post-media .dh-video {
	margin: 0; /* DS .dh-video adds vertical margin; we own it from .dh-post-media */
}
/* Override DS `.vid-media` aesthetic to keep the embed flush to the event
 * bar (same border treatment as DS `.ah2-video-wrap`). */
.dh-post-media .vid-media {
	border-radius: var(--r-lg);
}
.dh-post-media__event-bar + .dh-video .vid-media {
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	border-top: none;
}
@media (max-width: 768px) {
	/* On mobile the panel goes edge-to-edge, so kill side rounding/borders
	 * and keep only the top/bottom curves where the bar/embed meet the page. */
	.dh-post-media__event-bar {
		border-radius: 0;
		border-inline: none;
	}
	.dh-post-media .vid-media {
		border-radius: 0;
		border-inline: none;
	}
	.dh-post-media__event-bar + .dh-video .vid-media { border-radius: 0; }
}


/* ════════════════════════════════════════════════════════════════
   POST AUTHOR BIO — DS `.author-card-panel`
   Placed at the very bottom of single.php (after share + prev/next).
   Pure E-E-A-T signal — author identity, role, long bio, social links.
   The panel ships its own `bg-card` + border + padding, so no extra
   visual chrome is needed beyond width/margin.
   ════════════════════════════════════════════════════════════════ */
.dh-post-author-bio {
	/* `width: 100%` mirrors `.dh-pagination-simple` above — without it the
	 * `display: flex` panel shrink-wraps inside the grid cell and ends up
	 * narrower than the prev/next block above, creating a visible step. */
	width: 100%;
	max-width: var(--max-w-narrow);
	margin-inline: auto;
	margin-top: var(--sp-16); /* breathing room over prev/next pagination */
}
.dh-post-author-bio .author-name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ease-fast);
}
.dh-post-author-bio .author-name a:hover,
.dh-post-author-bio .author-name a:focus-visible {
	border-bottom-color: currentColor;
}


/* ════════════════════════════════════════════════════════════════
   POST RELATED — `.al-grid` with 3 landing-style `.al-card` items.
   Sits below `.dh-post-author-bio`. Breaks out of the prose column
   (max-w-narrow = 800px is too tight for 3 cards) and renders at
   `--max-w` (1200px) — same wider rail used for `.dh-post-media`.
   ════════════════════════════════════════════════════════════════ */
body.single .site-main.has-aside > .dh-post-related {
	grid-column: 1 / -1; /* span the full grid, escape the 800px center column */
}
.dh-post-related {
	width: 100%;
	max-width: var(--max-w);
	margin-inline: auto;
	margin-top: var(--sp-16);
}
.dh-post-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}
.dh-post-related__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fg);
}
@media (max-width: 768px) {
	.dh-post-related__title { font-size: 1.25rem; }
	.dh-post-related        { margin-top: var(--sp-12); }
}


/* ════════════════════════════════════════════════════════════════
   ARCHIVE — Block D variant (`.dh-archive-accent-col`)
   Sidebar filter is `position: sticky` in DS; bump `top` so it clears
   the floating `.dh-nav` (z=50) and the WP admin bar where present.
   ════════════════════════════════════════════════════════════════ */

/* DS sets `.al-card { display: flex }` which beats the `[hidden]` attribute's
 * default `display: none` rule (class selector wins over UA stylesheet on
 * `[hidden]`). Without this fix the JS filter sets `card.hidden = true` but
 * the card stays visible. Higher specificity than `.al-card` keeps cards
 * collapsed when filtered out. */
.al-card[hidden] { display: none; }

.dh-archive-accent-col .al-filter {
	top: calc(var(--nav-height, 64px) + var(--nav-top, 12px) + var(--sp-4));
}
body.admin-bar .dh-archive-accent-col .al-filter {
	top: calc(var(--nav-height, 64px) + var(--nav-top, 12px) + var(--sp-4) + 32px);
}
@media (max-width: 782px) {
	body.admin-bar .dh-archive-accent-col .al-filter {
		top: calc(var(--nav-height, 64px) + var(--nav-top, 12px) + var(--sp-4) + 46px);
	}
}
@media (max-width: 768px) {
	/* On mobile the DS layout collapses sidebar above list; sticky positioning
	 * is replaced by `position: static`, so our nav-clearance override is moot.
	 * Reset to defaults to keep the cascade tidy. */
	.dh-archive-accent-col .al-filter,
	body.admin-bar .dh-archive-accent-col .al-filter {
		top: auto;
	}
}


/* ════════════════════════════════════════════════════════════════
   READING PROGRESS BAR — accent tinting
   (mirrors `.al-card[data-accent]` semantics)
   ════════════════════════════════════════════════════════════════ */
.dh-rpb[data-accent="primary"] .rpb-fill { background: var(--accent-fill); }
.dh-rpb[data-accent="fx"]      .rpb-fill { background: var(--fx); }
.dh-rpb[data-accent="insight"] .rpb-fill { background: var(--insight); }
.dh-rpb[data-accent="mint"]    .rpb-fill { background: var(--mint); }
.dh-rpb[data-accent="amber"]   .rpb-fill { background: var(--micro-amber); }
.dh-rpb[data-accent="coral"]   .rpb-fill { background: var(--micro-coral); }