/*
  Open Research Cycle - Stylesheet
  Uses `orc-` prefix for namespacing.
*/

/* ========================================
   1. CSS VARIABLES
   ======================================== */

:root {
  --orc-green-dark: #006426;
  --orc-green-darker: #004d1d;
  --orc-green-light: #f0f9f6;
  --orc-gray-100: #f1f5f9;
  --orc-gray-200: #e2e8f0;
  --orc-gray-300: var(--osc-divider);
  --orc-gray-400: #718096;
  --orc-gray-500: var(--osc-muted);
  --orc-gray-600: #4a5568;
  --orc-gray-700: var(--osc-text);
  --orc-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --orc-shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --orc-transition: all .2s ease;
  --orc-radius: 10px;
  --orc-radius-lg: 12px;
  --orc-radius-md: 8px;
  --orc-radius-full: 9999px;
}

/* ========================================
   2. BASE & LAYOUT
   ======================================== */

h2 i, h3 i{ color: var(--osc-accent); margin-right: .5rem; }

* a { color: var(--osc-accent); }

.mark,.quarto-xref { background: white; color:var(--orc-gray-400); font-weight:600; font-style: italic; text-decoration: none;}


/* ========================================
   3. CARDS
   ======================================== */

.orc-card-tool{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border:none;
  box-shadow: var(--orc-shadow-sm);
}
.orc-card-tool:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.orc-card-tool-icon {
  background: var(--orc-green-light);
}

.orc-card-tool-icon img { width: 1.5rem; height: 1.5rem; }
.orc-card-tool h4 { font-size: 1.125rem; font-weight: 600; color: var(--orc-gray-700); line-height: 1.3; }
.orc-card-tool p { font-size: 1rem; color: var(--orc-gray-400);line-height: 1.5; }

/* accordion button header*/
.accordion-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: inherit;
}

.header-section-number{ margin-top: 0; color:inherit; font: inherit}


/* Gradient highlight box - checklist section*/
.orc-gradient-box {
  background: linear-gradient(135deg, rgba(0, 136, 58, 0.08) 0%, rgba(0, 100, 38, 0.08) 100%);
  padding: 2rem;
  border-radius: var(--orc-radius-md);
  border-left: 5px solid var(--osc-accent);
  margin: 3.5rem 0;
  line-height: 1.7rem;
}

.orc-gradient-box h2 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
}

/* ========================================
   6. PANEL TABSETS (Quarto)
   ======================================== */

.panel-tabset .nav-tabs { border-bottom: 2px solid var(--orc-gray-200); }

.panel-tabset .nav-tabs .nav-link {
  color: var(--orc-gray-600);
  border: none;
  border-bottom: 3px solid transparent;
  padding: .75rem 1.25rem;
  font-weight: 500;
  transition: var(--orc-transition);
  margin-bottom: -2px;
}

.panel-tabset .nav-tabs .nav-link:hover { color: var(--osc-accent); border-bottom-color: var(--orc-green-light); background: transparent; }
.panel-tabset .nav-tabs .nav-link.active { color: var(--osc-accent); border-bottom-color: var(--osc-accent); background: transparent; font-weight: 600; }
.panel-tabset .tab-content { padding: 1.25rem 0; margin-top: .5rem; border: none; }
.panel-tabset .tab-pane { border: none; }

/* ========================================
   7. PHASE MENU & BUTTONS
   ======================================== */

.cycle-container { text-align: center; margin: 2rem auto; max-width: 600px; }
.cycle-container svg { max-width: 100%; height: auto; }
.cycle-container em { display: block; margin-top: 1rem; font-size: 1rem; color: var(--orc-gray-500); }

/* ========================================
   8. SVG DIAGRAM
   ======================================== */

svg a { text-decoration: none; cursor: pointer; }

.phase-group {
  cursor: pointer;
  transition: all .4s cubic-bezier(.25,.1,.25,1);
  transform-origin: 1645px 477px;
}

.phase-group:hover { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0,136,58,.5)); transform: scale(1.02); }
.phase-group:hover path { stroke: #fff; stroke-width: 2px; stroke-opacity: .7; }
svg:has(.phase-group:hover) .phase-group:not(:hover) { opacity: .6; filter: brightness(.95); }
.phase-group:active { transform: scale(.98); }
.phase-group:focus { outline: none; filter: drop-shadow(0 0 8px rgba(0,136,58,.6)); }
svg :is(text, tspan) { font-family: inherit !important; font-weight: bold; pointer-events: none; }

/* ========================================
   9. BOOTSTRAP MODALS
   ======================================== */
/* Define heading colors for each modal to match corresponding svg quadrants */
#modalPhase1 { --phase-color: #0066ff; --phase-color-hover: #045bdc; }   
#modalPhase2 { --phase-color: #cc0066; --phase-color-hover: #b9025d; }   
#modalPhase3 { --phase-color: #ffc000; --phase-color-hover: #dca603; } 
#modalPhase4 { --phase-color: #00c057; --phase-color-hover: #01a74c;}  

[id^="modalPhase"] .modal-header { background: var(--phase-color); color: white; border-bottom: none; }
[id^="modalPhase"] .modal-title { font-weight: 700;color:white; }
[id^="modalPhase"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .8; }
[id^="modalPhase"] .btn-close:hover { opacity: 1; }
[id^="modalPhase"] .modal-body { padding: 2rem; font-size: 1.125rem; line-height: 1.6; color: var(--orc-gray-600); text-align: left;}
[id^="modalPhase"] .modal-footer { border-top: 1px solid var(--orc-gray-200); padding: 1rem 2rem; }
[id^="modalPhase"] .modal-footer .btn-primary { background: var(--phase-color); border-color: var(--phase-color); padding: .5rem 1.5rem; font-weight: 600; }
[id^="modalPhase"] .modal-footer .btn-primary:hover { background: var(--phase-color-hover); border-color: var(--phase-color-hover); }

/* ========================================
   10. PHASE HERO
   ======================================== */

.orc-hero-cycle[class*="phase-"] [id^="phase-"] { opacity: .20; }
.orc-hero-cycle[class*="phase-"] [id^="path1"] { fill-opacity: .20; }
.orc-hero-cycle.phase-1 #phase-1,
.orc-hero-cycle.phase-2 #phase-2,
.orc-hero-cycle.phase-3 #phase-3,
.orc-hero-cycle.phase-4 #phase-4 { opacity: 1; }

.orc-hero-cycle svg {   width: 100%; max-width: 230px;height: auto;}
.orc-phase-hero .orc-hero-pills span {
  font-size: 0.98rem;
  font-weight: 500;
}
/* Phase-specific color styles */

.orc-phase-hero.phase-1{ background: #eef2fb;}
.orc-hero-pills.phase-1, .orc-hero-checkpoint.phase-1 {background:#0066ff74; border:1px solid #0066ff74; color:#000;}
.orc-gradient-box.plan-design-checklist { background:#eef2fb; border-left-color:#0066ff74;}
.orc-gradient-box.plan-design-checklist h2, .orc-gradient-box.plan-design-checklist .checklist-icon{color:#000;}
.orc-checklist-download.phase-1 .btn.btn-outline-secondary.btn-sm{border-color: #0066ff74; color: #0066ff74;}
.orc-checklist-download.phase-1 .btn.btn-outline-secondary.btn-sm:hover{
  border-color: #0066ff74!important;
  color: white!important;
  background: #0066ff74 !important;
}

.orc-phase-hero.phase-2 { background: #fff5f9;}
.orc-hero-pills.phase-2, .orc-hero-checkpoint.phase-2 { background: #c90a6a83; border:1px solid#cc006695; color:#000;}
.orc-gradient-box.collect-manage-checklist { background: #fff5f9; border-left-color:#cc006695;}
.orc-gradient-box.collect-manage-checklist h2, .orc-gradient-box.collect-manage-checklist .checklist-icon{color:#000;}
.orc-checklist-download.phase-2 .btn.btn-outline-secondary.btn-sm{border-color: #cc006695; color:#cc006695;}
.orc-checklist-download.phase-2 .btn.btn-outline-secondary.btn-sm:hover{
  border-color: #cc006695 !important;
  color: white!important;
  background:#cc006695!important;
}

.orc-phase-hero.phase-3 { background:#fffbee;}
.orc-hero-pills.phase-3, .orc-hero-checkpoint.phase-3 { background: #ffbf0091; border:1px solid #ffbf0091;color:#000;}
.orc-gradient-box.analyze-collaborate-checklist { background: #fffbee; border-left-color: #ffbf0091;}
.orc-gradient-box.analyze-collaborate-checklist h2, .orc-gradient-box.analyze-collaborate-checklist .checklist-icon{color:#000;}
.orc-checklist-download.phase-3 .btn.btn-outline-secondary.btn-sm{border-color:#ffbf0091; color:#ffbf0091;}
.orc-checklist-download.phase-3 .btn.btn-outline-secondary.btn-sm:hover{
  border-color: #ffbf0091!important;
  color: white!important;
  background:#ffbf0091!important;
}

.orc-phase-hero.phase-4 { background:#edfff5;}
.orc-hero-pills.phase-4, .orc-hero-checkpoint.phase-4 { background: #00c057a6; border:1px solid #00c057a6;color:#000;}
.orc-gradient-box.preserve-share-checklist { background: #edfff5; border-left-color: #00c057a6;}
.orc-gradient-box.preserve-share-checklist h2, .orc-gradient-box.preserve-share-checklist .checklist-icon{color: #000;}
.orc-checklist-download.phase-4 .btn.btn-outline-secondary.btn-sm{border-color:#00c057a6; color:#00c057a6;}
.orc-checklist-download.phase-4 .btn.btn-outline-secondary.btn-sm:hover{
  border-color:#00c057a6 !important;
  color: white!important;
  background: #00c057a6!important;
}