/**
 * Multi-Graph Layout CSS
 * Styles for stacked tide, swell, and wind graphs with shared X-axis
 */

.multi-graph-container {
    display: flex;
    flex-direction: column;
    gap: 0px; /* No spacing between graphs - graphs touch each other */
    width: 100%;
    margin-top: 10px;
}

.graph-section {
    width: 100%;
    position: relative; /* For absolute positioning of titles */
}

/* IDEAL DIVE TIME section spacing - matches other graphs */
.graph-section:has(.ideal-dive-time-canvas-wrapper) {
    margin-top: 0px; /* Same spacing as other graphs */
}

/* Canvas wrappers */
.weather-canvas-wrapper,
.tide-canvas-wrapper,
.swell-canvas-wrapper,
.wind-canvas-wrapper,
.ideal-dive-time-canvas-wrapper {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.weather-canvas-wrapper canvas,
.tide-canvas-wrapper canvas,
.swell-canvas-wrapper canvas,
.wind-canvas-wrapper canvas,
.ideal-dive-time-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: bottom; /* Prevents extra whitespace below canvas */
}

/* Weather forecast graph is shorter (reference only, not scored) */
.weather-canvas-wrapper canvas {
    max-height: 80px;
}

/* Add minimal gap after weather graph to match spacing between other graphs */
.weather-canvas-wrapper {
    margin-bottom: 0px;
}

/* All graphs same height for visual consistency (except ideal dive time and wind which are taller) */
.tide-canvas-wrapper canvas,
.swell-canvas-wrapper canvas {
    max-height: 160px;
}

/* Wind graph - X-axis labels removed (now on IDEAL DIVE TIME graph) */
.wind-canvas-wrapper canvas {
    max-height: 165px;
}

.ideal-dive-time-canvas-wrapper {
    margin-top: 0px; /* No extra margin needed - parent section handles spacing */
    position: relative; /* Ensure title positioning works correctly */
}

.ideal-dive-time-canvas-wrapper canvas {
    max-height: 90px; /* Timeline graph with X-axis labels */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .multi-graph-container {
        gap: 3px;
    }

    .weather-canvas-wrapper canvas {
        max-height: 64px; /* Proportionally adjusted for mobile */
    }

    .tide-canvas-wrapper canvas,
    .swell-canvas-wrapper canvas {
        max-height: 140px;
    }

    .wind-canvas-wrapper canvas {
        max-height: 150px; /* Proportionally smaller on mobile, X-axis removed */
    }

    .ideal-dive-time-canvas-wrapper canvas {
        max-height: 90px; /* Same height on mobile with X-axis labels */
    }
}

/* Graph subsection titles - positioned inside graph area (top-left corner) */
.graph-subsection-title {
    position: absolute;
    top: 8px;
    left: 70px; /* Just after Y-axis area (60px padding + 10px margin) */
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: rgba(69, 90, 100, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid rgba(69, 90, 100, 0.3); /* Subtle border for definition */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 10;
    pointer-events: none; /* Allow clicking through to graph */
}

/* Source reference positioning - move up from default */
.multi-graph-container + .source-reference {
    margin-top: -5px; /* Move up slightly closer to graphs */
    margin-bottom: 10px;
    text-align: right;
}