/*
Theme Name:  Saint-Justin — enfant de Saved
Theme URI:   https://paroisselevallois.fr
Description: Thème enfant de Saved 2.4 (ChurchThemes.com) avec la charte graphique de la Paroisse Saint-Justin de Levallois. Applique les polices (Newsreader + Bricolage Grotesque), la palette de couleurs officielle et quelques ajustements visuels au thème parent.
Author:      Paroisse Saint-Justin de Levallois
Template:    saved
Version:     1.0
Text Domain: stj-child
*/

/* ================================================================
   POLICES GOOGLE (chargées via functions.php, déclarées ici pour
   référence — ne pas dupliquer l'import dans les blocs Elementor
   si ce thème enfant est actif)
   ================================================================ */

/* ================================================================
   VARIABLES DE COULEUR — charte graphique Saint-Justin
   ================================================================ */
:root {
  --stj-bleu:          #34496e;  /* fond hero, titres foncés        */
  --stj-bleu-footer:   #2c3f60;  /* pied de page                    */
  --stj-bleu-moyen:    #637ea9;  /* icônes, chiffres agenda         */
  --stj-creme:         #fdf8f2;  /* fond général                    */
  --stj-creme-rose:    #f9e9dc;  /* encarts doux                    */
  --stj-orange:        #f68837;  /* boutons, liens d'action         */
  --stj-jaune:         #fbc112;  /* accents sur fonds foncés        */
  --stj-orange-clair:  #f9a35e;  /* italiques hero, statistiques    */
  --stj-bordeaux:      #900020;  /* carte édito mise en avant       */
  --stj-texte:         #414a5e;  /* corps de texte                  */
  --stj-texte-sec:     #6f7488;  /* descriptions, intros            */
  --stj-taupe:         #9a8c7a;  /* dates, légendes                 */
  --stj-bordure:       #efe2d2;  /* contours de cartes              */
}

/* ================================================================
   BASE
   ================================================================ */
body {
  background-color: var(--stj-creme);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  color: var(--stj-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Newsreader', Georgia, serif;
  color: var(--stj-bleu);
}

p { line-height: 1.65; }

a { color: var(--stj-orange); }
a:hover { color: var(--stj-bleu); }

::selection {
  background: var(--stj-jaune);
  color: var(--stj-bleu);
}

/* ================================================================
   EN-TÊTE (Saved header)
   Le thème Saved expose plusieurs sélecteurs selon la variante.
   Adaptez ci-dessous à votre configuration.
   ================================================================ */
.site-header,
#masthead {
  background-color: rgba(253, 248, 242, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stj-bordure) !important;
}

/* Titre du site / logo texte */
.site-title a,
.site-title a:visited {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  color: var(--stj-bleu);
}

/* Navigation */
.main-navigation a,
.primary-menu a,
.nav-menu a {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #46506a;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.main-navigation a:hover,
.primary-menu a:hover,
.nav-menu a:hover,
.main-navigation .current-menu-item > a {
  background: var(--stj-creme-rose);
  color: var(--stj-bleu);
}

/* Bouton "Don" dans le header (si votre thème en a un) */
.header-donate-link,
.site-header .button,
.site-header .btn {
  background: var(--stj-orange) !important;
  color: #fff !important;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 20px;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.header-donate-link:hover,
.site-header .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(246, 136, 55, 0.45);
}

/* ================================================================
   PIED DE PAGE (Saved footer)
   ================================================================ */
.site-footer,
#colophon {
  background-color: var(--stj-bleu-footer) !important;
  color: #bcc4d4;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
#colophon h1,
#colophon h2,
#colophon h3,
#colophon h4 {
  font-family: 'Newsreader', Georgia, serif;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer a,
#colophon a {
  color: #bcc4d4;
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer a:hover,
#colophon a:hover {
  color: #fff;
}

/* Widget "Texte" dans le footer */
.site-footer .widget_text p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: #cfd6e4;
}

/* ================================================================
   BOUTONS GLOBAUX (Gutenberg + Elementor)
   ================================================================ */

/* Bouton Gutenberg principal */
.wp-block-button .wp-block-button__link {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  background-color: var(--stj-orange);
  color: #fff;
  padding: 13px 26px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wp-block-button .wp-block-button__link:hover {
  background-color: var(--stj-orange);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(246, 136, 55, 0.45);
}

/* Bouton Gutenberg contour */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--stj-bleu);
  color: var(--stj-bleu);
}

/* ================================================================
   CONTENU DE PAGE (gabarit « Pleine largeur »)
   ================================================================ */
.page-template-elementor_canvas .site-content,
.page-template-elementor_header_footer .site-content {
  padding: 0;
  background: var(--stj-creme);
}

/* ================================================================
   COULEURS GUTENBERG (éditeur Gutenberg/FSE)
   ================================================================ */
.has-stj-bleu-color          { color: var(--stj-bleu) !important; }
.has-stj-orange-color        { color: var(--stj-orange) !important; }
.has-stj-jaune-color         { color: var(--stj-jaune) !important; }
.has-stj-bordeaux-color      { color: var(--stj-bordeaux) !important; }
.has-stj-bleu-background-color        { background-color: var(--stj-bleu) !important; }
.has-stj-orange-background-color      { background-color: var(--stj-orange) !important; }
.has-stj-creme-background-color       { background-color: var(--stj-creme) !important; }
.has-stj-creme-rose-background-color  { background-color: var(--stj-creme-rose) !important; }
.has-stj-bordeaux-background-color    { background-color: var(--stj-bordeaux) !important; }

/* ================================================================
   ARTICLES / SERMONS (ChurchThemes church-content post types)
   ================================================================ */
.entry-title {
  font-family: 'Newsreader', Georgia, serif;
}
.entry-meta {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 13px;
  color: var(--stj-taupe);
}

/* Catégories / étiquettes */
.cat-links a,
.tags-links a {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stj-orange);
  background: var(--stj-creme-rose);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ================================================================
   BARRE UTILITAIRE OPTIONNELLE
   Si votre thème permet d'ajouter une "top bar", appliquez :
   ================================================================ */
.top-bar,
.utility-bar,
.header-bar {
  background-color: var(--stj-bleu);
  color: #e7d3c0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 13px;
}
.top-bar a,
.utility-bar a {
  color: #e7d3c0;
}
.top-bar a:hover,
.utility-bar a:hover {
  color: #fff;
}