/* Odoo Blog / website blog styles (replicates doodex.net/blog cover-card layout).
   Drop-in stylesheet — does NOT require any markup change in src/components/blog/. */

/* ---------- Card cover container ---------- */
/* Aspect-ratio trick: padding-top % is relative to container width, so 33% gives a 3:1 ratio. */
.o_record_cover_container {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 33%;
  border-radius: 0.4rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  background-color: var(--color-doodex-violet, #270140);
}

/* The actual <div> with inline background-image: url(...) — make it fill the card top. */
.o_record_cover_component,
.o_record_cover_image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Author row sits below the padding-top reservation, in normal flow.
   The dark→transparent gradient makes the name readable against the image above. */
.o_wblog_post_list_author {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  padding: 16px 8px 8px;
  background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  color: #fff;
  z-index: 1;
  pointer-events: none;
}

.o_wblog_author_avatar {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  object-fit: cover;
}

/* Title and excerpt under each card */
.o_blog_post_title {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: #212529;
  margin: 0;
  text-decoration: none;
}
.o_blog_post_title:hover {
  color: var(--color-doodex-violet, #270140);
  text-decoration: none;
}

.o_wblog_normalize_font {
  font-size: 13px;
  line-height: 1.45;
  color: #212529;
}

/* List grid: stock Bootstrap .row already handles flex layout for col-*; nothing extra. */
#o_wblog_posts_loop {
  margin-top: 1rem;
}

/* Active filter pill in the Blogs nav (Odoo Bootstrap-flavor active state) */
.navbar-nav .nav-link.active {
  color: var(--color-doodex-violet, #270140);
  font-weight: 600;
}

/* Search input "search-query" tweak so the rounded look matches live */
.o_searchbar_form .oe_search_box {
  padding: 0.5rem 0.75rem;
  font-size: 14px;
}
.o_searchbar_form .oe_search_button {
  border: 1px solid #ced4da;
  border-left: 0;
}

/* Folder icon next to category link */
.o_wblog_post .fa-folder-open {
  margin-right: 4px;
}

/* Make the whole card clickable area not collapse — keep article tall enough */
article.o_wblog_post {
  display: flex;
  flex-direction: column;
}

/* ---------- Odoo color combinations (o_cc1..o_cc5) ----------
   These set background+text color pairs. Used by blog cards when no image is set. */
.o_cc1 { background-color: #270140; color: #fff; }  /* Doodex violet  */
.o_cc2 { background-color: #FA7268; color: #fff; }  /* Doodex coral   */
.o_cc3 { background-color: #FA7268; color: #fff; }  /* Coral variant  */
.o_cc4 { background-color: #ffffff; color: #212529; } /* White        */
.o_cc5 { background-color: #eff3f4; color: #212529; } /* Light grey   */

/* Make the container's own fallback transparent so .o_cc* takes over */
.o_record_cover_container {
  background-color: transparent;
}
.o_record_cover_container.o_cc1 { background-color: #270140; }
.o_record_cover_container.o_cc2,
.o_record_cover_container.o_cc3 { background-color: #FA7268; }
.o_record_cover_container.o_cc4 { background-color: #ffffff; }
.o_record_cover_container.o_cc5 { background-color: #eff3f4; }

/* ---------- Strip default Bootstrap `a` underline inside navbar + footer ---------- */
/* Bootstrap 5 sets `a { text-decoration: underline }`. Live doodex.net overrides
   this in the navbar and footer regions. We mirror that. */
#site-header a,
#site-header button,
footer a {
  text-decoration: none;
}
#site-header a:hover,
footer a:hover {
  text-decoration: none;
}

/* ---------- Bootstrap pagination → Doodex violet ---------- */
.pagination {
  --bs-pagination-color: #270140;
  --bs-pagination-bg: #ffffff;
  --bs-pagination-border-color: #e5e7eb;
  --bs-pagination-hover-color: #ffffff;
  --bs-pagination-hover-bg: #270140;
  --bs-pagination-hover-border-color: #270140;
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: #270140;
  --bs-pagination-active-border-color: #270140;
  --bs-pagination-focus-color: #270140;
  --bs-pagination-focus-bg: #f5f0fa;
}


/* ---------- Footer & header: kill Bootstrap a-color leak ----------
   Bootstrap 5 declares `a { color: var(--bs-link-color-rgb) }` (specificity 0,0,1)
   which beats Tailwind's utility classes (also 0,0,1) at the cascade because Bootstrap
   loads later. Force-restore the Tailwind colors with higher-specificity scoped rules. */
footer.bg-doodex-violet a {
  color: rgba(255, 255, 255, 0.85);
}
footer.bg-doodex-violet a:hover {
  color: #ffffff;
}
footer.bg-doodex-violet a.text-doodex-corail,
footer.bg-doodex-violet .text-doodex-corail a {
  color: #FA7268;
}
footer.bg-doodex-violet a.text-doodex-corail:hover {
  color: #ffffff;
}
footer.bg-doodex-violet a.text-white\/65 {
  color: rgba(255, 255, 255, 0.65);
}
footer.bg-doodex-violet a.text-white\/50 {
  color: rgba(255, 255, 255, 0.5);
}

/* Header nav links — same fix */
#site-header a.dx-nav-btn,
#site-header a.dx-utility-btn {
  color: #270140;
}
#site-header a.dx-utility-btn {
  color: rgba(33, 37, 41, 0.8);
}
#site-header a.dx-utility-btn:hover {
  color: #270140;
}
/* Contact Us button stays white */
#site-header a.bg-doodex-violet {
  color: #ffffff;
}

/* Odoo pill in "Powered by" footer line — keep violet text on white pill */
footer.bg-doodex-violet a.bg-white {
  color: #270140;
}

/* ---------- Odoo s_banner / grid mode hero layout ---------- */
/* The Odoo "grid mode" row uses CSS Grid via inline `style="grid-area: r1 / c1 / r2 / c2"`.
   Without `display: grid` on the container the grid-area declarations do nothing
   and every .o_grid_item stacks full-width. Enable the grid here. */
.row.o_grid_mode {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 0;
  width: 100%;
}
.row.o_grid_mode > .o_grid_item {
  min-width: 0;
}
@media (max-width: 991px) {
  /* Below lg breakpoint, stack on one column — matches Odoo's responsive collapse */
  .row.o_grid_mode {
    display: block;
  }
  .row.o_grid_mode > .o_grid_item {
    grid-area: auto !important;
    margin-bottom: 1.5rem;
  }
}

/* ---------- s_blockquote (testimonial card) ---------- */
.s_blockquote {
  background-color: #ffffff;
  border-radius: 8px;
  position: relative;
}
.s_blockquote_line_elt {
  width: 4px !important;
  background-color: var(--color-doodex-violet, #270140);
  border-radius: 2px;
  top: 16px !important;
  bottom: 16px !important;
  left: 0 !important;
}
.s_blockquote_wrap_icon {
  display: none;  /* hide the floating quote-icon overlay — clutter on small cards */
}
.s_blockquote_quote {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1f2937;
  margin: 0 0 1rem 0;
  font-style: normal;
}
.s_blockquote_avatar,
.s_blockquote .s_blockquote_avatar {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 50%;
}
.s_blockquote_author {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #1f2937;
}
.s_blockquote_author strong {
  font-weight: 600;
}

/* ---------- s_rating stars (Font Awesome powered) ---------- */
.s_rating_icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.s_rating_active_icons {
  color: rgb(239, 198, 49);
  font-size: 1rem;
}
.s_rating_active_icons .fa {
  font-size: 1rem;
  margin-right: 2px;
}
.s_rating_title {
  margin-bottom: 4px;
}

/* ---------- General Odoo o_color helpers (text + bg) ---------- */
.bg-o-color-1 { background-color: #270140 !important; }
.bg-o-color-2 { background-color: #FA7268 !important; }
.bg-o-color-3 { background-color: #525252 !important; }
.bg-o-color-4 { background-color: #ffffff !important; }
.bg-o-color-5 { background-color: #eff3f4 !important; }
.text-o-color-1 { color: #270140 !important; }
.text-o-color-2 { color: #FA7268 !important; }
.text-o-color-3 { color: #525252 !important; }
.text-o-color-4 { color: #ffffff !important; }
.text-o-color-5 { color: #eff3f4 !important; }

/* ---------- Banner CTA: .btn-lg sizing ---------- */
.btn.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.0625rem;
  border-radius: 999px;  /* pill shape — matches live "Start Now" CTA */
}

/* ---------- s_banner: first item spans left half only when a 2nd item exists ----------
   Odoo's snippet sets the first item to grid-area: 1 / 1 / 11 / 13 (full 12 cols).
   When a blockquote occupies the right half (e.g. grid-area: 6 / 6 / 10 / 11), the
   first item's content flows BEHIND the card. We override grid-column to cols 1-6
   only when a sibling .o_grid_item exists, so text stays in the left half. */
@media (min-width: 992px) {
  .s_banner .row.o_grid_mode:has(> .o_grid_item:nth-child(2)) > .o_grid_item:first-child {
    grid-column: 1 / 7 !important;
    padding-right: 1rem;
  }
}

/* ---------- s_banner: collapse extra grid rows ---------- */
/* Override Odoo's data-row-count which often reserves more rows than needed.
   Make rows auto-sized to content only. */
.row.o_grid_mode > .o_grid_item {
  width: auto !important;
  flex: none !important;
  max-width: none !important;
  height: auto !important;
}

/* Make sure inner .col-lg-* children inside o_grid_item don't double-constrain width */
.row.o_grid_mode > .o_grid_item > [class*="col-lg-"],
.row.o_grid_mode > .o_grid_item > .col-12 {
  flex: 1 1 auto;
  max-width: 100%;
  width: 100%;
}

/* ---------- s_features feature cards: separator + icon ---------- */
.s_features_icon {
  width: 56px;
  height: 56px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 8px;
  font-size: 24px;
}
.s_hr hr {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  margin: 0;
}

/* ---------- h5-fs sizing helper used in Odoo features ---------- */
.h5-fs { font-size: 1.25rem !important; }
.h4-fs { font-size: 1.5rem !important; }
.h3-fs { font-size: 1.75rem !important; }
.h2-fs { font-size: 2rem !important; }
.h1-fs { font-size: 2.5rem !important; }


/* ---------- s_image_gallery: full-width video, sane height ---------- */
.s_image_gallery {
  height: auto !important;  /* override inline style="height: 735px" */
}
.s_image_gallery .carousel,
.s_image_gallery .carousel-inner,
.s_image_gallery .carousel-item {
  width: 100%;
}
.s_image_gallery .carousel-item.active {
  display: block !important;
}
.s_image_gallery .media_iframe_video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.s_image_gallery .media_iframe_video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.s_image_gallery .container-fluid {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.s_image_gallery .o_carousel_controllers {
  margin-top: 1rem;
}
.s_image_gallery .carousel-indicators {
  bottom: -2rem;
}

/* ---------- s_banner: cap blockquote item height to match content ---------- */
.s_banner .row.o_grid_mode {
  grid-auto-rows: minmax(min-content, max-content);
  align-items: start;
}
.s_banner .row.o_grid_mode > .o_grid_item:first-child {
  align-self: start;
}
.s_banner {
  padding-bottom: 3rem;  /* override pb96 if too generous */
}


/* ---------- Override Tailwind 4's .collapse utility ----------
   Tailwind 4 ships .collapse{visibility:collapse} (for <tr> semantics).
   That collides with Bootstrap 5's .collapse accordion class — the accordion
   body stays invisible even after .show is added. Force visibility:visible. */
.collapse {
  visibility: visible !important;
}

/* ---------- FAQPage schema text color (Odoo douleurs pages) ----------
   Scope: ONLY descendants of `[itemtype*="schema.org/FAQPage"]`.
   The wrapping <section> has class `o_cc o_cc2` which sets color:#fff,
   so answer <p> tags inside white Q cards inherit white-on-white.
   This rule restores dark text inside FAQ cards without touching anything else. */
[itemtype*="schema.org/FAQPage"] [itemtype*="schema.org/Question"] {
  color: #212529;
}
[itemtype*="schema.org/FAQPage"] [itemtype*="schema.org/Question"] p,
[itemtype*="schema.org/FAQPage"] [itemtype*="schema.org/Question"] li,
[itemtype*="schema.org/FAQPage"] [itemtype*="schema.org/Question"] strong,
[itemtype*="schema.org/FAQPage"] [itemtype*="schema.org/Question"] span:not([style*="color"]) {
  color: #212529;
}


/* ===========================================================================
   BLOG POST COVER + TYPOGRAPHY + SNIPPET UTILITIES — 1:1 with doodex.net
   Added 2026-05-20 after side-by-side check on the 3 migrated blog posts:
     · /blog/doodex-blog-2/industry-2026-…-140  (+ /fr/)
     · /blog/doodex-growth-suite-8/odoo-marketing-strategies-…-137  (+ /fr/)
     · /blog/doodex-growth-suite-8/migrating-from-hubspot-…-136  (+ /fr/)
   Without these rules the migrated snippet markup loses the coral hero band,
   the giant H1, the section padding rhythm (pt0…pt72/pb0…pb72), the brand-
   colored primary button, and the s_call_to_action vertical spacing.
   =========================================================================== */

/* --- Section padding utilities (Odoo's 8-px scale, used by every snippet) --- */
.pt0  { padding-top:    0px !important; }
.pt8  { padding-top:    8px !important; }
.pt16 { padding-top:   16px !important; }
.pt24 { padding-top:   24px !important; }
.pt32 { padding-top:   32px !important; }
.pt40 { padding-top:   40px !important; }
.pt48 { padding-top:   48px !important; }
.pt56 { padding-top:   56px !important; }
.pt64 { padding-top:   64px !important; }
.pt72 { padding-top:   72px !important; }
.pt80 { padding-top:   80px !important; }
.pt96 { padding-top:   96px !important; }

.pb0  { padding-bottom:  0px !important; }
.pb8  { padding-bottom:  8px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb32 { padding-bottom: 32px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb48 { padding-bottom: 48px !important; }
.pb56 { padding-bottom: 56px !important; }
.pb64 { padding-bottom: 64px !important; }
.pb72 { padding-bottom: 72px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb96 { padding-bottom: 96px !important; }

/* --- Blog post hero cover (#o_wblog_post_top) -----------------------------
   Odoo blog posts open with a colored cover band (.o_cc3 coral, .o_cc1 violet)
   that fills ~half the screen and displays the H1/subtitle centered white.
   Without these rules the section collapses to header height. */
.o_record_cover_container.o_wblog_post_page_cover {
  /* Override the .o_record_cover_container default 33% padding-top hack we use
     for blog-list cards — on post pages the container is a real hero section. */
  padding-top: 0;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.o_wblog_post_page_cover.cover_auto {
  padding: 3rem 0;
  min-height: 1px;
}
.o_full_screen_height,
.o_half_screen_height,
.cover_full,
.cover_mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.o_half_screen_height,
.cover_mid {
  min-height: 55vh !important;
}
.o_full_screen_height,
.cover_full {
  min-height: 100vh !important;
}

/* H1 inside the hero — Odoo's display-1 equivalent.
   IMPORTANT: weights 300 don't exist in the loaded Inter / Inter Tight woff2
   files (we ship 400 / 500 / 600 / 700 / 800 only). Browsers substitute
   missing weights from the system font and that causes per-character render
   drift (notably capital "A" reads heavier than the rest). Use 400 here. */
.o_wblog_post_title #o_wblog_post_name {
  font-weight: 400;
  line-height: 1;
  font-size: calc(1.475rem + 2.7vw);
  margin: 0;
}
@media (min-width: 1200px) {
  .o_wblog_post_title #o_wblog_post_name { font-size: 3.5rem; }
}
.o_wblog_post_title #o_wblog_post_subtitle {
  font-weight: 400;
  font-size: 1.125rem;
  margin-top: 0.5rem;
}
.o_wblog_post_page_cover .o_wblog_post_title {
  color: #fff;
}

/* "Scroll to content" chevron at the bottom of the hero. */
#o_wblog_post_content_jump {
  display: flex;
  width: 3rem;
  height: 3rem;
  text-decoration: none;
}
#o_wblog_post_content_jump:hover { text-decoration: none; }
#o_wblog_post_content_jump:focus { outline: none; }

/* --- Post body min-height to keep short posts from collapsing --- */
#o_wblog_post_content { min-height: 350px; }

/* --- Brand button override — Odoo theme uses Doodex violet, not Bootstrap blue. */
.btn-primary,
.o_colored_level .o_cc2 .btn-fill-primary,
.o_colored_level .o_cc5 .btn-primary {
  --bs-btn-color:                #ffffff;
  --bs-btn-bg:                   #270140;
  --bs-btn-border-color:         #270140;
  --bs-btn-hover-color:          #ffffff;
  --bs-btn-hover-bg:             #210136;
  --bs-btn-hover-border-color:   #1f0133;
  --bs-btn-focus-shadow-rgb:     71,3,93;
  --bs-btn-active-color:         #ffffff;
  --bs-btn-active-bg:            #1f0133;
  --bs-btn-active-border-color:  #1d0130;
}
.btn-primary:hover  { background-color: #210136; border-color: #1f0133; color: #fff; }
.btn-primary:focus  { background-color: #210136; border-color: #1f0133; color: #fff; box-shadow: 0 0 0 0.25rem rgba(71,3,93,.5); }
.btn-primary:active { background-color: #1f0133; border-color: #1d0130; color: #fff; }

/* On a coral o_cc2 background, the primary button flips to white-on-violet via
   the fill-primary variant — same as Odoo's helper. */
.o_cc2 .btn-primary,
.o_cc2 .btn-fill-primary {
  --bs-btn-color:                #270140;
  --bs-btn-bg:                   #ffffff;
  --bs-btn-border-color:         #ffffff;
  --bs-btn-hover-color:          #270140;
  --bs-btn-hover-bg:             #f1f1f1;
  --bs-btn-hover-border-color:   #e2e2e2;
}


/* ===========================================================================
   PART 2 — Visual parity with live doodex.net for the 3 migrated blog posts
   (rewritten 2026-05-20 after side-by-side screenshot review).
   Covers: hero filter overlay, chevron circle, breadcrumb color, snippet
   typography, restored UL bullets, 2-col newsletter form, left-aligned CTAs.
   =========================================================================== */

/* --- Hero cover layer stacking --- */
.o_record_cover_container.o_wblog_post_page_cover .o_record_cover_image  { z-index: 0; }
.o_record_cover_container.o_wblog_post_page_cover .o_record_cover_filter { z-index: 1; }
.o_record_cover_container.o_wblog_post_page_cover .container             { position: relative; z-index: 2; }
.oe_black { background-color: #000; }
.oe_white { background-color: #fff; }

/* --- Hero chevron — circular dark button at the bottom of the cover. */
#o_wblog_post_content_jump {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  z-index: 3;
  transition: background-color .2s ease;
}
#o_wblog_post_content_jump:hover { background-color: rgba(0, 0, 0, 0.7); color: #fff; }
#o_wblog_post_content_jump .fa   { font-size: 1.5rem; line-height: 1; color: #fff; }

/* --- Snippet vertical rhythm — keep LEFT alignment, never center. */
.s_call_to_action,
.s_text_block,
.s_newsletter_block {
  padding-top:    3rem;
  padding-bottom: 3rem;
}

/* --- Body typography inside the blog post content column ---
   Tailwind 4 resets h2/h3/p/ul to bare margins. Restore Odoo blog house style.
   Weight uses 400 (not 300) because the loaded Inter / Inter Tight fonts only
   ship 400+ — weight 300 falls back to system font and renders inconsistently. */
#o_wblog_post_content h2,
#o_wblog_post_content .h2 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25;
  color: #212529;
  margin: 1.5rem 0 1rem 0;
  text-align: left;
}
#o_wblog_post_content h3,
#o_wblog_post_content .h3 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: #212529;
  margin: 1.25rem 0 0.75rem 0;
  text-align: left;
}
#o_wblog_post_content h4,
#o_wblog_post_content .h4 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  color: #212529;
  margin: 1rem 0 0.5rem 0;
}
#o_wblog_post_content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  margin: 0 0 1rem 0;
}
#o_wblog_post_content a {
  color: #270140;
  text-decoration: underline;
}
#o_wblog_post_content a:hover { color: #FA7268; }

/* Restore default UL/OL bullets that Tailwind 4 resets globally. */
#o_wblog_post_content ul {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
}
#o_wblog_post_content ol {
  list-style: decimal outside;
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
}
#o_wblog_post_content li {
  margin: 0 0 0.25rem 0;
  color: #212529;
  line-height: 1.6;
}

/* --- Inline content links — NO underline by default, ONLY on hover. */
#o_wblog_post_content a {
  color: #270140;
  text-decoration: none;
  font-weight: 500;
}
#o_wblog_post_content a:hover {
  color: #FA7268;
  text-decoration: underline;
}
/* Buttons that are <a class="btn"> must NOT inherit the underline. */
#o_wblog_post_content a.btn,
#o_wblog_post_content a.btn:hover {
  text-decoration: none;
  font-weight: 600;
  color: var(--bs-btn-color, #fff);
}

/* --- Odoo text-highlight (squiggly red underline on bold headings) ---
   Odoo renders this via a JS-injected SVG. Without the JS we approximate it
   with a thick CSS underline using the per-instance --text-highlight-color
   and --text-highlight-width custom properties set on the inline element. */
.o_text_highlight {
  text-decoration: underline;
  text-decoration-color: var(--text-highlight-color, #FF0000);
  text-decoration-thickness: var(--text-highlight-width, 3px);
  text-decoration-skip-ink: none;
  text-underline-offset: 0.18em;
  /* Drop the white-space:pre-wrap from Odoo's container; we don't have items. */
}
.o_text_highlight.o_text_highlight_fill {
  background: linear-gradient(transparent 60%, var(--text-highlight-color, #FA7268) 60%);
  text-decoration: none;
}

/* --- Odoo theme color utility classes used inside blog snippets. */
.text-o-color-1 { color: #270140 !important; }
.text-o-color-2 { color: #FA7268 !important; }
.text-o-color-3 { color: #EFF3F4 !important; }
.text-o-color-4 { color: #FFFFFF !important; }
.text-o-color-5 { color: rgba(0, 0, 0, 0.75) !important; }
a.text-o-color-1:hover, a.text-o-color-1:focus { color: #000   !important; }
a.text-o-color-2:hover, a.text-o-color-2:focus { color: #f41808 !important; }
a.text-o-color-4:hover, a.text-o-color-4:focus { color: #ccc   !important; }

/* --- Newsletter block 2-col — let Bootstrap's col-lg-6 / col-lg-5 do the
   layout. We previously forced both cols to 50% which collided with the
   offset-lg-1 spacer and pushed the form below. Stripping that rule restores
   the original 6 / (1-gap) / 5 grid. */
.s_newsletter_block .input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.s_newsletter_block .input-group input[type="email"],
.s_newsletter_block .input-group input[type="text"],
.s_newsletter_block .input-group .form-control {
  flex: 1 1 auto;
  padding: 0.625rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  border-radius: 0.25rem 0 0 0.25rem;
  background: #fff;
  color: #212529;
  font-size: 0.95rem;
  min-width: 0;
}
.s_newsletter_block .input-group .btn,
.s_newsletter_block .input-group a.btn {
  border-radius: 0 0.25rem 0.25rem 0;
  white-space: nowrap;
  background-color: #270140;
  color: #ffffff !important;
  border-color: #270140;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.s_newsletter_block .input-group .btn:hover {
  background-color: #1f0133;
  border-color: #1f0133;
  color: #ffffff !important;
}

/* Safety net: make sure every .btn-primary inside the post body shows white
   text — Tailwind's preflight + parent color: inherit on o_colored_level
   could otherwise repaint button text and make it disappear. */
#o_wblog_post_content .btn-primary,
.s_newsletter_block .btn-primary,
.s_call_to_action .btn-primary {
  background-color: #270140 !important;
  border-color:     #270140 !important;
  color:            #ffffff !important;
}
#o_wblog_post_content .btn-primary:hover,
.s_newsletter_block .btn-primary:hover,
.s_call_to_action .btn-primary:hover {
  background-color: #1f0133 !important;
  border-color:     #1f0133 !important;
  color:            #ffffff !important;
}

/* ===========================================================================
   PART 3 — Final visual parity fixes (2026-05-20 round 3)
   After screenshot diff:
   · H1 looks too light — bump to 500 so it pops on the photo
   · Hero needs a darker vignette so corners read black, center keeps the photo
   · text-highlight has 3 visual variants on these 3 posts:
       freehand_1       → wavy/scribble underline (red #FF0000)
       over_underline   → straight thick underline (dark red #CE0000)
       circle_1         → orange pill around the text (#FF9C00)
   · FAQ accordion needs visible border + chevron arrow (Bootstrap CSS vars).
   =========================================================================== */

/* H1 weight bump — keep Inter but go semibold-ish on the hero. */
.o_wblog_post_title #o_wblog_post_name {
  font-weight: 500;
}
.o_wblog_post_title #o_wblog_post_subtitle {
  color: rgba(255,255,255,0.9);
}

/* Hero vignette — radial gradient layered on top of .o_record_cover_filter so
   the four corners read black while the center keeps photo detail. The flat
   .oe_black layer still provides the global 0.6 opacity dimming. */
.o_record_cover_container.o_wblog_post_page_cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Keep the H1/subtitle container above the vignette. */
.o_record_cover_container.o_wblog_post_page_cover > .container {
  z-index: 3;
}

/* --- Text-highlight variants — CSS-only approximations.
   Odoo paints these as JS-injected SVG paths; without the JS we fall back to
   CSS underlines/box-shadows that respect the per-instance --text-highlight-* vars. */

/* Default + over_underline → straight thick underline. */
.o_text_highlight {
  text-decoration: underline;
  text-decoration-color:     var(--text-highlight-color, #CE0000);
  text-decoration-thickness: var(--text-highlight-width, 2px);
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}
.o_text_highlight.o_text_highlight_over_underline {
  text-decoration-style: solid;
}

/* freehand_1 → wavy/scribble underline. Browsers render `wavy` differently
   but all give a hand-drawn squiggle look. */
.o_text_highlight.o_text_highlight_freehand_1 {
  text-decoration: underline wavy;
  text-decoration-color:     var(--text-highlight-color, #FF0000);
  text-decoration-thickness: var(--text-highlight-width, 5px);
  text-underline-offset: 0.22em;
}

/* circle_1 → orange rounded pill around the text. */
.o_text_highlight.o_text_highlight_circle_1 {
  text-decoration: none;
  display: inline-block;
  padding: 0.1em 0.6em;
  border: var(--text-highlight-width, 4px) solid var(--text-highlight-color, #FF9C00);
  border-radius: 999px;
  line-height: 1.2;
}

/* Fill variant — a colored highlight band under the text. */
.o_text_highlight.o_text_highlight_fill {
  background: linear-gradient(transparent 60%, var(--text-highlight-color, #FA7268) 60%);
  text-decoration: none;
}

/* --- FAQ accordion — Bootstrap-defaults-friendly look. Tailwind's preflight
   removes the visible border around buttons, so we re-assert the FAQ styling
   that doodex.net uses (transparent buttons, divider lines, chevron arrow). */
#FAQs .accordion {
  --bs-accordion-bg:              #fff;
  --bs-accordion-color:           #212529;
  --bs-accordion-border-color:    rgba(0, 0, 0, 0.125);
  --bs-accordion-border-width:    1px;
  --bs-accordion-border-radius:   0.375rem;
  --bs-accordion-active-color:    #270140;
  --bs-accordion-active-bg:       transparent;
  --bs-accordion-btn-color:       #212529;
  --bs-accordion-btn-bg:          transparent;
  --bs-accordion-btn-padding-x:   1.25rem;
  --bs-accordion-btn-padding-y:   1rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(39, 1, 64, 0.15);
}
#FAQs .accordion-item {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  background: #fff;
}
#FAQs .accordion-button {
  display: flex;
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: transparent;
  color: #212529;
  font-weight: 600;
  text-align: left;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
#FAQs .accordion-button h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: inherit;
}
#FAQs .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #270140;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.125);
}
#FAQs .accordion-button::after {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23270140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5L8 11L14 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  transition: transform 0.2s ease;
}
#FAQs .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}
#FAQs .accordion-body {
  padding: 1rem 1.25rem 1.25rem;
  color: #212529;
}
#FAQs .accordion-body p,
#FAQs .accordion-body .lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #495057;
}
#FAQs h2 {
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ===========================================================================
   PART 4 — Round-4 visual parity fixes (2026-05-20 evening)
   After screenshot diff of the "Supercharge Your Odoo Today" CTA:
   · Doodex theme remaps o_cc5 to DARK (rgba(0,0,0,0.75)) with WHITE text,
     not light-grey. Same theme overrides o_cc2 and o_cc3 with dark text.
   · text-highlight_freehand_1 on the live page is a STRAIGHT thick red line,
     not a wavy/scribble — so swap `underline wavy` for plain `underline`.
   · Body links were rendering bold-italic because `#o_wblog_post_content a`
     forced font-weight 500 — strip that so links inherit weight from the
     surrounding <em>/<strong>/<p>.
   · FAQ question font-weight 600 reads too heavy — drop to 500.
   · Body H2/H3 looked too thin (300/400). Bump to 600/500 so section
     headings actually pop without touching the hero H1 rule above.
   =========================================================================== */

/* --- Doodex theme overrides for o_cc1..o_cc5 (mirrors live web.assets_frontend.min.css). */
.o_cc1,
.o_colored_level.o_cc1 { background-color: #270140;             color: #FFFFFF; }
.o_cc2,
.o_colored_level.o_cc2 { background-color: #EFF3F4;             color: #212529; }
.o_cc3,
.o_colored_level.o_cc3 { background-color: #FA7268;             color: #212529; }
.o_cc4,
.o_colored_level.o_cc4 { background-color: #FFFFFF;             color: #212529; }
.o_cc5,
.o_colored_level.o_cc5 { background-color: rgba(0, 0, 0, 0.75); color: #FFFFFF; }

/* Inside a dark band (o_cc1 / o_cc5), headings + paragraphs + list items
   inherit white. Inside light bands (o_cc2 / o_cc3 / o_cc4) they inherit
   #212529. Use `color: inherit` so the o_cc* rule above does the work. */
.o_cc1 h1, .o_cc1 h2, .o_cc1 h3, .o_cc1 h4, .o_cc1 p, .o_cc1 li, .o_cc1 strong, .o_cc1 span,
.o_cc5 h1, .o_cc5 h2, .o_cc5 h3, .o_cc5 h4, .o_cc5 p, .o_cc5 li, .o_cc5 strong, .o_cc5 span {
  color: inherit;
}
.o_cc1 .text-muted,
.o_cc5 .text-muted { color: rgba(255, 255, 255, 0.7) !important; }

/* --- text-highlight_freehand_1 → STRAIGHT thick underline (not wavy). */
.o_text_highlight.o_text_highlight_freehand_1 {
  text-decoration: underline solid;
  text-decoration-color:     var(--text-highlight-color, #FF0000);
  text-decoration-thickness: var(--text-highlight-width, 4px);
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}

/* --- Inline body links — let weight inherit (so <em><a></a></em> isn't bold). */
#o_wblog_post_content a {
  font-weight: inherit;
}

/* --- Body H2/H3 weight bump — section headings should read bold, not light.
   The hero H1 (#o_wblog_post_name) keeps its own 500 weight from earlier. */
#o_wblog_post_content h2,
#o_wblog_post_content .h2 {
  font-weight: 600;
}
#o_wblog_post_content h3,
#o_wblog_post_content .h3 {
  font-weight: 500;
}

/* Inside <strong> wrappers (used heavily in Odoo blog markup), keep semibold
   even when the parent is light weight. */
#o_wblog_post_content h2 strong,
#o_wblog_post_content h3 strong,
#o_wblog_post_content p  strong { font-weight: 700; }

/* --- FAQ accordion-button font-weight — drop 600 → 500 per user feedback. */
#FAQs .accordion-button,
#FAQs .accordion-button h3,
#FAQs .accordion-button span,
#FAQs .accordion-button strong {
  font-weight: 500;
}

/* On dark CTAs (o_cc5), buttons keep their violet bg + white text — the
   o_cc5 rule above gives white, the .btn-primary !important above gives
   violet bg. No additional overrides needed, but be explicit: */
.o_cc5 .btn-primary,
.o_cc5 .btn-primary:hover {
  color: #FFFFFF !important;
}

/* ===========================================================================
   PART 5 — Color inheritance fix for dark CTAs (2026-05-20 round 5).
   Earlier `#o_wblog_post_content h2/p/li/strong { color: #212529 }` rules win
   the cascade over `.o_cc5 h2 { color: inherit }` because `#id` beats `.cls`.
   Re-scope the colored-level inheritance to the same #o_wblog_post_content
   prefix so it matches the specificity and overrides via source order.
   =========================================================================== */

#o_wblog_post_content .o_cc1,
#o_wblog_post_content .o_cc5,
#o_wblog_post_content .o_cc1 h1, #o_wblog_post_content .o_cc1 h2, #o_wblog_post_content .o_cc1 h3, #o_wblog_post_content .o_cc1 h4, #o_wblog_post_content .o_cc1 h5, #o_wblog_post_content .o_cc1 h6,
#o_wblog_post_content .o_cc1 p,  #o_wblog_post_content .o_cc1 li,  #o_wblog_post_content .o_cc1 strong, #o_wblog_post_content .o_cc1 em, #o_wblog_post_content .o_cc1 span,
#o_wblog_post_content .o_cc5 h1, #o_wblog_post_content .o_cc5 h2, #o_wblog_post_content .o_cc5 h3, #o_wblog_post_content .o_cc5 h4, #o_wblog_post_content .o_cc5 h5, #o_wblog_post_content .o_cc5 h6,
#o_wblog_post_content .o_cc5 p,  #o_wblog_post_content .o_cc5 li,  #o_wblog_post_content .o_cc5 strong, #o_wblog_post_content .o_cc5 em, #o_wblog_post_content .o_cc5 span {
  color: #FFFFFF;
}
/* Light bands (o_cc2 light grey / o_cc3 coral / o_cc4 white) keep dark text. */
#o_wblog_post_content .o_cc2 h1, #o_wblog_post_content .o_cc2 h2, #o_wblog_post_content .o_cc2 h3, #o_wblog_post_content .o_cc2 h4,
#o_wblog_post_content .o_cc2 p,  #o_wblog_post_content .o_cc2 li,  #o_wblog_post_content .o_cc2 strong,
#o_wblog_post_content .o_cc3 h1, #o_wblog_post_content .o_cc3 h2, #o_wblog_post_content .o_cc3 h3, #o_wblog_post_content .o_cc3 h4,
#o_wblog_post_content .o_cc3 p,  #o_wblog_post_content .o_cc3 li,  #o_wblog_post_content .o_cc3 strong,
#o_wblog_post_content .o_cc4 h1, #o_wblog_post_content .o_cc4 h2, #o_wblog_post_content .o_cc4 h3, #o_wblog_post_content .o_cc4 h4,
#o_wblog_post_content .o_cc4 p,  #o_wblog_post_content .o_cc4 li,  #o_wblog_post_content .o_cc4 strong {
  color: #212529;
}

/* Highlight color in dark bands — the inline `--text-highlight-color: #FF0000`
   provides the red underline; the text it wraps should stay WHITE not red. */
#o_wblog_post_content .o_cc1 .o_text_highlight,
#o_wblog_post_content .o_cc5 .o_text_highlight {
  color: #FFFFFF;
}

/* Links inside dark bands → light cyan/violet so they still look like links. */
#o_wblog_post_content .o_cc1 a:not(.btn),
#o_wblog_post_content .o_cc5 a:not(.btn) {
  color: #FFFFFF;
  text-decoration: underline;
}
#o_wblog_post_content .o_cc1 a:not(.btn):hover,
#o_wblog_post_content .o_cc5 a:not(.btn):hover {
  color: #FA7268;
}

/* text-muted on dark bands → light grey (Bootstrap's #6c757d becomes invisible). */
#o_wblog_post_content .o_cc1 .text-muted,
#o_wblog_post_content .o_cc5 .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ===========================================================================
   PART 6 — Body text size parity (2026-05-20 round 6).
   Live Odoo theme overrides Bootstrap's .lead from 1.25rem → 1.125rem.
   Without that override our <p class="lead"> picks up Bootstrap 5's 1.25rem
   (20 px) for spans inside <li> while plain <p class="lead"> falls back to
   my #o_wblog_post_content p {1rem} = 16 px — visibly inconsistent sizes.
   Lock .lead to 1.125rem everywhere in the blog post, with ID-level scope so
   it beats the earlier `#o_wblog_post_content p { font-size: 1rem }` rule.
   =========================================================================== */
#o_wblog_post_content .lead,
#o_wblog_post_content p.lead,
#o_wblog_post_content li .lead,
#o_wblog_post_content li span.lead,
#o_wblog_post_content span.lead {
  font-size: 1.125rem;     /* 18 px — matches live Odoo */
  font-weight: 400;        /* was 300, but Inter Tight has no 300 woff2;
                              browser falls back to system font and renders
                              certain caps (notably "A") heavier — kept at 400 */
  line-height: 1.6;
}

/* Plain (non-.lead) paragraphs and list items keep 1 rem so the rhythm stays
   consistent — but bump line-height to match the .lead block above. */
#o_wblog_post_content p:not(.lead) {
  font-size: 1rem;
  line-height: 1.6;
}
#o_wblog_post_content li {
  font-size: 1.125rem;     /* same as .lead so bullet list matches the prose */
  line-height: 1.6;
}

/* --- Belt-and-braces: disable synthetic bold/italic at the blog content level.
   When a requested font-weight has no matching @font-face file (we only ship
   400-800), browsers may emit synthetic bold strokes on certain characters.
   `font-synthesis: none` tells the browser to skip the substitution entirely. */
#o_wblog_post_content {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================================================
   /jobs "About us" share pills (FA6) — 2026-05-20
   Renders the 6 social icons (FB, X, LinkedIn, WhatsApp, Pinterest, Email)
   as 32-px white rounded squares with brand-colored glyphs, matching live
   doodex.net. Source-tree uses .s_share + per-channel .s_share_<channel>.
   =========================================================================== */
.s_share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.s_share > a {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 0.35rem;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.s_share > a:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
  text-decoration: none;
}
.s_share > a > i {
  font-size: 1rem;
  line-height: 1;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.s_share_facebook  i { color: #1877F2; }
.s_share_twitter   i { color: #000000; }
.s_share_linkedin  i { color: #0A66C2; }
.s_share_whatsapp  i { color: #25D366; }
.s_share_pinterest i { color: #E60023; }
.s_share_email     i { color: #270140; }

/* ===========================================================================
   /jobs page — hero typography + job card refinements (2026-05-20)
   Scoped via .oe_website_jobs (job-list container) and the violet hero section.
   =========================================================================== */

/* --- Hero band (violet bg) — H1 / H2 / tagline sizes match live Odoo ------- */
section.o_colored_level[style*="rgb(39, 1, 64)"] {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
section.o_colored_level[style*="rgb(39, 1, 64)"] h1 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.01em;
}
section.o_colored_level[style*="rgb(39, 1, 64)"] h2 {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  opacity: 0.95;
}
section.o_colored_level[style*="rgb(39, 1, 64)"] p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 60ch;
  margin: 0 auto;
}
/* Make sure the inner spans (text-o-color-3 / 4) keep their explicit white. */
section.o_colored_level[style*="rgb(39, 1, 64)"] .text-o-color-3 { color: #EFF3F4 !important; }
section.o_colored_level[style*="rgb(39, 1, 64)"] .text-o-color-4 { color: #FFFFFF !important; }
@media (max-width: 768px) {
  section.o_colored_level[style*="rgb(39, 1, 64)"] h1 { font-size: 2.25rem; }
  section.o_colored_level[style*="rgb(39, 1, 64)"] h2 { font-size: 1.375rem; }
}

/* --- Job card grid — match live look (white card, subtle border + hover) --- */
.oe_website_jobs .card.card-default {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow .15s ease, transform .15s ease;
  overflow: hidden;
}
.oe_website_jobs .card.card-default:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.oe_website_jobs .card-body {
  padding: 1.25rem 1.5rem;
}

/* Job title h3 — Doodex coral matches live theme override of .text-secondary */
.oe_website_jobs .card-body h3.text-secondary {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: #FA7268 !important;
  margin: 0 0 0.25rem 0;
}
.oe_website_jobs .card-body h3.text-secondary span { color: inherit; }

/* "1 open positions" subtitle */
.oe_website_jobs .card-body h5 {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
  color: #212529;
  margin: 0 0 0.75rem 0;
}

/* Address + date row — small grey text, violet icons */
.oe_website_jobs .o_job_infos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: rgba(33, 37, 41, 0.75);
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 0.75rem !important;
}
.oe_website_jobs .o_job_infos .fa,
.oe_website_jobs .o_job_infos .fa-solid {
  color: #270140;
  margin-right: 0.5rem;
  width: 1.1em;
  text-align: center;
}
.oe_website_jobs .o_portal_address .d-flex {
  gap: 0.4rem !important;
}
.oe_website_jobs address {
  font-style: normal;
  font-size: 0.875rem;
}

/* Reset the s_share inside the About-us sidebar so it doesn't pick up the
   bigger 32-px tile styling we use elsewhere on the jobs page. */
.oe_website_jobs ~ * .s_share,
#jobs_grid_left .s_share { margin-top: 0.5rem; }

/* ===========================================================================
   Blog post CTAs with image backgrounds (.oe_img_bg) — 2026-05-20
   Used by posts 100, 102, 106, 112, 130 (and others) for CTA bands that paint
   a photo behind the text + button. Default Tailwind/Bootstrap rendering left
   the text barely readable on the image. Add a dark overlay + force the text
   stack to white so the CTA reads cleanly. Scoped under #o_wblog_post_content
   so we don't affect non-blog pages.
   =========================================================================== */
#o_wblog_post_content .s_call_to_action.oe_img_bg {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;            /* so the ::before stays under text */
  padding: 3rem 1rem;            /* override pt0 pb0 when present */
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 2rem 0;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg.o_bg_img_center,
#o_wblog_post_content .s_call_to_action.oe_img_bg.o_bg_img_c {
  background-position: center center;
}
/* Dark gradient overlay — makes white text legible on any photo */
#o_wblog_post_content .s_call_to_action.oe_img_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(39, 1, 64, 0.78), rgba(0, 0, 0, 0.55));
  z-index: 0;
}
/* Keep the inner content above the overlay */
#o_wblog_post_content .s_call_to_action.oe_img_bg > .container,
#o_wblog_post_content .s_call_to_action.oe_img_bg > * {
  position: relative;
  z-index: 1;
}
/* Force text + button styling for image-bg CTAs (overrides the o_cc5/o_cc4 cascade) */
#o_wblog_post_content .s_call_to_action.oe_img_bg,
#o_wblog_post_content .s_call_to_action.oe_img_bg h1,
#o_wblog_post_content .s_call_to_action.oe_img_bg h2,
#o_wblog_post_content .s_call_to_action.oe_img_bg h3,
#o_wblog_post_content .s_call_to_action.oe_img_bg h4,
#o_wblog_post_content .s_call_to_action.oe_img_bg p,
#o_wblog_post_content .s_call_to_action.oe_img_bg strong,
#o_wblog_post_content .s_call_to_action.oe_img_bg span:not(.o_text_highlight) {
  color: #FFFFFF !important;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg p {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.95;
  margin-bottom: 0;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg .btn-primary {
  background-color: #FFFFFF !important;
  color: #270140 !important;
  border-color: #FFFFFF !important;
  font-weight: 600;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg .btn-primary:hover {
  background-color: #FA7268 !important;
  color: #FFFFFF !important;
  border-color: #FA7268 !important;
}
/* Zero-width space (​) characters used by Odoo as placeholders sometimes
   render as visible blank lines — collapse them in the CTA context. */
#o_wblog_post_content .s_call_to_action p:empty,
#o_wblog_post_content .s_call_to_action h3:empty,
#o_wblog_post_content .s_call_to_action br + br { display: none; }

/* "✨Pro Tip" / "✨Astuce Pro" CTAs use .o_cc2 (coral) with pt0/pb0 — bring
   them back to a comfortable padded box so they don't look squished. */
#o_wblog_post_content .s_call_to_action.o_cc2.pt0,
#o_wblog_post_content .s_call_to_action.o_cc2.pb0 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
#o_wblog_post_content .s_call_to_action.o_cc2 {
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}
#o_wblog_post_content .s_call_to_action.o_cc2 h2,
#o_wblog_post_content .s_call_to_action.o_cc2 h3,
#o_wblog_post_content .s_call_to_action.o_cc2 p {
  color: #FFFFFF !important;
}

/* ===========================================================================
   ROUND 2 — Deep CTA refine (2026-05-20)
   First pass added an overlay + white text for image-bg CTAs. Visitors still
   saw a mess because:
     (1) Odoo emits inline `style="font-size: 2.3125rem"` on inner <span>s,
         which blows past the parent <h3>'s clean size and overflows the box.
     (2) Inline `text-align: justify` and `text-align: right` on individual
         paragraphs creates awkward jagged columns.
     (3) The button column sits on the right with no vertical centering, so
         on tall photos the button floats near the top while text sits low.
     (4) Pro-Tip pills (.o_cc2) had no horizontal padding even after our
         vertical padding fix — content kissed the band edges.
   This block uses `!important` to overpower the inline styles emitted by the
   Odoo snippet template, normalising all CTAs into a single readable layout.
   =========================================================================== */

/* (1) Nuke the inline `font-size:*rem` from inner spans in CTA headings. */
#o_wblog_post_content .s_call_to_action h1 [style*="font-size"],
#o_wblog_post_content .s_call_to_action h2 [style*="font-size"],
#o_wblog_post_content .s_call_to_action h3 [style*="font-size"],
#o_wblog_post_content .s_call_to_action h4 [style*="font-size"] {
  font-size: inherit !important;
}
#o_wblog_post_content .s_call_to_action h1,
#o_wblog_post_content .s_call_to_action h2,
#o_wblog_post_content .s_call_to_action h3 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.5rem 0 !important;
}
#o_wblog_post_content .s_call_to_action p [style*="font-size"] {
  font-size: inherit !important;
}
#o_wblog_post_content .s_call_to_action p {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0.75rem 0 !important;
}
@media (min-width: 992px) {
  #o_wblog_post_content .s_call_to_action h1,
  #o_wblog_post_content .s_call_to_action h2,
  #o_wblog_post_content .s_call_to_action h3 {
    font-size: 1.875rem !important;
  }
}

/* (2) Force all CTA text to center — kill `text-align: justify/right` inline. */
#o_wblog_post_content .s_call_to_action [style*="text-align"] {
  text-align: center !important;
}
#o_wblog_post_content .s_call_to_action {
  text-align: center;
}

/* (3) CTA two-column grid (text left, button right on doodex.net) — make sure
   the button column vertically centers and the text column doesn't shrink to
   nothing. On mobile, both stack and re-center. */
#o_wblog_post_content .s_call_to_action .row.o_grid_mode {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
#o_wblog_post_content .s_call_to_action .row.o_grid_mode > [class*="col-lg-"] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#o_wblog_post_content .s_call_to_action .row.o_grid_mode > [class*="col-lg-4"],
#o_wblog_post_content .s_call_to_action .row.o_grid_mode > [class*="col-lg-5"] {
  flex: 0 0 auto;
}
@media (max-width: 991px) {
  #o_wblog_post_content .s_call_to_action .row.o_grid_mode {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* (4) Pro-Tip pills (.o_cc2 coral with pt0 pb0) — add horizontal padding so
   content doesn't kiss the band edges. */
#o_wblog_post_content .s_call_to_action.o_cc2 .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
#o_wblog_post_content .s_call_to_action.o_cc2 {
  padding: 1.5rem 0 !important;
}
#o_wblog_post_content .s_call_to_action.o_cc2 h2,
#o_wblog_post_content .s_call_to_action.o_cc2 h3 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.4rem !important;
}
#o_wblog_post_content .s_call_to_action.o_cc2 p {
  font-size: 0.95rem !important;
  margin-bottom: 0 !important;
  opacity: 0.95;
}

/* Hide stray zero-width-space spans that wrap nothing useful in CTAs. */
#o_wblog_post_content .s_call_to_action span.oe-tabs,
#o_wblog_post_content .s_call_to_action span:empty { display: none; }

/* Button column padding — give the button some breathing room on the right. */
#o_wblog_post_content .s_call_to_action a.btn-lg {
  padding: 0.625rem 1.25rem !important;
  white-space: normal;
  display: inline-block;
}
#o_wblog_post_content .s_call_to_action a.btn-lg strong {
  font-weight: 600;
}

/* Image-bg CTA — bump the overlay slightly darker so the white text wins on
   any photo, and add an explicit min-height so short CTAs still look like a
   proper banner (not a thin strip). */
#o_wblog_post_content .s_call_to_action.oe_img_bg {
  min-height: 160px;
  display: flex;
  align-items: center;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg::before {
  background: linear-gradient(135deg, rgba(39, 1, 64, 0.82), rgba(0, 0, 0, 0.70));
}

/* ===========================================================================
   ROUND 3 — CTA visual contract matching live doodex.net (2026-05-20)
   User reference screenshots: dark CTAs (o_cc5) and image-bg CTAs use a 2-col
   layout — LEFT-aligned heading + description, RIGHT-aligned violet pill button.
   Pro-Tip pills (o_cc2 light-grey) stay centered. This block REPLACES (via
   cascade order) the round-2 "center everything" rule.
   =========================================================================== */

/* --- Default for ALL CTAs in blog posts: LEFT-align text. --- */
#o_wblog_post_content .s_call_to_action {
  text-align: left;
}
/* Override inline `text-align: justify/right` only when it's the LEAD copy.
   We keep inline text-align: center where Odoo put it deliberately (e.g. on
   button rows). */
#o_wblog_post_content .s_call_to_action p[style*="text-align: justify"],
#o_wblog_post_content .s_call_to_action p[style*="text-align:justify"] {
  text-align: left !important;
}

/* --- Dark CTAs (o_cc5) — the "Supercharge / Looking for Bespoke" pattern.
   Background: #2C2A30-ish charcoal (live uses rgba(0,0,0,0.75)).
   Layout: 2-col, text LEFT, button column RIGHT and vertically centered. --- */
#o_wblog_post_content .s_call_to_action.o_cc5 {
  background-color: rgba(0, 0, 0, 0.78) !important;
  color: #FFFFFF !important;
  border-radius: 0.5rem;
  padding: 2rem 2rem !important;
  margin: 2rem 0;
}
#o_wblog_post_content .s_call_to_action.o_cc5 .container {
  max-width: 100%;
  padding: 0;
}
#o_wblog_post_content .s_call_to_action.o_cc5 .row.o_grid_mode {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}
#o_wblog_post_content .s_call_to_action.o_cc5 .row.o_grid_mode > [class*="col-lg"]:first-child {
  flex: 1 1 60%;
  text-align: left !important;
}
#o_wblog_post_content .s_call_to_action.o_cc5 .row.o_grid_mode > [class*="col-lg"]:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Heading + description colour locked to white, left aligned. */
#o_wblog_post_content .s_call_to_action.o_cc5 h1,
#o_wblog_post_content .s_call_to_action.o_cc5 h2,
#o_wblog_post_content .s_call_to_action.o_cc5 h3 {
  color: #FFFFFF !important;
  text-align: left !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.2 !important;
}
#o_wblog_post_content .s_call_to_action.o_cc5 p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}
/* Violet pill button — large, rounded, white text. */
#o_wblog_post_content .s_call_to_action.o_cc5 a.btn,
#o_wblog_post_content .s_call_to_action.o_cc5 a.btn-primary {
  background-color: #270140 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: background-color .15s ease, transform .15s ease;
}
#o_wblog_post_content .s_call_to_action.o_cc5 a.btn:hover {
  background-color: #1f0133 !important;
  transform: translateY(-1px);
}
/* Red straight underline under the dark-CTA heading (the freehand_1 highlight).
   Force solid line, full-width-of-text, sits a bit below the heading. */
#o_wblog_post_content .s_call_to_action.o_cc5 .o_text_highlight {
  text-decoration: underline solid #E60000 !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 0.22em !important;
  color: #FFFFFF !important;
}

/* --- Pro-Tip pills (o_cc2 light grey) — KEEP centered, matches live. --- */
#o_wblog_post_content .s_call_to_action.o_cc2 {
  background-color: #EFF3F4 !important;
  color: #212529 !important;
  text-align: center !important;
  border-radius: 0.5rem;
  padding: 2rem 1.5rem !important;
  margin: 2rem 0;
}
#o_wblog_post_content .s_call_to_action.o_cc2 .row.o_grid_mode,
#o_wblog_post_content .s_call_to_action.o_cc2 .container {
  text-align: center !important;
  display: block !important;
}
#o_wblog_post_content .s_call_to_action.o_cc2 h1,
#o_wblog_post_content .s_call_to_action.o_cc2 h2,
#o_wblog_post_content .s_call_to_action.o_cc2 h3 {
  color: #212529 !important;
  text-align: center !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0.5rem 0 0.5rem 0 !important;
}
#o_wblog_post_content .s_call_to_action.o_cc2 p {
  color: #495057 !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  margin: 0 auto !important;
  max-width: 70ch;
}
/* The "✨ Pro Tip" / "✨ Astuce Pro" badge — orange circle pill at the top.
   Live wraps it in `.o_text_highlight_circle_1`. Make it a centered chip. */
#o_wblog_post_content .s_call_to_action.o_cc2 .o_text_highlight_circle_1 {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border: 2px solid #FF9C00;
  border-radius: 999px;
  color: #1a1a1a !important;
  font-weight: 700;
  font-size: 1.05rem !important;
  background: transparent;
  margin: 0 auto 0.75rem auto;
}

/* --- Image-bg CTAs — same 2-col layout as o_cc5, photo + dark overlay. --- */
#o_wblog_post_content .s_call_to_action.oe_img_bg {
  border-radius: 0.5rem;
  padding: 2rem 2rem !important;
  margin: 2rem 0;
  text-align: left;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:first-child {
  flex: 1 1 60%;
  text-align: left !important;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:last-child {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg h1,
#o_wblog_post_content .s_call_to_action.oe_img_bg h2,
#o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
  text-align: left !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
}
#o_wblog_post_content .s_call_to_action.oe_img_bg p {
  text-align: left !important;
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
}
/* Same violet pill button on image-bg CTAs. */
#o_wblog_post_content .s_call_to_action.oe_img_bg a.btn,
#o_wblog_post_content .s_call_to_action.oe_img_bg a.btn-primary {
  background-color: #270140 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#o_wblog_post_content .s_call_to_action.oe_img_bg a.btn:hover {
  background-color: #1f0133 !important;
}

/* Mobile (<992px): stack columns, button becomes full-width centered. */
@media (max-width: 991px) {
  #o_wblog_post_content .s_call_to_action.o_cc5 .row.o_grid_mode,
  #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  #o_wblog_post_content .s_call_to_action.o_cc5 .row.o_grid_mode > [class*="col-lg"]:last-child,
  #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:last-child {
    justify-content: center;
  }
}

/* ===========================================================================
   ROUND 4 — Scoped CTA font-size adjustments (2026-05-20)
   Restricts the round-3 size overrides to the 5 specific posts that needed
   the live doodex.net CTA pattern. Other blog posts keep their stock sizing.
   The 5 page entries opt in by adding `class="post-cta-refined"` on <main>.
   This block also bumps the heading sizes closer to what the user's
   reference screenshots show — dark CTA ~2 rem, Pro Tip ~1.5 rem.
   =========================================================================== */

/* --- Dark CTAs (o_cc5) inside the opt-in pages only -------------------- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h3 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 a.btn {
  font-size: 1rem !important;
  padding: 0.9rem 1.75rem !important;
}

/* --- Image-bg CTAs in the opt-in pages — same sizing as dark -------------- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg a.btn {
  font-size: 1rem !important;
  padding: 0.9rem 1.75rem !important;
}

/* --- Pro-Tip pills (o_cc2) — slightly larger headings + tighter copy ----- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 .o_text_highlight_circle_1 {
  font-size: 1.125rem !important;
  padding: 0.4rem 1.2rem;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0.75rem 0 0.5rem 0 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 p {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 60ch;
}

/* --- Mobile (<768): scale headings down a step ------------------------- */
@media (max-width: 768px) {
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h3,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
    font-size: 1.5rem !important;
  }
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h3 {
    font-size: 1.25rem !important;
  }
}

/* ===========================================================================
   ROUND 5 — Pixel-match live CTA font sizes (2026-05-20)
   Reference screenshots from user:
     • Dark CTA description ("Get the full Doodex Growth Suite…") is BOLD
       at ~14-15 px, not normal-weight 16 px like my round 4.
     • ✨ Pro Tip badge appears at ~24 px (1.5 rem), not the 1.125 rem I had.
     • Pro Tip description ("Start with one team inbox…") is normal weight
       at ~15 px, not bold.
     • Final muted line ("Cleaner tracking → fewer duplicates …") sits
       below the description in a slightly muted dark grey.
   These last-mile sizing tweaks are scoped to `.post-cta-refined` so they
   only affect the 5 marked posts (130/112/106/102/100, EN + FR).
   =========================================================================== */

/* --- Dark CTA description: BOLD 0.875 rem to match the live screenshot. --- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}
/* Bring the dark-CTA heading a touch tighter so it doesn't dominate the box. */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h3 {
  font-size: 1.875rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.4rem !important;
}

/* --- Image-bg CTA paragraph also gets bold + smaller (same visual band). --- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
  font-size: 1.875rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.4rem !important;
}

/* --- ✨ Pro Tip badge — bump to live's ~1.5 rem size. ---------------------- */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 .o_text_highlight_circle_1 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  padding: 0.45rem 1.4rem !important;
  border-width: 2.5px !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h1,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h2,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h3 {
  font-size: 1.375rem !important;     /* ~22 px — sits below the larger badge */
  font-weight: 700 !important;
  margin: 1rem 0 0.75rem 0 !important;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 p {
  font-size: 0.9375rem !important;    /* ~15 px — normal weight, dark muted */
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #495057 !important;
  margin: 0 auto !important;
  max-width: 60ch;
}
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 p + p {
  margin-top: 0.6rem !important;     /* gap between description + summary line */
  color: #212529 !important;
}

/* Mobile re-scale */
@media (max-width: 768px) {
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 h3,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg h3 {
    font-size: 1.5rem !important;
  }
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 .o_text_highlight_circle_1 {
    font-size: 1.25rem !important;
  }
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h1,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h2,
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc2 h3 {
    font-size: 1.2rem !important;
  }
}


/* ===========================================================================
   Table header readability on /blog/.../stock-sheet-on-odoo-76 — 2026-05-20
   The post's example table uses cells with class `bg-o-color-1` (Doodex
   violet #270140 as background) but the inner <p><strong>Date</strong></p>
   inherits the post body's dark text color → black on violet, unreadable.
   Force white text inside any `.bg-o-color-1` cell that appears inside blog
   post content. Scoped under #o_wblog_post_content so it can't leak elsewhere.
   =========================================================================== */
#o_wblog_post_content .bg-o-color-1,
#o_wblog_post_content .bg-o-color-1 p,
#o_wblog_post_content .bg-o-color-1 span,
#o_wblog_post_content .bg-o-color-1 strong,
#o_wblog_post_content .bg-o-color-1 a {
  color: #FFFFFF !important;
}

/* ===========================================================================
   Embedded YouTube video sizing for 3 specific blog posts (2026-05-20)
   The migrator emits Odoo's responsive video wrapper (`.media_iframe_video`)
   for the embedded YouTube videos but without the supporting CSS, the iframe
   defaults to 300×150 px → looks tiny inside the article column.
   Live doodex.net rules (padding-bottom: 66.5% trick) replicated here.
   Scoped to `.post-video-fix` so it only affects:
     • post 128 — odoo-email-marketing-sms-marketing-...
     • post 123 — improve-odoo-crm-for-high-growth-teams-...
     • post 119 — how-to-build-automated-marketing-flows-...
   EN + FR mirrors of each.
   =========================================================================== */
.post-video-fix #o_wblog_post_content .media_iframe_video {
  width: 100%;
  margin: 1.5rem auto;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-width: 100px;
  border-radius: 0.5rem;
}
.post-video-fix #o_wblog_post_content .media_iframe_video .media_iframe_video_size {
  padding-bottom: 56.25%;     /* 16:9 — matches the live aspect */
  position: relative;
  width: 100%;
  height: 0;
}
.post-video-fix #o_wblog_post_content .media_iframe_video iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  border: 0;
  border-radius: 0.5rem;
}
.post-video-fix #o_wblog_post_content .media_iframe_video .css_editable_mode_display {
  display: none !important;    /* Odoo editor-only overlay, hidden on live */
}

/* ===========================================================================
   Round 6 — CTA heading-in-<p> sizing (2026-05-20)
   Some CTA blocks (post 130 "Supercharge Your Odoo Today", post 102, etc.)
   wrap their heading text in <p><span style="font-size:2.3rem"><strong>… —
   not in an <h1/h2/h3>. Round 2's rule killed all inline font-sizes inside
   .s_call_to_action <p> spans, then Round 5's `p { font-size: 0.875rem }`
   collapsed the heading to description size.
   Detect a heading paragraph via :has(.o_text_highlight) — only the heading
   <p> contains the highlight span — and restore the 1.875 rem heading size.
   Scoped to .post-cta-refined so only the marked posts are affected.
   =========================================================================== */

/* Heading paragraph: contains the freehand/red-underline highlight. */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p:has(.o_text_highlight),
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p:has(.o_text_highlight) {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  margin: 0 0 0.4rem 0 !important;
  text-align: left !important;
}
/* And keep the inner span / strong inheriting the new size. */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p:has(.o_text_highlight) span,
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p:has(.o_text_highlight) strong,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p:has(.o_text_highlight) span,
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p:has(.o_text_highlight) strong {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
/* Hide the leading zero-width space that the Odoo template emits before the
   highlight text — otherwise the line breaks awkwardly. */
.post-cta-refined #o_wblog_post_content .s_call_to_action p > span > strong > span.oe-tabs {
  display: none !important;
}

/* The description <p> sits right after the heading <p>. Keep it 0.875 rem
   bold (Round 5) — already in place, but be explicit so cascade can't drift. */
.post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p:not(:has(.o_text_highlight)),
.post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p:not(:has(.o_text_highlight)) {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* Mobile rescale */
@media (max-width: 768px) {
  .post-cta-refined #o_wblog_post_content .s_call_to_action.o_cc5 p:has(.o_text_highlight),
  .post-cta-refined #o_wblog_post_content .s_call_to_action.oe_img_bg p:has(.o_text_highlight) {
    font-size: 1.5rem !important;
  }
}

/* ===========================================================================
   FR post 128 — TOC text color fix (2026-05-20)
   The migrator preserved Odoo editor inline styles `color: rgb(172, 108, 20)`
   (a dark gold) on some TOC entries: "Bizscan", "Module Email", "Suivi des
   Performances", and three sub-bullets. Hard to read against the cream body.
   Scoped to `.post-128-fr-toc-fix` so only this single FR post is touched.
   =========================================================================== */
.post-128-fr-toc-fix #o_wblog_post_content [style*="rgb(172, 108, 20)"],
.post-128-fr-toc-fix #o_wblog_post_content [style*="rgb(172,108,20)"] {
  color: #270140 !important;       /* Doodex violet — same as the other TOC links */
}
.post-128-fr-toc-fix #o_wblog_post_content a:has([style*="rgb(172, 108, 20)"]),
.post-128-fr-toc-fix #o_wblog_post_content a[style*="rgb(172, 108, 20)"] {
  color: #270140 !important;
  text-decoration: none;
}
.post-128-fr-toc-fix #o_wblog_post_content a:has([style*="rgb(172, 108, 20)"]):hover,
.post-128-fr-toc-fix #o_wblog_post_content [style*="rgb(172, 108, 20)"]:hover {
  color: #FA7268 !important;        /* coral on hover, same as other links */
}

/* ===========================================================================
   FR post 38 — move "Parlez aux experts" CTA button to the LEFT (2026-05-20)
   The image-bg CTA on /fr/blog/.../creation-de-tableaux-de-bord-de-production-...-38
   has its button column positioned on the right by my global flex layout
   (.s_call_to_action.oe_img_bg { justify-content: space-between }).
   User wants the button aligned to the LEFT on this single CTA — i.e. below
   the heading + description, left-aligned, no offset.
   Scoped to .post-38-fr-cta-left so only this one FR post is affected.
   =========================================================================== */
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1rem;
  text-align: left !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"] {
  flex: 0 0 auto;
  width: 100%;
  display: block;
  text-align: left !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:last-child {
  justify-content: flex-start !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:last-child p {
  text-align: left !important;
  margin: 0 !important;
}

/* Post 38 FR CTA — also kill Bootstrap's `offset-lg-2` margin on the button
   column, otherwise the button still shows ~16% indent from the left even
   after the column stacking. */
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="offset-lg-"],
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > .offset-lg-2 {
  margin-left: 0 !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .row.o_grid_mode > [class*="col-lg"]:last-child p {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
.post-38-fr-cta-left #o_wblog_post_content .s_call_to_action.oe_img_bg .btn {
  margin-left: 0 !important;
}