/**
 * Dark Mode — WL Custom Theme
 * -----------------------------------------------------------------------
 * PART 1: Toggle icon (lightbulb) — sits inline in the Top Navigation Bar
 *         next to the search icon, on both desktop and mobile. Fixed size,
 *         normal flex flow — never floats and never shifts surrounding
 *         menu items when it appears, disappears, or is clicked.
 *
 * PART 2: Dark Mode styles — applied only to html/body base, form fields,
 *         code blocks, images and scrollbars. All other background/text
 *         colour changes are handled surgically by darkmode.js so this
 *         stylesheet cannot cause any layout shift on its own.
 */

/* =====================================================
   PART 1 — TOGGLE ICON
===================================================== */
.wlcustom-dm-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #ffffff !important;
	flex-shrink: 0;
	transition: opacity 0.2s;
}
.wlcustom-dm-toggle:hover { opacity: 0.75; }

.wlcustom-dm-icon {
	display: none;
	width: 20px;
	height: 20px;
}
.wlcustom-dm-icon svg { display: block; width: 100%; height: 100%; }

/* Light mode (default): show the glowing bulb (with rays) */
.wlcustom-dm-icon-on  { display: flex; }
.wlcustom-dm-icon-off { display: none; }

/* Dark mode active: show the plain bulb (no rays) */
[data-wlcustom-dm="dark"] .wlcustom-dm-icon-on  { display: none; }
[data-wlcustom-dm="dark"] .wlcustom-dm-icon-off { display: flex; }

/* Desktop toggle — same height as the desktop search icon, sits right after it.
   Left padding is close to (but ~12% tighter than) the search icon's own
   29px left padding, pulling the toggle a bit closer to the search icon
   while still keeping a clear, breakpoint-independent gap between them. */
.wlcustom-dm-toggle-desktop {
	height: var(--topnav-h, 60px);
	padding: 0 14px 0 23.8px;
}
.wlcustom-dm-toggle-desktop .wlcustom-dm-icon {
	width: 18px;
	height: 18px;
}

/* Mobile toggle — same padding rhythm as the mobile search icon.
   If the search icon is hidden (Customizer option), this pushes itself
   to the right edge instead; if the search icon is visible, it simply
   sits right after it. */
.wlcustom-dm-toggle-mobile {
	padding: 6px 8px;
	margin-left: auto;
}
.topnav-mob-search-icon ~ .wlcustom-dm-toggle-mobile {
	margin-left: 0;
}

/* =====================================================
   PART 1B — DISABLED-PAGE TOGGLE STATE
   Shown instead of the normal toggle when Dark Mode has
   been turned off for the current post/page (per-post
   checkbox, ID/category/tag exclusion, etc). Deliberately
   NOT built on the .wlcustom-dm-toggle class, so it can
   never pick up that class's hover opacity or the "protect
   icon from dark-mode filters" rule further down — this
   icon is SUPPOSED to look dimmed/gray.
===================================================== */
.wlcustom-dm-disabled-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
}
.wlcustom-dm-disabled-toggle-desktop {
	height: var(--topnav-h, 60px);
	padding: 0 14px 0 23.8px;
}
.wlcustom-dm-disabled-toggle-desktop .wlcustom-dm-icon {
	width: 18px;
	height: 18px;
}
.wlcustom-dm-disabled-toggle-mobile {
	padding: 6px 8px;
	margin-left: auto;
}
.topnav-mob-search-icon ~ .wlcustom-dm-disabled-toggle-mobile {
	margin-left: 0;
}

.wlcustom-dm-disabled-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #9a9a9a;
	opacity: 0.45;
	filter: grayscale(1);
	transition: opacity 0.2s;
}
.wlcustom-dm-disabled-btn:hover,
.wlcustom-dm-disabled-btn:focus-visible {
	opacity: 0.7;
}

/* The "not allowed" note — tiny font, small gray box, anchored to the icon */
.wlcustom-dm-disabled-tip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	background: #4a4a4a;
	color: #f2f2f2;
	font-size: 10px;
	line-height: 1.3;
	padding: 4px 7px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 9999;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.wlcustom-dm-disabled-tip[hidden] {
	display: none;
}

/* =====================================================
   PART 2 — DARK MODE STYLES
   Philosophy: darkmode.js's computed-style scanner handles
   ALL background and text colour changes surgically. CSS here
   only handles things JS cannot reach: pseudo-elements, form
   inputs, scrollbars, and the html/body base.
===================================================== */

/* Base: html and body only — NOT divs, NOT footer, NOT any structural tag */
[data-wlcustom-dm="dark"] html,
[data-wlcustom-dm="dark"] body {
	background-color: var(--wlcustom-dm-bg, #0a0a0a) !important;
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}

/* color-scheme tells browser chrome (scrollbars, form controls) to go dark */
[data-wlcustom-dm="dark"] {
	color-scheme: dark;
}

/* Forms — JS cannot easily reach input internals */
[data-wlcustom-dm="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-wlcustom-dm="dark"] textarea,
[data-wlcustom-dm="dark"] select {
	background-color: #1e1e1e !important;
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
	border-color: #333 !important;
}

/* Code blocks */
[data-wlcustom-dm="dark"] pre,
[data-wlcustom-dm="dark"] code,
[data-wlcustom-dm="dark"] kbd {
	background-color: #1e1e1e !important;
	color: #d4d0c8 !important;
	border-color: #333 !important;
}

/* Images: subtle dim so pure-white photo backgrounds don't glare */
[data-wlcustom-dm="dark"] img {
	filter: brightness(0.88) contrast(1.02) !important;
	transition: filter 0.3s !important;
}
[data-wlcustom-dm="dark"] img:hover {
	filter: brightness(1) contrast(1) !important;
}

/* Scrollbar — no custom styling.
   -----------------------------------------------------------------------
   Every prior attempt here (custom widths, custom colours, ::-webkit-
   scrollbar overrides, scrollbar-color/scrollbar-width, scrollbar-gutter)
   shared the same underlying problem: setting a width or height on
   ::-webkit-scrollbar — or setting a non-auto scrollbar-width — is what
   tells Chrome/Edge/Safari to stop rendering their native "overlay"
   scrollbar (translucent, floats over the content, takes no layout
   space) and switch to a "classic" one instead (opaque, always visible,
   permanently reserves a strip of layout width). That reserved strip is
   exactly what was clipping a few px off the right edge of the page.

   There is no current CSS-only way to keep a custom colour/width AND
   keep the browser's native overlay behaviour — the old `overflow:
   overlay` trick that used to allow this was removed from Chromium in
   2023 (aliased to plain `overflow: auto`), and scrollbar-gutter only
   reserves space, it doesn't grant overlay rendering to browsers that
   don't already have it.

   So: don't touch the scrollbar at all. Every modern browser's default,
   un-styled scrollbar already IS the translucent, overlaying style being
   asked for here — that's simply what "no custom CSS" looks like on
   macOS, iOS, Android, and any Windows/Linux setup with overlay
   scrollbars enabled. The one thing worth keeping is `color-scheme`
   below, which tells the browser to tint its native scrollbar (and other
   native controls) for dark backgrounds automatically — no manual
   colours required, and it can't cause a layout-width mismatch because
   it changes tint only, never whether space is reserved. */

/* No transitions on body — switching is handled atomically in JS to
   prevent layout shift and jitter during the mode change. */

/* =====================================================
   PROTECT the toggle icon itself from dark-mode overrides
===================================================== */
.wlcustom-dm-toggle,
.wlcustom-dm-toggle * {
	filter: none !important;
}