:root {
    --pico-font-family: 'Lexend Deca' !important;
}

:root:not([data-theme="dark"]), [data-theme="light"] {
    --pico-primary: #478947 !important;
    --pico-primary-background: #478947 !important;
    --pico-primary-underline: rgba(71, 137, 71, 0.5) !important;
    --pico-primary-hover: #307330 !important;
    --pico-primary-hover-background: #307330 !important;
    --pico-secondary-background: #dd966f !important;
}

:root[data-theme="dark"] {
    --pico-primary: #478947 !important;
    --pico-primary-background: #478947 !important;
    --pico-primary-underline: rgba(71, 137, 71, 0.5) !important;
    --pico-primary-hover: #307330 !important;
    --pico-primary-hover-background: #307330 !important;
}

html {
    scroll-padding-top: 6rem;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100svh;

    & > header {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: var(--pico-background-color);
        box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
    }

    & > footer {
        background-image: var(--placeauvelo-banner-bike);
        background-size: auto 4rem;
        background-repeat: repeat-x;
        background-position: bottom;
        padding-block-end: 4rem !important;
    
        & nav {
            flex-wrap: wrap;
            justify-content: center;
        }
    
        & ul.pages {
            flex-wrap: wrap;
            gap: var(--pico-nav-link-spacing-vertical) calc(var(--pico-nav-link-spacing-horizontal) * 2);
        }
    
        & ul.pages li {
            padding: unset;
        }
    }
}

body.admin {
    & header {
        & .site {
            position: relative;

            & sup {
                position: absolute;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: bold;
                top: 50%;
                left: 100%;
                transform: translateY(-50%);
                background-color: var(--pico-secondary-background);
                display: inline-block;
                padding: 0.3em;
                color: white;
                border-radius: .3em;
                line-height: 1;

                &.admin {
                    background-color: var(--pico-primary);
                }
            }
        }
    }
}

body.screen {
    & header {
        display: flex;
        justify-content: center;

        & p {
            margin-bottom: unset;
            display: inline-flex;
            align-items: center;
            gap: .5em;
        }

        & span {
            text-transform: uppercase;
            font-weight: bold;
            background-color: var(--pico-secondary-background);
            display: inline-block;
            padding: 0.3em;
            color: white;
            border-radius: .3em;
            line-height: 1;
            font-size: .75em;
        }
    }

    & footer {
        display: flex;
        justify-content: center;

        & a.site::before {
            content: '←';
            margin-inline-end: var(--pico-nav-link-spacing-horizontal);
        }
    }
}

body.home {
    & main {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 2rem;
        align-items: flex-start;

        & hgroup {
            flex-basis: 100%;
        }

        & section {
            flex: 1 1 20rem;
        }
    }
}

@media (min-width: 1280px) {
    footer {
        & nav {
            justify-content: space-between;
        }
    }
}

.container > section {
    display: grid;
}

.container > section > nav {
    order: -1;

    & ul {
        flex-wrap: wrap;
    }
}

.screens {
    & > div {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);

        & > div {
            border: var(--pico-border-width) solid var(--pico-muted-border-color);
            border-radius: var(--pico-border-radius);
            padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
        }
    }

    & article h3 {
        margin-block-end: unset;
    }

    & p:last-child {
        margin-block-end: unset;
    }

    & button {
        margin-block-end: unset;
    }
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.success {
    --pico-color: rgb(17, 148, 56);
}

.danger {
    --pico-color: rgb(189, 47, 47);
    --pico-underline: rgba(189, 47, 47, 0.5);
}

button.danger {
    --pico-color: var(--pico-primary-inverse);
    --pico-background-color: rgb(189, 47, 47);
    --pico-border-color: rgb(189, 47, 47);
    
    &:hover, &:focus {
        --pico-background-color: rgb(166, 27, 27);
        --pico-border-color: rgb(166, 27, 27);
    }
}

hgroup.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    & [role="button"] {
        --pico-color: var(--pico-primary-inverse) !important;
    }
}

/* Forms */

.form-alert {
    padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    box-shadow: var(--pico-box-shadow);
    border-radius: var(--pico-border-radius);

    &.form-success {
        color: #307330;
        border: var(--pico-border-width) solid var(--pico-primary-border);
    
        &:focus {
            --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-border) !important;
        }
    }

    &.form-errors {
        color: rgb(189, 47, 47);
        border: var(--pico-border-width) solid var(--pico-form-element-invalid-border-color);
    
        &:focus {
            --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
        }
    }

    p {
        color: currentColor;
        margin-bottom: unset;
    }

    ul {
        color: currentColor;
        margin-top: calc(var(--pico-spacing) * .375);;
        margin-bottom: unset;
    }
    
}

fieldset legend {
    font-size: var(--pico-font-size);
}

form label span {
    margin-inline-start: 0.5ch;
    font-style: italic;
    text-transform: lowercase;
    color: rgb(189, 47, 47);
}

form label span::before {
    content: '(';
}

form label span::after {
    content: ')';
}

form label + ul {
    color: rgb(189, 47, 47);
    font-size: smaller;
}

form select option[disabled],
form select option[value=""] {
    font-style: italic;
}

form :where(input, select, textarea, fieldset, .grid) + small {
    font-style: italic;
}

form input[disabled] {
    cursor: not-allowed;
}

form .actions {
    display: flex;
    flex-direction: column;
    gap: var(--pico-form-element-spacing-vertical);
    margin-bottom: var(--pico-spacing);

    & > * {
        margin-bottom: unset;
    }
}

.appointment-choice {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    & input {
        margin-inline-end: unset;
    }
}

.group-row fieldset {
    & span {
        flex-shrink: 0;
        border: var(--pico-border-width) solid var(--pico-form-element-border-color);
        border-top-left-radius: var(--pico-border-radius);
        border-bottom-left-radius: var(--pico-border-radius);
        padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    }
    
    & button {
        padding: var(--pico-form-element-spacing-vertical);
    }
}

.checkbox-row {
    display: flex;
    flex-direction: row;
    gap: var(--pico-block-spacing-horizontal);
    align-items: center;
}

form .payements {
    display: grid;

    & ul {
        padding: unset;
        margin-bottom: unset;
    }
    
    & li {
        list-style: none;

        & > div {
            display: flex;
            gap: var(--pico-block-spacing-horizontal);
            align-items: flex-end;

            & :first-child {
                flex: 1;
            }
        }
    }

    & > button {
        margin-left: auto;
    }
}

/* Tables */

table.fixed {
    table-layout: fixed;
}

table thead [scope="colgroup"] {
    text-align: center;
}

table tbody th {
    vertical-align: baseline;
}

table ul {
    margin-bottom: unset;
    padding-inline-start: 1rem;
}

table.form-return {
    & tbody th {
        vertical-align: middle;
    }

    select {
        margin-bottom: unset;
    }
}

/* Pagination */

#pagination {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
    align-items: center;
    justify-content: center;
    margin-block-end: var(--pico-typography-spacing-vertical);

    & > p {
        flex-grow: 0;
    }

    & > nav {
        flex-grow: 1;
        justify-content: center;
    }

    & > nav li {
        padding-block: .5rem;
    }

    & > div {
        flex-grow: 0;
        grid-column-start: 3;
        display: inline-flex;
        gap: .5rem;
        justify-content: flex-end;
        align-items: center;
    }
    
    & > div select {
        flex-grow: 0;
        width: fit-content;
        padding: .25rem 1.75rem .25rem .25rem;
        text-align: center;
    }

    & :is(p, label, select) {
        margin-block-end: unset;
    }
}

@media (min-width: 1024px) {
    #pagination {
        display: inline-grid;
        grid-template-columns: 1fr auto 1fr;
    }
}