/* ==========================================================
INFOBOX.CSS
Three-section historical information window.
The box is draggable from its top handle.
========================================================== */

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

:root {
    /*
    Initial position.
    
    The Leaflet zoom control normally occupies roughly the
    first 80px at the upper-left. Therefore the INFOBOX starts
    below it.
    
    Change these two values if your Leaflet control position
    changes.
    */
    --infobox-top: 9.2rem;
    --infobox-left: 1rem;
    
    --infobox-background: rgba(250, 250, 248, 1);
    --infobox-border: #777;
    
    --infobox-font:
    Arial,
    Helvetica,
    sans-serif;
    
    --infobox-font-size: 0.8rem;
    
    --infobox-shadow:
    0 3px 7px rgba(0, 0, 0, 0.80),
    0 6px 14px rgba(0, 0, 0, 0.40);
    
    --section-line: #d0d0d0;
}


/* ----------------------------------------------------------
MAIN WINDOW
---------------------------------------------------------- */

.history-box {
    position: absolute;
    
    top: var(--infobox-top);
    left: var(--infobox-left);
    
    /*
    Width is intentionally NOT fixed.
    
    The content determines the natural width.
    */
    width: max-content;
    
    /* Keep the INFOBOX slender, but allow enough room for names. */
    max-width: min(19rem, calc(100vw - 1rem));
    
    /*background: var(--infobox-background);
    
    border: 1px solid var(--infobox-border);*/
    border-radius: 0.5rem;
    box-shadow: var(--infobox-shadow);
    
    font-family: var(--infobox-font);
    font-size: var(--infobox-font-size);
    
    user-select: none;

    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(5px); /* Safari support */
    color: #333;
    border: 1px solid rgba(255, 255, 255, 0.25);
}


/* ----------------------------------------------------------
DRAG HANDLE
The entire INFOBOX moves when this strip is dragged.
---------------------------------------------------------- */

.infobox-drag-handle {
    height: 1.8rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: #d2d2d2;
    
    border-bottom: 1px solid #b5b5b5;
    
    cursor: grab;   
    touch-action: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
    
.infobox-drag-handle:active {
    cursor: grabbing;
}

.infobox-drag-handle span {
    display: block;
    background: #aaa;
}


/* ----------------------------------------------------------
SECTIONS
---------------------------------------------------------- */

.history-section {
    padding: 0.3rem 0.8rem 0.8rem 0.8rem;
    
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    
    border-bottom: 1px solid var(--section-line);
}

.history-section:last-child {
    border-bottom: 0;
}


/* ----------------------------------------------------------
ICONS
---------------------------------------------------------- */

.section-icon {
    flex: 0 0 35px;
    
    width: 35px;
    height: 35px;
}

.section-icon img {
    display: block;
    
    width: 35px;
    height: 35px;
    
    object-fit: contain;
}


/* The heading stays beside its icon. */
.section-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 100%;
    min-width: 0;
}

.section-header-content {
    min-width: 0;
    flex: 1 1 auto;
}

/* Lists begin below the icon, aligned with the section's left edge. */
.conflicts-list,
.magistrates-list,
.people-list {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;

    /*
    The INFOBOX itself is not selectable because the drag handle
    and section headings should not be copied. These two lists
    are the deliberate exceptions: users may select and copy
    the conflict and magistrate text.

    -webkit-user-select is included for reliable text selection
    on iPhone/iPad browsers.
    */
    user-select: text;
    -webkit-user-select: text;
}

.section-header,
.section-icon {
    user-select: none;
    -webkit-user-select: none;
}



/* ----------------------------------------------------------
TEXT
---------------------------------------------------------- */

.section-content {
    flex: 1;
    min-width: 0;
}

.full-width {
    width: 100%;
}

.section-heading {
    font-weight: 700;
    color: #000;
}

.info-first-line {
    white-space: nowrap;
}

.auc {
    color: #333;
    font-weight: 400;
}

#populationText {
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 0.9rem;
}

#conflictsText {
    margin-top: 5px;
    font-size: 0.75rem;
    line-height: 0.9rem;
}

#magistratesText {
    margin-top: 5px;
    white-space: normal;
    font-size: 0.75rem;
    line-height: 0.9rem;
}

#peopleText {
    margin-top: 5px;
    font-size: 0.75rem;
    line-height: 0.9rem;
}


/* ----------------------------------------------------------
MAGISTRATES
---------------------------------------------------------- */

.magistrates-heading {
    margin-bottom: 2px;
}

.greyedOutText {
    color: #333;
    font-weight: 400;
    font-size: 0.7rem;
}

/* ----------------------------------------------------------
MAKES MAGISTRATES TITLE BOLD
---------------------------------------------------------- */

.magistrate-title-king,
.magistrate-title-interrex,
.magistrate-title-consul,
.magistrate-title-suffect-consul,
.magistrate-title-dictator,
.magistrate-title-magister-equitum,
.magistrate-title-consular-tribune,
.magistrate-title-censor,
.magistrate-title-emperor,
.magistrate-title-co-emperor,
.magistrate-title-augustus,
.magistrate-title-caesar,
.magistrate-title-pontifex,
.magistrate-title-princeps {
    font-weight: 700;
    font-size: 0.8rem;
}



/* ----------------------------------------------------------
ADD COLORS DEPENDING ON THE TITLE
---------------------------------------------------------- */

.magistrate-title-king,
.magistrate-title-interrex {
    color: #0000ff;
}

.magistrate-title-dictator {
    color: #00bb00;
}

.magistrate-title-magister-equitum {
    color: #bb3300;
}

.magistrate-title-consul,
.magistrate-title-suffect-consul {
    color: #ff0000;
}

.magistrate-title-consular-tribune {
    color: #aa6600;
}

.magistrate-title-censor {
    color: #000088;
}

.magistrate-title-emperor,
.magistrate-title-co-emperor,
.magistrate-title-augustus,
.magistrate-title-caesar {
    color: #660077;
}

.magistrate-title-pontifex {
    color: #bb0000;
}

.magistrate-title-princeps {
    color: #ff0059;
}


/* ----------------------------------------------------------
OPTIONAL CONFLICT MARKERS
---------------------------------------------------------- */

.conflict-entry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 2px;
    margin: 2px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.conflict-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.conflict-marker {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 8px;
    vertical-align: middle;
}

.conflict-status {
    min-width: 0;
    overflow-wrap: anywhere;
}

.conflict-marker.war {
    background: #8b7b2d;
}

.conflict-marker.continuing {
    background: #ff0000;
}

.conflict-marker.battle {
    width: 14px;
    height: 14px;
    
    border-radius: 50%;
    
    background: #ff0000;
}


/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */

@media (max-width: 100%) {

    :root {
        --infobox-top: 120px;
        --infobox-left: 10px;
    }
    
    .history-box {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }
}


/* Population estimate is deliberately highlighted in red. */
    .population-number {
        color: #ff0000;
}


/* First parenthetical description in the PEOPLE list. */
.people-description {
    font-weight: 700;
    color: #000;
}