/**
 * Skyline Theme - Dark Mode Styles
 *
 * @package Skyline
 * @since 1.0.0
 */

/* ============================================
   Dark Mode Variables Override
   ============================================ */

body.dark-mode {
	--skyline-bg: #2c2c2c;
	--skyline-bg-alt: #333333;
	--skyline-bg-card: #383838;
	--skyline-text: #E8E8ED;
	--skyline-text-secondary: #9CA3AF;
	--skyline-text-muted: #6B7280;
	--skyline-heading: #F5F5F7;
	--skyline-border: #444444;
	--skyline-border-light: #3a3a3a;
	--skyline-shadow: rgba(0, 0, 0, 0.3);
	--skyline-overlay: rgba(30, 30, 30, 0.9);
	--skyline-input-bg: #333333;
	--skyline-input-border: #444444;
	--skyline-code-bg: #333333;
	--skyline-accent-bg: #3D2E24;
}

/* ============================================
   General Dark Mode Overrides
   ============================================ */

body.dark-mode {
	background-color: var(--skyline-bg);
	color: var(--skyline-text);
}

body.dark-mode a {
	color: var(--skyline-text);
}

body.dark-mode a:hover {
	color: var(--skyline-accent);
}

/* ============================================
   Header Dark Mode
   ============================================ */

body.dark-mode .site-header {
	background: transparent;
}

/* SVG shadow is inherently darker on dark backgrounds - no override needed */

/* Glass header dark mode */
body.dark-mode .header-inner {
	background: hsla(0, 0%, 15%, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
body.dark-mode .site-header.scrolled .header-inner {
	background: hsla(0, 0%, 15%, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
body.dark-mode .primary-menu .sub-menu,
body.dark-mode > .sub-menu-wrap > .sub-menu {
	background: hsla(0, 0%, 15%, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* Solid header dark mode — overrides glass */
body.dark-mode.header-style-solid .header-inner,
body.dark-mode.header-style-solid .site-header.scrolled .header-inner,
body.dark-mode.header-style-solid .primary-menu .sub-menu,
body.dark-mode.header-style-solid > .sub-menu-wrap > .sub-menu {
	background: #343434 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.dark-mode .header-cta {
	background-color: #FFFFFF;
	color: #1A1A2E !important;
}

body.dark-mode .header-cta:hover {
	background-color: var(--skyline-accent);
	color: #FFFFFF !important;
}

body.dark-mode .primary-menu a:hover,
body.dark-mode .primary-menu .current-menu-item > a {
	background-color: hsla(0, 0%, 100%, 0.06);
}

body.dark-mode .site-title a,
body.dark-mode .primary-menu > li > a,
body.dark-mode .header-actions button {
	color: var(--skyline-text);
}

body.dark-mode .primary-menu > li > a:hover,
body.dark-mode .primary-menu > li.current-menu-item > a {
	color: var(--skyline-accent);
}

/* Sub-menu dark mode styles are now in main.css via body.dark-mode > .sub-menu-wrap selectors */

body.dark-mode .hamburger span {
	background-color: var(--skyline-text);
}

/* ============================================
   Dark Mode Toggle (old header toggle — removed)
   ============================================ */

/* ============================================
   Hero Section Dark Mode
   ============================================ */

body.dark-mode .blog-hero {
	background-color: var(--skyline-bg);
}

body.dark-mode .hero-title {
	color: var(--skyline-heading);
}

body.dark-mode .hero-description {
	color: var(--skyline-text-secondary);
}

/* ============================================
   Category Pills Dark Mode
   ============================================ */

body.dark-mode .category-filter {
	border-color: var(--skyline-border);
}

body.dark-mode .category-pill {
	background-color: color-mix(in srgb, var(--pill-text) 12%, var(--skyline-bg-card));
	color: color-mix(in srgb, var(--pill-text) 55%, #fff);
	border-color: color-mix(in srgb, var(--pill-text) 22%, var(--skyline-border));
}

body.dark-mode .category-pill:hover {
	background-color: color-mix(in srgb, var(--pill-text) 20%, var(--skyline-bg-card));
	filter: brightness(1.15) saturate(1.2);
}

body.dark-mode .pill-icon svg {
	stroke: color-mix(in srgb, var(--pill-text) 55%, #fff);
}

/* ============================================
   About Widget Dark Mode
   ============================================ */

body.dark-mode .about-card-avatar img {
	border-color: #fff;
}

body.dark-mode .skyline-about-widget .social-link {
	color: #fff;
}

body.dark-mode .skyline-about-widget .social-link:hover {
	color: rgba(255,255,255,0.7);
}

body.dark-mode .skyline-about-widget .about-card-name {
	color: #fff !important;
}

body.dark-mode .skyline-about-widget .about-card-role {
	color: rgba(255,255,255,0.85) !important;
}

body.dark-mode .skyline-about-widget .about-card-bio {
	color: rgba(255,255,255,0.9) !important;
}

body.dark-mode .skyline-about-widget .about-card-location {
	color: #fff !important;
}

body.dark-mode .skyline-about-widget .widget-title {
	color: rgba(255,255,255,0.85) !important;
}

body.dark-mode .skyline-about-widget a {
	color: #fff !important;
}

/* ============================================
   Post Cards Dark Mode
   ============================================ */

body.dark-mode .post-card {
	background-color: transparent;
	border-color: transparent;
}

body.dark-mode .post-card:hover {
	box-shadow: none;
}

body.dark-mode .card-title a {
	color: var(--skyline-heading);
}

body.dark-mode .card-title a:hover {
	color: var(--skyline-accent);
}

body.dark-mode .card-excerpt {
	color: var(--skyline-text-secondary);
}

body.dark-mode .card-meta {
	color: var(--skyline-text-muted);
	border-top-color: var(--skyline-border);
}

body.dark-mode .card-author-name {
	color: var(--skyline-text);
}

/* List layout */
body.dark-mode .post-list-item {
	border-bottom-color: var(--skyline-border);
}

body.dark-mode .list-title a {
	color: var(--skyline-heading);
}

body.dark-mode .list-excerpt {
	color: var(--skyline-text-secondary);
}

/* ============================================
   Single Post Dark Mode
   ============================================ */

body.dark-mode .post-header {
	background-color: var(--skyline-bg);
}

body.dark-mode .post-title {
	color: var(--skyline-heading);
}

body.dark-mode .post-meta {
	color: var(--skyline-text-muted);
}

body.dark-mode .post-content {
	color: var(--skyline-text);
}

body.dark-mode .post-content h1,
body.dark-mode .post-content h2,
body.dark-mode .post-content h3,
body.dark-mode .post-content h4,
body.dark-mode .post-content h5,
body.dark-mode .post-content h6 {
	color: var(--skyline-heading);
}

body.dark-mode .post-content blockquote,
body.dark-mode .entry-content blockquote {
	background-color: #3D2E24;
	border-left-color: var(--skyline-accent);
	color: var(--skyline-text);
}

body.dark-mode .post-content pre,
body.dark-mode .post-content code {
	background-color: var(--skyline-code-bg);
	color: var(--skyline-accent);
}

body.dark-mode .post-content table th {
	background-color: var(--skyline-bg-alt);
	color: var(--skyline-heading);
}

body.dark-mode .post-content table td {
	border-color: var(--skyline-border);
}

body.dark-mode .post-content hr {
	border-color: var(--skyline-border);
}

/* Tags */
body.dark-mode .tag-link {
	background-color: var(--skyline-bg-alt);
	color: var(--skyline-text-secondary);
	border-color: var(--skyline-border);
}

body.dark-mode .tag-link:hover {
	background-color: var(--skyline-accent);
	color: #fff;
	border-color: var(--skyline-accent);
}

/* Author Box */
body.dark-mode .author-box {
	background-color: var(--skyline-bg-card);
	border-color: var(--skyline-border);
}

body.dark-mode .author-box .author-name a {
	color: var(--skyline-heading);
}

body.dark-mode .author-box .author-bio {
	color: var(--skyline-text-secondary);
}

/* Post Navigation */
body.dark-mode .post-navigation {
	border-top-color: var(--skyline-border);
}

body.dark-mode .nav-prev,
body.dark-mode .nav-next {
	color: var(--skyline-text);
}

body.dark-mode .nav-prev:hover,
body.dark-mode .nav-next:hover {
	color: var(--skyline-accent);
}

body.dark-mode .nav-label {
	color: var(--skyline-text-muted);
}

/* ============================================
   Sidebar Dark Mode
   ============================================ */

body.dark-mode .widget {
	background-color: var(--skyline-bg-card);
	border-color: var(--skyline-border);
}

body.dark-mode .widget.skyline-about-widget {
	background-color: #3D2E24;
}

body.dark-mode .featured-slide-info,
body.dark-mode .featured-slider-footer {
	background-color: #3D2E24;
}

body.dark-mode .featured-slider-dots {
	background-color: #3D2E24;
}

body.dark-mode .skyline-featured-posts-widget .widget-title {
	background-color: #3D2E24;
}

body.dark-mode .widget-title {
	color: var(--skyline-heading);
}

body.dark-mode .widget a {
	color: var(--skyline-text-secondary);
}

body.dark-mode .widget .featured-slide-title,
body.dark-mode .widget .featured-slide-title a {
	color: #fff !important;
}

body.dark-mode .widget .featured-slide-meta {
	color: rgba(255,255,255,0.85) !important;
}

body.dark-mode .widget a:hover {
	color: var(--skyline-accent);
}

body.dark-mode .widget ul li {
	border-bottom-color: var(--skyline-border-light);
}

/* ============================================
   Comments Dark Mode
   ============================================ */

body.dark-mode .comments-area {
	border-top-color: var(--skyline-border);
}

body.dark-mode .comment-body {
	background-color: var(--skyline-bg-card);
	border-color: var(--skyline-border);
}

body.dark-mode .comment-author .fn {
	color: var(--skyline-heading);
}

body.dark-mode .comment-content {
	color: var(--skyline-text);
}

body.dark-mode .comment-metadata a {
	color: var(--skyline-text-muted);
}

body.dark-mode .comment-respond {
	background-color: #3D2E24;
}

body.dark-mode .comment-respond .comment-form input[type="text"],
body.dark-mode .comment-respond .comment-form input[type="email"],
body.dark-mode .comment-respond .comment-form input[type="url"],
body.dark-mode .comment-respond .comment-form textarea {
	background-color: #fff;
	color: #333;
}

body.dark-mode .comment-form input:focus,
body.dark-mode .comment-form textarea:focus {
	border-color: var(--skyline-accent);
}

/* ============================================
   Footer Dark Mode
   ============================================ */

body.dark-mode .footer-newsletter {
	background-color: #3D2E24;
}

body.dark-mode .newsletter-inner h3 {
	color: #fff;
}

body.dark-mode .newsletter-inner p {
	color: rgba(255,255,255,0.8);
}

body.dark-mode .newsletter-form form,
body.dark-mode .newsletter-form .newsletter-signup {
	background-color: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.12);
}

body.dark-mode .newsletter-form input[type="email"] {
	background-color: transparent;
	color: #fff;
}

body.dark-mode .newsletter-form input[type="email"]::placeholder {
	color: rgba(255,255,255,0.5);
}

body.dark-mode .newsletter-form input[type="email"]:focus {
	border-color: transparent;
}

body.dark-mode .newsletter-form button {
	background-color: rgba(255,255,255,0.9);
	color: #3D2E24;
}

body.dark-mode .newsletter-form button:hover {
	background-color: #fff;
	color: #3D2E24;
}

/* Footer stays black in dark mode — no overrides needed for colors.
   Only subtle adjustments for border visibility. */
body.dark-mode .site-footer .footer-main {
	background-color: #000000;
}

body.dark-mode .footer-separator {
	background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .footer-bottom {
	border-top-color: rgba(255, 255, 255, 0.08);
}

/* Footer widgets in dark mode — keep black bg, white text */
body.dark-mode .footer-widget-col .widget {
	background: transparent;
	box-shadow: none;
	border: none;
}

body.dark-mode .footer-widget-col .widget-title {
	color: #FFFFFF;
}

body.dark-mode .footer-widget-col .widget a {
	color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .footer-widget-col .widget a:hover {
	color: #FFFFFF;
}

/* ============================================
   Search Overlay Dark Mode
   ============================================ */

body.dark-mode .search-overlay {
	background-color: var(--skyline-overlay);
}

body.dark-mode .search-overlay .search-field {
	background-color: var(--skyline-bg-card);
	border-color: var(--skyline-border);
	color: var(--skyline-text);
}

body.dark-mode .search-overlay .search-field:focus {
	border-color: var(--skyline-accent);
}

/* ============================================
   Mobile Menu Dark Mode
   ============================================ */

body.dark-mode .mobile-menu {
	background-color: var(--skyline-bg);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .mobile-menu-overlay {
	background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .mobile-menu-list > li {
	border-bottom-color: var(--skyline-border);
}

body.dark-mode .mobile-menu-list li a {
	color: var(--skyline-text);
}

body.dark-mode .mobile-menu-list li a:hover {
	color: var(--skyline-accent);
	background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .mobile-menu-list .sub-menu {
	background: rgba(0, 0, 0, 0.15);
}

/* ============================================
   Pagination Dark Mode
   ============================================ */

body.dark-mode .posts-pagination .page-numbers {
	color: var(--skyline-text-secondary);
	border-color: var(--skyline-border);
	background-color: var(--skyline-bg-card);
}

body.dark-mode .posts-pagination .page-numbers:hover {
	color: #fff;
	background-color: var(--skyline-accent);
	border-color: var(--skyline-accent);
}

body.dark-mode .posts-pagination .page-numbers.current {
	background-color: var(--skyline-accent);
	color: #fff;
	border-color: var(--skyline-accent);
}

/* ============================================
   Pagination Dark Mode
   ============================================ */

body.dark-mode .posts-pagination .page-numbers {
	background-color: var(--skyline-bg-card);
	color: var(--skyline-text);
}

body.dark-mode .posts-pagination .page-numbers:hover {
	background-color: var(--skyline-accent);
	color: #fff;
}

body.dark-mode .posts-pagination .page-numbers.current {
	background-color: var(--skyline-accent);
	color: #fff;
}

body.dark-mode .posts-pagination .page-numbers.prev,
body.dark-mode .posts-pagination .page-numbers.next {
	background-color: transparent;
	border-color: var(--skyline-border);
}

body.dark-mode .posts-pagination .page-numbers.prev:hover,
body.dark-mode .posts-pagination .page-numbers.next:hover {
	background-color: var(--skyline-accent);
	border-color: var(--skyline-accent);
	color: #fff;
}

body.dark-mode .posts-pagination .page-numbers.dots {
	background: transparent;
	color: var(--skyline-text-muted);
}

/* ============================================
   Back to Top Dark Mode
   ============================================ */

body.dark-mode .back-to-top {
	background-color: var(--skyline-bg-card);
	border-color: var(--skyline-border);
	color: var(--skyline-text);
}

body.dark-mode .back-to-top:hover {
	background-color: var(--skyline-accent);
	border-color: var(--skyline-accent);
	color: #fff;
}

/* ============================================
   Forms Dark Mode
   ============================================ */

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="tel"],
body.dark-mode textarea,
body.dark-mode select {
	background-color: var(--skyline-input-bg);
	border-color: var(--skyline-input-border);
	color: var(--skyline-text);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
	border-color: var(--skyline-accent);
}

body.dark-mode ::placeholder {
	color: var(--skyline-text-muted);
}

/* ============================================
   Skyline Categories Widget Dark Mode
   ============================================ */

body.dark-mode .widget.skyline-categories-widget {
	background-color: #3D2E24;
}

body.dark-mode .skyline-categories-widget .widget-title {
	color: rgba(255,255,255,0.85) !important;
	border-bottom-color: rgba(255,255,255,0.2);
}

body.dark-mode .skyline-cat-card {
	background-color: color-mix(in srgb, var(--cat-color) 8%, var(--skyline-bg-card));
	border-color: color-mix(in srgb, var(--cat-color) 18%, var(--skyline-border));
}

body.dark-mode .skyline-cat-card:hover {
	border-color: var(--cat-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

body.dark-mode .cat-card-icon {
	background-color: color-mix(in srgb, var(--cat-color) 15%, transparent);
}

body.dark-mode .cat-card-name {
	color: var(--skyline-heading);
}

body.dark-mode .skyline-cat-card:hover .cat-card-name {
	color: color-mix(in srgb, var(--cat-color) 60%, #fff);
}

body.dark-mode .cat-card-count {
	color: var(--skyline-text-secondary);
}

/* ============================================
   Skyline Popular Tags Widget Dark Mode
   ============================================ */

body.dark-mode .widget.skyline-popular-tags-widget {
	background-color: #3D2E24;
}

body.dark-mode .skyline-popular-tags-widget .widget-title {
	color: rgba(255,255,255,0.85) !important;
	border-bottom-color: rgba(255,255,255,0.2);
}

body.dark-mode .skyline-tag-pill {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .skyline-tag-pill:hover {
	background-color: rgba(255, 255, 255, 0.9);
	color: #3D2E24;
	border-color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .tag-pill-count {
	background-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .skyline-tag-pill:hover .tag-pill-count {
	background-color: #3D2E24;
	color: #fff;
}

/* ============================================
   Skyline Related Articles Widget Dark Mode
   ============================================ */

body.dark-mode .widget.skyline-related-articles-widget {
	background-color: #3D2E24;
}

body.dark-mode .skyline-related-articles-widget .widget-title {
	color: rgba(255,255,255,0.85) !important;
	border-bottom-color: rgba(255,255,255,0.2);
}

body.dark-mode .skyline-related-item {
	border-bottom-color: rgba(255,255,255,0.12);
}

body.dark-mode .related-item-title {
	color: #fff;
}

body.dark-mode .skyline-related-item:hover .related-item-title {
	color: rgba(255,255,255,0.8);
}

body.dark-mode .related-item-date {
	color: rgba(255,255,255,0.6);
}

body.dark-mode .related-item-sep {
	color: rgba(255,255,255,0.5);
}

body.dark-mode .related-item-cat {
	color: #fff !important;
}

/* ============================================
   Social Links Widget Dark Mode
   ============================================ */

body.dark-mode .widget.skyline-social-widget {
	background: linear-gradient(135deg, #3D2E24, #2c2018);
}

body.dark-mode .skyline-social-widget .widget-title,
body.dark-mode .skyline-social-widget h2,
body.dark-mode .skyline-social-widget h3 {
	color: rgba(255,255,255,0.85) !important;
	border-bottom-color: rgba(255,255,255,0.2);
}

body.dark-mode .skyline-social-card {
	background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .skyline-social-card:hover {
	background: rgba(255, 255, 255, 0.18) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

body.dark-mode .skyline-social-row {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .skyline-social-row:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Category Badges Dark Mode
   ============================================ */

body.dark-mode .category-badge {
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

body.dark-mode .category-badge:hover {
	background-color: var(--skyline-accent);
	color: #fff;
}

/* ============================================
   404 Page Dark Mode
   ============================================ */

body.dark-mode .error-404 .error-code {
	color: var(--skyline-border);
}

body.dark-mode .error-404 h2 {
	color: var(--skyline-heading);
}

body.dark-mode .error-404 p {
	color: var(--skyline-text-secondary);
}

/* ============================================
   Archive Header Dark Mode
   ============================================ */

body.dark-mode .archive-header {
	background-color: var(--skyline-bg-alt);
	border-bottom-color: var(--skyline-border);
}

body.dark-mode .archive-title {
	color: var(--skyline-heading);
}

body.dark-mode .archive-description {
	color: var(--skyline-text-secondary);
}

/* --- Category Archive Header Dark Mode --- */
body.dark-mode .category-archive-header {
	border-bottom-color: var(--skyline-border);
}
body.dark-mode .category-breadcrumb a {
	color: var(--skyline-text-muted);
}
body.dark-mode .category-breadcrumb a:hover {
	color: var(--skyline-accent);
}
body.dark-mode .breadcrumb-current {
	color: var(--skyline-heading);
}
body.dark-mode .category-header-image {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
body.dark-mode .category-header-icon {
	background: color-mix(in srgb, var(--cat-accent) 15%, transparent);
	border-color: color-mix(in srgb, var(--cat-accent) 25%, transparent);
}
body.dark-mode .category-archive-title {
	color: var(--skyline-heading);
}
body.dark-mode .category-archive-description,
body.dark-mode .category-archive-description p {
	color: var(--skyline-text-secondary);
}
body.dark-mode .category-post-count {
	color: var(--skyline-text-muted);
}
body.dark-mode .category-post-count strong {
	color: var(--skyline-heading);
}

/* --- Author Archive Header Dark Mode --- */
body.dark-mode .author-archive-header {
	border-bottom-color: var(--skyline-border);
}
body.dark-mode .author-archive-title {
	color: var(--skyline-heading);
}
body.dark-mode .author-archive-bio {
	color: var(--skyline-text-secondary);
}
body.dark-mode .author-social-link {
	color: var(--skyline-text-muted);
}
body.dark-mode .author-social-link:hover {
	color: var(--skyline-accent);
}
body.dark-mode .author-post-count {
	color: var(--skyline-text-muted);
}
body.dark-mode .author-post-count strong {
	color: var(--skyline-heading);
}

/* --- About Page Dark Mode --- */
body.dark-mode .about-story {
	border-color: var(--skyline-border);
}
body.dark-mode .about-story-heading {
	color: var(--skyline-heading);
}
body.dark-mode .about-story-body {
	color: var(--skyline-text-secondary);
}
body.dark-mode .about-story-btn {
	border-color: var(--skyline-heading);
	color: var(--skyline-heading);
}
body.dark-mode .about-story-btn:hover {
	background: var(--skyline-heading);
	color: var(--skyline-bg);
}
body.dark-mode .bento-stat-1 {
	background-color: var(--skyline-bg-card);
}
body.dark-mode .bento-stat-number {
	color: var(--skyline-heading);
}
body.dark-mode .bento-stat-label {
	color: var(--skyline-text-secondary);
}
body.dark-mode .svc-card-light {
	background: var(--skyline-bg-card);
}
body.dark-mode .svc-card-light .svc-title {
	color: var(--skyline-heading);
}
body.dark-mode .svc-card-light .svc-list li {
	color: var(--skyline-text-secondary);
}
body.dark-mode .about-team {
	border-color: var(--skyline-border);
}
body.dark-mode .about-section-title {
	color: var(--skyline-heading);
}
body.dark-mode .about-section-desc {
	color: var(--skyline-text-secondary);
}
body.dark-mode .team-member-name {
	color: var(--skyline-heading);
}
body.dark-mode .team-member-role {
	color: var(--skyline-text-muted);
}
body.dark-mode .about-cta {
	background-color: var(--skyline-bg-card);
}

/* ============================================
   Related Posts Dark Mode
   ============================================ */

body.dark-mode .related-posts {
	background-color: var(--skyline-bg-alt);
	border-top-color: var(--skyline-border);
}

body.dark-mode .related-posts .section-title {
	color: var(--skyline-heading);
}

/* ============================================
   Breadcrumbs Dark Mode
   ============================================ */

body.dark-mode .breadcrumbs {
	color: var(--skyline-text-muted);
}

body.dark-mode .breadcrumbs a {
	color: var(--skyline-text-secondary);
}

body.dark-mode .breadcrumbs a:hover {
	color: var(--skyline-accent);
}

/* ============================================
   Single Post Layout Variants Dark Mode
   ============================================ */

/* Light modifiers — already white text, just ensure consistency */
body.dark-mode .breadcrumb--light a,
body.dark-mode .breadcrumb--light .breadcrumb-current { color: rgba(255, 255, 255, 0.75); }
body.dark-mode .breadcrumb--light a:hover { color: #fff; }

/* Layout 3: Overlay — gradient needs no change, image handles it */
/* Overlay content already uses white text via --light classes */

/* Layout 5: Image first content area */
body.dark-mode .single-imgfirst-content .single-title {
	color: var(--skyline-heading);
}

/* Category badges in dark mode (non-overlay) */
body.dark-mode .single-categories .category-badge {
	background-color: transparent;
	color: var(--skyline-text-secondary);
	border-color: var(--skyline-border);
}
body.dark-mode .single-categories .category-badge:hover {
	border-color: var(--skyline-accent);
	color: var(--skyline-accent);
}

/* Overlay category badges stay light in dark mode */
body.dark-mode .single-categories--light .category-badge {
	background-color: rgba(255, 255, 255, 0.15);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
}
body.dark-mode .single-categories--light .category-badge:hover {
	background-color: var(--skyline-accent);
	border-color: var(--skyline-accent);
}

/* Layout 4: Boxed Overlap card in dark mode */
body.dark-mode .single-boxed-card {
	background: var(--skyline-bg-card, #1E1E2E);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
body.dark-mode .single-boxed-card .single-title {
	color: var(--skyline-heading);
}
body.dark-mode .single-boxed-card .single-post-meta,
body.dark-mode .single-boxed-card .single-post-meta span,
body.dark-mode .single-boxed-card .single-post-meta a,
body.dark-mode .single-boxed-card .single-post-meta time {
	color: var(--skyline-text-secondary);
}
body.dark-mode .single-boxed-card .breadcrumb a,
body.dark-mode .single-boxed-card .breadcrumb span {
	color: var(--skyline-text-muted);
}
body.dark-mode .single-boxed-card .breadcrumb a:hover {
	color: var(--skyline-accent);
}

/* Share bar border on mobile in dark mode */
body.dark-mode .single-share {
	border-bottom-color: var(--skyline-border);
}

/* ============================================
   Smooth Transition for Mode Switch
   ============================================ */

body.dark-mode-transition,
body.dark-mode-transition *,
body.dark-mode-transition *:before,
body.dark-mode-transition *:after {
	transition: background-color 0.3s ease,
	            color 0.3s ease,
	            border-color 0.3s ease,
	            box-shadow 0.3s ease !important;
}

/* ============================================
   Selection Color Dark Mode
   ============================================ */

body.dark-mode ::selection {
	background-color: rgba(232, 93, 58, 0.3);
	color: var(--skyline-text);
}

body.dark-mode ::-moz-selection {
	background-color: rgba(232, 93, 58, 0.3);
	color: var(--skyline-text);
}

/* ============================================
   Scrollbar Dark Mode
   ============================================ */

body.dark-mode::-webkit-scrollbar {
	width: 8px;
}

body.dark-mode::-webkit-scrollbar-track {
	background: var(--skyline-bg);
}

body.dark-mode::-webkit-scrollbar-thumb {
	background: var(--skyline-border);
	border-radius: 4px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
	background: var(--skyline-text-muted);
}

/* ============================================
   READ NEXT - Dark Mode
   ============================================ */

body.dark-mode .read-next-header::before,
body.dark-mode .read-next-header::after {
	background-color: var(--skyline-border);
}

/* ============================================
   FEATURED LAYOUT - Dark Mode
   ============================================ */

body.dark-mode .featured-main-content .post-title a {
	color: var(--skyline-heading);
}

body.dark-mode .featured-main-content .post-title a:hover {
	color: var(--skyline-accent, #D4A574);
}

body.dark-mode .featured-main-content .post-excerpt {
	color: var(--skyline-text-secondary);
}

body.dark-mode .featured-main-image {
	background-color: var(--skyline-bg-alt);
}

body.dark-mode .featured-side-content .post-title a {
	color: var(--skyline-heading);
}

body.dark-mode .featured-side-content .post-title a:hover {
	color: var(--skyline-accent, #D4A574);
}

body.dark-mode .featured-side-content .post-excerpt {
	color: var(--skyline-text-secondary);
}

body.dark-mode .featured-side-post {
	border-color: var(--skyline-border);
}

body.dark-mode .featured-side-categories .category-badge {
	background: var(--skyline-bg-alt);
	color: var(--skyline-text-secondary);
}

body.dark-mode .featured-side-image {
	background-color: var(--skyline-bg-alt);
}

/* ============================================
   LIST CARD - Dark Mode
   ============================================ */

body.dark-mode .post-list-content .post-title a {
	color: var(--skyline-heading);
}

body.dark-mode .post-list-content .post-title a:hover {
	color: var(--skyline-accent, #D4A574);
}

body.dark-mode .post-list-content .post-excerpt {
	color: var(--skyline-text-secondary);
}

body.dark-mode .post-list-content .post-meta {
	color: var(--skyline-text-muted);
}

body.dark-mode .post-list-thumbnail {
	background-color: var(--skyline-bg-alt);
}

/* Contact Page */
body.dark-mode .contact-form-wrapper {
	background: var(--skyline-bg-alt);
}
body.dark-mode .skyline-contact-form input,
body.dark-mode .skyline-contact-form textarea {
	background: var(--skyline-bg);
	border-color: var(--skyline-border);
	color: var(--skyline-text);
}
body.dark-mode .feedback-success {
	background: rgba(16, 185, 129, 0.15);
	color: #6ee7b7;
	border-color: rgba(16, 185, 129, 0.3);
}
body.dark-mode .feedback-error {
	background: rgba(239, 68, 68, 0.15);
	color: #fca5a5;
	border-color: rgba(239, 68, 68, 0.3);
}