/**
 * Blog niche pack — custom CSS.
 *
 * This pack matches the theme's own default yellow/blue palette exactly
 * (like Magazine/News), so .post-title/.link-hover/.section-rule/.menu-item
 * need no color-scoped override here.
 *
 * Every override below fixes a confirmed bug where a shared component class
 * in the compiled stylesheet (main.css, `@layer utilities`) bakes in its
 * own display/padding/font-size/color that wins the cascade over the
 * Tailwind classes put on the same element in this pack's markup, because
 * both live in the same layer and equal-specificity same-layer rules
 * resolve by source order, not by which one "looks" more specific. This
 * file is a plain, unlayered stylesheet, so everything in it outranks any
 * `@layer utilities` rule automatically, regardless of source order.
 *
 * A sacrificial no-op first rule guards against a confirmed bug elsewhere
 * in this project (see niche-sports.css) where something in this file's
 * serve/parse pipeline silently drops the very first rule after the
 * header comment.
 */
.site-style-blog {}

/* -- Smart header z-index: the shared reveal-on-scroll-up script
      (ctrspace-x-script.js initFixedHeader) adds a bare `.fixed` class to
      `.main-header` past 500px of scroll, but that class only sets
      `position: fixed` via Tailwind's own utility - no `top`/`z-index`
      come with it, so the header freezes wherever it was with no
      stacking priority, letting later content paint over it. -- */
.site-style-blog .main-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* -- Nav link sizing: shared `.menu-item` is a big tap target (px-8 py-4
      text-lg); the prototype's own is a tight inline link (.9375rem,
      .25rem 0, no horizontal padding), with spacing coming from the nav's
      own flex `gap`. -- */
.site-style-blog .menu-item {
  padding: .25rem 0;
  font-size: .9375rem;
  font-weight: 500;
}

/* -- Pill button sizing: shared `.button-4` is a large CTA (px-10 py-5
      text-3xl); the prototype's is a modest inline pill. -- */
.site-style-blog .button-4 {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

/* -- Category badge layout: shared `.button-7` never sets `display` at all,
      so it falls back to the browser default for an <a> - `display: inline`.
      An inline box's own margin-bottom has no effect on the following
      element's position (only block/inline-flex boxes push content below
      them), so the `mb-6` on the single-post category badge was silently
      doing nothing and the headline sat flush against it. Same root cause
      as the `.btn-primary` display bug elsewhere in this project - every
      other pack's equivalent badge uses `.chip`, which already carries its
      own `display: inline-flex` fix; this pack is the only one still using
      `.button-7` for that role. Every other use of `.button-7` in this pack
      (nav, tags, topics) already sits inside a `.flex` container, where a
      child's own `display` doesn't change its layout, so this is safe. -- */
.site-style-blog .button-7 {
  display: inline-block;
}

/* -- Full-bleed hero slider prev/next buttons: shared `.swiper-nav` has no
      base styling anywhere in the compiled stylesheet (every pack defines
      its own skin), so these render as bare, nearly invisible SVG icons
      directly on top of the hero photo - technically present but
      undiscoverable. Ported verbatim from the prototype's own <style>
      block, matching the pattern already established for Sports/
      Entertainment/Lifestyle. -- */
.site-style-blog .swiper-nav {
  width: 44px; height: 44px; border-radius: 9999px; display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-0); color: var(--color-neutral-950); transition: all .3s;
}
.site-style-blog .swiper-nav:hover { background: var(--color-neutral-950); color: var(--color-neutral-0); border-color: var(--color-neutral-950); }
.dark .site-style-blog .swiper-nav { background: var(--color-neutral-dark-0); color: var(--color-neutral-0); border-color: var(--color-neutral-dark-300); }
.dark .site-style-blog .swiper-nav:hover { background: var(--color-neutral-0); color: var(--color-neutral-950); }
.site-style-blog .swiper-nav.swiper-button-disabled { opacity: .35; cursor: default; }

/* -- Full-bleed hero slider pagination dots: the shared base rule
      (main.css) paints them a plain gray, invisible against a busy photo -
      not a functional bug (Swiper's `clickable:true` already wires up real
      clicks on every bullet, dots included), just a contrast one that made
      them impossible to notice or aim for. Higher-contrast skin, same
      pattern as Sports/Entertainment. -- */
.site-style-blog .hero-swiper-full .swiper-pagination-bullet { background: var(--color-neutral-0); opacity: .5; width: 9px; height: 9px; transition: all .3s; }
.site-style-blog .hero-swiper-full .swiper-pagination-bullet-active { background: var(--color-primary-light-950); opacity: 1; width: 26px; border-radius: 9999px; }
.dark .site-style-blog .hero-swiper-full .swiper-pagination-bullet-active { background: var(--color-primary-dark-950); }

/* -- Primary button layout: shared `.btn-primary` never sets `display` at
      all (unlike the prototype's own, which is `inline-flex; align-items:
      center; justify-content:center;`), so a button with an icon next to
      its label (footer Subscribe) drops the icon onto its own line -
      Tailwind's preflight makes SVGs `display:block`. Same fix already
      applied to every other niche pack this project touches (see
      niche-sports.css). -- */
.site-style-blog .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The header's desktop Subscribe button (`btn-primary … xl:inline-flex
   hidden`) relied on Tailwind's single-class `.hidden` to stay off on
   mobile; the fix above has higher specificity (`.site-style-blog
   .btn-primary`) and silently defeated it, showing the button at every
   width. Restore the responsive toggle with matching specificity. */
.site-style-blog .btn-primary.hidden { display: none; }
@media (min-width: 1322px) {
  .site-style-blog .btn-primary.hidden.xl\:inline-flex { display: inline-flex; }
}

/* -- Primary button text: shared `.btn-primary` uses dark text
      (text-neutral-950); the prototype's is `color:#fff` - white text (and
      any inline SVG using currentColor) on every button in this pack. -- */
.site-style-blog .btn-primary {
  color: var(--color-neutral-0);
}
.dark .site-style-blog .btn-primary {
  color: var(--color-neutral-0);
}

/* -- Primary button sizing: same shared-class conflict as `.menu-item` and
      `.button-4` above - one compound selector per size combination
      actually used in this pack, so each still gets its own intended size
      instead of collapsing to the shared default (px-6 py-2 text-lg). -- */
.site-style-blog .btn-primary.px-5.py-2 { padding: .5rem 1.25rem; font-size: .875rem; }
.site-style-blog .btn-primary.px-8.py-3 { padding: .75rem 2rem; font-size: 1rem; }
.site-style-blog .btn-primary.px-7.py-3 { padding: .75rem 1.75rem; font-size: 1rem; }
.site-style-blog .btn-primary.px-7.py-2\.5 { padding: .625rem 1.75rem; font-size: 1rem; }
.site-style-blog .btn-primary.w-full.py-2\.5 { padding: .625rem 1.5rem; font-size: .875rem; }

/* -- Footer link spacing: shared `.footer-menu` adds its own `py-2`
      vertical padding meant for a plain sidebar widget list; stacked on
      top of the column `<ul>`'s own flex `gap`, that doubles the visual
      space between rows. The prototype's carries no padding at all. -- */
.site-style-blog .footer-menu {
  padding: 0;
}

/* -- Category chip: pill shape, uppercase micro-label (shared .chip has
      no base definition at all). -- */
.site-style-blog .chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem;
  border-radius: 9999px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; transition: all .3s;
}

/* -- "Behind the writing" dot pattern: the shared `.pattern-dots::before`
      (main.css) is tuned for a light card (light-gray dots) - this band
      sits on the pack's own dark `bg-neutral-950`, where that same light
      gray all but disappears, so it needs its own darker-on-dark dot. -- */
.author-sec.pattern-dots::before {
  background-image: radial-gradient(#393838 1px, transparent 1px);
}

/* -- Archive rows: an accent bar wipes down the left edge on hover - the
      text-only listing style this niche uses for category/author/search
      archives instead of image cards. -- */
.site-style-blog .entry { position: relative; padding-left: 1.75rem; }
.site-style-blog .entry::before {
  content: ''; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px;
  background: var(--color-primary-light-950); transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.site-style-blog .entry:hover::before { transform: scaleY(1); }
.dark .site-style-blog .entry::before { background: var(--color-primary-dark-950); }
@media (prefers-reduced-motion: reduce) { .site-style-blog .entry::before { transition: none; } }

/* -- Drop cap on the opening paragraph of an essay. Applied via
      :first-of-type instead of a literal `.dropcap` class, since
      the_content() renders raw block markup with no hook to add one. -- */
.site-style-blog .single-content > p:first-of-type::first-letter {
  float: left; font-size: 3.4em; line-height: .82; font-weight: 700;
  margin: .06em .1em 0 0; color: var(--color-neutral-950);
}
.dark .site-style-blog .single-content > p:first-of-type::first-letter { color: var(--color-neutral-dark-950); }

/* -- Article prose: quote and list styling the_content() needs for real
      post content (bare blockquote/ul/li from the block editor carry no
      classes at all). -- */
.site-style-blog .single-content blockquote {
  margin: 2.75rem 0; padding-left: 2rem; border-left: 3px solid var(--color-primary-light-950);
}
.dark .site-style-blog .single-content blockquote { border-left-color: var(--color-primary-dark-950); }
.site-style-blog .single-content blockquote p {
  font-size: 1.5rem; font-weight: 300; line-height: 1.45; color: var(--color-neutral-950);
}
@media (min-width: 640px) { .site-style-blog .single-content blockquote p { font-size: 1.875rem; } }
.dark .site-style-blog .single-content blockquote p { color: var(--color-neutral-dark-950); }

.site-style-blog .single-content h2 { font-size: 1.5rem; font-weight: 700; margin: 3.5rem 0 1.5rem; }
@media (min-width: 640px) { .site-style-blog .single-content h2 { font-size: 1.875rem; } }
.site-style-blog .single-content h2:first-child { margin-top: 0; }
.site-style-blog .single-content p { margin: 0 0 1.75rem; }
.site-style-blog .single-content p:last-child { margin-bottom: 0; }
.site-style-blog .single-content a { text-decoration: underline; text-underline-offset: 2px; }

.site-style-blog .single-content ol {
  margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; list-style: none; counter-reset: blog-ol;
}
.site-style-blog .single-content ol > li { display: flex; gap: 1rem; }
.site-style-blog .single-content ol > li::before {
  counter-increment: blog-ol; content: counter(blog-ol, decimal-leading-zero);
  font-weight: 700; color: var(--color-primary-light-950); flex-shrink: 0;
}
.dark .site-style-blog .single-content ol > li::before { color: var(--color-primary-dark-950); }
.site-style-blog .single-content ul {
  margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; list-style: none;
}
.site-style-blog .single-content ul > li { position: relative; padding-left: 1.5rem; }
.site-style-blog .single-content ul > li::before {
  content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 9999px;
  background: var(--color-primary-light-950);
}
.dark .site-style-blog .single-content ul > li::before { background: var(--color-primary-dark-950); }

/* ==================================================================
   COMMENTS - the React commenting widget (inc/modules/commenting)
   renders its own markup with its own classes (`.single-comment-form`,
   `.custom-comment-note`, `.commenting-comment`, etc.) and already
   Tailwind-styles most of its own fields inline (rounded inputs,
   rounded textarea, a filled "Submit" pill) - confirmed by inspecting
   the live rendered DOM, not assumed. The one thing missing is any
   visual grouping for the "Leave a reply" fields: they float directly
   on the page background with no card, and sit right on top of the
   comment list above with almost no gap. -- */
.site-style-blog .single-comment-form {
  margin-top: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-200);
  padding: 2rem;
}
.dark .site-style-blog .single-comment-form {
  border-color: var(--color-neutral-dark-300);
  background: var(--color-neutral-dark-200);
}
.site-style-blog .custom-comment-note a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.dark .site-style-blog .custom-comment-note a { color: var(--color-secondary-dark-950); }