/* =================================================================
   GDfm Design Tokens v2
   Shared color system for all greenday.fm plugins.
   Light mode = default. Dark mode = html[data-theme="dark"].
   ================================================================= */

:root {
  /* ---- Surfaces ---- */
  --gd-bg:              #fff;
  --gd-bg-alt:          #fafaf6;
  --gd-surface:         #fff;
  --gd-surface-raised:  #f5f5f5;
  --gd-sidebar:         #f8f8f6;

  /* ---- Text scale ---- */
  --gd-text-heading:    #111;
  --gd-text:            #222;
  --gd-text-body:       #333;
  --gd-text-secondary:  #555;
  --gd-text-muted:      #888;
  --gd-text-faint:      #999;

  /* ---- Borders ---- */
  --gd-border:          #eee;
  --gd-border-strong:   #ccc;

  /* Ink channel for rgba() borders/tints on surfaces.
     Usage: rgba(var(--gd-ink), .1)  */
  --gd-ink:             0,0,0;

  /* ---- Accent ---- */
  --gd-accent:          #e8534a;
  --gd-accent-hover:    #c73e36;
  --gd-accent-news:     #F72906;

  /* ---- Links ---- */
  --gd-link:            #0383D9;

  /* ---- Stats ---- */
  --gd-positive:        #1a7f37;
  --gd-negative:        #cf222e;

  /* ---- Tinted backgrounds ---- */
  --gd-tint-red:        #fcebeb;
  --gd-tint-amber:      #faeeda;
  --gd-tint-green:      #f1f8e9;
  --gd-tint-blue:       #f0f7ff;

  /* ---- Fixed (same in both themes) ---- */
  --gd-dark-surface:    #1a1a2e;
}


/* ─── Dark mode ──────────────────────────────────────────────── */

html[data-theme="dark"] {
  /* ---- Surfaces ----
     Layered with subtle elevation. The cool blue-black base gives
     the intentional feel from the reference palette. Sidebar sits
     between bg and surface so widgets pop against it. */
  --gd-bg:              #0d1117;
  --gd-bg-alt:          #0f1419;
  --gd-surface:         #161b22;
  --gd-surface-raised:  #1c2129;
  --gd-sidebar:         #0f1419;

  /* ---- Text scale ---- */
  --gd-text-heading:    #e6edf3;
  --gd-text:            #c9d1d9;
  --gd-text-body:       #b1bac4;
  --gd-text-secondary:  #8b949e;
  --gd-text-muted:      #6e7681;
  --gd-text-faint:      #484f58;

  /* ---- Borders ---- */
  --gd-border:          #30363d !important;
  --gd-border-strong:   #484f58 !important;

  --gd-ink:             240,246,252;

  /* ---- Accent (lifted for contrast on dark bg) ---- */
  --gd-accent:          #ef6b63;
  --gd-accent-hover:    #e8534a;
  --gd-accent-news:     #ff4433;

  /* ---- Links ---- */
  --gd-link:            #58a6ff;

  /* ---- Stats ---- */
  --gd-positive:        #3ecf8e;
  --gd-negative:        #f47067;

  /* ---- Tinted backgrounds ---- */
  --gd-tint-red:        rgba(244,112,103,0.12);
  --gd-tint-amber:      rgba(239,159,39,0.12);
  --gd-tint-green:      rgba(62,207,142,0.12);
  --gd-tint-blue:       rgba(88,166,255,0.12);
}


/* ─── Astra theme overrides ──────────────────────────────────
   Astra generates dynamic CSS via PHP with compound selectors.
   !important is scoped to [data-theme="dark"] only.

   NOTE: Header/nav/mobile-menu are NOT overridden here.
   The greenday.fm nav bar is already dark by design.
   ──────────────────────────────────────────────────────────── */

/* Page-level background - nuclear option: everything gets dark */
html[data-theme="dark"] body,
html[data-theme="dark"] .ast-plain-container,
html[data-theme="dark"] .ast-separate-container,
html[data-theme="dark"] .ast-page-builder-template,
html[data-theme="dark"] .ast-box-layout.ast-plain-container .site-content,
html[data-theme="dark"] .ast-padded-layout.ast-plain-container .site-content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .site-content > .ast-container {
  background-color: var(--gd-bg) !important;
  color: var(--gd-text);
}

/* Boxed / separate-container content areas */
html[data-theme="dark"] .ast-separate-container .ast-article-single:not(.ast-related-post),
html[data-theme="dark"] .ast-separate-container .ast-article-post,
html[data-theme="dark"] .ast-separate-container .ast-article-single,
html[data-theme="dark"] .ast-separate-container .comments-area .comment-respond,
html[data-theme="dark"] .ast-separate-container .comments-area .ast-comment-list li,
html[data-theme="dark"] .ast-separate-container .ast-woocommerce-container,
html[data-theme="dark"] .ast-separate-container .error-404,
html[data-theme="dark"] .ast-separate-container .no-results,
html[data-theme="dark"] .ast-separate-container .related-posts-title-wrapper,
html[data-theme="dark"] .ast-separate-container .comments-count-wrapper {
  background-color: var(--gd-surface) !important;
  color: var(--gd-text);
}

html[data-theme="dark"] .single.ast-separate-container .ast-author-meta {
  background-color: var(--gd-surface) !important;
}

/* Primary content column + article-level catch-all */
html[data-theme="dark"] #primary,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .ast-separate-container #primary,
html[data-theme="dark"] .ast-separate-container .site-main,
html[data-theme="dark"] .ast-separate-container .site-main > article,
html[data-theme="dark"] .ast-separate-container .site-main > .page,
html[data-theme="dark"] .ast-separate-container .site-main > .ast-article-single,
html[data-theme="dark"] .ast-separate-container .entry-content,
html[data-theme="dark"] .ast-plain-container #primary,
html[data-theme="dark"] .ast-plain-container .site-main,
html[data-theme="dark"] .ast-page-builder-template #primary,
html[data-theme="dark"] .ast-page-builder-template .site-main,
html[data-theme="dark"] .ast-row,
html[data-theme="dark"] .site-content .ast-container,
html[data-theme="dark"] article.ast-article-single,
html[data-theme="dark"] article.type-page,
html[data-theme="dark"] .content-area {
  background-color: var(--gd-bg) !important;
  color: var(--gd-text);
}

/* Content area text */
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .site-content .ast-container,
html[data-theme="dark"] .entry-content {
  color: var(--gd-text);
}

/* Horizontal rules and block separators */
html[data-theme="dark"] hr,
html[data-theme="dark"] .wp-block-separator {
  background: var(--gd-border) !important;
  border-color: var(--gd-border) !important;
  opacity: 1;
}

/* Sidebar - darker than widgets so cards pop.
   Target the entire container chain to kill white gaps. */
html[data-theme="dark"] #secondary,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .sidebar-main,
html[data-theme="dark"] .ast-aside-inner,
html[data-theme="dark"] #secondary .widget-area,
html[data-theme="dark"] .ast-separate-container #secondary,
html[data-theme="dark"] .ast-separate-container.ast-two-container #secondary,
html[data-theme="dark"] .ast-separate-container.ast-two-container #secondary .widget-area,
html[data-theme="dark"] .ast-separate-container #secondary .ast-aside-inner {
  background: var(--gd-sidebar) !important;
  color: var(--gd-text);
  border: none !important;
  box-shadow: none !important;
}

/* Strip Astra's native widget chrome, then apply clean cards */
html[data-theme="dark"] #secondary .widget,
html[data-theme="dark"] .ast-separate-container.ast-two-container #secondary .widget {
  background-color: var(--gd-surface) !important;
  border: 1px solid var(--gd-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  color: var(--gd-text);
  box-shadow: none !important;
}

/* Widget titles */
html[data-theme="dark"] #secondary .widget-title,
html[data-theme="dark"] #secondary .wp-block-heading,
html[data-theme="dark"] #secondary h2,
html[data-theme="dark"] #secondary h3 {
  color: var(--gd-text-heading) !important;
}

/* Widget links */
html[data-theme="dark"] #secondary a {
  color: var(--gd-link);
}

/* Widget list item borders (Astra default menus, etc) */
html[data-theme="dark"] #secondary .widget li,
html[data-theme="dark"] #secondary .widget_nav_menu li,
html[data-theme="dark"] .sidebar-main .widget li,
html[data-theme="dark"] .sidebar-main .widget_nav_menu li {
  border-color: var(--gd-border) !important;
}
html[data-theme="dark"] #secondary .widget li a,
html[data-theme="dark"] .sidebar-main .widget li a {
  color: var(--gd-text-secondary) !important;
}
html[data-theme="dark"] #secondary .widget li a:hover,
html[data-theme="dark"] .sidebar-main .widget li a:hover {
  color: var(--gd-link) !important;
}

/* Sidebar dividers, hrs, and widget title underlines */
html[data-theme="dark"] #secondary hr,
html[data-theme="dark"] .sidebar-main hr {
  background: var(--gd-border) !important;
  border-color: var(--gd-border) !important;
  opacity: 1;
}
html[data-theme="dark"] #secondary .widget-title,
html[data-theme="dark"] .sidebar-main .widget-title {
  border-bottom-color: var(--gd-border) !important;
}
html[data-theme="dark"] #secondary .wp-block-separator,
html[data-theme="dark"] .sidebar-main .wp-block-separator {
  background: var(--gd-border) !important;
  border-color: var(--gd-border) !important;
}

/* Widgets inside .sidebar-main (custom sidebar, outside #secondary) */
html[data-theme="dark"] .sidebar-main > div,
html[data-theme="dark"] .sidebar-main > section,
html[data-theme="dark"] .sidebar-main > aside,
html[data-theme="dark"] .sidebar-main .widget,
html[data-theme="dark"] .sidebar-main .elementor-widget-wrap,
html[data-theme="dark"] .sidebar-main .elementor-widget-container {
  background-color: var(--gd-surface) !important;
  border: 1px solid var(--gd-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  color: var(--gd-text) !important;
  box-shadow: none !important;
}

/* Breadcrumbs - wrapper/inner stay invisible so the page bg shows
   through; only the trail nav itself becomes a small contained pill.
   The wrapper and inner are full-width block containers, so painting
   them was what produced the bar across the whole screen. */
html[data-theme="dark"] .ast-breadcrumbs-wrapper,
html[data-theme="dark"] .ast-breadcrumbs-inner,
html[data-theme="dark"] .ast-breadcrumbs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .breadcrumb-trail {
  display: inline-block;
  background: var(--gd-surface) !important;
  border: 1px solid var(--gd-border) !important;
  border-radius: 6px;
  padding: 6px 12px;
  line-height: 1.2;
  color: var(--gd-text-secondary);
}
html[data-theme="dark"] .ast-breadcrumbs a,
html[data-theme="dark"] .breadcrumb-trail a {
  color: var(--gd-text-secondary) !important;
}

/* Footer */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .ast-footer,
html[data-theme="dark"] .ast-small-footer,
html[data-theme="dark"] .ast-footer-overlay,
html[data-theme="dark"] .ast-above-footer,
html[data-theme="dark"] .ast-below-footer {
  background-color: var(--gd-bg) !important;
  color: var(--gd-text-muted);
  border-color: var(--gd-border);
}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .ast-footer a {
  color: var(--gd-text-secondary);
}

/* Widgets and blocks (outside sidebar) */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .wp-block-group {
  color: var(--gd-text);
}

/* Headings */
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 {
  color: var(--gd-text-heading);
}

/* Blockquotes */
html[data-theme="dark"] blockquote,
html[data-theme="dark"] .wp-block-quote {
  color: var(--gd-text-body);
  border-color: var(--gd-border-strong) !important;
}
html[data-theme="dark"] blockquote cite,
html[data-theme="dark"] .wp-block-quote cite {
  color: var(--gd-text-secondary);
}

/* Links */
html[data-theme="dark"] a {
  color: var(--gd-link);
}

/* Astra sidebar/primary borders */
html[data-theme="dark"] .ast-right-sidebar #primary,
html[data-theme="dark"] .ast-left-sidebar #primary,
html[data-theme="dark"] .ast-right-sidebar #secondary,
html[data-theme="dark"] .ast-left-sidebar #secondary {
  border-color: var(--gd-border) !important;
}

/* Form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--gd-surface) !important;
  color: var(--gd-text);
  border-color: var(--gd-border-strong);
}

/* WordPress block tables */
html[data-theme="dark"] .wp-block-table table {
  background: var(--gd-surface) !important;
  color: var(--gd-text-body);
}
html[data-theme="dark"] .wp-block-table td,
html[data-theme="dark"] .wp-block-table th {
  border-color: var(--gd-border) !important;
  color: var(--gd-text-body);
}
html[data-theme="dark"] .wp-block-table th {
  color: var(--gd-text-heading);
}
html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--gd-surface-raised) !important;
}
html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
  background: var(--gd-surface) !important;
}
html[data-theme="dark"] .wp-block-table strong {
  color: var(--gd-text-heading);
}
html[data-theme="dark"] figure.wp-block-table {
  color: var(--gd-text-body);
}

/* Images on dark bg - subtle rounded treatment */
html[data-theme="dark"] img {
  border-radius: 2px;
}


/* ─── Toggle button (shared base) ────────────────────────────── */

.gddm-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.gddm-toggle:hover { opacity: 0.7; }
.gddm-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* Three-state icon visibility:
   auto = monitor icon, light = sun, dark = moon */
.gddm-toggle .gddm-icon-auto { display: block; }
.gddm-toggle .gddm-icon-sun  { display: none; }
.gddm-toggle .gddm-icon-moon { display: none; }

html[data-gddm-mode="light"] .gddm-toggle .gddm-icon-auto { display: none; }
html[data-gddm-mode="light"] .gddm-toggle .gddm-icon-sun  { display: block; }
html[data-gddm-mode="light"] .gddm-toggle .gddm-icon-moon { display: none; }

html[data-gddm-mode="dark"] .gddm-toggle .gddm-icon-auto { display: none; }
html[data-gddm-mode="dark"] .gddm-toggle .gddm-icon-sun  { display: none; }
html[data-gddm-mode="dark"] .gddm-toggle .gddm-icon-moon { display: block; }


/* ─── Nav-menu placement ─────────────────────────────────────── */

.gddm-nav-item {
  display: flex !important;
  align-items: center !important;
}
.gddm-toggle-nav {
  color: inherit;
  padding: 6px 8px;
}

/* Hide nav toggle on mobile, show mobile-header toggle instead */
@media (max-width: 921px) {
  .gddm-nav-item { display: none !important; }
}


/* ─── Mobile header toggle ───────────────────────────────────── */

.gddm-mobile-toggle-wrap {
  display: none;
}
@media (max-width: 921px) {
  .gddm-mobile-toggle-wrap {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
  .gddm-toggle-mobile {
    color: inherit;
    padding: 6px;
  }
}


/* ─── Widget placement ───────────────────────────────────────── */

.gddm-toggle-widget {
  padding: 6px 10px;
  border: 1px solid var(--gd-border);
  border-radius: 6px;
  background: var(--gd-surface);
  color: var(--gd-text-secondary);
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}
.gddm-toggle-widget::after {
  content: 'Auto';
  font-size: 12px;
  line-height: 1.2;
}
html[data-gddm-mode="light"] .gddm-toggle-widget::after { content: 'Light mode'; }
html[data-gddm-mode="dark"] .gddm-toggle-widget::after { content: 'Dark mode'; }

/* .sidebar-main links and headings */
html[data-theme="dark"] .sidebar-main a {
  color: var(--gd-link) !important;
}
html[data-theme="dark"] .sidebar-main h2,
html[data-theme="dark"] .sidebar-main h3,
html[data-theme="dark"] .sidebar-main .widget-title {
  color: var(--gd-text-heading) !important;
}


/* ─── Inline-styled content cards (Featured Articles, etc.) ──
   Custom HTML blocks use hardcoded colors in style attributes.
   Attribute selectors with !important are the only way to
   override inline styles from CSS. Scoped to .entry-content
   so they only hit page/post body content. ──────────────── */

/* White card backgrounds */
html[data-theme="dark"] .entry-content [style*="background: #fff"],
html[data-theme="dark"] .entry-content [style*="background:#fff"] {
  background: var(--gd-surface) !important;
  box-shadow: none !important;
}

/* Card outer border (#d1d1d1) */
html[data-theme="dark"] .entry-content [style*="solid #d1d1d1"] {
  border-color: var(--gd-border) !important;
}

/* Image wrapper / inner borders (#eee) */
html[data-theme="dark"] .entry-content [style*="solid #eee"] {
  border-color: var(--gd-border) !important;
}

/* Description text color */
html[data-theme="dark"] .entry-content [style*="color: #444"],
html[data-theme="dark"] .entry-content [style*="color:#444"] {
  color: var(--gd-text-body) !important;
}

/* Title link color */
html[data-theme="dark"] .entry-content [style*="color: #0073aa"],
html[data-theme="dark"] .entry-content [style*="color:#0073aa"] {
  color: var(--gd-link) !important;
}


/* ─── History Engine (gd-history-engine) ────────────────── */

html[data-theme="dark"] .entry-content .history-table-container {
  border: 1px solid #484f58 !important;
}
html[data-theme="dark"] .entry-content .history-table-container td {
  border-bottom: 1px solid #30363d !important;
}
html[data-theme="dark"] .entry-content .history-table-container td:first-child {
  border-right: 1px solid #30363d !important;
}

/* Month nav pills */
html[data-theme="dark"] .gd-history-nav a[style*="background:#eee"],
html[data-theme="dark"] .gd-history-nav a[style*="background: #eee"] {
  background: var(--gd-surface-raised) !important;
  color: var(--gd-text-body) !important;
}
html[data-theme="dark"] .gd-history-nav a[style*="background:#000"],
html[data-theme="dark"] .gd-history-nav a[style*="background: #000"] {
  background: var(--gd-text-heading) !important;
  color: var(--gd-bg) !important;
}