/*
 * Elementor's own widget defaults (heading/text-editor color, size, etc.) can beat inherited
 * typography from our design-system classes, because those classes land on the .elementor-element
 * wrapper (via the Advanced > CSS Classes control) rather than on the actual <h1>/<p> tag.
 * Force every Elementor text-producing inner element to inherit from its wrapper so our classes
 * (heading-1..6, text-medium, label, etc.) apply exactly as in the static design.
 */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-text-editor .elementor-text-editor p,
.elementor-widget-text-editor .elementor-text-editor h1,
.elementor-widget-text-editor .elementor-text-editor h2,
.elementor-widget-text-editor .elementor-text-editor h3,
.elementor-widget-text-editor .elementor-text-editor h4,
.elementor-widget-text-editor .elementor-text-editor h5,
.elementor-widget-text-editor .elementor-text-editor h6,
.elementor-widget-text-editor .elementor-text-editor span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  text-align: inherit !important;
}

.elementor-widget-heading .elementor-heading-title a,
.elementor-widget-text-editor .elementor-text-editor a {
  color: inherit;
}

/* Hero buttons now use Elementor's native "button" widget (an <a class="elementor-button">
   inside .elementor-button-wrapper) instead of a styled div wrapping a bare anchor —
   resetting Elementor's own button defaults and applying our design-system look directly
   to that well-supported native element. The OUTER wrapper div still carries the plain
   "btn"/"btn-primary"/"btn-secondary" classes (for the unscoped base rules elsewhere in
   the design system), so it also picks up their border/padding/background — producing a
   double border/padding around the inner .elementor-button. Strip the outer wrapper back
   to a plain, invisible container so only the inner native button carries any visible
   styling. */
.btn.elementor-widget-button {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
.btn .elementor-button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .hero-actions .btn .elementor-button,
  .about-hero-actions .btn .elementor-button {
    white-space: normal;
    width: 100%;
  }
}
.btn-primary .elementor-button {
  background: var(--color-plantation);
  color: #ffffff;
  padding: 10px 24px;
  border: 1px solid var(--color-plantation);
}
.btn-primary .elementor-button:hover {
  background: var(--color-plantation-hover);
}
.btn-secondary .elementor-button {
  background: transparent;
  color: var(--color-text);
  padding: 10px 24px;
  border: 1px solid var(--color-border);
}
.btn-secondary .elementor-button:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Guide CTA section always shows white text over its dark background image. */
.guide-cta,
.guide-cta * {
  color: #ffffff;
}
.guide-cta .btn-primary {
  color: #ffffff !important;
}

/* Elementor forces every widget-in-a-container toward width:100% and, in some contexts,
   display:flex by default -- this silently breaks inline elements like buttons/link-arrows
   that are meant to sit side-by-side and shrink to their label instead of stretching full
   width. Our own .btn / .link-arrow rules already declare the correct display + sizing;
   force them to win regardless of whichever internal Elementor rule is fighting them. */
body .elementor-widget.btn,
body .elementor-widget.link-arrow {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  flex-grow: 0 !important;
}

.advisor-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

/* Testimonial carousel: only the active slide is visible. */
.testimonial-slide {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.testimonial-slide.active {
  display: flex;
}

/* A page-builder plugin (Element Pack/ElementsKit) injects default colors onto plain <button>
   and link hover states (pink buttons, blue hover text) that beat our design-system colors.
   Force our exact button colors in all states. */
body .btn,
body button {
  color: inherit;
}
body .btn-primary,
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary-sm,
body .btn-primary-sm:hover,
body .btn-primary-sm:focus {
  color: #ffffff !important;
}
body .btn-secondary,
body .btn-secondary:hover,
body .btn-outline:hover {
  color: var(--color-text) !important;
}
body .testimonial-arrow,
body .testimonial-arrow svg {
  color: var(--color-text) !important;
}
body .testimonial-arrow,
body .testimonial-arrow:hover,
body .testimonial-arrow:focus {
  background-color: var(--color-white) !important;
}

/* Add a light top divider to the footer, separating it from the section above. */
.footer {
  border-top: 1px solid var(--color-border);
}

.navbar .container {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.nav-right {
  justify-content: flex-end;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: fit-content !important;
  max-width: fit-content !important;
  margin-left: auto !important;
}

/* Elementor containers default to flex-direction:column when the setting is unset/dropped
   (e.g. after an Elementor version migration silently normalizes stored postmeta). These
   classes are always meant to be row layouts on desktop/tablet per the source design, and
   fall back to column only below the mobile breakpoint (see each stylesheet's own
   @media (max-width: 768px) rules, which still win there since row-of-thumb specificity is
   equal and this rule is scoped to wider viewports). This is a defensive fallback independent
   of whatever Elementor's own per-element setting currently holds. */
.audience-cards {
  flex-direction: row !important;
}

@media (min-width: 769px) {
  .hero-card,
  .how-we-work,
  .feature-row,
  .steps-grid,
  .featured-article,
  .advisors-row,
  .testimonial-layout,
  .final-cta,
  .navbar .container,
  .nav-right,
  .footer-main,
  .footer-bottom-row,
  .about-beliefs-grid,
  .about-team-grid,
  .about-cta-inner,
  .contact-form-layout,
  .contact-cards-row,
  .split,
  .content-image,
  .cards-row,
  .blog-post-layout,
  .about-advisor-content,
  .radios-row {
    /* !important needed: Elementor's own native per-breakpoint container settings (e.g.
       flex_direction_tablet:"column" saved on hero-card) apply across its whole tablet
       range (roughly 769-1024px) and otherwise win over this plain declaration, creating
       a dead zone — landscape phones and small tablets in that width range — where content
       stays column-stacked even though this rule intends row from 769px up. */
    flex-direction: row !important;
  }
}

/* Elementor's generated per-element selector (.elementor-element.elementor-element-<id>) has
   higher specificity than our single design-system class, so "display: grid" needs !important
   here to reliably beat Elementor's own "display: flex" default on these grid-intended sections. */
.steps-grid,
.about-beliefs-grid,
.about-team-grid,
.about-credentials-grid,
.articles-grid {
  display: grid !important;
}
@media (max-width: 768px) {
  .steps-grid,
  .about-beliefs-grid,
  .about-team-grid,
  .about-credentials-grid,
  .articles-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Elementor generates a per-element selector (.elementor-element.elementor-element-<id>)
   for every container's own flex-direction setting. That selector has HIGHER specificity
   than a plain single class, so the source design's own @media(max-width:768px) rules that
   set "flex-direction: column" on these classes were silently losing to Elementor's row
   setting at every breakpoint, not just desktop. This is the actual root cause of every
   "broken on mobile/tablet" section reported: nav, Who We Serve, About team/hero, Gap
   Assessment/Review layouts, Blog Post's About Advisor block, etc. — all of them explicitly
   set flex_direction:row in Elementor for desktop, and none of the mobile column overrides
   could ever actually win without !important. */
@media (max-width: 768px) {
  .hero-card,
  .how-we-work,
  .featured-article,
  .testimonial-layout,
  .advisors-row,
  .final-cta,
  .cta-form,
  .testimonial-avatar-row,
  .about-cta-inner,
  .split,
  .content-image,
  .cards-row,
  .contact-form-layout,
  .blog-post-layout,
  .about-advisor-content,
  .contact-cards-row,
  .footer-main,
  .footer-bottom-row,
  .radios-row {
    flex-direction: column !important;
  }

  /* nav-right holds the hamburger only at mobile (links/button are display:none), so it
     can stay full width without visually mattering, but keep it column-safe regardless. */
  .navbar .container {
    align-items: center;
  }
}

/* ============ TABLET BREAKPOINT (769px-1024px) ============
   The source design only defines one breakpoint at 768px (mobile). Without a tablet-specific
   breakpoint, iPad-sized viewports were rendering the full desktop layout: 3-4 column grids,
   112px section padding, and tight side-by-side splits all got cramped. This adds sensible
   intermediate adjustments for the 769-1024px range. */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --padding-global: 32px;
    --padding-section-lg: 80px;
  }

  .steps-grid,
  .articles-grid,
  .about-beliefs-grid,
  .about-team-grid,
  .about-credentials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hero-card-content,
  .how-we-work-content {
    padding: 40px !important;
  }

  .content-image,
  .split,
  .contact-form-layout,
  .about-cta-inner,
  .about-advisor-content,
  .testimonial-layout,
  .final-cta {
    gap: 40px !important;
  }

  .advisors-row {
    gap: 32px !important;
  }

  .cards-row {
    flex-wrap: wrap;
  }

  .cards-row .card-featured {
    flex: 1 1 100%;
  }

  .cards-row .card-small {
    flex: 1 1 calc(50% - 16px);
  }

  .blog-post-layout {
    gap: 32px;
  }

  .blog-toc {
    width: 240px;
  }

  .featured-article {
    flex-direction: column;
  }

  .featured-article-image {
    min-height: 260px;
  }
}

/* Deliberate deviation from source styles.css: navbar content is full-bleed edge-to-edge
   on all screen widths (per explicit user request), instead of capped at max-width 1280px
   like the rest of the page sections. */
.navbar .container {
  max-width: none;
  width: 100%;
}

/* The theme/WordPress core inject default margins on block-level typographic tags (p, h1-h6,
   ul, blockquote) with real element-selector specificity, which always beats our zero-specificity
   universal reset (`* { margin: 0 }`) regardless of stylesheet load order. The static design never
   relies on browser default margins — it uses explicit flex `gap` and padding everywhere — so it's
   always correct to zero these out globally. */
body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body ul,
body ol,
body blockquote,
body figure {
  margin: 0;
}

/* Elementor's Image widget wraps <img> in .elementor-widget-image > .elementor-widget-container
   divs that default to height:auto, breaking any "height:100%; object-fit:cover" pattern used
   throughout this design (hero images, avatars, card thumbnails, background images). Force the
   full chain to inherit height so percentage heights correctly reach the <img>. */
body .elementor-widget-image,
body .elementor-widget-image .elementor-widget-container,
body .elementor-widget-image .elementor-widget-container a {
  height: 100%;
  width: 100%;
  display: block;
}

/* Elementor containers add default flex gap/padding via CSS custom properties; our own
   design-system classes always specify exact padding/gap, so neutralize Elementor's defaults
   to prevent double-spacing artifacts. */
.e-con.e-con-full {
  --gap: 0px;
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
}

/* CTA banner guide-download form: real Fluent Forms (id 2, "Subscription Form") embedded via
   the Elementor Fluent Forms widget, restyled to match the source design's .cta-form input
   plus .btn-primary button sitting in one row (see site-extra.css .cta-form / .cta-form input). */
.cta-form-wrapper {
  width: 513px !important;
  max-width: 100% !important;
}

/* Flex items default to min-height:auto/min-width:auto (sized to intrinsic content)
   rather than 0 on the main axis. Chrome is lenient about this in practice; Safari/WebKit
   implements it strictly per spec, so any flex column/row that mixes an image with other
   content (text, buttons) can refuse to shrink to its intended box size there, overflowing
   into a sibling — the likely root cause of every "content invisible/overlapping near an
   image, only on real iPhones, never in Chrome" report so far (hero-actions vs. the hero
   image, how-we-work content vs. its image, team photos vs. bio text). Reset defensively
   across every hero/split image-plus-content pairing site-wide. */
.hero-card > *,
.how-we-work > *,
.about-hero-content > *,
.content-image > *,
.split > * {
  min-width: 0;
  min-height: 0;
}

/* Defensive stacking fix: on some real-device renders the hero image appears to overlap
   the button/CTA content that sits above it in the stacked mobile layout (reported as
   "buttons not visible, image looks like it moved up over them"). No source rule was
   found causing an actual position shift, but forcing the text/button column onto its own
   stacking context above the image guarantees it always paints on top regardless. */
.hero-card-content,
.bh-hero-text {
  position: relative;
  z-index: 2;
}
.hero-card-image {
  position: relative;
  z-index: 1;
}
.cta-fluentform {
  flex: 1 1 auto !important;
  width: 100% !important;
}
.cta-fluentform .ff-t-container {
  width: 100% !important;
}
.cta-fluentform .ff-t-column-1 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}
.cta-fluentform .ff-t-column-2 {
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: fit-content !important;
}
.cta-fluentform .ff-t-column-2 .ff-el-group {
  width: fit-content !important;
}
.cta-fluentform form {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cta-fluentform .ff-el-group {
  margin-bottom: 0 !important;
  flex: 1 1 0;
  min-width: 0;
}
.cta-fluentform .ff-t-column-1 .ff-el-group {
  width: 100% !important;
}
.cta-fluentform .ff-el-group.ff-btn-container,
.cta-fluentform .ff-t-column-2 .ff-el-group {
  flex: 0 0 auto !important;
  width: auto !important;
}
.cta-fluentform .ff-el-form-control {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
  height: auto !important;
  width: 100% !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-white) !important;
  color: rgba(8, 3, 3, 0.6) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cta-fluentform .ff-el-form-control:focus {
  border-color: var(--color-plantation) !important;
}
body .cta-fluentform button.ff-btn-submit {
  background: var(--color-plantation) !important;
  color: #ffffff !important;
  padding: 10px 24px !important;
  border: 1px solid var(--color-plantation) !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  min-width: 0 !important;
  width: auto !important;
  box-shadow: none !important;
}
body .cta-fluentform button.ff-btn-submit:hover {
  background: var(--color-plantation-hover) !important;
}
.cta-fluentform .ff-errors-in-stack,
.cta-fluentform label {
  display: none;
}
@media (max-width: 768px) {
  .cta-fluentform form {
    flex-direction: column;
  }
  .cta-fluentform .ff-t-container {
    flex-direction: column !important;
  }
  .cta-fluentform .ff-t-column-1,
  .cta-fluentform .ff-t-column-2 {
    flex: 1 1 auto !important;
    width: 100% !important;
  }
}