/*
Theme Name: Thème FSE climayo
Author: Camille GARCIA - lucie AUGIER
Description: Thème FSE pour le projet Climayo
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: climayo
*/


/* ==========================================================================
   BASE
   ========================================================================== */

:root {
    color-scheme: light dark;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: none;
}


/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.overflow-hidden {
    overflow: hidden !important;
}

.hide-on-desktop {
    display: none;
}

@media (width < 768px) {
    .hide-on-desktop {
        display: block !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .has-padding-on-mobile {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}


/* ==========================================================================
   HEADER
   ========================================================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .wp-block-group {
        @media (width < 768px) {
            justify-content: space-between;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
    }

    @media (width < 768px) {
        .wp-block-navigation__responsive-container-open {
            background-color: var(--wp--preset--color--accent) !important;
            color: var(--wp--preset--color--base) !important;
            border-radius: var(--wp--preset--border-radius--full) !important;
            padding: 0.5rem !important;
        }

        .wp-block-navigation__responsive-container {
            padding: 1rem !important;
            background-color: var(--wp--preset--color--accent) !important;
            color: var(--wp--preset--color--base) !important;
            background-image: url('assets/img/vagues.svg');
            background-repeat: no-repeat;
            background-position: bottom center;
            background-size: 500% auto;

            .wp-block-navigation__responsive-dialog {
                margin-top: 2rem !important;
            }
            
            .wp-block-navigation-item {
                font-size: 1.25rem !important;
            }
        }
    }
}


/* ==========================================================================
   MAIN
   ========================================================================== */

main.wp-block-group {
    padding-top: 120px !important;
}

/* Retirer le margin-top du main */
main.wp-block-group,
main.wp-block-post-content {
    margin-top: 0 !important;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Retirer le margin-top du footer */
footer.wp-block-template-part {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    footer {
        .wp-block-image {
            width: 65%;
            margin: auto;
        }
    }
}

@media (width < 768px) {
    footer {
        .wp-block-columns {
            gap: var(--wp--preset--spacing--60) !important;

            .wp-block-column {
                p {
                    text-align: center;
                }
            }
        }
    }
}


/* ==========================================================================
   CTA RESPONSIVE BAR (mobile sticky)
   ========================================================================== */

.cta-responsive-bar {
    display: none !important;
}

@media (width < 768px) {
    .cta-responsive-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .cta-responsive-bar.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }
}