/*
Theme Name: Parvis Ancolie
Template: generatepress
Version: 1.0.0
Description: Custom theme for Nathalie en vadrouille
*/

/* ---------------------------------------------------------------
   Tokens — palette ocean-deep, spacing spacious, width compact,
   radius subtle (4px), shadow subtle.
   --------------------------------------------------------------- */
:root {
    --pa-primary: #1A56DB;
    --pa-primary-deep: #13409F;
    --pa-secondary: #6B7280;
    --pa-accent: #3B82F6;
    --pa-accent-warm: #E8EEF8;
    --pa-surface: #EFF6FF;
    --pa-bg: #FFFFFF;
    --pa-text: #1F2937;
    --pa-text-2: #55606E;        /* 6B7280 falls under AA on --pa-surface */
    --pa-border: #E5E7EB;
    --pa-radius: 4px;
    --pa-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pa-gap-section: 6rem;
    --pa-gap-block: 2rem;
    --pa-pad-container: 3rem;
    --pa-measure: 720px;         /* content width token "compact" */
}

/* Fil de marque sur petit écran */
@media (max-width: 1024px) {
    .inside-navigation::before {
        content: "Flâner, regarder, raconter — les spectacles qui surgissent là où on ne les attend pas";
        font-style: italic;
        position: absolute;
        left: 14px;
        /* clears the menu toggle, which occupies the right 103px of the bar */
        right: 114px;
        top: 54px;
        font-size: 10px;
        line-height: 1.3;
        color: var(--pa-text-2);
    }
    .inside-navigation { position: relative; }
}

/* ---------------------------------------------------------------
   Logo — 2x wordmark PNG, intrinsic 1047 x 152 (ratio 6.888).
   Both dimensions are pinned so the flex row cannot shrink-to-fit
   the anchor and crush the ratio.
   --------------------------------------------------------------- */
.site-logo { flex: 0 0 auto; }

.site-header .site-logo a   { display: block; width: 262px; height: 38px; }
.site-header .site-logo img {
    width: 262px !important;
    height: 38px !important;
    max-width: none !important;
    max-height: 38px !important;
}

/* ---------------------------------------------------------------
   Mobile header (GP Menu Plus, breakpoint 1024). The module folds
   the logo into the navigation row, so the row inherits the blue
   navigation background — on which the dark wordmark is unreadable.
   The bar is repainted white here and stacked so the tagline sits
   under the logotype rather than across it.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    #mobile-header,
    #mobile-header .inside-navigation {
        background-color: var(--pa-bg);
        border-bottom: 1px solid var(--pa-border);
    }

    #mobile-header .inside-navigation {
        position: relative;
        min-height: 92px;
        padding-bottom: 24px;
    }

    /* Width is pinned so the flex row cannot shrink-to-fit the anchor; height is
       left to the intrinsic ratio. Pinning both clipped the glyph band to about
       a third of its height on Chrome, which every mobile gate scored as a pass. */
    #mobile-header .site-logo {
        flex: 0 0 auto;
        display: block;
        margin-top: 12px;
        align-self: flex-start;
    }
    #mobile-header .site-logo a   { display: block; width: 207px; }
    #mobile-header .site-logo img {
        width: 207px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        position: absolute !important;
        right: 0 !important;
        top: 30px;
        background-color: transparent;
        color: var(--pa-text);
        z-index: 3;
    }

    #mobile-header #mobile-menu { margin-top: 24px; }

    #mobile-header #mobile-menu a {
        color: var(--pa-text);
        border-top: 1px solid var(--pa-border);
    }
}

/* ---------------------------------------------------------------
   Front-page H1 — the §10 heading, visible, above the rails.
   --------------------------------------------------------------- */
.site-tagline-heading {
    display: block;
    text-align: left;
    margin: 0 0 1.4rem;
    padding: 0;
    font-size: 1.78rem;
    line-height: 1.24;
    color: var(--pa-text);
}

.pa-intro {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--pa-text);
    max-width: var(--pa-measure);
    margin: 0 0 var(--pa-gap-section);
}

.pa-intro em { color: var(--pa-text-2); }

/* ---------------------------------------------------------------
   Section headings on the homepage (§10 "À découvrir")
   --------------------------------------------------------------- */
.pa-section-titre {
    font-size: 1.32rem;
    margin: 0 0 var(--pa-gap-block);
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--pa-primary);
    display: inline-block;
}

/* ---------------------------------------------------------------
   Article rail — [pa_sorties]
   --------------------------------------------------------------- */
.pa-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--pa-gap-block);
    margin-bottom: var(--pa-gap-section);
}

.pa-fiche {
    display: flex;
    flex-direction: column;
    background-color: var(--pa-bg);
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
    overflow: hidden;
}

.pa-fiche__vignette { display: block; line-height: 0; }

.pa-fiche__vignette img {
    width: 100%;
    height: 176px;
    object-fit: cover;
    display: block;
}

.pa-fiche__corps {
    padding: 1.1rem 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pa-fiche__rubrique {
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pa-primary);
    margin-bottom: 0.45rem;
}

.pa-fiche h3 {
    font-size: 1.08rem;
    line-height: 1.32;
    margin: 0 0 0.55rem;
}

.pa-fiche h3 a { color: var(--pa-text); text-decoration: none; }
.pa-fiche h3 a:hover { color: var(--pa-primary); }

.pa-fiche p {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--pa-text-2);
    margin: 0 0 1rem;
}

.pa-lien {
    margin-top: auto;
    align-self: flex-start;
    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pa-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--pa-accent-warm);
    padding-bottom: 2px;
}

.pa-lien:hover { color: var(--pa-primary-deep); border-bottom-color: var(--pa-primary); }

/* ---------------------------------------------------------------
   Category rail — [pa_rubriques]
   --------------------------------------------------------------- */
.pa-rubriques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--pa-gap-block);
    margin-bottom: var(--pa-gap-section);
}

.pa-rubrique {
    background-color: var(--pa-surface);
    border-left: 3px solid var(--pa-primary);
    border-radius: var(--pa-radius);
    padding: 1.15rem 1.25rem;
}

.pa-rubrique h3 { font-size: 1.02rem; margin: 0 0 0.45rem; }
.pa-rubrique h3 a { color: var(--pa-text); text-decoration: none; }
.pa-rubrique h3 a:hover { color: var(--pa-primary); }
.pa-rubrique p { font-size: 0.9rem; line-height: 1.6; color: var(--pa-text-2); margin: 0; }

/* ---------------------------------------------------------------
   Post signature + author card
   --------------------------------------------------------------- */
.pa-signature {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.3rem 0 1.5rem;
    font-size: 0.9rem;
    color: var(--pa-text-2);
}

.pa-signature img { border-radius: 50%; display: block; }
.pa-signature a { color: var(--pa-primary); text-decoration: none; }
.pa-signature a:hover { text-decoration: underline; }

.pa-carte-auteur {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin-top: var(--pa-gap-block);
    padding: 1.3rem 1.4rem;
    background-color: var(--pa-surface);
    border-radius: var(--pa-radius);
}

.pa-carte-auteur img { border-radius: 50%; flex: 0 0 auto; display: block; }
.pa-carte-auteur strong { font-family: 'Roboto', system-ui, sans-serif; font-size: 1rem; }
.pa-carte-auteur strong a { color: var(--pa-text); text-decoration: none; }
.pa-carte-auteur strong a:hover { color: var(--pa-primary); }
.pa-carte-auteur p { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.62; color: var(--pa-text-2); }

/* ---------------------------------------------------------------
   Reading measure. The container is 1000px (token "compact" wide),
   and running text is held to the token's 720px content measure so
   the no-sidebar layout does not stretch a line past comfort.
   --------------------------------------------------------------- */
.single .entry-content > *:not(.pa-rail):not(.pa-rubriques):not(.pa-carte-auteur):not(.wp-block-image),
.page:not(.home) .entry-content > *:not(.pa-rail):not(.pa-rubriques) {
    max-width: var(--pa-measure);
}

.single .entry-content, .page .entry-content { font-size: 1.02rem; line-height: 1.75; }

.entry-content h2 { margin-top: 2.4rem; }
.entry-content h3 { margin-top: 1.8rem; }

/* ---------------------------------------------------------------
   Archive / blog index cards (separate-containers, no sidebar)
   --------------------------------------------------------------- */
.page-header {
    margin-bottom: var(--pa-gap-block);
}

.page-header .page-title {
    font-size: 1.6rem;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--pa-primary);
    display: inline-block;
}

.separate-containers .site-main > article {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow);
}

.blog .post-image img, .archive .post-image img {
    border-radius: var(--pa-radius) var(--pa-radius) 0 0;
}

.entry-title a { text-decoration: none; }

/* ---------------------------------------------------------------
   Footer — centered-light, no widget headings (§10: headings none)
   --------------------------------------------------------------- */
.site-footer {
    background-color: var(--pa-surface);
    border-top: 1px solid var(--pa-border);
}

.site-info {
    text-align: center;
    font-size: 0.88rem;
    color: var(--pa-text);
}

.site-info a { color: var(--pa-primary); text-decoration: none; }
.site-info a:hover { text-decoration: underline; }

.footer-bar, .inside-site-info { justify-content: center; }

.site-footer .footer-widgets { display: none; }

/* Footer navigation — a single centred row of legal links. */
.pa-pied-nav ul {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.3rem;
}

.pa-pied-nav li { margin: 0; }

.pa-pied-nav a {
    font-size: 0.86rem;
    color: var(--pa-text);
    text-decoration: none;
}

.pa-pied-nav a:hover { color: var(--pa-primary); text-decoration: underline; }

/* ---------------------------------------------------------------
   Contact form — the submit button must carry the palette primary,
   not GP's #666666 default. Gated by contact-form-render.cjs.
   --------------------------------------------------------------- */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit,
body .fluentform .ff-btn-submit {
    background-color: #1A56DB !important;
    color: #ffffff !important;
    border-radius: var(--pa-radius) !important;
}

body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover,
body .fluentform .ff-btn-submit:hover {
    filter: brightness(0.88) !important;
}

.fluentform .ff-el-form-control {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
}

.fluentform .ff-el-form-control:focus {
    border-color: var(--pa-primary);
    outline: 2px solid var(--pa-accent-warm);
}

/* ---------------------------------------------------------------
   404
   --------------------------------------------------------------- */
.pa-404 { max-width: var(--pa-measure); }
.pa-404 h1 { font-size: 2.6rem; margin: 0 0 0.8rem; color: var(--pa-primary); }
.pa-404 p { font-size: 1.02rem; line-height: 1.7; }
.pa-404 a { color: var(--pa-primary); }

/* ---------------------------------------------------------------
   Carnet (about) page — about-centered-above
   --------------------------------------------------------------- */
.pa-carnet-tete {
    text-align: center;
    margin-bottom: var(--pa-gap-block);
}

.pa-carnet-tete img {
    border-radius: 50%;
    display: block;
    margin: 0 auto 1rem;
}

.pa-carnet-tete .pa-carnet-nom {
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
}

.pa-carnet-tete .pa-carnet-lieu {
    font-size: 0.9rem;
    color: var(--pa-text-2);
    display: block;
}

/* ---------------------------------------------------------------
   Small screens
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --pa-gap-section: 3.2rem;
        --pa-pad-container: 1.4rem;
    }
    .site-tagline-heading { font-size: 1.42rem; }
    .pa-fiche__vignette img { height: 200px; }
    .pa-carte-auteur { flex-direction: column; }
}