/*
 * সহজ brand tokens — transcribed from config/brand.yaml (science_news_desk repo).
 * If the palette changes there, mirror the change here; this file is the
 * one obvious place site-side.
 */

@font-face {
	font-family: 'Tiro Bangla';
	src: url('../fonts/TiroBangla-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Editorial labels/meta (card topic tag etc.) render in plain Arial instead
   of a downloaded @font-face (survey S5.22): Liberation Sans is metric-
   compatible with Arial/Helvetica, so this stack renders identically on
   effectively every device — Arial itself on Windows/Mac, Liberation Sans
   already present as a system font on most Linux/Android builds — for zero
   bytes over the wire. No @font-face needed; the two Liberation Sans TTFs
   (825 KB combined, uncompressed) that used to back an @font-face named
   'Arial' here are gone from assets/fonts/. templates/fonts/ (a separate
   copy used by the Python card/carousel image-rendering pipeline, not this
   site) is untouched — that one needs real font files since PIL has no
   system-font fallback. */

:root {
	/* Brand primitives — fixed brand-color devices (topic pills, the
	   broken-square hero blocks, CTA buttons) that stay literally
	   navy/maroon/amber in both themes on purpose. They're deliberate
	   solid-color blocks, not page chrome, so they don't invert. */
	--sohoj-primary-navy: #0B1D3A;
	--sohoj-accent-cyan: #2FD9C4;
	--sohoj-accent-amber: #F5A623;
	--sohoj-bg-light: #F7F5F0;
	--sohoj-text-dark: #14181F;
	--sohoj-gtk-coral: #E85D5D;
	--sohoj-accent-maroon: #780000;

	/* Chamfer size for the RatLab-style angular card/chip/button system
	   (assets/css/rl-rectangle.css) — one shared value so both files agree
	   on it. See ratlab_theme_implementation_plan.md Phase 1. */
	--sohoj-cut: 14px;

	/* Theme-adaptive semantic tokens — page chrome (body, header, cards,
	   panels, borders, links, shadows) reads these instead of the
	   primitives above, so the light/dark toggle (functions.php's
	   sohoj_theme_toggle button + assets/js/nav.js + functions.php's inline
	   no-FOUC init script)
	   repaints the whole site by swapping this one set of values. Defaults
	   here are the light theme. */
	--sohoj-bg: var(--sohoj-bg-light);
	--sohoj-surface: #FFFFFF;
	--sohoj-text: var(--sohoj-text-dark);
	--sohoj-text-muted: rgba(20, 24, 31, 0.6);
	--sohoj-text-muted-soft: rgba(20, 24, 31, 0.5);
	--sohoj-heading: var(--sohoj-primary-navy);
	--sohoj-link: var(--sohoj-primary-navy);
	--sohoj-border: var(--sohoj-primary-navy);
	--sohoj-border-soft: rgba(11, 29, 58, 0.12);
	--sohoj-shadow: var(--sohoj-primary-navy);
	--sohoj-shadow-soft: rgba(11, 29, 58, 0.12);
	--sohoj-label-accent: var(--sohoj-accent-maroon);
	--sohoj-overlay: rgba(11, 29, 58, 0.55);
}

/* Dark palette, applied automatically when the visitor's OS/browser prefers
   dark AND they haven't made an explicit choice yet (:not([data-theme="light"])
   lets an explicit light choice keep winning over a dark system preference). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sohoj-bg: #0E1626;
		--sohoj-surface: #16203A;
		--sohoj-text: #ECEAE3;
		--sohoj-text-muted: rgba(236, 234, 227, 0.65);
		--sohoj-text-muted-soft: rgba(236, 234, 227, 0.5);
		--sohoj-heading: #F4F2EA;
		--sohoj-link: #7FC4E8;
		--sohoj-border: rgba(236, 234, 227, 0.3);
		--sohoj-border-soft: rgba(236, 234, 227, 0.16);
		--sohoj-shadow: rgba(236, 234, 227, 0.4);
		--sohoj-shadow-soft: rgba(0, 0, 0, 0.5);
		--sohoj-label-accent: var(--sohoj-gtk-coral);
		--sohoj-overlay: rgba(0, 0, 0, 0.65);
	}
}

/* Explicit toggle — functions.php's inline no-FOUC script sets data-theme on
   <html> before first paint from localStorage; assets/js/nav.js's click
   handler updates it live. Always wins over the system preference either
   direction. */
:root[data-theme="dark"] {
	--sohoj-bg: #0E1626;
	--sohoj-surface: #16203A;
	--sohoj-text: #ECEAE3;
	--sohoj-text-muted: rgba(236, 234, 227, 0.65);
	--sohoj-text-muted-soft: rgba(236, 234, 227, 0.5);
	--sohoj-heading: #F4F2EA;
	--sohoj-link: #7FC4E8;
	--sohoj-border: rgba(236, 234, 227, 0.3);
	--sohoj-border-soft: rgba(236, 234, 227, 0.16);
	--sohoj-shadow: rgba(236, 234, 227, 0.4);
	--sohoj-shadow-soft: rgba(0, 0, 0, 0.5);
	--sohoj-label-accent: var(--sohoj-gtk-coral);
	--sohoj-overlay: rgba(0, 0, 0, 0.65);
}

/* A3a rule 1 — rectangular, minimalist: no rounded corners anywhere on the
   public site. This stylesheet only ever loads on the front end and inside
   the block-editor iframe (see functions.php's sohoj_editor_styles) —
   never wp-admin's own chrome — so a blanket rule here is safe and is the
   one place this can't be missed card-by-card as new templates get added. */
*, *::before, *::after {
	border-radius: 0 !important;
}

/* A3a rule 1 continued — 2px hard borders and flat offset shadows (never
   blurred) are the site's structural signature, borrowed from
   rationalitylab.com's box treatment. Reusable so new components stay
   consistent instead of each one inventing its own shadow value. */
.sohoj-hard-shadow {
	box-shadow: 4px 4px 0 var(--sohoj-shadow);
}

body {
	background-color: var(--sohoj-bg);
	color: var(--sohoj-text);
	font-family: 'Tiro Bangla', sans-serif;
	transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-title a {
	font-family: 'Tiro Bangla', sans-serif;
	color: var(--sohoj-heading);
}

a {
	color: var(--sohoj-link);
}

a:hover, a:focus {
	color: var(--sohoj-accent-cyan);
}

.site-header {
	background-color: var(--sohoj-bg);
	transition: background-color 0.15s ease;
}

/* Safety net: any oversized image (uploaded at native resolution) should
   never overflow its container and break surrounding layout. */
img {
	max-width: 100%;
	height: auto;
}

/* Header logo — the source wordmark PNG is 988x387px (full card-graphic
   resolution); cap it to a sane header size instead of relying on GP's
   Customizer logo-width setting, which isn't configured on a fresh install. */
.site-logo img,
.header-image {
	max-width: 220px;
	width: 100%;
	height: auto;
}

/* Dark-mode logo swap (functions.php's sohoj_theme_logo_swap) — same
   two-elements-plus-CSS-toggle pattern as the moon/sun and hamburger/close
   icon swaps above. */
.sohoj-logo-dark-variant {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sohoj-logo-light-variant {
		display: none;
	}

	:root:not([data-theme="light"]) .sohoj-logo-dark-variant {
		display: inline-block;
	}
}

:root[data-theme="dark"] .sohoj-logo-light-variant {
	display: none;
}

:root[data-theme="dark"] .sohoj-logo-dark-variant {
	display: inline-block;
}

.entry-content a {
	text-decoration-color: var(--sohoj-accent-cyan);
}

/* CTA elements — amber, reserved for this per social_media_research.md §7 rec. 7.
   Deliberately fixed-color (not theme-adaptive): a bright amber fill with
   dark text keeps its own internal contrast regardless of page theme, same
   logic as the topic pill/hero CTA blocks below. GP's own core CSS sets an
   explicit system-font stack on button/input/select/textarea (main.min.css),
   which silently overrides the inherited Tiro Bangla from body — explicit
   font-family here is what makes A3a rule 3 ("Tiro Bangla everywhere")
   actually reach buttons instead of just headline/body text. */
.button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	background-color: var(--sohoj-accent-amber);
	color: var(--sohoj-text-dark);
	border: none;
	font-family: 'Tiro Bangla', sans-serif;
	font-weight: 600;
}

.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--sohoj-primary-navy);
	color: var(--sohoj-bg-light);
}

/* "জেনে রাখা ভালো" section — wrap it in a Group block with this custom CSS
   class in the block editor (Advanced panel) when pasting long_form/<id>.yaml's
   body_bn.good_to_know per wordpress_deployment_plan.md's A4 field mapping.
   The translucent coral tint is alpha-blended over whatever sits behind it
   (surface color), so it self-adapts across themes without its own token. */
.sohoj-good-to-know {
	border-left: 6px solid var(--sohoj-gtk-coral);
	background-color: rgba(232, 93, 93, 0.08);
	padding: 1.5rem 1.75rem;
	margin: 2.5rem 0;
}

/* Higher specificity than .entry-content h2 below on purpose — good-to-know
   headings stay coral even though they're inside .entry-content. */
.entry-content .sohoj-good-to-know h2,
.entry-content .sohoj-good-to-know h3 {
	color: var(--sohoj-gtk-coral);
	text-transform: none;
	letter-spacing: normal;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 1.15rem;
	margin-top: 0;
}

/* "সূত্র" (Sources/citations) section at the end of an article — matches
   templates/long_form_preview.html's .citations treatment. */
.sohoj-sources {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 3px solid var(--sohoj-border-soft);
}

.entry-content .sohoj-sources h2 {
	/* "সূত্র" is Bengali (see comment above) — Arial has no Bengali glyphs,
	   same mismatch as .entry-content h2 above; Tiro Bangla matches the
	   rest of the article. */
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sohoj-text-muted);
	margin-bottom: 0.5rem;
}

.sohoj-sources ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sohoj-sources li {
	margin-top: 0.35rem;
}

.sohoj-sources a {
	color: var(--sohoj-label-accent);
	text-decoration: none;
}

.sohoj-sources a:hover {
	text-decoration: underline;
}

/* Topic/category pill above the headline — maroon, matching the card
   graphics' and long-form preview's topic tag treatment. Output by
   functions.php's sohoj_topic_pill() on the generate_before_entry_title
   hook. Fixed-color like the CTA buttons above: a solid maroon block with
   white text keeps its own contrast regardless of page theme. */
.sohoj-topic-tag {
	display: inline-block;
	background-color: var(--sohoj-accent-maroon);
	color: #fff;
	font-family: Arial, 'Liberation Sans', 'Tiro Bangla', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.35rem 0.9rem;
	text-decoration: none;
	margin-bottom: 0.75rem;
}

.sohoj-topic-tag:hover {
	background-color: var(--sohoj-primary-navy);
	color: #fff;
}

/* Editorial identity for single articles — larger headline, uppercase
   maroon section labels for background/method/findings/etc (H2s), matching
   templates/long_form_preview.html so the site reads as the same
   publication as the cards and the local preview, not generic WordPress. */
.single-post .entry-title {
	font-size: 2.1rem;
	line-height: 1.3;
	margin-top: 0.25rem;
}

.single-post .entry-content {
	font-size: 1.1rem;
	line-height: 1.8;
}

/* Section labels (Background/Method/Findings/etc.) — this rule's Arial +
   uppercase treatment was copied from the card/carousel image templates,
   where those graphics show literal English caps words. The live pipeline
   (wp_rest.py's _SECTION_LABELS) always writes real Bengali headings here
   ("পটভূমি", "পদ্ধতি", …) — Arial/Liberation Sans have no Bengali glyphs, so
   the browser was silently falling through to a generic system Bengali
   font that doesn't match Tiro Bangla everywhere else on the page.
   text-transform: uppercase is a no-op on Bengali script; left in case
   English ever appears here, but it's not doing anything today. */
.entry-content h2 {
	font-family: 'Tiro Bangla', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sohoj-label-accent);
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

/* Elevated "card" content area, matching the preview template's page card.
   A3a rule 1: hard-offset shadow, never blurred — soft/blurred shadows are
   the fastest way for a rectangular design to start reading as generic
   WordPress again. Explicit surface background so this doesn't silently
   stay white in dark mode (GP's own separate-containers layout sets a
   literal white background on .inside-article otherwise). */
.separate-containers .inside-article {
	background-color: var(--sohoj-surface);
	box-shadow: 4px 4px 0 var(--sohoj-shadow-soft);
}

/* Header — 2px hard bottom rule (A3a mechanics note: 2px, never 1px) in
   place of a drop shadow, replacing the old thin top accent. */
.site-header {
	border-top: none;
	border-bottom: 2px solid var(--sohoj-border);
}

/* Footer widgets / footer bar — GP core sets its own background on
   .footer-widgets AND .site-info (the <footer> bar holding the follow
   icons + copyright line) via its own inline CSS, hardcoded to
   var(--base-3)/#ffffff and never swapped for dark mode. .site-footer is
   just the outer wrapper div GP doesn't style itself, so it was never the
   element that needed overriding — .site-info was the one actually
   missing, which is why the follow icons/© line stayed on a white bar in
   dark mode even though their own text/icon colors switched to near-white
   (survey S4.18: bug was a missing selector, not a contrast value). */
.site-footer,
.footer-widgets,
.site-info {
	background-color: var(--sohoj-surface);
	color: var(--sohoj-text);
}

.site-footer a,
.footer-widgets a,
.site-info a {
	color: var(--sohoj-link);
}

/* ==========================================================================
   A3a — homepage design (front-page.php)
   Category strip nav (GP's own utility nav row has been removed, see
   functions.php), broken-square hero, Latest grid, Trending rail. See
   wordpress_deployment_plan.md's A3a for the full spec this implements.
   ========================================================================== */

/* --- Category strip nav — now the header's only nav row (the separate
   utility nav row was removed; this strip previously ran navy-on-white,
   swapped to light-on-navy so it reads as the header's calm base rather
   than a heavy second navy bar). --- */

.sohoj-category-strip {
	background-color: var(--sohoj-bg);
	border-bottom: 2px solid var(--sohoj-border);
	transition: background-color 0.15s ease;
}

.sohoj-category-strip-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
}

/* The category menu scrolls horizontally on its own; the tools cluster
   (search/hamburger/theme icons) stays pinned to the right instead of
   scrolling away with it. */
.sohoj-category-strip-scroll {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sohoj-category-strip-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.sohoj-category-strip-menu li {
	flex-shrink: 0;
}

.sohoj-category-strip-menu a {
	display: block;
	padding: 0.8rem 1.15rem;
	color: var(--sohoj-text);
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 0.95rem;
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

/* Amber underline is the one hover/active signal here (no text-color swap)
   so the affordance stays legible in both themes without needing a second
   dark-mode-safe hover color. */
.sohoj-category-strip-menu a:hover {
	border-bottom-color: var(--sohoj-accent-amber);
}

.sohoj-category-strip-menu li.current-menu-item > a,
.sohoj-category-strip-menu li.current-menu-parent > a {
	border-bottom-color: var(--sohoj-accent-amber);
	font-weight: 700;
}

/* --- Nav tools cluster: search / hamburger / theme-toggle icon buttons,
   pinned to the right of the category strip so they never scroll away
   with the horizontally-scrolling category menu. --- */

.sohoj-nav-tools {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	border-left: 2px solid var(--sohoj-border);
}

.sohoj-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	background-color: transparent;
	color: var(--sohoj-heading);
	border: none;
	border-left: 2px solid var(--sohoj-border);
	cursor: pointer;
	padding: 0;
}

.sohoj-nav-tools .sohoj-icon-btn:first-child {
	border-left: none;
}

.sohoj-icon-btn:hover,
.sohoj-icon-btn:focus-visible,
.sohoj-icon-btn[aria-expanded="true"] {
	background-color: var(--sohoj-heading);
	color: var(--sohoj-bg);
}

/* Buttons that swap glyph on open/close (hamburger <-> X) render both SVGs
   and let this rule show/hide by aria-expanded, so the swap is instant with
   no JS re-render. */
.sohoj-icon-btn .sohoj-icon-open {
	display: none;
}

.sohoj-icon-btn[aria-expanded="true"] .sohoj-icon-closed {
	display: none;
}

.sohoj-icon-btn[aria-expanded="true"] .sohoj-icon-open {
	display: inline-flex;
}

/* Theme-toggle button — swaps moon/sun by the *resolved* theme (system
   preference or explicit data-theme), not by its own interaction state, so
   it mirrors the same :root selectors the token overrides above use. */
.sohoj-theme-toggle .sohoj-icon-sun {
	display: none;
}

.sohoj-theme-toggle .sohoj-icon-moon {
	display: inline-flex;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sohoj-theme-toggle .sohoj-icon-sun {
		display: inline-flex;
	}

	:root:not([data-theme="light"]) .sohoj-theme-toggle .sohoj-icon-moon {
		display: none;
	}
}

:root[data-theme="dark"] .sohoj-theme-toggle .sohoj-icon-sun {
	display: inline-flex;
}

:root[data-theme="dark"] .sohoj-theme-toggle .sohoj-icon-moon {
	display: none;
}

/* --- Secondary panel: off-canvas, slides in from the right, opened by the
   hamburger button. Holds the utility links that used to live in GP's own
   'primary' nav row before that row was removed (see functions.php). --- */

.sohoj-secondary-panel-overlay {
	position: fixed;
	inset: 0;
	background-color: var(--sohoj-overlay);
	z-index: 40;
}

.sohoj-secondary-panel-inner {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 320px;
	max-width: 85vw;
	background-color: var(--sohoj-surface);
	border-left: 2px solid var(--sohoj-border);
	z-index: 41;
	padding: 1.25rem 1.5rem 2rem;
	overflow-y: auto;
	box-shadow: -4px 0 0 var(--sohoj-shadow-soft);
}

.sohoj-secondary-panel-close {
	margin-left: auto;
	margin-bottom: 1.5rem;
	border: 2px solid var(--sohoj-border);
}

.sohoj-secondary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sohoj-secondary-menu li {
	border-bottom: 2px solid var(--sohoj-border-soft);
}

.sohoj-secondary-menu li:first-child {
	border-top: 2px solid var(--sohoj-border-soft);
}

.sohoj-secondary-menu a {
	display: block;
	padding: 1rem 0.25rem;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 1.1rem;
	color: var(--sohoj-text);
	text-decoration: none;
}

.sohoj-secondary-menu a:hover,
.sohoj-secondary-menu a:focus-visible {
	color: var(--sohoj-accent-cyan);
}

/* --- Search panel: full-width dropdown under the header, native WP
   search (searchform.php) styled to the rectangular/hard-border system.
   Deliberately fixed-navy (not theme-adaptive): it's a solid dark overlay
   panel with cream/white internals, so its own contrast holds regardless
   of the page theme underneath it, same reasoning as the CTA buttons. --- */

.sohoj-search-panel {
	background-color: var(--sohoj-primary-navy);
	border-bottom: 2px solid var(--sohoj-primary-navy);
}

.sohoj-search-panel-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
}

.sohoj-search-form {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
}

.sohoj-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 2px solid var(--sohoj-bg-light);
	background-color: #fff;
	color: var(--sohoj-text-dark);
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 1rem;
	padding: 0.6rem 0.9rem;
}

.sohoj-search-input:focus {
	outline: 2px solid var(--sohoj-accent-amber);
	outline-offset: -2px;
}

.sohoj-search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	flex-shrink: 0;
	background-color: var(--sohoj-accent-amber);
	color: var(--sohoj-text-dark);
	border: none;
	cursor: pointer;
}

.sohoj-search-submit:hover {
	background-color: var(--sohoj-accent-cyan);
}

.sohoj-search-panel-close {
	flex-shrink: 0;
	width: 3rem;
	color: var(--sohoj-bg-light);
	border: 2px solid var(--sohoj-bg-light);
}

.sohoj-search-panel-close:hover,
.sohoj-search-panel-close:focus-visible {
	background-color: var(--sohoj-bg-light);
	color: var(--sohoj-primary-navy);
}

@media (max-width: 600px) {
	.sohoj-search-panel-inner {
		padding: 1rem;
	}
}

/* --- Hero: lead article, broken-square treatment (A3a rule 2). Fixed-navy
   block by design, like the topic pill/CTA buttons — it's a deliberate
   solid-color device, not page chrome, so it doesn't invert with theme. --- */

.sohoj-hero {
	position: relative;
	margin: 0 0 3rem;
	background-color: var(--sohoj-primary-navy);
}

.sohoj-hero-media {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 420px;
	overflow: hidden;
	background-color: var(--sohoj-primary-navy);
}

.sohoj-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sohoj-hero-topic {
	position: relative;
	z-index: 3;
	display: inline-block;
	background-color: var(--sohoj-accent-maroon);
	color: #fff;
	font-family: Arial, 'Liberation Sans', 'Tiro Bangla', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.sohoj-hero-headline {
	position: relative;
	z-index: 2;
	background-color: var(--sohoj-primary-navy);
	max-width: 44rem;
	padding: 1.5rem 1.75rem 1.75rem;
}

.sohoj-hero-headline h2 {
	margin: 0;
	color: #fff;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 1.9rem;
	line-height: 1.35;
}

.sohoj-hero-headline a {
	color: #fff;
	text-decoration: none;
}

.sohoj-hero-rule {
	display: block;
	width: 3.5rem;
	height: 3px;
	background-color: var(--sohoj-accent-cyan);
	margin-top: 1rem;
}

.sohoj-hero-cta {
	position: relative;
	z-index: 1;
	display: inline-block;
	background-color: var(--sohoj-accent-amber);
	color: var(--sohoj-text-dark);
	font-family: 'Tiro Bangla', sans-serif;
	font-weight: 700;
	padding: 0.65rem 1.5rem;
	text-decoration: none;
}

.sohoj-hero-cta:hover {
	background-color: #fff;
	color: var(--sohoj-primary-navy);
}

/* When there IS a lead image: pull the three blocks up over its bottom
   edge at staggered offsets — the "broken square" stagger. Hand-tuned
   values, re-checked at 375px per the mobile note below rather than just
   scaled down. */
.sohoj-hero.has-media .sohoj-hero-topic {
	margin: -3rem 0 0 1.5rem;
}

.sohoj-hero.has-media .sohoj-hero-headline {
	margin: 0.75rem 0 0 1.5rem;
}

.sohoj-hero.has-media .sohoj-hero-cta {
	margin: -1.25rem 0 0 1.5rem;
}

/* No lead image yet (e.g. WP post 11 — seo.lead_image doesn't exist, see
   A7's progress log): no photo to overlap, so the stagger comes from
   alternating left/right margins on solid navy instead of vertical
   overlap — still reads as intentional, not a degraded fallback. */
.sohoj-hero.no-media {
	padding: 2rem 1.5rem 2.25rem;
}

.sohoj-hero.no-media .sohoj-hero-topic {
	margin: 0 0 1rem;
}

.sohoj-hero.no-media .sohoj-hero-headline {
	margin: 0 3rem 0 0;
	padding: 0;
	max-width: none;
}

.sohoj-hero.no-media .sohoj-hero-headline h2 {
	font-size: 1.9rem;
}

.sohoj-hero.no-media .sohoj-hero-cta {
	margin: 1.25rem 0 0 3rem;
}

@media (max-width: 600px) {
	.sohoj-hero.has-media .sohoj-hero-topic,
	.sohoj-hero.has-media .sohoj-hero-headline,
	.sohoj-hero.has-media .sohoj-hero-cta,
	.sohoj-hero.no-media .sohoj-hero-headline,
	.sohoj-hero.no-media .sohoj-hero-cta {
		display: block;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		width: 100%;
	}

	.sohoj-hero.no-media .sohoj-hero-topic {
		margin-left: 0;
	}

	.sohoj-hero.has-media .sohoj-hero-topic {
		margin-top: -2.25rem;
	}

	/* Full width here, so the desktop stagger's upward pull would tuck the
	   button under the headline block and hide half its label. */
	.sohoj-hero.has-media .sohoj-hero-cta {
		margin-top: 0;
	}

	.sohoj-hero-media {
		width: 100%;
		aspect-ratio: 16 / 9;
		max-height: 220px;
	}

	.sohoj-hero-headline {
		padding: 1.25rem;
	}

	.sohoj-hero-headline h2 {
		font-size: 1.5rem;
	}

	.sohoj-hero.no-media {
		padding: 1.5rem 1.25rem 1.75rem;
	}

	.sohoj-hero.no-media .sohoj-hero-headline h2 {
		font-size: 1.6rem;
	}

	.sohoj-hero-cta {
		text-align: center;
	}
}

/* --- Shared section heading (small solid square bullet, A3a §3) --- */

.sohoj-section-heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 1.3rem;
	color: var(--sohoj-heading);
	border-bottom: 2px solid var(--sohoj-border);
	padding-bottom: 0.6rem;
	margin: 0 0 1.5rem;
}

.sohoj-section-bullet {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	background-color: var(--sohoj-accent-amber);
	flex-shrink: 0;
}

.sohoj-section-bullet.is-cyan {
	background-color: var(--sohoj-accent-cyan);
}

/* --- Main content area: Latest grid (2/3) + Trending rail (1/3) --- */

.sohoj-homepage-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem 3rem;
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (max-width: 900px) {
	.sohoj-homepage-main {
		grid-template-columns: 1fr;
	}
}

.sohoj-latest-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.75rem;
}

@media (max-width: 1100px) {
	.sohoj-latest-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sohoj-latest-grid {
		grid-template-columns: 1fr;
	}
}

.sohoj-latest-card {
	position: relative;
	margin: 0 0 1.25rem;
}

.sohoj-latest-card-media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--sohoj-primary-navy);
}

.sohoj-latest-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sohoj-latest-card-tag {
	position: relative;
	z-index: 1;
	display: inline-block;
	background-color: var(--sohoj-accent-maroon);
	color: #fff;
	font-family: Arial, 'Liberation Sans', 'Tiro Bangla', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	text-decoration: none;
}

.sohoj-latest-card.has-media .sohoj-latest-card-tag {
	margin: -1rem 0 0 1rem;
}

.sohoj-latest-card.no-media .sohoj-latest-card-tag {
	margin: 0.75rem 0 0;
}

.sohoj-latest-card h3 {
	margin: 0.75rem 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.4;
}

.sohoj-latest-card h3 a {
	color: var(--sohoj-text);
	text-decoration: none;
	font-family: 'Tiro Bangla', sans-serif;
}

.sohoj-latest-card h3 a:hover {
	color: var(--sohoj-heading);
	text-decoration: underline;
}

.sohoj-latest-card time {
	display: block;
	font-family: Arial, 'Liberation Sans', sans-serif;
	font-size: 0.75rem;
	color: var(--sohoj-text-muted);
}

/* --- Right rail (formerly "Trending" — see front-page.php's sohoj_format
   tax_query note; holds the Longform explainer feed as of 2026-08-28's
   news/science swap, News Daily lives in the main column now). A tinted
   cyan band + thicker left border, the one cool-color accent already used
   sparingly elsewhere on the homepage (A3a's hero rule), so this column
   reads as its own distinct content type next to the main grid rather than
   a plain sidebar list — same rgba-tint device .sohoj-good-to-know already
   uses for coral. --- */

.sohoj-trending {
	border-left: 4px solid var(--sohoj-accent-cyan);
	background-color: rgba(47, 217, 196, 0.08);
	padding: 1.5rem;
}

.sohoj-trending-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sohoj-trending-list li {
	display: flex;
	gap: 0.85rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--sohoj-border-soft);
}

.sohoj-trending-list li:first-child {
	padding-top: 0;
}

.sohoj-trending-list li:last-child {
	border-bottom: none;
}

.sohoj-trending-num {
	font-family: Arial, 'Liberation Sans', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--sohoj-heading);
	flex-shrink: 0;
}

.sohoj-trending-list a {
	display: block;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 0.95rem;
	color: var(--sohoj-text);
	text-decoration: none;
	line-height: 1.4;
}

.sohoj-trending-list a:hover {
	color: var(--sohoj-heading);
	text-decoration: underline;
}

.sohoj-trending-meta {
	display: block;
	font-family: Arial, 'Liberation Sans', 'Tiro Bangla', sans-serif;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sohoj-text-muted-soft);
	margin-top: 0.2rem;
}

@media (max-width: 900px) {
	.sohoj-trending {
		border-left: none;
		border-top: 4px solid var(--sohoj-accent-cyan);
		padding: 1.25rem 0.25rem;
		/* Grid items default to min-width: auto, sized to their unscrolled max-content —
		   without this, .sohoj-trending-list's overflow-x: auto below never actually clips
		   anything, because .sohoj-trending itself (the grid item / aside) still grows to fit
		   the list's full 4-cards-wide content, forcing .sohoj-homepage-main's shared 1fr track
		   (and everything else in it, including .sohoj-latest) to blow out past the viewport.
		   Same fix .sohoj-category-strip-scroll already has, just missing here. */
		min-width: 0;
	}

	.sohoj-trending-list {
		display: flex;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 1.25rem;
	}

	.sohoj-trending-list li {
		flex: 0 0 220px;
		flex-direction: column;
		border-bottom: none;
		border-right: 1px solid var(--sohoj-border-soft);
		padding: 0 1.25rem 0 0;
	}

	.sohoj-trending-list li:last-child {
		border-right: none;
	}
}

/* --- "See More" buttons, one per homepage column. Tied to POSITION, not
   content type — whichever feed occupies the main column gets the amber
   button (matches the hero's own "পড়ুন →" CTA language), whichever occupies
   the cyan rail gets the cyan outline, so a future swap of what feeds each
   column (see front-page.php's 2026-08-28 news/science swap) never needs a
   matching CSS rename. Two buttons, two colors, reusing .sohoj-hero-cta's
   shape rather than a new button system. --- */

.sohoj-see-more {
	display: inline-block;
	margin-top: 1.5rem;
	font-family: 'Tiro Bangla', sans-serif;
	font-weight: 700;
	padding: 0.6rem 1.4rem;
	text-decoration: none;
}

.sohoj-see-more-main {
	background-color: var(--sohoj-accent-amber);
	color: var(--sohoj-text-dark);
}

.sohoj-see-more-main:hover {
	background-color: var(--sohoj-primary-navy);
	color: #fff;
}

.sohoj-see-more-rail {
	background-color: transparent;
	color: var(--sohoj-heading);
	border: 2px solid var(--sohoj-accent-cyan);
}

.sohoj-see-more-rail:hover {
	background-color: var(--sohoj-accent-cyan);
	color: var(--sohoj-text-dark);
}

/* --- Empty state, shown while there's only one article in the pipeline --- */

.sohoj-empty-state {
	font-family: 'Tiro Bangla', sans-serif;
	color: var(--sohoj-text-muted);
	padding: 0.5rem 0 1.5rem;
}

/* ==========================================================================
   Social — follow icons (header/footer) + per-post share buttons.
   See wordpress_deployment_plan.md's build-chunk progress log.
   ========================================================================== */

.sohoj-social-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sohoj-secondary-panel-social {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--sohoj-border-soft);
}

.sohoj-secondary-panel-social .sohoj-share-label {
	margin-bottom: 0.75rem;
}

.sohoj-footer-social {
	display: flex;
	justify-content: center;
	padding: 1rem 1.5rem;
}

/* Phones: the follow row (now with RSS) and the copyright no longer fit side
   by side, so they stack. */
@media (max-width: 600px) {
	.inside-site-info {
		flex-direction: column;
		gap: 0.75rem;
	}

	.sohoj-footer-social {
		padding-bottom: 0;
	}
}

.sohoj-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.6rem;
	background-color: transparent;
	border: 2px solid var(--sohoj-border);
	color: var(--sohoj-heading);
	font-family: Arial, 'Liberation Sans', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.sohoj-social-links a:hover,
.sohoj-social-links a:focus-visible {
	background-color: var(--sohoj-heading);
	color: var(--sohoj-bg);
}

.sohoj-share {
	margin: 2rem 0;
	padding: 1.25rem 0;
	border-top: 2px solid var(--sohoj-border-soft);
	border-bottom: 2px solid var(--sohoj-border-soft);
}

.sohoj-share-label {
	/* Always Bengali text ("ফলো করুন" / "শেয়ার করুন" — functions.php's
	   sohoj_footer_social_links()/sohoj_share_buttons_markup()) — Tiro
	   Bangla, not the Arial/Liberation Sans stack used for the actual
	   English platform-name buttons below. */
	display: block;
	font-family: 'Tiro Bangla', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sohoj-text-muted);
	margin-bottom: 0.75rem;
}

.sohoj-share-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sohoj-share-buttons button,
.sohoj-share-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 2.5rem;
	padding: 0 0.85rem;
	background-color: var(--sohoj-surface);
	border: 2px solid var(--sohoj-border);
	color: var(--sohoj-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
}

/* The static <a> links (functions.php's sohoj_share_buttons_markup()) carry
   real English platform names — Facebook/X/WhatsApp/LinkedIn/Email — so
   they stay on the Arial stack. The <button>s share.js injects
   ("শেয়ার" / "লিংক কপি" / "কপি হয়েছে ✓") are Bengali, so they need Tiro
   Bangla instead — same font, different family per element, hence the
   split from the shared box-model rule above. */
.sohoj-share-buttons a {
	font-family: Arial, 'Liberation Sans', sans-serif;
}

.sohoj-share-buttons button {
	font-family: 'Tiro Bangla', sans-serif;
}

.sohoj-share-buttons button:hover,
.sohoj-share-buttons a:hover,
.sohoj-share-buttons button:focus-visible,
.sohoj-share-buttons a:focus-visible {
	background-color: var(--sohoj-heading);
	color: var(--sohoj-bg);
}

.sohoj-share-buttons .sohoj-share-copied {
	background-color: var(--sohoj-accent-cyan);
	color: var(--sohoj-text-dark);
}