/*
 * Site-wide dark theme shared by the TechMag Elementor widgets.
 *
 * Elementor stores many widget colours in its generated post CSS. The dark
 * theme therefore overrides the semantic widget variables (with !important)
 * instead of relying only on the body background.
 */

:root.techmag-dark-mode {
	--tm-dark-page: #070b16;
	--tm-dark-surface: #0f172a;
	--tm-dark-surface-raised: #111c2f;
	--tm-dark-text: #dbe4f0;
	--tm-dark-heading: #f8fafc;
	--tm-dark-muted: #9aa9bd;
	--tm-dark-border: rgba(148, 163, 184, .22);
	--tm-dark-soft-border: rgba(148, 163, 184, .14);
	color-scheme: dark;
}

html.techmag-dark-mode,
html.techmag-dark-mode body,
body.techmag-dark-mode {
	background-color: var(--tm-dark-page) !important;
	color: var(--tm-dark-text);
}

html.techmag-dark-mode .site-main,
html.techmag-dark-mode .elementor-location-single,
html.techmag-dark-mode .elementor-location-archive {
	background-color: var(--tm-dark-page);
	color: var(--tm-dark-text);
}

/* Author and search templates can carry a white background from Elementor. */
html.techmag-dark-mode body.author .elementor-location-archive,
html.techmag-dark-mode body.search .elementor-location-archive,
html.techmag-dark-mode body.author .elementor-location-archive > .elementor-element.e-con,
html.techmag-dark-mode body.search .elementor-location-archive > .elementor-element.e-con {
	background-color: var(--tm-dark-page) !important;
	color: var(--tm-dark-text) !important;
}

/* Author/archive widget: replace its intentionally light preset in dark mode. */
html.techmag-dark-mode .techmag-archive-row {
	--tm-ar-bg: var(--tm-dark-page) !important;
	--tm-ar-surface: var(--tm-dark-surface) !important;
	--tm-ar-surface-2: var(--tm-dark-surface-raised) !important;
	--tm-ar-card-bg: var(--tm-dark-surface) !important;
	--tm-ar-card-bg-2: var(--tm-dark-surface-raised) !important;
	--tm-ar-text: var(--tm-dark-heading) !important;
	--tm-ar-muted: var(--tm-dark-muted) !important;
	--tm-ar-border: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-wrapper {
	background: var(--tm-dark-page) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-card {
	background-color: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-archive-row.techmag-ar-card-bg--gradient.techmag-ar-card-gradient--linear .techmag-ar-card {
	background-image: linear-gradient(
		var(--tm-ar-card-angle),
		var(--tm-dark-surface) var(--tm-ar-card-stop-1),
		var(--tm-dark-surface-raised) var(--tm-ar-card-stop-2)
	) !important;
}

html.techmag-dark-mode .techmag-archive-row.techmag-ar-card-bg--gradient.techmag-ar-card-gradient--radial .techmag-ar-card {
	background-image: radial-gradient(
		circle at var(--tm-ar-card-position),
		var(--tm-dark-surface) var(--tm-ar-card-stop-1),
		var(--tm-dark-surface-raised) var(--tm-ar-card-stop-2)
	) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-card-title,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-card-title a {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-card-excerpt,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-card-meta,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-subcats-title {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-subcat-item,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-pagination .page-numbers,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-empty {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-archive-row .techmag-ar-subcat-item:hover,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-subcat-item.is-active,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-pagination a.page-numbers:hover,
html.techmag-dark-mode .techmag-archive-row .techmag-ar-pagination .page-numbers.current {
	background: var(--tm-ar-accent) !important;
	border-color: var(--tm-ar-accent) !important;
	color: #fff !important;
}

/* Dedicated search widget: keep all result surfaces in the site dark palette. */
html.techmag-dark-mode .techmag-search-results {
	--sr-bg: var(--tm-dark-page) !important;
	--sr-card: var(--tm-dark-surface) !important;
	--sr-line: var(--tm-dark-border) !important;
	--sr-text: var(--tm-dark-heading) !important;
	--sr-muted: var(--tm-dark-muted) !important;
	background: var(--tm-dark-page) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-card,
html.techmag-dark-mode .techmag-search-results .techmag-sr-popular,
html.techmag-dark-mode .techmag-search-results .techmag-sr-empty {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-tab,
html.techmag-dark-mode .techmag-search-results .techmag-sr-pagination .page-numbers {
	background: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-tab:hover,
html.techmag-dark-mode .techmag-search-results .techmag-sr-tab.is-active,
html.techmag-dark-mode .techmag-search-results .techmag-sr-pagination .current,
html.techmag-dark-mode .techmag-search-results .techmag-sr-pagination a:hover {
	border-color: transparent !important;
	background: linear-gradient(135deg, var(--sr-blue), var(--sr-accent)) !important;
	color: #fff !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-card-title,
html.techmag-dark-mode .techmag-search-results .techmag-sr-card-title a,
html.techmag-dark-mode .techmag-search-results .techmag-sr-popular-title,
html.techmag-dark-mode .techmag-search-results .techmag-sr-popular-item h3,
html.techmag-dark-mode .techmag-search-results .techmag-sr-popular-item h3 a,
html.techmag-dark-mode .techmag-search-results .techmag-sr-empty h2 {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-card-excerpt,
html.techmag-dark-mode .techmag-search-results .techmag-sr-card-meta,
html.techmag-dark-mode .techmag-search-results .techmag-sr-toolbar,
html.techmag-dark-mode .techmag-search-results .techmag-sr-popular-item small,
html.techmag-dark-mode .techmag-search-results .techmag-sr-empty p {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-form {
	color-scheme: light;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-form input {
	background: #fff !important;
	color: #111827 !important;
	caret-color: var(--sr-accent);
	color-scheme: light;
}

html.techmag-dark-mode .techmag-search-results .techmag-sr-form input::placeholder {
	color: #64748b !important;
}

/* Single-post hero/meta card. */
html.techmag-dark-mode body.techmag-dark-mode .elementor-location-single .techmag-post-meta-box,
html.techmag-dark-mode .techmag-post-meta-box {
	--tm-post-meta-bg: var(--tm-dark-surface) !important;
	--tm-post-meta-border: var(--tm-dark-border) !important;
	--tm-post-meta-meta-color: var(--tm-dark-muted) !important;
	--tm-post-meta-author-color: var(--tm-dark-heading) !important;
	background-color: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
}

html.techmag-dark-mode .techmag-post-meta-box__title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode body.techmag-dark-mode .elementor-location-single .techmag-post-meta-box__excerpt,
html.techmag-dark-mode .techmag-post-meta-box__excerpt {
	background-color: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-post-meta-box__breadcrumb,
html.techmag-dark-mode body.techmag-dark-mode .elementor-location-single .techmag-post-meta-box__meta,
html.techmag-dark-mode body.techmag-dark-mode .elementor-location-single .techmag-post-meta-box__meta-item,
html.techmag-dark-mode body.techmag-dark-mode .elementor-location-single .techmag-post-meta-box__meta-icon,
html.techmag-dark-mode .techmag-post-meta-box__meta,
html.techmag-dark-mode .techmag-post-meta-box__meta-item,
html.techmag-dark-mode .techmag-post-meta-box__meta-icon {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-post-meta-box__author-name {
	color: var(--tm-dark-heading) !important;
}

/* Article body and its embedded content elements. */
html.techmag-dark-mode .techmag-post-content-pro {
	--tm-pcp-content-color: var(--tm-dark-text) !important;
	--tm-pcp-table-border: var(--tm-dark-border) !important;
	--tm-pcp-table-head: var(--tm-dark-surface-raised) !important;
	background: transparent !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-pcp-content,
html.techmag-dark-mode .techmag-pcp-content p,
html.techmag-dark-mode .techmag-pcp-content li,
html.techmag-dark-mode .techmag-pcp-content figcaption {
	color: var(--tm-dark-text);
}

html.techmag-dark-mode .techmag-pcp-content h2,
html.techmag-dark-mode .techmag-pcp-content h3,
html.techmag-dark-mode .techmag-pcp-content h4,
html.techmag-dark-mode .techmag-pcp-content h5,
html.techmag-dark-mode .techmag-pcp-content h6 {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-pcp-content blockquote {
	background: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-pcp-accent);
}

html.techmag-dark-mode .techmag-pcp-content th {
	background: var(--tm-dark-surface-raised) !important;
	color: var(--tm-dark-heading);
}

html.techmag-dark-mode .techmag-pcp-content td {
	background: var(--tm-dark-surface);
}

html.techmag-dark-mode .techmag-pcp-content code:not(pre code) {
	background: rgba(148, 163, 184, .14);
	color: #e2e8f0;
}

/* Table of contents: preserve the site's red accent/title, replace the white card. */
html.techmag-dark-mode .techmag-pcp-toc {
	--tm-pcp-toc-bg: var(--tm-dark-surface) !important;
	--tm-pcp-toc-title: var(--tm-dark-heading) !important;
	--tm-pcp-toc-link: var(--tm-dark-text) !important;
	--tm-pcp-toc-link-hover: #fff !important;
	--tm-pcp-toc-text: var(--tm-dark-text) !important;
	--tm-pcp-toc-text-hover: #fff !important;
	--tm-pcp-toc-item-divider: var(--tm-dark-soft-border) !important;
	--tm-pcp-toc-border: var(--tm-dark-border) !important;
	--tm-pcp-toc-hover-bg: rgba(255, 255, 255, .06) !important;
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
}

html.techmag-dark-mode .techmag-pcp-toc__link,
html.techmag-dark-mode .techmag-pcp-toc__text {
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-pcp-toc__link:hover,
html.techmag-dark-mode .techmag-pcp-toc__link:focus-visible,
html.techmag-dark-mode .techmag-pcp-toc__link:hover .techmag-pcp-toc__text,
html.techmag-dark-mode .techmag-pcp-toc__link:focus-visible .techmag-pcp-toc__text {
	color: #fff !important;
}

/* Author and tag cards can also carry light colours from Elementor controls. */
html.techmag-dark-mode .techmag-pcp-author-box {
	--tm-pcp-author-bg: var(--tm-dark-surface) !important;
	--tm-pcp-author-border: var(--tm-dark-border) !important;
	--tm-pcp-author-title: var(--tm-dark-heading) !important;
	--tm-pcp-author-name: var(--tm-dark-heading) !important;
	--tm-pcp-author-bio: var(--tm-dark-text) !important;
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	box-shadow: none !important;
}

html.techmag-dark-mode .techmag-pcp-author-box__title,
html.techmag-dark-mode .techmag-pcp-author-box__name {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-pcp-author-box__bio {
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-pcp-tags {
	--tm-pcp-tag-bg: var(--tm-dark-surface-raised) !important;
	--tm-pcp-tag-color: var(--tm-dark-text) !important;
	--tm-pcp-tag-border: var(--tm-dark-border) !important;
	--tm-pcp-tag-label: var(--tm-dark-heading) !important;
}

/* Smart sidebar cards, search fields, latest posts and important links. */
html.techmag-dark-mode .techmag-smart-sidebar {
	--tm-sidebar-bg: transparent !important;
	--tm-sidebar-box-bg: var(--tm-dark-surface) !important;
	--tm-sidebar-title: var(--tm-dark-heading) !important;
	--tm-sidebar-text: var(--tm-dark-text) !important;
	--tm-sidebar-border: var(--tm-dark-border) !important;
	--tm-sidebar-input-bg: var(--tm-dark-surface-raised) !important;
	--tm-sidebar-input-color: var(--tm-dark-heading) !important;
	--tm-sidebar-input-border: var(--tm-dark-border) !important;
	--tm-sidebar-post-title: var(--tm-dark-heading) !important;
	--tm-sidebar-date: var(--tm-dark-muted) !important;
	--tm-sidebar-item-border: var(--tm-dark-soft-border) !important;
	--tm-sidebar-item-hover: rgba(255, 255, 255, .05) !important;
	--tm-sidebar-link-color: var(--tm-dark-heading) !important;
	--tm-sidebar-links-box-bg: var(--tm-dark-surface) !important;
	--tm-sidebar-link-bg: var(--tm-dark-surface-raised) !important;
	--tm-sidebar-link-border: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-sidebar-box {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-sidebar-box__title,
html.techmag-dark-mode .techmag-sidebar-latest__title,
html.techmag-dark-mode .techmag-sidebar-link__title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-sidebar-latest__meta,
html.techmag-dark-mode .techmag-sidebar-link__description {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-sidebar-search input[type="search"] {
	background: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-sidebar-search input[type="search"]::placeholder {
	color: var(--tm-dark-muted);
}

/* Related articles and standard Elementor post metadata. */
html.techmag-dark-mode .gooya-related-carousel__heading,
html.techmag-dark-mode .gooya-related-carousel__title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .gooya-related-carousel__date,
html.techmag-dark-mode .elementor-widget-post-info .elementor-icon-list-text,
html.techmag-dark-mode .elementor-widget-post-info .elementor-icon-list-icon {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .gooya-related-carousel__arrow {
	background: rgba(15, 23, 42, .9) !important;
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .gooya-related-carousel__placeholder {
	background-color: var(--tm-dark-surface-raised) !important;
}

/* Home hero slider and its selected-post sidebar. */
html.techmag-dark-mode .techmag-new-slider__side-heading,
html.techmag-dark-mode .techmag-new-slider__side-title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-new-slider__side-link {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-new-slider__side-link:hover,
html.techmag-dark-mode .techmag-new-slider__side-link:focus-visible {
	background: var(--tm-dark-surface-raised) !important;
	border-color: color-mix(in srgb, var(--tmns-accent) 42%, var(--tm-dark-border)) !important;
	color: var(--tm-dark-heading) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

html.techmag-dark-mode .techmag-new-slider__side-meta {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-new-slider__arrow {
	background: rgba(15, 23, 42, .92);
	color: var(--tm-dark-heading);
}

/* Category cards: turn the full bright/red band into a dark section. */
html.techmag-dark-mode .e-con:has(.techmag-category-cards-section),
html.techmag-dark-mode .e-con:has(.techmag-category-cards-section) > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: var(--tm-dark-page) !important;
}

html.techmag-dark-mode .techmag-category-cards-section {
	background: var(--tm-dark-page);
	box-shadow: 0 0 0 100vmax var(--tm-dark-page);
	clip-path: inset(0 -100vmax);
	color: var(--tm-dark-text);
}

html.techmag-dark-mode .techmag-category-cards-section__header h2 {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-category-card {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

html.techmag-dark-mode .techmag-category-card:hover,
html.techmag-dark-mode .techmag-category-card:focus-visible {
	background: var(--tm-dark-surface-raised) !important;
	border-color: color-mix(in srgb, #ef233c 48%, var(--tm-dark-border)) !important;
}

html.techmag-dark-mode .techmag-category-card__title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-category-card__count {
	color: var(--tm-dark-muted);
}

html.techmag-dark-mode .techmag-category-card__icon {
	background: rgba(239, 35, 60, .13);
}

/* Recommended-posts panels contain several independent white surfaces. */
html.techmag-dark-mode .techmag-recommended-posts {
	background: transparent !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode .techmag-recommended-posts__panel,
html.techmag-dark-mode .techmag-recommended-featured {
	background: var(--tm-dark-surface) !important;
	border-color: var(--tm-dark-border) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}

html.techmag-dark-mode .techmag-recommended-posts__heading,
html.techmag-dark-mode .techmag-recommended-featured__title,
html.techmag-dark-mode .techmag-recommended-row__title {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .techmag-recommended-posts__subtitle,
html.techmag-dark-mode .techmag-recommended-featured__excerpt,
html.techmag-dark-mode .techmag-recommended-meta {
	color: var(--tm-dark-muted) !important;
}

html.techmag-dark-mode .techmag-recommended-row {
	border-color: var(--tm-dark-soft-border) !important;
}

/* Match the popular-category cards on the compact home layout. The mobile
 * stylesheet otherwise paints this panel light grey after dark-mode.css. */
html.techmag-dark-mode body.home .techmag-recommended-posts__panel,
html.techmag-dark-mode body.home .techmag-recommended-posts.featured-right .techmag-recommended-posts__panel {
	background: linear-gradient(
		145deg,
		rgba(17, 28, 47, .9),
		rgba(15, 23, 42, .76)
	) !important;
	border: 1px solid var(--tm-dark-border) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .24) !important;
	-webkit-backdrop-filter: blur(14px) saturate(125%);
	backdrop-filter: blur(14px) saturate(125%);
}

/* home-mobile.css turns each ranked item into a white card. Keep that card
 * treatment in dark mode, but use the raised dark surface instead. */
html.techmag-dark-mode body.home .techmag-recommended-row {
	background: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-dark-soft-border) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

html.techmag-dark-mode .techmag-recommended-row__number {
	background: rgba(239, 35, 60, .13) !important;
}

html.techmag-dark-mode .techmag-recommended-featured__image,
html.techmag-dark-mode .techmag-recommended-row__image {
	background: var(--tm-dark-surface-raised);
}

/* Editor picks already use image overlays; only its section heading was light-only. */
html.techmag-dark-mode .techmag-editor-picks > header h2 {
	color: var(--tm-dark-heading) !important;
}

html.techmag-dark-mode .elementor-location-single .elementor-divider-separator {
	border-color: var(--tm-dark-border) !important;
}

/* wpDiscuz receives .wpd-dark from advanced-header.js; these cover its shell. */
html.techmag-dark-mode #comments,
html.techmag-dark-mode #respond,
html.techmag-dark-mode #wpdcom {
	background: transparent;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode #wpdcom .ql-container,
html.techmag-dark-mode #wpdcom .wpd-form-row .wpdiscuz-item input,
html.techmag-dark-mode #wpdcom .wpd-form-row .wpdiscuz-item textarea,
html.techmag-dark-mode #wpdcom .wpdiscuz-sort-buttons,
html.techmag-dark-mode #wpdcom .wpd-tools-actions {
	background-color: var(--tm-dark-surface-raised) !important;
	border-color: var(--tm-dark-border) !important;
	color: var(--tm-dark-text) !important;
}

html.techmag-dark-mode #wpdcom .wpd-comment-text,
html.techmag-dark-mode #wpdcom .wpd-comment-author,
html.techmag-dark-mode #wpdcom .wpd-thread-head .wpd-thread-info {
	color: var(--tm-dark-text) !important;
}