/* --- BASE STYLES --- */

@media screen and (max-width: 500px) and (max-height: 520px) {
  .responsive-margin {
    margin-top: 15% !important;
  }
}

.text-shadow {
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* --- BASE STYLES --- */

@media screen and (max-width: 500px) and (max-height: 520px) {
  .responsive-margin {
    margin-top: 15% !important;
  }
}

.text-shadow {
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

/* Timeline wrapper */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Vertical line */
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #91c6d2;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px; /* Perfectly center the 2px line */
  z-index: 0; 
}

/* Container */
.container {
  padding: 10px;
  padding-left: 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Left side */
.left {
  left: 0;
}

/* Right side */
.right {
  left: 50%;
}

/* Card content */
.content {
  padding: 20px 30px;
  padding-top: 10px;
  background-color: transparent;
  position: relative;
  border-radius: 6px;
}

/* --- OBTUSE CHEVRON ARROWS --- */
/* Angle Logic: Larger top/bottom borders + Smaller side border = Obtuse Angle */

/* 1. LEFT CONTAINER ARROW (Points Right >) */

/* The Colored Base */
.left::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 8px; /* Small distance from the vertical line */
  width: 0;
  height: 0;
  border-top: 28px solid transparent;    /* Larger height */
  border-bottom: 28px solid transparent; /* Larger height */
  border-left: 20px solid #91c6d2;       /* Larger length */
  z-index: 1;
}

/* The White Mask (The Cutout) */
.left::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 15px; /* Shifted left to create the chevron thickness */
  width: 0;
  height: 0;
  border-top: 28px solid transparent;    
  border-bottom: 28px solid transparent; 
  border-left: 20px solid white;         
  z-index: 2;
}


/* 2. RIGHT CONTAINER ARROW (Points Left <) */

/* The Colored Base */
.right::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 8px; /* Small distance from the vertical line */
  width: 0;
  height: 0;
  border-top: 28px solid transparent;    
  border-bottom: 28px solid transparent; 
  border-right: 20px solid #91c6d2;      /* Larger length */
  z-index: 1;
}

/* The White Mask (The Cutout) */
.right::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 15px; /* Shifted right to create the chevron thickness */
  width: 0;
  height: 0;
  border-top: 28px solid transparent;    
  border-bottom: 28px solid transparent; 
  border-right: 20px solid white;        
  z-index: 2;
}

/* --- MOBILE RESPONSIVE --- */

@media screen and (max-width: 600px) {

  /* Move vertical line to left */
  .timeline::after {
    left: 31px;
  }

  /* Make containers full width */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Reset 'Right' container to align left like the others */
  .right {
    left: 0%;
  }

  /* FIX ARROWS: On mobile, ALL arrows point LEFT (<) with small distance from the line */

  /* Force .left container base to look like .right container base */
  .left::before {
    left: 39px;          /* Small distance from the line (31px + 8px) */
    right: auto;         
    border-left: 0;      
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 20px solid #91c6d2; /* Larger arrow pointing left */
  }

  /* Force .left container mask to look like .right container mask */
  .left::after {
    left: 46px;          /* Shifted to create thickness */
    right: auto;
    border-left: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 20px solid white;
  }

  /* Adjust .right container positions to match the new line position */
  .right::before {
    left: 39px;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 20px solid #91c6d2;
  }
  
  .right::after {
    left: 46px;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-right: 20px solid white;
  }
}

/* Inline Chevron Separator */
.inline-chevron {
  display: inline-block;
  position: relative;
  width: 1em;           /* Wider container for the thick arrow */
  height: 0.8em;        
  vertical-align: middle; 
  margin: 0 0.2em;      /* Adds breathing room like a dash would */
  top: -0.1em;          /* Visual alignment fix */
}

/* The Teal Base (Points Right) */
.inline-chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.45em;         /* Pushed to the right */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;    /* Size relative to text */
  border-bottom: 0.4em solid transparent; /* Size relative to text */
  border-left: 0.5em solid #91c6d2;       /* The Teal Color */
  z-index: 1;
}

/* The Background Color Mask (Creates the thickness) */
.inline-chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2em;          /* Pushed less to the right = THICKER line */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
  /* CRITICAL: Matches bg-slate-50 (#f8fafc) */
  border-left: 0.5em solid #f8fafc;       
  z-index: 2;
}

details[open] .custom-max-h-open {
    max-height: 2000px !important;
}