/* styles.css */

body {
    background-color: black;
    margin: 0;
    padding: 0;
    color: white;
    font-family: sans-serif; /* Added a default font */
}

.image-map-container {
    position: relative; /* Crucial for absolute positioning of links */
    max-width: 1920px; /* Optional: Set max width if needed */
    margin: 0 auto;   /* Center container if max-width is set */
    line-height: 0;   /* Prevent extra space below image */
}

.image-map-container img {
    display: block; /* Prevents extra space */
    max-width: 100%;
    height: auto;
}

.image-map-container .map-link {
    position: absolute;
    display: block;
    /* background-color: rgba(0, 255, 0, 0.2); /* Green overlay for debugging */
    /* border: 1px solid red; /* Red border for debugging */
    text-decoration: none; /* Hide link appearance */
    color: transparent;    /* Hide link appearance */
    /* Add for better accessibility outline on focus, adjust as needed */
    outline-offset: 2px;
}
.image-map-container .map-link:focus-visible {
     outline: 2px solid cyan;
}


.contact { /* Style for any potential contact text outside the map */
    text-align: center;
    margin: 20px;
    line-height: normal;
}

/* ======================================= */
/*       Overlay Link Positions (%)        */
/* ======================================= */
/* Calculated as: (coord / dimension) * 100% */

.link-page2 {
    left: 0;                 /* 0 / 1920 * 100% */
    top: 0;                  /* 0 / 1080 * 100% */
    width: 100%;             /* 1920 / 1920 * 100% */
    height: 89.8148%;        /* 970 / 1080 * 100% */
}

.link-email {
    left: 18.3854%;         /* 353 / 1920 * 100% */
    top: 92.9629%;          /* 1004 / 1080 * 100% */
    width: 30.8333%;        /* (945 - 353) / 1920 * 100% */
    height: 5.6481%;        /* (1065 - 1004) / 1080 * 100% */
}

 .link-facebook {
    left: 49.9479%;         /* 959 / 1920 * 100% */
    top: 92.5%;             /* 999 / 1080 * 100% */
    width: 15.9375%;        /* (1265 - 959) / 1920 * 100% */
    height: 7.4074%;        /* (1079 - 999) / 1080 * 100% */
}

 .link-instagram {
    left: 65.9375%;         /* 1266 / 1920 * 100% */
    top: 92.7777%;          /* 1002 / 1080 * 100% */
    width: 15.7291%;        /* (1568 - 1266) / 1920 * 100% */
    height: 7.1296%;        /* (1079 - 1002) / 1080 * 100% */
}