/* Base Dark Mode */
body.dark-mode,
.ui-page.dark-mode {
  background-color: #121212 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.dark-mode .jqm-demos.ui-page.ui-page-theme-a.ui-page-header-fixed.ui-page-footer-fixed.ui-page-active {
  background-color: #121212 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}


/* Content areas */
.dark-mode .ui-content {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Headers & footers */
.dark-mode .ui-header,
.dark-mode .ui-footer{
  background-color: #444444 !important;
  border-color: #333 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}


.dark-mode .menu-footer {
  background-color: #121212 !important;
  border-color: #333 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Buttons */
.dark-mode .ui-btn {
  background-color: #333 !important;
  color: #fff !important;
  border-color: #555 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.dark-mode .ui-btn:active {
  background-color: #444 !important;
}

/* Form elements */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #444 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Listviews */
.dark-mode .ui-listview li {
  background-color: #1f1f1f !important;
  border-color: #333 !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Remove shadows from all generic elements just in case */
.dark-mode * {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Headings (all levels) */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}


/* Make all links white in dark mode */
.dark-mode a,
.dark-mode a:visited,
.dark-mode .ui-link,
.dark-mode .ui-link:visited {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Optional: hover and active states */
.dark-mode a:hover,
.dark-mode a:focus,
.dark-mode .ui-link:hover,
.dark-mode .ui-link:focus {
  color: #cccccc !important;
  text-decoration: underline !important;
}

.dark-mode a:active,
.dark-mode .ui-link:active {
  color: #dddddd !important;
}

/* Dark mode list dividers */
.dark-mode .ui-li-divider,
.dark-mode li[data-role="list-divider"] {
  background-color: #2c2c2c !important;
  color: #ffffff !important;
  border-color: #3a3a3a !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.dark-mode .ui-icon-bars:after {
  filter: invert(1) brightness(1.5);
}


.dark-mode .ui-icon-bars:after {
  background-color: transparent !important;
  background-image: none !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='11' width='24' height='2'/%3E%3Crect y='18' width='24' height='2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='11' width='24' height='2'/%3E%3Crect y='18' width='24' height='2'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: #fff !important;
}
.dark-mode #a-sidebar.ui-btn {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
}
/* Dark mode for sidebar panels */
.dark-mode .ui-panel {
  background-color: #1b1b1b !important;
  color: #ffffff !important;
  border-color: #333 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Panel headings (if you have them) */
.dark-mode .ui-panel h1,
.dark-mode .ui-panel h2,
.dark-mode .ui-panel h3 {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Panel listviews or menus */
.dark-mode .ui-panel .ui-listview li {
  background-color: #1f1f1f !important;
  border-color: #2a2a2a !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Divider inside panel */
.dark-mode .ui-panel .ui-li-divider {
  background-color: #2c2c2c !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
  text-shadow: none !important;
}

/* Panel links and icons */
.dark-mode .ui-panel a,
.dark-mode .ui-panel a.ui-btn,
.dark-mode .ui-panel .ui-link {
  color: #ffffff !important;
  background-color: transparent !important;
  border: none !important;
  text-shadow: none !important;
}

.dark-mode .ui-panel a:hover {
  background-color: #2c2c2c !important;
}

/* Remove the default overlay shadow behind panel */
.dark-mode .ui-panel-display-overlay {
  box-shadow: none !important;
}

/* Make sure overlay background stays dark */
.dark-mode .ui-panel-dismiss {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.dark-mode .menu-footer {
  background-color: #1a1a1a !important;
  border-top: 1px solid #333 !important;
  padding: 15px !important;
  text-align: center;
}

.dark-mode .menu-footer p {
  margin: 6px 0 !important;
  background-color: #2a2a2a !important;
}

.dark-mode .menu-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.dark-mode .menu-footer a:hover {
  color: #cccccc !important;
  text-decoration: underline !important;
}


.dark-mode .footer-contact{
  color: #ffffff !important;
}

/* Make the menu button visible in dark mode */
.dark-mode #headmenu.ui-btn {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
  box-shadow: none !important;
}

/* Turn icon white (works for most jQuery Mobile themes) */
.dark-mode .ui-icon-bullets:after {
  filter: invert(1) brightness(1.5);
}

/* Ensure any text or icon tint stays light */
.dark-mode #headmenu.ui-btn .ui-icon,
.dark-mode #headmenu.ui-btn:after {
  background-color: #fff !important;
  border-color: transparent !important;
  text-shadow: none !important;
}


/* Container */
.dark-mode .pollybox {
  background-color: #1f1f1f !important;
  border: 1px solid #333 !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Text inside */
.dark-mode .pollybox div {
  color: #000 !important;
  margin-bottom: 8px !important;
  font-weight: 500;
}

/* Audio player background (HTML5 controls) */
.dark-mode .pollybox audio {
  background-color: #2a2a2a !important;
  border-radius: 6px !important;
  width: 100%;
  filter: invert(1) hue-rotate(180deg); /* makes built-in controls light */
}

/* Optional: hover effect for consistency */
.dark-mode .pollybox:hover {
  background-color: #2a2a2a !important;
}
/* Dark mode styling for the Menu button */
.dark-mode #a-sidebar.ui-btn {
  background-color: #3a3a3a !important;
  border-color: #555 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Make the hamburger icon white */
.dark-mode .ui-icon-bars:after {
  filter: invert(1) brightness(1.5);
  opacity: 1 !important;
}

/* Optional: hover feedback */
.dark-mode #a-sidebar.ui-btn:hover {
  background-color: #4a4a4a !important;
}
/* Arrow / submenu buttons */
.dark-mode .arrow_menu {
  background-color: #2b2b2b !important;   /* darker gray for dark mode */
  border-left: 1px solid #444 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Hover or focus highlight */
.dark-mode .arrow_menu:hover,
.dark-mode .arrow_menu:focus {
  background-color: #3a3a3a !important;
}

/* Active / expanded submenu arrow */
.dark-mode .arrow_menu.active {
  background-color: #444 !important;       /* brighter when open */
  color: #ffffff !important;
}

/* Caret icon tint */
.dark-mode .ui-icon-carat-d:after,
.dark-mode .ui-icon-carat-u:after {
  filter: invert(1) brightness(1.4);
}

/* Submenu background and links */
.dark-mode .submenu {
  background-color: #1d1d1d !important;
  border-left: 1px solid #333 !important;
}

.dark-mode .submenu .jqm-list li a {
  color: #ffffff !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

.dark-mode .submenu .jqm-list li a:hover {
  background-color: #2a2a2a !important;
}
/* Search input wrapper */
.dark-mode .ui-input-search {
  background-color: #2a2a2a !important;
  border: 1px solid #444 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #ffffff !important;
}

/* Actual text input */
.dark-mode .ui-input-search input[type="search"],
.dark-mode input.flex-item-input {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: none !important;
}

/* Placeholder text */
.dark-mode .ui-input-search input::placeholder {
  color: #bbbbbb !important;
  opacity: 1;
}

/* Clear (X) button inside search box */
.dark-mode .ui-input-clear:after {
  filter: invert(1) brightness(1.5);
  opacity: 0.9;
}

/* On focus (light highlight ring) */
.dark-mode .ui-input-search input:focus {
  outline: 1px solid #666 !important;
  background-color: #333 !important;
}

/* Hide inset shadow glow from older themes */
.dark-mode .ui-shadow-inset {
  box-shadow: none !important;
}
/* Live Now banner wrapper */
.dark-mode .live-wrap {
  background: linear-gradient(to right, #7a0000, #8b0000 50%, #a51c2f) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  margin: 8px 0 !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Live Now title */
.dark-mode .live-title {
  color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Live button links */
.dark-mode .live-btn {
  background: #2b2b2b !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Hover/active state */
.dark-mode .live-btn:hover {
  background: #3a3a3a !important;
  color: #ff5e5e !important; /* subtle red accent on hover */
}

.dark-mode .live-btn:active {
  background: #333 !important;
  transform: translateY(1px);
}

/* Live dot indicator */
.dark-mode .live-btn .dot {
  background: #ff4d4d !important; /* brighter red dot for contrast */
}

/* Container around entire section if needed */
.dark-mode .live-list {
  background: transparent !important;
}


.dark-mode .mobile-weather-details {
  color: #ffffff !important;
}

.dark-mode .weather-alert-signup,
.dark-mode .mobile-forecast-row,
.dark-mode .mobile-dropdown{
  background: transparent !important;
}

.dark-mode .weather-alert-signup .highlight {
  color: red !important;
}

.dark-mode .daily-forecast-low {
  color: #ADD8E6 !important;
}

.dark-mode .article_caption {
  color: #ffffff !important;
}

.dark-mode .comments_post_date {
  color: #ffffff !important;
}