/*
Theme Name: SlowLife — GeneratePress Child
Theme URI:  https://slowlife.info
Description: Charte SlowLife (Terre & Forêt). Surcharge GeneratePress.
Author: SlowLife
Template: generatepress
Version: 1.0.0
Text Domain: slowlife
*/

/* ================================================================
   SlowLife — Tokens (synchronisés avec theme.json)
   Exposés en CSS pour les blocs personnalisés et le contenu legacy
   ================================================================ */
:root {
    --sl-paper:        #F2EBDD;
    --sl-paper-2:      #E8DFC9;
    --sl-paper-3:      #DDD1B5;
    --sl-ink:          #2C2A26;
    --sl-ink-soft:     #4A453E;
    --sl-ink-mute:     #7A7368;
    --sl-rule:         #C9BE9F;

    --sl-forest:       #3E5641;
    --sl-forest-deep:  #2A3D2D;
    --sl-forest-soft:  #647B5E;
    --sl-moss:         #8E9A6E;

    --sl-terracotta:   #B5643C;
    --sl-terra-deep:   #8E4A2A;
    --sl-ochre:        #C68B45;
    --sl-rust:         #6F3A22;

    --sl-sky:          #6B7E83;

    --sl-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sl-sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --sl-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ================================================================
   Reset doux + base
   ================================================================ */
body,
body.generate-columns-activated {
    background-color: var(--sl-paper);
    color: var(--sl-ink);
    font-family: var(--sl-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Texture papier globale (calque léger sur le fond) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        radial-gradient(1200px 800px at 12% 18%, rgba(181, 100, 60, 0.05), transparent 60%),
        radial-gradient(900px 700px at 88% 82%, rgba(62, 86, 65, 0.04), transparent 60%);
    mix-blend-mode: multiply;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.45;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.06  0 0 0 0 0.22  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}
.site, #page, .site-content, .site-header, .site-footer { position: relative; z-index: 3; }

/* ================================================================
   Typographie — Headings, body, citation
   ================================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
    font-family: var(--sl-serif);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--sl-ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
h1, .entry-title { font-size: clamp(40px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.02em; font-variation-settings: "opsz" 144, "SOFT" 30; }
h2 { font-size: clamp(30px, 3.4vw, 44px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }
h4 { font-size: 22px; font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100; }

p, li {
    font-family: var(--sl-sans);
    color: var(--sl-ink);
}
.entry-content p { margin-bottom: 1.1em; }

a { color: var(--sl-forest-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--sl-terracotta); }

::selection { background: var(--sl-forest); color: var(--sl-paper); }

/* Drop cap natif WordPress */
.has-drop-cap:not(:focus)::first-letter {
    font-family: var(--sl-serif);
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--sl-terracotta);
    font-size: 5em;
    line-height: 0.85;
    margin: 0.05em 0.1em -0.05em 0;
}

/* ================================================================
   Header / nav GeneratePress
   ================================================================ */
.site-header {
    background-color: var(--sl-paper);
    border-bottom: 1px solid var(--sl-rule);
}
.main-title,
.main-title a {
    font-family: var(--sl-serif);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--sl-ink);
    font-variation-settings: "opsz" 144, "SOFT" 50;
}
.main-title a::after { content: "."; color: var(--sl-terracotta); }
.site-description { font-family: var(--sl-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sl-ink-mute); }

.main-navigation {
    background-color: transparent;
    border-bottom: 1px solid var(--sl-rule);
}
.main-navigation .main-nav ul li a {
    font-family: var(--sl-sans);
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--sl-ink);
    text-decoration: none;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--sl-forest);
    background: transparent;
}

/* ================================================================
   Article — Single post layout
   ================================================================ */
.single .entry-header { padding-bottom: 24px; border-bottom: 1px solid var(--sl-rule); margin-bottom: 32px; }
.entry-meta {
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-ink-mute);
}
.entry-meta a { color: var(--sl-terra-deep); text-decoration: none; }

/* Largeur de lecture confortable */
.single .entry-content > p,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > blockquote {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}
.single .entry-content > .alignwide,
.single .entry-content > .alignfull,
.single .entry-content > .wp-block-image,
.single .entry-content > .wp-block-cover { max-width: none; }

/* Citation native WP — repensée */
.entry-content blockquote,
.wp-block-quote {
    border: none;
    border-left: 3px solid var(--sl-terracotta);
    padding: 8px 0 8px 32px;
    margin: 48px 0;
    background: transparent;
}
.entry-content blockquote p,
.wp-block-quote p {
    font-family: var(--sl-serif);
    font-style: italic;
    font-size: 28px;
    line-height: 1.25;
    color: var(--sl-forest-deep);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.wp-block-quote cite, .wp-block-quote .wp-block-quote__citation {
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-ink-mute);
    font-style: normal;
    margin-top: 14px;
    display: inline-block;
}

/* Image native WP — bordure papier */
.wp-block-image figure,
.wp-block-image img {
    border-radius: 6px;
}
.wp-block-image figcaption {
    font-family: var(--sl-sans);
    font-style: italic;
    font-size: 13px;
    color: var(--sl-ink-mute);
    text-align: center;
    margin-top: 10px;
}

/* ================================================================
   BLOCS NATIFS — Variantes via "Block Styles"
   (enregistrés en JS dans /inc/block-styles.php)
   ================================================================ */

/* — Bouton : style "Forêt" (par défaut surchargé) — */
.wp-block-button .wp-block-button__link {
    font-family: var(--sl-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    background-color: var(--sl-forest);
    color: var(--sl-paper);
    border-radius: 6px;
    padding: 14px 24px;
    border: 1px solid var(--sl-forest-deep);
    text-decoration: none;
    transition: all .25s;
}
.wp-block-button .wp-block-button__link:hover {
    background-color: var(--sl-forest-deep);
    transform: translateY(-1px);
}
/* Style "Terracotta" */
.wp-block-button.is-style-sl-terracotta .wp-block-button__link {
    background-color: var(--sl-terracotta);
    border-color: var(--sl-terra-deep);
}
.wp-block-button.is-style-sl-terracotta .wp-block-button__link:hover {
    background-color: var(--sl-terra-deep);
}
/* Style "Encre contour" */
.wp-block-button.is-style-sl-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--sl-ink);
    border: 1px solid var(--sl-ink);
}
.wp-block-button.is-style-sl-outline .wp-block-button__link:hover {
    background-color: var(--sl-ink);
    color: var(--sl-paper);
}
/* Style "Filet — lien souligné" */
.wp-block-button.is-style-sl-ghost .wp-block-button__link {
    background: transparent;
    color: var(--sl-ink);
    border: none;
    border-bottom: 1px solid var(--sl-ink);
    border-radius: 0;
    padding: 8px 0;
}
.wp-block-button.is-style-sl-ghost .wp-block-button__link:hover {
    color: var(--sl-terracotta);
    border-color: var(--sl-terracotta);
    transform: none;
}

/* — Group : style "Conseil Slow" — encadré éditorial — */
.wp-block-group.is-style-sl-conseil {
    position: relative;
    background: var(--sl-paper-2);
    border: 1px solid var(--sl-forest-soft);
    border-radius: 6px;
    padding: 38px 44px 38px 56px;
    margin: 56px auto;
    max-width: 62ch;
}
.wp-block-group.is-style-sl-conseil::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--sl-terracotta);
    border-radius: 6px 0 0 6px;
}
.wp-block-group.is-style-sl-conseil::after {
    content: "❖ Le conseil Slow";
    position: absolute;
    top: 14px; left: 56px;
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-terra-deep);
}
.wp-block-group.is-style-sl-conseil > *:first-child { margin-top: 28px; }
.wp-block-group.is-style-sl-conseil h2,
.wp-block-group.is-style-sl-conseil h3,
.wp-block-group.is-style-sl-conseil h4 {
    font-family: var(--sl-serif);
    font-style: italic;
    font-size: 26px;
    line-height: 1.2;
    color: var(--sl-ink);
    margin-bottom: 12px;
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.wp-block-group.is-style-sl-conseil p {
    font-family: var(--sl-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sl-ink-soft);
}

/* — Group : style "Carte papier" — */
.wp-block-group.is-style-sl-card {
    background: var(--sl-paper-2);
    border: 1px solid var(--sl-rule);
    border-radius: 6px;
    padding: 32px;
}

/* — Group : style "Forêt" (fond vert) — */
.wp-block-group.is-style-sl-forest {
    background: var(--sl-forest);
    color: var(--sl-paper);
    border-radius: 6px;
    padding: 40px;
}
.wp-block-group.is-style-sl-forest h1,
.wp-block-group.is-style-sl-forest h2,
.wp-block-group.is-style-sl-forest h3,
.wp-block-group.is-style-sl-forest h4 { color: var(--sl-paper); }
.wp-block-group.is-style-sl-forest p { color: rgba(242, 235, 221, 0.9); }
.wp-block-group.is-style-sl-forest a { color: var(--sl-paper); }

/* — Heading : style "Surtitre" (eyebrow mono) — */
.wp-block-heading.is-style-sl-eyebrow,
h1.is-style-sl-eyebrow, h2.is-style-sl-eyebrow, h3.is-style-sl-eyebrow,
h4.is-style-sl-eyebrow, h5.is-style-sl-eyebrow, h6.is-style-sl-eyebrow {
    font-family: var(--sl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-terra-deep);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-variation-settings: normal;
}
.wp-block-heading.is-style-sl-eyebrow::before,
h2.is-style-sl-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

/* — Heading : style "Italique éditorial" — */
.wp-block-heading.is-style-sl-italic {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--sl-forest);
}

/* — Separator : style "Ornement" — */
.wp-block-separator.is-style-sl-ornament {
    border: none;
    height: 14px;
    background: none;
    text-align: center;
    margin: 56px auto;
    max-width: 200px;
    opacity: 1;
    position: relative;
}
.wp-block-separator.is-style-sl-ornament::before {
    content: "";
    display: block;
    position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: var(--sl-rule);
}
.wp-block-separator.is-style-sl-ornament::after {
    content: "❖";
    position: relative;
    background: var(--sl-paper);
    padding: 0 14px;
    color: var(--sl-terracotta);
    font-size: 14px;
}

/* — Pullquote — */
.wp-block-pullquote {
    border-top: 1px solid var(--sl-rule);
    border-bottom: 1px solid var(--sl-rule);
    padding: 40px 0;
    background: transparent;
}
.wp-block-pullquote p {
    font-family: var(--sl-serif);
    font-size: 38px;
    font-style: italic;
    line-height: 1.2;
    color: var(--sl-forest-deep);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
.wp-block-pullquote cite {
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-ink-mute);
    font-style: normal;
}

/* — Cover (couverture image) — typo override — */
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3,
.wp-block-cover .wp-block-cover-text {
    font-family: var(--sl-serif);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    letter-spacing: -0.02em;
}

/* — Listes natives — */
.entry-content ul:not(.wp-block-social-links),
.entry-content ol {
    padding-left: 1.4em;
}
.entry-content ul li::marker { color: var(--sl-terracotta); }
.entry-content ol li::marker { color: var(--sl-terra-deep); font-family: var(--sl-mono); font-size: 0.9em; }

/* — Code & pre — */
.entry-content code {
    font-family: var(--sl-mono);
    background: var(--sl-paper-2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.92em;
    border: 1px solid var(--sl-rule);
}

/* — Tableau — */
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--sl-rule);
}
.wp-block-table th {
    background: var(--sl-paper-2);
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sl-ink);
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sl-rule);
}
.wp-block-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sl-rule);
    font-size: 15px;
}

/* ================================================================
   Catégories / Piliers — couleurs par tag
   ================================================================ */
.cat-mobilite-douce, .tag-pilier-01 { --sl-pillar: var(--sl-forest); }
.cat-atelier-recup, .tag-pilier-02 { --sl-pillar: var(--sl-terra-deep); }
.cat-autonomie-jardin, .tag-pilier-03 { --sl-pillar: var(--sl-rust); }

.entry-categories a, .post-categories a, .entry-meta .cat-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sl-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--sl-pillar, var(--sl-forest));
    color: var(--sl-pillar, var(--sl-forest));
    border-radius: 3px;
    text-decoration: none;
}

/* ================================================================
   Sidebar widgets
   ================================================================ */
.widget-area .widget {
    background: transparent;
    border-top: 1px solid var(--sl-rule);
    padding: 24px 0 0 0;
    margin-bottom: 28px;
}
.widget-area .widget-title {
    font-family: var(--sl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sl-terra-deep);
    margin-bottom: 14px;
}
.widget-area .widget ul li {
    font-family: var(--sl-serif);
    font-style: italic;
    font-size: 16px;
    padding: 6px 0;
}
.widget-area .widget ul li a { text-decoration: none; }

/* ================================================================
   Footer
   ================================================================ */
.site-footer,
.footer-widgets {
    background: var(--sl-ink);
    color: var(--sl-paper);
}
.site-footer a { color: var(--sl-paper); }
.footer-widgets .widget-title { color: var(--sl-terracotta); }
.site-info {
    font-family: var(--sl-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(242, 235, 221, 0.55);
    border-top: 1px solid rgba(242, 235, 221, 0.15);
}

/* ================================================================
   Formulaire (commentaires, recherche)
   ================================================================ */
input[type="text"], input[type="email"], input[type="url"],
input[type="search"], textarea, select {
    background: transparent;
    border: 1px solid var(--sl-ink);
    border-radius: 6px;
    padding: 12px 16px;
    font-family: var(--sl-sans);
    font-size: 15px;
    color: var(--sl-ink);
}
input[type="submit"], button {
    background: var(--sl-forest);
    color: var(--sl-paper);
    border: 1px solid var(--sl-forest-deep);
    padding: 12px 22px;
    border-radius: 6px;
    font-family: var(--sl-sans);
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
}
input[type="submit"]:hover, button:hover {
    background: var(--sl-forest-deep);
}

/* ================================================================
   Responsive — confort lecture mobile
   ================================================================ */
@media (max-width: 768px) {
    body { font-size: 16px; }
    .single .entry-content > p,
    .single .entry-content > h2,
    .single .entry-content > h3 { padding: 0 4px; }
    .wp-block-group.is-style-sl-conseil { padding: 28px 24px 28px 32px; }
    .entry-content blockquote p, .wp-block-quote p { font-size: 22px; }
}