/***** Game Review Block – Dog Theme (Light default) *****/
.grb-wrap {
  --grb-bg:#ffffff;
  --grb-surface:#ffffff;
  --grb-soft:#f9f9fb;
  --grb-text:#1b1d29;
  --grb-muted:#666a7a;
  --grb-accent:#ffb703;
  --grb-line:#e2e5ed;
  --grb-radius:14px;
  --grb-pad:18px;
  --grb-gap:14px;
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--grb-text);
}

/* Card layout */
.grb-card {
  background: var(--grb-surface);
  border: 1px solid var(--grb-line);
  border-radius: var(--grb-radius);
  padding: var(--grb-pad);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Title + badge */
.grb-title { display:flex; gap:10px; align-items:center; margin:0 0 8px; }
.grb-title .badge {
  background: var(--grb-soft);
  color: var(--grb-muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .8rem;
}

/* Subtext & descriptions */
.grb-sub { color: var(--grb-muted); margin: 0 0 14px; }
.grb-desc { color: var(--grb-muted); }

/* Image gallery */
.grb-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grb-gap); margin:14px 0 6px; }
.grb-gallery img {
  width:100%; height:170px; object-fit:cover;
  border-radius:10px; border:1px solid var(--grb-line);
}

/* Summary box */
.grb-summary {
  background:#fefefe; border:1px dashed var(--grb-line);
  border-radius:10px; padding:12px 14px; margin:12px 0; color:var(--grb-text);
}

/* Table styling (consolidated) */
.grb-table {
  width:100%; border-collapse:separate; border-spacing:0; margin-top:10px;
  background:var(--grb-soft); border:1px solid var(--grb-line);
  border-radius:12px; overflow:hidden;
}
.grb-table table { width:100%; border-collapse:collapse; text-align:left; font-size:1rem; }
.grb-table th,.grb-table td { padding:10px 12px; border-bottom:1px solid var(--grb-line); vertical-align:middle; }
.grb-table thead th { background:var(--grb-soft); text-align:left; color:var(--grb-muted); font-weight:600; }
.grb-table tbody tr:nth-child(even){ background:#fafafa; }
.grb-table tbody tr:hover{ background:#fafafa; transition:background .2s ease-in-out; }

.grb-metric{ white-space:nowrap; font-weight:600; }

/* Paw rating */
.grb-paws{ display:inline-flex; gap:4px; }
.grb-paw{ width:18px; height:18px; display:inline-block; vertical-align:middle; opacity:.3; filter:grayscale(1); }
.grb-paw.filled{ opacity:1; filter:none; }
.grb-paw svg{ display:block; }

/* Score badge */
.grb-score{ margin-left:auto; background:var(--grb-accent); color:#222; border-radius:10px; padding:4px 8px; font-weight:700; }

/* Optional rating text */
.grb-rating .paws{ display:inline-block; letter-spacing:.2em; font-size:1.2em; line-height:1; color:#ffb347; }
.grb-rating .paws::after{ content:""; }

/* Mobile tweaks */
@media (max-width:782px){
  .grb-gallery{ grid-template-columns:1fr 1fr; }
  .grb-gallery img{ height:140px; }
}

/* ───────────────────────── DARK MODE FIXES ───────────────────────── */
/* Support both class names: your plugin uses .darkmode--activated; some blocks use .dark-mode */
body.darkmode--activated,
body.dark-mode{
  background:#0f1117 !important;
  color:#e8ecf1;
  min-height:100%;
}
html.darkmode--activated,
html.dark-mode,
html:has(body.darkmode--activated),
html:has(body.dark-mode){
  background:#0f1117 !important;
}

/* Colinear/Customizer ‘custom-background’ can inject a light background; neutralize it in dark */
body.darkmode--activated.custom-background,
body.dark-mode.custom-background{
  background-image:none !important;
  background-color:#0f1117 !important;
}

/* The Dark Mode plugin draws white layers; make them transparent */
.darkmode-background,
.darkmode-layer{
  background:transparent !important;
  mix-blend-mode:normal !important;
}

/* Let the dark page color show edge-to-edge (common WP wrappers) */
body.darkmode--activated #page,
body.darkmode--activated .site,
body.darkmode--activated .site-container,
body.darkmode--activated .wp-site-blocks,
body.darkmode--activated .site-header,
body.darkmode--activated .site-footer,
body.darkmode--activated .site-main,
body.darkmode--activated .content-area,
body.darkmode--activated .container,
body.darkmode--activated .entry-content,
body.darkmode--activated .wp-block-group,
body.darkmode--activated .wp-block-columns,
body.darkmode--activated .wp-block-cover,
body.darkmode--activated .wp-block-template-part,
body.darkmode--activated .wp-block-post,
body.darkmode--activated .wp-block-post-template,
body.darkmode--activated .header,
body.darkmode--activated .footer,
body.darkmode--activated .navbar,
body.darkmode--activated .navigation,
body.darkmode--activated .menu,
body.darkmode--activated .primary-navigation,
body.darkmode--activated .wp-block-navigation__container,
body.dark-mode #page,
body.dark-mode .site,
body.dark-mode .site-container,
body.dark-mode .wp-site-blocks,
body.dark-mode .site-header,
body.dark-mode .site-footer,
body.dark-mode .site-main,
body.dark-mode .content-area,
body.dark-mode .container,
body.dark-mode .entry-content,
body.dark-mode .wp-block-group,
body.dark-mode .wp-block-columns,
body.dark-mode .wp-block-cover,
body.dark-mode .wp-block-template-part,
body.dark-mode .wp-block-post,
body.dark-mode .wp-block-post-template,
body.dark-mode .header,
body.dark-mode .footer,
body.dark-mode .navbar,
body.dark-mode .navigation,
body.dark-mode .menu,
body.dark-mode .primary-navigation,
body.dark-mode .wp-block-navigation__container{
  background:transparent !important;
  box-shadow:none !important;
}

/* HR, tables, separators */
body.darkmode--activated hr,
body.dark-mode hr,
body.darkmode--activated .wp-block-separator,
body.dark-mode .wp-block-separator{ border-color:#2b3145 !important; }

body.darkmode--activated .wp-block-table table,
body.darkmode--activated table,
body.dark-mode .wp-block-table table,
body.dark-mode table{
  background:transparent !important; color:inherit; border-color:#2b3145 !important;
}
body.darkmode--activated .wp-block-table td,
body.darkmode--activated .wp-block-table th,
body.darkmode--activated table td,
body.darkmode--activated table th,
body.dark-mode .wp-block-table td,
body.dark-mode .wp-block-table th,
body.dark-mode table td,
body.dark-mode table th{
  border-color:#2b3145 !important;
}

/* Links */
body.darkmode--activated a,
body.dark-mode a{ color:#ffd166; }
body.darkmode--activated a:hover,
body.dark-mode a:hover{ color:#ffe08a; }

/* Component variable flip (Game Review Block) */
body.darkmode--activated .grb-wrap,
body.dark-mode .grb-wrap{
  --grb-bg:#0f1117;
  --grb-surface:#171a22;
  --grb-soft:#222738;
  --grb-text:#e8ecf1;
  --grb-muted:#aab2c0;
  --grb-accent:#ffd166;
  --grb-line:#2b3145;
}
body.darkmode--activated .grb-card,
body.dark-mode .grb-card{ background:var(--grb-surface); border:1px solid var(--grb-line); }
body.darkmode--activated .grb-title .badge,
body.dark-mode .grb-title .badge{ background:var(--grb-soft); color:var(--grb-muted); }
body.darkmode--activated .grb-sub,
body.darkmode--activated .grb-desc,
body.dark-mode .grb-sub,
body.dark-mode .grb-desc{ color:var(--grb-muted); }
body.darkmode--activated .grb-table thead th,
body.dark-mode .grb-table thead th{ background:var(--grb-surface); color:var(--grb-muted); }
body.darkmode--activated .grb-table tbody tr:nth-child(even),
body.dark-mode .grb-table tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
body.darkmode--activated .grb-summary,
body.dark-mode .grb-summary{
  background:linear-gradient(0deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px dashed var(--grb-line); color:var(--grb-text);
}
body.darkmode--activated .grb-score,
body.dark-mode .grb-score{ background:var(--grb-accent); color:#111; }
body.darkmode--activated .grb-paw,
body.dark-mode .grb-paw{ opacity:.35; filter:grayscale(1); }
body.darkmode--activated .grb-paw.filled,
body.dark-mode .grb-paw.filled{ opacity:1; filter:none; }

/* Paw legend */
.paw-legend{
  --pl-surface:#171a22; --pl-text:#e8ecf1; --pl-muted:#aab2c0; --pl-line:#2b3145;
  border:1px solid var(--pl-line); border-radius:14px; padding:14px;
  background:var(--pl-surface); color:var(--pl-text);
}
.paw-legend h3{ margin:0 0 8px; font-size:1.05rem; }
.paw-legend ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.paw-legend li{ border-left:3px solid var(--pl-line); padding-left:8px; color:var(--pl-text); }
@media (prefers-color-scheme: light){
  .paw-legend{ --pl-surface:#fff; --pl-text:#1b2230; --pl-muted:#5d6778; --pl-line:#e5e8f0; }
}

/* ── Widgets / Plugins that inject white backgrounds ── */
/* Email subscribe widget */
body.darkmode--activated .sfsi_plus_subscribe_Popinner,
body.dark-mode .sfsi_plus_subscribe_Popinner{
  background:#171a22 !important; border-color:#2b3145 !important; color:#e8ecf1 !important;
}
body.darkmode--activated .sfsi_plus_subscribe_Popinner h5,
body.dark-mode .sfsi_plus_subscribe_Popinner h5{ color:#e8ecf1 !important; }
body.darkmode--activated .sfsi_plus_subscribe_Popinner input[type=email],
body.darkmode--activated .sfsi_plus_subscribe_Popinner input[type=submit],
body.dark-mode .sfsi_plus_subscribe_Popinner input[type=email],
body.dark-mode .sfsi_plus_subscribe_Popinner input[type=submit]{
  background:#222738 !important; color:#e8ecf1 !important; border:1px solid #2b3145 !important;
}

/* Social tooltip popup (sets inline white bg) */
body.darkmode--activated .sfsi_plus_tool_tip_2,
body.dark-mode .sfsi_plus_tool_tip_2{
  background:#171a22 !important; border:1px solid #2b3145 !important; color:#e8ecf1 !important;
}

/* WP calendar widget */
body.darkmode--activated .wp-calendar-table,
body.dark-mode .wp-calendar-table{
  background:#171a22 !important; color:#e8ecf1 !important; border:1px solid #2b3145 !important;
}
body.darkmode--activated .wp-calendar-table th,
body.darkmode--activated .wp-calendar-table td,
body.dark-mode .wp-calendar-table th,
body.dark-mode .wp-calendar-table td{
  border-color:#2b3145 !important;
}

/* Make sidebar container transparent so page bg shows */
body.darkmode--activated #secondary,
body.dark-mode #secondary{ background:transparent !important; }

/* Nav/menus bar backgrounds */
body.darkmode--activated .main-navigation,
body.dark-mode .main-navigation{ background:transparent !important; }

/* Optional: header/site description color in dark */
body.darkmode--activated .site-title a,
body.darkmode--activated .site-description,
body.dark-mode .site-title a,
body.dark-mode .site-description{ color:#e8ecf1 !important; }
/* Fix: prevent dark-mode filter from tinting images (blue dog issue) */
body.darkmode--activated img,
body.darkmode--activated picture,
body.darkmode--activated video,
body.darkmode--activated canvas,
body.darkmode--activated svg,
body.dark-mode img,
body.dark-mode picture,
body.dark-mode video,
body.dark-mode canvas,
body.dark-mode svg {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Make sure the hero/header image is clean */
body.darkmode--activated .header-image img,
body.dark-mode .header-image img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Optional: also keep emoji/social icons from inverting */
body.darkmode--activated .emoji,
body.dark-mode .emoji {
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* Hide the theme's header image on single posts only (Colinear) */
.single-post .wp-custom-header,
.single-post .custom-header,
.single-post .header-image {
  display: none;
}
/* --- Dark-mode: keep comments/avatars from inverting --- */

/* Jetpack comment iframe */
body.darkmode--activated iframe#jetpack_remote_comment,
body.dark-mode iframe#jetpack_remote_comment {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Any other iframes in the comment area (fallback) */
body.darkmode--activated .comment-respond iframe,
body.dark-mode .comment-respond iframe {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Avatars next to the form and in the thread */
body.darkmode--activated img.avatar,
body.dark-mode img.avatar,
body.darkmode--activated .comment-meta img,
body.dark-mode .comment-meta img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Optional: keep emoji in the editor clean too */
body.darkmode--activated .comment-respond .emoji,
body.dark-mode .comment-respond .emoji {
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* ---- Dark mode: don't tint videos or VideoPress embeds ---- */
body.darkmode--activated video,
body.dark-mode video,
body.darkmode--activated .wp-block-video video,
body.dark-mode .wp-block-video video,
body.darkmode--activated .wp-video video,
body.dark-mode .wp-video video,
body.darkmode--activated .jetpack-video-wrapper video,
body.dark-mode .jetpack-video-wrapper video,
body.darkmode--activated iframe[src*="videopress.com"],
body.dark-mode iframe[src*="videopress.com"] {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Optional: blanket rule if you embed other players (YouTube/Vimeo/etc.) */
body.darkmode--activated .entry-content iframe,
body.dark-mode .entry-content iframe {
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* Test */
/* ─────────── Related (Jetpack/Colinear) ─────────── */
/* Heading above related posts */
.related-posts h3,
.related-title,
.jp-relatedposts .jp-relatedposts-headline,
.jp-relatedposts-headline {
  color: var(--related-teal) !important;
}

/* If the heading is a link */
.related-posts h3 a,
.related-title a,
.jp-relatedposts .jp-relatedposts-headline a,
.jp-relatedposts-headline a {
  color: inherit !important;
  text-decoration: none;
}
.related-posts h3 a:hover,
.related-title a:hover,
.jp-relatedposts .jp-relatedposts-headline a:hover,
.jp-relatedposts-headline a:hover {
  opacity: .9;
  text-decoration: none;
}

/* ─────────── Previous / Next navigation ─────────── */
/* Base link colour for prev/next (covers most themes) */
.post-navigation .nav-links a:link,
.post-navigation .nav-links a:visited,
.nav-previous a:link, .nav-previous a:visited,
.nav-next a:link, .nav-next a:visited {
  color: var(--nav-teal) !important;
}

/* Ensure inner pieces (label/title/subtitle) take the link colour */
.post-navigation .nav-links a .post-title,
.post-navigation .nav-links a .meta-nav,
.post-navigation .nav-links a .nav-subtitle,
.nav-previous a .post-title, .nav-next a .post-title,
.nav-previous a .meta-nav, .nav-next a .meta-nav,
.nav-previous a .nav-subtitle, .nav-next a .nav-subtitle {
  color: var(--nav-teal) !important;
}

/* Make labels like “Previous/Next” slightly closer to the Related teal */
.post-navigation .nav-links .meta-nav,
.post-navigation .nav-links .nav-subtitle {
  color: var(--related-teal) !important;
}

/* Hover/focus state */
.post-navigation .nav-links a:hover,
.post-navigation .nav-links a:focus {
  color: var(--nav-teal-hover) !important;
  text-decoration: none;
}
.post-navigation .nav-links a:hover .post-title,
.post-navigation .nav-links a:hover .meta-nav,
.post-navigation .nav-links a:hover .nav-subtitle {
  color: var(--nav-teal-hover) !important;
}
/* WordPress calendar – make weekday headers visible */
.widget_calendar #wp-calendar thead th,
.wp-block-calendar table thead th,
#wp-calendar thead th {
  color: var(--grb-text, #1b1d29); /* fallback for when the var isn't set */
  background: transparent;         /* or set a bg if you prefer */
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
}

/* Optional: ensure table text inherits the right color */
#wp-calendar,
#wp-calendar th,
#wp-calendar td,
#wp-calendar a {
  color: inherit;
}

/* If you're in dark mode, you can override the color here */
.darkmode--activated #wp-calendar thead th {
  color: var(--grb-text, #e8ecf1);
}

#tablepress-1_wrapper .dataTables_length,
#tablepress-1_wrapper .dataTables_filter,
#tablepress-1_wrapper .dataTables_info,
#tablepress-1_wrapper .dataTables_paginate{
  display: block !important;
}