/* Fulfillment Theory - Page-Specific Color Applications
   The color variables are now defined in the main styles.css.
   This file applies those colors to specific elements on this page.
*/

/* ===== Apply colors to The Three C's ===== */

/* Flow items in "How the Framework Works" */
.flow-item--input:nth-child(1) {
  background: var(--color-clarity);
  color: white;
  border: none;
}
.flow-item--input:nth-child(2) {
  background: var(--color-collaboration);
  color: white;
  border: none;
}
.flow-item--input:nth-child(3) {
  background: var(--color-connection);
  color: white;
  border: none;
}

/* Input cards in "The Three Commitments" */
.input-cards .input-card:nth-child(1) .input-title { color: var(--color-clarity); }
.input-cards .input-card:nth-child(2) .input-title { color: var(--color-collaboration); }
.input-cards .input-card:nth-child(3) .input-title { color: var(--color-connection); }

.input-cards .input-card:nth-child(1) { border-top: 4px solid var(--color-clarity); }
.input-cards .input-card:nth-child(2) { border-top: 4px solid var(--color-collaboration); }
.input-cards .input-card:nth-child(3) { border-top: 4px solid var(--color-connection); }

/* Commitment compare cards in Step 2 */
.commitment-compare-card:nth-child(1) .commitment-compare-title {
  border-bottom-color: var(--color-clarity);
  color: var(--color-clarity);
}
.commitment-compare-card:nth-child(2) .commitment-compare-title {
  border-bottom-color: var(--color-collaboration);
  color: var(--color-collaboration);
}
.commitment-compare-card:nth-child(3) .commitment-compare-title {
  border-bottom-color: var(--color-connection);
  color: var(--color-connection);
}

/* Strengthen panels in Step 3 */
.strengthen-panel:nth-child(1) .strengthen-panel-title { color: var(--color-clarity); }
.strengthen-panel:nth-child(2) .strengthen-panel-title { color: var(--color-collaboration); }
.strengthen-panel:nth-child(3) .strengthen-panel-title { color: var(--color-connection); }

.strengthen-panel:nth-child(1) .strengthen-check { color: var(--color-clarity); }
.strengthen-panel:nth-child(2) .strengthen-check { color: var(--color-collaboration); }
.strengthen-panel:nth-child(3) .strengthen-check { color: var(--color-connection); }

/* ===== Apply colors to The Three P's ===== */

/* Flow items in "How the Framework Works" */
.flow-item--output:nth-child(1) {
  border-color: var(--color-passion);
  color: var(--color-passion);
}
.flow-item--output:nth-child(2) {
  border-color: var(--color-purpose);
  color: var(--color-purpose);
}
.flow-item--output:nth-child(3) {
  border-color: var(--color-progress);
  color: var(--color-progress);
}

/* Output cards in "The Three Pursuits" */
.output-cards .output-card:nth-child(1) .output-title { color: var(--color-passion); }
.output-cards .output-card:nth-child(2) .output-title { color: var(--color-purpose); }
.output-cards .output-card:nth-child(3) .output-title { color: var(--color-progress); }

.output-cards .output-card:nth-child(1) .output-statement { color: var(--color-passion); }
.output-cards .output-card:nth-child(2) .output-statement { color: var(--color-purpose); }
.output-cards .output-card:nth-child(3) .output-statement { color: var(--color-progress); }

.output-cards .output-card:nth-child(1) .output-icon-wrap { background: color-mix(in srgb, var(--color-passion) 15%, white); }
.output-cards .output-card:nth-child(2) .output-icon-wrap { background: color-mix(in srgb, var(--color-purpose) 15%, white); }
.output-cards .output-card:nth-child(3) .output-icon-wrap { background: color-mix(in srgb, var(--color-progress) 15%, white); }

.output-cards .output-card:nth-child(1):hover .output-icon-wrap { background: var(--color-passion); }
.output-cards .output-card:nth-child(2):hover .output-icon-wrap { background: var(--color-purpose); }
.output-cards .output-card:nth-child(3):hover .output-icon-wrap { background: var(--color-progress); }

/* Pursuit rows in Step 1 */
.pursuit-row:nth-child(1) .pursuit-row-title { color: var(--color-progress); }
.pursuit-row:nth-child(2) .pursuit-row-title { color: var(--color-passion); }
.pursuit-row:nth-child(3) .pursuit-row-title { color: var(--color-purpose); }

.pursuit-row:nth-child(1) .action-items { color: var(--color-progress); }
.pursuit-row:nth-child(2) .action-items { color: var(--color-passion); }
.pursuit-row:nth-child(3) .action-items { color: var(--color-purpose); }

/* Question outputs in "What Is Fulfillment" */
.fulfillment-question:nth-child(1) .question-output { color: var(--color-passion); }
.fulfillment-question:nth-child(2) .question-output { color: var(--color-purpose); }
.fulfillment-question:nth-child(3) .question-output { color: var(--color-progress); }

.fulfillment-question:nth-child(1):hover {
  border-left-color: var(--color-passion);
  background: color-mix(in srgb, var(--color-passion) 8%, var(--color-canvas));
}
.fulfillment-question:nth-child(2):hover {
  border-left-color: var(--color-purpose);
  background: color-mix(in srgb, var(--color-purpose) 8%, var(--color-canvas));
}
.fulfillment-question:nth-child(3):hover {
  border-left-color: var(--color-progress);
  background: color-mix(in srgb, var(--color-progress) 8%, var(--color-canvas));
}

/* ===== Interactive Diagram States ===== */

/* Individual C highlight states */
.diagram-state--clarity,
.diagram-state--collaboration,
.diagram-state--connection,
.diagram-state--passion,
.diagram-state--purpose,
.diagram-state--progress {
  opacity: 0;
}

/* Show specific state on hover */
.diagram-interactive[data-active="clarity"] .diagram-state--clarity,
.diagram-interactive[data-active="collaboration"] .diagram-state--collaboration,
.diagram-interactive[data-active="connection"] .diagram-state--connection,
.diagram-interactive[data-active="passion"] .diagram-state--passion,
.diagram-interactive[data-active="purpose"] .diagram-state--purpose,
.diagram-interactive[data-active="progress"] .diagram-state--progress {
  opacity: 1;
}

/* Hide base when individual is active */
.diagram-interactive[data-active="clarity"] .diagram-state--base,
.diagram-interactive[data-active="collaboration"] .diagram-state--base,
.diagram-interactive[data-active="connection"] .diagram-state--base,
.diagram-interactive[data-active="passion"] .diagram-state--base,
.diagram-interactive[data-active="purpose"] .diagram-state--base,
.diagram-interactive[data-active="progress"] .diagram-state--base {
  opacity: 0;
}

/* ===== Diagram Descriptions ===== */

/* Override the sticky container to stack vertically */
.framework-diagram-sticky {
  flex-direction: column;
  align-items: center;
}

.diagram-description {
  margin-top: var(--space-4);
  min-height: 60px;
  text-align: center;
  width: 100%;
  max-width: 320px;
}

.diagram-desc {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-parchment);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  line-height: 1.5;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.diagram-desc-formula {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Show descriptions based on active state */
.diagram-interactive[data-active="clarity"] ~ .diagram-description .diagram-desc--clarity,
.diagram-interactive[data-active="collaboration"] ~ .diagram-description .diagram-desc--collaboration,
.diagram-interactive[data-active="connection"] ~ .diagram-description .diagram-desc--connection,
.diagram-interactive[data-active="passion"] ~ .diagram-description .diagram-desc--passion,
.diagram-interactive[data-active="purpose"] ~ .diagram-description .diagram-desc--purpose,
.diagram-interactive[data-active="progress"] ~ .diagram-description .diagram-desc--progress,
.diagram-interactive[data-active="result"] ~ .diagram-description .diagram-desc--result {
  display: block;
}

/* Color the description titles */
.diagram-desc--clarity strong { color: var(--color-clarity); }
.diagram-desc--collaboration strong { color: var(--color-collaboration); }
.diagram-desc--connection strong { color: var(--color-connection); }
.diagram-desc--passion strong { color: var(--color-passion); }
.diagram-desc--purpose strong { color: var(--color-purpose); }
.diagram-desc--progress strong { color: var(--color-progress); }
.diagram-desc--result strong { color: var(--color-fulfillment); }