@layer reset, base, components;

@layer reset {
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }
}

@layer base {
    :root {
        --font-system-ui: system-ui, sans-serif;
        --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
        --background-color: #eef7fb;
        --text-color: #13191b;
        --primary-color: #264d5a;
        --secondary-color: #89c3d7;
        --alternate-bg: #e3ebef;
        --light-text: #ffffff;
        --dark-text: #000000;
        --text-button-color: var(--light-text);
        --font-primary: var(--font-system-ui);
        --font-secondary: var(--font-neo-grotesque);
        --font-small: 0.825rem;
        --font-base: 1rem;
        --font-medium: 1.15rem;
        --font-large: 1.35rem;
        --font-larger: 1.5rem;
        --font-big: 1.75rem;
        --section-block: clamp(3rem, 10%, 6rem);
        --site-size-sm: 560px;
        --site-size-lg: min(1040px, 100% - 2rem);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --background-color: #040d11;
            --text-color: #e4eaec;
            --text-button-color: var(--dark-text);
            --primary-color: #a5ccd9;
            --secondary-color: #243339;
            --alternate-bg: #132229;
        }
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        line-height: 1.6;
        font-family: var(--font-primary);
        color: var(--text-color);
        background-color: var(--background-color);
    }

    a {
        text-decoration: underline;
        text-underline-offset: 0.375em;
        color: inherit;
    }

    [href^="http"]:not([href*="danieleoneta.it"])::after {
        content: "";
        width: 11px;
        height: 11px;
        margin-left: 4px;
        display: inline-block;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        background-color: var(--text-color);
    }

    main {
        padding-block-start: 5rem;

        @media (width > 768px) {
            padding-block-start: 7.75rem;
        }
    }
}

@layer components {
    .button {
        color: var(--button-color, var(--text-button-color));
        background-color: var(--button-bg, var(--primary-color));
        padding: var(--button-padding, 0.7em 1.7em);
        text-align: center;
        text-transform: uppercase;
        font-family: var(--font-secondary);
        line-height: 1;
        border-radius: 2px;
    }
}

/* ============ HEADER STYLE ============ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
    padding-block: 1rem;
    z-index: 10;
    box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.2);

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-inline-size: calc(100% - 2rem);
        margin: auto;
        padding-inline: 1rem;

        .logo {
            font-size: var(--font-larger);
            font-family: var(--font-secondary);
        }

        .menu-toggle {
            font-size: var(--font-large);
            text-decoration: none;

            @media (width > 768px) {
            display: none;
            }
        }

        .nav-links {
            display: none;
            background-color: var(--background-color);
            text-align: right;
            list-style: none;
            flex-direction: column;

            &.active {
            display: flex;
            }

            @media (width <= 768px) {
                top: 60px;
                right: 0;
                width: 100%;
                position: absolute;
            }

            @media (width > 768px) {
            display: flex;
            flex-direction: row;
            }

            li {
                margin: 0;

                @media (width > 768px) {
                    margin-inline-start: 1rem;
                }

                a {
                    display: block;
                    text-decoration: none;
                    padding: 1rem;

                    &:hover {
                        @media (hover: hover) {
                            background-color: var(--secondary-color);
                            color: var(--light-text);
                            transition: background-color 0.3s, color 0.3s;
                        }
                    }

                    @media (width <= 768px) {
                        border-bottom: 1px solid var(--secondary-color);
                    }

                    @media (width > 768px) {
                        padding: 0.5rem 1rem;
                    }
                }
            }
        }

    }
}
@media (prefers-color-scheme: dark) {
    .site-header {
        box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 10px 11px -8px rgba(0,0,0,0.75);
    }
}
/* ============  END HEADER STYLE ============ */


/* ============ HERO STYLE ============ */
#home {
    display: grid;
    gap: 0.5rem;
    max-inline-size: var(--site-size-sm);
    padding-block: 2.75rem;
    padding-inline: 1rem;
    margin-inline: auto;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;

    h1,
    p {
        text-align: center;
    }

    h1 {
        grid-column: 1 / span 2;
        font-family: var(--font-secondary);
        font-size: var(--font-larger);
        line-height: 1;
        text-wrap: balance;

        @media (width > 768px) {
            grid-column: 1 / 2;
            text-align: left;
        }
    }

    img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        grid-column: 1 / span 2;
        box-shadow: 0 0 0 4px var(--text-color);
        margin-block: 1rem;
        margin-inline: auto;

        @media (width > 768px) {
            grid-column: 2 / 3;
            grid-row: 1 / 5;
            align-self: center;
        }
    }

    p {
        grid-column: 1 / span 2;
        text-wrap: balance;
        line-height: 1.2;

        @media (width > 768px) {
            grid-column: 1 / 2;
            text-align: left;
        }
    }

    > p:nth-of-type(1) {
        text-transform: uppercase;
        margin-block-end: 0.3rem;
    }

    a.button {
        grid-column: 1 / span 2;
        margin-block-start: 2rem;
        justify-self: center;
        text-decoration: none;

        @media (width > 768px) {
            grid-column: 1 / 2;
            margin-block-start: 1.25rem;
            justify-self: left;
        }
    }

}
/* ============ END HERO STYLE ============ */

/* ============ PHOTOS SCROLLER STYLE ============ */
.photos-scroller {
    padding-inline: 1rem;
    max-inline-size: 1024px;
    margin-inline: auto;
    margin-block: 2rem;

    .scroller {
        display: grid;
        grid-auto-flow: column;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: 1rem;

        img {
            height: 330px;
            width: 264px;
            background-color: var(--alternate-bg);
            border-radius: 4px;
            scroll-snap-align: center;
        }
    }
}
/* ============ END PHOTOS SCROLLER STYLE ============ */


/* ============ CHI SONO STYLE ============ */
#chi-sono {
    margin-block: var(--section-block);
    max-inline-size: var(--site-size-sm);
    margin-inline: auto;
    padding-inline: 1rem;
    scroll-margin-top: 6rem;

    h2 {
        margin-block-end: 0.725rem;
    }

    p:not(:first-of-type) {
        margin-block-start: 0.725rem;
    }
}
/* ============ END CHI SONO STYLE ============ */

/* ============ SERVIZI STYLE ============ */
#servizi {
    margin-block: var(--section-block);
    inline-size: var(--site-size-lg);
    margin-inline: auto;
    container-type: inline-size;
    scroll-margin-block-start: 6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;

    h2 {
        flex-basis: 100%;
    }

    h3 {
        margin-block-end: 0.725em;
        font-family: var(--font-secondary);
    }

    article {
        @container (width >= 768px) {
            flex: 1;
            min-inline-size: 300px;
        }

        background-color: var(--alternate-bg);
        padding: 1rem;
        border-radius: 0.4rem;
    }
}
/* ============ END SERVIZI STYLE ============ */

/* ============ CONTATTI STYLE ============ */
#contatti {
    margin-block: var(--section-block);
    max-inline-size: var(--site-size-sm);
    margin-inline: auto;
    padding-inline: 1rem;

    h2 {
        margin-block-end: 0.5rem;
    }

    p:first-of-type {
        margin-block-end: 1.5rem;
    }

    p:not(:first-of-type):not(:last-of-type) {
        margin-block-end: 0.5rem;
    }
}
/* ============ END CONTATTI STYLE ============ */

/* ============ SOCIAL STYLE ============ */
article.social {
    margin-block: 2rem;

    h3 {
        margin-block-end: 0.2rem;
    }

    > a:first-of-type {
        margin-inline-end: 2rem;
    }

    @media (width > 768px) {
        display: none;
    }
}
/* ============ END SOCIAL STYLE ============ */

/* ============ FOOTER STYLE ============ */
.site-footer {
    width: 100%;
    border-top: solid var(--alternate-bg) 2px;
    padding-block: 1rem;
    margin-block-start: auto;

    p {
        max-inline-size: var(--site-size-sm);
        margin-inline: auto;
        padding-inline: 1rem;
        text-align: center;
        font-size: var(--font-small);
        text-wrap: balance;
    }
}
/* ============ END FOOTER STYLE ============ */

/* ============ 404 PAGE STYLE ============ */
.page-404 {
    max-inline-size: var(--site-size-sm);
    margin-inline: auto;
    padding-inline: 1rem;
}