/*
Theme Name: Hemingway Enfant
Template: hemingway
Description: Menu vert personnalisé + sous-menu + hamburger mobile + header compact
Author: Régis & ChatGPT
Version: 5.0 - Clean fusion (cleaned)
*/

/* ============================================================
   1. 🧹 RESET GLOBAL & BASE TYPO
   ============================================================ */
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #EFE3C5 !important;
    color: #444 !important;
    font-family: 'Comic Sans MS', sans-serif !important;
    font-size: 1em !important;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Étendre le contenu sur toute la largeur */
.wrapper,
.section-inner,
.content,
.big-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

h1 {
    font-size: 1.7em !important;
    font-style: italic !important;
    padding: 0 4em !important;
}

p,
li {
    text-align: justify !important;
}

.post-title {
    display: none !important;
}

/* ===============================
   2. HEADER COMPACT STYLE
   =============================== */

/* Wrapper général */
.header-cover.section.bg-dark-light.no-padding {
    padding: 0 !important;
    margin: 0 !important;
}

/* Image de header compacte */
.header.section {
    height: 260px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Conteneur interne */
.header-inner.section-inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Bloc du titre */
.blog-info {
    margin: 0 auto !important;
    padding: 0.6em 1.4em !important;
    width: fit-content !important;
    background: transparent !important;
}

.blog-title {
    background: rgba(103, 148, 116, 0.45) !important;
    text-align: center !important;
    padding: 0.4em 0.8em !important;
    margin: 0 auto !important;
    width: fit-content !important;
}

/* Texte du titre */
.blog-title a {
    font-size: 3.3rem !important;
    color: #fff !important;
    letter-spacing: 0.14em !important;
    font-weight: 700 !important;
}

/* Masquer description sous le titre */
.blog-description {
    display: none !important;
}

/* Titre en mode tablette */
@media (max-width: 800px) and (min-width: 601px) {
    .blog-title a {
        font-size: 2rem !important;
        letter-spacing: 0.08em !important;
    }

    h1 {
        font-size: 1.3em !important;
        padding: 0 !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }
}

/* Titre + contenu en mode mobile */
@media (max-width: 600px) {
    .header-inner.section-inner .blog-title a {
        font-size: 1.2rem !important;
        line-height: 1.1 !important;
    }

    h1 {
        font-size: 1.2em !important;
        padding: 0 !important;
    }

    h2 {
        font-size: 1.4em !important;
    }

    h3 {
        font-size: 1.2em !important;
    }

    .footer-mention {
        font-size: 1.1em !important;
    }

    .wp-block-list {
        margin-left: 0 !important;
    }

    /* Empêche la coupure des mots et numéros dans le contenu */
    .post-content,
    .post-content p,
    .post-content li {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
    }

    /* Padding général sur mobile pour le contenu */
    .wrapper,
    main,
    .section-inner,
    .post-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Neutraliser padding du body pour ne pas affecter le header */
    body {
        padding: 0 !important;
    }

    #wpforms-2692 {
        width: 100% !important;
    }
}

/* Supprime padding hérité sur le conteneur du titre (sécurité) */
.header-cover,
.header,
.header-inner,
.header .section-inner,
.header .header-inner.section-inner,
.blog-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* ============================================================
   3. MENU PRINCIPAL (DESKTOP)
   ============================================================ */

.custom-nav {
    background: #3b7d3b;
    width: 100%;
}

/* Desktop only */
@media (min-width: 801px) {
    .blog-menu {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
}

.blog-menu > li {
    position: relative;
}

/* Supprime les / de Hemingway */
.blog-menu > li::before {
    content: none !important;
}

.custom-nav .blog-menu a {
    display: block;
    padding: 1em 1.2em;
    font-size: 1.2em;
    color: #fff !important;
    font-weight: 500;
    text-transform: none !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}

/* Hover principal */
.custom-nav .blog-menu a:hover,
.custom-nav .blog-menu li.current-menu-item > a,
.custom-nav .blog-menu li:hover > a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #B84446 !important;
}

nav.navigation.section.no-padding.bg-dark {
    background-color: #3b7d3b !important;
}

/* ============================================================
   4. SOUS-MENU — DESKTOP
   ============================================================ */

.custom-nav .blog-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #3b7d3b !important;
    min-width: 180px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    display: none;
    z-index: 99999 !important;
}

.blog-menu li:hover > .sub-menu {
    display: block;
}

.custom-nav .blog-menu ul.sub-menu li a {
    display: block;
    padding: 6px 14px;
    color: #fff !important;
    font-size: 1em;
    font-weight: 500;
    background: transparent !important;
}

/* Hover sous-menu */
.custom-nav .blog-menu ul.sub-menu li a:hover,
.header .navigation ul ul li:hover > a,
.header .navigation ul ul a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #B84446 !important;
    font-weight: 900 !important;
}

/* Neutralise les styles Hemingway des sous-menus */
.header .navigation ul ul,
.header .navigation ul ul li,
.header .navigation ul ul a,
.header .navigation ul ul li:hover > a,
.header .navigation ul ul a:hover,
.custom-nav .blog-menu ul.sub-menu,
.custom-nav .blog-menu ul.sub-menu li,
.custom-nav .blog-menu ul.sub-menu li a {
    background: #3b7d3b !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Supprime définitivement les chevrons Hemingway */
.navigation ul ul li::after,
.navigation ul ul li::before,
.blog-menu ul.sub-menu li::after,
.blog-menu ul.sub-menu li::before,
.blog-menu > .menu-item-has-children::after,
.blog-menu > .page_item_has_children::after,
.blog-menu ul > .menu-item-has-children::after,
.blog-menu ul > .page_item_has_children::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* Supprime la bordure résiduelle Hemingway */
.blog-menu > .menu-item-has-children,
.blog-menu ul > .menu-item-has-children {
    border: none !important;
}

.header .navigation a:hover,
.navigation a:hover {
    background: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   5. TABLETTE 601–800px (menu horizontal)
   ============================================================ */
@media (max-width: 800px) and (min-width: 601px) {
    .blog-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        width: 100% !important;
        background: #3b7d3b !important;
        padding-left: 1.3em !important;
    }

    .blog-menu li + li {
        border-left: 1px solid rgba(255, 255, 255, 0.25);
        padding-left: 0.4em;
    }

    .blog-menu li a {
        padding: 0.3em 0.6em !important;
        font-size: 0.9em !important;
    }

    .nav-toggle {
        display: none !important;
    }

    /* Supprime padding spécifique d’un item si besoin */
    #menu-item-5205 {
        padding: 0 !important;
    }
}

/* ============================================================
   6. MENU MOBILE + ACCORDÉON (≤ 600px)
   ============================================================ */

/* Bouton hamburger (base) */
.nav-toggle {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 14px;
    z-index: 99999;
}

.nav-toggle .bar {
    background: #fff;
    height: 3px;
    width: 26px;
    margin: 5px 0;
    transition: 0.3s;
}

.nav-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

@media (max-width: 600px) {

    /* Affiche le hamburger */
    .nav-toggle {
        display: block !important;
    }

    /* Menu principal replié */
    .blog-menu {
        display: flex !important;
        flex-direction: column !important;
        max-height: 0;
        overflow: hidden !important;
        background: #3b7d3b;
        transition: max-height 0.35s ease;
        width: 100%;
        text-align: center !important;
        align-items: center !important;
    }

    /* Menu ouvert (classe ajoutée par JS) */
    .blog-menu.menu-open {
        max-height: 600px !important;
    }

    /* Sous-menu par défaut (fermé) */
    .blog-menu .sub-menu {
        display: none !important;
        max-height: 0;
        overflow: hidden;
        background: #2f652f !important;
        transition: max-height 0.35s ease;
        position: relative !important;
        z-index: 1 !important;
        text-align: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Sous-menu ouvert (classe .open ajoutée sur <li>) */
    .blog-menu .menu-item-has-children.open > .sub-menu {
        display: block !important;
        max-height: 500px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Items full-width */
    .blog-menu li,
    .blog-menu a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .blog-menu .sub-menu li a {
        justify-content: center !important;
    }

    /* Lien parent cliquable (utilisé par FluentAuth / menu) */
    .blog-menu .menu-item-has-children > a {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* Liens internes du sous-menu toujours cliquables */
    .blog-menu .sub-menu a {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* Empêche Hemingway de recolorer au hover (qui peut gêner) */
    .blog-menu li:hover > a {
        background: transparent !important;
        z-index: 0 !important;
    }

    /* Empêche Hemingway de masquer les sous-menus */
    .blog-menu ul {
        left: 0 !important;
        display: block !important;
        position: relative !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   7. RANDO / IMAGES / FORMULAIRES
   ============================================================ */


.post-content {
    margin: 0 auto;
}
.posts {
	margin: 0 2em;
}
.archive-header, .post-meta {
    display: none;
}
 

.has-background {
    padding: 1em;
    border: 0.2em solid rgb(55, 99, 63);
}

.nom_ville {
    font-size: 2em;
    text-transform: uppercase;
    color: rgb(55, 99, 63);
}

.nom_rando {
    font-size: 1.5em;
    font-weight: bold;
    color: #EFE3C5;
}

/* Boutons Google Maps (zoom, street view, rotation) */
.gm-control-active,
.gm-bundled-control-on-bottom button,
.gm-bundled-control button,
.gm-fullscreen-control {
    background: #3b7d3b !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    padding: 6px !important;
}

/* Hover Google Maps */
.gm-control-active:hover,
.gm-bundled-control button:hover,
.gm-fullscreen-control:hover {
    background: #e0e0e0 !important;
}

/* Icônes blanches */
.gm-control-active img,
.gm-fullscreen-control img,
.gm-bundled-control-button img,
.gm-tilt-control img,
.gm-zoom-in img,
.gm-zoom-out img {
    filter: brightness(0) invert(1) !important;
}

.gm-bundled-control-button:hover,
.gm-control-active:hover,
.gm-fullscreen-control:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   8. BOUTONS & FORMULAIRES
   ============================================================ */

input[type="submit"],
button,
.wpforms-submit {
    background: #3b7d3b !important;
    color: #fff !important;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
}

input[type="submit"]:hover,
button:hover,
.wpforms-submit:hover {
    background: #B84446 !important;
}

/* CHECKBOX CUSTOM */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #3b7d3b;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: #3b7d3b;
    border-color: #3b7d3b;
}

input[type="checkbox"]:checked::after {
    content: "✔";
    color: #fff;
    font-size: 13px;
    position: absolute;
    top: -2px;
    left: 2px;
}

/* ============================================================
   9. FOOTER
   ============================================================ */

.footer {
    display: none !important;
}

footer {
    margin-top: 2em !important;
    background: #3b7d3b !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 1em !important;
}

footer h3 {
    color: #fff !important;
    margin: 0 !important;
    font-size: 1.2em !important;
    letter-spacing: 0.1em !important;
}

.credits-inner {
    display: none;
}

/* ============================================================
   10. FLUENT AUTH — réalignement mobile
   ============================================================ */

@media (max-width: 600px) {

    /* Force tout le bloc à alignement gauche */
    .fls_auth_wrapper,
    .fls_login_form,
    .fls_login_wrapper,
    .post-content.entry-content {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Annule les <p style="text-align:center"> du plugin */
    .post-content.entry-content p[style*="text-align:center"] {
        text-align: left !important;
    }

    /* Champs en pleine largeur */
    .fls_login_form input,
    .fls_login_form label {
        width: 100% !important;
        text-align: left !important;
    }
}