:root {
  --site-background:#EAF6F7;
  --line-chart-line-color: #F3C620;
  --line-chart-background: var(--site-background);
  --main-font: "Helvetica Neue", Arial, sans-serif;
  --line-chart-axis-color:black;
  --state-border-color:whitesmoke;
  --state-border-width: 2px;
  --main-font-color: white
}

/* Basic body and container styling */
body {
    font-family: var(--main-font);
    background-color: var(--site-background);
    color: var(--main-font-color);
    margin: 0;
    display: flex; /* Establishes a flex container */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* This centers everything vertically */
    min-height: 100vh; /* Ensures the body takes up the full viewport height */
}

/* Tooltip styling */
.tooltip {
    /* Styles for the tooltip container (you already have this in your JS, but it's better here) */
    position: absolute;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none; /* Prevents the tooltip from blocking mouse events */
    z-index: 1000;
    max-width: 250px;
    
}

/* Styles for the map SVG container */
#sedsmap {
    background-color: var(--site-background);
    display: block;
    width: 90%; /* Use a percentage for a fluid width */
    max-width: 800px; /* Optional: Sets a maximum size to prevent the charts from becoming too large */
    height: auto; /* Maintains the aspect ratio */
}

/* Styles for the individual state paths on the map */
.state {
    --state-border-color:#003D50;
    stroke: var(--state-border-color, white);
    stroke-width: var(--state-border-width, 2px);
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    transition: all 0.2s ease-in-out; /* Smooth transition for color changes */
}

.state:hover {
    --state-border-color:#005F6A;
    opacity: 1; /* Slightly reduce opacity on hover */
    
}

.state.selected {
    stroke: #64c7c7;
    stroke-width: 4px;
    fill: #ffff00;
}

/* Line Chart container and SVG styling */
#seds-line-chart {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--line-chart-background);
    display: block;
    width: 90%; /* Use a percentage for a fluid width */
    max-width: 800px; /* Optional: Sets a maximum size to prevent the charts from becoming too large */
    height: auto; /* Maintains the aspect ratio */
}

/* Styles for the line in the chart */
.state-line {
    fill: none;
    stroke: var(--line-chart-line-color);
    stroke-width: 3px;
    transition: all 0.5s ease-in-out; /* Smooth transition for the line path */
}

/* Styles for the axis lines */
.x-axis path, .y-axis path {
    stroke: var(--line-chart-axis-color);
    shape-rendering: crispEdges; /* Makes the axis lines sharp */
}

/* Styles for the axis tick marks */
.x-axis .tick line, .y-axis .tick line {
    stroke: var(--line-chart-axis-color);
    stroke-dasharray: 2, 2; /* Creates dashed grid lines */
}

/* Styles for the axis labels (numbers) */
.x-axis text, .y-axis text {
    font-size: 11px;
    fill: var(--line-chart-axis-color);
    font-family: var(--main-font);
}

/* Styles for the chart titles and labels */
.chart-title {
    font-size: 18px;
    font-weight: bold;
    fill: var(--line-chart-axis-color);
}

.y-label {
    font-size: 10px;
    font-weight: bold;
    fill: var(--line-chart-axis-color);
}

.usa-line {
    fill: none;
    stroke: #003d50; /* light gray for a subtle background */
    stroke-width: 1px;
    stroke-dasharray: 5, 5; /* makes the line dashed */
    
}

.stats-label {
    color: black;
    text-align: center;
    margin-bottom: 20px;
}

.main-container {
    display: flex; /* Establishes a flexbox context */
    flex-direction: column; /* Stacks the child elements vertically */
    align-items: center; /* Centers the child elements horizontally */
    width: 100%; /* Ensures the container takes up the full width */
}

/* Styles for the map and chart CONTAINERS */
#seds-map-container, #seds-line-chart-container {
    width: 90%; /* Use a percentage for a fluid width */
    max-width: 800px; /* Optional: Sets a maximum size */
    margin: 0 auto; /* Center the containers */
}

#seds-line-chart-container {
    margin-top: 40px; /* Add some space between the map and chart */
}

/* Styles for the SVG elements themselves */
#sedsmap, #seds-line-chart {
    width: 100%; /* Fill the container's width */
    height: auto; /* Let the browser calculate height based on viewBox aspect ratio */
    display: block; /* Removes any extra space below the SVG */
    background-color: var(--site-background);
}

footer {
    position: fixed; /* Anchors the footer to the viewport */
    bottom: 0; /* Aligns it to the bottom */
    left: 0; /* Aligns it to the left */
    width: 100%; /* Makes it span the full width */
    z-index: 1001; /* Ensures it stays on top of other content */

    background-color: rgba(0, 61, 80, 0.9); /* Semi-transparent dark background */
    color: var(--site-background); /* Uses the light background color for text */
    padding: 8px 0; /* Adds vertical padding */
    text-align: center; /* Centers the text */
    box-shadow: 0 -2px 6px rgba(0,0,0,0.25); /* Adds a subtle shadow on top */
}

footer p {
    margin: 0; /* Removes default paragraph margin */
    font-size: 12px; /* Sets a smaller font size for the footer text */
    color: #EAF6F7;
}