/* Knowledge Area -- bridge rules for the Elementor + JetEngine rebuild.
 *
 * knowledge-area.css stays a verbatim copy of the reference stylesheet.
 * Everything here exists for exactly two reasons:
 *   1. JetEngine wraps every repeater row in its own divs, which would break the
 *      reference grids that expect the cards to be their own direct children.
 *   2. wp_kses_post() strips inline <svg> out of a Dynamic Repeater item format,
 *      so the three glyphs are re-created as background images.
 * Keep this file small; if a rule is not caused by 1 or 2 it probably belongs in
 * the Elementor panel instead.
 */

/* --- 1. Make JetEngine wrappers transparent -------------------------------- */
/* display:contents removes the wrapper box but keeps its children, so
 * .offer-grid / .ka / .faq keep seeing the cards as their own grid items. */
.offer-grid > .elementor-widget,
.offer-grid .elementor-widget-container,
.offer-grid .jet-listing-dynamic-repeater,
.offer-grid .jet-listing-dynamic-repeater__items,
.offer-grid .jet-listing-dynamic-repeater__item,
.ka > .elementor-widget,
.ka .elementor-widget-container,
.ka .jet-listing-dynamic-repeater,
.ka .jet-listing-dynamic-repeater__items,
.ka .jet-listing-dynamic-repeater__item,
.faq > .elementor-widget,
.faq .elementor-widget-container,
.faq .jet-listing-dynamic-repeater,
.faq .jet-listing-dynamic-repeater__items,
.faq .jet-listing-dynamic-repeater__item {
  display: contents;
}

/* Article sections come from a Listing Grid -- same treatment, so the reference
 * article.content spacing and heading rhythm resolve unchanged. */
.ka-article-sections > .elementor-widget,
.ka-article-sections .elementor-widget-container,
.ka-article-sections .jet-listing-grid,
.ka-article-sections .jet-listing-grid__items,
.ka-article-sections .jet-listing-grid__item,
.ka-article-sections .jet-listing-grid__item > .elementor {
  display: contents;
}

/* --- 2. Glyphs that wp_kses_post removed ----------------------------------- */
/* Geometry and colours still come from the reference .oicon / .oarrow rules;
 * only the glyph itself is restored here. */
.offer .oicon::after {
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.offer.course .oicon::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5'/%3E%3C/svg%3E"); }
.offer.consult .oicon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E"); }
.offer .oicon::after         { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c0 1 2.7 2.5 6 2.5s6-1.5 6-2.5v-5'/%3E%3C/svg%3E"); }

/* The reference arrow lived in .oarrow > span, which the item format no longer
 * emits; recreate it as a pseudo-element with the same 30px circle. */
.offer .oarrow::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3266' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: .2s;
}
.offer:hover .oarrow::after {
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateX(2px);
}
/* --- 3. Video: reference poster + play button on the Elementor Video widget - */
/* The reference had a hand-written figure.sc-videobox with .vposter/.vplay and
 * its own click JS. The template now uses the core Video widget instead (per the
 * tech note), so the widget's own overlay markup is restyled into the reference
 * look and Elementor's frontend JS handles the click. No custom JS involved. */
.sc-videobox > .elementor-widget-video,
.sc-videobox > .elementor-widget-video > .elementor-widget-container,
.sc-videobox .elementor-wrapper {
  position: absolute;
  inset: 0;
}
.sc-videobox video.elementor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.sc-videobox .elementor-custom-embed-image-overlay {
  z-index: 2;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
/* the reference darkened the poster so the lime button keeps its contrast */
.sc-videobox .elementor-custom-embed-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 35, .12), rgba(6, 18, 35, .5));
}
.sc-videobox .elementor-custom-embed-play {
  position: relative;
  z-index: 3;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  transition: .2s;
}
.sc-videobox .elementor-custom-embed-play i,
.sc-videobox .elementor-custom-embed-play svg {
  font-size: 28px;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  text-shadow: none;
  opacity: 1;
  fill: currentColor;
}
.sc-videobox .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
  transform: scale(1.08);
  background: #e6f16a;
}

/* --- 4. Optional blocks hidden by Dynamic Visibility ----------------------- */
/* Both grids are two-column by design. When the optional half is not rendered
 * (Kanban has no CTA image and no editorial side cards) the remaining column
 * must take the full width instead of leaving a hole. */
.splitcta:not(:has(.sc-media)) {
  grid-template-columns: 1fr;
}
.split:not(:has(.split-cards)) {
  grid-template-columns: 1fr;
}
/* --- 5. Elementor kit vs the reference base rules -------------------------- */
/* The site kit prints .elementor-kit-9{background-color:#43484F} and
 * .elementor-kit-9 a{color:...} / p{margin-block-end:1.4em}. Those selectors
 * carry a class, so they beat the reference sheet's element selectors
 * (body, a, p) no matter how late the file is enqueued -- specificity, not
 * order. Every page on the site relies on section backgrounds to cover that
 * dark body, but the reference layout expects a white page behind the article.
 * These three rules put the reference base back for knowledge-base singles
 * only; they are the same overrides the old PHP renderer used to inline. */
body.single-knowledge-base {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.68;
}
body.single-knowledge-base a {
  color: inherit;
}

/* --- 6. Elementor container defaults vs the reference grid ----------------- */
/* Two Elementor defaults break the reference measurements:
 *
 * 1) :is(.elementor-section-wrap,[data-elementor-id])>.e-con sets
 *    max-width:min(100%,var(--width)) on TOP-LEVEL containers only. That is why
 *    the nested .wrap inside a band stayed 1220px while the article's own .wrap
 *    -- a top-level element -- stretched to the full viewport. The selector
 *    carries two classes, so .wrap{max-width:1220px} cannot win on its own.
 * 2) every container ships 10px of padding, which pushed the article text 20px
 *    off the reference gutter and made the video block wider than the column.
 *    The reference relies on .wrap{padding:0 26px} alone.
 */
body.single-knowledge-base [data-elementor-id] > .wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}
body.single-knowledge-base .e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* --- 7. Heading rhythm ----------------------------------------------------- */
/* The reference kills the top margin of the first heading with
 * article.content h2:first-child. Every heading is now the first child of its
 * own JetEngine field wrapper, so that rule matched all of them and the 56px
 * rhythm between sections collapsed. Restore it explicitly. */
body.single-knowledge-base article.content h2 {
  margin-top: 56px;
}
body.single-knowledge-base article.content .lead-in + * h2 {
  margin-top: 56px;
}
/* --- 8. Overlaid site header ----------------------------------------------- */
/* The reference document had its own header in normal flow. On the live site the
 * HFE header section is position:absolute; z-index:999; height 87px, so it sits
 * ON TOP of the first section and clipped the hero H1. The reference keeps 40px
 * of air above the H1, so the hero gutter has to carry the header height too.
 * (The old PHP renderer solved the same problem with a 40px wrapper padding.) */
body.single-knowledge-base {
  --bpi-header-h: 87px;
}
body.single-knowledge-base .hero .wrap {
  padding-top: calc(var(--bpi-header-h) + 40px);
}
/* --- 9. Heading weight and line-height ------------------------------------- */
/* The reference declares h1,h2,h3,h4{font-weight:600;line-height:1.2} as a TYPE
 * selector, so `.elementor-kit-9 h2{font-weight:400;line-height:1em}` wins and
 * every heading rendered thin and tight (visibly lighter than the hand-built
 * Elementor page for the same content).
 * Only weight/line-height/letter-spacing are restored here on purpose: colour
 * must stay with the reference sheet, otherwise this rule would also beat
 * .splitcta h2{color:#fff} and paint the CTA headings navy on navy. */
body.single-knowledge-base h1,
body.single-knowledge-base h2,
body.single-knowledge-base h3,
body.single-knowledge-base h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

/* --- 10. Accent button label vs the a{color:inherit} bridge rule (rule 5) -- */
/* .elementor-kit-9 a{color:#1855B5} (one class + type = specificity 0,1,1) is
 * what rule 5's body.single-knowledge-base a{color:inherit} (0,1,2) was built to
 * beat, but that same bridge rule also outranks the reference .btn{color:
 * var(--accent-ink)} (0,1,0): both are single-class selectors, so "a" with an
 * extra type selector always wins. Inside a white-text container (.splitcta,
 * .card.train, etc.) the lime .btn label inherits white instead of showing the
 * intended navy accent-ink label. Adding the .single-knowledge-base class again
 * is enough to win back only for .btn, without touching .btn-ghost/.sc-ghost
 * (which correctly want the inherited colour). */
body.single-knowledge-base .btn {
  color: var(--accent-ink);
}
body.single-knowledge-base .btn-ghost {
  color: var(--primary);
}
body.single-knowledge-base .btn-lite {
  color: var(--navy);
}
/* .btn combines with .sc-ghost on splitcta secondary buttons (class="btn
 * sc-ghost"). The plain .btn rule above (0,2,1) now outranks .sc-ghost{color:
 * #fff} (0,1,0) on that same element, so the ghost button on a dark splitcta
 * background showed navy text instead of white. Restore it explicitly with
 * matching specificity; .btn-ghost can combine with .btn the same way
 * (class="btn btn-ghost", the hero secondary button) so it needs the same
 * treatment even though --primary and --accent-ink look almost identical. */
body.single-knowledge-base .btn.sc-ghost {
  color: #fff;
}
body.single-knowledge-base .btn.btn-ghost {
  color: var(--primary);
}
/* Those two compound rules are unconditional (no :hover clause), so at (0,3,1)
 * they also outrank the reference's own hover colour-swap -- .sc-ghost:hover
 * {color:var(--primary)} and .btn-ghost:hover{color:#fff} are both only
 * (0,2,0). Without the two rules below, hovering either ghost button still
 * flips its background (that part has no competing rule) but the label stays
 * stuck on its resting colour, landing on top of a same-colour background
 * (white-on-white for sc-ghost, navy-on-navy for btn-ghost) and disappearing.
 * Restore the swap at higher-still specificity so it wins only while hovered. */
body.single-knowledge-base .btn.sc-ghost:hover {
  color: var(--primary);
}
body.single-knowledge-base .btn.btn-ghost:hover {
  color: #fff;
}

/* --- 11. Missing reference rule: .ka-flow float layout --------------------- */
/* Both the lean-transformation and VSM prototype <style> blocks define
 * .ka-flow to let a single .mini "read also" card float at a fixed width
 * inside a flowing paragraph, with the surrounding text wrapping to its left.
 * knowledge-area.css was generated from the 5S reference file, which never
 * used this pattern (5S only uses the two-column .split-cards grid for its
 * fixed mistakes_card1/2 slots), so .ka-flow was never copied in. Without it
 * <div class="ka-flow"> has no effect and .mini falls back to a plain block,
 * stretching to the full width of article.content instead of the intended
 * ~340px card. Restored verbatim from the prototype source here (not in
 * knowledge-area.css, per that file's own "add overrides here instead"
 * instruction) so any section_body using this markup renders correctly. */
.ka-flow::after {
  content: "";
  display: block;
  clear: both;
}
.ka-flow > .mini {
  float: right;
  clear: right;
  width: 340px;
  margin: 0 0 18px 28px;
}
.ka-flow > p {
  max-width: none;
}
@media (max-width: 820px) {
  .ka-flow > .mini {
    float: none;
    width: auto;
    margin: 18px 0;
  }
}

/* --- 12. Newsletter band vs the lean-transformation page's own kill-switch - */
/* Template 33768 (the lean-transformation personal override) ships its own
 * Page Settings > Custom CSS: ".elementor-33768 .e-con, .elementor-33768
 * .e-con-inner{width:100% !important;max-width:none !important;margin-left:0
 * !important;margin-right:0 !important;padding-left:0 !important;
 * padding-right:0 !important}". It exists so the legacy shortcode's own
 * markup can control its own width, but !important beats every non-important
 * rule regardless of specificity, so it also flattens the newsletter band's
 * "nl-wrap" (.wrap, meant to stay 1220px) and "nl-col" (meant to stay 720px)
 * containers added at the end of that template. Fixed the only way an
 * !important rule can be fixed -- more specific, also !important -- scoped to
 * this one template so it cannot affect 33706 or any other knowledge-base
 * post. If a future block is added after the newsletter band on this same
 * template, give it the same treatment or it will silently go full-bleed. */
.elementor-33768 .elementor-element-nl-wrap.e-con {
  max-width: var(--wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}
.elementor-33768 .elementor-element-nl-col.e-con {
  width: 1280px !important;
}
@media (max-width: 1024px) {
  .elementor-33768 .elementor-element-nl-col.e-con {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- 13. Newsletter band background\/padding vs rule 6's --padding-* reset - */
/* Rule 6 unconditionally zeroes every .e-con's padding variables
 * (body.single-knowledge-base .e-con{--padding-top:0px;...}, specificity
 * 0,2,1) to strip Elementor's default 10px container padding. Every OTHER
 * section in this template was already immune because it never used
 * Elementor's native padding/background controls in the first place -- they
 * all rely on the reference's own CSS classes (.band{padding:64px 0}, etc.)
 * for visual spacing instead. nl-band broke this convention (native
 * background_background/background_color/padding settings on the
 * container), so rule 6 silently zeroed its padding regardless of what was
 * configured in the Elementor panel -- padding-bottom stayed 0 no matter what
 * value was saved, which is also why the Cloudflare Turnstile widget (custom
 * CSS below, absolutely positioned via bottom:-100px expecting the padding to
 * provide clearance) ended up overlapping the footer instead of sitting in
 * clear space. Fixed the same way every other section in this file already
 * does it: a plain CSS class instead of native settings. This wins outright
 * because it sets the literal padding/background properties directly (no
 * --variable indirection for this element to fight over), and because a
 * same-specificity same-property declaration later in this same file beats
 * frontend.min.css's own .e-con{padding-block-end:var(--padding-bottom)} by
 * source order regardless of what rule 6 set that variable to. */
.nl-band {
  background: #061223;
  padding: 80px 0 190px;
  padding-block-start: 80px;
  padding-block-end: 190px;
}