/* _____ Styles CSS spécifiques au thème WP Rétro Coloré _____ */

/* ===== IMPORTANT =====
Lorsque qu'un commentaire est annoté (FRONT uniquement) : ne pas répliquer dans admin-retro-colore.css
*/

/* --- Décoration pour les titres de niveau 3 - Tirets à gauche et à droite --- */

h3.is-style-decoration {
    position: relative;
}

/* Ajoute les tirets */
h3.is-style-decoration::before, h3.is-style-decoration::after{
    content: "";
    position: absolute;
    top: calc(50% - calc(4px / 2));
    width: 10px;
    height: 4px;
    background-color: var(--wp--preset--color--contrast);
}

/* Décale le tiret de gauche */
h3.is-style-decoration::before {
    left: -30px;
}

/* Décale le tiret de droite */
h3.is-style-decoration::after{
    right: -30px;
}

h3.has-text-align-center.is-style-decoration {
    width: fit-content;
}

/* --- Décoration pour les dates des boucles de requêtes - Puce carrée à gauche --- */

/* Décale l'ensemble de la boucle de requête pour aligner la puce avec le reste de la page */
.wp-block-query:has(.wp-block-post > .wp-block-post-date) {
    padding-left: 30px;
}

.wp-block-post-date {
    position: relative;
}

/* Ajoute la puce */
.wp-block-post-date::before {
    content: "";
    position: absolute;
    top: calc(50% - calc(15px / 2));
    left: -30px;
    width: 15px;
    height: 15px;
    background-color: var(--wp--preset--color--contrast);
}

/* Spécificité pour les dates placées à droite */
.has-text-align-right.wp-block-post-date::before {
    content: "";
    position: absolute;
    top: calc(50% - calc(14px / 2));
    left: 0px;
    width: 15px;
    height: 15px;
    background-color: var(--wp--preset--color--contrast);
}
.has-text-align-right.wp-block-post-date {
    padding-left: 25px;
}
.has-text-align-right.wp-block-post-date time {
    font-size: var(--wp--preset--font-size--medium);
}

/* --- Décoration pour les menus de navigation - Général --- */

/* Marge des éléments */
.wp-block-navigation__container .wp-block-navigation-item__content {
    padding: 3px 15px;
}

/* Spécifique lscepllswitcher */
.wp-block-navigation .lscepllswitcher a {
    display: block;
    padding: 3px 0;
}

/* Texte des éléments survolés en orange */
.wp-block-navigation__container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent-1);
}

/* --- Décoration pour les menus de navigation - Style de l'élément actif --- */

/* Fond de l'élément actif en noir-bleu */
.wp-block-navigation__container .current-menu-item,
.wp-block-navigation__container .current-page-ancestor {
    background-color: var(--wp--preset--color--accent-2);
}

/* Texte de l'élément actif en orange */
.wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content .wp-block-navigation-item__label {
    color: var(--wp--preset--color--accent-1);
}

/* --- Décoration pour les menus de navigation - Barre de soulignement --- */

/* Ajoute la barre de soulignement (FRONT uniquement) */
nav.wp-block-navigation:not(:has(.lscepllswitcher))::after {
    content: "";
    position: absolute;
    bottom: -40px;
    width: 100%;
    height: 20px;
    background-color: var(--wp--preset--color--contrast);
}

/* --- Autres décorations --- */

/* Supprime la marge entre la date et l'extrait lorsque côte-à-côté */
.wp-block-post-date + .wp-block-post-excerpt {
    margin: 0;
}

/* Permet le défilement (css: sticky) de l'en-tête (FRONT uniquement)  */
header {
    display: inline;
}

/* Écrasement du style des boutons pleins */
.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
    color: var(--wp--preset--color--contrast);
}

/* Écrasement du style des titres H2 avec décoration */
h2.is-style-decoration::before {
    content: "";
    position: absolute;
    top: unset;
    bottom: -10px;
    left: unset;
    width: 100%;
    height: 10px;
    background-color: var(--wp--preset--color--contrast);
}
h2.is-style-decoration {
    margin-bottom: 2.5rem;
}
h2.is-style-decoration:last-child {
    margin-block-end: 2.5rem;
}

/* Écrasement des marqueurs des listes WordPress */
.wp-block-list li::marker {
    content: "■  ";
    font-size: var(--wp--preset--font-size--medium);
}

/* Écrasement des décorations des liens définis dans lscesitesprojets/styles.css */
.wp-site-blocks a:where(:not(.wp-element-button)):hover {
    text-decoration: none;
    /*text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--accent-1);*/
}
/* Barre de soulignement pour les menus de navigation */
.wp-block-navigation-item a {
    text-decoration-thickness: 10px !important;
    text-underline-offset: clamp(11px, 0.7rem, 0.4em);
}

/* Écrasement du style du plugin lscepllswitcher */
ul.lscepllswitcher li {
    text-transform: capitalize;
}
ul.lscepllswitcher li:not(.selectionne) {
    font-weight: 500;
}

/* Autoriser le responsive à couper les adresses mails en plein milieu (FRONT uniquement) */
a[href^="mailto:"] {
    word-break: break-word;
}

/* Gestion du style des grilles WP (FRONT uniquement) */
.wp-block-group.is-layout-grid {
    grid-row-gap: var(--wp--preset--spacing--40);
}
/* Pour les 4 premiers éléments, leur associer un nom d'area pour permettre un changement en version mobile (FRONT uniquement) */
.wp-block-group.is-layout-grid > :nth-child(1) {
    grid-area: item1;
}
.wp-block-group.is-layout-grid > :nth-child(2) {
    grid-area: item2;
}
.wp-block-group.is-layout-grid > :nth-child(3) {
    grid-area: item3;
}
.wp-block-group.is-layout-grid > :nth-child(4) {
    grid-area: item4;
}

/* --- Style des register_block_style() spécifiques au style WP Rétro Coloré --- */

/* core/group : Contour */
.is-style-contour {
   border: 10px var(--wp--preset--color--contrast) solid;
   padding: 15px;
}
.is-style-contour h3 {
   font-size: 1.75rem;
}
.is-style-contour p + p {
   margin-block-start: 0;
}
.is-style-contour p:last-child {
   color: var(--wp--preset--color--accent-1);
}

/* core/heading : Label */
h4.is-style-label {
    width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--wp--preset--color--accent-1);
    background-color: var(--wp--preset--color--accent-2);
}

/* core/paragraph : Barre de soulignement */
.is-style-barre-soulignement a {
    text-decoration-thickness: 10px !important;
    text-decoration-color: var(--wp--preset--color--contrast);
    text-underline-offset: clamp(11px, 0.7rem, 0.4em);
}
.is-style-barre-soulignement a:hover {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--accent-1);
}

/* --- Media Queries (FRONT uniquement) --- */

/* Entre 600px et 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
    .wp-block-navigation__container {
        gap: 0.5rem;
    }
    nav.wp-block-navigation:not(:has(.lscepllswitcher))::after {
        height: 15px;
    }
}

/* Strictement supérieur à 600px */
@media screen and (min-width: 601px) {
    .wp-block-group.is-layout-grid {
        grid-template-areas: "item1 item2" "item3 item4";
    }
}

/* Inférieur ou égal à 600px */
@media screen and (max-width: 600px) {
    nav.wp-block-navigation:not(:has(.lscepllswitcher))::after {
        content: unset;
    }
    a, h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
    }
    .wp-block-group.is-layout-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "item1" "item3" "item2" "item4";
    }
    .is-layout-flex.column-when-mobile {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Inférieur ou égal à 400px */
@media screen and (max-width: 400px) {
    p {
        word-break: break-word;
    }
}