/* =============================================================================
   Guide detail pages (/guides/{slug} + /ar/guides/{slug}) — Figma restyle.
   Scoped to body.rp-guide-detail (added by inc/guide-download-form.php), so it
   only affects guide pages carrying the HubSpot download form and can't leak.
   The HubSpot form itself is an <iframe> and is intentionally left untouched.
   ========================================================================== */

/* ---- Hero band + container -------------------------------------------------*/
body.rp-guide-detail .hero_double_section {
  background: #EEF2FE;
  /* lavender from the very top (no transparent/white strip), easing slightly darker */
  background-image: linear-gradient(180deg, #EEF2FE 0%, #E3EBFD 60%);
  /* break out of WP's constrained content layout so the band is full-bleed */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 44px 24px 76px;
}
/* remove the white gap between the site header and the hero band:
   the content <main> and its has-global-padding group add top margin/padding
   above the first block — zero them on guide pages so the hero sits flush */
body.rp-guide-detail .entry-content { margin-top: 0 !important; }
body.rp-guide-detail .entry-content > .hero_double_section:first-child { margin-top: 0 !important; }
body.rp-guide-detail main.wp-block-group { margin-top: 0 !important; }
body.rp-guide-detail main > .wp-block-group.has-global-padding { padding-top: 0 !important; }
body.rp-guide-detail .getguide-rp-container {
  max-width: 1200px;
  margin: 0 auto;
}
body.rp-guide-detail .double-section-hero-container.w-row {
  display: flex;
  align-items: center;
  gap: 48px;
}
body.rp-guide-detail .double-section-hero-container-left,
body.rp-guide-detail .double-section-hero-container-right {
  float: none;
  width: 50%;
  padding: 0;
}
/* the light-blue split mask behind the hero is redundant once the whole band
   is tinted — hide it so the tint is even edge-to-edge */
body.rp-guide-detail .hero_double_section_mask { display: none; }

/* ---- Left column: title + "who is it for" + bullets ------------------------*/
body.rp-guide-detail .getguide-hero-h {
  font-size: clamp(34px, 3.8vw, 47px);
  line-height: 1.18;
  font-weight: 700;
  color: #15113B;
  margin: 0 0 22px;
}
body.rp-guide-detail .rich-text-block-5 {
  color: #4A5170;
  font-size: 17px;
  line-height: 1.6;
}
body.rp-guide-detail .rich-text-block-5 > *:first-child { margin-top: 0; }
body.rp-guide-detail .rich-text-block-5 p { margin: 0 0 16px; }
/* sub-labels like "Who Is It For?" / "What's Inside the Toolkit" */
body.rp-guide-detail .rich-text-block-5 h1,
body.rp-guide-detail .rich-text-block-5 h2,
body.rp-guide-detail .rich-text-block-5 h3,
body.rp-guide-detail .rich-text-block-5 h4 {
  font-size: 16px;
  font-weight: 600;
  color: #6B7194;
  line-height: 1.4;
  margin: 4px 0 16px;
  text-transform: none;
}
body.rp-guide-detail .rich-text-block-5 ul {
  margin: 20px 0 0;
  padding-left: 0;
  list-style: none;
}
body.rp-guide-detail .rich-text-block-5 li {
  position: relative;
  margin: 0 0 16px;
  padding-left: 34px;
  color: #15113B;
  font-size: 16px;
  line-height: 1.5;
}
body.rp-guide-detail .rich-text-block-5 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23114EF7' fill-opacity='0.14'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23114EF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.rp-guide-detail .rich-text-block-5 strong { color: #15113B; font-weight: 700; }

/* ---- Right column: form card ----------------------------------------------*/
/* decorative Webflow waves/circles are not in the design */
body.rp-guide-detail .circles-bg-download .waves-bg,
body.rp-guide-detail .circles-bg-download .chat-circles-bg { display: none; }
body.rp-guide-detail .get-ebook-cover-img { display: none !important; }

body.rp-guide-detail .circles-bg-download { position: relative; }
body.rp-guide-detail .circles-bg-download .lets-chat {
  background: #fff !important;
  border: 9px solid rgba(17, 78, 247, .28) !important;
  border-radius: 19px !important;
  box-shadow: none !important;
  padding: 32px !important;
  max-width: 560px;
  margin-left: auto;
}
/* "Download the Guide" heading — accent word in brand blue, no yellow underline */
body.rp-guide-detail .rp-h2-guide {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  color: #15113B;
  line-height: 1.2;
  margin: 0 0 20px;
}
body.rp-guide-detail .rp-h2-guide .yellow-line {
  background: none !important;
  box-shadow: none !important;
  color: #114EF7;
  -webkit-text-fill-color: #114EF7;
}
/* privacy note under the card */
body.rp-guide-detail .circles-bg-download .dark-gray-txt {
  font-size: 13px;
  line-height: 1.5;
  color: #8A90A6;
  max-width: 560px;
  margin: 16px auto 0 auto;
  margin-left: auto;
}

/* ---- Similar resources — match the guides LISTING card design --------------*/
body.rp-guide-detail .guide-similar-section { padding: 64px 24px 40px; }
body.rp-guide-detail .similar-resources-h2 {
  text-align: center;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: #15113B;
  margin: 0 0 40px;
}
/* card: white, hairline border, 8px radius (same as /guides listing) */
body.rp-guide-detail .guide-similar-section .guide-ebook-column-section-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(15, 16, 53, .08);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}
/* cover panel: light-blue tint + dot pattern, cover sits centred at the bottom */
body.rp-guide-detail .guide-similar-section .category-ebook-column-section-item-img {
  background-color: rgba(34, 83, 238, .08);
  background-image: url('/wp-content/themes/rp/assets/images/rp-gray-pattern.svg');
  background-repeat: repeat;
  border-radius: 0;
  padding: 20px 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
body.rp-guide-detail .guide-similar-section .category-ebook-column-section-image {
  width: auto;
  max-width: 62%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: none;
}
body.rp-guide-detail .guide-similar-section .category-ebook-column-sub-section-item { padding: 24px; }
body.rp-guide-detail .guide-similar-section .guide-ebook-column-section-item-header {
  font-size: 20px;
  font-weight: 700;
  color: #15113B;
  line-height: 1.25;
  margin: 0 0 10px;
}
body.rp-guide-detail .guide-similar-section .guide-ebook-column-section-item-p {
  color: #6B7194;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* ---- Responsive ------------------------------------------------------------*/
@media (max-width: 991px) {
  /* Webflow zeroes the hero padding on mobile and a child carries a negative
     offset, so the title slides under the fixed header. Force enough top
     clearance (compound selector + !important beats the Webflow rule) and
     neutralise the child offset. */
  body.rp-guide-detail .hero_double_section.extra_top_padding {
    padding-top: 104px !important;
    padding-bottom: 56px !important;
  }
  body.rp-guide-detail .hero_double_section-sub-left,
  body.rp-guide-detail .getguide-hero-h-p-container { margin-top: 0 !important; }
  body.rp-guide-detail .double-section-hero-container.w-row { flex-direction: column; gap: 28px; }
  body.rp-guide-detail .double-section-hero-container-left,
  body.rp-guide-detail .double-section-hero-container-right {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* form card spans the full column width on mobile (Webflow sets a fixed
     560px width on the wrapper + card — override both) */
  body.rp-guide-detail .double-section-hero-container-right .circles-bg-download,
  body.rp-guide-detail .circles-bg-download .lets-chat {
    width: 100% !important;
    max-width: none !important;
  }
  body.rp-guide-detail .circles-bg-download .lets-chat {
    margin: 0 !important;
    padding: 22px !important;
  }
}

/* ---- RTL (Arabic twins) ----------------------------------------------------*/
/* keep natural flex `row`: under dir=rtl the axis flips, so content (1st child)
   sits on the RIGHT and the form (2nd child) on the LEFT — the desired mirror */
body.rp-guide-detail.rtl .double-section-hero-container.w-row { flex-direction: row; }
body.rp-guide-detail.rtl .getguide-hero-h,
body.rp-guide-detail.rtl .rich-text-block-5 { text-align: right; }
body.rp-guide-detail.rtl .rich-text-block-5 li { padding-left: 0; padding-right: 34px; }
body.rp-guide-detail.rtl .rich-text-block-5 li::before { left: auto; right: 0; }
body.rp-guide-detail.rtl .lets-chat { margin-left: 0; margin-right: auto; }
body.rp-guide-detail.rtl .rp-h2-guide { text-align: right; }
@media (max-width: 991px) {
  body.rp-guide-detail.rtl .double-section-hero-container.w-row { flex-direction: column; }
  body.rp-guide-detail.rtl .lets-chat { margin: 0 auto; }
}