fix.css

/* ===== BOOTSTRAP 5 / COSMO COMPATIBLE LAYOUT FIX ===== */
/* This CSS works WITH Bootstrap's existing classes */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* Import local Sailors font */
@font-face {
  font-family: 'Sailors';
  src: url('resources/sailors.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== OVERRIDE BOOTSTRAP'S DEFAULT DISPLAY ===== */
/* Bootstrap doesn't automatically make divs flex containers */

/* Force profile container to be a flex container */
.hero-profile-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.hero-profile-section .profile-container {
  /* Override any Bootstrap defaults */
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  gap: 3rem !important;
  /* Reset Bootstrap margins */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Profile image column */
.hero-profile-section .profile-image-col {
  /* Fixed width, don't grow or shrink */
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 250px !important;
  flex: 0 0 250px !important;
  width: 250px !important;
  max-width: 250px !important;
  /* Remove Bootstrap column padding */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide Quarto's figure caption */
.hero-profile-section .profile-image-col figcaption {
  display: none !important;
}

/* Control image size */
.profile-image {
  width: 100% !important;
  max-width: 250px !important;
  height: 250px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid #2B3949 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
}

/* Profile content column */
.hero-profile-section .profile-content-col,
.hero-profile-section section.profile-content-col,
.hero-profile-section section.level1 {
  /* Take remaining space */
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important;
  min-width: 0 !important;
  /* Remove Bootstrap column padding */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== SECTION CONTAINERS - FORCE FLEX ===== */
.section-container {
  /* Force flex display */
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  gap: 3rem !important;
  max-width: 1200px !important;
  margin: 0 auto 3rem auto !important;
  padding: 0 2rem !important;
}

/* Section header column - fixed width */
.section-container .section-header-col,
.section-container section.section-header-col,
.section-container section.level2:first-child {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 200px !important;
  flex: 0 0 200px !important;
  width: 200px !important;
  max-width: 200px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section content column - take remaining space */
.section-container .section-content-col,
.section-container > div:not(.section-header-col):not(section) {
  -webkit-box-flex: 1 !important;
  -ms-flex: 1 !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== FIX GRADIENT TEXT ===== */
/* Need to be very specific to override Bootstrap/Cosmo color settings */

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@-webkit-keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Target all possible gradient text scenarios */
.gradient-text,
h1 .gradient-text,
h1 > .gradient-text,
.profile-content-col h1 .gradient-text,
section.level1 h1 .gradient-text,
#quarto-content .gradient-text,
#quarto-content h1 .gradient-text,
.hero-profile-section .gradient-text {
  /* Gradient background */
  background: -webkit-linear-gradient(
    90deg,
    #4C7C71 0%,
    #2B3949 25%,
    #3F5877 50%,
    #e76f52 75%,
    #4C7C71 100%
  ) !important;
  background: linear-gradient(
    90deg,
    #4C7C71 0%,
    #2B3949 25%,
    #3F5877 50%,
    #e76f52 75%,
    #4C7C71 100%
  ) !important;
  background-size: 300% 300% !important;
  /* Text clipping */
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  /* Animation */
  -webkit-animation: gradient-animation 4s ease-in-out infinite !important;
  animation: gradient-animation 4s ease-in-out infinite !important;
  /* Display */
  display: inline-block !important;
  /* Remove any color that might override */
  color: transparent !important;
  /* Add vendor prefixes for older browsers */
  -moz-background-clip: text !important;
  -moz-text-fill-color: transparent !important;
}

/* ===== TYPOGRAPHY FIXES ===== */
.hero-profile-section h1 {
  font-size: 3rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  line-height: 1.1 !important;
  font-family: 'Sailors', 'Open Sans', sans-serif !important;
}

/* Only apply color to non-gradient h1 text */
.hero-profile-section h1:not(.gradient-text) {
  color: #2B3949 !important;
}

.section-container h2 {
  font-size: 1.75rem !important;
  margin-top: 0 !important;
  color: #2B3949 !important;
  font-family: 'Sailors', 'Open Sans', sans-serif !important;
}

/* Apply dark blue color to ALL headers (except gradient text) */
h1:not(.gradient-text),
h2:not(.gradient-text),
h3:not(.gradient-text),
h4:not(.gradient-text),
h5:not(.gradient-text),
h6:not(.gradient-text) {
  color: #2B3949 !important;
  font-family: 'Sailors', 'Open Sans', sans-serif !important;
}

/* ===== NAVIGATION STYLING ===== */
/* Apply Sailors font to navbar text */
.navbar-nav .nav-link,
.navbar-brand,
.navbar .nav-item .nav-link {
  font-family: 'Sailors', 'Open Sans', sans-serif !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-profile-section .profile-container {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  
  .hero-profile-section .profile-image-col {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
  }
  
  .profile-image {
    max-width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
  }
  
  .section-container {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .section-container .section-header-col,
  .section-container section.section-header-col,
  .section-container section.level2:first-child {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

/* ===== CUSTOM LIST STYLING ===== */
.section-content-col ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.section-content-col ul li {
  position: relative;
  padding-left: 1.75rem !important;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.section-content-col ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #e76f52;
  font-size: 1rem;
}

/* ===== DEBUG STYLES - UNCOMMENT TO SEE LAYOUT ===== */
/*
.profile-container {
  border: 3px solid red !important;
  background: rgba(255,0,0,0.1) !important;
}
.profile-image-col {
  border: 3px solid blue !important;
  background: rgba(0,0,255,0.1) !important;
}
.profile-content-col, section.level1 {
  border: 3px solid green !important;
  background: rgba(0,255,0,0.1) !important;
}
.section-container {
  border: 3px solid orange !important;
  background: rgba(255,165,0,0.1) !important;
}
.section-header-col, section.level2 {
  border: 3px solid purple !important;
  background: rgba(128,0,128,0.1) !important;
}
.section-content-col {
  border: 3px solid cyan !important;
  background: rgba(0,255,255,0.1) !important;
}
*/

/* ===== SIMPLE BLACK ARROW SOLUTION ===== */
/* Minimal fix - just make the arrows black and visible */

/* Clean white background */
.carousel {
  background-color: #ffffff;
}

.carousel-inner {
  background-color: #ffffff;
}

/* Fix the weird overlapping issue */
.carousel-item {
  display: none;
  background-color: #ffffff;
}

.carousel-item.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* Simple black arrows that are always visible */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8 4.646 13.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3e%3c/svg%3e") !important;
}

/* Make them bigger */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
}