/* ---------------------------------------------------------------------------
   Elementor ↔ Webflow reconciliation.

   The problem this solves:
   Elementor's kit emits widget rules like

       .elementor-widget-heading .elementor-heading-title { color: ...; font-family: ... }

   at specificity (0,2,0), which outranks the ported Webflow base rules such as
   `h1 { ... }` at (0,0,1). Left alone, every heading renders in Elementor's
   global colour and font instead of the design's.

   Rather than fight that with !important, each rule below restates the ORIGINAL
   Webflow declarations — referencing the very same custom properties defined in
   webflow.css — at a specificity that beats Elementor's. Adding the element
   type (`h1.elementor-heading-title`) takes it to (0,2,1), which is the minimum
   needed. If Elementor's own selectors change in a future release, these are the
   rules to revisit.

   Load order matters: this file is enqueued after webflow.css.
   --------------------------------------------------------------------------- */

/* --- Headings ------------------------------------------------------------ */

.elementor-widget-heading h1.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h1--h1-font-size);
	line-height: var(--_typography---h1--h1-line-height);
	font-weight: var(--_typography---h1--h1-font-weight);
	letter-spacing: var(--_typography---h1--h1-letter-spacing);
	color: var(--_theme---text--primary);
	margin-top: var(--_layout---spacing--none);
	margin-bottom: var(--_layout---spacing--none);
}

.elementor-widget-heading h2.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h2--h2-font-size);
	line-height: var(--_typography---h2--h2-line-height);
	font-weight: var(--_typography---h2--h2-font-weight);
	letter-spacing: var(--_typography---h2--h2-letter-spacing);
	color: var(--_theme---text--primary);
	margin-top: var(--_layout---spacing--none);
	margin-bottom: var(--_layout---spacing--none);
}

.elementor-widget-heading h3.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h3--h3-font-size);
	line-height: var(--_typography---h3--h3-line-height);
	font-weight: var(--_typography---h3--h3-font-weight);
	letter-spacing: var(--_typography---h3--h3-letter-spacing);
	color: var(--_theme---text--primary);
	margin-top: var(--_layout---spacing--none);
	margin-bottom: var(--_layout---spacing--none);
}

.elementor-widget-heading h4.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h4--h4-font-size);
	line-height: var(--_typography---h4--h4-line-height);
	font-weight: var(--_typography---h4--h4-font-weight);
	letter-spacing: var(--_typography---h4--h4-letter-spacing);
	color: var(--_theme---text--primary);
	margin-top: var(--_layout---spacing--none);
	margin-bottom: var(--_layout---spacing--none);
}

.elementor-widget-heading h5.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h5--h5-font-size);
	line-height: var(--_typography---h5--h5-line-height);
	font-weight: var(--_typography---h5--h5-font-weight);
	letter-spacing: var(--_typography---h5--h5-letter-spacing);
	color: var(--_theme---text--primary);
}

.elementor-widget-heading h6.elementor-heading-title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h6--h6-font-size);
	line-height: var(--_typography---h6--h6-line-height);
	font-weight: var(--_typography---h6--h6-font-weight);
	letter-spacing: var(--_typography---h6--h6-letter-spacing);
	color: var(--_theme---text--primary);
}

/* The design's utility classes sit on the Elementor widget WRAPPER, not on the
   heading itself, so weight/alignment overrides need to reach one level in. */
.elementor-widget-heading.text-weight-normal h1.elementor-heading-title,
.elementor-widget-heading.text-weight-normal h2.elementor-heading-title,
.elementor-widget-heading.text-weight-normal h3.elementor-heading-title {
	font-weight: var(--font-weight--normal);
}

.elementor-widget-heading.text-weight-xbold h1.elementor-heading-title,
.elementor-widget-heading.text-weight-xbold h2.elementor-heading-title,
.elementor-widget-heading.text-weight-xbold h3.elementor-heading-title {
	font-weight: var(--font-weight--xbold);
}

/* --- Body copy ----------------------------------------------------------- */

.elementor-widget-text-editor {
	font-family: var(--font-family--body);
	font-size: var(--_typography---body--body-font-size);
	line-height: var(--_typography---body--body-line-height);
	font-weight: var(--_typography---body--body-font-weight);
	letter-spacing: var(--_typography---body--body-letter-spacing);
	color: var(--_theme---text--primary);
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* --- Buttons ------------------------------------------------------------- */

/* No hand-written button styling here on purpose.

   An earlier version restated the design's button rules at this level, which
   double-styled them: build_css.py already forwards `.button` from the widget
   wrapper onto the inner `<a class="elementor-button">`, so the wrapper AND the
   anchor were each painting a button — measured 210x75 against the original's
   155x54. The generated forwarding is the single source of truth; the only
   thing needed here is to stop Elementor's own defaults leaking through. */
.elementor-widget-button .elementor-button {
	/* Elementor ships its own padding/size classes; the forwarded design rules
	   outrank them, but these are not covered by the original sheet and would
	   otherwise show through. `line-height: 1` is Elementor's default and made
	   the button 44px tall against the original's 54px — the design inherits
	   the body line-height instead. */
	border: none;
	text-decoration: none;
	line-height: var(--_typography---body--body-line-height);
}

/* Elementor pads the button's own wrapper as well, which added height around
   every CTA and threw the surrounding rhythm out. */
.elementor-widget-button {
	padding: 0;
}

/* --- Containers ---------------------------------------------------------- */

/*
   THE IMPORTANT ONE — read the specificity note before changing anything here.

   Elementor renders every container as `display:flex; flex-direction:column`
   via single-class rules (.e-con, .e-flex). In the original these elements are
   ordinary blocks; Webflow sets display explicitly only where a component needs
   flex (.navbar2_menu, .section_hero, the grids). Elementor's default winning
   re-flows the whole page — the visible symptom was the header menu stacking
   vertically instead of sitting in a row.

   Three rules have to be ordered by weight, not by load order alone:

     Elementor    .e-con                      (0,1,0)
     THIS RULE    :where(.elementor) .e-con   (0,1,0)  — later, so it wins
     Ported CSS   .elementor .navbar2_menu    (0,2,0)  — wins over both

   `:where()` keeps `.elementor` from adding weight, so this lands level with
   Elementor and beats it on order, while still losing to every ported rule
   (build_css.py prefixes those to (0,2,0) precisely so they sit above this).

   An earlier attempt used :where() around the WHOLE selector, giving (0,0,0).
   That was too weak — it lost to Elementor as well as to Webflow, which is the
   opposite of what is wanted.
*/
/* SCOPED TO THE PAGE BODY ONLY.
   The header and footer were rebuilt natively in Elementor, where containers are
   meant to be flex and the layout comes from the UI. Applying the block default
   there silently disabled it: a container could read `flex-direction: row` in the
   panel and still stack, because display:block makes flex-direction meaningless.
   That is what left the rebuilt header stacked in a column.

   Only documents of type wp-page (the transpiled body) get the block default. */
:where(.elementor[data-elementor-type="wp-page"]) .e-con,
:where(.elementor[data-elementor-type="wp-page"]) .e-con-inner {
	display: block;
	padding: 0;
	max-width: none;
	min-height: 0;
	width: auto;
}

/* Elementor's container variables, reset.

   These need (0,2,0) — NOT the weaker :where() form used above — because
   Elementor declares `--flex-direction: column` on `.e-con.e-flex`, a two-class
   selector. A (0,1,0) override loses to it, which left every flex component
   (the header menu most visibly) stacking vertically even after the display fix.

   Raising these to (0,2,0) is safe in a way the `display` rule above is not:
   the ported sheet never sets these variables, so there is nothing to lose to.
   Webflow's explicit `flex-direction: column` declarations still win, because
   they are real properties at (0,2,0) and load after Elementor. */
.elementor[data-elementor-type="wp-page"] .e-con {
	--flex-direction: row;
	/* Container gap. This build of Elementor applies it as
	     .elementor-element:where(.e-con-full, .elementor-widget) {
	         gap: var(--row-gap) var(--column-gap)
	     }
	   with the Kit setting both to 20px — NOT via --gap or --widgets-spacing,
	   which are the obvious-looking names and are why two earlier attempts had
	   no effect. A stray 20px gap on every ungapped container added +40px to the
	   3-step feature section alone.

	   All four names are zeroed so this keeps working if Elementor renames them
	   again. The design's own gap rules (.grid-3cols, .section_weeks-card, …)
	   still win: they declare gap directly at (0,2,0). */
	--row-gap: 0px;
	--column-gap: 0px;
	--widgets-spacing: 0px;
	--gap: 0px;
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	--min-height: initial;
	--width: auto;
	--content-width: none;
}

/* Images inside the rebuild should behave like Webflow's, not Elementor's. */
.elementor-widget-image img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

/* NOTE: do NOT add `max-width: 100%` to .elementor-widget-image here.
   It was tried, and it silently defeated the whole point of setting
   _element_custom_width: Elementor emits `max-width: <the design value>` on the
   widget, and a blanket 100% overrode it, collapsing the instructor photos to
   their flex shrink width (232px against 344px) and costing the team section
   231px. Elementor already caps un-sized widgets at 100% through its own
   `.e-con > .e-con-inner > .elementor-widget` rule, so nothing here is needed. */