/*
Theme Name:   MSFT News Now (GeneratePress Child)
Theme URI:    https://msftnewsnow.com/
Description:  Xbox Wire inspired child theme for GeneratePress. Dark/light mode, pill-style category filters, custom typography for MSFT News Now.
Author:       Dave Shanahan
Author URI:   https://msftnewsnow.com/
Template:     generatepress
Version:      1.0.1
Text Domain:  generatepress-child
*/

/* ============================================
   XBOX WIRE INSPIRED THEME — for GeneratePress
   ============================================ */

:root {
  --paper:      #EBEBEB;
  --paper-pure: #EBEBEB; /* matched to --paper so content panels are flush with the page background */
  --ink:        #14150F;
  --ink-2:      #46483E;
  --ink-3:      #54564A;
  --rule:       #C9C9C9;
  --rule-soft:  #D9D9D9;

  --accent:       #0067B8;
  --accent-light: #005A9E;
  --accent-glow:  rgba(0,103,184,0.22);

  /* per-topic dot colors, used only on category pills.
     Redesigned as a full color wheel so every tag is at least
     ~30 degrees of hue apart from every other tag and from the
     site accent — no two categories read as "the same color" at a glance. */
  --c-windows:     #1E77B7;  /* blue        */
  --c-developers:  #3A3FDF;  /* indigo      */
  --c-copilot:     #8C3ADF;  /* violet      */
  --c-news:        #D8236B;  /* rose        */
  --c-security:    #D13C22;  /* red         */
  --c-m365:        #926C18;  /* amber/brown */
  --c-howto:       #637B14;  /* olive/gold  */
  --c-xbox:        #2D8315;  /* green       */
  --c-surface:     #15833A;  /* emerald     */
  --c-azure:       #158172;  /* teal        */
  --c-enterprise:  #334155;  /* neutral slate (deliberately colorless) */

  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "SFMono-Regular", ui-monospace, monospace;
}

/* ---- base ---- */
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent-light); }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.entry-title { font-size: clamp(28px, 3.4vw, 48px); }
.single .entry-title { font-size: clamp(32px, 4.5vw, 64px); }

/* ---- header ---- */
.site-header,
.main-navigation {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}

.main-navigation .main-nav ul li a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.main-navigation .main-nav ul li a:hover { color: var(--accent); }

.site-logo img { height: 32px; }

/* ---- meta / labels (category, date, read time) ---- */
.entry-meta, .entry-meta a,
.cat-links, .cat-links a,
.posted-on, .byline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cat-links a {
  color: var(--ink);
}

/* ---- pill-style category badges (inline, on post cards) ---- */
.cat-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  margin-right: 6px;
  transition: background .25s, color .25s, border-color .25s;
}

.cat-links a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ---- buttons everywhere (pill shape, mono, uppercase) ---- */
.button, button, input[type="submit"],
.wp-block-button__link,
.gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .2s;
}

.button:hover, button:hover, input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---- search field ---- */
.search-field, input[type="search"] {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 12px 18px;
  background: #fff;
  color: var(--ink);
}

/* ---- post cards / archive grid ---- */
article.post, .post {
  background: var(--paper-pure);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .3s ease;
}

.post .post-image img,
.post-thumbnail img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  transition: transform .8s cubic-bezier(.22,.61,.16,1);
}

.post:hover .post-thumbnail img { transform: scale(1.05); }

/* ---- content area ---- */
.entry-content {
  color: var(--ink-2);
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.6;
}

.entry-content a { border-bottom: 1px solid var(--accent-glow); }

/* ---- pagination ---- */
.pagination a, .page-numbers {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px;
}

.pagination a:hover, .page-numbers.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---- footer ---- */
.site-footer, footer.site-footer {
  background: var(--ink);
  color: var(--ink-3);
}

.site-footer .widget-title { color: #fff; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---- horizontal rule / dividers ---- */
hr { border: 0; border-top: 1px solid var(--rule); }

/* ============================================
   STICKY CATEGORY FILTER BAR
   Single consolidated block — matches the actual markup echoed by
   msftnewsnow_category_pills() in functions.php:
     <div class="cat-filters"><ul class="cat-filter-list">
       <li><a class="cat-filter [on] [cat-xbox|cat-copilot|cat-m365|cat-azure]">Label</a></li>
     </ul></div>
   ============================================ */
.cat-filters {
  position: sticky;
  /* GeneratePress clones the nav into a fixed, ~189px-tall bar
     ("navigation-clone.is_stuck") at z-index:10000 once you scroll.
     Anchoring this bar to top:0 put it directly underneath that clone,
     fully hidden. Sit it just below the stuck header instead. */
  top: 189px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  max-width: 100%;
  overflow-x: hidden;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 768px) {
  /* On mobile GeneratePress's stuck header clone is usually shorter
     (logo bar + hamburger only, no full menu row). If the pill bar
     still looks slightly covered or has an extra gap on your phone,
     this is the one number to adjust. */
  .cat-filters { top: 70px; }
}

.cat-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}
.cat-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 17px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.cat-filter::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.cat-filter.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cat-filter.on::before { background: #fff; }
.cat-filter:hover { border-color: var(--ink); }

/* per-topic dot colors — auto-applied by the slug map in functions.php */
.cat-filter.cat-windows::before    { background: var(--c-windows); }
.cat-filter.cat-xbox::before       { background: var(--c-xbox); }
.cat-filter.cat-copilot::before    { background: var(--c-copilot); }
.cat-filter.cat-m365::before       { background: var(--c-m365); }
.cat-filter.cat-surface::before    { background: var(--c-surface); }
.cat-filter.cat-azure::before      { background: var(--c-azure); }
.cat-filter.cat-developers::before { background: var(--c-developers); }
.cat-filter.cat-enterprise::before { background: var(--c-enterprise); }
.cat-filter.cat-howto::before      { background: var(--c-howto); }
.cat-filter.cat-news::before       { background: var(--c-news); }
.cat-filter.cat-security::before   { background: var(--c-security); }

/* active pill: keep the topic color visible as the border/background tint
   instead of forcing solid green, so each category still reads distinctly
   even when selected */
.cat-filter.on.cat-windows    { background: var(--c-windows); border-color: var(--c-windows); }
.cat-filter.on.cat-xbox       { background: var(--c-xbox); border-color: var(--c-xbox); }
.cat-filter.on.cat-copilot    { background: var(--c-copilot); border-color: var(--c-copilot); }
.cat-filter.on.cat-m365       { background: var(--c-m365); border-color: var(--c-m365); }
.cat-filter.on.cat-surface    { background: var(--c-surface); border-color: var(--c-surface); }
.cat-filter.on.cat-azure      { background: var(--c-azure); border-color: var(--c-azure); }
.cat-filter.on.cat-developers { background: var(--c-developers); border-color: var(--c-developers); }
.cat-filter.on.cat-enterprise { background: var(--c-enterprise); border-color: var(--c-enterprise); }
.cat-filter.on.cat-howto      { background: var(--c-howto); border-color: var(--c-howto); }
.cat-filter.on.cat-news       { background: var(--c-news); border-color: var(--c-news); }
.cat-filter.on.cat-security   { background: var(--c-security); border-color: var(--c-security); }
.cat-filter.on[class*="cat-"]::before { background: #fff; }

/* ---- DARK MODE PALETTE ---- */
body.dark-mode {
  --paper:      #14150F;
  --paper-pure: #14150F; /* matched to --paper so content panels are flush with the page background */
  --ink:        #F5F3EE;
  --ink-2:      #C9CBC0;
  --ink-3:      #86887C;
  --rule:       #33342A;
  --rule-soft:  #26271D;

  --accent:       #4DA3E0;
  --accent-light: #6DB6E8;
  --accent-glow:  rgba(77,163,224,0.25);
}

body.dark-mode .search-field,
body.dark-mode input[type="search"] {
  background: #22231B;
  border-color: var(--rule);
  color: var(--ink);
}

body.dark-mode .button, body.dark-mode button, body.dark-mode input[type="submit"],
body.dark-mode .wp-block-button__link {
  background: var(--accent);
  border-color: var(--accent);
  color: #0C0D09 !important;
}

body.dark-mode .button:hover, body.dark-mode button:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

body { transition: background-color .3s ease, color .3s ease; }

/* ---- floating dark/light toggle button ----
   Redesigned as a labeled pill (icon + text) with strong contrast
   against both the light and dark page backgrounds, instead of a
   plain unlabeled circle that blended into the page. ---- */
.theme-toggle {
  position: fixed;
  bottom: 90px;
  right: 16px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  cursor: pointer;
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, transform .15s;
}
.theme-toggle:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .toggle-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .toggle-label .label-dark { display: none; }
body.dark-mode .theme-toggle .icon-sun { display: none; }
body.dark-mode .theme-toggle .icon-moon { display: inline-block; }
body.dark-mode .theme-toggle .toggle-label .label-light { display: none; }
body.dark-mode .theme-toggle .toggle-label .label-dark { display: inline; }
body.dark-mode .theme-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #0C0D09;
}
body.dark-mode .theme-toggle:hover { background: var(--accent-light); border-color: var(--accent-light); }

/* ============================================
   KEEP READING CALLOUT
   Used inside the "Keep Reading Callout" GeneratePress
   Block Element — insert into posts near the bottom.
   ============================================ */
.keep-reading-box {
  max-width: 1240px;
  margin: 40px auto;
  padding: 24px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.keep-reading-box h3 { margin: 6px 0 8px; color: var(--ink); }
.kr-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kr-btn:hover { background: var(--accent); }

/* ============================================
   FOLLOW / SUBSCRIBE CTA
   Used inside the "Follow CTA" GeneratePress Block Element.
   ============================================ */
.follow-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1240px;
  margin: 24px auto;
  padding: 16px 20px;
  background: var(--paper-pure);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
}
.fc-icon { font-size: 20px; }
.follow-cta p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.fc-btn {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.fc-btn:hover { background: var(--accent); }

/* ============================================
   CORE THEME OVERRIDES
   GeneratePress's own Customizer-generated CSS (loaded from
   /wp-content/uploads/generatepress/style.min.css) hardcodes fixed hex
   colors for headings, body text, the article/comment/pagination panel,
   the nav "current page" chip, and the back-to-top button. Those fixed
   colors have the SAME CSS specificity as our theme variables above, so
   whichever stylesheet happens to load last wins the tie — and that can
   flip depending on caching/minification plugins. These !important
   rules force our theme (light AND dark) to always win, everywhere.
   ============================================ */

body { color: var(--ink-2) !important; }

h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.wp-block-heading {
  color: var(--ink) !important;
}

/* nav links + "current page" chip (this is the "HOME" tab background) */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: var(--ink) !important;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
  background-color: var(--rule-soft) !important;
  color: var(--ink) !important;
}
.main-navigation ul ul {
  background-color: var(--paper-pure) !important;
}

/* search overlay input */
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus,
.main-navigation .main-nav ul li.search-item.active > a,
.main-navigation .menu-bar-items .search-item.active > a {
  background-color: var(--paper-pure) !important;
  color: var(--ink) !important;
}

/* Article content panel, breadcrumb bar, comments area, and pagination
   bar all share this ONE GeneratePress selector — fixing it here fixes
   the article body, the "About the Author" box, "Recent Posts You Might
   Like", and "Leave a Reply" all at once, since they're nested inside
   .inside-article / .comments-area. */
.inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .container,
.inside-page-header {
  background-color: var(--paper-pure) !important;
  color: var(--ink-2) !important;
}
.inside-article a,
.paging-navigation a,
.comments-area a,
.page-header a {
  color: var(--accent) !important;
}
/* NOTE: no blanket ":hover" color override here on purpose — badges
   (.cat-links), buttons (.kr-btn/.fc-btn/.wp-block-button__link), and
   pagination links inside this container each define their own hover
   colors (usually white-on-solid-color). A blanket !important hover
   rule here would beat all of those with a plain text color and wash
   them out. Plain inline text links safely fall back to the site-wide
   "a:hover { color: var(--accent-light); }" rule near the top of this
   file instead. */

/* comment form fields */
textarea, select,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}

/* tag/category chip list at the bottom of a post */
.tags-links a {
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}

/* author box heading + related-posts heading (inherit panel bg above) */
.awpa-title, .jp-relatedposts-headline {
  color: var(--ink) !important;
}

/* code blocks — themed box instead of the invisible/default styling */
.wp-block-code {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 20px;
}
.wp-block-code code, .wp-block-code pre {
  color: var(--ink) !important;
  font-family: var(--mono);
  font-size: 14px;
}

/* ---- Back to top button ----
   GeneratePress hardcodes a light-gray background that never adapts to
   dark mode. It also sits at bottom:30px/right:30px, exactly under the
   floating "Subscribe" button, and is fully hidden because Subscribe
   wins the stacking order — clicking it does nothing. Moved into the
   same fixed-button stack as the dark-mode toggle, and re-themed to
   match it. (Only position/z-index/color are touched — opacity and
   transform are left alone so GeneratePress's built-in fade-in-on-scroll
   behavior still works.) */
.generate-back-to-top {
  bottom: 144px !important;
  right: 16px !important;
  z-index: 200 !important;
  background-color: var(--ink) !important;
  color: #fff !important;
}
.generate-back-to-top:hover, a.generate-back-to-top:focus {
  background-color: var(--accent) !important;
  color: #fff !important;
}
body.dark-mode .generate-back-to-top {
  background-color: var(--accent) !important;
  color: #0C0D09 !important;
}
body.dark-mode .generate-back-to-top:hover {
  background-color: var(--accent-light) !important;
  color: #0C0D09 !important;
}