/**
 * DIT TrendStudio Article Styles
 * Frontend + editor styles for generated magazine content
 *
 * @package DIT_TrendStudio
 * @MODIFIED 2025-12-13 - Created for frontend article styling
 * @MODIFIED 2025-12-14 - Merged design tokens, utility classes, editor parity
 */

/* ==========================================================================
   Design Tokens
   Extends Neve theme CSS variables with article-specific values
   ========================================================================== */

:root {
  /* Typography - extends Neve */
  --dit-ts-font-display: var(--nv-fallback-ff, Georgia, serif);
  --dit-ts-font-body: var(--nv-body-font-family, Georgia, serif);
  --dit-ts-font-ui: var(--nv-headings-font-family,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif);

  /* Type scale (Major Third 1.25) */
  --dit-ts-text-sm: 0.875rem;
  --dit-ts-text-base: 1rem;
  --dit-ts-text-lg: 1.25rem;
  --dit-ts-text-xl: 1.563rem;
  --dit-ts-text-2xl: 1.953rem;

  /* Spacing rhythm */
  --dit-ts-space-xs: 0.25rem;
  --dit-ts-space-sm: 0.5rem;
  --dit-ts-space-md: 1rem;
  --dit-ts-space-lg: 2rem;
  --dit-ts-space-xl: 3rem;

  /* Colors */
  --dit-ts-color-text: #1a1a1a;
  --dit-ts-color-muted: #666;
  --dit-ts-color-accent: #c41e3a;
  --dit-ts-color-border: #e0e0e0;
  --dit-ts-color-surface: #f8f8f8;
}

/* ==========================================================================
   Article Wrapper (core/group with className)
   ========================================================================== */

.dit-ts-article {
  font-family: var(--dit-ts-font-body);
  font-size: var(--dit-ts-text-base);
  line-height: 1.6;
  color: var(--dit-ts-color-text);
  max-width: 720px;
}

.dit-ts-article h2 {
  font-family: var(--dit-ts-font-ui);
  font-size: var(--dit-ts-text-xl);
  font-weight: 600;
  margin: var(--dit-ts-space-lg) 0 var(--dit-ts-space-md);
  color: var(--dit-ts-color-text);
}

.dit-ts-article p {
  margin-bottom: var(--dit-ts-space-md);
}

.dit-ts-article a {
  color: var(--dit-ts-color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dit-ts-article a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Utility Class 1: Dek / Subhead
   Apply to: core/paragraph with className="dit-ts-dek"
   ========================================================================== */

.dit-ts-dek {
  font-size: var(--dit-ts-text-lg);
  font-style: italic;
  color: var(--dit-ts-color-muted);
  line-height: 1.5;
  margin-bottom: var(--dit-ts-space-lg);
  padding-bottom: var(--dit-ts-space-md);
  border-bottom: 1px solid var(--dit-ts-color-border);
}

/* ==========================================================================
   Utility Class 2: Accent Pullquote
   Apply to: core/pullquote with className="dit-ts-pullquote-accent"
   ========================================================================== */

.dit-ts-pullquote-accent {
  border-left: 4px solid var(--dit-ts-color-accent);
  border-top: none;
  border-bottom: none;
  padding: var(--dit-ts-space-md) var(--dit-ts-space-lg);
  margin: var(--dit-ts-space-lg) 0;
}

.dit-ts-pullquote-accent blockquote {
  font-size: var(--dit-ts-text-xl);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.dit-ts-pullquote-accent cite {
  display: block;
  margin-top: var(--dit-ts-space-sm);
  font-size: var(--dit-ts-text-sm);
  font-style: normal;
  color: var(--dit-ts-color-muted);
}



/* ==========================================================================
   Utility Class 4: Source Item
   Apply to: core/paragraph with className="dit-ts-source-item"
   ========================================================================== */

.dit-ts-source-item {
  font-size: var(--dit-ts-text-sm);
  margin-bottom: var(--dit-ts-space-xs);
  padding-left: var(--dit-ts-space-md);
  position: relative;
}

.dit-ts-source-item::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--dit-ts-color-muted);
}

/* ==========================================================================
   Utility Class 5: Byline
   Apply to: core/paragraph with className="dit-ts-byline"
   ========================================================================== */

.dit-ts-byline {
  font-size: var(--dit-ts-text-sm);
  color: var(--dit-ts-color-muted);
  margin-bottom: var(--dit-ts-space-lg);
}

.dit-ts-byline a {
  color: inherit;
  font-weight: 500;
}

/* ==========================================================================
   Utility Class 6: Drop Cap Enhancement
   Enhances WordPress built-in .has-drop-cap
   ========================================================================== */

.dit-ts-article .has-drop-cap:not(:focus)::first-letter {
  font-family: var(--dit-ts-font-display);
  font-size: 3.5em;
  font-weight: 400;
  line-height: 0.8;
  margin-right: 0.1em;
  color: var(--dit-ts-color-accent);
  float: left;
}

/* ==========================================================================
   Editorial Callouts (v1.6.0)
   ========================================================================== */

.dit-ts-callout {
  margin: var(--dit-ts-space-lg) 0;
  padding: var(--dit-ts-space-lg);
  background: #fff;
  border: 2px solid var(--dit-ts-color-accent);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--dit-ts-color-border);
  position: relative;
}

.dit-ts-callout::before {
  content: "EXPERT NOTE";
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--dit-ts-color-accent);
  color: #fff;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.dit-ts-callout-title {
  font-family: var(--dit-ts-font-ui);
  font-size: var(--dit-ts-text-lg);
  margin-bottom: var(--dit-ts-space-sm) !important;
  color: var(--dit-ts-color-accent);
  text-transform: uppercase;
}

.dit-ts-callout p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Verification Badges (Editor Only)
   ========================================================================== */

.dit-ts-unverified-badge,
.dit-ts-report-claims-badge {
  display: inline-block;
  font-family: var(--dit-ts-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-right: var(--dit-ts-space-sm);
  vertical-align: middle;
}

.dit-ts-unverified-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.dit-ts-report-claims-badge {
  background: #fce7f3;
  color: #9d174d;
  border: 1px solid #f9a8d4;
}

/* ==========================================================================
   Editor Parity
   Ensures block editor matches frontend
   ========================================================================== */

.editor-styles-wrapper .dit-ts-article {
  font-family: var(--dit-ts-font-body);
  font-size: var(--dit-ts-text-base);
  line-height: 1.6;
  color: var(--dit-ts-color-text);
}

.editor-styles-wrapper .dit-ts-dek {
  font-size: var(--dit-ts-text-lg);
  font-style: italic;
  color: var(--dit-ts-color-muted);
}

.editor-styles-wrapper .dit-ts-pullquote-accent {
  border-left: 4px solid var(--dit-ts-color-accent);
}

.editor-styles-wrapper .dit-ts-sources {
  background: var(--dit-ts-color-surface);
  border: 1px solid var(--dit-ts-color-border);
}

.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter {
  color: var(--dit-ts-color-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
  .dit-ts-dek {
    font-size: 1.1em;
  }

  .dit-ts-sources {
    padding: var(--dit-ts-space-sm);
  }

  .dit-ts-article .has-drop-cap:not(:focus)::first-letter {
    font-size: 2.5em;
  }

  .dit-ts-pullquote-accent blockquote {
    font-size: var(--dit-ts-text-lg);
  }
}

/* ==========================================================================
   Content Block Styles (v1.8.1)
   ========================================================================== */

/* ==========================================================================
   Content Block Styles (v1.8.1 - Premium Card UI)
   ========================================================================== */

.dit-ts-content-block {
  margin: var(--dit-ts-space-lg) 0;
  padding: var(--dit-ts-space-md) 0;
  /* @MODIFIED 2026-01-19 - "Editorial Light" Style: Transparent bg, no shadow, just accent lines */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

/* Accent top border for specific types */
.dit-ts-product_picks {
  border-top: 4px solid #0ea5e9;
}

/* Sky-500 */
.dit-ts-application_tips {
  border-top: 4px solid #8b5cf6;
}

/* Violet-500 */
.dit-ts-skin_type_guidance {
  border-top: 4px solid #ec4899;
}

/* Pink-500 */
.dit-ts-trend_summary {
  border-top: 4px solid #f59e0b;
}

/* Amber-500 */
.dit-ts-what_to_buy {
  border-top: 4px solid #10b981;
}

/* Emerald-500 */

.dit-ts-content-block h3 {
  margin-top: 0;
  margin-bottom: var(--dit-ts-space-md);
  color: var(--dit-ts-color-text);
  font-family: var(--dit-ts-font-ui);
  font-size: 1.125rem;
  /* lg */
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dit-ts-color-surface);
  padding-bottom: var(--dit-ts-space-sm);
  display: block;
  /* Full width border */
}

/* Remove the old inline-block style */
.dit-ts-content-block ul {
  padding-left: 1.25rem;
  margin-top: 0;
  margin-bottom: 0;
}

.dit-ts-content-block li {
  margin-bottom: var(--dit-ts-space-sm);
  line-height: 1.6;
}

.dit-ts-content-block li:last-child {
  margin-bottom: 0;
}

/* Strong text inside lists (e.g. product names) */
.dit-ts-content-block li strong {
  color: #111827;
  /* Gray-900 */
  font-weight: 600;
}

/* ==========================================================================
   Verdict Box Styles (v1.9.0)
   ========================================================================== */

.dit-ts-verdict-box {
  margin: var(--dit-ts-space-lg) 0;
  padding: var(--dit-ts-space-lg);
  border-radius: 8px;
  border-left: 6px solid #d97706;
  /* Amber-600 to match luminous-vivid-amber */
}

/* Ensure headings inside verdict box don't behave like section headings */
.dit-ts-verdict-box h2,
.dit-ts-verdict-box h3 {
  margin-top: 0;
  font-size: var(--dit-ts-text-xl);
  color: #78350f;
  /* Amber-900 */
}

/* ==========================================================================
   Table Styles (Core Block Support)
   ========================================================================== */

/* Fallback for is-style-stripes if theme doesn't support it */
.dit-ts-article .is-style-stripes table,
.dit-ts-article .is-style-stripes {
  border-collapse: collapse;
  width: 100%;
}

.dit-ts-article .is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--dit-ts-color-surface);
}

.dit-ts-article .wp-block-table th,
.dit-ts-article .wp-block-table td {
  padding: var(--dit-ts-space-sm);
  border-bottom: 1px solid var(--dit-ts-color-border);
}

.dit-ts-article .wp-block-table th {
  font-weight: 600;
  text-align: left;
}