/* =========================================================
   Microsoft News Now — Sidebar Ad Frames (theme-aware)
   Targets the Automattic wpa/wpa-about widgets in #right-sidebar
   Works with the existing body.dark-mode toggle
   ========================================================= */

/* --- Theme tokens ------------------------------------------------ */
:root {
  --ad-bg: #ffffff;
  --ad-border: #e3e6ea;
  --ad-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --ad-label-bg: #f4f6f8;
  --ad-label-fg: #5b6470;
  --ad-label-border: #e3e6ea;
  --ad-radius: 10px;
}

body.dark-mode {
  --ad-bg: #1b1d21;
  --ad-border: #2b2f36;
  --ad-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  --ad-label-bg: #24272c;
  --ad-label-fg: #c9cdd3;
  --ad-label-border: #2b2f36;
}

/* --- Sidebar ad frame -------------------------------------------- */
#right-sidebar aside.widget_block:has(.wpa),
#right-sidebar aside.widget_block:has(.wpa-about),
#right-sidebar aside.widget_block:has([id^="atatags-"]) {
  background: var(--ad-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow);
  padding: 34px 12px 14px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#right-sidebar aside.widget_block:has(.wpa)::before,
#right-sidebar aside.widget_block:has(.wpa-about)::before,
#right-sidebar aside.widget_block:has([id^="atatags-"])::before {
  content: "Advertisement";
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-label-fg);
  background: var(--ad-label-bg);
  border: 1px solid var(--ad-label-border);
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1;
}

#right-sidebar aside.widget_block .wpa,
#right-sidebar aside.widget_block .wpa-about,
#right-sidebar aside.widget_block > div[style*="width:300px"],
#right-sidebar aside.widget_block > div[style*="width: 300px"] {
  width: 300px !important;
  height: 600px !important;
  max-width: 100%;
  float: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

#right-sidebar aside.widget_block iframe {
  width: 100% !important;
  max-width: 300px;
  height: 100% !important;
  min-height: 250px;
  border: 0;
  background: var(--ad-bg);
  border-radius: 6px;
  display: block;
}

#right-sidebar aside.widget_block::after {
  content: "";
  display: block;
  clear: both;
}

#right-sidebar aside.widget_block .wpa-about a,
#right-sidebar aside.widget_block .u.inline {
  color: var(--ad-label-fg) !important;
  font-size: 11px;
}

@media (max-width: 360px) {
  #right-sidebar aside.widget_block .wpa,
  #right-sidebar aside.widget_block .wpa-about,
  #right-sidebar aside.widget_block > div[style*="width:300px"] {
    width: 100% !important;
    max-width: 300px;
    height: 500px !important;
  }
}

/* =========================================================
   Reserved-space containers for Jetpack WordAds slots
   Prevents layout shift (CLS) as creatives load in.
   Slot dimensions are matched to Aditude's served sizes.
   ========================================================= */

/* Top leaderboard slot (moved into #msftnn-top-ad-anchor by snippet) */
#msftnn-top-ad-anchor {
  min-height: 100px;                /* 728x90 leaderboard + breathing room */
  margin: 12px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#msftnn-top-ad-anchor .wordads-tag[data-slot-type="top"] {
  width: 100%;
  max-width: 970px;                 /* modern billboard cap */
  min-height: 90px;
  margin: 0 auto;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Belowpost slot: reserve a 300x250 rectangle so nothing jumps */
.wordads-tag[data-slot-type="belowpost"],
div[id^="atatags-dynamic-belowpost-"] {
  min-height: 270px;                /* 250 rectangle + 20 label breathing */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px auto;
  width: 100%;
}

/* Inline slot inside article content: reserve rectangle space */
.wordads-tag[data-slot-type="inline"],
div[id^="atatags-dynamic-inline-"] {
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  width: 100%;
}

/* Small "Advertisement" label above article slots for policy compliance */
.wordads-tag[data-slot-type="belowpost"]::before,
.wordads-tag[data-slot-type="inline"]::before {
  content: "Advertisement";
  position: absolute;
  transform: translateY(-22px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ad-label-fg);
}

/* Wrap article ad slots as relative-positioned so the label sits above */
.wordads-tag[data-slot-type="belowpost"],
.wordads-tag[data-slot-type="inline"] {
  position: relative;
}

/* =========================================================
   Site title color — inherit from header in both themes
   ========================================================= */
.site-header .site-title a,
.site-header .main-title a,
#site-navigation .navigation-branding .main-title a,
#site-navigation .navigation-branding .site-description,
.navigation-branding .main-title a,
.mobile-header-navigation .site-title a,
.mobile-header-navigation .main-title a {
  color: inherit !important;
  text-decoration: none;
}

/* Light mode: header foreground is #46483e - use that explicitly */
body:not(.dark-mode) #site-navigation .navigation-branding .main-title a,
body:not(.dark-mode) .site-header .site-title a {
  color: #14150f !important;
}

/* Dark mode: header foreground is #c9cbc0 - lift title to that */
body.dark-mode #site-navigation .navigation-branding .main-title a,
body.dark-mode .site-header .site-title a,
body.dark-mode .main-title a {
  color: #f5f6f0 !important;
}

/* Hover state */
body:not(.dark-mode) .navigation-branding .main-title a:hover { color: #000 !important; }
body.dark-mode .navigation-branding .main-title a:hover { color: #ffffff !important; }

/* --- Theme-aware ad frames for all slots (Oct 2026) ------------- */
/* Dark mode: use the site's own palette instead of the blue-gray tones */
body.dark-mode{--ad-bg:#1e1f18;--ad-border:#33342A;--ad-label-bg:#26271D;--ad-label-fg:#C9CBC0;--ad-label-border:#33342A;--ad-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3)}
/* In-article and below-post slots: same frame as sidebar ads, label inside the frame */
.wordads-tag[data-slot-type=belowpost],.wordads-tag[data-slot-type=inline]{box-sizing:border-box;min-height:296px;background:var(--ad-bg);border:1px solid var(--ad-border);border-radius:var(--ad-radius);box-shadow:var(--ad-shadow);padding:30px 12px 12px;transition:background-color .2s ease,border-color .2s ease}
.wordads-tag[data-slot-type=belowpost]::before,.wordads-tag[data-slot-type=inline]::before{transform:none;top:10px;left:12px}
/* Top leaderboard: light frame only, no extra height */
#msftnn-top-ad-anchor .wordads-tag[data-slot-type=top]{box-sizing:border-box;background:var(--ad-bg);border:1px solid var(--ad-border);border-radius:var(--ad-radius)}