/**
 * Theme Name: Opinacle
 * Theme URI: https://insectes.org/
 * Author: Office pour les insectes et leur environnement
 * Author URI: https://insectes.org/
 * Description: Thème du site principal de l'Opie
 * Requires at least: 6.4
 * Tested up to: 6.6
 * Requires PHP: 8.3
 * Version: 2.10.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: opinacle
 *
 * As much as possible the theme must be configured in the site editor,
 * then have its changes backported to theme.json by exporting it from
 * the site editor and applying changes to the files here. Styling in
 * this stylesheet is specifically for cases that are not supported by
 * the site editor and its styling parameters.
 */

:root {
    --opie-green: #109877;
    --opie-beige: #e7dbc1;
    --opie-red: #ba2451;
    --opie-blue: #395ca3;
    --opie-green-light: #49e3bd;
    --opie-beige-light: #faf1de;
    --opie-red-light: #ed5e89;
    --opie-blue-light: #7ea0e6;
    --opie-green-dark: #05634c;
    --opie-beige-dark: #b9af9a;
    --opie-red-dark: #6b0625;
    --opie-blue-dark: #0b255a;
    --opie-rouge-revue: #CE1E25;
    --opie-rouge-revue-dark: #670f12;
    --opie-green-slightly-dark: #0e896b;

    --opie-base: #f9f9f9;
    --opie-base-2: #ffffff;
    --opie-contrast: #111111;
    --opie-contrast-2: #636363;
    --opie-contrast-3: #A4A4A4;
    --opie-accent: #109877;
    --opie-accent-2: #e7dbc1;
    --opie-accent-3: #395ca3;
    --opie-accent-4: #ba2451;
    --opie-accent-5: #b5bdbc;
    --opie-accent-6: #FC4C02;
    --opie-accent-7: #FFB600;
    --opie-accent-8: #78BE21;
    --opie-accent-9: #00A3E0;
    --opie-accent-10: #CE1E25;

    --opie-font-size-small: 0.9rem;
    --opie-font-size-medium: 1.05rem;
    --opie-font-size-large: 1.85rem;
    --opie-font-size-x-large: 2.5rem;
    --opie-font-size-xx-large: 3.27rem;

    --opie-header-height: 300px;
    --opie-header-sticky-height: -300px; /* should be same value but negative */
    --opie-header-height-mobile: 200px; /* for sm/md screens */

    /* Screen width breakpoints; can't be used as var() in media queries, just here for ref. */
    --sm: 576px;
    --sm-max: 575.98px;
    --md: 768px;
    --md-max: 767.98px;
    --lg: 992px;
    --lg-max: 991.98px;
    --xl: 1200px;
    --xl-max: 1199.98px;
    --xxl: 1400px;
    --xxl-max: 1399.98px;
}


/* Common utilities */

html {
    /* For anchor links. */
    scroll-behavior: smooth;
    /* (a bit more than the) Approximate height of the header sticky part. */
    scroll-padding-top: 140px;
}

iframe {
    /* Basic framing around iframe so they don't look so weird. */
    border: 1px solid var(--opie-contrast-3);
    border-radius: 0.5rem;
}

.hide {
    /* Basic hiding tag for scripts. */
    display: none !important;
}

.rounded {
    /* For specific blocks where the radius is not a parameter.
       Limit its usage, prefer wrapping stuff in Group blocks. */
    border-radius: 0.5rem;
    overflow: hidden;
}

.undecorated-link a {
    /* Strip decorations for links, only show it on hover. */
    text-decoration: none;
}

.undecorated-link a:hover {
    text-decoration: underline;
}

.technical-details table {
    /* A cute greyed data table, for additional technical details to some content. */
    width: unset !important;
    background-color: rgb(from var(--opie-accent-5) r g b / 0.5);
    border-radius: 0.5em;

    tr, td {
        border: none;
    }

    tr td:first-child {
        font-weight: bold;
    }
}

.height-100pc {
    /* Set 100% heights for blocks that do not support this parameter. */
    height: 100%;
}

.grey-text {
    /* Yeah whatever. */
    color: var(--opie-contrast-3);
}

.header-title-box {
    /* A dark, backdrop-blurring background class. Not restricted to header usage despite the name. */
    background-color: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(3px);
    box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.33);
}

.fancy-dark-bg {
    /* A more complete dark, backdrop-blurring background class, nice to use on Banner blocks' links. */
    background-color: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(3px);
    box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.33);
    border-radius: 0.5rem;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    align-items: center;

    a {
        display: block;
        text-decoration: none;
    }
}

@media print {
    /* Printing parameters. */
    * {
        font-size: 10pt;
    }

    .no-print,
    header.wp-block-template-part,
    footer.wp-block-template-part {
        display: none !important;
    }
}

@media screen and (min-width: 992px) {
    /* For large screens and beyond. */
    .upscale-on-hover {
        /* Apply an upscale effect on hover. */
        transition: scale 0.2s ease-in-out;
    }

    .upscale-on-hover:hover {
        scale: 1.05;
    }
}


/* Header */

header.wp-block-template-part {
    position: sticky;
    top: var(--opie-header-sticky-height);
    z-index: 1500; /* Leaflet z-indices stop somewhere between 1000 and 1500. */

    img.custom-logo, p.custom-site-title {
        transition: 0.2s ease-out;
    }
}

#main-header {
    #pre-header {
        height: var(--opie-header-height);
    }

    #header-navbar-group {
        position: relative;
        box-shadow: 0 -0.33rem 0.66rem rgba(0, 0, 0, 0.33);

        .navbar-logo img {
            transition: 0.2s ease-out;
        }

        .opie-main-nav {
            /* The navbar itself (also is .wp-block-navigation__container). */

            .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
                transition: color 0.1s linear;
            }

            .separator-above {
                border-top: 1px solid var(--opie-contrast-3);
            }
        }

        .opie-main-nav > li.wp-block-navigation-item {
            /* A navbar top-level item. */
            text-transform: uppercase;
        }

        .opie-main-nav > li.wp-block-navigation-item > ul.wp-block-navigation__submenu-container {
            /* A navbar 2nd-level item list (the first level you know when hovering on the navbar). */
            min-width: 20rem;
            right: unset; /* Original behaviour is to go to the left with "right: 0" but it goes off screen easily. */
            text-transform: none;
        }

        .opie-main-nav > li.wp-block-navigation-item > ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item > ul.wp-block-navigation__submenu-container {
            /* A navbar 3rd-level item list (a submenu in a submenu). */
            left: calc(100% + 1px); /* Same as above; add a pixel to account better for the border. */
        }

        .opie-main-nav > li.wp-block-navigation-item ul.wp-block-navigation__submenu-container {
            /* Any 2nd or 3rd level item list. */
            box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.33);
        }

        .opie-main-nav ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item {
            /* Any 2nd or 3rd level item. */
            padding: 0 1rem;
            font-weight: 400;
            outline-style: unset;
            transition: background-color 0.1s linear;

            .wp-block-navigation-item__label, .wp-block-navigation-item__content {
                outline-style: unset;
            }

            a:hover {
                text-decoration: none;
            }

            a:focus {
                text-decoration: underline;
            }


            &.active-menu-item {
                /* Add this class from scripts. */
                background-color: var(--opie-beige);
            }
        }
    }

    .opie-main-logo {
        border-radius: 50%;

        img {
            box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.33);
        }
    }

    #header-breadcrumb {
        .breadcrumbs {
            transition: opacity 0.2s ease-out;
        }

        .wp-block-buttons {
            flex-shrink: 0;
        }
    }

    #header-breadcrumb::before {
        position: absolute;
        width: 2rem;
        height: 2rem;
        bottom: -2rem;
        left: 0;
        content: url('assets/images/corner_tl_greendark.svg');
    }

    #header-breadcrumb::after {
        position: absolute;
        width: 2rem;
        height: 2rem;
        bottom: -2rem;
        right: 0;
        content: url('assets/images/corner_tr_greendark.svg');
    }

    #header-cta-buttons {
        flex-shrink: 0;
    }
}

@media screen and (max-width: 767.98px) {
    /* On medium and smaller screens, adjust the header size and hide the breadcrumb. */
    #main-header {
        #pre-header {
            height: var(--opie-header-height-mobile) !important;
            min-height: var(--opie-header-height-mobile) !important;
        }

        #header-breadcrumb {
            display: none;
        }
    }
}


/* Footer */

#main-footer {
    .footer-links {
        position: relative;

        .picto-hanneton {
            position: absolute;
            top: -5rem;
            right: 1rem;
        }

        p {
            padding: 0.5em 0;
            margin-top: unset;

            a {
                padding: 0.25em;
                border-radius: 0.5rem;
            }

            a:hover {
                text-decoration: none;
                background: var(--opie-green-dark);
            }
        }

        p:first-child {
            padding-left: 0.25em;
        }

        p:not(:first-child) {
            border-top: 1px solid;
            border-image: linear-gradient(to right, var(--opie-base) 20%, transparent 20%) 100% 1;
        }
    }
}

#main-footer::before {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: -2rem;
    left: 0;
    content: url('assets/images/corner_bl_green.svg');
}

#main-footer::after {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: -2rem;
    right: 0;
    content: url('assets/images/corner_br_green.svg');
}


/* Page d'accueil */

body.home {
    #header-breadcrumb {
        .breadcrumbs {
            opacity: 0;
        }
    }
}

.wp-block-tiptip-hyperlink-group-block {
    text-decoration: none;
}

#home-quicklinks-group {
    .wp-block-cover__inner-container {
        p {
            background-color: rgba(0, 0, 0, 0.66);
            backdrop-filter: blur(3px);
            box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.33);
            border-radius: 0.5rem;
            display: flex;
            gap: 0.5rem;
            padding: 0.5rem;
            align-items: center;

            a {
                display: block;
                text-decoration: none;
            }
        }
    }
}

#home-news-group {
    .wp-block-post {
        position: relative;
    }

    .wp-block-post-date {
        display: inline-block;
    }

    .taxonomy-category {
        display: inline-block;
        position: absolute;
        top: 1.5rem;
        left: 4px;
        padding: 0.25em 0.5em;
        border-radius: 0.25rem 0.25rem 0.25rem 0;
        box-shadow: 0.33rem 0.33rem 1rem rgba(0, 0, 0, 0.66);
        background: var(--opie-green-dark);
        color: white;

        a {
            color: white;
            font-size: 0.9rem;
        }

        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 100%;
            display: inline-block;
            height: 0;
            width: 0;
            border-top: 12px solid var(--opie-contrast);
            border-left: 12px solid transparent;
        }
    }

    .main-actu .taxonomy-category {
        left: -12px; /* Special case for the main actu because the post padding is not set the same way. */
    }
}

#home-map-group {
    .map-references {
        display: flex;
        flex-flow: column nowrap;
    }

    .map-reference {
        background-color: var(--opie-beige);
        cursor: pointer;
        margin-top: 0.2em;
        padding: 0.2em 0.5em;
        border-radius: 0.5em;
        transition: 0.2s ease-in-out;
    }

    .map-reference:hover {
        background-color: var(--opie-blue);
        color: white;
    }

    ul.legende li {
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    ul.legende li::before {
        content: '';
        flex-shrink: 0;
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
    }

    ul.legende li.color-siege::before {
        background-color: var(--opie-green);
    }

    ul.legende li.color-mdi::before {
        background-color: var(--opie-accent-7);
    }

    ul.legende li.color-antenne::before {
        background-color: var(--opie-accent-6);
    }

    ul.legende li.color-assoregion::before {
        background-color: var(--opie-accent-9);
    }

    ul.legende li.color-gt::before {
        background-color: var(--opie-accent-8);
    }
}

#carte-opie-en-france.leaflet-container {
    background-color: unset !important;
    border-radius: 0.33rem;
    height: 520px;

    .leaflet-popup-content {
        text-align: center;

        .chip {
            margin-bottom: 1em;
        }

        .chip, .btn {
            padding: 0.5em;
            border-radius: 0.33em;

        }
    }
}

.cta-cards-columns {
    .wp-block-cover {
        padding: 0;
    }
}


/* Évènements */

.event-place-image img {
    /* Fix automatic rules for some Pod images. */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.33rem;
}

.wp-element-button.has-contrast-background-color:hover {
    background-color: var(--opie-contrast-2) !important;
}


/* Formations */

.red-square-for-titles h3 {
    position: relative;
}

.red-square-for-titles h3:before {
    background: var(--opie-red);
    content: " ";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
}


/* Revue */

.single-article-revue {
    .revue-issue-block .issue-name {
        font-size: var(--opie-font-size-large);
    }

    .taxonomy-rubrique-revue,
    .taxonomy-groupe-taxo-revue,
    .taxonomy-theme-revue {
        .wp-block-post-terms__prefix {
            display: block;
        }
    }

    h2 {
        color: var(--opie-rouge-revue);
    }

    p:not(.has-text-align-left):not(.has-text-align-center):not(.has-text-align-right) {
        text-align: justify;
    }

    .fn a {
        color: var(--opie-rouge-revue);
        text-decoration: none;
    }

    .wp-block-footnotes {
        border-top: 2px solid var(--opie-rouge-revue);
        padding: 1em;
    }
}

@media print {
    /* Configure printing settings for articles. */
    .single-article-revue {
        .entry-content.wp-block-post-content {
            /* Use a 3-columns layout to remind the paper layout. */
            columns: 3;
        }

        figure {
            /* Unset image floating so they fit better in the columns. */
            float: unset;
            width: 100%;
            break-inside: avoid;
        }

        .wp-site-blocks > .wp-block-group > .wp-block-columns {
            /* Target the columns order: we want the right column to appear on top
             of the printed page, not at the end. */

            .wp-block-column:nth-child(1) {
                order: 2;
            }

            .wp-block-column:nth-child(2) {
                order: 1;

                /* Also fix a bunch of issues with this header in print mode. */
                display: flex;
                gap: 1em;

                .revue-issue-block {
                    flex-direction: column;
                    gap: 0;
                    align-items: start;

                    .issue-name {
                        margin: 0;
                        padding: 0;
                    }
                }
            }
        }

        .wp-block-quote {
            /* Disable the large margin/padding for the article's hat. */
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .wp-block-group.is-nowrap {
            /* Allow wrapping even if it's forbidden in the Web view. */
            flex-wrap: wrap;
        }

        .wp-block-heading {
            /* Do not break page right after a title. */
            /* 2025-09-26: does not work on Firefox 128. */
            break-after: avoid-page;
        }
    }
}


/* Partenaires */

.partners-grid {
    --gap: 2em;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness: 2px;
    --line-color: #ddd;

    overflow: hidden;
}

.partners-grid .wp-block-image {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 0.5em;
    gap: var(--gap);
}

.partners-grid .wp-block-image::before, .partners-grid .wp-block-image::after {
    content: '';
    position: absolute;
    background-color: var(--line-color);
    z-index: 1;
}

.partners-grid .wp-block-image::after {
    inline-size: 100vw;
    block-size: var(--line-thickness);
    inset-inline-start: 0;
    inset-block-start: calc(var(--line-offset) * -1);
}

.partners-grid .wp-block-image::before {
    inline-size: var(--line-thickness);
    block-size: 100vh;
    inset-block-start: 0;
    inset-inline-start: calc(var(--line-offset) * -1);
}


/* Plans nationaux d'actions */

.pna-background {
    /* The big surrounding group for each plan. Set to relative to add an absolute-position pseudo-element as bg. */
    position: relative;
    overflow: hidden;
}

.pna-background > .wp-block-group {
    /* Set the first child group as relative so that the bg pseudo-element does not cover the content and we do not
    have to rely on z-index shenanigans. */
    position: relative;
}

.pna-background-libellules:before {
    z-index: 0;
    position: absolute;
    left: -5%;
    top: 50%;
    content: url('assets/images/silhouette-odonata.svg');
    opacity: 0.3;
    transform: rotate(20deg) scale(175%);
}

.pna-background-papillons:before {
    z-index: 0;
    position: absolute;
    right: -5%;
    top: 25%;
    content: url('assets/images/silhouette-butterfly.svg');
    opacity: 0.3;
    transform: rotate(-70deg) scale(200%);
}

.pna-background-pollinisateurs:before {
    z-index: 0;
    position: absolute;
    left: 35%;
    bottom: -5%;
    content: url('assets/images/silhouette-hymeno.svg');
    opacity: 0.3;
    transform: rotate(20deg) scale(200%);
}


/* Wordpress blocks */

.wp-block-tag-cloud a {
    border-radius: 1em;
}

.taxonomy-category.is-style-pill a,
.taxonomy-post_tag.is-style-pill a {
    color: var(--wp--preset--color--contrast);
    background-color: var(--opie-beige);
}

.wp-block-button__link.has-opie-red-background-color:hover {
    background-color: var(--opie-red-dark) !important;
}

.wp-block-button__link.has-custom-rouge-revue-insectes-background-color:hover {
    background-color: var(--opie-rouge-revue-dark) !important;
}

.wp-block-button__link.has-opie-blue-background-color:hover {
    background-color: var(--opie-blue-dark) !important;
}

.dark-green-hover a:hover {
    background-color: var(--opie-green-dark) !important;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: var(--opie-green-dark);
}

.button-with-icon a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.flat-button-with-icon a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
}

.wp-block-table table tr:not(:last-of-type) td {
    border-bottom: 1px solid var(--opie-contrast-3);
}

body:not(.wp-admin):not(.single-article-revue) {
    /*
     * Show image captions on hover only.
     * This rule is not applied in the site editor, nor in the revue pages.
     * To manually override this and show captions anyway, tag specific images or the direct parent block
     * with the "show-captions" class.
     */

    :not(.show-captions) > figure.wp-block-image:not(.show-captions) > figcaption.wp-element-caption {
        visibility: hidden;
        opacity: 0;
        transition: 0.2s ease-in-out;
    }

    :not(.show-captions) > figure.wp-block-image:not(.show-captions):hover > figcaption.wp-element-caption {
        visibility: visible;
        opacity: 1;
    }
}


/* Contact Form 7 */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="quiz"],
.wpcf7-form textarea {
    display: flex;
    flex-flow: column nowrap;
    padding: 0.375rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid var(--opie-accent-5);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
    box-shadow: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="quiz"]:focus,
.wpcf7-form textarea:focus {
    background-color: var(--opie-base);
    border: 1px solid var(--opie-green);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(16, 152, 119, 0.25);
}

.wpcf7-form-control.wpcf7-submit {
    background-color: var(--wp--preset--color--contrast);
    border-radius: 0.33rem;
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    box-sizing: border-box;
    color: var(--opie-base);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: var(--opie-font-size-small);
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding: 0.6rem 1rem;
    text-align: center;
    text-decoration: none;
    word-break: break-word;
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--opie-contrast-2);
    border-color: var(--opie-contrast-2);
    color: var(--opie-base);
}