/* ==========================================================================
   WINS Technologies -- blog theme override
   ==========================================================================
   Additive on top of the Mission News theme's own style.css (never edited
   directly, so a theme update never wipes this out) -- enqueued after it in
   inc/scripts.php so these rules win the cascade. Reskins the archive/list
   page and the single-post page to match the main site's navy/teal design
   system: same color tokens, same Inter typeface, same card/pill/button
   language used across winstechnologies.com.

   Scope: global chrome (header/nav/footer) + the archive post-loop
   (content-archive*.php) + the single-post template (content.php) + the
   shared bits both use (byline, categories, tags, more-from-category,
   pagination, comments). Sidebars/widgets are left to the theme's own
   styling for now since neither the list nor the detail page was asked for
   beyond that.
   ========================================================================== */

:root {
  --wins-navy: #1a2a4a;
  --wins-navy-dark: #0a1633;
  --wins-mint: #1abc9c;
  --wins-mint-dark: #159480;
  --wins-mint-light: #e6f9f5;
  --wins-ink: #14213d;
  --wins-body-text: #384164;
  --wins-border: #e5e7ee;
  --wins-footer-bg: #0a0a0a; /* black, not navy -- matches the main site's footer */
}

/* Inter is loaded as its own wp_enqueue_style() call in inc/scripts.php
   (same pattern the theme already uses for its own Google Fonts), not an
   @import here -- an @import inside a stylesheet is a second, render-
   blocking round-trip instead of a parallel request. */

/* ---------- Global type ---------- */
body,
input,
textarea,
button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--wins-body-text);
}
h1, h2, h3, h4, h5, h6,
.post-title,
.site-header .site-title,
.site-footer .site-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--wins-ink);
  font-weight: 700;
}
a {
  color: var(--wins-mint-dark);
}
a:hover,
a:focus {
  color: var(--wins-mint);
}

/* ---------- Site header ---------- */
/* The theme's own two-row header (a big centered logo, then date/tagline,
   then a separate full nav dropdown underneath -- tall enough to read as
   its own "hero") is replaced outright by the slim single-row navbar
   below (template-parts/wins-navbar.php), matching the main site's real
   nav bar instead of stacking two different-looking dark bands on top of
   each other. Hidden rather than deleted from the template so nothing
   here depends on further theme/plugin markup that might reference it. */
.site-header {
  display: none !important;
}

/* ---------- WINS navbar (logo + Agency Directory + List Your Agency) ---------- */
/* Rendered by template-parts/wins-navbar.php, included from header.php
   right after the (now hidden) theme header. Always present on every
   page -- list, archive, single post -- since it's the only nav left.
   Every link is an absolute URL back to the main marketplace site: this
   theme only runs the /blog subsite, it has no local agency pages of its
   own.

   Fixed + transparent, exactly like the main site's own .wins-navbar: it
   has NO background of its own, so the hero's single gradient (painted
   once, below) shows straight through it -- one continuous surface, not
   two abutting gradients that can show a seam at their shared edge. The
   template part's own inline script measures the bar's real height into
   --wins-blog-nav-h (used below to reserve space and to pull the hero up
   underneath it) and toggles .is-scrolled once the page scrolls past it. */
.wins-blog-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  background: transparent;
  box-shadow: none;
  transition: background .25s ease, box-shadow .25s ease;
}
.wins-blog-navbar.is-scrolled {
  background: #fff;
  box-shadow: 0 4px 24px rgba(10, 22, 51, .1);
}
.wins-blog-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem;
  transition: padding .25s ease;
}
.wins-blog-navbar.is-scrolled .wins-blog-navbar-inner {
  padding: .7rem 1.5rem;
}
.wins-blog-navbar-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.wins-blog-navbar-logo img {
  height: 60px;
  width: auto;
  transition: filter .15s ease;
}
/* The main site's own logo asset is solid white on transparent -- once
   the bar goes white on scroll, darken it the same way the main site's
   own CSS does at this exact moment. */
.wins-blog-navbar.is-scrolled .wins-blog-navbar-logo img {
  filter: brightness(0);
}
.wins-blog-navbar-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
/* !important here because the theme's own generic a:link/a:visited rules
   carry pseudo-class specificity that otherwise beats a plain class
   selector -- that's why this was rendering the theme's default blue
   instead of white before any scroll had happened. */
.wins-blog-navbar-link {
  color: #fff !important;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.wins-blog-navbar-link:hover {
  color: var(--wins-mint) !important;
}
.wins-blog-navbar.is-scrolled .wins-blog-navbar-link {
  color: var(--wins-body-text) !important;
}
.wins-blog-navbar.is-scrolled .wins-blog-navbar-link:hover {
  color: var(--wins-ink) !important;
}
.wins-blog-navbar-cta {
  display: inline-flex;
  align-items: center;
  background: var(--wins-mint);
  color: #fff !important;
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
  padding: .65rem 1.3rem;
  border-radius: .5rem;
  text-decoration: none;
  transition: background .15s ease;
}
.wins-blog-navbar-cta:hover {
  background: var(--wins-mint-dark);
  color: #fff !important;
}

/* Mobile: logo + Agency Directory + List Your Agency all stay on one
   row (matching the main site's own compact mobile header) instead of
   wrapping to a second line -- everything shrinks just enough to fit
   rather than dropping behind a hamburger menu. */
@media all and (max-width: 480px) {
  .wins-blog-navbar-inner {
    flex-wrap: nowrap;
    gap: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .wins-blog-navbar.is-scrolled .wins-blog-navbar-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .wins-blog-navbar-logo img {
    height: 34px;
  }
  .wins-blog-navbar-links {
    gap: .5rem;
    flex-wrap: nowrap;
  }
  .wins-blog-navbar-link {
    font-size: .78rem;
    white-space: nowrap;
  }
  .wins-blog-navbar-cta {
    font-size: .78rem;
    padding: .5rem .8rem;
  }
}

/* Reserve space at the top of the page for the now-fixed (out of flow)
   navbar, exactly like the main site's body.wins-site padding-top -- the
   hero/post-header blocks below opt back out of this reservation (via an
   equal negative margin-top) specifically so their own background can
   extend up underneath the transparent bar. */
#overflow-container {
  padding-top: var(--wins-blog-nav-h, 84px);
}

/* ---------- Hero band (list/archive/search pages) ---------- */
/* Rendered by template-parts/wins-hero.php, included from header.php right
   after the navbar above. One single background image (below), pulled up
   behind the fixed transparent navbar -- there is no second gradient for
   it to seam against. */
.wins-blog-hero {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 3rem 1.5rem 3.25rem;
  margin: 0 0 2rem;
  margin-top: calc(-1 * var(--wins-blog-nav-h, 84px));
  padding-top: calc(var(--wins-blog-nav-h, 84px) + 3rem);
}
.wins-blog-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-color: var(--wins-navy-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(ellipse at 65% 0%, var(--wins-navy) 55%, var(--wins-navy-dark) 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
.wins-blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.wins-blog-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--wins-mint);
  margin: 0 0 .75rem;
}
.wins-blog-hero-title {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff !important;
  margin: 0 0 .75rem;
  letter-spacing: -.01em;
}
.wins-blog-hero-sub {
  color: rgba(255, 255, 255, .72);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- No sidebar anywhere -- full-width .main everywhere ---------- */
/* The theme's .main width assumes a symmetric 25%/50%/25% left-sidebar/
   content/right-sidebar split even when the left sidebar has no widgets
   (see its own comment in style.css). That 50%-width .main is exactly
   what was still capping the single-post body width even after
   single.php's own max-width:1140px wrapper was added -- a narrower
   ancestor always wins regardless of what a descendant's own max-width
   says. Sidebar removed everywhere, not just list/archive: the TOC now
   serves the "extra column" role a widget sidebar used to on a single
   post, so there's nothing left that still needs the reserved 25%. */
.sidebar-right {
  display: none !important;
}
@media all and (min-width: 50em) {
  .main {
    width: 100%;
    margin-left: 0;
    /* The theme's own stock rule also sets a 1.5em bottom padding on
       .main -- on the single-post page that's exactly the visible white
       gap between the dark .wins-services-strip (a direct child of
       .main) and the footer right below it, since that padding sits
       outside the strip's own full-bleed dark background. */
    padding-bottom: 0;
    float: none;
  }
  /* Decorative column-divider lines the theme draws at the 25%/75% marks
     to separate main/sidebar columns -- meaningless once there's only one
     full-width column. */
  .content-container::before,
  .content-container::after {
    display: none;
  }
}

/* The theme's own Customizer "wide" layout mode (e.g. body.layout-
   no-sidebar-wide) applies width:156%/margin-left:-56% to .loop-container
   -- a 2-class selector that beats the plain .loop-container below on
   specificity alone, which is what was actually shoving the grid off
   the left edge no matter what width/margin this rule set. !important
   forces this to win regardless of which "-wide" body class is active. */
.loop-container {
  width: 100% !important;
  margin-left: 0 !important;
  position: static !important;
}

/* Container width matches the main site's own Bootstrap .container
   exactly (same fixed max-width per breakpoint, not a fluid value), and
   the grid's own column count switches at Bootstrap's col-sm-6/col-md-4
   breakpoints -- so this is pixel-identical to the homepage's own
   "Explore Latest Tech Trends" section, not just visually close. */
.loop-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 .75rem;
  box-sizing: border-box;
}
@media all and (min-width: 576px) {
  .loop-container { max-width: 540px !important; grid-template-columns: repeat(2, 1fr); }
}
@media all and (min-width: 768px) {
  .loop-container { max-width: 720px !important; grid-template-columns: repeat(3, 1fr); }
}
@media all and (min-width: 992px) {
  .loop-container { max-width: 960px !important; }
}
@media all and (min-width: 1200px) {
  .loop-container { max-width: 1140px !important; }
}
@media all and (min-width: 1400px) {
  .loop-container { max-width: 1320px !important; }
}
/* Each grid cell is the theme's own post_class() wrapper div (renamed
   .blog-card-wrap in content-archive.php); the card chrome lives one
   level in, on .blog-card, so the cell itself stays a plain layout box.
   min-width: 0 overrides the default min-width: auto that otherwise lets
   one oversized image or unbroken string force every column wider than
   its fair share and blow the whole grid past the viewport. */
.loop-container > div {
  display: flex;
  min-width: 0;
}

/* ---------- Blog cards -- copied 1:1 from the main site's own
   src/css/theme.css (.blog-card* there too), so font sizes, colors and
   the read-time icon are pixel-identical to the homepage's "Explore
   Latest Tech Trends" section instead of a separate approximation. ---------- */
.blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--wins-border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  color: inherit;
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1.25rem;
}
.blog-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1.5rem;
}
.blog-card-category {
  color: var(--wins-mint);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.blog-card-badge {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.blog-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  color: rgba(33, 37, 41, .92);
  font-size: .88rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid #eee9dd;
  font-size: .78rem;
  color: rgba(33, 37, 41, .92);
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.blog-card-meta svg {
  color: var(--wins-mint);
  vertical-align: -2px;
  margin-right: 1px;
}
.post-title,
.post-title a {
  color: var(--wins-ink);
  font-weight: 700;
}
.post-title a:hover {
  color: var(--wins-mint-dark);
}
.post-byline {
  color: #8b8a97;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.post-byline a {
  color: var(--wins-mint-dark);
}
.post-content {
  color: var(--wins-body-text);
  line-height: 1.7;
}
.sticky-status {
  background: var(--wins-mint);
  color: #fff;
  border-radius: 1rem;
  padding: .15rem .6rem;
  font-weight: 700;
}

/* Native ad slot, seeded every 6th card via inc/wins-blog.php -- styled
   as the same card shape so it sits naturally in the grid instead of
   breaking the rhythm, but clearly labeled per ad-network policy so it's
   never mistaken for editorial content. */
.wins-ad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wins-mint-light);
  border: 1px dashed var(--wins-mint);
  border-radius: 1rem;
  padding: 1.5rem;
  min-height: 100%;
}
.wins-ad-label {
  display: inline-block;
  align-self: flex-start;
  color: var(--wins-mint-dark);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .75rem;
}
.wins-ad-card-inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ---------- Single post (single.php -- its own dedicated template) ---------- */
/* This theme ships no single.php, so every single-post view used to fall
   back to index.php -- which wraps everything in #loop-container, the
   3-column CARD GRID meant for the archive list. That squeezed the
   entire article into one ~150px-wide grid cell (the actual bug behind
   the broken-looking detail page), regardless of anything scoped to
   .singular below. single.php now bypasses index.php entirely, so none
   of these classes ever appear inside #loop-container again. */

/* Hero: same full-bleed dark treatment as .wins-blog-hero on the list
   page, but left-aligned with the post's own title + category + meta
   (date, read time, author) instead of the generic tagline. */
.wins-post-hero {
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: left;
  padding: 2.75rem 1.5rem 2.75rem;
  margin: 0 0 2.5rem;
  margin-top: calc(-1 * var(--wins-blog-nav-h, 84px));
  padding-top: calc(var(--wins-blog-nav-h, 84px) + 2.75rem);
}
.wins-post-hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-color: var(--wins-navy-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(ellipse at 65% 0%, var(--wins-navy) 55%, var(--wins-navy-dark) 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
/* Same Bootstrap-container breakpoint steps as .loop-container on the
   list page (540/720/960/1140/1320px, not a flat value) -- this was
   capped at a flat 1140px before, narrower than the list page's own
   container at anything ≥1400px wide. Matches .wins-post-body-wrap
   below exactly, so the title lines up with the sidebar/body column
   instead of being centered independently in the full-width hero. */
.wins-post-hero-inner,
.wins-post-body-wrap {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 .75rem;
  box-sizing: border-box;
}
@media all and (min-width: 576px) {
  .wins-post-hero-inner, .wins-post-body-wrap { max-width: 540px; }
}
@media all and (min-width: 768px) {
  .wins-post-hero-inner, .wins-post-body-wrap { max-width: 720px; }
}
@media all and (min-width: 992px) {
  .wins-post-hero-inner, .wins-post-body-wrap { max-width: 960px; }
}
@media all and (min-width: 1200px) {
  .wins-post-hero-inner, .wins-post-body-wrap { max-width: 1140px; }
}
@media all and (min-width: 1400px) {
  .wins-post-hero-inner, .wins-post-body-wrap { max-width: 1320px; }
}
.wins-post-body-wrap {
  padding-bottom: 3rem;
}
.wins-post-hero-inner--split {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.wins-post-hero-text {
  flex: 1;
  min-width: 0;
}
.wins-post-hero-image {
  flex: 0 0 340px;
  border-radius: 1rem;
  overflow: hidden;
}
.wins-post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wins-post-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
}
.wins-post-hero-eyebrow-line {
  width: 22px;
  height: 1px;
  background: var(--wins-mint);
  flex-shrink: 0;
}
/* !important: the theme's own generic a:link/a:visited rules carry
   pseudo-class specificity that otherwise beats a plain class selector
   (same issue already fixed on .wins-blog-navbar-link) -- without it
   this rendered the theme's default blue instead of mint. */
.wins-post-hero-category {
  display: inline-block;
  color: var(--wins-mint) !important;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
}
.wins-post-hero-category:hover {
  color: #fff !important;
}
.wins-post-hero-title {
  color: #fff !important;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.wins-post-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  color: rgba(255, 255, 255, .65);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.wins-post-hero-meta svg {
  color: var(--wins-mint);
  vertical-align: -2px;
  margin-right: 2px;
}
.wins-post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}
/* !important: same fix as .wins-post-hero-category above -- the theme's
   own generic a:link/a:visited rules otherwise beat a plain class
   selector and render the default blue instead of white. */
.wins-post-breadcrumb a {
  color: rgba(255, 255, 255, .55) !important;
  text-decoration: none;
}
.wins-post-breadcrumb a:hover {
  color: #fff !important;
}
.wins-post-breadcrumb span:not(.wins-post-breadcrumb-current) {
  color: rgba(255, 255, 255, .35);
}
.wins-post-breadcrumb-current {
  color: rgba(255, 255, 255, .85);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media all and (max-width: 720px) {
  .wins-post-hero-inner--split {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .wins-post-hero-image {
    flex-basis: auto;
    height: 200px;
  }
}

/* Sidebar (TOC card) on the left, body on the right.
   #wins-sidebar-col is populated/positioned by assets/js/wins-toc.js --
   kept in the grid from the start (rather than injected as a whole
   column) so there's no layout jump once the script runs. */
.wins-post-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}
/* Grid auto-placement re-numbers items whenever one of them leaves
   normal flow -- once wins-toc.js switches #wins-sidebar-col to
   position:fixed/absolute (see below), it's no longer an in-flow grid
   item, so .post-content would otherwise become the *only* in-flow item
   and get auto-placed into column 1 instead of 2, rendering directly
   under/behind the now-independently-positioned fixed sidebar. Pinning
   it to column 2 explicitly makes it immune to that regardless of the
   sidebar's position state. */
.wins-post-layout > .post-content {
  grid-column: 2;
}
.wins-sidebar-col {
  grid-column: 1;
  max-height: calc(100vh - var(--wins-blog-nav-h, 84px) - 4rem);
  overflow-y: auto;
  /* Scrollbar hidden until hover (below) -- only relevant on the rare
     post with enough headings to make this card taller than the
     viewport. */
  scrollbar-width: none;
}
.wins-sidebar-col::-webkit-scrollbar {
  width: 0;
}
.wins-sidebar-col:hover {
  scrollbar-width: thin;
}
.wins-sidebar-col:hover::-webkit-scrollbar {
  width: 6px;
}
.wins-sidebar-col::-webkit-scrollbar-thumb {
  background: var(--wins-border);
  border-radius: 3px;
}
/* "Sticks on scroll" is handled by assets/js/wins-toc.js switching these
   two classes on/off (position:sticky doesn't reliably engage here --
   the theme wraps the whole page in #overflow-container, which sets
   overflow:hidden, a well-known case where sticky positioning silently
   never activates in most browsers). .wins-toc-fixed pins the sidebar to
   the viewport while scrolling through the article; .wins-toc-pinned-
   bottom takes over right at the end so it stops before overlapping the
   footer, the same way sticky naturally would. */
.wins-sidebar-col.wins-toc-fixed {
  position: fixed;
}
.wins-sidebar-col.wins-toc-pinned-bottom {
  position: absolute;
}

/* TOC card -- white card: title row with a collapse chevron, a short
   mint underline accent, then the nested heading list. */
.wins-toc-card {
  background: #fff;
  border: 1px solid var(--wins-border);
  border-radius: .85rem;
  padding: 1.1rem 1.25rem 1.3rem;
}
.wins-toc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--wins-mint);
  margin-bottom: .9rem;
}
.wins-toc-chevron {
  color: #a3a2ac;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.wins-toc-card.is-collapsed .wins-toc-chevron {
  transform: rotate(-90deg);
}
.wins-toc-card.is-collapsed .wins-toc-list {
  display: none;
}
.wins-toc-title {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wins-ink);
  margin: 0;
}
.wins-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.wins-toc-parent > a,
.wins-toc-item a {
  display: block;
  color: var(--wins-ink);
  font-weight: 600;
  font-size: .87rem;
  line-height: 1.45;
  text-decoration: none;
  padding: .35rem 0 .35rem .75rem;
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.wins-toc-parent > a:hover,
.wins-toc-item a:hover {
  color: var(--wins-mint-dark);
}
.wins-toc-parent > a.is-active,
.wins-toc-item a.is-active {
  color: var(--wins-mint-dark);
  border-left-color: var(--wins-mint);
  background: var(--wins-mint-light);
  border-radius: 0 .4rem .4rem 0;
}
/* Children collapsed by default -- only the parent whose section is
   currently active (assets/js/wins-toc.js) gets .is-expanded and reveals
   them. Height-animated rather than display:none so the expand/collapse
   reads as a motion, not a jump cut. */
.wins-toc-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
.wins-toc-parent.is-expanded > .wins-toc-sub {
  max-height: 400px;
}
.wins-toc-item a {
  padding-left: 1.5rem;
  font-size: .82rem;
  font-weight: 500;
  color: #6b6a76;
}

@media all and (max-width: 900px) {
  .wins-post-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .wins-post-layout > .post-content,
  .wins-sidebar-col {
    grid-column: 1;
  }
  .wins-sidebar-col,
  .wins-sidebar-col.wins-toc-fixed,
  .wins-sidebar-col.wins-toc-pinned-bottom {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    max-height: none;
  }
}

/* ---------- Single post body typography -- sized/spaced for reading ---------- */
.post-content {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--wins-ink);
}
.post-content p {
  margin: 0 0 1.25rem;
}
/* Fluid sizing (clamp) instead of a fixed rem value -- on a narrow phone
   a heading this bold routinely wraps to 2-3 lines, and the fixed 1.3
   line-height (tuned for a one-line desktop heading) read as too tight
   once wrapped; line-height now loosens a step for exactly that case.
   h4 previously had no line-height of its own at all, inheriting
   .post-content's 1.6 -- too loose for a bold, smaller heading. */
.post-content h2 {
  font-size: clamp(1.3rem, 4.5vw, 1.5rem);
  line-height: 1.35;
  margin: 2rem 0 .85rem;
  color: var(--wins-ink);
}
.post-content h3 {
  font-size: clamp(1.15rem, 4vw, 1.22rem);
  line-height: 1.4;
  margin: 1.65rem 0 .75rem;
  color: var(--wins-ink);
}
.post-content h4 {
  font-size: clamp(1rem, 3.5vw, 1.05rem);
  line-height: 1.45;
  margin: 1.35rem 0 .65rem;
  color: var(--wins-ink);
}
.post-content ul,
.post-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
}
.post-content li {
  margin-bottom: .5rem;
}
.post-content li:last-child {
  margin-bottom: 0;
}
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: .85rem;
  margin: 1.5rem 0;
}
.post-content pre {
  background: var(--wins-ink);
  color: #f1f1f1;
  padding: 1.1rem 1.25rem;
  border-radius: .6rem;
  overflow-x: auto;
  font-size: .88rem;
  margin: 1.5rem 0;
}
.post-content code {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  padding: .15rem .4rem;
  border-radius: .35rem;
  font-size: .88em;
}
.post-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}
.post-content a {
  color: var(--wins-mint-dark);
  text-decoration: underline;
}
.post-content blockquote {
  border-left: 3px solid var(--wins-mint);
  background: var(--wins-mint-light);
  padding: 1rem 1.25rem;
  border-radius: 0 .6rem .6rem 0;
  color: var(--wins-ink);
  margin: 1.5rem 0;
}

/* ---------- Post meta: categories, tags, more-from-category ---------- */
.post-meta {
  border-top: 1px solid var(--wins-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
.post-categories a {
  color: var(--wins-mint-dark);
  font-weight: 600;
}
.post-tags ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: .5rem 0 0;
}
.post-tags li {
  margin: 0;
}
.post-tags a {
  display: inline-block;
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  border-radius: 1rem;
  padding: .3rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.post-tags a:hover {
  background: var(--wins-mint);
  color: #fff;
}
.more-from-category {
  margin-top: 2rem;
  border-top: 1px solid var(--wins-border);
  padding-top: 1.5rem;
}
.more-from-category .section-title {
  color: var(--wins-ink);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
}
.more-from-category .section-title span {
  color: var(--wins-mint-dark);
}
.more-from-category .category-link {
  color: var(--wins-mint-dark);
  font-weight: 600;
}
.more-from-category .title {
  color: var(--wins-ink);
  font-weight: 600;
}
.more-from-category .title:hover {
  color: var(--wins-mint-dark);
}

/* ---------- Related posts (single.php) ---------- */
/* Same container-width convention as everything else on the detail page
   (see .wins-post-hero-inner/.wins-post-body-wrap) and the exact
   .blog-card* markup/classes from the list page, so these read as
   identical cards, not a second style. */
.wins-related-section {
  padding: 3rem 0;
  border-top: 1px solid var(--wins-border);
}
.wins-related-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 .75rem;
  box-sizing: border-box;
}
@media all and (min-width: 576px) { .wins-related-inner { max-width: 540px; } }
@media all and (min-width: 768px) { .wins-related-inner { max-width: 720px; } }
@media all and (min-width: 992px) { .wins-related-inner { max-width: 960px; } }
@media all and (min-width: 1200px) { .wins-related-inner { max-width: 1140px; } }
@media all and (min-width: 1400px) { .wins-related-inner { max-width: 1320px; } }
.wins-related-head {
  margin-bottom: 1.75rem;
}
.wins-related-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--wins-ink);
  margin: 0;
}
.wins-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media all and (min-width: 576px) {
  .wins-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media all and (min-width: 768px) {
  .wins-related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Services promo strip (single.php) ---------- */
/* Full-bleed dark band, same technique as .wins-blog-hero/.wins-post-hero
   above -- one continuous background regardless of viewport width. */
.wins-services-strip {
  position: relative;
  z-index: 1;
  padding: 3.5rem 0;
  margin-top: 1rem;
}
.wins-services-strip::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-color: var(--wins-navy-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, var(--wins-navy) 55%, var(--wins-navy-dark) 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
.wins-services-strip-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 .75rem;
  box-sizing: border-box;
  text-align: center;
}
@media all and (min-width: 576px) { .wins-services-strip-inner { max-width: 540px; } }
@media all and (min-width: 768px) { .wins-services-strip-inner { max-width: 720px; } }
@media all and (min-width: 992px) { .wins-services-strip-inner { max-width: 960px; } }
@media all and (min-width: 1200px) { .wins-services-strip-inner { max-width: 1140px; } }
@media all and (min-width: 1400px) { .wins-services-strip-inner { max-width: 1320px; } }
.wins-services-strip-head h2 {
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
}
.wins-services-strip-head p {
  color: rgba(255, 255, 255, .65);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto 2rem;
}
.wins-services-strip-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
}
/* !important: same fix as .wins-post-hero-category/.wins-blog-navbar-link
   above -- the theme's own generic a:link/a:visited rules otherwise beat
   a plain class selector and render the default blue instead of white. */
.wins-services-strip-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff !important;
  font-weight: 600;
  font-size: .92rem;
  padding: .75rem 1.3rem;
  border-radius: .6rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.wins-services-strip-link svg {
  color: var(--wins-mint);
  transition: transform .15s ease;
}
.wins-services-strip-link:hover {
  background: var(--wins-mint);
  border-color: var(--wins-mint);
  color: #fff !important;
  transform: translateY(-2px);
}
.wins-services-strip-link:hover svg {
  color: #fff;
  transform: translateX(2px);
}

/* ---------- Load More (index.php) -- replaces numbered pagination ---------- */
.wins-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 3rem;
}
.wins-load-more-btn {
  background: var(--wins-mint);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  border-radius: .6rem;
  padding: .8rem 2.25rem;
  cursor: pointer;
  transition: background .15s ease;
}
.wins-load-more-btn:hover:not(:disabled) {
  background: var(--wins-mint-dark);
}
.wins-load-more-btn:disabled {
  opacity: .7;
  cursor: default;
}

/* ---------- Comments + forms ---------- */
.comment-reply-title,
.comments .comment-author .author-name {
  color: var(--wins-ink);
}
input[type=submit] {
  background: var(--wins-mint);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: .6rem;
  padding: .6rem 1.4rem;
  cursor: pointer;
  transition: background .15s ease;
}
input[type=submit]:hover {
  background: var(--wins-mint-dark);
}
input[type=text],
input[type=email],
input[type=password],
input[type=url],
textarea {
  border: 1px solid var(--wins-border);
  border-radius: .6rem;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  border-color: var(--wins-mint);
  outline: none;
}

/* ---------- Footer -- theme's own hidden, replaced with an exact replica ---------- */
/* Same fate as .site-header: the theme's own footer (logo/tagline/menu/
   design-credit) is fully replaced by template-parts/wins-footer.php,
   which mirrors the main site's own footer.php content and markup
   directly instead of restyling this one to match it. */
.site-footer {
  display: none !important;
}

.wins-site-footer {
  position: relative;
  background: var(--wins-footer-bg);
  color: rgba(255, 255, 255, .65);
  padding-top: 3rem;
}
.wins-site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background: var(--wins-footer-bg);
}
.wins-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wins-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-bottom: 1.5rem;
}
.wins-footer-col-brand {
  grid-column: span 1;
}
.wins-footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}
.wins-footer-desc {
  color: rgba(255, 255, 255, .55);
  font-size: .85rem;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 1rem;
}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .15s;
}
.footer-social-icon:hover {
  background: var(--wins-mint);
}
.footer-heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  margin: 0 0 1rem;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: .6rem;
}
.footer-links a {
  color: #b9b6ac;
  font-size: .9rem;
  text-decoration: none;
}
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}
.wins-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .85rem;
  color: rgba(255, 255, 255, .65);
}
.wins-footer-bottom a {
  color: rgba(255, 255, 255, .65);
  text-decoration: underline;
}
.wins-footer-bottom a:hover {
  color: #fff;
}
@media all and (max-width: 900px) {
  .wins-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wins-footer-col-brand {
    grid-column: span 2;
  }
}
@media all and (max-width: 560px) {
  .wins-footer-grid {
    grid-template-columns: 1fr;
  }
  .wins-footer-col-brand {
    grid-column: span 1;
  }
}