/* Layout and styles from the current php.ug (phpugstyle.css), on top of
   Bootstrap 5. The top and bottom bars are sticky, so the content sits
   between them without margins that guess the bar height. */
.content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* The ribbon stays in the top-right corner, over the top bar, also
   while the page scrolls. */
.fork-on-github {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    line-height: 0;
}

@media (min-width: 992px) {
    /* Keep the login menu clear of the ribbon. */
    .navbar-login { margin-right: 150px; }
}

@media (max-width: 991.98px) {
    /* A smaller ribbon, with the menu button kept clear of it. */
    .fork-on-github img { width: 100px; height: 100px; }
    header.navbar .navbar-toggler { margin-right: 90px; }
}

abbr.required { color: var(--bs-danger); text-decoration: none; }

/* Map page: the map fills the space between the two bars. */
.map-page { height: 100vh; height: 100dvh; }

.map-page .content {
    position: relative;
    max-width: none;
    padding: 0;
}

.map-page #map {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.map-page .flashes {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: 0;
    padding: 0 60px;
    z-index: 1000;
}

.map-picker { height: 280px; }

/* The event list, copied from php.ug's /api/v1/calendar/list. */
.event-location-map { width: 100%; height: 200px; }
.event-list { column-count: 3; list-style-type: none; }
.event-list > li {
    border: 1px solid gray;
    border-radius: 1em;
    margin: 1rem;
    padding: 1rem;
}
.event-list h4 {
    border-radius: 1rem 1rem 0 0;
    background-color: gray;
    color: white;
    margin: -1rem -1rem 1rem -1rem;
    padding: 1rem;
}
.event-list h4 a { color: white; }

/* The calendar's tooltip, as wide as php.ug's jBox tooltip. */
.event-tooltip { --bs-popover-max-width: 200px; }

/* Place search on the picker maps, like the magnifier on the old php.ug. */
.place-search { background: #fff; }
.place-search > a { float: left; }
.place-search input {
    float: left;
    width: 14rem;
    height: 30px;
    margin: 0;
    border: 0;
    border-left: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
}
.place-search-results {
    clear: both;
    max-width: 18rem;
    max-height: 12rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem .5rem;
    border-top: 1px solid #ccc;
    font-size: .8125rem;
}
.leaflet-bar .place-search-results a {
    display: block;
    width: auto;
    height: auto;
    padding: .25rem 0;
    line-height: 1.3;
    text-align: left;
    border: 0;
    background: none;
}

.leaflet-popup-content ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

.leaflet-popup-content li {
    display: inline-block;
    padding-left: .5em;
}

.leaflet-container a { color: rgb(64, 64, 64); }

.leaflet-popup-content h4 { font-size: 1.125rem; }
.leaflet-popup-content h5 { font-size: .875rem; margin-top: .75rem; }
.leaflet-popup-content .bi { font-size: 1.25rem; }
.leaflet-container a.badge { color: #fff; }

/* Text pages */
.prose { max-width: 760px; overflow-wrap: break-word; }
.prose dt { margin-top: 1rem; }
.prose dd { margin-left: 0; }
.prose iframe { max-width: 100%; }
.person { display: flex; gap: 1rem; align-items: flex-start; }
.person img { border-radius: 50%; }
.reversed { unicode-bidi: bidi-override; direction: rtl; }

/* The next event in the map popup, spaced like on php.ug (Bootstrap 3). */
.popup .next_event dd {
    margin-bottom: 0;
}

/* The map pins by state. Leaflet's pin is an image, so a filter colours it. */
.marker-promoted {
    filter: grayscale(1);
}

.marker-inactive {
    filter: hue-rotate(190deg) saturate(2) brightness(1.3);
}

.marker-abandoned {
    filter: hue-rotate(145deg) saturate(2) brightness(1.1);
}