/**
 * FoHT Heysen Trail Interactive Map — fullscreen.css
 */

.foht-map-fullscreen-btn {
    position: absolute;
    top: 80px; /* below zoom controls which sit at topright */
    right: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--wp--preset--color--south-coast-cream, #fffcf2);
    color: var(--wp--preset--color--pine-forest-green, #3f4427);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.foht-map-fullscreen-btn:hover {
    background: var(--wp--preset--color--native-citrus, #eefa56);
    border-color: var(--wp--preset--color--pine-forest-green, #3f4427);
}

.foht-map-fullscreen-btn svg {
    display: block;
    pointer-events: none;
}

/* Fullscreen state */
.foht-map-outer-wrapper.is-fullscreen #map-wrapper {
	background-color: var(--wp--preset--color--south-coast-cream);
}

/* #map-wrapper top and height in fullscreen are set by JS (applyFullscreenSizes)
 * to account for the admin bar. CSS provides the fixed positioning and z-index. */
.foht-map-outer-wrapper.is-fullscreen #map-wrapper {
    position: fixed;
    inset: 0;
    z-index: 12000;
    width: 100vw;
	max-width: 100vw;
}

/* #map height in fullscreen is set by JS (applyFullscreenSizes).
 * max-height is still capped to avoid overflow. */
.foht-map-outer-wrapper.is-fullscreen #map {
	max-height: 100vh;
}

.foht-map-outer-wrapper.is-fullscreen .foht-map-controls-bar {
	position: fixed;
}

/* #elevation-div position/z-index in fullscreen is set by JS (applyFullscreenSizes)
 * so that it correctly accounts for the visible elevation-div height. */

/* WordPress admin-bar offset and elevation-div height are now handled
 * entirely by JS (applyFullscreenSizes in filter-panel.js), which measures
 * the actual admin bar height at runtime instead of relying on hardcoded
 * 32px / 46px breakpoints. No CSS overrides needed here. */