/**
 * Sports niche pack — custom CSS.
 *
 * .container/.btn-primary/.button-4/.button-7/.input-lg/.input-label/
 * .media-zoom/.headline/.meta-dot/.measure/.pattern-*/.compare-table/
 * .main-header utilities are shared and colour-neutral, so they need
 * nothing here. .chip, .menu-item, .post-title/.item-link, .link-hover
 * and .section-rule ARE shared too, but the shared versions are sized/
 * coloured for the generic theme default (a wider .menu-item, a yellow
 * primary-color accent) — this pack's own prototype scopes every one of
 * them to its own red/blue identity and a tighter navbar, and this file
 * never carried that override, so the whole site quietly ran in the
 * theme's default yellow instead of sports' red/blue. Enqueued only when
 * the sports style is active (inc/functions/assets.php).
 */

/* Sacrificial no-op rule: something about this file's build/serve pipeline
   silently drops exactly the FIRST rule that follows this header comment
   (confirmed by moving real rules in and out of the first slot - whichever
   rule is first stops being applied, with no error and no effect on any
   other rule in the file). Root cause not found; this keeps whatever gets
   dropped harmless instead of chasing it around every time this file is
   edited. Do not remove, and do not put a real rule before this one. */
.site-style-sports {}

/* -- Top nav links: the shared .menu-item is sized for a dropdown list
      item (text-lg, px-8 py-4); the prototype's own navbar is much
      tighter (.9375rem, no horizontal padding). -- */
.site-style-sports .main-header nav .menu-item {
  font-size: .9375rem;
  font-weight: 500;
  padding: .25rem 0;
}
/* .menu-item's own `display: block` (main.css) sits in the same
   `@layer utilities` as Tailwind's generated .flex class and wins on
   source order, so the Football/More Sports dropdown triggers (which
   combine .menu-item with .flex to lay the label and caret out in a
   row) silently stayed block - stacking the caret SVG (itself reset to
   display:block by Tailwind's preflight) below the text instead of
   beside it. Compound selector forces it with real specificity. */
.site-style-sports .main-header nav .menu-item.flex {
  display: inline-flex;
}

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

/* -- Card/headline hover sweep + nav underline: red sweep, blue text on
      hover for .post-title, red for .link-hover and .section-rule - the
      shared versions use the generic yellow primary accent instead. -- */
.site-style-sports .post-title,
.site-style-sports .item-link {
  background-image: linear-gradient(var(--color-danger), var(--color-danger));
}
.dark .site-style-sports .post-title,
.dark .site-style-sports .item-link {
  background-image: linear-gradient(var(--color-danger-dark), var(--color-danger-dark));
}
.site-style-sports .post-title:hover,
.site-style-sports .post-title:focus { color: var(--color-link); }
.dark .site-style-sports .post-title:hover,
.dark .site-style-sports .post-title:focus { color: var(--color-secondary-dark-950); }

.site-style-sports .link-hover::after { background: var(--color-danger); }
.dark .site-style-sports .link-hover::after { background: var(--color-danger-dark); }

.site-style-sports .section-rule::after { background: var(--color-danger); }
.dark .site-style-sports .section-rule::after { background: var(--color-danger-dark); }

/* -- Footer link icons: muted by default, red on hover (shared .footer-menu
      has no icon-colour rule at all) -- */
.site-style-sports .footer-menu svg { flex-shrink: 0; color: var(--color-neutral-700); transition: color .3s, transform .3s; }
.site-style-sports .footer-menu:hover svg { color: var(--color-danger); transform: translateX(1px); }
.dark .site-style-sports .footer-menu svg { color: var(--color-neutral-dark-700); }
.dark .site-style-sports .footer-menu:hover svg { color: var(--color-danger-dark); }

/* -- Verdict badge shape (shared .verdict-badge has no base definition) -- */
.site-style-sports .verdict-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 4.5rem; height: 4.5rem; border-radius: 9999px; border-width: 3px; border-style: solid;
  flex-shrink: 0;
}

/* -- Compare/rankings table (shared .compare-table has no base definition
      at all - the "Most Discussed" table had zero padding, no header
      style and no row shading, reading as cramped and unfinished) -- */
.site-style-sports .compare-scroll { overflow-x: auto; }
.site-style-sports .compare-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.site-style-sports .compare-table th,
.site-style-sports .compare-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--color-neutral-300); white-space: nowrap; }
.dark .site-style-sports .compare-table th,
.dark .site-style-sports .compare-table td { border-color: var(--color-neutral-dark-300); }
.site-style-sports .compare-table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-neutral-700); }
.dark .site-style-sports .compare-table thead th { color: var(--color-neutral-dark-700); }
.site-style-sports .compare-table tbody tr:last-child td { border-bottom: 0; }
.site-style-sports .compare-table tbody tr:nth-child(even) { background: var(--color-neutral-200); }
.dark .site-style-sports .compare-table tbody tr:nth-child(even) { background: var(--color-neutral-dark-200); }

/* -- Secondary outline button (.button-4) used for the "All stories" /
      section-jump links: give it this pack's red identity instead of the
      shared class's neutral gray border. -- */
.site-style-sports .button-4 {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.site-style-sports .button-4:hover {
  background: var(--color-danger);
  color: var(--color-neutral-0);
  border-color: var(--color-danger);
}
.dark .site-style-sports .button-4 {
  border-color: var(--color-danger-dark);
  color: var(--color-danger-dark);
}
.dark .site-style-sports .button-4:hover {
  background: var(--color-danger-dark);
  color: var(--color-neutral-dark-950);
  border-color: var(--color-danger-dark);
}
/* .button-4 is itself defined inside `@layer utilities` in main.css (not
   `@layer components`), the same layer Tailwind's own generated utilities
   land in - so a plain text-xs/py-1.5/px-3 class on the same element
   doesn't reliably win on layer priority, only on source order within
   that layer, which .button-4 was winning. A compound selector forces it
   with real specificity instead. */
.site-style-sports .button-4.text-xs {
  padding-inline: .75rem;
  padding-block: .375rem;
  font-size: .75rem;
}

/* The shared theme's .btn-primary/.button-7 (main.css) never include an
   explicit `display` in their @apply list, so both fall back to the
   browser default for their tag - `display: inline` for the <a> case -
   breaking icon+text gap and vertical margin. Same fix already applied to
   every other niche pack this pass touched. */
.site-style-sports .btn-primary,
.site-style-sports .button-7 { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }

/* The prototype redefines .btn-primary itself to red for this pack (its
   own local <style> override, not the shared yellow default) - every
   Subscribe/Create Account button in the pack is meant to be solid red
   with white text, not the theme's generic yellow. */
.site-style-sports .btn-primary {
  background: var(--color-danger);
  color: var(--color-neutral-0);
}
.dark .site-style-sports .btn-primary {
  background: var(--color-danger-dark);
  color: var(--color-neutral-0);
}
.site-style-sports .btn-primary:hover { opacity: .85; }

/* The React commenting widget (inc/modules/commenting) hardcodes its
   submit button to the theme's generic yellow (var(--color-primary-
   light-950)) with no per-niche override hook, and a separate a11y fix
   in its own CSS darkens the button's text/icon to fix contrast against
   that yellow. Give this pack's comment button its own red identity and
   restore white text/icon, which has plenty of contrast against red. */
.site-style-sports [id^="commenting-comments"] form button[type="submit"] {
  background-color: var(--color-danger);
  color: var(--color-neutral-0);
}
.site-style-sports [id^="commenting-comments"] form button[type="submit"] svg {
  fill: var(--color-neutral-0);
}
.dark .site-style-sports [id^="commenting-comments"] form button[type="submit"] {
  background-color: var(--color-danger-dark);
}
/* 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-sports
   .btn-primary`) and silently defeated it, showing the button at every
   width. Restore the responsive toggle with matching specificity. */
.site-style-sports .btn-primary.hidden { display: none; }
@media (min-width: 1322px) {
  .site-style-sports .btn-primary.hidden.xl\:inline-flex { display: inline-flex; }
}

/* Hide scrollbars on the headlines ticker + filter strips */
.site-style-sports .no-scrollbar::-webkit-scrollbar { display: none; }
.site-style-sports .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Pulsing "live" dot in the ticker and story overlays */
@keyframes ctrspacex-sports-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.site-style-sports .live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-danger, #C82B2B);
  animation: ctrspacex-sports-live-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.dark .site-style-sports .live-dot { background: var(--color-danger-dark, #F07070); }
@media (prefers-reduced-motion: reduce) {
  .site-style-sports .live-dot { animation: none; }
}

/* Rank rows in the Most Discussed table: a coloured left edge marks the
   top three, echoing the podium convention without adding new colours. */
.site-style-sports .rank-row td:first-child { position: relative; }
.site-style-sports .rank-top3 td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-danger, #C82B2B);
}
.dark .site-style-sports .rank-top3 td:first-child::before { background: var(--color-danger-dark, #F07070); }

/* Gradient wordmark — red to blue, the niche's only two accent colours. */
.site-style-sports .brand-gradient {
  background-image: linear-gradient(90deg, var(--color-danger, #C82B2B), var(--color-link, #1A5FB4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dark .site-style-sports .brand-gradient {
  background-image: linear-gradient(90deg, var(--color-danger-dark, #F07070), var(--color-secondary-dark-950, #6AABF7));
}

/* Two-line clamp for headlines in the ticker cells */
.site-style-sports .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Readable story body (single posts + static pages) */
.site-style-sports .sports-prose p { margin-bottom: 1.5rem; }
.site-style-sports .sports-prose h2,
.site-style-sports .sports-prose h3 { font-weight: 700; letter-spacing: -.02em; margin: 2.25rem 0 1rem; }
.site-style-sports .sports-prose h2 { font-size: 1.5rem; }
.site-style-sports .sports-prose h3 { font-size: 1.25rem; }
.site-style-sports .sports-prose a { text-decoration: underline; text-underline-offset: 2px; }
.site-style-sports .sports-prose blockquote {
  border-left: 4px solid var(--color-danger, #C82B2B);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--color-neutral-700);
  margin: 1.5rem 0;
}
.dark .site-style-sports .sports-prose blockquote {
  border-left-color: var(--color-danger-dark, #F07070);
  color: var(--color-neutral-dark-700);
}
.site-style-sports .sports-prose ul,
.site-style-sports .sports-prose ol { margin: 0 0 1.5rem 1.25rem; }
.site-style-sports .sports-prose ul { list-style: disc; }
.site-style-sports .sports-prose ol { list-style: decimal; }

/* ==================================================================
   COMMENTS - default WordPress comment_form()/wp_list_comments() markup
   carries no pack-specific classes, so it was never styled for this pack
   (falls back to WP core's bare output). 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-sports .comment-reply-title,
.site-style-sports #reply-title { font-size: 1.5rem; font-weight: 700; color: var(--color-neutral-950); margin: 0 0 .5rem; }
.dark .site-style-sports .comment-reply-title,
.dark .site-style-sports #reply-title { color: var(--color-neutral-dark-950); }
.site-style-sports .comment-notes,
.site-style-sports .logged-in-as { font-size: .875rem; color: var(--color-neutral-700); margin: 0 0 1.25rem; }
.dark .site-style-sports .comment-notes,
.dark .site-style-sports .logged-in-as { color: var(--color-neutral-dark-700); }
.site-style-sports .comment-notes a,
.site-style-sports .logged-in-as a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }

.site-style-sports .comment-form-comment,
.site-style-sports .comment-form-author,
.site-style-sports .comment-form-email,
.site-style-sports .comment-form-url { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1rem; }
.site-style-sports .comment-form label { font-size: .875rem; font-weight: 700; color: var(--color-neutral-950); }
.dark .site-style-sports .comment-form label { color: var(--color-neutral-dark-950); }
.site-style-sports #comment,
.site-style-sports .comment-form input[type="text"],
.site-style-sports .comment-form input[type="email"],
.site-style-sports .comment-form input[type="url"] {
  width: 100%; padding: .75rem 1rem; border-radius: .75rem; border: 0; outline: none;
  background: var(--color-neutral-200); color: var(--color-neutral-950); font: inherit;
  box-shadow: inset 0 0 0 1px rgba(21, 22, 24, .08);
}
.dark .site-style-sports #comment,
.dark .site-style-sports .comment-form input[type="text"],
.dark .site-style-sports .comment-form input[type="email"],
.dark .site-style-sports .comment-form input[type="url"] {
  background: var(--color-neutral-dark-200); color: var(--color-neutral-dark-950);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.site-style-sports #comment:focus,
.site-style-sports .comment-form input:focus { box-shadow: 0 0 0 2px var(--color-danger); }
.dark .site-style-sports #comment:focus,
.dark .site-style-sports .comment-form input:focus { box-shadow: 0 0 0 2px var(--color-danger-dark); }

.site-style-sports .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-sports .comment-form-cookies-consent { color: var(--color-neutral-dark-700); }

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

.site-style-sports .commentlist { list-style: none; margin: 0 0 2.25rem; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.site-style-sports .commentlist .children { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 3.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.site-style-sports .comment-body { display: flex; flex-direction: column; gap: .35rem; }
.site-style-sports .comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.site-style-sports .comment-author.vcard { display: flex; align-items: center; gap: .75rem; }
.site-style-sports .comment-author .avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0; }
.site-style-sports .comment-author .fn { font-weight: 700; font-style: normal; font-size: .875rem; color: var(--color-neutral-950); }
.dark .site-style-sports .comment-author .fn { color: var(--color-neutral-dark-950); }
.site-style-sports .comment-author .says { display: none; }
.site-style-sports .comment-metadata { font-size: .75rem; font-weight: 400; color: var(--color-neutral-700); }
.dark .site-style-sports .comment-metadata { color: var(--color-neutral-dark-700); }
.site-style-sports .comment-metadata a { color: inherit; text-decoration: none; }
.site-style-sports .comment-content { font-size: .875rem; line-height: 1.65; margin-left: calc(2.5rem + .75rem); color: var(--color-neutral-700); }
.dark .site-style-sports .comment-content { color: var(--color-neutral-dark-700); }
.site-style-sports .comment-content p { margin: 0 0 .75rem; }
.site-style-sports .comment-content p:last-child { margin-bottom: 0; }
.site-style-sports .reply { margin-top: .35rem; margin-left: calc(2.5rem + .75rem); }
.site-style-sports .comment-reply-link {
  display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700;
  color: var(--color-link); text-decoration: none;
}
.site-style-sports .comment-reply-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.site-style-sports .no-comments { font-size: .875rem; color: var(--color-neutral-700); }
.dark .site-style-sports .no-comments { color: var(--color-neutral-dark-700); }
.site-style-sports .comment-awaiting-moderation { font-size: .8125rem; font-style: italic; color: var(--color-warning); }