/* ==========================================================================
   HAMCO Sports News - Dark Mode
   Overrides via html.dark-mode selector, smooth transitions
   ========================================================================== */

/* ---- Smooth Transition on Toggle ---- */
html.dark-mode-transition,
html.dark-mode-transition *,
html.dark-mode-transition *::before,
html.dark-mode-transition *::after {
  transition: background-color 400ms ease,
              color 400ms ease,
              border-color 400ms ease,
              box-shadow 400ms ease !important;
}

/* ---- Dark Mode Custom Properties ---- */
html.dark-mode {
  --hn-bg: #1A1A1A;
  --hn-card-bg: #2A2A2A;
  --hn-text: #E5E5E5;
  --hn-text-muted: #999;
  --hn-text-light: #777;
  --hn-border: #3A3A3A;
  --hn-link: #FE0000;
  --hn-link-hover: #FF3333;
  --hn-overlay: rgba(0, 0, 0, 0.75);

  /* Neutral overrides */
  --hn-gray-100: #2A2A2A;
  --hn-gray-200: #333;
  --hn-gray-300: #444;
  --hn-gray-400: #666;
  --hn-gray-500: #888;
  --hn-gray-600: #AAA;
  --hn-gray-700: #CCC;
  --hn-gray-800: #DDD;
  --hn-gray-900: #EEE;

  /* Shadows */
  --hn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --hn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --hn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --hn-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4);
  --hn-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --hn-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ---- Body ---- */
html.dark-mode body {
  background-color: var(--hn-bg);
  color: var(--hn-text);
}

/* ---- Selection ---- */
html.dark-mode ::selection {
  background-color: var(--hn-red);
  color: var(--hn-white);
}

/* ---- Header Adjustments ---- */
html.dark-mode .hn-header__brand {
  background-color: #1A1A1A;
  border-bottom-color: var(--hn-red);
}

html.dark-mode .hn-header__logo-text {
  color: var(--hn-white);
}

html.dark-mode .hn-header__utility {
  background-color: #0D0D0D;
}

/* ---- Cards ---- */
html.dark-mode .hn-card,
html.dark-mode [class*="__card"] {
  background-color: var(--hn-card-bg);
  border-color: var(--hn-border);
}

/* ---- Content ---- */
html.dark-mode .hn-content a {
  color: var(--hn-red);
  text-decoration-color: rgba(254, 0, 0, 0.4);
}

html.dark-mode blockquote,
html.dark-mode .hn-blockquote {
  background-color: #2A2A2A;
  border-left-color: var(--hn-red);
  color: #CCC;
}

/* ---- Badges ---- */
html.dark-mode .hn-badge--outline {
  border-color: var(--hn-border);
  color: var(--hn-text-muted);
}

html.dark-mode .hn-badge--category {
  background-color: var(--hn-red);
  color: var(--hn-white);
}

/* ---- Form Elements ---- */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: #2A2A2A;
  border-color: var(--hn-border);
  color: var(--hn-text);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #666;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  border-color: var(--hn-red);
}

/* ---- Buttons ---- */
html.dark-mode .hn-btn--outline {
  border-color: var(--hn-border);
  color: var(--hn-text);
}

html.dark-mode .hn-btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--hn-gray-400);
}

html.dark-mode .hn-btn--ghost {
  color: var(--hn-text-muted);
}

html.dark-mode .hn-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--hn-text);
}

/* ---- Mobile Menu & Bookmarks Panel ---- */
html.dark-mode .hn-mobile-menu {
  background-color: #1a1a1a;
  color: var(--hn-text);
}

html.dark-mode .hn-mobile-menu__header {
  border-bottom-color: var(--hn-border);
}

html.dark-mode .hn-bookmarks-panel {
  background-color: #1a1a1a;
  color: var(--hn-text);
}

html.dark-mode .hn-bookmarks-panel__header {
  border-bottom-color: var(--hn-border);
}

/* ---- Footer Adjustments ---- */
html.dark-mode .hn-footer {
  background-color: #0D0D0D;
}

html.dark-mode .hn-footer__grid {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-mode .hn-footer__newsletter-input {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Score Ticker Adjustments ---- */
html.dark-mode .hn-ticker {
  background-color: #0D0D0D;
}

/* ---- Sidebar ---- */
html.dark-mode .hn-sidebar-widget {
  background-color: var(--hn-card-bg);
  border-color: var(--hn-border);
}

/* ---- Tables ---- */
html.dark-mode table th {
  background-color: #2A2A2A;
  color: var(--hn-text);
}

html.dark-mode table td {
  border-color: var(--hn-border);
}

html.dark-mode table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

html.dark-mode table tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* ---- Horizontal Rule ---- */
html.dark-mode hr {
  border-top-color: var(--hn-border);
}

/* ---- Search Overlay ---- */
html.dark-mode .hn-search-overlay {
  background-color: #0D0D0D;
}

html.dark-mode .hn-search-overlay__input {
  background-color: #2A2A2A;
  color: var(--hn-text);
}

/* ---- Skeleton Loading ---- */
html.dark-mode .hn-skeleton {
  background-color: #2A2A2A;
}

html.dark-mode .hn-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
}

/* ---- Images / Media ---- */
html.dark-mode img {
  opacity: 0.92;
}

html.dark-mode img:hover {
  opacity: 1;
}

/* ---- Scrollbar ---- */
html.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: #1A1A1A;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: #3A3A3A;
  border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4A4A4A;
}

/* ---- Dark Mode Toggle Button ---- */
.hn-dark-toggle {
  position: relative;
  width: 20px;
  height: 20px;
}

.hn-dark-toggle__icon--sun,
.hn-dark-toggle__icon--moon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--hn-transition-base), transform var(--hn-transition-base);
}

.hn-dark-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg);
}

.hn-dark-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-90deg);
}

html.dark-mode .hn-dark-toggle__icon--sun {
  opacity: 0;
  transform: rotate(90deg);
}

html.dark-mode .hn-dark-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg);
}