/* Styles specific to Scrollytelling elements */

/* County Highlight Border Style */
.county-highlight-border {
    fill: none;
    stroke: black;
    stroke-width: 1.5px;
    pointer-events: none;
}

/* NEW: Annotation Line Style */
.annotation-line {
    stroke: #555;
    stroke-width: 1px;
    stroke-dasharray: 3,3;
}

/* REMOVE Styles for Text Above/Below Map */
/*
.scrolly-map-text {
    position: absolute; 
    left: 10px; 
    right: 10px; 
    background-color: rgba(248, 249, 250, 0.85); 
    padding: 10px;
    border-radius: 4px;
    z-index: 10; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
    font-size: 0.9rem;
    color: var(--text-color);
}

#scrolly-map-text-above {
    top: 10px; 
}

#scrolly-map-text-below {
    bottom: 10px; 
}

.scrolly-map-text.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
}
*/

/* NEW: Styles for SVG Map Annotation Boxes (using foreignObject) */
.map-annotation-box {
    /* Styles for the embedded HTML div */
    background-color: rgba(240, 240, 240, 0.9);
    padding: 6px;
    border-radius: 4px;
    font-size: 14px; /* INCREASED font size again */
    font-family: var(--ui-font), sans-serif;
    color: #333;
    text-align: left; /* CHANGED to left */
    line-height: 1.3;
}

.map-annotation-box strong {
    font-weight: 600;
}

/* NEW: Separate class for Scatterplot Annotations */
.scatter-annotation-box {
    /* Copy styles from map-annotation-box */
    background-color: rgba(240, 240, 240, 0.9);
    padding: 6px;
    border-radius: 4px;
    font-size: 14px; /* Keep increased font size */
    font-family: var(--ui-font), sans-serif;
    color: #333;
    line-height: 1.3;
    /* Set text-align to CENTER specifically */
    text-align: left; /* CHANGED TO LEFT */
}

.scatter-annotation-box strong {
    font-weight: 600;
}

/* NEW: Scrollytelling Title Overlay */
#scrolly-title {
    position: absolute;
    top: 2rem; /* Adjust vertical position */
    left: 4rem; /* Adjust horizontal position */
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8rem; /* Adjust size as needed */
    font-weight: 600;
    color: #4a4e69;
    z-index: 10; /* Ensure title is above graphics */
    pointer-events: none; /* Allow interaction with elements underneath */
    line-height: 1.2;
}