/*!
 * SasthoInfo Theme — Main Stylesheet
 * Designed & Developed by Milon Mahmud
 *
 * Table of contents:
 * 1. CSS Custom Property Fallbacks
 * 2. Reset & Base
 * 3. Layout / Container
 * 4. Accessibility helpers
 * 5. Header
 * 6. Navigation
 * 7. Hero
 * 8. Post Cards / Grid
 * 9. Buttons
 * 10. Single Post
 * 11. Comments
 * 12. Sidebar / Widgets
 * 13. Footer
 * 14. 404 / Search / Archive headers
 * 15. Dark Mode
 * 16. Ads
 */

/* ==========================================================================
   1. CSS Custom Property Fallbacks
   (Overridden per-site by inline styles generated in
   inc/template-functions.php::sasthoinfo_dynamic_css())
   ========================================================================== */
:root {
	--si-container-width: 1200px;
	--si-content-width: 800px;
	--si-sidebar-width: 320px;
	--si-radius: 14px;
	--si-card-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
	--si-spacing: 24px;

	--si-header-bg-start: #4f46e5;
	--si-header-bg-end: #7c3aed;
	--si-header-text: #ffffff;
	--si-logo-width: 160px;
	--si-logo-height: 44px;

	--si-nav-font-size: 16px;
	--si-nav-font-weight: 600;
	--si-nav-spacing: 28px;
	--si-nav-hover: #ffe066;

	--si-hero-bg-start: #4f46e5;
	--si-hero-bg-end: #7c3aed;

	--si-footer-bg: #0f172a;
	--si-footer-text: #cbd5e1;

	--si-color-primary: #4f46e5;
	--si-color-primary-rgb: 79, 70, 229;
	--si-color-secondary: #7c3aed;
	--si-color-accent: #f59e0b;
	--si-color-bg: #f1f5f9;
	--si-color-content-bg: #ffffff;
	--si-color-text: #334155;
	--si-color-heading: #0f172a;
	--si-color-link: #4f46e5;
	--si-color-link-hover: #7c3aed;
	--si-color-border: #e2e8f0;

	--si-font-body: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
	--si-font-body-size: 16px;
	--si-font-body-weight: 400;
	--si-font-body-lh: 1.8;

	--si-font-h1: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
	--si-font-h1-size: 40px;
	--si-font-h1-weight: 800;

	--si-font-h2: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
	--si-font-h2-size: 30px;
	--si-font-h2-weight: 700;

	--si-font-h3: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
	--si-font-h3-size: 24px;
	--si-font-h3-weight: 700;

	--si-font-h4: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
	--si-font-h4-size: 19px;
	--si-font-h4-weight: 600;

	--si-font-nav: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
	--si-font-nav-size: 16px;
	--si-font-nav-weight: 600;

	--si-font-btn: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
	--si-font-btn-size: 15px;
	--si-font-btn-weight: 600;

	--si-font-meta: 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
	--si-font-meta-size: 14px;
	--si-font-meta-weight: 400;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--si-color-bg);
	color: var(--si-color-text);
	font-family: var(--si-font-body);
	font-size: var(--si-font-body-size);
	font-weight: var(--si-font-body-weight);
	line-height: var(--si-font-body-lh);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--si-color-heading);
	margin: 0 0 0.6em;
	line-height: 1.3;
}

h1 { font-family: var(--si-font-h1); font-size: var(--si-font-h1-size); font-weight: var(--si-font-h1-weight); }
h2 { font-family: var(--si-font-h2); font-size: var(--si-font-h2-size); font-weight: var(--si-font-h2-weight); }
h3 { font-family: var(--si-font-h3); font-size: var(--si-font-h3-size); font-weight: var(--si-font-h3-weight); }
h4 { font-family: var(--si-font-h4); font-size: var(--si-font-h4-size); font-weight: var(--si-font-h4-weight); }

p { margin: 0 0 1em; }

a {
	color: var(--si-color-link);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover, a:focus { color: var(--si-color-link-hover); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.4em; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select {
	font-family: inherit;
	font-size: 1rem;
	color: var(--si-color-text);
}

/* Visible, high-contrast focus ring everywhere for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--si-color-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Layout / Container
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--si-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.site-wrap.layout-boxed {
	max-width: calc(var(--si-container-width) + 40px);
	margin: 0 auto;
	background: var(--si-color-bg);
	box-shadow: 0 0 40px rgba(15, 23, 42, 0.08);
}

.site-content-wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--si-spacing);
	padding-top: var(--si-spacing);
	padding-bottom: calc(var(--si-spacing) * 2);
}

.site-main { flex: 1 1 0%; min-width: 0; }

.has-sidebar-layout .site-main { max-width: calc(100% - var(--si-sidebar-width) - var(--si-spacing)); }

.full-width-layout .site-main { max-width: 100%; }

#secondary.widget-area {
	flex: 0 0 var(--si-sidebar-width);
	width: var(--si-sidebar-width);
	min-width: 0;
}

.sidebar-left { flex-direction: row-reverse; }
.sidebar-left #secondary.widget-area { order: -1; }

.single-post-main .site-content-wrap,
.page-main { }

.site-main.single-post-main,
.site-main.page-main {
	max-width: var(--si-content-width);
}
.has-sidebar-layout.single-post-main,
.has-sidebar-layout.page-main {
	max-width: none;
}
.single-post-main .sasthoinfo-single-article,
.page-main .sasthoinfo-page-article {
	/* max-width caps the reading width; if the sidebar makes the available
	   column narrower than this, the article naturally shrinks to fit —
	   no separate "has-sidebar" override needed (that override was the
	   bug: it forced the article, and the featured image inside it, to
	   stretch to the full sidebar-adjusted column width instead of
	   staying capped at a comfortable reading width). */
	max-width: var(--si-content-width);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   4. Accessibility helpers
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--si-color-primary);
	color: #fff;
	padding: 12px 20px;
	z-index: 100000;
	border-radius: 0 0 8px 0;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 0;
	color: #fff;
	position: fixed;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.site-header {
	background: linear-gradient(135deg, var(--si-header-bg-start), var(--si-header-bg-end));
	color: var(--si-header-text);
	position: relative;
	z-index: 50;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-logo img {
	display: block;
	width: var(--si-logo-width, 160px);
	height: var(--si-logo-height, 44px);
	object-fit: contain;
	object-position: center;
}
.site-logo-fallback {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	font-size: 22px;
}

.site-identity { min-width: 0; }

.site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-title a { color: var(--si-header-text); }
.site-title a:hover { color: var(--si-nav-hover); }

.site-description {
	margin: 0;
	font-size: 12px;
	opacity: 0.85;
	color: var(--si-header-text);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.header-search-toggle,
.dark-mode-toggle {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: var(--si-header-text);
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.header-search-toggle:hover,
.dark-mode-toggle:hover { background: rgba(255, 255, 255, 0.3); }

.dark-mode-toggle .icon-moon { display: none; }
.si-dark .dark-mode-toggle .icon-sun { display: none; }
.si-dark .dark-mode-toggle .icon-moon { display: inline-flex; }

/* True modal popup: fixed, covers the whole viewport with a dimmed
   backdrop, so opening it never disturbs or "breaks" the header/hero
   layout underneath — it simply floats above everything. Uses
   opacity/visibility (not display:none) so it can fade in/out smoothly;
   pointer-events keeps it non-interactive and unreachable by keyboard tab
   order while hidden. */
.header-search-popup {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 300;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}
.header-search-popup:not([hidden]) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.header-search-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: var(--si-color-content-bg);
	border: 1px solid var(--si-color-border);
	border-radius: var(--si-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	padding: 28px;
	transform: translateY(-14px);
	transition: transform 0.2s ease;
}
.header-search-popup:not([hidden]) .header-search-panel {
	transform: translateY(0);
}

.header-search-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--si-color-bg);
	border: none;
	border-radius: 50%;
	color: var(--si-color-text);
}
.header-search-close:hover { background: rgba(var(--si-color-primary-rgb), 0.1); color: var(--si-color-primary); }

.header-search-title {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--si-color-heading);
	padding-right: 30px;
}

/* Search bar sizing inside the popup inherits from the shared .search-form
   rules above (unified pill shape); no extra overrides needed here. */

/* ==========================================================================
   6. Navigation
   ========================================================================== */
.main-navigation { display: flex; align-items: center; }

.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	color: var(--si-header-text);
	padding: 6px;
	border-radius: 8px;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }

.primary-menu,
.primary-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.primary-menu {
	gap: var(--si-nav-spacing);
	flex-wrap: wrap;
}
.primary-menu > li {
	position: relative;
}
.primary-menu a {
	display: block;
	color: var(--si-header-text);
	font-family: var(--si-font-nav);
	font-size: var(--si-nav-font-size);
	font-weight: var(--si-nav-font-weight);
	padding: 8px 2px;
	white-space: nowrap;
}
.primary-menu > li > a:hover,
.primary-menu > li > a:focus,
.primary-menu > li.current-menu-item > a {
	color: var(--si-nav-hover);
}

/* Dropdowns */
.primary-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	min-width: 220px;
	background: var(--si-color-content-bg);
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
	z-index: 60;
}
.primary-menu li:hover > ul,
.primary-menu li.focus-within > ul {
	display: flex;
}
.primary-menu ul a {
	color: var(--si-color-text);
	padding: 10px 12px;
	border-radius: 6px;
}
.primary-menu ul a:hover,
.primary-menu ul a:focus {
	background: rgba(var(--si-color-primary-rgb), 0.08);
	color: var(--si-color-primary);
}
.dropdown-style-simple .primary-menu ul { box-shadow: none; border: 1px solid var(--si-color-border); }

.menu-item-has-children { position: relative; }
.dropdown-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	margin-inline-start: 6px;
	vertical-align: middle;
}
.dropdown-arrow::before {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.no-nav-arrow .dropdown-arrow { display: none; }

/* Off-canvas drawer overlay backdrop (mobile only; hidden by default). */
.nav-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	z-index: 90;
}
.nav-drawer-overlay[hidden] { display: none; }

body.no-scroll { overflow: hidden; }

.drawer-footer { display: none; }
.nav-drawer-close { display: none; }
.drawer-dark-toggle {
	width: auto;
	height: auto;
	padding: 10px 14px;
	border-radius: 8px;
	gap: 8px;
	background: rgba(var(--si-color-primary-rgb), 0.08);
	color: var(--si-color-text);
}
.drawer-dark-toggle .icon-moon { display: none; }
.si-dark .drawer-dark-toggle .icon-sun { display: none; }
.si-dark .drawer-dark-toggle .icon-moon { display: inline-flex; }
.drawer-dark-toggle-label { font-size: 14px; font-weight: 600; }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.sasthoinfo-hero {
	background: linear-gradient(135deg, var(--si-hero-bg-start), var(--si-hero-bg-end));
	color: #fff;
	text-align: center;
	padding: 70px 0;
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-height-small { padding: 40px 0; }
.hero-height-medium { padding: 70px 0; }
.hero-height-large { padding: 110px 0; }

.hero-align-left { text-align: left; }
.hero-align-right { text-align: right; }
.hero-align-center { text-align: center; }

.hero-inner { max-width: 820px; }
.hero-align-left .hero-inner,
.hero-align-right .hero-inner { max-width: none; }

.hero-title {
	color: #fff;
	font-size: clamp(28px, 4vw, var(--si-font-h1-size));
	margin-bottom: 0.4em;
}
.hero-subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	margin: 0 auto;
	max-width: 700px;
}
.hero-align-left .hero-subtitle,
.hero-align-right .hero-subtitle { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   8. Post Cards / Grid
   ========================================================================== */
.section-title {
	margin-bottom: var(--si-spacing);
	padding-bottom: 10px;
	border-bottom: 3px solid var(--si-color-primary);
	display: inline-block;
}
.section-title a { color: inherit; }

.sasthoinfo-featured-posts,
.sasthoinfo-latest-posts,
.sasthoinfo-category-section {
	margin-bottom: calc(var(--si-spacing) * 1.6);
}

.posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--si-spacing);
}
.posts-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.posts-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.posts-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   List layout post card
   Same content order as the grid card (title, meta, excerpt, read more),
   just laid out beside a horizontal image instead of stacked below a
   vertical one. The read-more link is pinned to the bottom via
   margin-top: auto so cards with different excerpt lengths still line up.
   ========================================================================== */
.posts-grid.layout-list { grid-template-columns: 1fr; gap: 16px; }

.posts-grid.layout-list .sasthoinfo-post-card {
	flex-direction: row;
	align-items: stretch;
	border: 1px solid var(--si-color-border);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.posts-grid.layout-list .sasthoinfo-post-card:hover {
	transform: none;
	border-color: rgba(var(--si-color-primary-rgb), 0.45);
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
}

.posts-grid.layout-list .card-thumb-wrap {
	flex: 0 0 240px;
	max-width: 240px;
	align-self: stretch;
}
.posts-grid.layout-list .card-thumb-link {
	height: 100%;
}
.posts-grid.layout-list .card-thumb {
	height: 100%;
	min-height: 100%;
	padding-top: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.card-body-list {
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}

.card-body-list .card-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card-body-list .card-title a { color: var(--si-color-heading); }
.card-body-list .card-title a:hover { color: var(--si-color-primary); }

.card-body-list .sasthoinfo-post-meta { font-size: 12.5px; }

.card-excerpt-list {
	font-size: 14.5px;
	line-height: 1.7;
	color: #5b6474;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card-excerpt-list p { margin: 0; }

/* Same filled pill button as the grid card, just slightly smaller so it
   sits comfortably inside the tighter list row. margin-top: auto pushes it
   to the bottom of the card regardless of how long the title/excerpt above
   it run, so buttons still line up row to row. */
.card-body-list .sasthoinfo-readmore-btn {
	margin-top: auto;
	padding: 8px 18px;
	font-size: 13px;
	min-height: 38px;
}

.sasthoinfo-card {
	background: var(--si-color-content-bg);
	border-radius: var(--si-radius);
	box-shadow: var(--si-card-shadow);
	overflow: hidden;
}

.sasthoinfo-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Grid items default to min-width: auto, which refuses to shrink below
	   the content's own intrinsic width. A long, unbroken Bengali title or
	   any fixed-width child inside the card could then hold its whole grid
	   column open wider than the other columns, so a "3 columns" or "4
	   columns" setting stopped producing clean, equal-width columns and
	   started looking uneven/overflowing instead. This one line is the
	   standard fix for that. */
	min-width: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sasthoinfo-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

/* Make the entire card clickable (the "stretched link" pattern): the
   title's own link grows an invisible layer covering the whole card, while
   other real links inside (category badge, thumbnail, Read More button)
   sit above it on their own stacking layer so they stay independently
   clickable — the badge still goes to its category, everything else goes
   to the post either way. */
.card-title > a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.card-thumb-link,
.sasthoinfo-readmore-btn {
	position: relative;
	z-index: 2;
}

.card-thumb-wrap { position: relative; }
.card-thumb-link { display: block; }
.card-thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: var(--si-color-bg);
	overflow: hidden;
}
/* The absolute fill is ONLY valid inside a .card-thumb box, which provides
   the positioned, aspect-ratio'd frame for it. sasthoinfo_post_thumbnail()
   puts the .sasthoinfo-thumb-img class on every featured image it prints —
   including the single-post and page hero image — so leaving this rule
   unscoped took the single post's featured image out of the document flow
   and let it fill its nearest positioned ancestor, painting right over the
   sidebar. Scoping it to .card-thumb keeps card images cropped and leaves
   every other featured image as a normal inline-flow image. */
.card-thumb img,
.card-thumb .sasthoinfo-thumb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* Safety net: any featured image rendered outside a .card-thumb frame stays
   in normal flow and can never overlap neighbouring layout. */
.sasthoinfo-thumb-img {
	max-width: 100%;
	height: auto;
}
.sasthoinfo-post-card:hover .card-thumb img { transform: scale(1.06); }

/* Same reasoning as .sasthoinfo-thumb-img above: the absolute fill belongs
   to the .card-thumb frame only. */
.card-thumb .sasthoinfo-fallback-image {
	position: absolute;
	inset: 0;
	height: 100%;
}
.sasthoinfo-fallback-image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(var(--si-color-primary-rgb), 0.12), rgba(var(--si-color-primary-rgb), 0.04));
	color: var(--si-color-primary);
	font-size: 32px;
}
.sasthoinfo-fallback-image.sasthoinfo-thumb { position: static; border-radius: 8px; height: 60px; width: 60px; font-size: 20px; }

.card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

.sasthoinfo-badge {
	display: inline-block;
	align-self: flex-start;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
}

/* On a post card the badge floats over the top-left corner of the
   thumbnail rather than sitting as its own line in the card body — this
   scoping only applies inside .card-thumb-wrap (see content-card.php); the
   single-post header still renders the same sasthoinfo_category_badge()
   call as a normal inline badge above the title. z-index: 3 keeps it above
   both the thumbnail link (2) and the card's stretched title link (1), so
   the badge stays independently clickable to its own category archive. */
.card-thumb-wrap .sasthoinfo-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}
.card-thumb-wrap .sasthoinfo-badge:hover {
	filter: brightness(1.08);
}

.sasthoinfo-post-meta {
	font-family: var(--si-font-meta);
	font-size: var(--si-font-meta-size);
	font-weight: var(--si-font-meta-weight);
	color: #64748b;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.sasthoinfo-post-meta a { color: inherit; }
.sasthoinfo-post-meta a:hover { color: var(--si-color-primary); }

.card-title {
	font-size: 20px;
	margin: 0;
	line-height: 1.4;
	overflow-wrap: break-word;
	word-break: break-word;
}
.card-title a { color: var(--si-color-heading); }
.card-title a:hover { color: var(--si-color-primary); }

.card-excerpt {
	color: var(--si-color-text);
	font-size: 15px;
	line-height: 1.7;
	flex: 1 1 auto;
}
.card-excerpt p { margin: 0; }

.grid-ad-slot { grid-column: 1 / -1; }

.view-all-wrap { text-align: center; margin-top: var(--si-spacing); }
.view-all-link {
	font-weight: 700;
	color: var(--si-color-primary);
}

/* Pagination (the_posts_pagination() / the_comments_pagination() core markup) */
.pagination-wrap { margin-top: calc(var(--si-spacing) * 1.2); }
.pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
}
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--si-color-content-bg);
	color: var(--si-color-text);
	font-weight: 600;
	box-shadow: var(--si-card-shadow);
}
.page-numbers.current {
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	color: #fff;
}
.page-numbers.dots { box-shadow: none; background: transparent; }
a.page-numbers:hover {
	background: rgba(var(--si-color-primary-rgb), 0.1);
	color: var(--si-color-primary);
}

/* ==========================================================================
   9. Buttons
   ========================================================================== */
.sasthoinfo-readmore-btn,
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-family: var(--si-font-btn);
	font-size: var(--si-font-btn-size);
	font-weight: var(--si-font-btn-weight);
	padding: 10px 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	color: #fff;
	border: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	min-height: 44px;
	box-sizing: border-box;
}
.sasthoinfo-readmore-btn:hover,
.btn-primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(var(--si-color-primary-rgb), 0.35);
}
.btn-outline {
	background: transparent;
	color: var(--si-color-primary);
	border: 2px solid var(--si-color-primary);
}
.btn-outline:hover { background: rgba(var(--si-color-primary-rgb), 0.08); color: var(--si-color-primary); }

/* ==========================================================================
   10. Single Post & Page
   ========================================================================== */
.sasthoinfo-breadcrumbs {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 14px;
}
.sasthoinfo-breadcrumbs a { color: #64748b; }
.sasthoinfo-breadcrumbs a:hover { color: var(--si-color-primary); }
.sasthoinfo-breadcrumbs .sep { margin: 0 4px; opacity: 0.6; }
.sasthoinfo-breadcrumbs .current { color: var(--si-color-text); }

.sasthoinfo-single-article,
.sasthoinfo-page-article {
	background: var(--si-color-content-bg);
	border-radius: var(--si-radius);
	box-shadow: var(--si-card-shadow);
	padding: 32px;
	margin-bottom: var(--si-spacing);
}

.entry-header .entry-title {
	margin-top: 10px;
}

.entry-featured-image {
	/* Full width of the content column, flush with the article text on both
	   sides — matches how the title and paragraphs below it are aligned,
	   instead of floating as a separately-framed, narrower block. */
	position: relative;
	width: 100%;
	margin: 20px 0;
	border-radius: var(--si-radius);
	overflow: hidden;
}
.entry-featured-image img,
.entry-featured-image .sasthoinfo-thumb-img {
	position: static;
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--si-radius);
}
.entry-featured-image .sasthoinfo-fallback-image {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content {
	font-size: 17px;
	line-height: 1.9;
	color: var(--si-color-text);
}
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2,
.entry-content h3,
.entry-content h4 { margin-top: 1.6em; }
.entry-content img { border-radius: 10px; }
.entry-content blockquote {
	border-inline-start: 4px solid var(--si-color-primary);
	margin: 1.5em 0;
	padding: 0.6em 1.2em;
	background: rgba(var(--si-color-primary-rgb), 0.05);
	border-radius: 0 10px 10px 0;
	font-style: italic;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content table th,
.entry-content table td { border: 1px solid var(--si-color-border); padding: 8px 12px; }
.entry-content a { text-decoration: underline; }

/* Contain Gutenberg wide/full-width blocks within the boxed article card.
   Without this, WordPress core block styles make .alignfull/.alignwide
   images and covers break out to the viewport edge, which looks broken
   inside our padded, rounded article card rather than a true full-bleed page. */
.entry-content .alignfull,
.entry-content .alignwide {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: auto !important;
	right: auto !important;
}
.entry-content .wp-block-image img,
.entry-content .wp-block-cover,
.entry-content figure img {
	max-width: 100%;
	height: auto;
	border-radius: var(--si-radius);
}

.page-links { margin-top: 1.5em; font-weight: 600; }
.page-links a { display: inline-block; padding: 4px 10px; border: 1px solid var(--si-color-border); border-radius: 6px; margin-inline-end: 4px; }

.sasthoinfo-tags {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--si-color-border);
	font-size: 14px;
}
.tags-label { font-weight: 700; margin-inline-end: 6px; }
.tag-link {
	display: inline-block;
	background: var(--si-color-bg);
	color: var(--si-color-text);
	padding: 5px 12px;
	border-radius: 999px;
	margin: 3px 4px;
}
.tag-link:hover { background: rgba(var(--si-color-primary-rgb), 0.1); color: var(--si-color-primary); }

.sasthoinfo-share {
	margin-top: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.share-label { font-weight: 700; }
.share-btn {
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-transform: capitalize;
}
.share-facebook { background: #1877f2; }
.share-twitter { background: #14171a; }
.share-linkedin { background: #0a66c2; }
.share-whatsapp { background: #25d366; }
.share-btn:hover { opacity: 0.88; color: #fff; }

.sasthoinfo-author-box {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--si-color-border);
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.sasthoinfo-author-box .author-avatar img { border-radius: 50%; }
.author-name { margin-bottom: 6px; }
.author-bio { color: #64748b; font-size: 14px; }
.author-link { font-weight: 700; font-size: 14px; }

.sasthoinfo-related-posts {
	max-width: var(--si-content-width);
	margin: 0 auto calc(var(--si-spacing) * 1.5);
}
.sasthoinfo-related-posts .section-title {
	display: block;
	margin-bottom: 24px;
}
.related-posts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--si-spacing);
}

.sasthoinfo-post-nav {
	max-width: var(--si-content-width);
	margin: 0 auto var(--si-spacing);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--si-spacing);
}
.sasthoinfo-post-nav a {
	display: block;
	background: var(--si-color-content-bg);
	border-radius: var(--si-radius);
	padding: 16px 20px;
	box-shadow: var(--si-card-shadow);
}
.nav-next { text-align: right; }
.nav-label { display: block; font-size: 13px; color: #64748b; margin-bottom: 6px; font-weight: 700; }
.nav-title { display: block; font-weight: 700; color: var(--si-color-heading); }

/* ==========================================================================
   11. Comments
   ========================================================================== */
.comments-area {
	max-width: var(--si-content-width);
	margin: 0 auto;
	background: var(--si-color-content-bg);
	border-radius: var(--si-radius);
	box-shadow: var(--si-card-shadow);
	padding: 28px 32px;
}

.comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-inline-start: 40px; }

.comment-body { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--si-color-border); }
.comment-avatar img { border-radius: 50%; }
.comment-content-wrap { flex: 1 1 auto; min-width: 0; }
.comment-meta { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.comment-author { font-weight: 700; }
.comment-date a { color: #64748b; font-size: 13px; }
.comment-awaiting-moderation { font-size: 12px; font-style: italic; color: var(--si-color-accent); }
.comment-text p:last-child { margin-bottom: 0; }
.comment-reply-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--si-color-primary);
}

.comment-respond { margin-top: 10px; }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; font-weight: 700; margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--si-color-border);
	border-radius: 8px;
	background: var(--si-color-bg);
}
.comment-form textarea { min-height: 140px; }
.required { color: #dc2626; }

/* ==========================================================================
   12. Sidebar / Widgets
   ========================================================================== */
.sasthoinfo-widget,
.widget {
	background: var(--si-color-content-bg);
	border-radius: var(--si-radius);
	box-shadow: var(--si-card-shadow);
	padding: 22px;
	margin-bottom: var(--si-spacing);
}
.widget-title {
	font-size: 18px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--si-color-border);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--si-color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--si-color-text); flex: 1 1 auto; }
.widget ul li a:hover { color: var(--si-color-primary); }
.widget .children,
.widget .sub-menu { width: 100%; padding-inline-start: 16px; }

.search-form {
	display: flex;
	align-items: stretch;
	background: var(--si-color-bg);
	border: 1px solid var(--si-color-border);
	border-radius: 999px;
	overflow: hidden;
}
.search-form .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 18px;
	border: none;
	background: transparent;
	color: var(--si-color-text);
}
.search-form .search-field:focus { outline: none; }
.search-form .search-submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	color: #fff;
	border: none;
	width: 46px;
	padding: 0;
	transition: opacity 0.2s ease;
}
.search-form .search-submit svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
	display: block;
}
.search-form .search-submit:hover { opacity: 0.9; }
.search-form:focus-within {
	border-color: var(--si-color-primary);
	box-shadow: 0 0 0 3px rgba(var(--si-color-primary-rgb), 0.15);
}

.sasthoinfo-popular-posts-list li { display: block; padding: 10px 0; }
.popular-post-link { display: flex; gap: 12px; align-items: center; }
.popular-post-thumb { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; }
.popular-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.popular-post-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.popular-post-title {
	font-weight: 600;
	color: var(--si-color-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.4;
}
.popular-post-date { font-size: 12px; color: #94a3b8; }

.recent-post-date { font-size: 12px; color: #94a3b8; white-space: nowrap; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
	background: var(--si-footer-bg);
	color: var(--si-footer-text);
	margin-top: calc(var(--si-spacing) * 2);
	padding: calc(var(--si-spacing) * 2) 0 0;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--si-spacing);
	padding-bottom: var(--si-spacing);
}
.footer-columns-1 { grid-template-columns: 1fr; }
.footer-columns-2 { grid-template-columns: repeat(2, 1fr); }
.footer-columns-3 { grid-template-columns: repeat(3, 1fr); }

.footer-logo {
	display: block;
	height: auto;
	max-width: 100%;
	margin-bottom: 14px;
}

.footer-col-title {
	color: #fff;
	font-size: 17px;
	margin-bottom: 16px;
	position: relative;
	padding-bottom: 10px;
}
.footer-col-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	border-radius: 3px;
}

.footer-about-text { font-size: 14px; line-height: 1.8; color: var(--si-footer-text); }

.footer-social-icons { display: flex; gap: 10px; margin-top: 16px; }
.social-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}
.social-icon:hover { background: var(--si-color-primary); color: #fff; }

.footer-menu,
.footer-contact-list { list-style: none; margin: 0; padding: 0; }
.footer-menu li,
.footer-contact-list li { margin-bottom: 12px; font-size: 14px; }
.footer-menu a,
.footer-contact-list a { color: var(--si-footer-text); }
.footer-menu a:hover { color: #fff; }

.footer-extra-widgets { padding-bottom: var(--si-spacing); }

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}
.sasthoinfo-designer-credit a { color: rgba(255, 255, 255, 0.85); font-weight: 700; }
/* .footer-copyright is a <p>, and the theme's base reset gives every <p> a
   1em bottom margin (see "p { margin: 0 0 1em; }" near the top of this
   file). That margin stacked with .footer-bottom's own flex gap, so on
   mobile — where the bar switches to a column and the copyright line and
   the designer credit stack on top of each other — the two lines ended up
   much further apart than the 8px gap actually intended. */
.footer-copyright { margin: 0; }

/* Footer widgets styled to inherit dark footer look. */
.site-footer .widget { background: transparent; box-shadow: none; padding: 0; margin: 0; }
.site-footer .widget-title,
.site-footer .footer-widget-title { color: #fff; }

/* ==========================================================================
   14. 404 / Search / Archive headers
   ========================================================================== */
.page-header {
	margin-bottom: var(--si-spacing);
}
.page-title { margin-bottom: 6px; }
.archive-description { color: #64748b; margin-bottom: 10px; }
.archive-post-count { color: #94a3b8; font-size: 14px; }

/* Category archive title: bold heading with a short accent bar underneath,
   left-aligned below the breadcrumb — the underline uses the site's own
   primary/secondary gradient (the same treatment as .footer-col-title's
   underline) rather than a hardcoded color, so it follows whatever brand
   colors are set in Customize > Colors. */
.category-title {
	position: relative;
	font-weight: 800;
	padding-bottom: 16px;
	margin-bottom: 20px;
}
.category-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70px;
	height: 4px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
}
html.si-dark .category-title { color: #f1f5f9; }

.category-header .page-title span[aria-hidden] { margin-inline-end: 6px; }

.author-profile { display: flex; align-items: center; gap: 18px; }
.author-profile .author-avatar img { border-radius: 50%; }

.search-query { color: var(--si-color-primary); }
.search-results-count { color: #64748b; margin-bottom: 14px; }
.search-form-wrap { max-width: 480px; }

.error-404-main { display: flex; justify-content: center; }
.error-404-content {
	max-width: 640px;
	width: 100%;
	text-align: center;
	padding: 60px 40px;
}
.error-code {
	font-size: 96px;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--si-color-primary), var(--si-color-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 10px;
}
.error-description { color: #64748b; margin-bottom: 24px; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.error-search-form[hidden] { display: none; }
.error-categories { margin-top: 30px; text-align: left; }
.error-categories ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.error-categories a {
	display: inline-block;
	background: var(--si-color-bg);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
}

.no-results.not-found { padding: 50px 32px; text-align: center; }

/* ==========================================================================
   15. Dark Mode
   ========================================================================== */
html.si-dark body {
	--si-color-bg: #0b1220;
	--si-color-content-bg: #131c2e;
	--si-color-text: #cbd5e1;
	--si-color-heading: #f1f5f9;
	--si-color-border: #1f2937;
}
html.si-dark .sasthoinfo-card,
html.si-dark .widget,
html.si-dark .sasthoinfo-single-article,
html.si-dark .sasthoinfo-page-article,
html.si-dark .comments-area,
html.si-dark .sasthoinfo-post-nav a {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
html.si-dark .search-form .search-field,
html.si-dark .comment-form input,
html.si-dark .comment-form textarea {
	background: #0b1220;
	color: #e2e8f0;
	border-color: #1f2937;
}
html.si-dark .card-excerpt,
html.si-dark .entry-content { color: #cbd5e1; }
html.si-dark .card-excerpt-list { color: #aab4c4; }
html.si-dark .posts-grid.layout-list .sasthoinfo-post-card { border-color: rgba(255, 255, 255, 0.10); }
html.si-dark .sasthoinfo-fallback-image { background: rgba(255,255,255,0.05); }

/* ==========================================================================
   16. Ads
   ========================================================================== */
.sasthoinfo-ad-slot {
	text-align: center;
	margin: var(--si-spacing) 0;
	overflow: hidden;
}
.sasthoinfo-ad-slot:empty { display: none; }

/* Reserve a minimum height per placement so the surrounding layout doesn't
 * jump (CLS) while the ad network's script loads and inserts its iframe
 * asynchronously — the container starts this tall and only grows if the ad
 * unit itself is taller, it never gets forced smaller than the actual ad. */
.sasthoinfo-ad-header,
.sasthoinfo-ad-footer { min-height: 90px; }
.sasthoinfo-ad-homepage,
.sasthoinfo-ad-between_posts,
.sasthoinfo-ad-single_before,
.sasthoinfo-ad-single_after { min-height: 250px; }
.sasthoinfo-ad-sidebar { min-height: 250px; }
.sasthoinfo-ad-header { padding: 10px 0; background: rgba(0,0,0,0.03); }