/* =========================================================================
   AB Style Enhancements — visual polish layer for adarshbarnwal.com
   Loaded via the "AB Style Enhancements" mu-plugin, AFTER the BlogMagazine
   theme's own CSS, so these rules refine the look without changing behaviour.
   Palette matches the theme: primary #0c4da2, dark #0c4288, text #3d3d3d.
   Everything here is additive & reversible — delete this file to undo.
   ========================================================================= */

:root {
	--ab-primary: #0c4da2;
	--ab-primary-dark: #0c4288;
	--ab-primary-soft: rgba(12, 77, 162, 0.08);
	--ab-navy: #0b1c3a;
	--ab-orange: #f2711c;
	--ab-orange-soft: rgba(242, 113, 28, 0.12);
	--ab-text: #3d3d3d;
	--ab-line: #e6e9ef;
	--ab-radius: 10px;
	--ab-shadow: 0 2px 10px rgba(19, 42, 78, 0.06);
	--ab-shadow-hover: 0 8px 24px rgba(19, 42, 78, 0.12);
	--ab-ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--ab-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
	--ab-font-display: "Anton", Impact, sans-serif;
}

/* ---- 1. Global rhythm & smoothing -------------------------------------
   Same typefaces as the homepage (Inter body / Anton display), so every
   page shares one look instead of just the front page. */
body {
	font-family: var(--ab-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.65;
}

a,
button,
input[type="submit"],
.bttn,
.hentry,
.widget,
img {
	transition: color var(--ab-ease), background-color var(--ab-ease),
		border-color var(--ab-ease), box-shadow var(--ab-ease),
		transform var(--ab-ease);
}

/* Softer, consistent links with a smart hover */
.entry-content a:not(.bttn):not(.button) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a:hover {
	color: var(--ab-primary-dark);
}

/* ---- 2. Headings ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.entry-title {
	line-height: 1.28;
}
/* Top-level page/post titles use the homepage's display font (Anton).
   Card-grid titles stay Inter bold for readability — the theme already
   marks these up differently (h1 for the single post/page, h2 for listing
   cards), so we can target the real title without touching card titles. */
h1.entry-title,
.page-title {
	font-family: var(--ab-font-display);
	font-weight: 400;
	letter-spacing: 0.01em;
}
.entry-title a:hover {
	color: var(--ab-primary);
}

/* ---- 3. Post cards on listing pages (home / archive / search) --------- */
/* Scoped to listing contexts so single-post layout is untouched. */
.blog .hentry,
.archive .hentry,
.search .hentry,
.dg-container .hentry {
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	box-shadow: var(--ab-shadow);
	padding: 18px;
	overflow: hidden;
}
.blog .hentry:hover,
.archive .hentry:hover,
.search .hentry:hover,
.dg-container .hentry:hover {
	box-shadow: var(--ab-shadow-hover);
	transform: translateY(-2px);
	border-color: rgba(12, 77, 162, 0.25);
}

/* ---- 3b. Listing pages — cards side-by-side in a grid, not stacked ----
   The theme's own "classic" loop (unchanged — same real posts, thumbnails,
   excerpts, Read More links) just renders each post as a full-width block.
   Lay those same cards out in a responsive grid instead, matching the
   homepage's card-grid pattern (.ab-card-grid). */
.blog #main.site-main,
.archive #main.site-main,
.search #main.site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	/* default (stretch) — every card in a row matches the row's tallest card,
	   so short titles/excerpts don't leave ragged bottom edges. */
}
/* The theme's "grid" layout (used by default on search, optionally on
   archive/blog) wraps posts in its own nested wrapper divs instead of
   putting .hentry directly under #main. Collapse those wrappers out of the
   box tree so .hentry always ends up a direct grid item, regardless of
   which of the theme's own layout templates (classic vs grid) is active. */
.blog #main.site-main > .blogmagazine-archive-classic-post-wrapper,
.blog #main.site-main > .blogmagazine-archive-grid-post-wrapper,
.archive #main.site-main > .blogmagazine-archive-classic-post-wrapper,
.archive #main.site-main > .blogmagazine-archive-grid-post-wrapper,
.search #main.site-main > .blogmagazine-archive-classic-post-wrapper,
.search #main.site-main > .blogmagazine-archive-grid-post-wrapper {
	display: contents;
}
.blog #main.site-main .hentry,
.archive #main.site-main .hentry,
.search #main.site-main .hentry {
	/* !important: the theme's own "grid" layout puts width/margin/inline-block
	   directly on these same articles (for its now-collapsed wrapper divs,
	   see 3b above) — these values need to win over that. */
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
}
/* Non-card children of the same grid (page title, "no posts found", the
   pager) should span the full row instead of becoming a grid cell. */
.blog #main.site-main > :not(.hentry):not(.blogmagazine-archive-classic-post-wrapper):not(.blogmagazine-archive-grid-post-wrapper),
.archive #main.site-main > :not(.hentry):not(.blogmagazine-archive-classic-post-wrapper):not(.blogmagazine-archive-grid-post-wrapper),
.search #main.site-main > :not(.hentry):not(.blogmagazine-archive-classic-post-wrapper):not(.blogmagazine-archive-grid-post-wrapper) {
	grid-column: 1 / -1;
}
/* Fixed-ratio thumbnail so cards line up instead of varying wildly with
   each image's native size. */
.blog #main.site-main .blogmagazine-article-thumb,
.archive #main.site-main .blogmagazine-article-thumb,
.search #main.site-main .blogmagazine-article-thumb {
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	margin: -18px -18px 14px;
	width: calc(100% + 36px);
}
.blog #main.site-main .blogmagazine-article-thumb img,
.archive #main.site-main .blogmagazine-article-thumb img,
.search #main.site-main .blogmagazine-article-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog #main.site-main .entry-title,
.archive #main.site-main .entry-title,
.search #main.site-main .entry-title {
	font-size: 18px;
	/* Clamp the title too — a long real headline shouldn't make one card in
	   a row taller than its neighbours. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Clamp the excerpt so cards in the same row stay a similar height. */
.blog #main.site-main .entry-content,
.archive #main.site-main .entry-content,
.search #main.site-main .entry-content {
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.blog #main.site-main .entry-footer,
.archive #main.site-main .entry-footer {
	margin-top: 10px;
}

/* ---- 3c. Listing pages — use the full page width, not a centered column -
   The theme wraps everything (nav aside) in a `.dg-container` capped at
   1200px, so on a wide screen the cards+sidebar sit in a narrow centered
   strip with a huge unused margin either side. Widen just the listing
   pages' container (edge-to-edge, same treatment as the header/ticker
   already get in section 18) so the card grid can actually use the space;
   single-post reading width is untouched on purpose (long text stays
   readable at ~1200px). */
.blog .site-content > .dg-container,
.archive .site-content > .dg-container,
.search .site-content > .dg-container {
	max-width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}

/* ---- 3d. Modernize the archive/search "page header" box ---------------
   The theme's default is a hard black-bordered box with a solid-color
   title bar — dated next to the card grid above. Restyle using the same
   eyebrow + display-font heading already used elsewhere on the site,
   same real title/description text, no box. */
.page-header {
	border: none !important;
	margin: 0 0 28px !important;
}
.page-header .page-title {
	display: block !important;
	background: none !important;
	color: var(--ab-navy) !important;
	font-family: var(--ab-font-display) !important;
	font-size: clamp(24px, 2.6vw, 32px) !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
}
.page-header .page-title span {
	color: var(--ab-orange);
}
.page-header .archive-description {
	padding: 0 !important;
	color: var(--ab-text);
	max-width: 70ch;
}

/* Rounded thumbnails + gentle zoom on hover */
.hentry img,
.post-thumbnail img,
.wp-post-image {
	border-radius: 8px;
}
.hentry a:hover > img,
.post-thumbnail:hover img {
	transform: scale(1.03);
}

/* ---- 3e. Listing pages — "search by title" box + infinite scroll ------ */
.ab-listing-search {
	display: flex;
	max-width: 420px;
	margin: 0 0 28px;
}
.ab-listing-search-field {
	flex: 1 1 auto;
	height: 46px;
	border: 1px solid var(--ab-line) !important;
	border-radius: 999px 0 0 999px !important;
	padding: 0 18px !important;
	font-size: 14px;
}
.ab-listing-search-submit {
	height: 46px;
	padding: 0 22px !important;
	border-radius: 0 999px 999px 0 !important;
	background: var(--ab-primary) !important;
	color: #fff !important;
	border: none !important;
	font-weight: 600;
	box-shadow: none !important;
}
.ab-listing-search-submit:hover {
	background: var(--ab-primary-dark) !important;
}

.ab-infinite-sentinel {
	height: 1px;
}
.ab-infinite-status {
	text-align: center;
	color: var(--ab-orange);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 10px 0;
	min-height: 1em;
}

/* ---- 4. Meta (date, category, author) --------------------------------- */
.posted-on a,
.byline a,
.cat-links a {
	color: #5f5f5f;
}
.cat-links a:hover,
.posted-on a:hover,
.byline a:hover {
	color: var(--ab-primary);
}

/* Category chips (the theme's real .post-cats-list / .category-button
   markup, shown on both single posts and listing cards) double as the
   homepage's "eyebrow" style — same real taxonomy data, restyled to match
   the hero/section eyebrows (small, bold, uppercase, orange) instead of the
   theme's per-category rainbow background colors. */
.post-cats-list .category-button {
	margin: 0 6px 6px 0;
}
.post-cats-list .category-button a {
	background: var(--ab-orange-soft) !important;
	color: var(--ab-orange) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 999px !important;
	padding: 5px 12px !important;
}
.post-cats-list .category-button a:hover {
	background: var(--ab-orange) !important;
	color: #fff !important;
}

/* ---- 5. Widget & section titles — branded accent bar ------------------ */
.widget .widget-title,
.widget-title,
.widget h2.widget-title {
	position: relative;
	padding-left: 12px;
}
.widget .widget-title::before,
.widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 4px;
	background: var(--ab-primary);
}

/* ---- 6. Buttons & inputs — modern, tactile ---------------------------- */
button,
input[type="button"],
input[type="submit"],
.bttn,
.button,
.wp-block-button__link {
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 6px rgba(12, 77, 162, 0.18);
}
button:hover,
input[type="submit"]:hover,
.bttn:hover,
.button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(12, 77, 162, 0.28);
	background-color: var(--ab-primary-dark);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
	border-radius: 8px;
	border: 1px solid var(--ab-line);
	transition: border-color var(--ab-ease), box-shadow var(--ab-ease);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ab-primary);
	box-shadow: 0 0 0 3px var(--ab-primary-soft);
}

/* ---- 7. Content tables (incl. the predictors' result tables) ---------- */
.entry-content table,
.dg-container table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	overflow: hidden;
	box-shadow: var(--ab-shadow);
}
.entry-content table th,
.dg-container table th {
	background: var(--ab-primary);
	color: #fff;
	font-weight: 600;
	border: none;
}
.entry-content table td,
.dg-container table td {
	border: none;
	border-bottom: 1px solid var(--ab-line);
}
.entry-content table tbody tr:nth-child(even),
.dg-container table tbody tr:nth-child(even) {
	background: #f7f9fc;
}
.entry-content table tbody tr:hover,
.dg-container table tbody tr:hover {
	background: var(--ab-primary-soft);
}

/* ---- 8. Navigation hover underline ------------------------------------ */
.main-navigation .menu-item > a {
	position: relative;
}
.main-navigation .menu-item > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ab-ease);
	opacity: 0.85;
}
.main-navigation .menu-item:hover > a::after,
.main-navigation .current-menu-item > a::after {
	transform: scaleX(1);
}

/* ---- 8b. "College Predictors" nav CTA (injected by the mu-plugin) ------ */
.main-navigation .ab-predictors-cta {
	display: flex;
	align-items: center;
}
.main-navigation .ab-predictors-cta > a {
	background: var(--ab-primary) !important;
	color: #fff !important;
	border-radius: 8px !important;
	margin: 8px 4px 8px 12px !important;
	padding: 8px 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	box-shadow: 0 2px 8px rgba(12, 77, 162, 0.4);
	white-space: nowrap;
}
.main-navigation .ab-predictors-cta > a:hover {
	background: #fff !important;
	color: var(--ab-primary) !important;
	transform: translateY(-1px);
}
/* don't draw the generic hover underline under the CTA pill */
.main-navigation .ab-predictors-cta > a::after {
	display: none !important;
}

/* ---- 8c. Video / YouTube embeds — natural 16:9, no cropping ----------- */
/* WordPress block embeds were rendering ~square (362x360) which crops the
   thumbnail and overflows titles. Force a responsive 16:9 frame. */
.entry-content .wp-block-embed.is-type-video,
.entry-content figure.is-provider-youtube {
	margin: 0 0 22px !important;
	border-radius: 12px;
	box-shadow: var(--ab-shadow);
	overflow: hidden;
	background: #000;
}
.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.entry-content figure.is-provider-youtube .wp-block-embed__wrapper {
	position: relative !important;
	width: 100% !important;
	height: 0 !important;
	padding-top: 56.25% !important; /* 16:9 */
	overflow: hidden;
}
.entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
.entry-content figure.is-provider-youtube iframe,
.entry-content .wp-block-embed.is-type-video iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block;
}

/* ---- 9. Accessibility: visible keyboard focus ------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.bttn:focus-visible {
	outline: 2px solid var(--ab-primary);
	outline-offset: 2px;
}

/* ---- 9b. MINIMALIST HOMEPAGE POLISH ----------------------------------- */

/* Flat, modern section titles — drop the heavy black boxes for a clean
   underline + short brand accent. */
.blogmagazine-block-title,
.sidebar-main .blogmagazine-block-title,
.sidebar-main .widget-title {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--ab-line) !important;
	border-radius: 0 !important;
	color: #1a2436 !important;
	padding: 0 0 10px 0 !important;
	margin: 0 0 18px 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	position: relative;
}
.blogmagazine-block-title::after,
.sidebar-main .blogmagazine-block-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 46px;
	height: 2px;
	background: var(--ab-primary);
}
/* neutralise any coloured wrapper bar behind the title */
.blogmagazine-block-title-wrap,
.blogmagazine-block-title-wrapper {
	background: transparent !important;
	border: none !important;
}

/* Recent-posts sidebar list — airy, minimal, subtle dividers + hover */
.sidebar-main .widget ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.sidebar-main .widget ul li {
	padding: 13px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--ab-line) !important;
	line-height: 1.5;
	background: none !important;
}
.sidebar-main .widget ul li:last-child {
	border-bottom: none !important;
}
.sidebar-main .widget ul li a {
	color: #26324a !important;
	font-weight: 500;
	transition: color var(--ab-ease);
}
.sidebar-main .widget ul li a:hover {
	color: var(--ab-primary) !important;
}

/* Breaking-news bar — soften into a clean brand-blue label */
.blogmagazine-ticker-wrapper {
	border-radius: 8px;
	overflow: hidden;
}
.blogmagazine-ticker-wrapper .ticker-caption {
	background: var(--ab-primary) !important;
}

/* Subject columns (Physics / Chemistry / Maths) → clean minimalist cards */
.wp-block-columns.is-services .wp-block-column {
	background: #f7f9fc !important;
	border: 1px solid var(--ab-line) !important;
	border-radius: 12px !important;
	padding: 22px !important;
	transition: box-shadow var(--ab-ease), transform var(--ab-ease);
}
.wp-block-columns.is-services .wp-block-column:hover {
	box-shadow: var(--ab-shadow-hover);
	transform: translateY(-2px);
}
.wp-block-columns.is-services .wp-block-column h2,
.wp-block-columns.is-services .wp-block-column h3,
.wp-block-columns.is-services .wp-block-column h4 {
	margin-top: 0 !important;
	color: var(--ab-primary) !important;
}

/* ---- 10. Pagination / read-more polish -------------------------------- */
.nav-links a,
.page-numbers {
	border-radius: 8px;
	transition: background-color var(--ab-ease), color var(--ab-ease);
}
.page-numbers.current {
	background: var(--ab-primary);
	color: #fff;
}

/* ---- 11. HEADER — compress wasted vertical space ---------------------- */
/* Was ~343px tall; the logo block alone was 203px. Tighten it into a lean,
   modern masthead without hiding anything. */

/* remove the top date bar entirely */
.blogmagazine-top-header-wrap {
	display: none !important;
}

/* remove the header logo and collapse its band → the nav becomes the header.
   (The site-title <h1> is kept in the DOM, visually hidden, further below, so
   homepage SEO isn't lost.) */
.blogmagazine-logo-section-wrapper {
	padding: 0 !important;
}
.site-logo,
.site-logo img,
.custom-logo,
.custom-logo-link {
	display: none !important;
}

/* The logo image already shows the brand name + tagline, so the text title and
   description below it are redundant ("useless" duplication + wasted space).
   Hide them VISUALLY but keep them in the DOM for SEO / screen readers. */
.site-title,
.site-description {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* breaking-news ticker: drop the big gap above it */
.blogmagazine-ticker-wrapper {
	margin-top: 8px !important;
}

/* center the branding so the header reads balanced, not lopsided-empty */
.site-branding {
	text-align: center !important;
}
.site-branding .site-logo,
.site-branding .custom-logo-link {
	display: inline-block !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- 12. PREDICTOR TOOLS — cleaner, more modern product UI ------------- */
/* Card container */
.wbjee-modern {
	border: 1px solid var(--ab-line) !important;
	border-radius: 14px !important;
	box-shadow: var(--ab-shadow) !important;
	padding: 22px !important;
}

/* Primary "Predict Now" button — brand blue, tactile */
.wbjee-modern .btn-primary,
.wbjee-modern button[type="submit"] {
	background: var(--ab-primary) !important;
	border: none !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 12px 26px !important;
	font-weight: 600 !important;
	box-shadow: 0 3px 10px rgba(12, 77, 162, 0.25) !important;
}
.wbjee-modern .btn-primary:hover,
.wbjee-modern button[type="submit"]:hover {
	background: var(--ab-primary-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(12, 77, 162, 0.32) !important;
}

/* Form labels + fields */
.wbjee-modern label {
	font-weight: 600 !important;
	color: #34405a !important;
	font-size: 13px !important;
	letter-spacing: 0.02em;
}
.wbjee-modern select,
.wbjee-modern input {
	border-radius: 9px !important;
	border: 1px solid var(--ab-line) !important;
	padding: 10px 12px !important;
}

/* Fix field alignment: the grid was leaving the first column empty, shifting
   the top row right. Force clean, left-aligned auto-placement. */
.wbjee-modern .wbjee-form .row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 16px 14px !important;
	align-items: end;
}
/* The theme/plugin adds clearfix ::before/::after with display:table; inside a
   grid those become phantom grid items that eat the first/last cells and shove
   every field over. Remove them from the grid. */
.wbjee-modern .wbjee-form .row::before,
.wbjee-modern .wbjee-form .row::after {
	display: none !important;
	content: none !important;
}
.wbjee-modern .wbjee-form .row > * {
	grid-column: auto !important;
	grid-row: auto !important;
	min-width: 0;
}

/* Make the Reset / Export CSV buttons visible (they were rendering as blank
   white boxes) and consistent with the primary button. */
.wbjee-modern .actions {
	flex-wrap: wrap;
	gap: 10px !important;
	align-items: center;
}
.wbjee-modern .btn-secondary {
	background: #fff !important;
	color: var(--ab-primary) !important;
	border: 1px solid var(--ab-primary) !important;
	border-radius: 10px !important;
	padding: 11px 20px !important;
	font-weight: 600 !important;
}
.wbjee-modern .btn-secondary:hover {
	background: var(--ab-primary-soft) !important;
}
.wbjee-modern .btn-tertiary {
	background: #eef2f9 !important;
	color: #34405a !important;
	border: 1px solid var(--ab-line) !important;
	border-radius: 10px !important;
	padding: 11px 20px !important;
	font-weight: 600 !important;
}
.wbjee-modern .btn-tertiary:hover {
	background: #e2e8f2 !important;
}

/* Results table — branded header, zebra, hover, sticky (works for the
   predictor result tables and generic content tables across the site) */
.wbjee-results table th,
.entry-content table th {
	background: var(--ab-primary) !important;
	color: #fff !important;
	font-weight: 600 !important;
	position: sticky;
	top: 0;
	z-index: 2;
}
.wbjee-results table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) td {
	background: #f6f9fd !important;
}
.wbjee-results table tbody tr:hover td,
.entry-content table tbody tr:hover td {
	background: var(--ab-primary-soft) !important;
}
.wbjee-results table {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ab-line);
}

/* ---- 15. PREMIUM DEPTH — richer, layered, less "flat white" ----------- */

/* Soft page canvas so white content visibly floats above it */
body {
	background: #e9edf5 !important;
}

/* Main content → elevated white card */
#primary > article,
#primary > .hentry {
	background: #fff !important;
	border: 1px solid #e7ebf3 !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 34px rgba(19, 42, 78, 0.09) !important;
	padding: 28px !important;
	margin-bottom: 24px !important;
}

/* Sidebar widgets → tidy white cards */
.sidebar-main .widget {
	background: #fff !important;
	border: 1px solid #e7ebf3 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 26px rgba(19, 42, 78, 0.07) !important;
	padding: 20px !important;
	margin-bottom: 22px !important;
}

/* Modern section titles — remove the leftover black box, add a gradient
   underline accent instead */
.blogmagazine-block-title .title-wrapper {
	background: transparent !important;
	color: #16233d !important;
	padding: 0 !important;
	font-weight: 800 !important;
}
.blogmagazine-block-title::after,
.sidebar-main .blogmagazine-block-title::after {
	width: 56px !important;
	height: 3px !important;
	background: linear-gradient(90deg, var(--ab-primary), #3f8ae8) !important;
	border-radius: 3px;
}

/* Gradient primary buttons for a premium feel */
.main-navigation .ab-predictors-cta > a,
.wbjee-modern .btn-primary,
.wbjee-modern button[type="submit"],
button.bttn,
.wp-block-button__link {
	background: linear-gradient(135deg, #1a6fd4 0%, #0c4da2 100%) !important;
	border: none !important;
}

/* Breaking-news label → gradient */
.blogmagazine-ticker-wrapper .ticker-caption {
	background: linear-gradient(135deg, #1a6fd4, #0c4da2) !important;
}

/* Result / content table headers → subtle gradient for depth */
.wbjee-results table th,
.entry-content table th {
	background: linear-gradient(135deg, #1a6fd4, #0c4da2) !important;
}

/* Richer elevation on post-listing cards + subject cards */
.blog .hentry,
.archive .hentry,
.search .hentry {
	border-radius: 14px !important;
	box-shadow: 0 10px 30px rgba(19, 42, 78, 0.08) !important;
}
.wp-block-columns.is-services .wp-block-column {
	background: #fff !important;
	box-shadow: 0 6px 20px rgba(19, 42, 78, 0.06) !important;
}

/* ---- 16. Remove redundant folder icons in the Categories widget ------- */
.widget_categories li a::before,
.widget_categories li::before,
.widget_categories .cat-item > a::before {
	display: none !important;
	content: none !important;
}
/* tidy the category rows now that the icon is gone */
.widget_categories li {
	padding-left: 0 !important;
}

/* ---- 17. Sidebar widget lists — drop redundant icons & double dividers - */
/* Pages/Categories widgets add a FontAwesome icon before each link AND a border
   on the <a>; combined with our <li> divider that produced a doubled line.
   Remove the icon + the per-link border → one clean divider, text flush left. */
.sidebar-main .widget li > a::before,
.sidebar-main .widget li::before {
	display: none !important;
	content: none !important;
}
.sidebar-main .widget li > a {
	border-bottom: none !important;
	padding-left: 0 !important;
	background-image: none !important;
}

/* ---- 18b. Header icon row — drop the redundant "random post" shuffle icon */

/* The dice/shuffle icon next to search just links to a random post — adds
   no value and clutters the header. Hide it (theme option stays untouched,
   so re-enabling is a one-line revert). */
.menu-random-news {
	display: none !important;
}

/* On narrow/tablet widths (below the 18c desktop bar) the icon → dropdown
   pattern stays, just bigger and easier to use. */
.blogmagazine-header-search-wrapper .search-main.other-menu-icon {
	font-size: 24px !important;
}
.blogmagazine-header-search-wrapper .search-form-main {
	width: 420px !important;
	max-width: calc(100vw - 48px) !important;
	padding: 18px !important;
}
.blogmagazine-header-search-wrapper .search-form-main .search-field {
	height: 46px !important;
	font-size: 15px !important;
	padding: 10px 14px !important;
}
.blogmagazine-header-search-wrapper .search-form-main .search-submit {
	height: 46px !important;
}

/* ---- 18c. Desktop — permanent long search bar (YouTube-style) instead of
   an icon that only opens a hidden dropdown -------------------------------
   #site-navigation already switches to a full nav (vs. off-canvas hamburger)
   at min-width 1000px in the theme, so mirror that breakpoint here. */
@media (min-width: 1000px) {
	.blogmagazine-header-menu-block-wrap .dg-container {
		display: flex !important;
		align-items: center !important;
	}
	.blogmagazine-header-search-wrapper {
		float: none !important;
		flex: 0 0 auto !important;
		width: 340px !important;
		max-width: 340px !important;
		margin-left: auto !important;
	}
	/* the toggle icon is redundant once the bar is always open */
	.blogmagazine-header-search-wrapper .search-main.other-menu-icon {
		display: none !important;
	}
	/* turn the hidden dropdown into a permanent inline pill search bar */
	.blogmagazine-header-search-wrapper .search-form-main {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
	}
	.blogmagazine-header-search-wrapper .search-form-main:before {
		display: none !important;
	}
	.blogmagazine-header-search-wrapper .search-form-main .search-field {
		height: 40px !important;
		border-radius: 20px 0 0 20px !important;
		border: 1px solid rgba(255, 255, 255, 0.35) !important;
		background: rgba(255, 255, 255, 0.08) !important;
		color: #fff !important;
		padding: 0 16px !important;
	}
	.blogmagazine-header-search-wrapper .search-form-main .search-field::placeholder {
		color: rgba(255, 255, 255, 0.65) !important;
	}
	.blogmagazine-header-search-wrapper .search-form-main .search-submit {
		height: 40px !important;
		border-radius: 0 20px 20px 0 !important;
		background: var(--ab-primary) !important;
	}
}

/* ---- 18. Edge-to-edge header — nav bar & breaking-news ticker --------- */
/* The theme centers nav/ticker content in a 1200px .dg-container even though
   their black/blue background bars already span the full width, leaving a
   visible inset gap on wide screens. Widen just these two containers (not
   .dg-container everywhere — article/body text should stay readable-width). */
#blogmagazine-menu-wrap .dg-container,
.blogmagazine-ticker-wrapper .dg-container {
	max-width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	box-sizing: border-box;
}