/* Stanisland Theme Toggle 1.3.2
   Stable custom drawer. Existing WordPress Navigation block remains the
   source of truth for menu links, but its responsive overlay is not reused. */

:root {
  --stt-page-bg: #ffffff;
  --stt-text: #111111;
  --stt-muted: #676767;
  --stt-surface: #ffffff;
  --stt-soft: #f0f0f2;
  --stt-line: rgba(0,0,0,.14);
  --stt-overlay: rgba(0,0,0,.36);
  --stt-editorial-bg: #ffffff;
  --stt-editorial-line: rgba(0,0,0,.75);
}

html[data-stanisland-theme="dark"] {
  color-scheme: dark;
  --stt-page-bg: #202020;
  --stt-text: #f5f5f5;
  --stt-muted: #b9b9b9;
  --stt-surface: #202020;
  --stt-soft: #2c2c2e;
  --stt-line: rgba(255,255,255,.16);
  --stt-overlay: rgba(0,0,0,.58);
  --stt-editorial-bg: #272729;
  --stt-editorial-line: rgba(255,255,255,.34);
}

html[data-stanisland-theme="light"] {
  color-scheme: light;
}


/* Prevent the original centred Gutenberg hamburger flashing before the
   replacement navigation mounts. This only applies when the early boot
   script has confirmed JavaScript is running. */
html.stt-js header.wp-block-template-part .wp-block-navigation__responsive-container-open {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ---------- Site Light / Dark ---------- */

html[data-stanisland-theme] body {
  background: var(--stt-page-bg);
  color: var(--stt-text);
  transition: background-color .2s ease, color .2s ease;
}

html[data-stanisland-theme="dark"] :where(
  .wp-site-blocks,
  #page,
  .site,
  .site-content,
  .content-area,
  .site-main,
  .entry-content,
  .entry-summary
) {
  color: var(--stt-text);
}

html[data-stanisland-theme="dark"] :where(
  h1,h2,h3,h4,h5,h6,p,li,dt,dd,figcaption,
  .entry-title,.site-title,.wp-block-post-title
) {
  color: inherit;
}

html[data-stanisland-theme="dark"] :where(
  input:not([type="submit"]):not([type="button"]),
  textarea,
  select
) {
  background: var(--stt-soft);
  color: var(--stt-text);
  border-color: var(--stt-line);
}

/* Never process photography/video with a dark-mode filter. */
html[data-stanisland-theme="dark"] :where(img,video,iframe,svg,canvas) {
  filter: none;
}



/* ---------- General body-copy + WooCommerce Dark Mode ----------
   WordPress/theme links can carry a hard-coded black colour. These rules
   correct ordinary text links and WooCommerce text while preserving
   buttons and deliberately coloured inline text. */

/* Normal prose links: only links without an explicit colour declaration.
   This fixes black underlined links on pages such as About/Advertise. */
html[data-stanisland-theme="dark"] :where(
  .entry-content,
  .wp-block-post-content,
  main
) :where(p, li, dd, dt) > a:not(.wp-element-button):not(.wp-block-button__link):not([style*="color"]):not([class*="has-"][class*="-color"]) {
  color: var(--stt-text) !important;
}

/* Also catch links wrapped by strong/em inside normal prose. */
html[data-stanisland-theme="dark"] :where(
  .entry-content,
  .wp-block-post-content,
  main
) :where(p, li, dd, dt) :where(strong, em, b, i) > a:not(.wp-element-button):not(.wp-block-button__link):not([style*="color"]):not([class*="has-"][class*="-color"]) {
  color: var(--stt-text) !important;
}

/* WooCommerce catalogue / shop */
html[data-stanisland-theme="dark"] .woocommerce :where(
  .woocommerce-breadcrumb,
  .woocommerce-breadcrumb a,
  .woocommerce-result-count,
  .woocommerce-loop-product__title,
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .price,
  ul.products li.product .price ins,
  ul.products li.product .price del,
  div.product .product_title,
  div.product .woocommerce-product-details__short-description,
  div.product .price,
  .woocommerce-tabs,
  .woocommerce-Tabs-panel,
  .related.products > h2,
  .upsells.products > h2,
  .cart_totals,
  .woocommerce-cart-form,
  .woocommerce-checkout,
  .woocommerce-MyAccount-content,
  .woocommerce-MyAccount-navigation
) {
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] .woocommerce ul.products li.product a:not(.button) {
  color: var(--stt-text) !important;
}

/* Product cards can inherit black from the theme even when the surrounding
   shop is dark. Keep their text readable without touching product images. */
html[data-stanisland-theme="dark"] .woocommerce ul.products li.product {
  color: var(--stt-text) !important;
}

/* Woo form controls */
html[data-stanisland-theme="dark"] .woocommerce :where(
  select,
  input.input-text,
  textarea
) {
  color: var(--stt-text) !important;
  background-color: var(--stt-soft) !important;
  border-color: var(--stt-line) !important;
}

/* Preserve existing coloured Woo buttons (red etc.) while ensuring their
   text remains readable. */
html[data-stanisland-theme="dark"] .woocommerce :where(
  a.button,
  button.button,
  input.button,
  .button.alt
) {
  color: #ffffff !important;
}

/* Breadcrumb/current-page links that the theme hard-codes black. */
html[data-stanisland-theme="dark"] :where(
  .woocommerce-breadcrumb a,
  .wp-block-post-terms a,
  .post-navigation a
):not([style*="color"]):not([class*="has-"][class*="-color"]) {
  color: var(--stt-text) !important;
}



/* Newspack/byline author links can inherit the theme's black link colour.
   Keep author names readable in Dark Mode without changing dates or plain
   metadata text. */
html[data-stanisland-theme="dark"] :where(
  .entry-meta a,
  .byline a,
  .author a,
  .post-author a,
  .wp-block-post-author__name a,
  .wp-block-post-author-name a,
  a[rel="author"]
) {
  color: var(--stt-text) !important;
  text-decoration-color: currentColor !important;
}

/* Newspack article cards: category labels and "Keep reading" links use
   explicit black from the theme, so make those readable in Dark Mode. */
html[data-stanisland-theme="dark"] :where(
  .cat-links,
  .cat-links a,
  a.more-link
) {
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] a.more-link {
  text-decoration-color: currentColor !important;
}

/* ---------- Stanisland editorial blocks in Dark Mode ----------
   These selectors cover the current Stanisland Mag Features, Featured
   Stories, Editorial Cards and Video Highlight blocks. Accent colours,
   images and deliberately coloured cards are left intact. */

html[data-stanisland-theme="dark"] .stan-hf {
  background: transparent !important;
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] .stan-hf-inner {
  background: transparent !important;
}

html[data-stanisland-theme="dark"] :where(
  .stan-hf-lead-wrap,
  .stan-hf-support-wrap
) {
  background: var(--stt-editorial-bg) !important;
  border-color: var(--stt-editorial-line) !important;
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] :where(
  .stan-hf-header,
  .stan-hf-support-grid .stan-hf-story
) {
  border-color: var(--stt-editorial-line) !important;
}

html[data-stanisland-theme="dark"] .stan-hf-image {
  background: #111 !important;
}

/* Featured Stories: darken only cards using the normal/default white
   background. Custom coloured cards remain exactly as authored. */
html[data-stanisland-theme="dark"] .sfs-card:not([style*="--sfs-card-bg"]),
html[data-stanisland-theme="dark"] .sfs-card[style*="--sfs-card-bg:#ffffff"],
html[data-stanisland-theme="dark"] .sfs-card[style*="--sfs-card-bg: #ffffff"] {
  --sfs-card-bg: var(--stt-editorial-bg) !important;
  --sfs-story-text: var(--stt-text) !important;
  border-color: var(--stt-editorial-line) !important;
}

html[data-stanisland-theme="dark"] .sfs-section-heading span {
  background: var(--stt-text) !important;
}

/* Video Highlight: the block stores its chosen colours as CSS variables.
   Only the standard white version is converted for Dark Mode. */
html[data-stanisland-theme="dark"] .stan-vh[style*="--svh-bg:#ffffff"],
html[data-stanisland-theme="dark"] .stan-vh[style*="--svh-bg: #ffffff"] {
  --svh-bg: var(--stt-editorial-bg) !important;
  --svh-text: var(--stt-text) !important;
}

/* Editorial Cards defaults are soft grey/white. Convert those neutral
   defaults while preserving intentionally coloured cards. */
html[data-stanisland-theme="dark"] .stan-editorial-card[style*="--sec-bg:#f6f6f6"],
html[data-stanisland-theme="dark"] .stan-editorial-card[style*="--sec-bg: #f6f6f6"],
html[data-stanisland-theme="dark"] .stan-editorial-card[style*="--sec-bg:#ffffff"],
html[data-stanisland-theme="dark"] .stan-editorial-card[style*="--sec-bg: #ffffff"] {
  --sec-bg: var(--stt-editorial-bg) !important;
  --sec-text: var(--stt-text) !important;
}

/* "What Matters In Music, Film & Culture":
   JS marks only the fragments that were actually black. Red/green/pink
   accent words therefore keep their original colours. */
html[data-stanisland-theme="dark"] .stt-what-matters-title {
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] .stt-what-matters-title .stt-dark-text-fragment,
html[data-stanisland-theme="dark"] .stt-what-matters-title .has-black-color,
html[data-stanisland-theme="dark"] .stt-what-matters-title [style*="color:#000"],
html[data-stanisland-theme="dark"] .stt-what-matters-title [style*="color: #000"],
html[data-stanisland-theme="dark"] .stt-what-matters-title [style*="color:black"],
html[data-stanisland-theme="dark"] .stt-what-matters-title [style*="color: black"] {
  color: var(--stt-text) !important;
}

/* ---------- Header ----------
   Only activated after JS successfully finds and copies the existing nav.
   This prevents a broken menu if scripting ever fails. */

html.stt-nav-ready header.wp-block-template-part {
  position: relative;
}

html.stt-nav-ready header.wp-block-template-part .wp-block-navigation {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Position relative to the visible header block, not to a page-specific
   generated wp-container class. This keeps it left on every template/page. */
html.stt-nav-ready .stt-navigation-root {
  display: contents;
}

.stt-menu-button {
  position: absolute !important;
  z-index: 9000;
  left: clamp(16px, 2.2vw, 30px) !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stt-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none !important;
  transition: opacity .16s ease;
}

.stt-menu-button:hover {
  opacity: .68;
}

.stt-menu-button:focus-visible,
.stt-menu-close:focus-visible,
.stt-theme-switch:focus-visible .stt-theme-switch__track {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.stt-menu-icon {
  display: flex;
  width: 31px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
}

.stt-menu-icon span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}


/* ---------- Billboard-inspired drawer ---------- */

.stt-menu-drawer {
  position: fixed;
  z-index: 100001;
  inset: 0 auto 0 0;
  width: min(520px, 100vw);
  height: 100dvh;
  background: var(--stt-surface);
  color: var(--stt-text);
  box-shadow: 18px 0 50px rgba(0,0,0,.18);
  transform: translateX(-102%);
  transition: transform .28s cubic-bezier(.22,.7,.25,1);
  overflow: hidden;
}

.stt-menu-backdrop {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--stt-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

html.stt-menu-open .stt-menu-drawer {
  transform: translateX(0);
}

html.stt-menu-open .stt-menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.stt-menu-open,
html.stt-menu-open body {
  overflow: hidden;
}

.stt-menu-drawer__header {
  position: relative;
  height: 74px;
  border-bottom: 1px solid var(--stt-line);
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  padding: 0 8px;
}

.stt-menu-brand {
  grid-column: 2;
  justify-self: center;
  color: var(--stt-text) !important;
  text-decoration: none !important;
  text-align: center;
  font-family: var(--wp--preset--font-family--chivo, inherit) !important;
  font-size: clamp(1.08rem, 3vw, 1.34rem);
  font-weight: 900 !important;
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stt-menu-close {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--stt-text);
  cursor: pointer;
}

.stt-menu-close span {
  position: absolute;
  left: 11px;
  top: 21px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.stt-menu-close span:first-child {
  transform: rotate(45deg);
}

.stt-menu-close span:last-child {
  transform: rotate(-45deg);
}

.stt-menu-drawer__body {
  box-sizing: border-box;
  height: calc(100dvh - 74px);
  padding: clamp(24px, 5vh, 52px) 24px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.stt-menu-links {
  width: 100%;
}

.stt-menu-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.stt-menu-links li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--stt-line);
}

.stt-menu-links li:first-child {
  border-top: 1px solid var(--stt-line);
}

.stt-menu-links a {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding: .72rem 0;
  color: var(--stt-text) !important;
  text-decoration: none !important;

  /* UK Rap Guide typography treatment: inherited Chivo/site face,
     heavy weight and tight tracking, simply scaled down for navigation. */
  font-family: var(--wp--preset--font-family--chivo, inherit) !important;
  font-size: clamp(1.45rem, 5.4vw, 2rem);
  font-weight: 900 !important;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.stt-menu-links a:hover {
  opacity: .62;
}

.stt-menu-links a[aria-current="page"]::after {
  content: "•";
  margin-left: auto;
  padding-left: 16px;
  font-size: .8em;
}



/* ---------- Nested navigation ---------- */
.stt-menu-links .stt-menu-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.stt-menu-links .stt-menu-row > a {
  flex: 1 1 auto;
  min-width: 0;
}

.stt-submenu-toggle {
  flex: 0 0 72px;
  width: 72px;
  min-height: 66px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--stt-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font: inherit;
}

.stt-submenu-toggle span {
  display: block;
  font-size: 2.15rem;
  line-height: .8;
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform .18s ease;
}

.stt-submenu-toggle[aria-expanded="true"] span {
  transform: rotate(180deg);
}

.stt-menu-links .stt-submenu {
  margin: 0;
  padding: 0 0 0 24px;
  border-top: 1px solid var(--stt-line);
}

.stt-menu-links .stt-submenu[hidden] {
  display: none !important;
}

.stt-menu-links .stt-submenu li:first-child {
  border-top: 0;
}

.stt-menu-links .stt-submenu a {
  min-height: 52px;
  padding: .62rem 0;
  font-size: clamp(1.05rem, 4.2vw, 1.38rem);
  font-weight: 700 !important;
  letter-spacing: -.025em;
}

.stt-submenu-toggle:hover {
  opacity: .62;
}

.stt-submenu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* ---------- Theme control inside drawer ---------- */

.stt-menu-footer {
  margin-top: auto;
  padding-top: 30px;
}

.stt-menu-footer__label {
  display: block;
  margin-bottom: 11px;
  color: var(--stt-muted);
  font-family: var(--wp--preset--font-family--chivo, inherit);
  font-size: .7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.stt-theme-control {
  --stt-switch-width: 72px;
  --stt-switch-height: 38px;
  --stt-knob: 30px;

  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--wp--preset--font-family--chivo, inherit);
  user-select: none;
  -webkit-user-select: none;
}

.stt-theme-switch {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
  line-height: 0;
  touch-action: manipulation;
}

.stt-theme-switch__track {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: var(--stt-switch-width);
  height: var(--stt-switch-height);
  padding: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: #dedee2;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.13),
    inset 0 -1px 1px rgba(255,255,255,.8),
    0 1px 2px rgba(0,0,0,.08);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.stt-theme-switch__knob {
  box-sizing: border-box;
  display: block;
  width: var(--stt-knob);
  height: var(--stt-knob);
  border-radius: 50%;
  background: #f7f7f7;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 2px 6px rgba(0,0,0,.20),
    0 1px 1px rgba(0,0,0,.10),
    inset 0 1px 1px rgba(255,255,255,.95);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.75,.25,1), background-color .2s ease;
}

html[data-stanisland-theme="dark"] .stt-theme-switch__track {
  background: #2c2c2e;
  border-color: rgba(255,255,255,.07);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.42),
    inset 0 -1px 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.25);
}

html[data-stanisland-theme="dark"] .stt-theme-switch__knob {
  background: #575759;
  border-color: rgba(255,255,255,.06);
  box-shadow:
    0 2px 7px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.08);
  transform: translateX(34px);
}

.stt-theme-label {
  min-width: 40px;
  color: var(--stt-text);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- WP admin bar ---------- */

body.admin-bar .stt-menu-drawer,
body.admin-bar .stt-menu-backdrop {
  top: 32px;
  height: calc(100dvh - 32px);
}

body.admin-bar .stt-menu-drawer__body {
  height: calc(100dvh - 106px);
}

@media (max-width: 782px) {
  body.admin-bar .stt-menu-drawer,
  body.admin-bar .stt-menu-backdrop {
    top: 46px;
    height: calc(100dvh - 46px);
  }

  body.admin-bar .stt-menu-drawer__body {
    height: calc(100dvh - 120px);
  }
}

@media (max-width: 600px) {
  .stt-menu-button {
    width: 52px;
    height: 52px;
    left: 12px !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
  }

  .stt-menu-icon {
    width: 30px;
    height: 21px;
  }

  .stt-menu-drawer {
    width: 100vw;
    box-shadow: none;
  }

  .stt-menu-backdrop {
    display: none;
  }

  .stt-menu-drawer__header {
    height: 64px;
    grid-template-columns: 56px 1fr 56px;
    padding: 0 4px;
  }

  .stt-menu-drawer__body {
    height: calc(100dvh - 64px);
    padding: 28px 22px 22px;
  }

  .stt-menu-links a {
    min-height: 62px;
    font-size: clamp(1.42rem, 7vw, 1.85rem);
  }

  .stt-theme-control {
    --stt-switch-width: 68px;
    --stt-switch-height: 36px;
    --stt-knob: 28px;
  }

  html[data-stanisland-theme="dark"] .stt-theme-switch__knob {
    transform: translateX(32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-stanisland-theme] body,
  .stt-menu-drawer,
  .stt-menu-backdrop,
  .stt-theme-switch__track,
  .stt-theme-switch__knob {
    transition: none !important;
  }
}


/* v1.2.8 — author archive links
   Stanisland archive/query cards link author names to /author/<slug>/.
   This final rule is deliberately last in the stylesheet so theme rules
   cannot repaint the author name black in Dark Mode. */
html[data-stanisland-theme="dark"] body a[href*="/author/"] {
  color: var(--stt-text) !important;
  -webkit-text-fill-color: var(--stt-text) !important;
  text-decoration-color: currentColor !important;
}


/* v1.2.9 — Stanisland Release Roundup / UK Rap Guide dark-mode support
   The guide plugin intentionally ships with white cards and black text.
   In Dark Mode we convert only its neutral surfaces; accent colours remain. */

html[data-stanisland-theme="dark"] .stanisland-rr {
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] :where(
  .stanisland-rr-current,
  .stanisland-rr-month,
  .stanisland-rr-month-head,
  .stanisland-rr-grid
) {
  background: transparent !important;
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-month-head {
  border-top-color: var(--stt-text) !important;
  border-bottom-color: var(--stt-line) !important;
}

html[data-stanisland-theme="dark"] :where(
  .stanisland-rr-kicker,
  .stanisland-rr-month-head h2,
  .stanisland-rr-month-head h2 span,
  .stanisland-rr-month-head p
) {
  color: var(--stt-text) !important;
}

/* Release cards */
html[data-stanisland-theme="dark"] .stanisland-rr-card {
  background: #272729 !important;
  color: var(--stt-text) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 5px 5px 0 #0f0f10 !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-card-body {
  background: #272729 !important;
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] :where(
  .stanisland-rr-card h3,
  .stanisland-rr-card h3 a,
  .stanisland-rr-title,
  .stanisland-rr-title a,
  .stanisland-rr-review,
  .stanisland-rr-review p
) {
  color: var(--stt-text) !important;
  -webkit-text-fill-color: var(--stt-text) !important;
}

/* Keep the guide's accent chips exactly as designed. */
html[data-stanisland-theme="dark"] .stanisland-rr-meta span:first-child {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-meta time {
  background: #111 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-read-more {
  color: var(--stt-text) !important;
  -webkit-text-fill-color: var(--stt-text) !important;
  text-decoration-color: currentColor !important;
  border-bottom-color: var(--srr-accent) !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-read-more:hover {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

/* Archive area */
html[data-stanisland-theme="dark"] .stanisland-rr-archive {
  border-top-color: var(--stt-text) !important;
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] :where(
  .stanisland-rr-archive-head span,
  .stanisland-rr-archive-head h2,
  .stanisland-rr-year-label
) {
  color: var(--stt-text) !important;
}

html[data-stanisland-theme="dark"] .stanisland-rr-year-select {
  background-color: #111 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Video areas remain untouched; only their surrounding neutral surfaces change. */
html[data-stanisland-theme="dark"] .stanisland-rr-video {
  background: #111 !important;
}


/* v1.3.0 — generic Music Guide parent surface
   The reusable Music Guide has one extra wrapper that the UK Rap Guide
   doesn't: .stanisland-pop-guide. Its default inline --srr-bg:#ffffff
   was leaving the month header sitting on a white parent surface in Dark Mode.
   Only neutral-white guide backgrounds are converted here, so deliberately
   coloured guide backgrounds remain untouched. */

html[data-stanisland-theme="dark"]
.stanisland-pop-guide[style*="--srr-bg:#ffffff"],
html[data-stanisland-theme="dark"]
.stanisland-pop-guide[style*="--srr-bg:#fff;"] {
  --srr-bg: transparent !important;
  --srr-text: var(--stt-text) !important;
  background: transparent !important;
  color: var(--stt-text) !important;
}

/* Make the generic guide's month/period area inherit the page's dark surface.
   This does not target the dedicated UK Rap Guide. */
html[data-stanisland-theme="dark"]
.stanisland-pop-guide :where(
  .stanisland-rr-month,
  .stanisland-rr-month-head,
  .stanisland-rr-period
) {
  background: transparent !important;
  color: var(--stt-text) !important;
}

/* The generic guide uses DIV/span period markup rather than the UK guide's
   H2 markup, so explicitly cover its month/year/count text. */
html[data-stanisland-theme="dark"]
.stanisland-pop-guide :where(
  .stanisland-rr-kicker,
  .stanisland-rr-period,
  .stanisland-rr-period span,
  .stanisland-rr-month-head p
) {
  color: var(--stt-text) !important;
  -webkit-text-fill-color: var(--stt-text) !important;
}