/* ==========================================================
GENERAL PAGE STYLES
Keep this file deliberately small.
========================================================== */

/* ======================================================
current version
v0.3.7
========================================================= */

:root {
    --page-background: #444;
    --historical-eras-top: 20px;
    --historical-eras-left: 500px;
    --historical-eras-width: fit-content;

}

/*
    --menubox-top: 20px;
    --menubox-right: 20px;


:root {
    --slider-top: 10px;
    --slider-left: 18px;
    
    --slider-width: 470px;
*/

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background: var(--page-background);
}






/* ======================================================
    SLIDER
========================================================= */


.roman-slider,
.history-box {
    z-index: 1000;
}





/* ======================================================
EVENTS
========================================================= */

.events-meadow {
    position: absolute;
    bottom: -10px;
    left: 0;
    background: url('../images/events_bar/battle_template.png') center / cover no-repeat;
    height: 50%;
    width: 50%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 1)) 
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
    pointer-events: none; 
}






/* ======================================================
TITLE
========================================================= */

.page-title {
    position: absolute;
    top: 20%;
    right: 35%;
    width: 30rem;
    height: 20rem;
    text-align: center;

    background: url('../images/shewolf_500x352.png') center / cover no-repeat;

    filter: drop-shadow(0.2rem 0.4rem 1rem #000);
    filter: drop-shadow(0.2rem 0.1rem 1rem #000);

    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

    color: #ffffff;
    font-family:
    "Charlemagne",
    "Charlemagne Std",
    "Charlemagne Standard",
    "Trajan Pro",
    "Times New Roman",
    serif;
    font-size: 3rem;
    line-height: 0.95;
    font-weight: 400;
    cursor: pointer;

    transition: transform 0.7s ease-in-out;

}

.page-title.move-up {
    transform: translateX(175%) translateY(125%);
    
}



.initials {
    color: red; 
    font-weight: 900;
    font-size: larger;
    cursor: default;
    text-shadow: 1px 1px #fff;
    pointer-events: none;
}

.historical-eras {
    position: absolute;
    top: var(--historical-eras-top);
    left: var(--historical-eras-left);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #fff;
    text-align: left;
    width: fit-content;
    padding: 2px;

    border-top: solid 2px #fff;
    border-bottom: solid 2px #fff;

    filter: drop-shadow(0 4px 7px rgba(0, 0, 0.5));
    text-shadow: (px 3px 5px rgba(0, 0, 0, 0.4));

    cursor: default;

}




/* ======================================================
HISTORICAL MAP PROTOTYPE
Temporary map canvas: no map provider is used.
========================================================= */

#leaflet-map {
    position: fixed;
    inset: 0;
    z-index: 0;
}


.historical-map-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1222px;
    height: 880px;
    transform: translate(-50%, -50%);
    /* background: #b7ad7b; */
    background-image: url(../images/leaflet_map/temp_map.png);
    cursor: grab;
    user-select: none;
    touch-action: none;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
}

.historical-map-stage.is-dragging {
    cursor: grabbing;
}


    /* ======================================================
    CITY MARKERS
    ========================================================= */

    .city-marker {
        position: absolute;
        width: 18px;
        height: 18px;
        z-index: 20;
        box-shadow: 0 0 5px rgba(0, 0, 0, 1);
        border-radius: 50%; 
    }

    .city-marker img {
        display: block;
        width: 18px;
        height: 18px;
        pointer-events: none;
        
    }

    .city-hover-tooltip,
    .city-info-tooltip {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 10px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 1);
        pointer-events: none;
        display: none;
        z-index: 200;
        white-space: normal;
        overflow-wrap: break-word;
    }


    .city-hover-tooltip {
        top: calc(100% + var(--city-hover-tooltip-gap, 8px));
        max-width: 100px;
        width: max-content;
        text-align: center;
    }

    .city-info-tooltip {
        bottom: calc(100% + var(--city-info-tooltip-gap, 10px));
        max-width: 200px;
        width: 180px;
        text-align: center;
    }

    .city-marker:not(.is-hidden):hover {
        z-index: 500;
    }

    .city-marker.is-tooltip-open {
        z-index: 1000;
    }

    .city-marker:not(.is-hidden):hover .city-hover-tooltip {
        display: block;
    }

    .city-info-tooltip.is-visible {
        display: block;
    }

    .city-marker.is-hidden {
        display: none;
    }


    /* ======================================================
    BATTLE MARKERS
    ========================================================= */







    /* ======================================================
    EVENTS MARKERS
    ========================================================= */








    /* ======================================================
    PROVINCE MARKER
    ========================================================= */





    

    /* ======================================================
    DEV MARKER
    ========================================================= */