/**
 * Magazine niche pack — custom CSS.
 *
 * This pack matches the theme's own default yellow/blue palette exactly
 * (unlike Sports/Entertainment's red/blue), so .post-title/.link-hover/
 * .section-rule/.menu-item need no color-scoped override here - only the
 * component classes the shared stylesheet never defines at all.
 *
 * 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. Keeping it here preserves the same protection if this
 * file ever grows a color override later.
 */
.site-style-magazine {}

/* -- Smart header z-index fix: 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 and has no
      stacking priority, letting later content (hero images, cards) paint
      over it. Pin it to the viewport edge with a z-index above everything
      else on the page. -- */
.site-style-magazine .main-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* -- Nav link sizing: the shared `.menu-item` in main.css is a big tap
      target (px-8 py-4 text-lg) meant for a plain menu bar, but the
      prototype's own `.menu-item` is a tight inline link (.9375rem,
      .25rem 0, no horizontal padding) with spacing coming from the nav's
      own flex `gap` instead. Both rules share the compiled stylesheet's
      `@layer utilities`, so equal-specificity same-layer rules would
      normally resolve by source order - scoping under the pack's body
      class instead gives this rule real specificity so it wins outright. -- */
.site-style-magazine .menu-item {
  padding: .25rem 0;
  font-size: .9375rem;
  font-weight: 500;
}

/* -- Pill button sizing: same shared-class conflict as `.menu-item` above -
      main.css's `.button-4` is a large CTA (px-10 py-5 text-3xl) but the
      prototype's is a modest inline pill (padding 1rem 2.5rem, 1.125rem). -- */
.site-style-magazine .button-4 {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
}

/* -- Primary button text: the theme's shared `.btn-primary` uses dark text
      (text-neutral-950) for its yellow buttons, but the prototype's own
      `.btn-primary` sets `color:#fff` - white text (and, by extension, any
      inline SVG using currentColor) on every Subscribe/Search/Post-comment
      button in this pack. -- */
.site-style-magazine .btn-primary {
  color: var(--color-neutral-0);
}
.dark .site-style-magazine .btn-primary {
  color: var(--color-neutral-0);
}

/* -- Primary button layout: the theme's shared `.btn-primary` never sets
      `display` at all (unlike the prototype's own `.btn-primary`, which is
      `display:inline-flex; align-items:center; justify-content:center;`),
      so a `<button class="btn-primary ...">` falls back to the browser's
      native button rendering. That's normally harmless for text-only
      buttons, but the moment an icon SVG sits next to the label (Subscribe
      buttons with a mail/arrow icon), the icon - which Tailwind's preflight
      makes `display:block` - drops onto its own line instead of sitting
      beside the text. Same fix already applied to every other niche pack
      this project touches (see niche-sports.css). -- */
.site-style-magazine .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-magazine
   .btn-primary`) and silently defeated it, showing the button at every
   width. Restore the responsive toggle with matching specificity. */
.site-style-magazine .btn-primary.hidden { display: none; }
@media (min-width: 1322px) {
  .site-style-magazine .btn-primary.hidden.xl\:inline-flex { display: inline-flex; }
}

/* -- Primary button sizing: same shared-class conflict as `.menu-item` and
      `.button-4` above - main.css's `.btn-primary` bakes in its own
      padding/font-size (px-6 py-2 text-lg), which wins the same-layer
      cascade over the differently-sized Tailwind classes (px-8/py-3/
      text-base etc.) put on each button in this pack to match the
      prototype's per-context sizing. One compound selector per size
      combination actually used, so each still gets its own intended size
      instead of every button collapsing to the shared default. -- */
.site-style-magazine .btn-primary.px-5.py-2 { padding: .5rem 1.25rem; font-size: .875rem; }
.site-style-magazine .btn-primary.px-5.py-1\.5 { padding: .375rem 1.25rem; font-size: .875rem; }
.site-style-magazine .btn-primary.px-8.py-3 { padding: .75rem 2rem; font-size: 1rem; }
.site-style-magazine .btn-primary.px-7.py-3 { padding: .75rem 1.75rem; font-size: 1rem; }
.site-style-magazine .btn-primary.w-full { padding: .625rem 1.5rem; font-size: 1rem; }

/* -- Pill search input: the shared `.input-lg` bakes in its own
      `rounded-lg` (same conflict pattern again), which wins over the
      explicit `rounded-full` class put on the Search page / 404 page's
      search field to make it a full pill like the prototype's. -- */
.site-style-magazine .input-lg.rounded-full {
  border-radius: 9999px;
}

/* -- Footer link spacing: the shared `.footer-menu` (main.css) 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 `.footer-menu` carries no padding
      at all - spacing comes only from the list's gap. -- */
.site-style-magazine .footer-menu {
  padding: 0;
}

/* -- Category chip: pill shape, uppercase micro-label (shared .chip has
      no base definition at all - this pack used it unstyled) -- */
.site-style-magazine .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;
}

/* -- Drop cap on the opening paragraph of a feature (blog/magazine helper) -- */
.site-style-magazine .dropcap::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-magazine .dropcap::first-letter { color: var(--color-neutral-dark-950); }

/* -- Archive rows: an accent bar wipes down the left edge on hover -- */
.site-style-magazine .entry { position: relative; padding-left: 1.75rem; }
.site-style-magazine .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-magazine .entry:hover::before { transform: scaleY(1); }
.dark .site-style-magazine .entry::before { background: var(--color-primary-dark-950); }
@media (prefers-reduced-motion: reduce) { .site-style-magazine .entry::before { transition: none; } }

.site-style-magazine .year-rule { font-variant-numeric: tabular-nums; letter-spacing: .18em; }

/* -- 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-magazine .single-content blockquote {
  margin: 2.5rem 0; padding-left: 2rem; border-left: 3px solid var(--color-primary-light-950);
}
.dark .site-style-magazine .single-content blockquote { border-left-color: var(--color-primary-dark-950); }
.site-style-magazine .single-content blockquote p {
  font-size: 1.5rem; font-weight: 300; line-height: 1.4; color: var(--color-neutral-950);
}
@media (min-width: 640px) { .site-style-magazine .single-content blockquote p { font-size: 1.875rem; } }
.dark .site-style-magazine .single-content blockquote p { color: var(--color-neutral-dark-950); }
.site-style-magazine .single-content blockquote cite {
  display: block; margin-top: 1.25rem; font-size: .875rem; font-style: normal; font-weight: 600;
  color: var(--color-neutral-700);
}
.dark .site-style-magazine .single-content blockquote cite { color: var(--color-neutral-dark-700); }

.site-style-magazine .single-content h2 { font-size: 1.5rem; font-weight: 700; margin: 3rem 0 1.25rem; }
@media (min-width: 640px) { .site-style-magazine .single-content h2 { font-size: 1.875rem; } }
.site-style-magazine .single-content h2:first-child { margin-top: 0; }
.site-style-magazine .single-content p { margin: 0 0 1.5rem; }
.site-style-magazine .single-content p:last-child { margin-bottom: 0; }

/* -- Lead-in: the article's opening paragraph reads larger and lighter,
      same as the prototype's single-post body text. -- */
.site-style-magazine .single-content > p:first-of-type {
  font-size: 1.25rem; line-height: 1.75; font-weight: 300;
}
.site-style-magazine .single-content a { text-decoration: underline; text-underline-offset: 2px; }

.site-style-magazine .single-content ul {
  margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .75rem; list-style: none;
}
.site-style-magazine .single-content ul > li { position: relative; padding-left: 1.5rem; }
.site-style-magazine .single-content ul > li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 9999px;
  background: var(--color-primary-light-950);
}
.dark .site-style-magazine .single-content ul > li::before { background: var(--color-primary-dark-950); }
.site-style-magazine .single-content ol { margin: 0 0 1.5rem 1.25rem; list-style: decimal; }
.site-style-magazine .single-content ol > li { padding-left: .25rem; margin-bottom: .5rem; }

/* ==================================================================
   COMMENTS - default WordPress comment_form()/wp_list_comments() markup
   carries no pack-specific classes. The theme has no comments.php
   override, so comments_template() renders WP core's legacy theme-compat
   template - the outer wrapper stays <ol class="commentlist"> regardless
   of html5 theme support (only the per-comment inner markup respects it).
   ================================================================== */
.site-style-magazine .comment-reply-title,
.site-style-magazine #reply-title { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-950); margin: 0 0 .5rem; }
.dark .site-style-magazine .comment-reply-title,
.dark .site-style-magazine #reply-title { color: var(--color-neutral-dark-950); }
.site-style-magazine .comment-notes,
.site-style-magazine .logged-in-as { font-size: .875rem; color: var(--color-neutral-700); margin: 0 0 1.25rem; }
.dark .site-style-magazine .comment-notes,
.dark .site-style-magazine .logged-in-as { color: var(--color-neutral-dark-700); }
.site-style-magazine .comment-notes a,
.site-style-magazine .logged-in-as a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

.site-style-magazine #commentform { border-radius: 1.5rem; border: 1px solid var(--color-neutral-300); background: var(--color-neutral-200); padding: 2rem; }
.dark .site-style-magazine #commentform { border-color: var(--color-neutral-dark-300); background: var(--color-neutral-dark-200); }
.site-style-magazine .comment-form-comment,
.site-style-magazine .comment-form-author,
.site-style-magazine .comment-form-email,
.site-style-magazine .comment-form-url { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1rem; }
.site-style-magazine .comment-form label { font-size: .875rem; font-weight: 700; color: var(--color-neutral-950); }
.dark .site-style-magazine .comment-form label { color: var(--color-neutral-dark-950); }
.site-style-magazine #comment,
.site-style-magazine .comment-form input[type="text"],
.site-style-magazine .comment-form input[type="email"],
.site-style-magazine .comment-form input[type="url"] {
  width: 100%; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid var(--color-neutral-300); outline: none;
  background: var(--color-neutral-0); color: var(--color-neutral-950); font: inherit;
}
.dark .site-style-magazine #comment,
.dark .site-style-magazine .comment-form input[type="text"],
.dark .site-style-magazine .comment-form input[type="email"],
.dark .site-style-magazine .comment-form input[type="url"] {
  background: var(--color-neutral-dark-0); color: var(--color-neutral-dark-950); border-color: var(--color-neutral-dark-300);
}
.site-style-magazine #comment:focus,
.site-style-magazine .comment-form input:focus { box-shadow: 0 0 0 2px var(--color-primary-light-300); }
.dark .site-style-magazine #comment:focus,
.dark .site-style-magazine .comment-form input:focus { box-shadow: 0 0 0 2px var(--color-primary-dark-950); }

.site-style-magazine .comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .875rem; color: var(--color-neutral-700); }
.dark .site-style-magazine .comment-form-cookies-consent { color: var(--color-neutral-dark-700); }

.site-style-magazine .form-submit { margin: 0; }
.site-style-magazine .form-submit #submit,
.site-style-magazine input#submit[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
  border-radius: 9999px; padding: .625rem 1.75rem; font-size: 1rem; font-weight: 500; font-family: inherit;
  border: 0; background: var(--color-primary-light-950); color: #fff; transition: opacity .3s;
}
.dark .site-style-magazine .form-submit #submit,
.dark .site-style-magazine input#submit[type="submit"] { background: var(--color-primary-dark-950); }
.site-style-magazine .form-submit #submit:hover,
.site-style-magazine input#submit[type="submit"]:hover { opacity: .88; }

.site-style-magazine .commentlist { list-style: none; margin: 0 0 3rem; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
.site-style-magazine .commentlist .children { list-style: none; margin: 2rem 0 0; padding: 0 0 0 3.5rem; display: flex; flex-direction: column; gap: 2rem; }
.site-style-magazine .comment-body { display: flex; gap: 1rem; align-items: flex-start; }
.site-style-magazine .comment-author.vcard { flex-shrink: 0; }
.site-style-magazine .comment-author .avatar { width: 2.75rem; height: 2.75rem; border-radius: 9999px; }
.site-style-magazine .comment-meta { min-width: 0; flex: 1; }
.site-style-magazine .comment-author .fn { font-weight: 700; font-style: normal; font-size: .875rem; color: var(--color-neutral-950); }
.dark .site-style-magazine .comment-author .fn { color: var(--color-neutral-dark-950); }
.site-style-magazine .comment-author .says { display: none; }
.site-style-magazine .comment-metadata { display: inline; font-size: .75rem; font-weight: 500; margin-left: .5rem; color: var(--color-neutral-700); }
.dark .site-style-magazine .comment-metadata { color: var(--color-neutral-dark-700); }
.site-style-magazine .comment-metadata a { color: inherit; text-decoration: none; }
.site-style-magazine .comment-content { font-size: .875rem; line-height: 1.75; margin-top: .5rem; font-weight: 300; color: var(--color-neutral-700); }
.dark .site-style-magazine .comment-content { color: var(--color-neutral-dark-700); }
.site-style-magazine .comment-content p { margin: 0 0 .75rem; }
.site-style-magazine .comment-content p:last-child { margin-bottom: 0; }
.site-style-magazine .reply { margin-top: .75rem; }
.site-style-magazine .comment-reply-link {
  display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700;
  color: var(--color-link); text-decoration: none;
}
.dark .site-style-magazine .comment-reply-link { color: var(--color-secondary-dark-950); }
.site-style-magazine .comment-reply-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.site-style-magazine .no-comments { font-size: .875rem; color: var(--color-neutral-700); }
.dark .site-style-magazine .no-comments { color: var(--color-neutral-dark-700); }
.site-style-magazine .comment-awaiting-moderation { font-size: .8125rem; font-style: italic; color: var(--color-warning); }