/****** Styles Common to all pages ********/
:root {
    --light-green: #33c026;
    --light-cyan: #339999;
    --light-yellow: #E6A900;
    --light-brown: #925C26;
    --light-red: #C00000;
    --light-purple: #B800B8;
    --light-marine: #6A4F8B;
    --light-blue: #456BD6;
    --light-turquoise: #00B886;
    --dark-green: #10600C;
    --dark-cyan: #1C5362;
    --dark-yellow: #A07400;
    --dark-brown: #5C3815;
    --dark-red: #632523;
    --dark-purple: #640064;
    --dark-marine: #402E54;
    --dark-blue: #263D7C;
    --dark-turquoise: #007F5B;
}

body { margin: 0; }
html { font-size: 100%; font-family: 'Lato'; }

* { font-size: inherit; font-family: inherit; }
    

/****** Textual Elements ********/
h1 { font-weight: bold; fon-size: 2rem;}
p { font-size: 1.5rem; }
a { font-size: 1.5rem; }

span.large { font-size: larger; }
span.bold { font-weight: bolder; }

span.cyan { color: var(--light-cyan); }
span.green { color: var(--light-green); }
span.green { color: var(--dark-green); }
span.quote {
    .txt::before {
        content: '«';
    }
    .txt::after{
        content: '»';
    }
    .author {
        font-style: italic;
    }
}

/********* Gradients effects *********/
.lgreen { --color: var(--light-green); }
.lcyan { --color: var(--light-cyan); }
.lyellow { --color: var(--light-yellow); }
.lbrown { --color: var(--light-brown); }
.lred { --color: var(--light-red); }
.lpurple { --color: var(--light-purple); }
.lmarine { --color: var(--light-marine); }
.lblue { --color: var(--light-blue); }
.lturquoise { --color: var(--light-turquoise); }
.dgreen { --color: var(--dark-green); }
.dcyan { --color: var(--dark-cyan); }
.dyellow { --color: var(--dark-yellow); }
.dbrown { --color: var(--dark-brown); }
.dred { --color: var(--dark-red); }
.dpurple { --color: var(--dark-purple); }
.dmarine { --color: var(--dark-marine); }
.dblue { --color: var(--dark-blue); }
.dturquoise { --color: var(--dark-truquoise); }


.grad-left {
    background-image:
        linear-gradient(90deg, var(--color) 0%, transparent 50%);
}

.grad-right {
    background-image:
        linear-gradient(-90deg, var(--color) 0%, transparent 50%);
}

.grad-bl {
    background-image: 
        radial-gradient(circle at bottom left, var(--color) 0%, transparent 50%);
}

.fade-out-left {
    position: relative;
}

.fade-out-left:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: 
        linear-gradient(to left, white 0%, transparent 15%);
}   

.fade-out-right {
    position: relative;
}

.fade-out-right:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: 
        linear-gradient(to right, white 0%, transparent 15%);
}   

/********* Navigation *********/
nav {
    /* Childrens */
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: end;
    gap: 5rem;

    .menu {
        display: grid;
        place-content: center;
        position: relative;
        background-color: white;
        border-top-right-radius: .5rem;
        border-top-left-radius: .5rem;
        height: min-content;
        width: max-content;

        &:has(ul) {
            --s: .9rem;

            &::after {
                content:'';
                width: var(--s);
                height: var(--s);
                position: absolute;
                background-color: white;
                bottom: 0;
                right: 100%;
                mask: radial-gradient(circle var(--s) at top left, #0000 98%,#000) top left;
            }

            &::before {
                content:'';
                width: var(--s);
                height: var(--s);
                position: absolute;
                background-color: white;
                bottom: 0;
                left: 100%;
                mask: radial-gradient(circle var(--s) at top right, #0000 98%,#000) top right;
            }
        }

        &:not(:has(ul)) {
            border-bottom-right-radius: .5rem;
            border-bottom-left-radius: .5rem;
        }

        &:hover {
            animation: fade-shadow-in .3s forwards;
            ul {
                display: flex;
                flex-direction: column;
                gap: .5rem;
                animation: fade-drop-in .3s forwards;
            }
            a {
                text-decoration: underline; 
            }
        }

        a {
            font-weight: medium;
            height: min-content;
            color: black;
            text-decoration: none;
            margin-left: .8rem;
            margin-right: .8rem;
            margin-bottom: .8rem;
            margin-top: .8rem;
        }

        ul {
            display: none;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100%;
            margin: 0 auto;
            width: max-content;
            padding: 1rem;

            flex-direction: column;
            align-items: center;
            list-style-type: none;

            background-color: white;
            border-radius: .5rem;
        }
    }
}

@keyframes fade-drop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 100%;
    }
}
@keyframes fade-shadow-in {
    from {
    }

    to {
        filter: drop-shadow(0 5px 3px black);
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;

    /* 15% of view height */
    box-sizing: border-box;
    height: 15vh;
    width: 100vw;
    padding: 1em;

    /* Font */
    font-size: 200%;
    font-weight: 400;

    background-image: 
        linear-gradient(white 95%, transparent 100%);

    /* Childrens */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    > .logo {
        display: flex;
        flex-direction: row;
        margin-right: 4em;
        height: 3em;
        gap: 10px;
        grid-row: 1 / 2;
        > #logo {
            height: 100%;
        }
    }
}

/********* Sections *********/
section {
    width: 100vw;
    min-height: 85vh;
    font-size: 18pt;
    height: min-content;
}

section.center {
    display: grid;
    place-content: center;
}

section.columns {
    display: grid;
    align-items: center;
    font-size: 20pt;
    grid-template-columns: 1fr 1fr 1fr;

    > .column {
        min-height: 85vh;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: start;
        &.txt {
            padding-top: 2rem;
            padding-left: 2rem;
            padding-right: 2rem;
            justify-content: center;
        }

        > p:first-child {
            margin-top: 0;
        }
            
        &.imgs {
            display: flex;
            flex-direction: column;
            > .img {
                flex-grow: 1;
                flex-shrink: 0;
                width: 100%;
                background-size: cover;
                background-position: center;
            }
            > img {
                flex: 1;
                width: 100%;
                height: auto;
            }
        }
        > .img-banner {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
            > img { width: fit-content; height: fit-content; }
        }
    }
}

@media screen and (max-width: 1400px) {
    section.columns {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        .column {
            &.span-before{
                grid-column: 1 / -1;
                grid-row: 1 / 2;
                &.imgs {
                    flex-direction: row;
                }
            }
            &.span-after {
                grid-column: 1 / -1;
                grid-row: 2 / 3;
                &.imgs {
                    flex-direction: row;
                }
            }

        }
    }
}

@media screen and (max-width: 900px) {
    section.columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        .column {
            >.first { gid-row: 1/2; }
            >.second { gid-row: 2/3; }
            >.third { gid-row: 3/4; }
        }
    }
}

/* Footer */
footer {
    a {
        font-weight: medium;
        height: min-content;
        color: black;
        text-decoration: none;
    }

    #nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10%;

        .menu {
            display: flex;
            flex-direction: column;
            align-items: start;
            list-style-type: none;
            list-style-type: none;
            width: max-content;
            :first-child {
                font-weight: bold;
            }
        }
    }
}

section > .image-grid {
    margin: 10%;
    height: auto;
    width: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    > .column {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1 1 1;
        > img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    }

}