/*! ═══════════════════════════════════════════════════════════════════════════
   Findex Design Fixes — v1.0.0
   ───────────────────────────────────────────────────────────────────────────
   Patches the issues identified in the Findex News Runtime Pro audit.
   Loaded AFTER frontend.css and article.css. Uses higher specificity
   (.fda-active selector + nested classes) instead of !important wars,
   so site owners can still override these patches if needed.

   Sections:
     1.  Tokens & wasted-margin reclaim
     2.  FIX-1: Layout container width unification
     3.  FIX-2: Article sidebar sticky behavior (remove internal scroll)
     4.  FIX-5: Breathing room around AI Summary
     5.  FIX-6: Reactions box visual grouping
     6.  FIX-7: Mobile breakpoint adjustment
     7.  Inline-style overrides (FIX-4)
     8.  Skyscraper rail layout (for wide screens)
     9.  Light-theme overrides for the above
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Reclaimed margin width for skyscraper rails on ultra-wide */
  --fda-rail-width: 0px;
  --fda-rail-gap: 0px;

  /* Slot collapse transition — smooth show/hide when creatives load */
  --fda-slot-transition: opacity .25s ease, max-height .35s ease;

  /* Visual rhythm: breathing room added between content sections */
  --fda-section-gap: 28px;
}

@media (min-width: 1440px) {
  :root { --fda-rail-width: 180px; --fda-rail-gap: 24px; }
}


/* ── 2. FIX-1: LAYOUT CONTAINER WIDTH UNIFICATION ──────────────────────────
   The news plugin has:
     .fnrp-ap          max-width: 1280px
     .ap-header-inner  max-width: 1100px
     .ap-body          max-width: 1100px
   This creates 90px of dead space on each side inside .fnrp-ap that has
   NO visual purpose. On screens ≥1440px we use this space for skyscrapers.
   On smaller screens we widen the inner container slightly for better
   reading rhythm. ───────────────────────────────────────────────────────── */

@media (min-width: 1200px) and (max-width: 1439px) {
  .fda-active .ap-header-inner,
  .fda-active .ap-body {
    max-width: 1180px;   /* +80px, kills most of the dead space */
  }
}

/* On ≥1440px we let the .fnrp-ap container expand and use the
   side-margin for our skyscraper rails. The .ap-body grid stays
   centered but with explicit side padding for the rails. */
@media (min-width: 1440px) {
  .fda-active .fnrp-ap {
    max-width: 1440px;
    padding-inline: calc(var(--fda-rail-width) + var(--fda-rail-gap));
    box-sizing: border-box;
  }
  .fda-active .ap-header-inner,
  .fda-active .ap-body {
    max-width: 1100px;   /* keep editorial line length */
  }
}


/* ── 3. FIX-2: ARTICLE SIDEBAR — REMOVE INTERNAL SCROLL ────────────────────
   Original CSS traps the sidebar in a scroll container so any ad inside
   becomes invisible if the user doesn't scroll the sidebar itself.
   Replace with true sticky behavior. ─────────────────────────────────────── */

.fda-active .ap-sidebar {
  position: sticky;
  top: var(--gap-5, 24px);
  align-self: start;

  /* OVERRIDE: kill the internal scroll trap */
  max-height: none;
  overflow-y: visible;
  overflow-x: visible;
}

/* The original scrollbar CSS is now harmless (nothing to scroll). */


/* ── 4. FIX-5: BREATHING ROOM AROUND AI SUMMARY ────────────────────────────
   Currently the AI Summary box and the article body touch directly.
   We add a margin AND a subtle "section break" so the user's eye gets
   a natural reset point — also where article_after_summary slot lives. */

.fda-active .ap-ai-box {
  margin-bottom: var(--fda-section-gap);
}

.fda-active .ap-content {
  position: relative;
}

/* A faint editorial dot separator above the body content,
   only when there's an AI summary above it. */
.fda-active .ap-ai-box + .ap-content::before,
.fda-active .ap-ai-box + .fda-slot + .ap-content::before {
  content: "•   •   •";
  display: block;
  text-align: center;
  letter-spacing: 0.4em;
  color: var(--paper-4, #555f70);
  font-size: 10px;
  margin: 0 0 var(--fda-section-gap) 0;
  opacity: 0.5;
}


/* ── 5. FIX-6: REACTIONS BOX VISUAL GROUPING ───────────────────────────────
   The reactions box and the discussion section blur together. We add
   a stronger bottom boundary on reactions and a top spacing on discussion
   to clearly mark them as separate engagement zones. */

.fda-active .ap-reactions-box {
  margin-bottom: var(--fda-section-gap);
}

.fda-active .ap-disc {
  margin-top: var(--fda-section-gap);
  padding-top: var(--gap-5, 24px);
  border-top: 1px solid var(--ink-500, rgba(255,255,255,.095));
}


/* ── 6. FIX-7: MOBILE BREAKPOINT ADJUSTMENT ────────────────────────────────
   Original sidebar collapse happens at 880px. iPads in portrait are 768px,
   but in landscape they're 1024px and the sidebar gets squeezed unreadable
   between 880-1100px. Pull the breakpoint up to 1024px. */

@media (max-width: 1024px) {
  .fda-active.fnrp-lang-en .ap-body,
  .fda-active.fnrp-lang-ar .ap-body,
  .fda-active.fnrp-lang-es .ap-body,
  .fda-active .ap-body {
    grid-template-columns: 1fr;
    gap: var(--gap-5, 24px);
  }
  .fda-active .ap-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Same for the feed page */
@media (max-width: 1024px) {
  .fda-active .fn-body {
    grid-template-columns: 1fr;
  }
  .fda-active .fn-sidebar {
    position: static;
    flex-direction: column;
  }
}


/* ── 7. INLINE-STYLE OVERRIDES (FIX-4) ─────────────────────────────────────
   article.php emits inline style="color:#94a3b8" etc. These hardcoded
   hex colors break theme switching. We use higher specificity to
   override them in light mode. (Dark mode mostly works because those
   hex values happen to be dark-theme appropriate.) */

html[data-fnrp-theme="light"] .fda-active .ap-login-prompt p,
html[data-fnrp-theme="light"] .fda-active .ap-login-prompt svg {
  color: var(--paper-3, #64748b) !important;
  stroke: var(--paper-3, #64748b) !important;
}

html[data-fnrp-theme="light"] .fda-active .ap-login-prompt a[style*="color:#3b82f6"] {
  color: var(--brass, #0d9d7c) !important;
}


/* ── 8. SKYSCRAPER RAIL LAYOUT (≥1440px) ───────────────────────────────────
   The skyscraper slots are absolutely positioned inside .fnrp-ap, using
   the padding we created in section 2. They're sticky on scroll so they
   follow the reader. Hidden by default; the JS reveals them only when
   a creative is served. */

@media (min-width: 1440px) {
  .fda-active .fnrp-ap {
    position: relative;   /* needed for absolute children */
  }

  .fda-active .fda-slot-skyscraper {
    position: absolute;
    top: 80px;
    width: 160px;
    height: 600px;
    z-index: 1;
  }
  .fda-active .fda-slot-skyscraper[data-slot-id="feed_left_skyscraper"] {
    left: 12px;
  }
  .fda-active .fda-slot-skyscraper[data-slot-id="feed_right_skyscraper"] {
    right: 12px;
  }

  /* Make them sticky after they scroll into view */
  .fda-active .fda-slot-skyscraper.fda-sticky {
    position: sticky;
    top: 80px;
  }
}

/* On screens < 1440px, skyscrapers don't exist (CSS hides them via the
   visibility logic in ad-slots.css and the JS won't request them). */
@media (max-width: 1439px) {
  .fda-active .fda-slot-skyscraper {
    display: none;
  }
}


/* ── 9. FEED PAGE — TOP LEADERBOARD SLOT POSITIONING ──────────────────────
   The slot sits between the price strip and the filter tabs. We
   reserve max-height so when no creative serves, the page looks the same.
   The slot itself uses the .fda-slot-empty class to collapse. */

.fda-active #fda-feed-top-slot-container {
  width: 100%;
  max-width: 1400px;
  margin: 16px auto 0;
  padding: 0 var(--gap-6, 32px);
  display: flex;
  justify-content: center;
}


/* ── 10. FEED PAGE — IN-FEED NATIVE SLOTS ─────────────────────────────────
   These slots are styled to LOOK LIKE news cards (.fn-item) so they
   integrate naturally. The "Sponsored" label is the ONLY visual
   differentiator — required by best practices and trust. */

.fda-active .fda-slot-native[data-slot-id^="feed_inline_"] {
  /* Match .fn-item padding/border exactly */
  padding: 22px 4px 22px 16px;
  border-top: 1px solid rgba(255,255,255,.04);
  position: relative;
  margin: 0;
}
.fda-active.fnrp-rtl .fda-slot-native[data-slot-id^="feed_inline_"] {
  padding: 22px 16px 22px 4px;
}


/* ── 11. ARTICLE — IN-CONTENT SLOT FLOW ───────────────────────────────────
   Mid-content and after-reactions slots match the article rhythm.
   They get a subtle bg to differentiate as sponsored without screaming. */

.fda-active .fda-slot[data-slot-id^="article_"] {
  margin: var(--fda-section-gap) 0;
}

.fda-active .fda-slot-native[data-slot-id="article_after_reactions"],
.fda-active .fda-slot-native[data-slot-id="article_after_summary"] {
  background: var(--ink-800, #121823);
  border: 1px solid var(--ink-500, rgba(255,255,255,.095));
  border-radius: var(--radius-md, 8px);
  padding: 16px;
}


/* ── 12. LIGHT THEME — adjust slot styling for light mode ─────────────────*/

html[data-fnrp-theme="light"] .fda-active .fda-slot-native[data-slot-id="article_after_reactions"],
html[data-fnrp-theme="light"] .fda-active .fda-slot-native[data-slot-id="article_after_summary"] {
  background: var(--ink-800, #ffffff);
  border-color: var(--ink-500, rgba(15,23,42,.08));
}

html[data-fnrp-theme="light"] .fda-active .ap-disc {
  border-top-color: var(--ink-500, rgba(15,23,42,.08));
}


/* ── 13. UTILITY: HIDE EMPTY SLOTS (zero CLS) ─────────────────────────────
   When a slot has no creative, it gets the .fda-slot-empty class.
   We collapse it to zero height so there's no visible gap. The
   transition makes the eventual fill-in smooth, not jarring. */

.fda-active .fda-slot {
  transition: var(--fda-slot-transition);
}

.fda-active .fda-slot.fda-slot-empty {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}