/*====== DARK MODE ======
  Active when <html data-theme="dark">. The theme is chosen in layouts/front.blade.php
  (saved in localStorage, falls back to the visitor's OS preference).
*/

/*------ toggle button (menu bar, next to search) ------*/
.attr-nav ul li { display: inline-block; vertical-align: middle; }
.attr-nav ul li.theme-toggle a { cursor: pointer; padding-right: 12px; }
.attr-nav ul li.theme-toggle .fa-sun-o { display: none; }
html[data-theme="dark"] .attr-nav ul li.theme-toggle .fa-sun-o { display: inline-block; }
html[data-theme="dark"] .attr-nav ul li.theme-toggle .fa-moon-o { display: none; }

html[data-theme="dark"] {
  --dm-bg: #121212;
  --dm-surface: #1c1c1e;
  --dm-surface-2: #26262a;
  --dm-text: #e6e6e6;
  --dm-muted: #a9a9a9;
  --dm-border: #34343a;
  color-scheme: dark;
}

/*------ base ------*/
html[data-theme="dark"] body {
  background: var(--dm-bg);
  color: var(--dm-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: inherit;
}
html[data-theme="dark"] a { color: var(--dm-text); }
html[data-theme="dark"] hr { border-color: var(--dm-border); }

/*------ surfaces that are white / light grey in style.css ------*/
html[data-theme="dark"] .logo-area,
html[data-theme="dark"] .marquee,
html[data-theme="dark"] .marquee-breaking,
html[data-theme="dark"] .lead-news-second,
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .least-news-ul,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .international-lead,
html[data-theme="dark"] .international-news-ul li a,
html[data-theme="dark"] .life-style-single-text,
html[data-theme="dark"] .bottom-bar,
html[data-theme="dark"] .writter-ul .feature-news-single,
html[data-theme="dark"] .lead-national-main-text,
html[data-theme="dark"] .single-block,
html[data-theme="dark"] .division-style,
html[data-theme="dark"] .writter-ul-single-white,
html[data-theme="dark"] .details-page-breadcrumb,
html[data-theme="dark"] .details-content,
html[data-theme="dark"] .btn-more-details,
html[data-theme="dark"] .facebook-comment-box,
html[data-theme="dark"] .details-news-single-text,
html[data-theme="dark"] .category-content-lead-right,
html[data-theme="dark"] .category-content-single,
html[data-theme="dark"] .category-page-tab .nav-link.active,
html[data-theme="dark"] .video-gallery-category,
html[data-theme="dark"] .details-photo-gallery,
html[data-theme="dark"] .photo-gallery-more-news,
html[data-theme="dark"] .district-wrapper,
html[data-theme="dark"] .district-ul,
html[data-theme="dark"] .district-ul li a,
html[data-theme="dark"] .details-more-news-single-text,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item {
  background: var(--dm-surface) !important;
  color: var(--dm-text);
  border-color: var(--dm-border);
}

html[data-theme="dark"] .header-top-area,
html[data-theme="dark"] .feature-news-single,
html[data-theme="dark"] .writter-ul-single,
html[data-theme="dark"] .videos-text,
html[data-theme="dark"] .allnews-title-2 a,
html[data-theme="dark"] .photo-gallery-ul li a,
html[data-theme="dark"] .image-caption,
html[data-theme="dark"] .pagination-list {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text);
}

html[data-theme="dark"] .btn-date-picker::before,
html[data-theme="dark"] .all-news-btn:before,
html[data-theme="dark"] .all-news-btn-2:before {
  background: var(--dm-surface);
}

/*------ text that is black in style.css ------*/
html[data-theme="dark"] .current-date li,
html[data-theme="dark"] .current-date li i,
html[data-theme="dark"] .current-date,
html[data-theme="dark"] .other-link li a,
html[data-theme="dark"] .marquee li a,
html[data-theme="dark"] .marquee-breaking li a,
html[data-theme="dark"] .lead-news-second-heading h3,
html[data-theme="dark"] .least-news-ul .least-news-right h3,
html[data-theme="dark"] .feature-news-right h3,
html[data-theme="dark"] .feature-news-single:hover .feature-news-right h3,
html[data-theme="dark"] .international-lead-heading p,
html[data-theme="dark"] .international-lead-detail p,
html[data-theme="dark"] .life-style-single-text h2,
html[data-theme="dark"] .title-bg a,
html[data-theme="dark"] .single-videos a,
html[data-theme="dark"] .lead-national-main-text h2,
html[data-theme="dark"] .writter-ul-right h3,
html[data-theme="dark"] .details-page-breadcrumb .active,
html[data-theme="dark"] .details-page-breadcrumb .active a,
html[data-theme="dark"] .details-content,
html[data-theme="dark"] .details-content p,
html[data-theme="dark"] .btn-more-details,
html[data-theme="dark"] .details-news-single-text h3,
html[data-theme="dark"] .category-content-lead-right h1,
html[data-theme="dark"] .category-content-lead-right p,
html[data-theme="dark"] .category-content-single-right h2,
html[data-theme="dark"] .allnews-title-2 a,
html[data-theme="dark"] .video-heading h2,
html[data-theme="dark"] .photo-gallery-ul-right h2,
html[data-theme="dark"] .details-photo-gallery-heading h1,
html[data-theme="dark"] #lightgallery li p,
html[data-theme="dark"] .gallery-more-news-heading h3,
html[data-theme="dark"] .district-ul li a,
html[data-theme="dark"] .tag-ul li,
html[data-theme="dark"] .details-more-news-single-text h3,
html[data-theme="dark"] .pagination-list li a,
html[data-theme="dark"] .pagination-list li span {
  color: var(--dm-text) !important;
}

/* hover colours that turn text black */
html[data-theme="dark"] .special-event-heading a:hover,
html[data-theme="dark"] .feature-news-lead a:hover,
html[data-theme="dark"] .international-lead a:hover,
html[data-theme="dark"] .international-news-ul li a:hover,
html[data-theme="dark"] .details-news-single a:hover,
html[data-theme="dark"] .photo-gallery-heading a:hover,
html[data-theme="dark"] .attr-nav ul li a:hover {
  color: #fff !important;
}

/*------ menu dropdowns (styled inline in partial/front/header) ------*/
html[data-theme="dark"] .navbar-nav .dropdown-menu,
html[data-theme="dark"] .dropdown-item {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .navbar-nav .dropdown-menu .dropdown-item {
  color: var(--dm-text) !important;
  border-bottom-color: var(--dm-border);
}
html[data-theme="dark"] .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: var(--dm-surface-2) !important;
}

/*------ forms ------*/
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--dm-surface-2);
  color: var(--dm-text);
  border-color: var(--dm-border);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--dm-muted); }

/*------ tables & borders ------*/
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .vot-body {
  color: var(--dm-text);
  border-color: var(--dm-border) !important;
}

/*------ calendar widget ------*/
html[data-theme="dark"] .pignose-calender {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html[data-theme="dark"] .pignose-calender .pignose-calender-unit a,
html[data-theme="dark"] .pignose-calender .pignose-calender-week,
html[data-theme="dark"] .pignose-calender .pignose-calender-header .pignose-calender-week.pignose-calender-week-sun,
html[data-theme="dark"] .pignose-calender .pignose-calender-header .pignose-calender-week.pignose-calender-week-sat,
html[data-theme="dark"] .pignose-calender .pignose-calender-body .pignose-calender-row .pignose-calender-unit.pignose-calender-unit-sat a,
html[data-theme="dark"] .pignose-calender .pignose-calender-body .pignose-calender-row .pignose-calender-unit.pignose-calender-unit-sun a {
  color: var(--dm-text) !important;
}

/* soften pictures slightly so they don't glare on a dark page */
html[data-theme="dark"] img { filter: brightness(.92); }
html[data-theme="dark"] .main-logo img { filter: none; }