/*
  Hand-written overrides — kept separate from site-class.css (Tailwind's
  generated output) so these survive the next `npm run build`/tailwind pass.
*/

/*
  Fix: code blocks becoming unreadable in dark mode.

  The article editor (Summernote) lets admins paste code straight from an
  IDE. Pasted code brings its own inline `style="color:#xxxxxx"` on each
  token, baked in from the source editor's *light* theme. Our `<pre>` code
  blocks are always dark-themed by design (Tailwind Typography keeps code
  blocks dark even on a light page), so any pasted token colored near-black
  for a light background becomes nearly invisible against that dark
  background — worse still in dark mode.

  Fix: ignore inline colors inside code blocks entirely and force the
  theme-aware color that Tailwind Typography already exposes via
  --tw-prose-pre-code (light gray, tuned for both light and dark mode).
  This guarantees code is always readable, at the cost of any syntax-color
  variation that happened to be pasted in.

  Scoped broadly on purpose: some pasted snippets don't land inside a real
  <pre><code> block at all — Summernote can preserve the source editor's own
  <div>/<span> structure with inline colors straight on those tags instead.
  The [style*="color"] rule below catches inline color on ANY element inside
  the article body, not just ones sitting inside <pre><code>, so it still
  works no matter how a given paste was structured. Same idea for opacity,
  in case a paste also brought faded/muted inline opacity along with it.
*/
.prose pre code,
.prose pre code *,
.prose [style*="color" i] {
  color: inherit !important;
  background-color: transparent !important;
}

.prose [style*="opacity" i] {
  opacity: 1 !important;
}

/*
  Fix: chapter sidebar rendering as a stacked single column instead of the
  left-sidebar/right-content two-column layout on Article/Details.cshtml.

  site-class.css is a pre-built, checked-in Tailwind output — it only
  contains the exact utility classes that existed in the .cshtml views at
  the time it was last built with `npm run build:css`. The chapter sidebar
  markup introduced `gap-8`, `order-1`/`order-2`, `lg:order-1`/`lg:order-2`,
  `lg:sticky`, `lg:top-24`, and the arbitrary-value `lg:grid-cols-[280px_1fr]`
  after that last build, so none of those ever made it into site-class.css.
  Without `lg:grid-cols-[280px_1fr]`, the container never actually becomes a
  two-column grid, so `order-*` has nothing to act on and everything just
  stacks in source order.

  These are hand-added here (rather than editing the generated file) so a
  future `npm run build:css` regenerates the identical rules and this block
  becomes redundant, at which point it's safe to delete.
*/
.order-1 { order: 1; }
.order-2 { order: 2; }
.gap-8 { gap: 2rem; }

@media (min-width: 1024px) {
  .lg\:sticky { position: sticky; }
  .lg\:top-24 { top: 6rem; }
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:grid-cols-\[280px_1fr\] { grid-template-columns: 280px 1fr; }
}

/*
  Fix: chapter sidebar list unreachable/unscrollable past the first screenful.

  Same root cause as the block above — `max-h-[70vh]` on the chapter list's
  inner scroll container (Views/Article/Details.cshtml) was added after the
  last `npm run build:css`, so site-class.css never got it. Without a max
  height, `overflow-y-auto` (which DID make it into that build) has nothing
  to actually overflow, so the list just runs on past the bottom of the
  screen with no scrollbar and no way to reach the rest of it.
*/
.max-h-\[70vh\] { max-height: 70vh; }

/*
  "Invisible scroll" for the same chapter list: scrollable with the mouse
  wheel / trackpad / touch, but no visible scrollbar track or thumb. Applied
  as `scrollbar-hide` alongside `overflow-y-auto` in Details.cshtml. Needs
  all three vendor forms — Firefox and IE/Edge take a property, WebKit
  (Chrome/Safari) only listens to the ::-webkit-scrollbar pseudo-element.
*/
.scrollbar-hide {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ / legacy Edge */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, new Edge */
}

/*
  Fix: same stale-build issue as above, but for the Admin area's bundle
  (site-media.css) instead of the public site's (site-class.css). Views/Article/
  ByCategory.cshtml and Views/Article/Details.cshtml (added for the "browse
  articles by category/sub-category" admin feature) use utility classes that
  weren't in any .cshtml file the last time `npm run build:css:media` ran, so
  none of these made it into site-media.css either. Hand-added here for the
  same reason as above — delete once a real rebuild regenerates them.
*/
.break-all { word-break: break-all; }
.pr-1 { padding-right: 0.25rem; }
.pt-3 { padding-top: 0.75rem; }
.max-h-72 { max-height: 18rem; }
.first\:border-0:first-child { border-width: 0px; }
.first\:pt-0:first-child { padding-top: 0px; }

@media (min-width: 1024px) {
  .lg\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
}

/*
  Fix: same stale-build issue again — the eBook feature (new content type,
  admin CRUD, public browsing, home page section, header nav/mega-menu) added
  a few utility classes to Views/Shared/_HomeLayout.cshtml and Views/EBook/
  Details.cshtml that weren't anywhere in the codebase before, so they're
  missing from site-class.css too. Hand-added here — delete once a real
  rebuild regenerates them.
*/
.max-w-sm { max-width: 24rem; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.w-\[42rem\] { width: 42rem; }

@media (min-width: 768px) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ===== News ticker (Views/Shared/_HomeLayout.cshtml) =====
   Fixed-height marquee. Two identical groups sit side by side and the track slides left by exactly one
   group (-50%), then loops. Each group is at least one viewport wide, so the loop is seamless even with
   a single short item. Only `transform` animates, so text length never triggers layout. Duration is set
   per page via --ticker-dur (scaled to the amount of text). */
.ticker-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-dur, 40s) linear infinite;
  will-change: transform;
}
.ticker-track:hover,
.ticker-track:focus-within { animation-play-state: paused; }
.ticker-group { display: flex; flex-shrink: 0; min-width: 100vw; }
.ticker-item { display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap; margin-right: 4rem; }
.ticker-sep { width: 4px; height: 4px; border-radius: 9999px; background: #94a3b8; margin: 0 2rem; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-mask { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-group[aria-hidden="true"] { display: none; }
}

/* Back-to-top button: raised while the footer is on screen (see _HomeLayout.cshtml). */
.btt-lift { margin-bottom: 5.5rem; }