/**
 * SHOC Article Kit — host theme overrides.
 *
 * This file is loaded LAST (after shoc-tailwind.min.css and shoc-prose.css)
 * and contains only the high-specificity rules needed to beat host themes
 * like Elessi, Avada, Astra, etc., that force their own font-family / sizes
 * on h1-h6 / body / inputs via `body h1 { font-family: ... }` rules.
 *
 * The verbatim prose CSS (shoc-prose.css) is left untouched.
 */

/* ─── Force the SHOC font on the entire scope ─── */
.shoc-blog,
.shoc-blog *:not(code):not(pre):not(kbd):not(samp) {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
.shoc-blog code,
.shoc-blog pre,
.shoc-blog kbd,
.shoc-blog samp,
.shoc-blog .article-prose code {
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace !important;
}

/* Per-context font CSS variables (set by admin Settings → Typography) */
.single-post .shoc-blog,
.single-post .shoc-blog *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--shoc-single-body-font, 'Inter'), system-ui, sans-serif !important;
}
.single-post .shoc-blog h1,
.single-post .shoc-blog h2,
.single-post .shoc-blog h3,
.single-post .shoc-blog h4,
.single-post .shoc-blog h5,
.single-post .shoc-blog h6 {
  font-family: var(--shoc-single-title-font, 'Inter'), system-ui, sans-serif !important;
}
.blog .shoc-blog,
.archive .shoc-blog,
.shoc-blog.shoc-archive,
.blog .shoc-blog *:not(code):not(pre):not(kbd):not(samp),
.archive .shoc-blog *:not(code):not(pre):not(kbd):not(samp),
.shoc-blog.shoc-archive *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--shoc-archive-body-font, 'Inter'), system-ui, sans-serif !important;
}
.blog .shoc-blog h1, .blog .shoc-blog h2, .blog .shoc-blog h3,
.archive .shoc-blog h1, .archive .shoc-blog h2, .archive .shoc-blog h3,
.shoc-blog.shoc-archive h1, .shoc-blog.shoc-archive h2, .shoc-blog.shoc-archive h3 {
  font-family: var(--shoc-archive-title-font, 'Inter'), system-ui, sans-serif !important;
}

/* ─── H1 sizing — beats theme h1 rules ─── */
.shoc-blog h1 {
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: #111827 !important;
}
@media (min-width: 640px)  { .shoc-blog h1 { font-size: 2.25rem !important; } }
@media (min-width: 1024px) { .shoc-blog h1 { font-size: 2.5rem !important; } }
@media (min-width: 1280px) { .shoc-blog h1 { font-size: 2.625rem !important; } }

/* ─── H2 inside the article body ─── */
.shoc-blog .article-prose h2 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #111827 !important;
}

/* ─── H3 inside the article body ─── */
.shoc-blog .article-prose h3 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #111827 !important;
}

/* ─── Body paragraphs in the article ─── */
.shoc-blog .article-prose p {
  font-size: 1.125rem !important;
  line-height: 1.85 !important;
  color: #374151 !important;
  font-weight: 400 !important;
}
.shoc-blog .article-prose li {
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
  color: #374151 !important;
}
.shoc-blog .article-prose strong {
  font-weight: 600 !important;
  color: #111827 !important;
}
.shoc-blog .article-prose a {
  color: #BF2A2F !important;
}

/* ─── Section h2 (e.g., Articles similaires, Restez informé) ─── */
.shoc-blog section h2 {
  color: #111827 !important;
  font-weight: 700 !important;
}
.shoc-blog .bg-gray-900 h2 {
  color: #ffffff !important;
}

/* ─── Card titles in archive grid + sidebar ─── */
.shoc-blog .grid h3,
.shoc-blog .grid article h3 {
  font-weight: 700 !important;
  color: #111827 !important;
}

/* ─── Sidebar widgets ─── */
.shoc-blog aside h4 {
  color: #111827 !important;
  font-weight: 600 !important;
}
.shoc-blog .toc-link {
  color: #4b5563 !important;
}
.shoc-blog .toc-link:hover,
.shoc-blog .toc-link.active {
  color: #BF2A2F !important;
}

/* ─── Body color reset ─── */
.shoc-blog {
  color: #111827 !important;
  background-color: #F9FAFB !important;
}

/* ─── Sidebar grid layout (arbitrary value missing from compiled CSS) ─── */
/* The article body uses `grid lg:grid-cols-[1fr_320px]` to place the sticky
   sidebar at 320px on the right of a flexible main column. The compiled
   Tailwind CSS doesn't include arbitrary-value classes like this, so we
   restore it here manually. */
@media (min-width: 1024px) {
  .shoc-blog .lg\:grid-cols-\[1fr_320px\] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
/* Also restore min-w-0 in case the scanner missed it — essential so the
   1fr column can shrink and flex children don't overflow. */
.shoc-blog .min-w-0 { min-width: 0; }
/* Make the sidebar aside hidden below lg and visible at lg+ */
@media (max-width: 1023.98px) {
  .shoc-blog aside.hidden { display: none; }
}
@media (min-width: 1024px) {
  .shoc-blog aside.lg\:block { display: block; }
}

/* ─── Form inputs reset ─── */
.shoc-blog input,
.shoc-blog button,
.shoc-blog select,
.shoc-blog textarea {
  font-family: inherit !important;
}

/* ─── Buttons ─── */
.shoc-blog button[type="button"]:not(.shoc-tab-btn):not(.swiper-button-next):not(.swiper-button-prev),
.shoc-blog .bg-shoc-600 {
  background-color: #BF2A2F;
}

/* ─── Swiper price HTML (WooCommerce get_price_html output) ─── */
.shoc-blog .shoc-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.2;
}
.shoc-blog .shoc-price del {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #9ca3af !important;
  text-decoration: line-through;
  opacity: 0.8;
}
.shoc-blog .shoc-price del bdi {
  color: inherit !important;
}
.shoc-blog .shoc-price ins {
  text-decoration: none !important;
  color: #BF2A2F !important;
  font-weight: 800 !important;
}
.shoc-blog .shoc-price ins bdi,
.shoc-blog .shoc-price > bdi {
  color: inherit !important;
}
.shoc-blog .shoc-price .woocommerce-Price-currencySymbol {
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   CTA CONTRAST — must come LAST so it beats the h2/h3/p dark color
   rules above. These target .not-prose / .cta-banner / bg-gradient
   banners inside the article prose and force WHITE text.
   Higher specificity than plain .shoc-blog .article-prose p rules.
   ═══════════════════════════════════════════════════════════════ */
.shoc-blog .article-prose .not-prose h1,
.shoc-blog .article-prose .not-prose h2,
.shoc-blog .article-prose .not-prose h3,
.shoc-blog .article-prose .not-prose h4,
.shoc-blog .article-prose .not-prose h5,
.shoc-blog .article-prose .not-prose h6,
.shoc-blog .article-prose .not-prose strong,
.shoc-blog .article-prose .cta-banner h1,
.shoc-blog .article-prose .cta-banner h2,
.shoc-blog .article-prose .cta-banner h3,
.shoc-blog .article-prose .cta-banner strong,
.shoc-blog .article-prose [class*="bg-gradient"] h1,
.shoc-blog .article-prose [class*="bg-gradient"] h2,
.shoc-blog .article-prose [class*="bg-gradient"] h3,
.shoc-blog .article-prose [class*="bg-gradient"] strong,
.shoc-blog .article-prose .bg-gray-900 h1,
.shoc-blog .article-prose .bg-gray-900 h2,
.shoc-blog .article-prose .bg-gray-900 h3,
.shoc-blog .article-prose .bg-gray-900 strong {
  color: #ffffff !important;
}
.shoc-blog .article-prose .not-prose p,
.shoc-blog .article-prose .not-prose li,
.shoc-blog .article-prose .cta-banner p,
.shoc-blog .article-prose [class*="bg-gradient"] p,
.shoc-blog .article-prose .bg-gray-900 p {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* CTA buttons: white-bg variant → red text, shoc-bg variant → white text */
.shoc-blog .article-prose .not-prose a.bg-white,
.shoc-blog .article-prose .cta-banner a.bg-white,
.shoc-blog .article-prose [class*="bg-gradient"] a.bg-white,
.shoc-blog .article-prose .bg-gray-900 a.bg-white {
  color: #BF2A2F !important;
  text-decoration: none !important;
}
.shoc-blog .article-prose .not-prose a.bg-shoc-600,
.shoc-blog .article-prose .not-prose a[class*="bg-shoc"],
.shoc-blog .article-prose .cta-banner a.bg-shoc-600,
.shoc-blog .article-prose [class*="bg-gradient"] a.bg-shoc-600,
.shoc-blog .article-prose .bg-gray-900 a.bg-shoc-600 {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Fix the icon box: bg-white/15 was appearing empty because tailwind's
   slash-opacity is sometimes stripped by themes. Force it. */
.shoc-blog .article-prose .not-prose .bg-white\/15,
.shoc-blog .article-prose .cta-banner .bg-white\/15,
.shoc-blog .article-prose [class*="bg-gradient"] .bg-white\/15 {
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.shoc-blog .article-prose .bg-shoc-600\/20 {
  background-color: rgba(191, 42, 47, 0.2) !important;
}