/*
Theme Name: Samaritains Morges
Theme URI: https://samaritainsmorges.ch
Author: Section de Morges des Samaritains-Vaud
Description: Thème à blocs de la Section de Morges des Samaritains-Vaud. Palette teal et pêche, Source Serif 4 et Inter auto-hébergées.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samaritains-morges
*/

/* ---------------------------------------------------------------------------
   Component styles that theme.json cannot express. Class names are prefixed
   "sm-" and applied through the block editor's "Additional CSS class" field or
   the theme patterns.
   --------------------------------------------------------------------------- */

:root {
    --sm-radius-card: 12px;
    --sm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --sm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --sm-transition: 300ms cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }
img { height: auto; max-width: 100%; }

/* --- Header ---------------------------------------------------------------- */
.sm-header {
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 0 rgb(255 255 255 / .08);
}
.sm-header .wp-block-site-logo img {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    height: 40px !important;
    width: auto !important;
    max-width: none;
}
.sm-header .wp-block-navigation .wp-block-navigation-item__content {
    padding: .5rem .75rem;
    border-radius: 6px;
    transition: background-color var(--sm-transition);
}
.sm-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.sm-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--teal-medium);
    color: var(--wp--preset--color--white);
}
.sm-header .wp-block-navigation__submenu-container {
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: var(--sm-shadow-xl);
    padding: .25rem 0;
    min-width: 14rem;
}
.sm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--gray-900) !important;
    border-radius: 0;
}
.sm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--section-gray);
    color: var(--wp--preset--color--teal-dark) !important;
}
.sm-header .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--teal-dark);
    color: #fff;
    padding: 1.5rem;
}
.sm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background: transparent !important;
    box-shadow: none;
}
.sm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: #fff !important;
}
.sm-header .wp-block-navigation__responsive-container-close,
.sm-header .wp-block-navigation__responsive-container-open {
    color: #fff;
}
.sm-header .wp-block-button__link {
    padding: .5rem 1rem;
    font-size: var(--wp--preset--font-size--small);
}
.sm-header .wp-block-site-title { font-size: 1.125rem; line-height: 1.2; white-space: nowrap; margin: 0; }
.sm-header .wp-block-navigation-item__content,
.sm-header .wp-block-button__link { white-space: nowrap; }
.sm-header .sm-header-cta { flex-shrink: 0; }
.sm-header .wp-block-navigation { flex-shrink: 1; min-width: 0; }
@media (max-width: 1199px) {
    .sm-header .sm-header-cta { display: none; }
}
/* Collapse the menu into the burger below 1024px (core only does it below 600px). */
@media (min-width: 600px) and (max-width: 1023px) {
    .sm-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
    .sm-header .wp-block-navigation__responsive-container-open { display: flex !important; }
}
@media (max-width: 600px) {
    .sm-header .wp-block-site-title { display: none; }
}

/* --- Footer ---------------------------------------------------------------- */
.sm-footer {
    border-top: 1px solid rgb(255 255 255 / .08);
}
.sm-footer .wp-block-site-logo img {
    background: #fff;
    border-radius: 6px;
    padding: 5px 8px;
    height: 40px !important;
    width: auto !important;
    max-width: 100%;
}
.sm-footer a { color: var(--wp--preset--color--gray-300); text-decoration: none; }
.sm-footer a:hover { color: var(--wp--preset--color--peach); }
.sm-footer .wp-block-navigation .wp-block-navigation-item__content { padding: 0; }
.sm-footer h3, .sm-footer .wp-block-heading { color: #fff; }
.sm-footer-bottom {
    border-top: 1px solid var(--wp--preset--color--teal-medium);
    padding-top: 2rem;
    margin-top: 2.5rem;
}

/* --- Sections -------------------------------------------------------------- */
.sm-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.sm-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    color: var(--wp--preset--color--crs-red);
    margin-bottom: .5rem;
}
.sm-eyebrow.is-peach { color: var(--wp--preset--color--peach); }

/* Hero */
.sm-hero {
    background: var(--wp--preset--gradient--hero);
    position: relative;
    isolation: isolate;
}
.sm-hero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / .15));
}
.sm-hero.has-background-image::before { background: linear-gradient(90deg, rgb(0 0 0 / .6), rgb(0 0 0 / .3)); }
.sm-hero h1 { color: #fff; }
.sm-hero h1 em, .sm-hero h1 .sm-accent { color: var(--wp--preset--color--peach); font-style: normal; }
.sm-hero p { color: var(--wp--preset--color--gray-300); font-size: var(--wp--preset--font-size--large); }
.sm-hero p.sm-eyebrow { color: var(--wp--preset--color--peach); font-size: var(--wp--preset--font-size--small); }

/* Page header (inner pages) */
.sm-page-header h1 { color: #fff; }
.sm-page-header p { color: var(--wp--preset--color--gray-300); font-size: var(--wp--preset--font-size--large); }
.sm-page-header p.sm-eyebrow { color: var(--wp--preset--color--peach); font-size: var(--wp--preset--font-size--small); }

/* Buttons */
.wp-block-button__link { transition: background-color var(--sm-transition), color var(--sm-transition), box-shadow var(--sm-transition); }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline-light .wp-block-button__link {
    background: transparent;
    border: 2px solid rgb(255 255 255 / .8);
    color: #fff;
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover { background: rgb(255 255 255 / .1); }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--wp--preset--color--teal-dark); color: var(--wp--preset--color--teal-dark); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--teal-dark); color: #fff; }
.wp-block-button.is-style-teal .wp-block-button__link { background: var(--wp--preset--color--teal-dark); }
.wp-block-button.is-style-teal .wp-block-button__link:hover { background: var(--wp--preset--color--teal-medium); }
.wp-block-button.is-style-peach .wp-block-button__link { background: var(--wp--preset--color--peach); color: var(--wp--preset--color--teal-dark); border-radius: 12px; font-weight: 700; }
.wp-block-button.is-style-peach .wp-block-button__link:hover { background: #fff; }

/* Cards */
.sm-card {
    background: var(--wp--preset--color--section-gray);
    border-radius: var(--sm-radius-card);
    padding: 2rem;
    box-shadow: var(--sm-shadow-md);
    transition: transform var(--sm-transition), box-shadow var(--sm-transition);
}
.wp-block-column > .sm-card:only-child { height: 100%; }
.sm-card + .sm-emergency, .sm-card + .sm-card { margin-top: 1.5rem; }
.sm-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-xl); }
.sm-card h3 { font-size: var(--wp--preset--font-size--x-large); margin-top: 0; margin-bottom: .5rem; }
.sm-card h4 { font-size: var(--wp--preset--font-size--medium); margin: 1.5rem 0 .25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.sm-card p { color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--small); }
.sm-card.is-white { background: #fff; border: 1px solid #e5e7eb; }
.sm-card.is-teal { background: var(--wp--preset--color--teal-dark); color: #fff; }
.sm-card.is-teal h3, .sm-card.is-teal p { color: #fff; }
.sm-card.is-teal p { color: var(--wp--preset--color--gray-300); }
.sm-card p.sm-figure { font-size: 2rem; color: var(--wp--preset--color--crs-red); margin-bottom: .25rem !important; }
.sm-card .sm-more { color: var(--wp--preset--color--crs-red); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; }
.sm-card .sm-more:hover { text-decoration: underline; }

/* Icon badge above card titles: a paragraph with an inline SVG or emoji */
.sm-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 6px;
    background: var(--wp--preset--color--crs-red); color: #fff;
    margin-bottom: 1rem !important;
    transition: transform var(--sm-transition);
}
.sm-icon.is-teal { background: var(--wp--preset--color--teal-dark); }
.sm-icon svg { width: 1.5rem; height: 1.5rem; }
.sm-card:hover .sm-icon { transform: scale(1.1); }

/* Key figures */
.sm-figure {
    font-family: var(--wp--preset--font-family--serif);
    font-size: var(--wp--preset--font-size--figure);
    font-weight: 700;
    color: var(--wp--preset--color--teal-dark);
    line-height: 1.1;
    margin: 0 !important;
}
.sm-figure.is-red { color: var(--wp--preset--color--crs-red); }
.sm-figure + p { color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--small); margin-top: .5rem !important; }
.sm-affiliations { opacity: .45; gap: .75rem 1.25rem !important; }
.sm-affiliations { flex-direction: row; }
@media (max-width: 600px) {
    .sm-affiliations { flex-direction: column; gap: .5rem !important; }
    .sm-affiliations .sm-sep { display: none; }
}
.sm-affiliations p { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--gray-600); margin: 0; white-space: nowrap; }

/* Check list (values) */
.sm-checklist { list-style: none; padding-left: 0; }
.sm-checklist li { position: relative; padding-left: 1.75rem; margin-bottom: .75rem; color: var(--wp--preset--color--gray-600); }
.sm-checklist li::before {
    content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF4E4E' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.sm-checklist li strong { color: var(--wp--preset--color--teal-dark); }
.sm-card.is-teal .sm-checklist li { color: var(--wp--preset--color--gray-300); }
.sm-card.is-teal .sm-checklist li strong { color: #fff; }
.sm-card.is-teal .sm-checklist li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffe2c7' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }

/* Timeline */
.sm-timeline { list-style: none; padding: 0; margin: 2rem 0 0; position: relative; }
.sm-timeline::before { content: ""; position: absolute; left: .45rem; top: 0; bottom: 0; width: 2px; background: rgb(26 69 72 / .2); }
.sm-timeline li { position: relative; padding-left: 2.5rem; margin-bottom: 2.5rem; }
.sm-timeline li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--wp--preset--color--teal-dark); box-shadow: 0 0 0 4px #fff; }
.sm-timeline li.is-red::before { background: var(--wp--preset--color--crs-red); }
.sm-timeline .sm-year { font-weight: 700; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--teal-dark); display: block; }
.sm-timeline li.is-red .sm-year { color: var(--wp--preset--color--crs-red); }
.sm-timeline h3 { margin: 0 0 .25rem; font-size: var(--wp--preset--font-size--x-large); }
.sm-timeline p { margin: 0; color: var(--wp--preset--color--gray-600); }

/* Emergency box */
.sm-emergency { background: var(--wp--preset--color--teal-dark); color: #fff; border-radius: var(--sm-radius-card); padding: 1.5rem; }
.sm-emergency h3 { color: #fff; margin-top: 0; }
.sm-emergency p { color: var(--wp--preset--color--gray-300); margin: 0; font-size: var(--wp--preset--font-size--small); }
.sm-emergency .sm-number { font-size: 2.25rem; font-weight: 700; color: var(--wp--preset--color--peach); line-height: 1.2; }

/* Course list */
.sm-course { border: 1px solid #e5e7eb; border-radius: var(--sm-radius-card); padding: 1.5rem; background: #fff; transition: border-color var(--sm-transition), box-shadow var(--sm-transition); }
.sm-course:hover { border-color: var(--wp--preset--color--teal-dark); box-shadow: var(--sm-shadow-md); }
.sm-course h3 { margin-top: 0; }
.sm-course .sm-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray-600); margin: .5rem 0 1rem; }
.sm-badge { display: inline-block; background: var(--wp--preset--color--peach); color: var(--wp--preset--color--teal-dark); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; padding: .2rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }

/* Posts list (news) */
.sm-post-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--sm-radius-card); overflow: hidden; height: 100%; transition: transform var(--sm-transition), box-shadow var(--sm-transition); }
.sm-post-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-xl); }
.sm-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; }
.sm-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 .5rem; }
.sm-post-card .wp-block-post-title a { text-decoration: none; }
.sm-post-card .wp-block-post-date { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray-600); }
.sm-post-card .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray-600); }
.sm-post-card > .wp-block-group { padding: 1.25rem; }

/* Prose pages (legal) */
.sm-prose h2 { margin-top: 2.5rem; font-size: var(--wp--preset--font-size--x-large); }
.sm-prose p, .sm-prose li { color: var(--wp--preset--color--gray-600); }

/* Reveal on scroll (progressive enhancement, see theme.js) */
@media (prefers-reduced-motion: no-preference) {
    .js .sm-reveal { opacity: 0; transform: translateY(1rem); transition: opacity 700ms ease-out, transform 700ms ease-out; }
    .js .sm-reveal.is-visible { opacity: 1; transform: none; }
}

/* Accessibility helpers */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--wp--preset--color--peach); outline-offset: 2px; }

/* --- Contact Form 7 ------------------------------------------------------- */
.wpcf7 form { display: grid; gap: 1rem; }
.wpcf7 { padding-right: 1rem; }
@media (max-width: 781px) { .wpcf7 { padding-right: 0; } }
.wpcf7 form p { margin: 0; }
.wpcf7 label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--gray-900); }
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea, .wpcf7 select {
    display: block; width: 100%; box-sizing: border-box; margin-top: .25rem;
    padding: .625rem 1rem; border: 1px solid #d1d5db; border-radius: 6px;
    font: inherit; background: #fff; color: var(--wp--preset--color--gray-900);
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
    outline: none; border-color: var(--wp--preset--color--teal-dark); box-shadow: 0 0 0 3px rgb(26 69 72 / .15);
}
.wpcf7 textarea { min-height: 9rem; resize: vertical; }
.wpcf7 input[type="submit"], .wpcf7 button[type="submit"] {
    background: var(--wp--preset--color--crs-red); color: #fff; border: 0; border-radius: 6px;
    padding: .75rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer; transition: background-color var(--sm-transition);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--crs-red-dark); }
.wpcf7 .wpcf7-spinner { margin-left: .5rem; }
.wpcf7 .wpcf7-not-valid-tip { color: var(--wp--preset--color--crs-red); font-size: var(--wp--preset--font-size--small); }
.wpcf7 .wpcf7-response-output { border-radius: 6px; padding: .75rem 1rem; margin: 0; }

/* --- Instagram section (shortcode sm_instagram_section) ------------------- */
.sm-instagram { background: #fff; }
.sm-instagram__inner { max-width: var(--wp--style--global--wide-size, 80rem); margin: 0 auto; }
.sm-instagram__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.sm-instagram__head h2 { margin: 0; }
.sm-instagram__head .wp-block-button__link { background: var(--wp--preset--color--teal-dark); color: #fff; text-decoration: none; }
.sm-instagram__head .wp-block-button__link:hover { background: var(--wp--preset--color--teal-medium); }
.sm-instagram #sb_instagram { padding: 0 !important; }
.sm-instagram #sb_instagram .sbi_item img { border-radius: var(--sm-radius-card); }

/* --- Next exercise band (shortcode sm_next_exercise) ----------------------- */
.sm-exercise { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1.5rem var(--wp--preset--spacing--30); }
.sm-exercise__inner { max-width: var(--wp--style--global--wide-size, 80rem); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.sm-exercise .sm-eyebrow { margin: 0 0 .25rem; }
.sm-exercise__date { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; color: var(--wp--preset--color--teal-dark); margin: 0; }
.sm-exercise__meta { text-align: right; }
.sm-exercise__meta p { margin: 0; color: var(--wp--preset--color--gray-600); font-size: var(--wp--preset--font-size--small); }
.sm-exercise__meta span { font-weight: 600; color: var(--wp--preset--color--teal-dark); }
.sm-exercise__rule { font-size: var(--wp--preset--font-size--x-small) !important; }
@media (max-width: 600px) { .sm-exercise__meta { text-align: left; } }

/* --- WhatsApp click-to-chat link ------------------------------------------ */
.sm-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: #25D366; color: #fff !important; text-decoration: none !important;
    transition: background-color var(--sm-transition), transform var(--sm-transition);
}
.sm-whatsapp:hover { transform: scale(1.1); }
.sm-whatsapp:hover { background: #1ebe5d; }
.sm-whatsapp::before {
    content: ""; width: 1.1rem; height: 1.1rem; flex-shrink: 0;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.2-.3-.3-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.5.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3 .8.8-2.9-.2-.3C4.1 15 3.7 13.5 3.7 12c0-4.6 3.7-8.3 8.3-8.3s8.3 3.7 8.3 8.3-3.7 8.2-8.3 8.2z'/%3E%3C/svg%3E");
}

/* --- Links on dark backgrounds --------------------------------------------- */
.has-teal-dark-background-color:not(.sm-header):not(.sm-footer):not(.wp-block-navigation__responsive-container) a:not(.wp-block-button__link),
.has-teal-medium-background-color:not(.sm-header):not(.sm-footer):not(.wp-block-navigation__responsive-container) a:not(.wp-block-button__link),
.sm-hero a:not(.wp-block-button__link),
.sm-page-header a:not(.wp-block-button__link),
.sm-card.is-teal a:not(.wp-block-button__link),
.sm-emergency a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--peach);
    text-decoration: underline;
    text-underline-offset: .15em;
}
.has-teal-dark-background-color:not(.sm-header):not(.sm-footer):not(.wp-block-navigation__responsive-container) a:not(.wp-block-button__link):hover,
.has-teal-medium-background-color:not(.sm-header):not(.sm-footer):not(.wp-block-navigation__responsive-container) a:not(.wp-block-button__link):hover,
.sm-hero a:not(.wp-block-button__link):hover,
.sm-page-header a:not(.wp-block-button__link):hover,
.sm-card.is-teal a:not(.wp-block-button__link):hover,
.sm-emergency a:not(.wp-block-button__link):hover { color: #fff; }