/**
 * Content Blocks System
 * Sport Personalities - Astra Child Theme
 * Version: 1.0.0
 *
 * Professional content blocks for article content highlighting
 * Designed for sports psychology and personality profiling articles
 * WCAG 2.1 AA Compliant
 */

/* ===== SHARED BLOCK STYLES ===== */
/* Base styles for all content blocks */
.insight-block,
.pro-tip,
.warning-box,
.case-study,
.research-note,
.quick-wins,
.emphasis-box {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: var(--sp-block-border-radius, 8px);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Heading styles inside blocks */
.insight-block h3,
.pro-tip h3,
.warning-box h3,
.case-study h3,
.research-note h3,
.quick-wins h3,
.emphasis-box h3 {
  margin: 0 0 1rem 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

/* Paragraph spacing inside blocks */
.insight-block p,
.pro-tip p,
.warning-box p,
.case-study p,
.research-note p,
.quick-wins p,
.emphasis-box p {
  margin-bottom: 0.75rem;
}

.insight-block p:last-child,
.pro-tip p:last-child,
.warning-box p:last-child,
.case-study p:last-child,
.research-note p:last-child,
.quick-wins p:last-child,
.emphasis-box p:last-child {
  margin-bottom: 0;
}

/* List styles inside blocks */
.insight-block ul,
.pro-tip ul,
.warning-box ul,
.case-study ul,
.research-note ul,
.quick-wins ul,
.emphasis-box ul,
.insight-block ol,
.pro-tip ol,
.warning-box ol,
.case-study ol,
.research-note ol,
.quick-wins ol,
.emphasis-box ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.insight-block li,
.pro-tip li,
.warning-box li,
.case-study li,
.research-note li,
.quick-wins li,
.emphasis-box li {
  margin-bottom: 0.5rem;
}

/* Subtle hover effect for interactivity */
.insight-block:hover,
.pro-tip:hover,
.warning-box:hover,
.case-study:hover,
.research-note:hover,
.quick-wins:hover,
.emphasis-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== INSIGHT BLOCK ===== */
/* For psychological explanations and mechanisms */
/* Color: Deep Purple - represents depth of understanding */
.insight-block {
  background: linear-gradient(135deg, #f3f0ff 0%, #faf8ff 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-insight-color, #7c3aed);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.insight-block h3 {
  color: #5b21b6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.insight-block h3::before {
  content: "💡";
  font-size: 1.25em;
  flex-shrink: 0;
}

.insight-block strong {
  color: #6d28d9;
  font-weight: var(--font-semibold);
}

/* ===== PRO TIP ===== */
/* For actionable tactics and professional advice */
/* Color: Emerald Green - represents growth and action */
.pro-tip {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf9 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-protip-color, #10b981);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

.pro-tip h3 {
  color: #047857;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pro-tip h3::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--sp-block-protip-color, #10b981);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.pro-tip strong {
  color: #059669;
  font-weight: var(--font-semibold);
}

/* ===== WARNING BOX ===== */
/* For common mistakes and pitfalls */
/* Color: Amber/Orange - represents caution */
.warning-box {
  background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-warning-color, #f59e0b);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.warning-box h3 {
  color: #d97706;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.warning-box h3::before {
  content: "⚠";
  font-size: 1.25em;
  color: #f59e0b;
  flex-shrink: 0;
}

.warning-box strong {
  color: #d97706;
  font-weight: var(--font-semibold);
}

/* ===== CASE STUDY ===== */
/* For athlete examples and real-world stories */
/* Color: Blue - represents trust and real-world application */
.case-study {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-casestudy-color, #3b82f6);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  border-top: 1px solid rgba(59, 130, 246, 0.15);
  border-right: 1px solid rgba(59, 130, 246, 0.15);
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.case-study h3 {
  color: #1e40af;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.case-study h3::before {
  content: "📊";
  font-size: 1.25em;
  flex-shrink: 0;
}

.case-study strong {
  color: #2563eb;
  font-weight: var(--font-semibold);
}

/* Special styling for athlete name/quote */
.case-study .athlete-name {
  font-weight: var(--font-semibold);
  color: #1e40af;
  font-size: var(--text-lg);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  font-style: italic;
}

/* ===== RESEARCH NOTE ===== */
/* For scientific studies and data */
/* Color: Slate Gray - represents objectivity and science */
.research-note {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-research-color, #64748b);
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1);
  border-top: 1px solid rgba(100, 116, 139, 0.15);
  border-right: 1px solid rgba(100, 116, 139, 0.15);
  border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

.research-note h3 {
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.research-note h3::before {
  content: "🔬";
  font-size: 1.25em;
  flex-shrink: 0;
}

.research-note strong {
  color: #475569;
  font-weight: var(--font-semibold);
}

/* Research citation styling */
.research-note .citation {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(100, 116, 139, 0.2);
}

/* ===== QUICK WINS ===== */
/* For immediate actionable tips */
/* Color: Teal - represents quick action and clarity */
.quick-wins {
  background: linear-gradient(135deg, #f0fdfa 0%, #ecfdf5 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-quickwins-color, #14b8a6);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.1);
}

.quick-wins h3 {
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-wins h3::before {
  content: "⚡";
  font-size: 1.25em;
  color: #14b8a6;
  flex-shrink: 0;
}

.quick-wins strong {
  color: #0d9488;
  font-weight: var(--font-semibold);
}

/* Enhanced list styling for quick wins */
.quick-wins ul li {
  position: relative;
  padding-left: 1.5rem;
}

.quick-wins ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #14b8a6;
  font-weight: var(--font-bold);
}

/* ===== EMPHASIS BOX ===== */
/* For critical points and key takeaways */
/* Color: Brand Red - represents importance and brand identity */
.emphasis-box {
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border-left: var(--sp-block-border-width, 4px) solid var(--sp-block-emphasis-color, #b60f0a);
  box-shadow: 0 2px 8px rgba(182, 15, 10, 0.1);
  border-top: 1px solid rgba(182, 15, 10, 0.15);
  border-right: 1px solid rgba(182, 15, 10, 0.15);
  border-bottom: 1px solid rgba(182, 15, 10, 0.15);
}

.emphasis-box h3 {
  color: #991b1b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.emphasis-box h3::before {
  content: "★";
  font-size: 1.25em;
  color: #b60f0a;
  flex-shrink: 0;
}

.emphasis-box strong {
  color: #b91c1c;
  font-weight: var(--font-semibold);
}

/* Special styling for key takeaway text */
.emphasis-box .key-takeaway {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: #991b1b;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(182, 15, 10, 0.2);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet optimization */
@media (max-width: 1024px) {
  .insight-block,
  .pro-tip,
  .warning-box,
  .case-study,
  .research-note,
  .quick-wins,
  .emphasis-box {
    margin: 1.75rem 0;
    padding: 1.25rem;
  }
}

/* Mobile optimization */
@media (max-width: 767px) {
  .insight-block,
  .pro-tip,
  .warning-box,
  .case-study,
  .research-note,
  .quick-wins,
  .emphasis-box {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: 6px;
  }

  .insight-block h3,
  .pro-tip h3,
  .warning-box h3,
  .case-study h3,
  .research-note h3,
  .quick-wins h3,
  .emphasis-box h3 {
    font-size: var(--text-lg);
  }

  /* Reduce icon size on mobile */
  .insight-block h3::before,
  .warning-box h3::before,
  .case-study h3::before,
  .research-note h3::before,
  .quick-wins h3::before,
  .emphasis-box h3::before {
    font-size: 1.1em;
  }

  /* No hover effects on mobile (touch devices) */
  .insight-block:hover,
  .pro-tip:hover,
  .warning-box:hover,
  .case-study:hover,
  .research-note:hover,
  .quick-wins:hover,
  .emphasis-box:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .insight-block,
  .pro-tip,
  .warning-box,
  .case-study,
  .research-note,
  .quick-wins,
  .emphasis-box {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    background: white !important;
  }

  .insight-block:hover,
  .pro-tip:hover,
  .warning-box:hover,
  .case-study:hover,
  .research-note:hover,
  .quick-wins:hover,
  .emphasis-box:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus styles for keyboard navigation */
.insight-block:focus-within,
.pro-tip:focus-within,
.warning-box:focus-within,
.case-study:focus-within,
.research-note:focus-within,
.quick-wins:focus-within,
.emphasis-box:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .insight-block,
  .pro-tip,
  .warning-box,
  .case-study,
  .research-note,
  .quick-wins,
  .emphasis-box {
    transition: none;
  }

  .insight-block:hover,
  .pro-tip:hover,
  .warning-box:hover,
  .case-study:hover,
  .research-note:hover,
  .quick-wins:hover,
  .emphasis-box:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .insight-block,
  .pro-tip,
  .warning-box,
  .case-study,
  .research-note,
  .quick-wins,
  .emphasis-box {
    border: 2px solid currentColor;
  }
}

/* ===== NESTED BLOCK SUPPORT ===== */
/* Handle blocks nested within article content */
.entry-content .insight-block,
.entry-content .pro-tip,
.entry-content .warning-box,
.entry-content .case-study,
.entry-content .research-note,
.entry-content .quick-wins,
.entry-content .emphasis-box,
.article-content .insight-block,
.article-content .pro-tip,
.article-content .warning-box,
.article-content .case-study,
.article-content .research-note,
.article-content .quick-wins,
.article-content .emphasis-box {
  max-width: 100%;
  clear: both;
}

/* ===== UTILITY CLASSES ===== */

/* For blocks without headings */
.insight-block.no-heading,
.pro-tip.no-heading,
.warning-box.no-heading,
.case-study.no-heading,
.research-note.no-heading,
.quick-wins.no-heading,
.emphasis-box.no-heading {
  padding-top: 1.5rem;
}

/* Compact variant for shorter content */
.insight-block.compact,
.pro-tip.compact,
.warning-box.compact,
.case-study.compact,
.research-note.compact,
.quick-wins.compact,
.emphasis-box.compact {
  padding: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 767px) {
  .insight-block.compact,
  .pro-tip.compact,
  .warning-box.compact,
  .case-study.compact,
  .research-note.compact,
  .quick-wins.compact,
  .emphasis-box.compact {
    padding: 0.875rem;
    margin: 1.25rem 0;
  }
}