/* ==========================================================================
   Trending Society Core — Global Overrides
   Loaded on all front-end pages.
   Version 1.2.0
   ========================================================================== */

/* ==========================================================================
   Sticky Header — keep dark on scroll (Newspaper / TagDiv Composer override)
   
   Root cause: The Newspaper theme uses .tdc-row-is-sticky rows for the
   sticky header. The background is set via a child .td-element-style
   whose :after pseudo-element overlays an off-white rgb(244,244,244)
   on top of the near-black rgb(10,10,10) base. This CSS suppresses
   that overlay and forces everything solid black.
   ========================================================================== */

/* 1. Force the sticky row background to solid black */
.tdc-row-is-sticky,
.tdc-row-is-sticky.tdc-rist-top-active {
  background-color: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2. Override the td-element-style layer AND its :after/:before pseudo-elements
      that overlay off-white rgb(244,244,244) on top of the dark base */
.tdc-row-is-sticky .td-element-style,
.tdc-row-is-sticky .td-element-style:before,
.tdc-row-is-sticky .td-element-style:after {
  background-color: #000 !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 3. Clear inner row/column backgrounds so the black shows through */
.tdc-row-is-sticky .vc_row,
.tdc-row-is-sticky .wpb_column,
.tdc-row-is-sticky .vc_column_container {
  background-color: transparent !important;
  background-image: none !important;
}

/* 4. Suppress blue accent :after on menu links inside sticky header */
.tdc-row-is-sticky .sf-menu > li > a:after,
.tdc-row-is-sticky a:after {
  background-color: transparent !important;
}

/* 5. Wrapper fallback */
.td-header-desktop-sticky-wrap,
.td-header-mobile-sticky-wrap {
  background-color: #000 !important;
}

/* ==========================================================================
   FAQ Section — style <dl>/<dt>/<dd> pairs output by the article pipeline.
   The pipeline wraps FAQ items in a <dl> list with <dt> for questions
   and <dd> for answers. Without these overrides the Newspaper theme
   renders them with zero spacing and no visual distinction.
   ========================================================================== */

.td-post-content dl {
  margin: 1.5em 0;
  padding: 1.25em 1.5em;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  border-left: 3px solid var(--flavor-primary, #2563eb);
}

.td-post-content dt {
  font-weight: 700;
  font-size: 1.05em;
  margin-top: 1.25em;
  margin-bottom: 0.35em;
  color: #111;
}

.td-post-content dt:first-child {
  margin-top: 0;
}

.td-post-content dd {
  margin-left: 0;
  margin-bottom: 0.75em;
  padding-left: 0;
  line-height: 1.7;
  color: #333;
}

/* ==========================================================================
   FAQ Section — <details>/<summary> (current pipeline format)
   The pipeline wraps FAQ in collapsible <details> elements with
   <summary> for questions. Without overrides the Newspaper theme
   renders summary text smaller than body text.
   ========================================================================== */

.td-post-content details {
  margin-bottom: 0.75em;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.75em;
}

.td-post-content details:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.td-post-content details summary {
  font-weight: 700;
  font-size: 1.1em;
  color: #111;
  cursor: pointer;
  padding: 0.5em 0;
  list-style: none; /* remove default triangle */
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Custom chevron indicator */
.td-post-content details summary::before {
  content: "▸";
  font-size: 0.85em;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.td-post-content details[open] summary::before {
  transform: rotate(90deg);
}

/* Remove default marker in Safari/Chrome */
.td-post-content details summary::-webkit-details-marker {
  display: none;
}

.td-post-content details > p,
.td-post-content details > div {
  padding: 0.25em 0 0.5em 1.35em;
  line-height: 1.7;
  color: #333;
  font-size: 1em;
}

/* ==========================================================================
   Source Footer — small separator line at the bottom of articles
   linking back to the original source. Added by the pipeline via
   the source-footer class on a <p> or <div>.
   ========================================================================== */

.td-post-content .ts-source-footer {
  border-top: 1px solid #e5e7eb;
  margin-top: 2em;
  padding-top: 0.75em;
  font-size: 0.85em;
  color: #6b7280;
}

.td-post-content .ts-source-footer a {
  color: #6b7280;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.td-post-content .ts-source-footer a:hover {
  color: #374151;
}

/* ============================
   Source Citations (inline)
   Dotted underline distinguishes source credits from entity deep links.
   Entity links use default theme styling (solid underline).
   ============================ */
.td-post-content a.ts-source-cite {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.td-post-content a.ts-source-cite:hover {
  text-decoration-style: solid;
  opacity: 1;
}