/* SPDX-License-Identifier: AGPL-3.0-or-later */
/*
veg - Display vegetarian and vegan places around you
Copyright (C) 2025  EpicKiwi

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

html, body {
    margin: 0;
    padding: 0;
}

:root {
    font-family: sans-serif;
    --vegetarian-color: #e2c500;
    --vegan-color: #008c44;
    --closed-color: orangered;
    --opened-color: green;
}

#map {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

body > header {
    pointer-events: none;
    height: calc(100vh - 4.5rem - 30px);
}

#map .leaflet-bottom.leaflet-right {
    bottom: calc(4rem + 30px);
    right: calc(15px + 0.5rem);
}

#map .locate-button.disabled {
    color: rgba(0,0,0,0.3);
    color: color-mix(in srgb, currentColor, transparent 70%);
    background-color: color-mix(in srgb, currentColor, white 80%);
}

#map .locate-button.found {
    color: rgb(0, 85, 255);
    background-color: color-mix(in srgb, currentColor, white 90%);
    font-weight: bold;
}

#map .leaflet-marker-icon {
    border: none;
    background: none;
}

#map .leaflet-marker-icon img {
    width: 22px;
    position: relative;
    z-index: 1;
}

#map .leaflet-marker-icon {
    &.vegetarian,
    &.vegetarian-option {
        --marker-color: var(--vegetarian-color);
    }

    &.vegan,
    &.vegan-option {
        --marker-color: var(--vegan-color);
    }
}

#map .leaflet-marker-icon .place-name {
    font-weight: bolder;
    text-align: center;
    margin: 0;
    width: 100px;
    margin-left: 50%;
    transform: translateX(-50%) translateY(-5px);
    color: color-mix(in lab, var(--marker-color), darkblue 30%);
    z-index: 0;
    --outline-color: color-mix(in lab, var(--marker-color), white 70%);
    text-shadow: 2px 0px 0px var(--outline-color),
        0px 2px 0px var(--outline-color),
        -2px 0px 0px var(--outline-color),
        0px -2px 0px var(--outline-color),
        2px 2px 0px var(--outline-color),
        -2px -2px 0px var(--outline-color),
        -2px 2px 0px var(--outline-color),
        2px -2px 0px var(--outline-color);
}

#map:is(
    [data-zoom-level="0"],
    [data-zoom-level="1"],
    [data-zoom-level="2"],
    [data-zoom-level="3"],
    [data-zoom-level="4"],
    [data-zoom-level="5"],
    [data-zoom-level="6"],
    [data-zoom-level="7"],
    [data-zoom-level="8"],
    [data-zoom-level="9"],
    [data-zoom-level="10"],
    [data-zoom-level="11"],
    [data-zoom-level="12"],
    [data-zoom-level="13"],
    [data-zoom-level="14"],
) .leaflet-marker-icon {

    &.vegetarian,
    &.vegetarian-option {
        --marker-color: var(--vegetarian-color);
    }

    &.vegan,
    &.vegan-option {
        --marker-color: var(--vegan-color);
    }

    &::before {
        display: block;
        content: "";
        width: 25%;
        height: 25%;
        margin: 25%;
        border-radius: 100%;
        background: var(--marker-color, black);
    }

    img {
        opacity: 0;
    }
}

#map:is(
    [data-zoom-level="0"],
    [data-zoom-level="1"],
    [data-zoom-level="2"],
    [data-zoom-level="3"],
    [data-zoom-level="4"],
    [data-zoom-level="5"],
    [data-zoom-level="6"],
    [data-zoom-level="7"],
    [data-zoom-level="8"],
    [data-zoom-level="9"],
    [data-zoom-level="10"],
    [data-zoom-level="11"],
    [data-zoom-level="12"],
    [data-zoom-level="13"],
    [data-zoom-level="14"],
    [data-zoom-level="15"],
    [data-zoom-level="16"],
    [data-zoom-level="17"],
    [data-zoom-level="18"],
) .leaflet-marker-icon .place-name {
    display: none;
}

body.details #map .leaflet-bottom.leaflet-right {
    bottom: calc(10vh + 4rem + 30px);
    right: calc(15px + 0.5rem);
}

body.details > header {
    height: calc(90vh - 4.5rem - 30px);
}

body > header h1 {
    margin: 0;
    font-size: 1.2rem;
    padding: 5px 15px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 0px 0px green,
        0px 2px 0px green,
        -2px 0px 0px green,
        0px -2px 0px green,
        2px 2px 0px green,
        -2px -2px 0px green,
        -2px 2px 0px green,
        2px -2px 0px green;
    
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
}

body > nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    padding: 15px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
}

#diet-filter-button {
    border: none;
    background: none;
}

#diet-filter-button > img {
    display: none;
    width: 4rem;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
}

body[data-diet-filter="vegan"] #diet-filter-button > img.vegan {
    display: inline-block;
}

body[data-diet-filter="vegan-option"] #diet-filter-button > img.vegan-option {
    display: inline-block;
}

body[data-diet-filter="vegetarian"] #diet-filter-button > img.vegetarian {
    display: inline-block;
}

body[data-diet-filter="vegetarian-option"] #diet-filter-button > img.vegetarian-option {
    display: inline-block;
}

body[data-diet-filter="vegan"] #map .leaflet-marker-icon:not(.vegan) {
    display: none;
}

body[data-diet-filter="vegan-option"] #map .leaflet-marker-icon:not(.vegan-option):not(.vegan) {
    display: none;
}

body[data-diet-filter="vegetarian"] #map .leaflet-marker-icon.vegan-option:not(.vegetarian),
body[data-diet-filter="vegetarian"] #map .leaflet-marker-icon.vegetarian-option:not(.vegan) {
    display: none;
}

#diet-select-dialog::backdrop {
    background-color: rgba(255,255,255,0.75);
}

#diet-select-dialog {
    border: none;
    background: none;
    position: absolute;
    margin-bottom: 0;
    margin-right: 0;
    padding: 19px;
    padding-bottom: 22px;
}

#diet-select-dialog label {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-auto-flow: column dense;
    align-items: center;
    column-gap: 1em;
}

#diet-select-dialog label:not(:last-child) {
    margin-bottom: 1em;
}

#diet-select-dialog label > p {
    margin: 0;
    text-align: right;
}

#diet-select-dialog label > img {
    grid-column: 2;
    width: 4rem;
}

@keyframes bubble-out {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#diet-select-dialog[open] label > img {
    animation: ease-out 0.2s bubble-out;
    animation-fill-mode: backwards;
}

#diet-select-dialog[open] label:nth-child(1) > img {
    animation-delay: 150ms;
}

#diet-select-dialog[open] label:nth-child(2) > img {
    animation-delay: 100ms;
}

#diet-select-dialog[open] label:nth-child(3) > img {
    animation-delay: 50ms;
}

#diet-select-dialog label > input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#details {
    background: white;
    border-radius: 5px 5px 0 0;
    padding: 15px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10vh;
    box-shadow: 0 0 10px rgba(0,0,0,0.35);
    position: relative;

    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: min-content;
    row-gap: 1em;
}

@media screen and (max-width: 800px) {
    #details {
        border-radius: 0;
    }
}

#details[hidden] {
    display: none;
}

#details > * {
    grid-column: 1 / 3;
}

#details .osm-note {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 1ex 1em;
    max-width: 300px;
    padding: 1ex;
    border-radius: 3px;
    border: solid 1px grey;

    font-size: 0.8em;
}

#details .osm-note > * {
    grid-column: 2;
    margin: 0;
}

#details .osm-note img {
    grid-column: 1;
    width: 4rem;
}

#details .osm-note p:last-child {
    text-align: center;
    font-weight: bold;
    grid-column: 1 / 3;
}

#details #close-details {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    padding: 15px;
    cursor: pointer;
}

#details h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

#details .tags {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: end;
    padding: 0;
    list-style-type: none;
    margin: 0;
    margin-left: 1em;
    font-size: 0.8em;
    gap: 1ex;
}

@media screen and (max-width: 800px) {
    #details h1,
    #details .tags {
        grid-column: 1 / 3;
        grid-row: unset;
        margin-left: 0;
    }

    #details .tags {
        margin-top: 1ex;
    }
}

#details .tags > * {
    display: block;
    width: fit-content;
    border: solid 1px currentColor;
    padding: 0.5ex 1ex;
    border-radius: 3px;
    margin-bottom: 0.5em;
    box-sizing: border-box;
}

#details .tags > *[hidden] {
    display: none;
}

#details .tags .vegetarian-option {
    border-width: 3px;
    border-color: var(--vegetarian-color);
    padding: calc(0.5ex - 2px) calc(1ex - 2px);
    background-color: white;
}

#details .tags .vegan-option {
    border-width: 3px;
    border-color: var(--vegan-color);
    padding: calc(0.5ex - 2px) calc(1ex - 2px);
    background-color: white;
}

#details .tags .vegetarian {
    color: white;
    border-color: var(--vegetarian-color);
    background-color: var(--vegetarian-color);
    font-weight: bold;
}

#details .tags .vegan {
    color: white;
    border-color: var(--vegan-color);
    background-color: var(--vegan-color);
    font-weight: bold;
}

#details dl {
    padding: 0;
    margin: 0;
}

#details dl > dt {
    margin-top: 0.5ex;
    display: inline-block;
    max-width: 100%;
    opacity: 0.6;
}

#details dl > dt::after {
    content: ":";
}

@media screen and (max-width: 800px) {
    #details dl > dt {
        display: block;
        font-variant: small-caps;
        font-size: 0.8em;
    }

    #details dl > dt::after {
        content: unset;
    }
}

#details dl > dd {
    display: inline;
    padding: 0;
    margin: 0;
}

#details dl > dd::after {
  content:"\A";
  white-space: pre;
}

#details dd a {
    color: inherit;
    text-decoration: none;
}

#details dl > [hidden] {
    display: none;
}

.opening-hours .today {
    font-weight: bold;
}

.opening-hours .day {
    display: inline-block;
    width: 3em;
}

.opening-hours[open] summary .time-summary {
    display: none;
}

.opened .opening-hours summary,
.opened .opening-hours .today {
    color: var(--opened-color);
}

.closed .opening-hours summary,
.closed .opening-hours .today {
    color: var(--closed-color);
}