/*
  ========================================
  Open Research Cycle - Stylesheet
  ========================================

  Reusable styles for all Open Research Cycle pages.
  Uses `orc-` prefix for namespacing.

  TABLE OF CONTENTS:
  1. CSS Variables
  2. Base Typography
  3. Layout Grids
  4. Hero Section
  5. Cards (Base, Tool, Feature)
  6. Interactive Details Panels
  7. Callouts (Quarto overrides)
  7b. Panel Tabsets (Quarto overrides)
  8. Phase Menu & Buttons
  9. SVG Diagram Interactivity
  10. Bootstrap Modal Overrides
  11. Utility Classes
  12. Responsive Breakpoints
*/

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

:root {
  /* Brand Colors */
  --orc-green: #00883A;
  --orc-green-dark: #006426;
  --orc-green-darker: #004d1d;
  --orc-green-light: #f0f9f6;
  --orc-green-hover: #f8fdf9;

  /* Neutral Colors */
  --orc-gray-50: #f8fafc;
  --orc-gray-100: #f1f5f9;
  --orc-gray-200: #e2e8f0;
  --orc-gray-300: #e0e0e0;
  --orc-gray-400: #718096;
  --orc-gray-500: #666666;
  --orc-gray-600: #4a5568;
  --orc-gray-700: #2d3748;
  --orc-gray-800: #555555;

  /* Accent Colors */
  --orc-purple: #667eea;

  /* Shadows */
  --orc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --orc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --orc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --orc-transition-fast: all 0.2s ease;
  --orc-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --orc-radius-sm: 8px;
  --orc-radius-md: 10px;
  --orc-radius-lg: 12px;
  --orc-radius-xl: 16px;
  --orc-radius-full: 9999px;
}

/* ========================================
   2. BASE TYPOGRAPHY
   ======================================== */

/* Heading icons - consistent green color */
h2 i,
h3 i {
  color: var(--orc-green);
  margin-right: 0.5rem;
}

/* Exception: Hero section inherits white */
.orc-hero h2 i,
.orc-hero h3 i {
  color: inherit;
}

/* ========================================
   3. LAYOUT GRIDS
   ======================================== */

/* Tool cards grid - responsive auto-fill */
.orc-grid-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

/* Feature cards grid - larger minimum */
.orc-grid-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2.5rem 0;
}

/* Two-column layout */
.orc-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

/* Gradient highlight box */
.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(--orc-green);
  margin: 2rem 0;
}

/* ========================================
   4. HERO SECTION
   ======================================== */

.orc-hero {
  background: linear-gradient(135deg, var(--orc-green) 0%, var(--orc-green-dark) 100%);
  padding: 3.5rem 3rem;
  border-radius: var(--orc-radius-xl);
  color: white;
  margin-bottom: 3rem;
  box-shadow: var(--orc-shadow-md);
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Decorative overlay gradient */
.orc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Background watermark icon */
.orc-hero-bg-icon {
  position: absolute;
  right: -2%;
  bottom: -25%;
  font-size: 22rem;
  color: rgba(255, 255, 255, 0.08);
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 0;
}

/* Hero typography */
.orc-hero h2 {
  font-size: 2.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: white !important;
  border-bottom: none;
  padding-bottom: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

.orc-hero p {
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.95;
  max-width: 700px;
  position: relative;
  z-index: 2;
}

/* Phase badge pill */
.orc-phase-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--orc-green);
  padding: 0.4rem 1rem;
  border-radius: var(--orc-radius-full);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
}

.orc-phase-badge i {
  font-size: 0.7rem;
  margin-right: 0.5rem;
  color: var(--orc-green);
}

/* Hero button group */
.orc-button-group {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
}

.orc-button-group .btn:not(:last-child) {
  margin-right: 1rem;
}

/* Hero buttons */
.orc-hero .btn {
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius: var(--orc-radius-sm);
  transition: var(--orc-transition-fast);
  border-width: 2px;
  font-size: 1.1rem;
}

.orc-hero .btn-light {
  background: white;
  color: var(--orc-green);
  border-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.orc-hero .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: var(--orc-gray-50);
}

.orc-hero .btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.5);
}

.orc-hero .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: white;
  transform: translateY(-2px);
}

/* ========================================
   5. CARDS
   ======================================== */

/* --- Base Card --- */
.orc-card {
  border: 1px solid var(--orc-gray-300);
  border-radius: var(--orc-radius-lg);
  padding: 1.25rem;
  background: white;
  box-shadow: var(--orc-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.orc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--orc-shadow-md);
}

/* LMU-highlighted card variant */
.orc-card-lmu {
  border: 1px solid var(--orc-green);
  border-radius: var(--orc-radius-lg);
  padding: 1.25rem;
  background: linear-gradient(135deg, var(--orc-green-light) 0%, white 100%);
  box-shadow: var(--orc-shadow-sm);
}

/* Card accessories */
.orc-card-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.orc-card-star {
  color: var(--orc-green);
  font-size: 0.9rem;
  float: right;
}

.orc-card-label {
  font-size: 0.9rem;
  color: var(--orc-gray-500);
  margin-top: 0.3rem;
}

/* Card expandable details */
.orc-card-details {
  display: inline;
  margin-top: auto;
}

.orc-card-details summary {
  display: inline;
  cursor: pointer;
  color: var(--orc-green);
  font-size: 0.95rem;
  font-weight: 500;
  list-style: none;
}

.orc-card-details summary:hover {
  text-decoration: underline;
}

.orc-card-details summary::-webkit-details-marker,
.orc-card-details summary::marker {
  display: none;
}

.orc-card-details p {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  color: var(--orc-gray-800);
  line-height: 1.5;
}

/* --- Tool Card --- */
.orc-card-tool {
  background: white;
  border: 1px solid var(--orc-gray-200);
  border-radius: var(--orc-radius-lg);
  padding: 1rem;
  transition: var(--orc-transition-fast);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--orc-shadow-sm);
}

.orc-card-tool:hover {
  transform: translateY(-4px);
  box-shadow: var(--orc-shadow-lg);
  border-color: transparent;
}

/* Tool card icon container */
.orc-card-tool-icon {
  font-size: 1.5rem;
  color: var(--orc-green);
  margin-bottom: 0.75rem;
  background: var(--orc-green-light);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--orc-radius-md);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.orc-card-tool-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.orc-card-tool:hover .orc-card-tool-icon {
  transform: scale(1.05);
}

/* Tool card typography */
.orc-card-tool h4 {
  margin: 0 0 0.35rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--orc-gray-700);
  line-height: 1.3;
}

.orc-card-tool p {
  font-size: 1rem;
  color: var(--orc-gray-400);
  margin-bottom: 0;
  flex-grow: 1;
  line-height: 1.5;
}

/* Tool card link */
.orc-card-tool-link {
  text-decoration: none;
  color: var(--orc-green);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
}

.orc-card-tool-link:hover {
  text-decoration: none;
  color: var(--orc-green-dark);
}

.orc-card-tool-link i {
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}

.orc-card-tool-link:hover i {
  transform: translateX(4px);
}

/* Tool card badge */
.orc-card-tool-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--orc-gray-100);
  color: var(--orc-gray-600);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--orc-radius-full);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.orc-card-tool-badge:hover {
  text-decoration: none;
  opacity: 0.9;
}

.orc-card-tool-badge.recommended {
  background: var(--orc-green-light);
  color: var(--orc-green);
}

/* --- Feature Card --- */
.orc-card-feature {
  border: 1px solid var(--orc-gray-300);
  border-radius: var(--orc-radius-lg);
  padding: 2rem;
  background: white;
  transition: var(--orc-transition-smooth);
  box-shadow: var(--orc-shadow-sm);
}

.orc-card-feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--orc-shadow-lg);
  border-color: var(--orc-green);
}

.orc-card-feature h3 i {
  color: var(--orc-green);
  margin-right: 0.5rem;
}

/* ========================================
   6. INTERACTIVE DETAILS PANELS
   ======================================== */

.orc-details-panel {
  border-left: 4px solid var(--orc-green);
  margin: 1.5rem 0;
  background: linear-gradient(to right, rgba(0, 136, 58, 0.05), transparent);
  border-radius: 0 var(--orc-radius-sm) var(--orc-radius-sm) 0;
  padding: 1rem 1rem 1rem 1.5rem;
}

.orc-details-panel summary {
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--orc-gray-700);
  list-style: none;
  display: flex;
  align-items: center;
}

.orc-details-panel summary::-webkit-details-marker {
  display: none;
}

.orc-details-panel summary i {
  margin-right: 0.75rem;
  color: var(--orc-green);
  font-size: 1.25rem;
}

.orc-details-panel[open] summary {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--orc-gray-200);
  padding-bottom: 0.5rem;
}

/* ========================================
   7. CALLOUTS (Quarto Overrides)
   ======================================== */

/* Universal callout typography */
div.callout .callout-title,
div.callout-note .callout-title,
div.callout-tip .callout-title,
div.callout-warning .callout-title,
div.callout-important .callout-title,
div.callout-caution .callout-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

div.callout .callout-body,
div.callout-note .callout-body,
div.callout-tip .callout-body,
div.callout-warning .callout-body,
div.callout-important .callout-body,
div.callout-caution .callout-body {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

div.callout .callout-body p,
div.callout .callout-body ul,
div.callout .callout-body li,
div.callout-note .callout-body p,
div.callout-note .callout-body ul,
div.callout-note .callout-body li,
div.callout-tip .callout-body p,
div.callout-tip .callout-body ul,
div.callout-tip .callout-body li {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* LMU-OSC branded callout (note with appearance="simple") */
div.callout-note.callout-style-simple {
  border-left-color: var(--orc-green) !important;
  border-left-width: 5px !important;
  background-color: var(--orc-green-light) !important;
  border-radius: 0.5rem !important;
}

div.callout-note.callout-style-simple .callout-title {
  color: var(--orc-green) !important;
}

/* Replace icon with OSC logo */
div.callout-note.callout-style-simple .callout-icon {
  position: relative;
  width: 2rem;
  height: 2rem;
}

div.callout-note.callout-style-simple .callout-icon::before {
  content: '' !important;
  display: block;
  width: 2rem;
  height: 2rem;
  background-image: url("../assets/img/lmu_osc_logo.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
}

div.callout-note.callout-style-simple .callout-icon i,
div.callout-note.callout-style-simple .callout-icon .bi {
  display: none !important;
}

/* Callouts inside details panels */
details .callout {
  margin-top: 1rem;
}

/* ========================================
   7b. PANEL TABSETS (Quarto Overrides)
   ======================================== */

/* Tab navigation styling */
.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: 0.75rem 1.25rem;
  font-weight: 500;
  transition: var(--orc-transition-fast);
  margin-bottom: -2px;
}

.panel-tabset .nav-tabs .nav-link:hover {
  color: var(--orc-green);
  border-bottom-color: var(--orc-green-light);
  background: transparent;
}

.panel-tabset .nav-tabs .nav-link.active {
  color: var(--orc-green);
  border-bottom-color: var(--orc-green);
  background: transparent;
  font-weight: 600;
}

/* Tab content panel styling */
.panel-tabset .tab-content {
  padding: 1.5rem 0;
  border-left: 3px solid var(--orc-green-light);
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

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

/* Cycle diagram container */
.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: 0.95rem;
  color: var(--orc-gray-500);
}

/* Horizontal phase menu */
.phase-menu-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  margin: 2rem auto;
  max-width: 900px;
}

/* Horizontal phase button */
.phase-btn-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  background-color: white;
  border: 2px solid var(--orc-gray-200);
  border-radius: var(--orc-radius-lg);
  color: var(--orc-gray-700);
  text-decoration: none;
  transition: var(--orc-transition-smooth);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex: 1 1 180px;
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  height: 110px;
  text-align: center;
}

.phase-btn-h:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 153, 51, 0.15);
  border-color: var(--orc-green);
  background-color: var(--orc-green-hover);
}

.phase-btn-h:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.3);
}

.phase-btn-h i {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--orc-green);
  transition: transform 0.3s ease;
}

.phase-btn-h:hover i {
  transform: scale(1.15);
}

.phase-btn-h span {
  line-height: 1.3;
}

/* Legacy vertical phase menu (backwards compatibility) */
.phase-menu {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  justify-content: center;
  align-items: stretch;
  height: 100%;
  min-height: 400px;
}

/* Vertical phase button */
.phase-btn {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background-color: white;
  border: 1px solid var(--orc-gray-200);
  border-left: 5px solid var(--orc-green);
  border-radius: var(--orc-radius-sm);
  color: var(--orc-gray-700);
  text-decoration: none;
  transition: var(--orc-transition-smooth);
  cursor: pointer;
  font-weight: 600;
  font-size: 1.15rem;
  box-shadow: var(--orc-shadow-md);
  width: 100%;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.phase-btn:hover {
  transform: translateX(-5px);
  box-shadow: var(--orc-shadow-lg);
  background-color: var(--orc-gray-50);
  border-left-width: 8px;
  color: var(--orc-green-dark);
}

.phase-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.3);
}

.phase-btn i {
  font-size: 1.75rem;
  margin-right: 1.2rem;
  color: var(--orc-green);
  transition: transform 0.3s ease;
}

.phase-btn:hover i {
  transform: scale(1.1);
}

/* ========================================
   9. SVG DIAGRAM INTERACTIVITY
   ======================================== */

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

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

.phase-group:hover {
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 153, 51, 0.5));
  transform: scale(1.02);
}

.phase-group:hover path {
  stroke: white;
  stroke-width: 2px;
  stroke-opacity: 0.7;
}

/* Dim non-hovered quadrants */
svg:has(.phase-group:hover) .phase-group:not(:hover) {
  opacity: 0.6;
  filter: brightness(0.95);
  transition: all 0.4s ease;
}

.phase-group:active {
  transform: scale(0.98);
}

.phase-group:focus {
  outline: none;
  filter: drop-shadow(0 0 8px rgba(0, 153, 51, 0.6));
}

svg text,
svg tspan {
  font-family: inherit !important;
  font-weight: bold;
  pointer-events: none;
}

/* ========================================
   10. BOOTSTRAP MODAL OVERRIDES
   ======================================== */

/* Phase modals - using attribute selector for cleaner code */
[id^="modalPhase"] .modal-header {
  background-color: var(--orc-green);
  color: white;
  border-bottom: none;
}

[id^="modalPhase"] .modal-title {
  font-weight: 700;
  letter-spacing: 0.5px;
}

[id^="modalPhase"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

[id^="modalPhase"] .btn-close:hover {
  opacity: 1;
}

[id^="modalPhase"] .modal-body {
  padding: 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--orc-gray-600);
}

[id^="modalPhase"] .modal-footer {
  border-top: 1px solid var(--orc-gray-200);
  padding: 1rem 2rem;
}

[id^="modalPhase"] .modal-footer .btn-primary {
  background-color: var(--orc-green-dark);
  border-color: var(--orc-green-dark);
  padding: 0.5rem 1.5rem;
  font-weight: 600;
}

[id^="modalPhase"] .modal-footer .btn-primary:hover {
  background-color: var(--orc-green-darker);
  border-color: var(--orc-green-darker);
}

/* ========================================
   11. UTILITY CLASSES
   ======================================== */

.orc-text-lmu-green {
  color: var(--orc-green);
}

.orc-icon-lmu-badge {
  color: var(--orc-green);
  font-size: 0.85rem;
}

/* ========================================
   12. RESPONSIVE BREAKPOINTS
   ======================================== */

/* Large screens - wider tool grid */
@media (min-width: 1200px) {
  .orc-grid-tools {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Tablet and below */
@media (max-width: 768px) {
  .orc-grid-2col {
    grid-template-columns: 1fr;
  }

  .orc-hero {
    padding: 1.5rem;
  }

  .orc-gradient-box {
    padding: 1.5rem;
  }

  .phase-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .phase-btn {
    flex: 1 1 100%;
    padding: 1rem;
    font-size: 1rem;
    border-left-width: 4px;
  }

  .phase-btn:hover {
    transform: translateY(-2px);
  }
}

/* Hero responsive */
@media (max-width: 768px) {
  .orc-hero {
    padding: 3rem 1.5rem;
  }

  .orc-hero h2 {
    font-size: 2.5rem;
  }

  .orc-hero-bg-icon {
    font-size: 15rem;
    right: -10%;
    bottom: -10%;
  }

  .orc-button-group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .orc-button-group .btn {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 1rem;
    text-align: center;
  }
}

/* Mobile - horizontal phase buttons stack */
@media (max-width: 600px) {
  .phase-menu-horizontal {
    flex-direction: column;
    align-items: center;
  }

  .phase-btn-h {
    flex: 1 1 auto;
    width: 100%;
    max-width: 300px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    min-height: auto;
  }

  .phase-btn-h i {
    margin-bottom: 0;
    margin-right: 1rem;
    font-size: 1.5rem;
  }
}

/* Grid column alignment helpers */
.grid.align-items-center > div {
  display: flex;
  flex-direction: column;
}

.g-col-12.g-col-md-7 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.g-col-12.g-col-md-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}