/* ============================================================================
 * LokTech dark mode - techengage theme
 *
 * Scoped entirely under [data-theme="dark"], so the light appearance is left
 * byte-for-byte untouched and there is nothing to regress. The attribute is
 * stamped on <html> before first paint by the inline script in wp_head.
 *
 * techengage has ~848 hardcoded colour declarations and no CSS variables, so
 * these are targeted overrides rather than a re-theme. Selectors carry the
 * [data-theme] prefix, which adds one attribute to specificity and is enough to
 * beat the theme's own rules without !important in almost every case.
 * ========================================================================== */

:root[data-theme="dark"] {
	--lt-bg:         #16181C;   /* page */
	--lt-surface:    #1F2229;   /* cards, widgets, post boxes */
	--lt-surface-2:  #262A32;   /* hover / nested surfaces */
	--lt-border:     #333844;
	--lt-text:       #F2F3F5;
	--lt-muted:      #AEB4BE;
	--lt-link:       #8C9EFF;   /* theme indigo #3f51b5 lightened; #3f51b5 fails AA here */
	--lt-link-hover: #B4C0FF;
	--lt-code-bg:    #101217;

	/* Native form controls and scrollbars follow the theme. */
	color-scheme: dark;
}

/* --- page shell ---------------------------------------------------------- */
/* body.custom-background is set from the customizer (#3a3a3a) in a <style>
 * block, so this needs the extra element+attribute to outrank it. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body.custom-background {
	background-color: var(--lt-bg);
	color: var(--lt-text);
}
:root[data-theme="dark"] .wrapper { background: transparent; }

:root[data-theme="dark"] h1, :root[data-theme="dark"] .h1,
:root[data-theme="dark"] h2, :root[data-theme="dark"] .h2,
:root[data-theme="dark"] h3, :root[data-theme="dark"] .h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] .h4,
:root[data-theme="dark"] h5, :root[data-theme="dark"] .h5,
:root[data-theme="dark"] h6, :root[data-theme="dark"] .h6 { color: var(--lt-text); }

:root[data-theme="dark"] a { color: var(--lt-link); }
:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] a:focus { color: var(--lt-link-hover); }

/* --- content cards ------------------------------------------------------- */
:root[data-theme="dark"] .single .techengage-blog-post-box,
:root[data-theme="dark"] .featured-post .techengage-blog-post-box,   /* was blanchedalmond */
:root[data-theme="dark"] .grey-bg {
	background: var(--lt-surface);
	color: var(--lt-text);
}
:root[data-theme="dark"] .techengage-blog-post-box p,
:root[data-theme="dark"] .techengage-blog-post-box li,
:root[data-theme="dark"] .techengage-blog-post-box .small > p { color: var(--lt-text); }

:root[data-theme="dark"] .techengage-blog-category a,
:root[data-theme="dark"] .techengage-blog-category i,
:root[data-theme="dark"] .post-meta-data,
:root[data-theme="dark"] .meta-user-des,
:root[data-theme="dark"] .meta-data-date { color: var(--lt-muted); }
:root[data-theme="dark"] .techengage-blog-category a:hover { color: var(--lt-link-hover); }

:root[data-theme="dark"] .techengage-heading .techengage-heading-inner { color: var(--lt-text); }

/* --- navigation ---------------------------------------------------------- */
/* The header keeps its #590000 brand red - already dark, so it carries over.
 * The submenu background is a customizer value (#ffffff) and must be replaced. */
:root[data-theme="dark"] .navbar-wp .dropdown-menu {
	background-color: var(--lt-surface);
	border-color: var(--lt-border);
}
:root[data-theme="dark"] .navbar-wp .dropdown-menu > li > a { color: var(--lt-text); }
:root[data-theme="dark"] .navbar-wp .dropdown-menu > li > a:hover,
:root[data-theme="dark"] .navbar-wp .dropdown-menu > li > a:focus {
	background-color: var(--lt-surface-2);
	color: var(--lt-link-hover);
}
:root[data-theme="dark"] .navbar-wp .navbar-collapse.collapse.in,
:root[data-theme="dark"] .navbar-default .navbar-collapse { border-color: var(--lt-border); }

/* --- sidebar widgets ----------------------------------------------------- */
:root[data-theme="dark"] .techengage-sidebar .techengage-widget {
	background: var(--lt-surface);
	border-color: var(--lt-border);
}
:root[data-theme="dark"] .techengage-sidebar { border-color: var(--lt-border); }
:root[data-theme="dark"] .techengage-sidebar .techengage-widget h6,
:root[data-theme="dark"] .techengage-sidebar .techengage-widget h2 { color: var(--lt-text); }
:root[data-theme="dark"] .techengage-sidebar .techengage-widget .textwidget { color: var(--lt-muted); }
:root[data-theme="dark"] .techengage-sidebar a { color: var(--lt-muted); }
:root[data-theme="dark"] .techengage-sidebar a:hover,
:root[data-theme="dark"] .techengage-sidebar a:focus { color: var(--lt-link-hover); }
:root[data-theme="dark"] .techengage-sidebar .techengage-widget ul li,
:root[data-theme="dark"] .techengage-sidebar .techengage-category-widget ul li { border-color: var(--lt-border); }
:root[data-theme="dark"] .techengage-sidebar .techengage-widget-tags a,
:root[data-theme="dark"] .techengage-sidebar .techengage-widget .tagcloud a {
	background: var(--lt-surface-2);
	border-color: var(--lt-border);
	color: var(--lt-muted);
}

/* --- forms --------------------------------------------------------------- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input:not([type]),
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
	background-color: var(--lt-surface-2);
	border-color: var(--lt-border);
	color: var(--lt-text);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--lt-muted); opacity: 1; }
:root[data-theme="dark"] .form-control:hover,
:root[data-theme="dark"] .form-control:focus { border-color: var(--lt-link); }

/* --- buttons & pagination ------------------------------------------------ */
:root[data-theme="dark"] .pagination > li > a,
:root[data-theme="dark"] .pagination > li > span,
:root[data-theme="dark"] .page-numbers {
	background: var(--lt-surface);
	border-color: var(--lt-border);
	color: var(--lt-text);
}
:root[data-theme="dark"] .pagination > li > a:hover,
:root[data-theme="dark"] .page-numbers.current { background: var(--lt-link); border-color: var(--lt-link); color: #10121a; }
:root[data-theme="dark"] .read-more-button a { color: var(--lt-link); }

/* --- code, quotes, tables : this is a sysadmin blog, these carry the posts - */
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code,
:root[data-theme="dark"] kbd,
:root[data-theme="dark"] samp,
:root[data-theme="dark"] .wp-block-code {
	background: var(--lt-code-bg);
	border-color: var(--lt-border);
	color: #E6E8EC;
}
:root[data-theme="dark"] blockquote {
	background: var(--lt-surface-2);
	border-color: var(--lt-link);
	color: var(--lt-text);
}
:root[data-theme="dark"] blockquote::before { color: var(--lt-border); }
:root[data-theme="dark"] table,
:root[data-theme="dark"] .wp-block-table table { color: var(--lt-text); border-color: var(--lt-border); }
:root[data-theme="dark"] table th,
:root[data-theme="dark"] table td { border-color: var(--lt-border); }
:root[data-theme="dark"] table thead th { background: var(--lt-surface-2); }
:root[data-theme="dark"] table tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }
:root[data-theme="dark"] hr { border-color: var(--lt-border); }

/* --- comments ------------------------------------------------------------ */
:root[data-theme="dark"] .comments-area .comment-list li { background: var(--lt-surface); }
:root[data-theme="dark"] .comments-area .comment-body { border-bottom-color: var(--lt-border); }
:root[data-theme="dark"] .comments-area a { color: var(--lt-link); }
:root[data-theme="dark"] .comments-area label { color: var(--lt-muted); }
:root[data-theme="dark"] .comments-area .comment-reply-link { border-color: var(--lt-border); color: var(--lt-text); }
:root[data-theme="dark"] .comments-area .comment-reply-link:hover { background-color: var(--lt-surface-2); color: var(--lt-text); }

/* --- sidebar calendar widget --------------------------------------------- */
:root[data-theme="dark"] .techengage-sidebar .calendar_wrap table caption,
:root[data-theme="dark"] .techengage-sidebar .calendar_wrap table tfoot,
:root[data-theme="dark"] .techengage-sidebar .calendar_wrap table thead th {
	background: var(--lt-surface-2);
	border-color: var(--lt-border);
	color: var(--lt-text);
}
:root[data-theme="dark"] .techengage-sidebar .calendar_wrap table tbody td { border-color: var(--lt-border); color: var(--lt-muted); }

/* --- third-party plugin surfaces ----------------------------------------- */
/* cookie-law-info banner */
:root[data-theme="dark"] .cli-modal-content,
:root[data-theme="dark"] #cookie-law-info-bar {
	background: var(--lt-surface) !important;
	color: var(--lt-text) !important;
	border-color: var(--lt-border) !important;
}
/* wpforms */
:root[data-theme="dark"] .wpforms-container .wpforms-field-label { color: var(--lt-text); }
:root[data-theme="dark"] .wpforms-container input,
:root[data-theme="dark"] .wpforms-container textarea,
:root[data-theme="dark"] .wpforms-container select {
	background: var(--lt-surface-2);
	border-color: var(--lt-border);
	color: var(--lt-text);
}

/* --- the navbar toggle control ------------------------------------------- */
.ltdm-nav-item .ltdm-toggle { cursor: pointer; }
.ltdm-nav-item .ltdm-icon { margin-right: 6px; }
/* The nav is horizontal on desktop where the icon alone reads fine; the word is
 * kept for the collapsed mobile menu, which is a plain vertical list. */
@media (min-width: 768px) {
	.ltdm-nav-item .ltdm-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ltdm-nav-item .ltdm-icon { margin-right: 0; }
}
.ltdm-nav-item .ltdm-toggle:focus-visible { outline: 2px solid var(--lt-link, #3f51b5); outline-offset: 2px; }

/* Honour users who ask for reduced motion; the theme animates widgets in. */
@media (prefers-reduced-motion: reduce) {
	:root[data-theme="dark"] .animated { animation: none !important; }
}
