/* Instant dark background from class set in — prevents FOUC */
html.dark,
html.dark body {
background-color: #142030 !important;
}
/*
* Mirror all header.dark rules using body.dark header so they apply
* the moment body gets the dark class (before header element renders).
*/
body.dark header .header-top { border-color: rgba(235, 235, 235, 0.2); }
body.dark header .centered-nav { border-top-color: rgba(235, 235, 235, 0.2); }
body.dark header .text-logo { color: #fff; }
body.dark header .logo-light { display: block !important; }
body.dark header .logo-dark { display: none !important; }
body.dark header .social-icons li a { color: #fff; }
body.dark header .navbar .nav-link { color: #fff; }
/* Hide the parent theme's fixed floating switcher */
.switcher-button {
display: none !important;
}
/* ── .icon-button: replace Kirki gradient with solid colour ─────────────── */
.icon-button {
background-image: none !important;
background-color: #3D6698 !important;
transition: filter 0.3s ease !important;
}
.icon-button:hover {
background-position: unset !important;
filter: brightness(1.2) !important;
}
body.dark .icon-button {
background-color: #1e3a5a !important;
border: 1px solid rgba(135, 192, 255, 0.3) !important;
}
body.dark .icon-button:hover {
filter: brightness(1.3) !important;
box-shadow: 0 0 8px rgba(30, 115, 190, 0.25) !important;
}
/* ── Dark mode toggle button — matches .icon-button circle style ─────────── */
#dark-mode-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
padding: 0;
font-size: 16px;
line-height: 1;
color: #ffffff;
}
#dark-mode-toggle:focus {
outline: none;
}
/* Show moon in light mode, sun in dark mode */
#dark-mode-toggle .dm-icon-sun {
display: none;
}
#dark-mode-toggle .dm-icon-moon {
display: inline;
}
body.dark #dark-mode-toggle .dm-icon-sun {
display: inline;
}
body.dark #dark-mode-toggle .dm-icon-moon {
display: none;
}
/* ── Dark mode readability fixes ────────────────────────────────────────── */
/* Body / content text: Elementor --e-global-color-text #7a7a7a = 3.83:1 → #94a3b8 = 6.2:1 (AA) */
body.dark {
--e-global-color-text: #94a3b8;
}
/* Content links: #1e73be = 3.32:1 → #7bbcff = 7.9:1 (AAA) */
body.dark .entry-content a {
color: #7bbcff;
}
/* Content link hover: clearly distinct from base link colour */
body.dark .entry-content a:hover {
color: #c0daff;
}
/* General link hover (outside post content) */
body.dark a:hover {
color: #7bbcff;
}
/* Nav pill base: reserve 1px border slot + pill shape to prevent layout shift on hover */
.navbar-nav li .nav-link {
border: 1px solid transparent;
border-radius: 25px;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Light mode active pill: lighter blue */
.navbar-nav li .nav-link.active {
background: #6aaee8 !important;
background-image: none !important;
border-color: #4287c8 !important;
}
/* Light mode pill hover (non-active): subtle matching border */
.navbar-nav li .nav-link:not(.active):hover {
border-color: rgba(106, 174, 232, 0.5) !important;
}
/* Active nav pill: ghost variant for dark mode */
body.dark .navbar-nav li .nav-link.active {
background: rgba(30, 115, 190, 0.2) !important;
border-color: rgba(135, 192, 255, 0.35) !important;
color: #ffffff !important;
}
/* Dark mode pill hover (non-active): blue border */
body.dark .navbar-nav li .nav-link:not(.active):hover {
border-color: rgba(135, 192, 255, 0.25) !important;
}
/* Blog name + nav links: no colour change on hover in dark mode */
body.dark header a.text-logo:hover,
body.dark header .navbar-nav .nav-link:hover,
body.dark header .navbar-nav .nav-link:focus {
color: #ffffff;
}
/* Inline code: Bootstrap pink #d63384 = 3.65:1 → #f472b6 = 6.0:1 (AA) */
body.dark code:not(pre code) {
color: #f472b6;
}
/* Elementor CTA buttons: smooth hover for both modes */
.elementor-button {
transition: filter 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor-button:hover,
.elementor-button:focus {
filter: brightness(1.18) !important;
color: #ffffff !important;
}
/* Dark mode: darker base + stronger glow on hover */
body.dark .elementor-button {
background-color: #1e3a5a !important;
border-color: rgba(135, 192, 255, 0.25) !important;
}
body.dark .elementor-button:hover,
body.dark .elementor-button:focus {
filter: brightness(1.25) !important;
box-shadow: 0 0 10px rgba(30, 115, 190, 0.2) !important;
color: #7bbcff !important;
}
/* Elementor divider lines in dark mode */
body.dark .elementor-divider-separator {
border-top-color: rgba(235, 235, 235, 0.2) !important;
}
/* Footer compliance links (Terms & Privacy) */
body.dark .wpautoterms-footer,
body.dark .wpautoterms-footer a {
color: #cbd5e1 !important;
}
body.dark .wpautoterms-footer a:hover {
color: #7bbcff !important;
}
/* Match nav divider opacity to other dark mode borders */
body.dark div.collapse.navbar-collapse.justify-content-center.centered-nav {
border-top-color: rgba(235, 235, 235, 0.2) !important;
border-bottom-color: rgba(235, 235, 235, 0.2) !important;
}
/* ── .btn-default (Subscribe, Submit Message) ───────────────────────────── */
/* Light mode: replace Kirki inline gradient with solid blue */
.btn-default {
background-image: none !important;
background-color: #3D6698 !important;
border: 1px solid #2a4d7a !important;
transition: filter 0.3s ease, box-shadow 0.3s ease !important;
}
.btn-default:hover,
.btn-default:focus {
filter: brightness(1.3) !important;
box-shadow: 0 0 10px rgba(61, 102, 152, 0.35) !important;
color: #ffffff !important;
}
/* Dark mode: deeper navy like other CTA buttons */
body.dark .btn-default {
background-color: #1e3a5a !important;
border-color: rgba(135, 192, 255, 0.25) !important;
}
body.dark .btn-default:hover,
body.dark .btn-default:focus {
filter: brightness(1.25) !important;
box-shadow: 0 0 10px rgba(30, 115, 190, 0.2) !important;
}
/* ── Dark mode form inputs ───────────────────────────────────────────────── */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="tel"],
body.dark input[type="search"],
body.dark input[type="url"],
body.dark input[type="password"],
body.dark textarea {
background-color: #1e2d42 !important;
color: #d0d8e4 !important;
border-color: rgba(135, 192, 255, 0.2) !important;
}
body.dark input[type="text"]::placeholder,
body.dark input[type="email"]::placeholder,
body.dark input[type="tel"]::placeholder,
body.dark input[type="search"]::placeholder,
body.dark textarea::placeholder {
color: rgba(180, 200, 220, 0.45) !important;
}
body.dark input[type="text"]:focus,
body.dark input[type="email"]:focus,
body.dark input[type="tel"]:focus,
body.dark input[type="search"]:focus,
body.dark textarea:focus {
border-color: rgba(135, 192, 255, 0.45) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(30, 115, 190, 0.2) !important;
}
/* ── Social icon buttons (Elementor .elementor-social-icon) ─────────────── */
/* Smooth brightness on hover instead of Elementor's default opacity fade */
.elementor-social-icon {
transition: filter 0.3s ease !important;
}
.elementor-social-icon:hover {
opacity: 1 !important;
filter: brightness(1.18) !important;
}
body.dark .elementor-social-icon:hover {
filter: brightness(1.25) !important;
}
/* ── Post format icon over thumbnails — hide it ─────────────────────────── */
.post .post-format,
.post .post-format-sm {
display: none !important;
}
/* ── Mobile canvas menu dark mode ───────────────────────────────────────── */
/* Dark background for canvas menu in dark mode */
body.dark .canvas-menu {
background-color: #142030 !important;
color: #d0d8e4 !important;
}
body.dark .canvas-menu .vertical-menu li a,
body.dark .canvas-menu a {
color: #d0d8e4 !important;
}
/* Correct logo in canvas menu when dark mode is active */
body.dark .canvas-menu .logo-dark { display: none !important; }
body.dark .canvas-menu .logo-light { display: block !important; }
/* ── Mobile: hide TOC toggle when canvas menu is open ───────────────────── */
/* .canvas-menu.open is added by the Katen burger JS */
.canvas-menu.open ~ #blog-toc-toggle,
body.canvas-is-open #blog-toc-toggle {
display: none !important;
}
/* ── Pagination: circular button styling ─────────────────────────────────── */
/* Light mode: white background for inactive, nav-pill blue for active */
.page-numbers:not(.current) {
background: #FFF;
}
.page-numbers:not(.current):hover {
background: rgba(106, 174, 232, 0.15) !important;
background-image: none !important;
border-color: rgba(66, 135, 200, 0.5) !important;
color: #4287c8 !important;
}
.page-numbers.current {
background: #6aaee8 !important;
background-image: none !important;
border-color: #4287c8 !important;
color: #ffffff !important;
box-shadow: none !important;
}
/* Dark mode: elevated navy for inactive, ghost navy for active */
body.dark .page-numbers:not(.current) {
background: rgba(30, 58, 90, 0.4);
color: #94a3b8;
border-color: rgba(135, 192, 255, 0.25);
}
body.dark .page-numbers:not(.current):hover {
background: rgba(30, 115, 190, 0.35) !important;
background-image: none !important;
color: #7bbcff !important;
border-color: rgba(135, 192, 255, 0.5) !important;
}
body.dark .page-numbers.current {
background: rgba(30, 115, 190, 0.2) !important;
background-image: none !important;
border-color: rgba(135, 192, 255, 0.35) !important;
color: #ffffff !important;
box-shadow: none !important;
}