/*
 * Frontend styles for SLA World Map plugin.
 */

/* Container for the world map. Set a minimum height so the map is visible */
.sla-world-map-container {
    width: 100%;
    height: auto;
    max-width: 100%;
    min-height: 400px;
    overflow: hidden;
    position: relative;
    /* Position the container above other content by setting a low z-index.
       Themes with absolute positioned elements may overlap the map. Setting
       a defined z-index helps avoid the SVG being covered. */
    z-index: 10;
    /* Prevent any default bottom margin that could create excessive
       whitespace between the map and the legend. */
    margin-bottom: 0;
}

.sla-world-map-container svg {
    width: 100%;
    height: auto;
    display: block;
    /* Ensure the SVG itself participates in stacking context. */
    position: relative;
    /* Place the SVG above other elements. Setting a higher z-index and
       a relative position ensures it is not obscured by menus or other
       page elements. */
    z-index: 100;
}

/* Wrapper around the logo and the map container */
/* Wrapper around the logo and the map container. We avoid positioning the logo
   absolutely so it does not overlap the map. The wrapper simply stacks
   the logo above the map. */
.sla-world-map-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Logo displayed at the top left of the map */
/* Logo displayed above the map. Position relative so it flows normally and
   does not overlap the map. */
.sla-world-map-logo {
    margin-bottom: 10px;
}
.sla-world-map-logo img {
    max-width: 200px;
    height: auto;
    display: block;
}

/* Modal overlay for enlarged map */
/* Modal overlay for enlarged map. We use opacity and visibility to
   control show/hide states while keeping the flex centering.
   When hidden, pointer-events are disabled. */
.sla-world-map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the overlay appears above all other site elements (e.g. sticky menus, sidebars). */
    z-index: 100000;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Active state for the overlay */
.sla-world-map-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sla-world-map-modal {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    /* Allow the modal to expand relative to the viewport so that the enlarged map
       has room to breathe. The width is limited to 90% of the viewport and the
       maximum width is set in viewport units instead of a fixed pixel value.
       A vertical scrollbar will appear when the content (e.g. tall maps) overflows. */
    max-width: 90vw;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Close button inside modal */
.sla-world-map-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
    color: #333;
    font-weight: bold;
}

/* Ensure cloned SVG fits within the modal */
.sla-world-map-modal-content svg {
    width: 100%;
    height: auto;
}

/* Legend styling. Appears below the map and inside the modal.
   It lists each SLA with its associated colour and optional description. */
.sla-world-map-legend {
    /* Space between the map and the legend on desktop. On mobile this will
       be reduced further in the media query below. */
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}
.sla-world-map-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sla-world-map-legend li {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
/* Legend description text that appears above the legend list */
.sla-world-map-legend-description {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}
.sla-world-map-legend .sla-color-block {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 2px;
}

/* Tooltip for country hover information */
.sla-world-map-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    pointer-events: none;
    font-size: 14px;
    z-index: 99999;
    max-width: 200px;
    line-height: 1.4;
}

/* Tabs for continent filtering */
.sla-world-map-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.sla-world-map-tabs button {
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease;
}
.sla-world-map-tabs button:hover {
    background: #e5e5e5;
}
.sla-world-map-tabs button.active {
    background: #0073aa;
    color: #fff;
    border-color: #006799;
}

/* Wrapper for continent select; hidden by default on desktop */
.sla-world-map-select-wrapper {
    display: none;
    margin-bottom: 10px;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 600px) {
    /* Hide button tabs on small screens */
    .sla-world-map-tabs {
        display: none;
    }
    /* Show the dropdown select */
    .sla-world-map-select-wrapper {
        display: block;
    }
    /* Reduce minimum height of map container */
    .sla-world-map-container {
        /* Further reduce the minimum height on small screens to minimise
           whitespace between the map and subsequent content. */
        min-height: 200px;
        margin-bottom: 0;
    }
    /* Reduce spacing around logo */
    .sla-world-map-logo {
        margin-bottom: 6px;
    }
    /* Reduce spacing above legend */
    .sla-world-map-legend {
        margin-top: 2px;
    }
    /* Make modal take up full viewport and reduce padding */
    .sla-world-map-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        padding: 10px;
        border-radius: 0;
    }
}