/* main body structure */
body {
    --partial-border: 1px solid;

    font-family: Arial, Helvetica, sans-serif;

    margin: 0 1rem;
    height: 100dvh;
    display: grid;
    grid-template-areas: "header" "nav" "main" "footer";
    grid-auto-rows: auto auto 1fr auto;

    /* Put nav elements at the bottom for narrow (touch) screens */
    @media (max-width: 480px),
    (pointer: coarse) and (hover: none) and (max-width: 768px) {
        grid-template-areas: "header" "main" "nav" "footer";
        grid-auto-rows: auto 1fr auto auto;
        margin: 0;
    }

    header {
        padding: 0 1rem;
        border-bottom: var(--partial-border);

        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        grid-area: header;

        h1 {
            font-size: larger
        }

        nav>ul {
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            gap: 1rem;
        }
    }

    nav#main-navigation {
        padding: 0 1rem;
        grid-area: nav;
        border-bottom: var(--partial-border);

        /* Three-column grid on wider screens: breadcrumbs | center-nav | spacer */
        @media (min-width: 768px) {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 2rem;
        }

        /* Stack vertically on narrower screens */
        @media (max-width: 767px) {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 0.75rem 0;
        }

        @media (max-width: 480px) {
            border-bottom: none;
            border-top: var(--partial-border);
            gap: 0.75rem;
            padding: 0.5rem 0;
        }

        nav.breadcrumbs {
            min-width: 0;

            ol {
                padding: 0;
                display: flex;
                list-style: none;
                gap: 0.75rem;
                flex-wrap: wrap;
                align-items: center;
                font-size: smaller;
            }

            ol li::after {
                content: " / ";
                color: grey;
            }

            ol li:last-child::after {
                content: "";
            }

            li {

                /* Hide all but last 2 items on screens < 480px */
                @media (max-width: 480px) {
                    display: none;

                    /* Show only last 2 children (parent + current) */
                    &:nth-last-child(-n+2) {
                        display: flex;
                        align-items: center;
                    }
                }
            }

            a {
                text-decoration: none;
                color: inherit;
                font-size: 0.9rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0.25rem 0.5rem;

                @media (min-width: 768px) {
                    font-size: 0.95rem;
                }

                @media (max-width: 480px) {
                    font-size: 0.8rem;
                    padding: 0.25rem;
                }

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        nav.horizontal-navigation {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* justify-content: space-between; */

            @media (min-width: 768px) {
                padding: 0;
                gap: 1.5rem;
            }

            .nav-link {
                display: grid;
                text-decoration: none;
                color: black;
                min-width: 4rem;

                &:hover {
                    background-color: whitesmoke;
                }

                .nav-label {
                    font-size: smaller;
                    color: grey;

                    @media (min-width: 768px) {
                        font-size: 0.9rem;
                    }

                    @media (max-width: 480px) {
                        font-size: 0.75rem;
                    }
                }

                .nav-title {
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 0.9rem;

                    @media (min-width: 768px) {
                        font-size: 1rem;
                    }

                    @media (max-width: 480px) {
                        font-size: 0.8rem;
                    }
                }

                &.prev-link {
                    text-align: center;
                }

                &.next-link {
                    text-align: center;
                }
            }

            .nav-link-disabled {
                cursor: default;
                background-color: transparent;
                opacity: 0.6;

                &:hover {
                    background-color: transparent;
                }
            }
        }

        /* nav.horizontal-navigation {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.75rem 0;

            @media (min-width: 768px) {
                padding: 0;
                gap: 1.5rem;
            }

            .nav-link {
                flex: 0 1 auto;
                display: flex;
                flex-direction: column;
                text-decoration: none;
                color: inherit;
                padding: 0.5rem 0.75rem;
                min-width: 5rem;

                @media (min-width: 768px) {
                    padding: 0.75rem 0.5rem;
                }

                &:hover {
                    background-color: whitesmoke;
                }

                .nav-label {
                    font-size: smaller;
                    color: grey;

                    @media (min-width: 768px) {
                        font-size: 0.9rem;
                    }

                    @media (max-width: 480px) {
                        font-size: 0.75rem;
                    }
                }

                .nav-title {
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 0.9rem;

                    @media (min-width: 768px) {
                        font-size: 1rem;
                    }

                    @media (max-width: 480px) {
                        font-size: 0.8rem;
                    }
                }

                &.prev-link {
                    text-align: left;
                }

                &.next-link {
                    text-align: right;
                }
            }

            .nav-link-disabled {
                cursor: default;
                background-color: transparent;
                opacity: 0.6;

                &:hover {
                    background-color: transparent;
                }
            }
        } */
    }

    main {
        overflow-y: hidden;
        grid-area: main;

        h2 {
            font-size: medium;
        }

        .main-scroll-container {
            height: 100%;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 100%;

            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x proximity;
            scroll-behavior: smooth;
            scrollbar-color: grey lightgrey;
            scrollbar-gutter: stable;

            /* Responsive column sizing */
            @media (min-width: 720px) {

                grid-auto-columns: 50%;

                &:has(.main-scroll-item:only-child) {
                    grid-auto-columns: 100%;
                }
            }

            @media (min-width: 1280px) {

                /* 3+ items */
                grid-auto-columns: 33.333%;

                /* 2 items exactly: Check if the 1st child is also the 2nd-from-last */
                &:has(> .main-scroll-item:first-child:nth-last-child(2)) {
                    grid-auto-columns: 50%;
                }

                /* 1 item */
                &:has(.main-scroll-item:only-child) {
                    grid-auto-columns: 50%;
                }


            }

            .main-scroll-item {
                overflow-y: scroll;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                min-width: 0;
            }
        }
    }


    footer {
        border-top: var(--partial-border);
        grid-area: footer;
    }

    a {
        text-decoration: underline dotted grey;
    }

    hr {
        display: none;
    }
}

/* universal section style */
section {
    padding: 1rem;
}

/* section specific styles */
section#transcription {
    background-color: whitesmoke;

    p,
    h2 {
        margin: 0.5rem 0;
    }
}

section#facsimile {
    img.facsimile {
        width: 100%;
        height: auto;
    }
}

section#map {
    div#map-container {
        height: 60dvh
    }
}

section#calendar-list {
    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    div.year-list {
        position: relative;
        display: grid;
        grid-template-columns: 10fr 1fr;
        button.collapse-months,
        button.expand-months {
            align-self: self-start;
            position: sticky;
            top: 0;
            padding: 0.5rem; 
            /* display: inline-block;
            
            
            left: 100%;
            right: 0;
            z-index: 100;
            */
        }
    }

    /* Note: `display: grid` auf `li.day` entfernt das Pseudo-Element `::marker` bereits von sich aus */
    /* Der obige Regelsatz bleibt aber trotzdem besthen,
    um die Absicht der Entfernung aller Listenmarker zu dokumentieren. */

    details {
        summary {
            font-weight: bold;
            background-color: whitesmoke;
            border-bottom: 1px dotted grey;
        }

        ol.month {
            padding: 0;

            /* list-style: lower-roman; */
            li.day {

                display: grid;
                grid-template-columns: 1fr 3fr;

                border-bottom: 1px dotted grey;

                span.date {
                    padding: 0.5rem;
                    display: grid;
                    grid-template-columns: 3rem 3rem;

                    span.weekday {
                        color: grey;
                        font-size: smaller;
                    }
                }

                ul.link {
                    li {
                        margin: 0.5rem;
                    }

                    a {
                        padding: 0.5rem;
                    }
                }
            }

            li.sunday {
                background-color: lightgrey;
            }
        }
    }


}

/* reusable styles */

.carousel-controls {
    display: none;
    gap: 1rem;
    margin: 1rem 0;

    /* Only show on wider screens */
    @media (min-width: 768px) {
        display: flex;
        justify-content: center;
    }

    .carousel-btn {
        padding: 0.5rem 1rem;
        background-color: transparent;
        border: var(--partial-border);
        color: inherit;
        cursor: pointer;
        font-size: 0.9rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s;

        &:hover:not(:disabled) {
            background-color: whitesmoke;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
}

.carousel-markers {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;

    .carousel-marker {
        width: 0.75rem;
        height: 0.75rem;
        padding: 0;
        background-color: lightgrey;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: grey;
        }

        &.active {
            background-color: #333;
        }
    }
}

ul.grid-number-list {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
    gap: 1rem;
    list-style: none;

    li {

        /* text-align: center; */
        a {
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            /* min-height: 44px; Apple/Google recommended minimum touch target */
            min-width: 44px;
            text-decoration: none;
        }
    }
}

button {
    border-radius: 0;
    border: 1px solid lightgrey;
}