/* Scoped Carbon Content Wrapper Styles */
.carbon_content-wrapper {
    --text-main: #333333;
    --text-muted: #666666;
    --text-light: #999999;
    --border-color: #cccccc;
    --bg-light: #fcfcfc;
    --font-family: 'Morion', Georgia, serif;
    
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-main);
    line-height: 1.65;
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
}

.carbon_content-wrapper *,
.carbon_content-wrapper *::before,
.carbon_content-wrapper *::after {
    box-sizing: border-box;
}

.carbon_content-wrapper .container-wrapper {
    max-width: 1200px;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carbon_content-wrapper .hero-content-wrapper {
    max-width: 55rem;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.carbon_content-wrapper .text-content-wrapper {
    max-width: 37rem;
    width: 100%;
}

.carbon_content-wrapper h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1.35;
    width: 100%;
    max-width: 68rem;
}

.carbon_content-wrapper .subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5rem;
    width: 100%;
    max-width: 68rem;
}

.carbon_content-wrapper h2 {
    font-weight: 500;
    font-size: 1.5625rem;
    letter-spacing: -.005rem;
    line-height: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: .9375rem;
}

.carbon_content-wrapper p {
    margin-bottom: 2rem;
}

.carbon_content-wrapper .small-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.carbon_content-wrapper .smaller-text {
    font-size: 0.7rem;
    color: var(--text-light);
    line-height: 1.4;
}

.carbon_content-wrapper .section-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
}

.carbon_content-wrapper .map-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.carbon_content-wrapper .map-box {
    flex: 1;
    min-width: 280px;
}

.carbon_content-wrapper .map-box img {
    width: 100%;
    height: auto;
    display: block;
}

.carbon_content-wrapper .map-legend {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 100%;
    max-width: 1200px;
}

.carbon_content-wrapper .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.carbon_content-wrapper .legend-color {
    display: inline-block;
    width: 12px;
    height: 4px;
}

.carbon_content-wrapper .legend-color.brown { 
    background-color: #8b5a2b; 
}

.carbon_content-wrapper .legend-color.orange { 
    background-color: #f39c12; 
}

.carbon_content-wrapper .chart-wrapper {
    text-align: center;
    margin: 1rem 0;
    width: 100%;
}

.carbon_content-wrapper .chart-wrapper img {
    max-width: 100%;
    height: auto;
}

.carbon_content-wrapper .soil-map-wrapper {
    text-align: center;
    margin: 1rem 0;
    width: 100%;
}

.carbon_content-wrapper .soil-map-wrapper img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
}

.carbon_content-wrapper .figure-note {
    text-align: left;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
    max-width: 68rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.carbon_content-wrapper .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 1.5rem 0;
    width: 100%;
}

.carbon_content-wrapper .photo-grid img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

@media (max-width: 600px) {
    .carbon_content-wrapper .photo-grid {
        grid-template-columns: 1fr;
    }
}

.carbon_content-wrapper .footer-notes {
    margin-top: 2rem;
    padding-top: 1rem;
    width: 100%;
    max-width: 68rem;
}

.carbon_content-wrapper .footer-notes p {
    font-size: 0.65rem;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.carbon_content-wrapper .credit-line {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

.carbon_content-wrapper img {
    max-width: 100%;
    height: auto;
}

/* Lake Dashboard Component within Carbon Content Wrapper */
.carbon_content-wrapper .lake-dashboard {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --bg-card: #FFFFFF;
    --bg-chart: #F1F5F9;
    --grid-line: #E2E8F0;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --baringo-primary: #4F46E5;
    --bogoria-primary: #0284C7;
    --expansion-primary: #10B981;
    --nakuru-primary: #F59E0B;
    --victoria-primary: #EF4444;
    --tanganyika-primary: #8B5CF6;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
    max-width: 1400px;
    background: var(--bg-card);
    padding: 32px;
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.01);
    border: 1px solid #E2E8F0;
    margin: 0 auto;
}

.carbon_content-wrapper .lake-dashboard .chart-card {
    flex: 1 1 calc(50% - 32px);
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.carbon_content-wrapper .lake-dashboard .chart-header {
    margin-bottom: 20px;
    text-align: center;
}

.carbon_content-wrapper .lake-dashboard .chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.carbon_content-wrapper .lake-dashboard .chart-title.baringo { color: var(--baringo-primary); }
.carbon_content-wrapper .lake-dashboard .chart-title.bogoria { color: var(--bogoria-primary); }
.carbon_content-wrapper .lake-dashboard .chart-title.expansion { color: var(--expansion-primary); }
.carbon_content-wrapper .lake-dashboard .chart-title.nakuru { color: var(--nakuru-primary); }
.carbon_content-wrapper .lake-dashboard .chart-title.victoria { color: var(--victoria-primary); }
.carbon_content-wrapper .lake-dashboard .chart-title.tanganyika { color: var(--tanganyika-primary); }

.carbon_content-wrapper .lake-dashboard .svg-container {
    width: 100%;
    height: auto;
}

.carbon_content-wrapper .lake-dashboard svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.carbon_content-wrapper .lake-dashboard .chart-bg {
    fill: var(--bg-chart);
    rx: 0px;
}

.carbon_content-wrapper .lake-dashboard .grid-line {
    stroke: var(--grid-line);
    stroke-width: 1.5;
    stroke-dasharray: 4 2;
}

.carbon_content-wrapper .lake-dashboard .axis-label {
    font-size: 12px;
    font-weight: 500;
    fill: var(--text-muted);
}

.carbon_content-wrapper .lake-dashboard .axis-title {
    font-size: 12px;
    font-weight: 600;
    fill: var(--text-main);
    letter-spacing: 0.02em;
}

.carbon_content-wrapper .lake-dashboard .data-line-baringo {
    fill: none;
    stroke: var(--baringo-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .data-line-bogoria {
    fill: none;
    stroke: var(--bogoria-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .data-line-expansion {
    fill: none;
    stroke: var(--expansion-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .data-line-nakuru {
    fill: none;
    stroke: var(--nakuru-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .data-line-victoria {
    fill: none;
    stroke: var(--victoria-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .data-line-tanganyika {
    fill: none;
    stroke: var(--tanganyika-primary);
    stroke-width: 3.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.carbon_content-wrapper .lake-dashboard .value-baringo { fill: var(--baringo-primary); }
.carbon_content-wrapper .lake-dashboard .value-bogoria { fill: var(--bogoria-primary); }
.carbon_content-wrapper .lake-dashboard .value-expansion { fill: var(--expansion-primary); }
.carbon_content-wrapper .lake-dashboard .value-nakuru { fill: var(--nakuru-primary); }
.carbon_content-wrapper .lake-dashboard .value-victoria { fill: var(--victoria-primary); }
.carbon_content-wrapper .lake-dashboard .value-tanganyika { fill: var(--tanganyika-primary); }

.carbon_content-wrapper .lake-dashboard .point-baringo,
.carbon_content-wrapper .lake-dashboard .point-bogoria,
.carbon_content-wrapper .lake-dashboard .point-expansion,
.carbon_content-wrapper .lake-dashboard .point-nakuru,
.carbon_content-wrapper .lake-dashboard .point-victoria,
.carbon_content-wrapper .lake-dashboard .point-tanganyika {
    fill: var(--bg-card);
    stroke-width: 3;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.carbon_content-wrapper .lake-dashboard .point-baringo { stroke: var(--baringo-primary); }
.carbon_content-wrapper .lake-dashboard .point-bogoria { stroke: var(--bogoria-primary); }
.carbon_content-wrapper .lake-dashboard .point-expansion { stroke: var(--expansion-primary); }
.carbon_content-wrapper .lake-dashboard .point-nakuru { stroke: var(--nakuru-primary); }
.carbon_content-wrapper .lake-dashboard .point-victoria { stroke: var(--victoria-primary); }
.carbon_content-wrapper .lake-dashboard .point-tanganyika { stroke: var(--tanganyika-primary); }

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-baringo {
    fill: var(--baringo-primary);
    stroke: #EEF2FF;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-bogoria {
    fill: var(--bogoria-primary);
    stroke: #E0F2FE;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-expansion {
    fill: var(--expansion-primary);
    stroke: #D1FAE5;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-nakuru {
    fill: var(--nakuru-primary);
    stroke: #FEF3C7;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-victoria {
    fill: var(--victoria-primary);
    stroke: #FEE2E2;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .point-tanganyika {
    fill: var(--tanganyika-primary);
    stroke: #EDE9FE;
    stroke-width: 4;
    r: 8;
}

.carbon_content-wrapper .lake-dashboard .data-value {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    letter-spacing: -0.01em;
}

.carbon_content-wrapper .lake-dashboard .tooltip {
    visibility: hidden;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    transform: translateY(4px);
    pointer-events: none;
}

.carbon_content-wrapper .lake-dashboard .point-group:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.carbon_content-wrapper .lake-dashboard .tooltip-bg {
    fill: #0F172A;
    rx: 6;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

.carbon_content-wrapper .lake-dashboard .tooltip-text {
    fill: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .carbon_content-wrapper .lake-dashboard {
        flex-direction: column;
        gap: 40px;
        padding: 24px 16px;
    }
    .carbon_content-wrapper .lake-dashboard .chart-card {
        flex: 1 1 100%;
    }
}

/* --- Comparison Slider --- */
/* Comparison */
img-comparison-slider {
    visibility: hidden;
  }
  
  img-comparison-slider [slot='second'] {
    display: none;
  }
  
  img-comparison-slider.rendered {
    visibility: inherit;
  }
  
  img-comparison-slider.rendered [slot='second'] {
    display: unset;
  }

  .na__before,
  .na__after {
    margin: 0;
  }

  .na__before .na__slider-figcaption,
  .na__after .na__slider-figcaption {
    /* border: 1px solid #c0c0c0; */
    position: absolute;
    transform: translateY(-50%);
	  background: rgba(255,255,255,.5);
    border-radius: 2px;
    color: #fff;
    font-size: 0.8750em;
    letter-spacing: .1em;
    line-height: 38px;
    padding: 0 20px;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizelegibility;
  }

  .na__before .na__slider-figcaption {
    left: 12px;
    top: 30px;
  }

  .na__after .na__slider-figcaption {
    right: 12px;
    top: 30px;
  }

  .na__image-slider {
    margin-bottom: 32px;
  }