/* Project-specific styles for the Guidance section elements ONLY */

/* Add overflow-x: hidden to body here, as it cannot go in header.php */
body {
    overflow-x: hidden;
}

/* In your CSS file (e.g., in a custom CSS or overriding jqvmap.min.css if needed) */

.map-container {
    /* Example: Give it a max width and center it */
    max-width: 900px; /* Adjust this value as needed for your design */
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden; /* Prevent horizontal scroll if something inside still overflows */
}

#vmap {
    width: 100%; /* Make it fill the container */
    height: 400px; /* Set a desired height, or adjust as needed */
    /* If the map itself still causes overflow, ensure box-sizing is border-box */
    box-sizing: border-box;
}


/* Styles for the region list */
.region-list {
    margin-top: 40px;
    text-align: center;
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.region-card {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}

.region-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.region-card.coming-soon {
    background-color: #f0f0f0;
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    border: 1px dashed #ccc;
}
.region-card.coming-soon:hover {
    transform: none;
    box-shadow: none;
}

/* Continent Page Specifics (country sections and accordions) */
.country-section {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Authority Card (accordion wrapper) */
.authority-card {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

/* Fix for the ::after overlay */
.authority-card::after {
    display: none !important;
}

/* Accordion Header (the clickable button) */
.accordion-header {
    background-color: #e9e9e9;
    color: #333;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
}

.accordion-header:hover {
    background-color: #dcdcdc;
}

.accordion-header.active {
    background-color: #dcdcdc;
}

.accordion-icon {
    font-size: 0.8em;
    margin-left: 10px;
    transition: transform 0.3s;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

/* Accordion Content (the hidden/shown part) */
.accordion-content {
    padding: 15px 20px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordion-content li {
    margin-bottom: 8px;
}

.accordion-content li a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

.accordion-content li a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* For the easter egg site */
.easter-egg {
    background-color: #ADD8E6;
    color: #000;
}
.easter-egg:hover {
    background-color: #87CEEB;
}

/* Responsive Design (specific to region-grid) */
@media (max-width: 768px) {
    .region-grid {
        grid-template-columns: 1fr;
    }
}

/* Specific styles for JQVMap zoom in button */
.jqvmap-zoomin {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    line-height: 40px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Explicitly position it */
    top: 10px !important; /* Adjust this value as needed to move it down from the top */
    left: 10px !important; /* Adjust this value as needed to move it from the left */
    /* Ensure it has a position value for top/left to work */
    position: absolute !important;
}

/* Specific styles for JQVMap zoom out button */
.jqvmap-zoomout {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    line-height: 40px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Explicitly position it */
    top: 60px !important; /* Adjust this value to place it below the zoom-in button, ensure adequate spacing */
    left: 10px !important; /* Keep it aligned with the zoom-in button */
    /* Ensure it has a position value for top/left to work */
    position: absolute !important;
}

/* You might also need to adjust their positioning slightly if they are off after resizing,
   depending on the JQVMap version and its default button layout.
   For example, you might add some margin or adjust top/left/right/bottom if they are
   absolutely positioned within their container.
*/
.jqvmap-zoomin, .jqvmap-zoomout {
    /* Example: Adjust margin or position if needed after size change */
    /* margin: 5px; */
}
/* Ensure dropdown menu is absolute and on top when shown */
.navbar-custom .dropdown-menu.show { /* Target the dropdown when it has the 'show' class */
    position: absolute !important; /* Force absolute positioning */
    z-index: 1060 !important;     /* Force a high z-index */
}

/* Also ensure your general dropdown-menu z-index is still present for other cases */
.dropdown-menu {
    z-index: 1060 !important; /* Ensure this is still there */
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}