/* ==========================================================================
   style.css — Law Library BD
   Signature element: a rotated "rubber stamp" badge on each book card
   showing FREE / PAID / SUBSCRIPTION, echoing real case-file stamps.
   ========================================================================== */

.paper-texture {
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(16, 24, 38, 0.028) 0px,
      rgba(16, 24, 38, 0.028) 1px,
      transparent 1px,
      transparent 28px
    );
}

/* Dark mode: same ledger-line effect, but using light lines on a dark surface */
html.dark .paper-texture {
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(247, 243, 232, 0.035) 0px,
      rgba(247, 243, 232, 0.035) 1px,
      transparent 1px,
      transparent 28px
    );
}

/* Smooth, non-jarring theme switch across the whole page */
body, header, footer, main, a, button, div, span, p, h1, h2, h3 {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* Light mode only: a touch heavier than the browser default so body copy
   doesn't look thin/washed-out against the paper background. */
html:not(.dark) p {
  font-weight: 500;
}

.stamp-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  transform: rotate(9deg);
  border: 2px solid currentColor;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
  pointer-events: none;
}

.stamp-badge::before,
.stamp-badge::after {
  content: '';
}

.book-card {
  box-shadow: 0 1px 3px rgba(16, 24, 38, 0.06), 0 1px 2px rgba(16, 24, 38, 0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

html.dark .book-card {
  box-shadow: none;
}

.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -12px rgba(16, 24, 38, 0.22);
}

.category-tab {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .book-card,
  .category-tab {
    transition: none;
  }
  .book-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   DARK-MODE HARD PATCH
   --------------------------------------------------------------------------
   Why this exists: cdn.tailwindcss.com ("Play CDN") compiles utility CSS
   live in the browser as it discovers class names in the DOM. Tailwind's
   own docs flag this build as dev-only and NOT guaranteed to produce a
   stable cascade order. On a large PHP-rendered page like this one, that
   showed up as a real bug: dark:text-* rules were winning the cascade
   while the matching dark:bg-* rule for the same container was NOT,
   leaving pale text on a light background — i.e. invisible text.

   Fix: pin every dark: utility actually used in this project directly,
   scoped to html.dark, with !important. This file is loaded AFTER the
   Tailwind <script>, so combined with !important these rules always win —
   text and background can no longer fall out of sync.

   NOTE: if you later move off the CDN to a compiled Tailwind build
   (`npx tailwindcss -i input.css -o build.css --minify` in a real build
   step), this whole block becomes unnecessary and can be deleted.
   ========================================================================== */

html.dark body                              { background-color: #0B1220 !important; color: #F7F3E8 !important; }

html.dark .dark\:bg-ink-dark                { background-color: #0B1220 !important; }
html.dark .dark\:bg-surface-dark            { background-color: #141E2E !important; }
html.dark .dark\:bg-surface-dark\/60        { background-color: rgba(20, 30, 46, 0.6) !important; }
html.dark .dark\:bg-black\/40               { background-color: rgba(0, 0, 0, 0.4) !important; }
html.dark .dark\:bg-brass                   { background-color: #A87C2E !important; }
html.dark .dark\:bg-maroon\/10              { background-color: rgba(122, 31, 43, 0.1) !important; }

html.dark .dark\:text-paper                 { color: #F7F3E8 !important; }
html.dark .dark\:text-paper\/80             { color: rgba(247, 243, 232, 0.8) !important; }
html.dark .dark\:text-paper\/70             { color: rgba(247, 243, 232, 0.7) !important; }
html.dark .dark\:text-paper\/60             { color: rgba(247, 243, 232, 0.6) !important; }
html.dark .dark\:text-paper\/50             { color: rgba(247, 243, 232, 0.5) !important; }
html.dark .dark\:text-paper\/40             { color: rgba(247, 243, 232, 0.4) !important; }
html.dark .dark\:text-ink                   { color: #101826 !important; }
html.dark .dark\:text-brass                 { color: #A87C2E !important; }

html.dark .dark\:border-paper\/10           { border-color: rgba(247, 243, 232, 0.1) !important; }
html.dark .dark\:border-paper\/20           { border-color: rgba(247, 243, 232, 0.2) !important; }
html.dark .dark\:border-brass               { border-color: #A87C2E !important; }

html.dark .dark\:brightness-125             { filter: brightness(1.25) !important; }

html.dark .dark\:hover\:text-brass:hover    { color: #A87C2E !important; }

/* ==========================================================================
   LANGUAGE TOGGLE (BN / EN)
   --------------------------------------------------------------------------
   Pattern used everywhere in the templates: bilingual text is written as
   TWO sibling spans inside the same block element:
     <span data-lang-text="bn">বাংলা...</span>
     <span data-lang-text="en">English...</span>
   Only one is shown at a time, controlled by the html[data-lang] attribute
   that assets/js/lang-switcher.js keeps in sync (and which header.php also
   sets pre-paint, so there is no flash of the wrong language on load).
   !important for the same reason as the dark-mode patch above: keeps this
   working reliably regardless of Tailwind CDN's own class ordering.
   ========================================================================== */
[data-lang-text] { display: none !important; }
html[data-lang="bn"] [data-lang-text="bn"] { display: inline !important; }
html[data-lang="en"] [data-lang-text="en"] { display: inline !important; }

/* Block-level bilingual text (e.g. multi-line paragraphs) opt in with this
   modifier class alongside data-lang-text so it doesn't get squeezed onto
   one inline line. */
html[data-lang="bn"] [data-lang-text="bn"].lang-block { display: block !important; }
html[data-lang="en"] [data-lang-text="en"].lang-block { display: block !important; }