/* wsc-country-progress-map.css */

/* Map container */
#wsc-country-progress-map {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden; /* keep controls inside; no extra whitespace */
    border: 1px solid #e7e3e3;
    border-radius: 6px;
    padding: 0.8rem 0.8rem 1.2rem 0.8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    margin: 0 0 10px;
}

/* Tooltip (created in JS on body) */
.wsc-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    pointer-events: none;
    z-index: 10000;
}

/* Zoom controls */
#wsc-country-progress-map .wsc-zoom-controls {
    position: absolute;
    bottom: 1rem;
    left: 1rem !important;   /* force to left */
    right: auto !important;  /* cancel inline right */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1000;
}
.wsc-zoom-controls button {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

/* ———————————————— */
/* SUMMARY BLOCKS (two columns) */
/* ———————————————— */
.wsc-summary-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 1rem;

    /* CLS fix: reserve space so layout doesn’t jump */
    min-height: 420px;
}

/* each block holds title → card → link */
.wsc-summary-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(50% - 20px);
    justify-content: center;
}
.wsc-summary-block h2.wp-block-heading {
    margin: 0 0 20px 0 !important;
}

/* on very narrow screens stack */
@media (max-width: 600px) {
    .wsc-summary-block {
        flex: 1 1 100%;
    }
    .wsc-summary-cards {
        min-height: 480px; /* extra headroom for stacked layout */
    }
}

/* ——————————————————————————————— */
/* Title above the card, centered */
/* ——————————————————————————————— */
.wsc-summary-block > .wsc-summary-title {
    margin: 0 0 calc(0.5rem + 5px);
    font-size: 1.1rem;
    text-align: center;
}

/* ——————————————————————— */
/* Individual card styling */
/* ——————————————————————— */
.wsc-card {
    border: 1px solid #e7e3e3;
    border-radius: 6px;
    padding: 0.8rem 0.8rem 1.2rem 0.8rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    color: #343434 !important;
    width: 100%;
}

/* ————————————————————————————————————— */
/* Tight list spacing using CSS counter */
/* ————————————————————————————————————— */
.wsc-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: countryRank;
    text-align: left;
}
.wsc-summary-list li {
    counter-increment: countryRank;
    position: relative;
    margin: 0.25rem 0;
    padding-left: 2em;
}
.wsc-summary-list li::before {
    content: counter(countryRank) ".";
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
}

/* De-emphasize the “(20 out of 24)” */
.wsc-summary-list li .wsc-details {
    font-weight: 400;
    font-size: 0.8em;
    color: #888;
    margin-left: 0.1em;
    position: relative;
    bottom: 2px;
}

/* ———————————————————————————————— */
/* See complete rankings link below card */
/* ———————————————————————————————— */
.complete-rankings {
    margin: 1rem 0 0 0.3rem;
}
.fi.fi-br-angle-circle-right {
    margin: 0 7px 0 0;
    position: relative;
    top: 2px;
}