/*
Theme Name:        SLSA Saumurois
Theme URI:         https://slsa-saumurois.fr
Author:            Société des Lettres, Sciences et Arts du Saumurois
Author URI:        https://slsa-saumurois.fr
Description:       Thème WordPress FSE (Full Site Editing) pour la Société des Lettres, Sciences et Arts du Saumurois. Design éditorial classique inspiré des publications savantes, palette parchemin et or, typographie Cormorant Garamond.
Version:           1.1.0
Requires at least: 6.4
Tested up to:      6.7
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:       slsa-saumurois
Tags:              full-site-editing, block-themes, custom-colors, custom-typography, one-column, two-columns, blog, portfolio
*/

/* =========================================================
   RESET & BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   STICKY FOOTER — le pied de page reste collé au bas de la
   fenêtre même quand le contenu est court
   ========================================================= */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks > main {
  flex: 1 0 auto;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   VARIABLES LOCALES (complément de theme.json)
   ========================================================= */
:root {
  --slsa-transition: 0.2s ease;
  --slsa-ornament-line: 1px solid rgba(184, 150, 90, 0.45);
}

/* =========================================================
   TYPOGRAPHIE GLOBALE
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  line-height: 1.25;
  color: var(--wp--preset--color--ink);
}

em, i {
  color: var(--wp--preset--color--gold-dark);
}

/* Sur fond sombre (hero, en-tête, footer), l'emphase passe en doré clair (contraste RGAA) */
.slsa-hero-title em,
.slsa-hero-title i,
.slsa-wordmark em,
.slsa-wordmark i,
.slsa-footer em,
.slsa-footer i {
  color: var(--wp--preset--color--gold-light);
  font-style: italic;
}

p + p {
  margin-top: 1em;
}

/* =========================================================
   ORNEMENTS DÉCORATIFS (classe utilitaire)
   ========================================================= */
.slsa-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.75rem auto;
}

.slsa-ornament::before,
.slsa-ornament::after {
  content: "";
  display: block;
  height: 1px;
  width: 3rem;
  background: var(--wp--preset--color--gold);
  opacity: 0.55;
}

.slsa-ornament-diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--wp--preset--color--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* =========================================================
   OVERLINE (petit texte catégorie au-dessus des titres)
   ========================================================= */
.slsa-overline {
  display: block;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-dark);
  margin-bottom: 0.5rem;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.wp-block-navigation a {
  color: var(--wp--preset--color--stone-light) !important;
  text-decoration: none;
  transition: color var(--slsa-transition);
}

.wp-block-navigation a:hover {
  color: var(--wp--preset--color--gold-light) !important;
}

.wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--base);
  letter-spacing: var(--wp--custom--letter-spacing--normal);
  text-transform: uppercase;
  padding: 0.5rem 0; /* cible tactile plus confortable (WCAG 2.5.8) */
}

/* Menu mobile (overlay) : zones cliquables généreuses au doigt */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  padding: 0.75rem 0;
}

/* Overlay mobile : le coeur de WP impose un fond BLANC → texte clair illisible.
   On force le fond encre + texte clair (liens et sous-liens), contraste AA. */
.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #1A1612 !important;
}

.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open a,
.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #F8F3EA !important;
}

.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
.slsa-site-header .wp-block-navigation__responsive-container.is-menu-open a:focus {
  color: var(--wp--preset--color--gold-light) !important;
}

/* Dropdown : fond sombre forcé (le coeur de WP impose sinon un fond blanc via
   .wp-block-navigation:not(.has-background)…), texte clair → contraste AA. */
.slsa-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: #1A1612 !important;
  border: 1px solid var(--wp--preset--color--gold-dark);
  border-top: 2px solid var(--wp--preset--color--gold);
  padding: 0.5rem 0;
  min-width: 220px;
}

.slsa-site-header .wp-block-navigation__submenu-container a,
.slsa-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.5rem 1rem;
  display: block;
  font-size: var(--wp--preset--font-size--base);
  color: #F8F3EA !important; /* ~14:1 sur encre */
}

.slsa-site-header .wp-block-navigation__submenu-container a:hover,
.slsa-site-header .wp-block-navigation__submenu-container a:focus {
  color: var(--wp--preset--color--gold-light) !important;
}

/* En-tête : ombre portée au défilement (classe pilotée par main.js) */
.slsa-site-header {
  transition: box-shadow var(--slsa-transition);
}

.slsa-site-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(26, 22, 18, 0.35);
}

/* =========================================================
   MARQUE / NOM DU SITE (en-tête + pied de page)
   Reprend l'identité typographique de .slsa-hero-title
   (serif, emphase dorée) à une taille adaptée, jamais
   inférieure à --wp--preset--font-size--base.
   ========================================================= */
.slsa-wordmark {
  display: inline-block;
  max-width: 34ch;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 400;
  line-height: 1.2;
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  color: #FAF6EE; /* blanc ivoire — fonds toujours sombres, insensible à la variation */
  text-decoration: none;
  transition: color var(--slsa-transition);
}

/* Pied de page : marque un peu plus grande que la description en dessous
   (hiérarchie claire) + léger espace avant le texte de présentation. */
.slsa-footer .slsa-wordmark {
  font-size: var(--wp--preset--font-size--lg); /* 24px > description (18px) */
  margin-bottom: 0.75rem;
}

.slsa-wordmark:hover,
.slsa-wordmark:focus-visible {
  color: var(--wp--preset--color--gold-light);
}

/* =========================================================
   HERO / BANNIÈRE
   ========================================================= */
.slsa-hero-section {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slsa-hero-section .wp-block-cover__inner-container {
  text-align: center;
}

.slsa-hero-eyebrow {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-light);
  margin-bottom: 0.75rem;
}

/* =========================================================
   BANDEAU DE STATISTIQUES
   ========================================================= */
.slsa-stats-band {
  background: var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--gold-dark);
}

.slsa-stat-number {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  color: var(--wp--preset--color--gold-light);
  line-height: 1;
  display: block;
  text-align: center;
}

.slsa-stat-label {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--stone);
  display: block;
  text-align: center;
  margin-top: 0.25rem;
}

/* =========================================================
   CARTES ACTIVITÉS
   ========================================================= */
.slsa-activity-card {
  background: #FDF9F2;
  border: 1px solid var(--wp--preset--color--parchment-dark);
  border-top: 3px solid var(--wp--preset--color--gold);
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: box-shadow var(--slsa-transition),
              transform var(--slsa-transition);
}

.slsa-activity-card:hover {
  box-shadow: 0 6px 20px rgba(26, 22, 18, 0.1);
  transform: translateY(-3px);
}

.slsa-activity-card .wp-block-heading {
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Pastille d'icône (SVG line-art) en tête de carte */
.slsa-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  color: #7A5E30;
  background: var(--wp--preset--color--off-white);
  border: 1px solid var(--wp--preset--color--gold);
  border-radius: 50%;
  transition: background var(--slsa-transition),
              border-color var(--slsa-transition),
              color var(--slsa-transition);
}

.slsa-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.slsa-activity-card:hover .slsa-card-icon {
  background: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
  color: #1A1612;
}

/* Lien « Explorer » : aligné en bas de carte, flèche animée au survol */
.slsa-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: #7A5E30;
  text-decoration: none;
}

.slsa-card-link-text {
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--slsa-transition);
}

.slsa-card-link-arrow {
  display: inline-flex;
  transition: transform var(--slsa-transition);
}

.slsa-card-link:hover,
.slsa-card-link:focus-visible {
  color: #1A1612;
}

.slsa-card-link:hover .slsa-card-link-text,
.slsa-card-link:focus-visible .slsa-card-link-text {
  border-color: currentColor;
}

.slsa-card-link:hover .slsa-card-link-arrow,
.slsa-card-link:focus-visible .slsa-card-link-arrow {
  transform: translateX(4px);
}

/* =========================================================
   ACTUALITÉS / AGENDA
   ========================================================= */
.slsa-news-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--parchment-dark);
}

.slsa-news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Agenda/actualités : ces éléments vivent sur des sections éditoriales claires
   (fixes en clair dans les deux modes) → couleurs littérales, insensibles à la
   variation sombre qui inverse ink/parchment. */
.slsa-date-block {
  background: #1A1612;
  text-align: center;
  padding: 0.625rem 0.5rem;
  flex-shrink: 0;
}

.slsa-date-day {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  color: #D4B078;
  line-height: 1;
  display: block;
}

.slsa-date-month {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: #A89A85;
  display: block;
  margin-top: 0.125rem;
}

.slsa-news-tag {
  display: inline-block;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: #7A5E30;
  margin-bottom: 0.25rem;
}

.slsa-news-title a {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  color: #1A1612;
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--slsa-transition);
}

.slsa-news-title a:hover {
  color: #7A5E30;
}

/* =========================================================
   BANDEAU ADHÉSION (CTA)
   ========================================================= */
.slsa-join-band {
  background: var(--wp--preset--color--bordeaux);
}

/* La colonne de texte ne doit pas se réduire face au bouton (largeur auto)
   dans le conteneur flex-nowrap : sinon le titre se brise verticalement. */
.slsa-join-band .wp-block-column:first-child {
  flex: 1 1 auto;
  min-width: 16rem;
}

.slsa-join-band .wp-block-heading {
  color: var(--wp--preset--color--off-white);
  font-style: italic;
}

.slsa-join-band p {
  color: rgba(250, 246, 238, 0.65);
}

.slsa-join-band .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--off-white) !important;
  border: 1px solid rgba(250, 246, 238, 0.5) !important;
  white-space: nowrap;
}

/* La colonne du bouton se dimensionne à son contenu (ni croissance ni
   réduction) : sinon elle s'effondre à 0 et le bouton déborde à droite. */
.slsa-join-band .wp-block-column:last-child {
  flex: 0 0 auto;
  width: auto;
}

/* Formulaire de recherche 404 : pleine largeur plafonnée (responsive, placeholder non tronqué) */
.slsa-404-search {
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.slsa-join-band .wp-block-button__link:hover {
  background: rgba(250, 246, 238, 0.12) !important;
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.slsa-footer {
  background: var(--wp--preset--color--ink);
  border-top: 2px solid var(--wp--preset--color--gold-dark);
}

.slsa-footer p,
.slsa-footer a,
.slsa-footer li {
  font-size: var(--wp--preset--font-size--sm);
  color: #A89A85; /* pied de page toujours sombre → littéral clair (AA both modes) */
  text-decoration: none;
}

.slsa-footer a:hover {
  color: var(--wp--preset--color--gold-light);
}

/* Listes du pied de page sans puces (le style inline n'est plus sérialisé) */
.slsa-footer-links {
  list-style: none;
}

.slsa-footer .wp-block-heading {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  margin-bottom: 0.625rem;
}

.slsa-footer-brand {
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  color: var(--wp--preset--color--gold-light);
  letter-spacing: var(--wp--custom--letter-spacing--tight);
  display: block;
  margin-bottom: 0.5rem;
}

.slsa-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.875rem;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--stone);
}

/* =========================================================
   POSTS — BOUCLE ARTICLES
   ========================================================= */
.slsa-post-card {
  background: #FDF9F2;
  border: 1px solid var(--wp--preset--color--parchment-dark);
  padding: 1.25rem;
  overflow: hidden;
  transition: box-shadow var(--slsa-transition),
              transform var(--slsa-transition);
}

.slsa-post-card:hover {
  box-shadow: 0 6px 20px rgba(26, 22, 18, 0.1);
  transform: translateY(-3px);
}

/* Image à la une en bandeau plein cadre en tête de carte */
.slsa-post-card-image {
  margin: -1.25rem -1.25rem 1rem;
}

.slsa-post-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--slsa-transition);
}

.slsa-post-card:hover .slsa-post-card-image img {
  transform: scale(1.04);
}

/* Cartes d'articles : surface éditoriale claire fixe → couleurs littérales. */
.slsa-post-card .wp-block-post-title {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.3;
  margin: 0.35rem 0 0.5rem;
}

.slsa-post-card .wp-block-post-title a {
  color: #1A1612;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 500;
}

.slsa-post-card .wp-block-post-date {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
  color: #7A5E30;
}

.slsa-post-card .wp-block-post-excerpt {
  color: #5F5446;
}

/* =========================================================
   PAGE ARTICLE UNIQUE
   ========================================================= */
.slsa-single-header {
  background: #1A1612; /* bandeau toujours sombre (insensible à la variation) */
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--wp--preset--color--off-white);
}

/* En-tête sombre : titre/titre d'archive en clair (lisibilité sur fond encre) */
.slsa-single-header .wp-block-post-title,
.slsa-single-header .wp-block-query-title,
.slsa-single-header h1,
.slsa-single-header h2 {
  color: var(--wp--preset--color--off-white);
  font-style: italic;
}

/* Description de terme + liens (catégories) dans l'en-tête sombre */
.slsa-single-header .wp-block-term-description {
  color: var(--wp--preset--color--off-white);
}

.slsa-single-header a {
  color: var(--wp--preset--color--gold-light);
}

.slsa-single-header .wp-block-post-date {
  color: var(--wp--preset--color--gold-light);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-transform: uppercase;
}

/* =========================================================
   SÉPARATEUR DORÉ
   ========================================================= */
.wp-block-separator.is-style-wide {
  border-color: var(--wp--preset--color--gold) !important;
  opacity: 0.4;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Nom du site : agrandi (1rem) sur grand écran ; compact en dessous
   pour que le menu principal ne se replie pas (titre long) */
@media (max-width: 1199px) {
  .slsa-site-header .wp-block-site-title,
  .slsa-site-header .wp-block-site-title a {
    font-size: var(--wp--preset--font-size--xs) !important;
    letter-spacing: var(--wp--custom--letter-spacing--wide);
  }
}

/* Menu principal en hamburger dès 1024px (au lieu de 600px par défaut du
   bloc Navigation) : le nom long + 6 entrées ne tiennent pas sur une ligne
   en dessous de ~1200px. On force l'icône burger et on masque le menu inline ;
   l'overlay plein écran reste géré nativement à l'ouverture (.is-menu-open). */
@media (max-width: 1024px) {
  .slsa-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .slsa-site-header .wp-block-navigation:not(.has-modal-open)
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

@media (max-width: 782px) {
  .slsa-stats-band .wp-block-columns {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .slsa-news-item {
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
  }

  .slsa-join-band .wp-block-columns {
    flex-direction: column;
    text-align: center;
  }

  /* Centrer le bouton (conteneur flex) sous le texte centré */
  .slsa-join-band .wp-block-buttons {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .slsa-hero-section {
    min-height: 320px;
  }

  .slsa-activity-card {
    padding: 1.25rem 1rem;
  }

  /* Titre hero : retour à la ligne naturel (le <br> forcé déborderait) */
  .slsa-hero-title br {
    display: none;
  }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : visible uniquement au focus clavier */
.skip-link {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--gold-light);
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--sm);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--wide);
  text-decoration: none;
}

.skip-link:focus {
  position: fixed;
  z-index: 9999;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--wp--preset--color--gold);
}

/* =========================================================
   MOUVEMENT RÉDUIT (WCAG 2.3.3) — respecte la préférence système
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .slsa-stats-band,
  .slsa-join-band,
  .slsa-footer {
    background: white !important;
    color: black !important;
  }
}