/**
 * Framework Pages Styling
 *
 * Applies landing page visual treatment to framework content pages
 * (framework-overview, executive-summary, validation, use-cases)
 * while maintaining Quarto document structure with sidebar navigation.
 */

/* ============================================
   FRAMEWORK PAGE BODY STYLING
   ============================================ */

body.framework-page {
  font-family: var(--font-body) !important;
  color: var(--color-text-primary) !important;
  line-height: var(--leading-normal) !important;
  background: linear-gradient(180deg,
    rgba(248, 248, 248, 1) 0%,
    #FFFFFF 30%,
    rgba(248, 248, 248, 1) 100%
  ) !important;
}

/* ============================================
   NAVBAR STYLING - MATCH LANDING PAGE
   ============================================ */

/* Navbar container */
body.framework-page .navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10, 31, 68, 0.08);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) 0;
}

/* Navbar branding and title */
body.framework-page .navbar-brand,
body.framework-page .navbar-title {
  color: var(--color-navy-900) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

/* Navbar navigation spacing */
body.framework-page .navbar-nav {
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Navbar links */
body.framework-page .navbar-nav .nav-link {
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary) !important;
  transition: background var(--transition-base), color var(--transition-base);
  text-decoration: none !important;
}

/* Navbar link hover state */
body.framework-page .navbar-nav .nav-link:hover,
body.framework-page .navbar-nav .nav-link:focus {
  background: rgba(10, 31, 68, 0.08);
  color: var(--color-navy-900) !important;
  text-decoration: none !important;
}

/* Navbar active link */
body.framework-page .navbar-nav .nav-link.active {
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--color-navy-900) !important;
  box-shadow: var(--shadow-sm);
}

/* Color scheme toggle */
body.framework-page .quarto-navbar-tools .quarto-color-scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  padding: var(--space-2);
  color: var(--color-text-secondary) !important;
}

/* ============================================
   SIDEBAR NAVIGATION STYLING
   ============================================ */

/* Sidebar container */
body.framework-page .sidebar {
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* Sidebar titles and section headers */
body.framework-page .sidebar-title,
body.framework-page .sidebar .sidebar-section-heading {
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900) !important;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

/* Sidebar navigation links - OVERRIDE PURPLE */
body.framework-page .sidebar a,
body.framework-page .sidebar .sidebar-item a,
body.framework-page .sidebar-item-text,
body.framework-page .sidebar-link {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  font-weight: var(--weight-normal);
  transition: color var(--transition-base), background var(--transition-base);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  display: block;
}

/* Sidebar link hover state */
body.framework-page .sidebar a:hover,
body.framework-page .sidebar .sidebar-item a:hover {
  background: rgba(10, 31, 68, 0.06) !important;
  color: var(--color-navy-900) !important;
  text-decoration: none !important;
}

/* Sidebar active/current page link */
body.framework-page .sidebar a.active,
body.framework-page .sidebar .sidebar-item.active > a,
body.framework-page .sidebar .sidebar-item.active .sidebar-item-text {
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--color-navy-900) !important;
  font-weight: var(--weight-medium) !important;
  border-left: 3px solid var(--color-gold-medium);
}

/* Remove bullets from sidebar and navigation */
body.framework-page .sidebar ul,
body.framework-page .sidebar li,
body.framework-page .navbar-nav ul,
body.framework-page .navbar-nav li,
body.framework-page .navbar-nav .nav-item {
  list-style: none !important;
  list-style-type: none !important;
}

body.framework-page .sidebar li::marker,
body.framework-page .navbar-nav li::marker {
  content: '' !important;
  display: none !important;
}

/* Main content area styling */
body.framework-page #quarto-document-content {
  max-width: 900px !important;
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-16) !important;
}

/* Override Quarto container defaults */
body.framework-page .page-columns {
  background: transparent !important;
}

body.framework-page main {
  background: transparent !important;
}

/* ============================================
   FRAMEWORK PAGE HEADER (Title Block)
   ============================================ */

body.framework-page .quarto-title {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border);
}

body.framework-page .title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

body.framework-page .subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

/* ============================================
   FRAMEWORK CONTENT SECTIONS
   ============================================ */

body.framework-page .framework-intro {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(139, 92, 246, 0.05) 100%);
  border-left: 4px solid #3b82f6;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

body.framework-page .framework-intro p {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

body.framework-page section {
  margin: var(--space-10) 0;
}

body.framework-page h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-navy-900);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  letter-spacing: -0.01em;
}

body.framework-page h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-800);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

body.framework-page h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-700);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

body.framework-page p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

body.framework-page strong {
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900);
}

/* ============================================
   FRAMEWORK CALLOUTS
   ============================================ */

body.framework-page .callout {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  border-left-width: 4px;
  background: var(--callout-bg);
  border-left-color: var(--callout-color);
  box-shadow: var(--shadow-sm);
}

body.framework-page .callout-important {
  --callout-bg: rgba(59, 130, 246, 0.08);
  --callout-color: #3b82f6;
}

body.framework-page .callout-tip {
  --callout-bg: rgba(16, 185, 129, 0.08);
  --callout-color: #10b981;
}

body.framework-page .callout-note {
  --callout-bg: rgba(139, 92, 246, 0.08);
  --callout-color: #8b5cf6;
}

body.framework-page .callout-warning {
  --callout-bg: rgba(245, 158, 11, 0.08);
  --callout-color: #f59e0b;
}

body.framework-page .callout-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--callout-color);
  margin-bottom: var(--space-2);
}

/* ============================================
   FRAMEWORK FEATURE GRIDS
   ============================================ */

body.framework-page .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

body.framework-page .feature-card {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

body.framework-page .feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-navy-300);
}

body.framework-page .feature-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-2xl);
  color: white;
}

body.framework-page .feature-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

body.framework-page .feature-card-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ============================================
   FRAMEWORK LISTS
   ============================================ */

body.framework-page ul:not([class]),
body.framework-page ol:not([class]) {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

body.framework-page li:not([class]) {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

body.framework-page .checklist {
  list-style: none;
  padding-left: 0;
  margin: var(--space-6) 0;
}

body.framework-page .checklist li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

body.framework-page .checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

/* ============================================
   FRAMEWORK TABLES
   ============================================ */

body.framework-page table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-base);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

body.framework-page thead {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
}

body.framework-page th {
  padding: var(--space-4);
  text-align: left;
  font-weight: var(--weight-semibold);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

body.framework-page td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

body.framework-page tbody tr:last-child td {
  border-bottom: none;
}

body.framework-page tbody tr:hover {
  background: rgba(59, 130, 246, 0.04);
}

/* ============================================
   FRAMEWORK CODE & FORMULAS
   ============================================ */

body.framework-page code:not([class]) {
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: var(--font-mono);
}

body.framework-page pre {
  background: var(--color-navy-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  overflow-x: auto;
}

body.framework-page pre code {
  background: none;
  color: var(--color-navy-900);
  padding: 0;
}

/* ============================================
   FRAMEWORK BUTTONS & LINKS
   ============================================ */

body.framework-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  text-decoration: none;
  cursor: pointer;
  border: var(--border-width) solid transparent;
}

body.framework-page .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: var(--shadow-md);
}

body.framework-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.1);
}

body.framework-page .btn-secondary {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-navy-900);
}

body.framework-page .btn-secondary:hover {
  background: var(--color-navy-50);
  border-color: var(--color-navy-300);
  transform: translateY(-2px);
}

body.framework-page a:not([class]) {
  color: #3b82f6;
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
}

body.framework-page a:not([class]):hover {
  color: #2563eb;
  text-decoration: underline;
}

/* ============================================
   FRAMEWORK HORIZONTAL RULES
   ============================================ */

body.framework-page hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%
  );
  margin: var(--space-12) 0;
}

/* ============================================
   VISUAL ENHANCEMENTS FOR USE CASES
   ============================================ */

/* Comparison Cards - Before/After or Traditional vs Artalytics */
body.framework-page .comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

body.framework-page .comparison-card {
  background: var(--color-surface-raised);
  border-left: 4px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

body.framework-page .comparison-card.before {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), transparent);
}

body.framework-page .comparison-card.after {
  border-left-color: #10b981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), transparent);
}

body.framework-page .comparison-card-header {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
  opacity: 0.7;
}

body.framework-page .comparison-card-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* Process Step Cards - Numbered Visual Workflow */
body.framework-page .process-steps {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-8) 0;
  counter-reset: step-counter;
}

body.framework-page .process-step {
  position: relative;
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  padding-left: calc(var(--space-6) + 60px);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid #3b82f6;
  counter-increment: step-counter;
}

body.framework-page .process-step::before {
  content: counter(step-counter);
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-md);
}

body.framework-page .process-step-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

body.framework-page .process-step-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* Feature Highlight Panels - Replacing Long Bullet Lists */
body.framework-page .feature-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

body.framework-page .feature-highlight {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition-base);
}

body.framework-page .feature-highlight:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59, 130, 246, 0.4);
}

body.framework-page .feature-highlight-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

body.framework-page .feature-highlight-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

body.framework-page .feature-highlight-description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Enhanced Checkmark Styling for Key Benefits */
body.framework-page .benefits-list {
  list-style: none;
  padding-left: 0;
  margin: var(--space-6) 0;
}

body.framework-page .benefits-list li {
  position: relative;
  padding-left: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
}

body.framework-page .benefits-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   PAGE NAVIGATION FOOTER
   ============================================ */

body.framework-page .page-navigation-footer {
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-10) 0 var(--space-6) 0;
}

body.framework-page .page-navigation-footer h2 {
  font-size: var(--text-xl);
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  border-bottom: none;
  color: var(--color-navy-900);
}

body.framework-page .page-navigation-footer p {
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

body.framework-page .page-navigation-footer p:last-child {
  margin-bottom: 0;
}

body.framework-page .page-navigation-footer a {
  color: #3b82f6;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: all var(--transition-base);
}

body.framework-page .page-navigation-footer a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  body.framework-page .title {
    font-size: var(--text-3xl);
  }

  body.framework-page h2 {
    font-size: var(--text-2xl);
  }

  body.framework-page h3 {
    font-size: var(--text-xl);
  }

  body.framework-page .feature-grid {
    grid-template-columns: 1fr;
  }

  body.framework-page #quarto-document-content {
    padding-top: var(--space-4);
  }

  /* Responsive Visual Components */
  body.framework-page .comparison-grid,
  body.framework-page .feature-highlights {
    grid-template-columns: 1fr;
  }

  body.framework-page .process-step {
    padding-left: var(--space-6);
    padding-top: calc(var(--space-5) + 60px);
  }

  body.framework-page .process-step::before {
    left: 50%;
    top: var(--space-4);
    transform: translateX(-50%);
  }
}

/* ============================================
   STATUS BADGES (validation protocols + other status indicators)
   ============================================ */

.status-badge {
  display: inline-block;
  padding: 0.18em 0.7em 0.22em;
  border-radius: 9999px;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: 0.01em;
  vertical-align: middle;
  border: 1px solid transparent;
}

.status-badge.status-designed {
  background: rgba(39, 97, 227, 0.10);
  color: #1e4778;
  border-color: rgba(39, 97, 227, 0.3);
}

.status-badge.status-gated {
  background: rgba(218, 165, 32, 0.14);
  color: #8B6914;
  border-color: rgba(218, 165, 32, 0.4);
}

.status-badge.status-partnership {
  background: rgba(184, 28, 28, 0.10);
  color: #8B0000;
  border-color: rgba(184, 28, 28, 0.3);
}

.status-badge.status-runnable {
  background: rgba(74, 222, 128, 0.16);
  color: #1A3020;
  border-color: rgba(74, 222, 128, 0.5);
}

[data-bs-theme="dark"] .status-badge.status-designed {
  background: rgba(39, 97, 227, 0.22);
  color: #A9C6FF;
  border-color: rgba(39, 97, 227, 0.5);
}

[data-bs-theme="dark"] .status-badge.status-gated {
  background: rgba(218, 165, 32, 0.22);
  color: #F5D66F;
  border-color: rgba(218, 165, 32, 0.5);
}

[data-bs-theme="dark"] .status-badge.status-partnership {
  background: rgba(184, 28, 28, 0.24);
  color: #FFA9A9;
  border-color: rgba(184, 28, 28, 0.5);
}

[data-bs-theme="dark"] .status-badge.status-runnable {
  background: rgba(74, 222, 128, 0.22);
  color: #9EFF9E;
  border-color: rgba(74, 222, 128, 0.5);
}