/* ============================================================
   Ride Services — Single Post Custom Styles (Elementor)
   Référence : maisonkeita.com/ambre-gris-la-matiere-la-plus-mysterieuse/
   Classes extraites du HTML réel + !important sur les clés critiques
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --rs-anthracite: #1C1C1C;
  --rs-or:         #C9A84C;
  --rs-or-dark:    #a8882e;
  --rs-ivoire:     #F9F7F2;
  --rs-bg:         #F0F2F5;
  --rs-font-title: 'Cormorant Garamond', Georgia, serif;
  --rs-font-ui:    'Montserrat', 'Helvetica Neue', sans-serif;
  --rs-prose-max:  750px;
}

/* ══════════════════════════════════════════════════════════════
   1. PAGE BACKGROUND
   ══════════════════════════════════════════════════════════════ */
body.single-post {
  background-color: var(--rs-bg) !important;
}

/* ══════════════════════════════════════════════════════════════
   1b. TITRE H1 (elementor-widget-theme-post-title)
   Fix : overflow gauche + font-size max 2.2rem
   ══════════════════════════════════════════════════════════════ */
.elementor-widget-theme-post-title h1,
.elementor-widget-theme-post-title .elementor-heading-title {
  overflow: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   2. POST META (date, catégorie) — elementor-post-info widget
   ══════════════════════════════════════════════════════════════ */
.elementor-widget-post-info .elementor-post-info {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: none !important;
}

.elementor-post-info__item {
  font-family: var(--rs-font-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--rs-or) !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.elementor-post-info__item .elementor-post-date,
.elementor-post-info__item--type-date .elementor-post-date {
  font-family: var(--rs-font-ui) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #999 !important;
}

.elementor-post-info__item--type-terms a {
  font-family: var(--rs-font-ui) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--rs-or) !important;
  text-decoration: none !important;
  background: rgba(201, 168, 76, 0.1) !important;
  padding: 3px 10px !important;
  border-radius: 2px !important;
}

.elementor-post-info__separator {
  color: #ddd !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   3. ARTICLE CONTENT — elementor-widget-theme-post-content
   Reproduit : ast-article-single / ast-narrow-container (MK)
   max-width 750px, fond blanc, padding 2.5em
   ══════════════════════════════════════════════════════════════ */

/* Conteneur du widget post-content */
.elementor-widget-theme-post-content > .elementor-widget-container {
  background: #ffffff !important;
  max-width: var(--rs-prose-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2.5em 2.5em 3em !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 20px rgba(28, 28, 28, 0.06) !important;
}

/* ── 3a-0. Catch-all : force couleur visible sur TOUS les enfants ──
   Raison : Elementor Kit ou theme peuvent injecter color:transparent /
   color:#ffffff sur certains sélecteurs génériques. On écrase tout. */
.elementor-widget-theme-post-content .elementor-widget-container *:not(a) {
  color: #1C1C1C !important;
}

/* ── 3a. Corps du texte (paragraphes) ── */
/* MK: Cormorant Garamond 16px / lh 1.65 — RS: 18px / lh 1.8 */
.elementor-widget-theme-post-content .elementor-widget-container p {
  font-family: var(--rs-font-title) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #1C1C1C !important;
  margin-bottom: 1.4em !important;
}

/* ── 3b. H1 (titre visible dans le contenu, si présent) ── */
.elementor-widget-theme-post-content .elementor-widget-container h1 {
  font-family: var(--rs-font-title) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.3em !important;
  letter-spacing: 0.01em !important;
  color: #1C1C1C !important;
  margin-bottom: 0.8em !important;
}

/* ── 3c. H2 — MK: 1.875rem / 600 / lh 1.3 ── */
.elementor-widget-theme-post-content .elementor-widget-container h2 {
  font-family: var(--rs-font-title) !important;
  font-size: 1.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3em !important;
  color: #1C1C1C !important;
  margin-top: 2em !important;
  margin-bottom: 0.7em !important;
  letter-spacing: 0.01em !important;
}

/* Filet or sous les H2 (accent design RS) */
.elementor-widget-theme-post-content .elementor-widget-container h2::after {
  content: '' !important;
  display: block !important;
  width: 32px !important;
  height: 2px !important;
  background: var(--rs-or) !important;
  margin-top: 12px !important;
}

/* ── 3d. H3 — MK: 1.5rem / 600 / lh 1.3 ── */
.elementor-widget-theme-post-content .elementor-widget-container h3 {
  font-family: var(--rs-font-title) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.3em !important;
  color: #1C1C1C !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.6em !important;
}

/* ── 3e. H4 — label Montserrat uppercase ── */
.elementor-widget-theme-post-content .elementor-widget-container h4 {
  font-family: var(--rs-font-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--rs-or) !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.5em !important;
}

/* ── 3f. Liens dans le corps ── MK: underlined, color #C9A84C ── */
.elementor-widget-theme-post-content .elementor-widget-container a {
  color: var(--rs-or-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: color 0.2s !important;
}

.elementor-widget-theme-post-content .elementor-widget-container a:hover {
  color: #1C1C1C !important;
}

/* ── 3g. Listes ── */
.elementor-widget-theme-post-content .elementor-widget-container ul,
.elementor-widget-theme-post-content .elementor-widget-container ol {
  font-family: var(--rs-font-title) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #1C1C1C !important;
  padding-left: 1.5em !important;
  margin-bottom: 1.4em !important;
}

.elementor-widget-theme-post-content .elementor-widget-container li {
  margin-bottom: 0.5em !important;
}

.elementor-widget-theme-post-content .elementor-widget-container ul li::marker {
  color: var(--rs-or) !important;
}

/* ── 3h. Blockquote — MK: ::before guillemet géant, couleur #000 ── */
.elementor-widget-theme-post-content .elementor-widget-container blockquote {
  color: #1C1C1C !important;
  position: relative !important;
  padding: 0 2em 1em 2em !important;
  margin: 2.5em 0 !important;
  border-left: none !important;
  background: none !important;
}

.elementor-widget-theme-post-content .elementor-widget-container blockquote::before {
  content: "\201D" !important;
  font-family: var(--rs-font-title) !important;
  display: block !important;
  font-size: 5rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: var(--rs-or) !important;
  margin-bottom: 0.1em !important;
  transform: rotate(180deg) !important;
}

.elementor-widget-theme-post-content .elementor-widget-container blockquote p {
  font-size: 1.2rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #1C1C1C !important;
  margin-bottom: 0 !important;
}

/* ── 3i. Images dans le contenu ── */
.elementor-widget-theme-post-content .elementor-widget-container img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 2em auto !important;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.12) !important;
  border-radius: 2px !important;
}

.elementor-widget-theme-post-content .elementor-widget-container figcaption {
  font-family: var(--rs-font-ui) !important;
  font-size: 11px !important;
  color: #999 !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  margin-top: -1em !important;
}

/* ── 3j. Strong / em ── */
.elementor-widget-theme-post-content .elementor-widget-container strong {
  font-weight: 600 !important;
  color: #1C1C1C !important;
}

.elementor-widget-theme-post-content .elementor-widget-container em {
  font-style: italic !important;
}

/* ══════════════════════════════════════════════════════════════
   4. NAVIGATION PRÉCÉDENT / SUIVANT
   Classes RS réelles : .elementor-post-navigation
                        .elementor-post-navigation__prev/next
                        .elementor-post-navigation__link__prev/next
                        .post-navigation__prev--label / __next--label
                        .post-navigation__arrow-wrapper
   Reproduit : .ast-post-nav (MK) — uppercase, gold, bold label
   ══════════════════════════════════════════════════════════════ */
.elementor-widget-post-navigation .elementor-post-navigation {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: var(--rs-prose-max) !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  border-top: 1px solid #e0e0e0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  gap: 24px !important;
}

.elementor-post-navigation__link {
  flex: 1 !important;
  max-width: 48% !important;
}

.elementor-post-navigation__link a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}

.elementor-post-navigation__link a:hover {
  opacity: 0.75 !important;
  text-decoration: none !important;
}

/* Arrows */
.post-navigation__arrow-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--rs-or) !important;
  border-radius: 50% !important;
  color: var(--rs-or) !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, color 0.2s !important;
}

.elementor-post-navigation__link a:hover .post-navigation__arrow-wrapper {
  background: var(--rs-or) !important;
  color: #fff !important;
}

.post-navigation__arrow-wrapper i {
  font-size: 11px !important;
  color: inherit !important;
}

/* Label "Précédent" / "Suivant" */
.post-navigation__prev--label,
.post-navigation__next--label {
  font-family: var(--rs-font-ui) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--rs-or) !important;
  /* MK: .ast-post-nav — font-weight:600, text-transform:uppercase, 0.85em */
}

/* Titre de l'article dans la nav */
.elementor-post-navigation__link__prev,
.elementor-post-navigation__link__next {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Aligner le nav "Suivant" à droite */
.elementor-post-navigation__next {
  text-align: right !important;
}

.elementor-post-navigation__next a {
  justify-content: flex-end !important;
}

/* ══════════════════════════════════════════════════════════════
   5. SECTION COMMENTAIRES
   MK: .comments-area { padding-bottom:2em; margin-top:2em;
       background-color: white }
   ══════════════════════════════════════════════════════════════ */
body.single-post #comments {
  background: #ffffff !important;
  max-width: var(--rs-prose-max) !important;
  margin: 2em auto !important;
  padding: 2.5em !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 20px rgba(28, 28, 28, 0.06) !important;
}

body.single-post #comments .comments-title {
  font-family: var(--rs-font-title) !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  color: #1C1C1C !important;
  margin: 0 0 1.5em !important;
  padding-bottom: 0.75em !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

body.single-post #comments .comment-body {
  padding: 1.5em 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

body.single-post #comments .comment-author .fn {
  font-family: var(--rs-font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1C1C1C !important;
}

body.single-post #comments .comment-metadata a,
body.single-post #comments .comment-metadata time {
  font-family: var(--rs-font-ui) !important;
  font-size: 10px !important;
  color: #aaa !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
}

body.single-post #comments .comment-content p {
  font-family: var(--rs-font-title) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #333 !important;
  margin: 0.75em 0 0 !important;
}

/* Formulaire commentaire */
body.single-post #respond .comment-reply-title {
  font-family: var(--rs-font-title) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: #1C1C1C !important;
  margin: 1.5em 0 1em !important;
}

body.single-post #respond input[type="text"],
body.single-post #respond input[type="email"],
body.single-post #respond textarea {
  font-family: var(--rs-font-ui) !important;
  font-size: 13px !important;
  border: 1px solid #ddd !important;
  border-radius: 2px !important;
  padding: 12px 16px !important;
  background: #fafafa !important;
  transition: border-color 0.2s !important;
}

body.single-post #respond input[type="text"]:focus,
body.single-post #respond input[type="email"]:focus,
body.single-post #respond textarea:focus {
  outline: none !important;
  border-color: var(--rs-or) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.single-post #respond input[type="submit"],
body.single-post #respond .submit {
  font-family: var(--rs-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: var(--rs-anthracite) !important;
  color: #fff !important;
  border: 2px solid var(--rs-anthracite) !important;
  padding: 14px 32px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background 0.2s, border-color 0.2s !important;
}

body.single-post #respond input[type="submit"]:hover,
body.single-post #respond .submit:hover {
  background: var(--rs-or) !important;
  border-color: var(--rs-or) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .elementor-widget-theme-post-title h1,
  .elementor-widget-theme-post-title .elementor-heading-title {
    font-size: 1.6rem !important;
  }

  .elementor-widget-theme-post-content > .elementor-widget-container {
    padding: 1.5em 1.2em 2em !important;
  }

  .elementor-widget-theme-post-content .elementor-widget-container p,
  .elementor-widget-theme-post-content .elementor-widget-container ul,
  .elementor-widget-theme-post-content .elementor-widget-container ol {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .elementor-widget-theme-post-content .elementor-widget-container h2 {
    font-size: 1.5rem !important;
  }

  .elementor-widget-theme-post-content .elementor-widget-container h3 {
    font-size: 1.25rem !important;
  }

  .elementor-widget-post-navigation .elementor-post-navigation {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 0 !important;
  }

  .elementor-post-navigation__link {
    max-width: 100% !important;
  }

  .elementor-post-navigation__next {
    text-align: left !important;
  }

  .elementor-post-navigation__next a {
    justify-content: flex-start !important;
  }

  body.single-post #comments {
    padding: 1.5em 1.2em !important;
  }
}