/* ==========================================================================
   RACE Chanakya — Elementor adaptations
   Maps the original hand-written DOM/CSS onto Elementor containers & native
   widgets. Loaded after race-site.css and after Elementor's frontend CSS.
   Rules deliberately stay at (0,1,0) specificity (via :where) so the original
   context rules (e.g. `.race-leaders h2`) keep winning.
   ========================================================================== */

/* ---------- Header / footer wrappers: let the sticky nav & fixed ticker behave as body children */
.race-header-wrap,
.race-footer-wrap,
.race-header-wrap > .elementor,
.race-header-wrap > .elementor > .e-con,
.race-footer-wrap > .elementor,
.race-footer-wrap > .elementor > .e-con,
.race-header-wrap .elementor-widget-race-nav,
.race-header-wrap .elementor-widget-race-nav > .elementor-widget-container,
.race-header-wrap .elementor-widget-race-floating-books,
.race-header-wrap .elementor-widget-race-floating-books > .elementor-widget-container,
.race-footer-wrap .elementor-widget-race-ticker,
.race-footer-wrap .elementor-widget-race-ticker > .elementor-widget-container {
  display: contents;
}

/* The original page scrolls natively; Elementor's kit smooth-scroll fights GSAP ScrollTrigger */
html { scroll-behavior: auto !important; }

/* ---------- Containers: neutralise Elementor spacing defaults so the original CSS governs */
.race-theme .e-con {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --kit-widget-spacing: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --content-width: 100%;
}
/* original wrapper-class margins (Elementor's widget spacing is zeroed via --kit-widget-spacing) */
.race-theme .elementor-widget.intro-title { margin: 18px 0; }
.race-theme .elementor-widget.pulse-title { margin: 15px 0 0; }
.race-theme .elementor-widget.race-leaders__eyebrow { margin-bottom: 18px; }
.race-theme .elementor-widget.stories-note { margin-top: 20px; }
.race-theme .elementor-widget.statement-copy { margin: 0; }
.race-theme :where(.elementor-widget-container) { height: auto; }
/* widgets inside row/grid layouts should size to content like the original inline elements */
.race-theme :where(.e-con.statement-top, .e-con.pulse-header, .e-con.race-leaders__heading-row, .e-con.race-leaders__footer, .e-con.footbottom, .e-con.brand, .e-con.beyond-v2-heading, .e-con.video-testimonials-intro, .e-con.race-leaders__intro) > .elementor-widget { width: auto; }
.race-theme :where(.e-con.statement-top, .e-con.flipbook-head, .e-con.video-testimonials-head, .e-con.pulse-header, .e-con.intro-grid, .e-con.footer-grid) > .e-con { width: auto; display: block; }
.race-theme :where(.e-con.statement-top > .e-con:first-child) { max-width: 700px; }

/* Original layout containers rendered as .e-con (flex column by default): force original display modes */
.race-theme :where(.e-con.container, .e-con.section, .e-con.beyond-v2-heading, .e-con.race-leaders__wrap, .e-con.school-pulse, .e-con.image-stage, .e-con.flipbook-intro, .e-con.video-testimonials-intro, .e-con.race-leaders__intro, .e-con.reveal) { display: block; }
.race-theme :where(.e-con.intro-grid, .e-con.flipbook-head, .e-con.video-testimonials-head, .e-con.footer-grid) { display: grid; }
.race-theme :where(.e-con.statement-top, .e-con.ribbon, .e-con.pulse-header, .e-con.race-leaders__heading-row, .e-con.race-leaders__footer, .e-con.footbottom) { flex-direction: row; }
.race-theme :where(.e-con.ribbon-item) { flex-direction: column; width: 25%; }
.race-theme :where(.e-con.image-stage) { display: block; }
/* Chrome only blends a direct child with the stage backdrop, so the blend lives on the widget wrapper */
/* Blend on the <img> exactly like the reference design, not on the widget
   wrapper. Blending the wrapper builds a stacking context around the whole
   widget, which also tints Elementor's selection outline and handles and makes
   the image look unselectable in the editor. */
.race-theme .e-con.image-stage .elementor-widget-image { position: static; height: 100%; width: 100%; }
.race-theme .e-con.image-stage .elementor-widget-image > .elementor-widget-container { height: 100%; }
.race-theme .e-con.image-stage .elementor-widget-image img { height: 100%; width: 100%; object-fit: cover; mix-blend-mode: soft-light; opacity: .9; display: block; }

/* The stage's decorative gradient covers the full image. Left hit-testable it
   sits on top, so a click in the editor selects the container instead of the
   image widget. It is purely visual. */
.race-theme .e-con.image-stage::after { pointer-events: none; }
.race-theme :where(.e-con.image-stage) > .elementor-widget-heading.image-label { position: absolute; z-index: 2; left: 25px; bottom: 25px; width: auto; }
.race-theme :where(.e-con.brand) .elementor-heading-title { color: #fff; font-size: inherit; font-weight: inherit; }

/* ---------- Footer brand.
   In the reference design the footer logo is an <a class="brand"> sitting
   inside .footer, so `.footer a { display:block; margin:9px 0 }` outranks
   `.brand { display:flex }` and the wordmark stacks under the logo. The
   Elementor container is a <div>, so that cascade never fires -- reproduce the
   resulting box here or the footer comes out 35px short. */
.race-theme .e-con.footer-grid .e-con.brand { display: block; margin: 9px 0; }
.race-theme .e-con.footer-grid .e-con.brand .elementor-widget-image { width: 58px; }
.race-theme .e-con.footer-grid .e-con.brand .elementor-widget-image img { width: 58px; height: 58px; border-radius: 12px; display: block; object-fit: contain; background: #fff; }
.race-theme .e-con.footer-grid .e-con.brand .elementor-widget-heading { width: auto; }

.race-theme :where(.e-con.footbottom) .elementor-heading-title { color: inherit; font-size: inherit; font-weight: inherit; }
.race-theme :where(.e-con.race-leaders__footer) .elementor-heading-title { color: #718098; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.race-theme :where(.e-con.beyond-v2-heading) > .elementor-widget-heading.eyebrow { display: inline-flex; }
.race-theme :where(.e-con.ribbon-item) .ribbon-word .elementor-heading-title { font-size: 30px; letter-spacing: -.05em; font-weight: 700; }
.race-theme :where(.e-con.ribbon-item) .ribbon-num .elementor-heading-title { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 900; opacity: .8; }

/* ---------- Native heading widget: Elementor resets line-height/margin on the inner tag; restore the
   original tag rules at (0,1,0) so context rules in race-site.css (0,1,1+) still win. */
.race-theme :where(.elementor-widget-heading .elementor-heading-title) { color: inherit; font-family: inherit; }
.race-theme :where(h2.elementor-heading-title) { font-size: clamp(48px, 7vw, 96px); line-height: .9; letter-spacing: -.065em; margin: 15px 0 22px; font-weight: 700; }
.race-theme :where(h1.elementor-heading-title, h3.elementor-heading-title, div.elementor-heading-title, span.elementor-heading-title, p.elementor-heading-title) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; }
.race-theme :where(h4.elementor-heading-title) { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.race-theme :where(p.elementor-heading-title) { color: var(--muted); }
.race-theme :where(.elementor-widget-heading.eyebrow > .elementor-widget-container) { display: contents; }
.race-theme :where(.elementor-widget-heading.intro-title) { font-weight: 400; }
.race-theme :where(.elementor-widget-heading.intro-title) strong { font-weight: 700; }
.race-theme :where(.elementor-widget-heading.statement-copy) { font-weight: 400; }
.race-theme :where(.elementor-widget-heading.pulse-title) { display: block; }
.race-theme :where(.elementor-widget-heading.race-leaders__eyebrow) { display: block; }

/* ---------- Native text editor: original `p` rules */
.race-theme :where(.elementor-widget-text-editor p) { color: var(--muted); line-height: 1.75; margin: 0 0 1em; }
.race-theme :where(.flipbook-intro .elementor-widget-text-editor p) { font-size: 16px; margin-bottom: 24px; }
.race-theme :where(.video-testimonials-intro .elementor-widget-text-editor p) { font-size: 15px; margin-bottom: 20px; }
.race-theme :where(.race-leaders__intro .elementor-widget-text-editor p) { margin: 0 0 20px; color: #586780; font-size: 16px; line-height: 1.65; }
.race-theme :where(.beyond-v2-heading .elementor-widget-text-editor p) { max-width: 800px; margin: 0 auto; color: #66718a; font-size: 16px; line-height: 1.65; font-weight: 600; }
.race-theme :where(.elementor-widget-text-editor.stories-note) { margin-top: 20px; }
.race-theme :where(.elementor-widget-text-editor.stories-note p) { font-size: 10px; color: #8a91a8; letter-spacing: .05em; margin: 0; }
.race-theme :where(.e-con.footer .elementor-widget-text-editor a) { display: block; font-size: 13px; margin: 9px 0; }

/* ---------- Native button: `.btn` classes sit on the widget wrapper, styles land on the <a> */
.race-theme .elementor-widget-button.btn,
.race-theme .elementor-widget-button.pulse-view,
.race-theme .elementor-widget-button.race-leaders__link { display: block !important; width: auto; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: inherit; }
.race-theme .elementor-widget-button.btn:hover { transform: none; }
.race-theme .elementor-widget-button .elementor-button-wrapper { display: inline-block; }
.race-theme .elementor-widget-button .elementor-button-content-wrapper { gap: 0; }
.race-theme .elementor-widget-button.btn .elementor-button { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 999px; font-weight: 850; font-size: 13px; border: 1px solid rgba(3,36,101,.12); transition: .3s; font-family: inherit; line-height: 1.2; background: none; color: inherit; }
.race-theme .elementor-widget-button.btn .elementor-button:hover { transform: translateY(-3px); }
.race-theme .elementor-widget-button.btn-dark .elementor-button { background: var(--brand-navy, var(--navy)); color: #fff; }
.race-theme .elementor-widget-button.btn-white .elementor-button { background: #fff; color: var(--brand-navy, var(--navy)); }
.race-theme .elementor-widget-button.btn-gold .elementor-button { background: var(--brand-gold, var(--gold)); color: var(--brand-dark, var(--navy)); }
.race-theme .elementor-widget-button.pulse-view .elementor-button { background: #032465; color: #fff; padding: 16px 24px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: .5px; font-family: inherit; line-height: 1.2; transition: .25s; }
.race-theme .elementor-widget-button.pulse-view .elementor-button:hover { background: #FAD80B; color: #032465; }
.race-theme .elementor-widget-button.race-leaders__link .elementor-button { display: inline-flex; align-items: center; gap: 10px; color: #032465; background: none; font-size: 12px; font-weight: 900; border-bottom: 1px solid rgba(3,36,101,.25); padding: 0 0 7px; border-radius: 0; font-family: inherit; line-height: 1.2; transition: .25s; }
.race-theme .elementor-widget-button.race-leaders__link .elementor-button:hover { color: #E90A0C; border-color: #E90A0C; }
/* Elementor wraps button text in two spans, so the <a>'s own flex gap never
   lands between the label and the arrow. Keep the label inline and space the
   arrow with a margin instead -- nesting another flex box here measured 53px
   wider than the reference link. */
.race-theme .elementor-widget-button.race-leaders__link .elementor-button .elementor-button-content-wrapper { display: inline; font-size: inherit; }
/* The reference rule `.race-leaders__link span { font-size:16px }` was written
   for the bare arrow span. Elementor wraps the whole label in spans too, so the
   label inherited 16px and ran 53px wide. Pin the label back to the link size
   and let only the arrow scale up. */
.race-theme .elementor-widget-button.race-leaders__link .elementor-button .elementor-button-text { display: inline; font-size: inherit; }
.race-theme .elementor-widget-button.race-leaders__link .elementor-button .elementor-button-text > span { margin-left: 10px; }

/* ---------- News item links (school pulse) */
.race-theme .news-item__link { display: block; color: inherit; }

/* ---------- Editor: keep everything visible while editing */
.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .race-floating-books { position: absolute; }
.elementor-editor-active .race-fixed-ticker { position: sticky; }

/* ---------- Classic (non-Elementor) pages */
.race-classic__title { font-size: clamp(44px, 6vw, 84px); line-height: .9; letter-spacing: -.06em; margin: 15px 0 22px; }
.race-classic__content { max-width: 820px; }
.race-classic__content img { border-radius: 24px; }
.race-classic__thumb { height: 420px; margin-bottom: 30px; }
.race-classic__list { border-top: 1px solid #e0e3e9; }
.race-classic__item h3 a { color: inherit; }

/* ---------- Responsive parity for the grid/flex containers above */
/* Elementor writes --flex-direction per element at (0,2,0), so the responsive column stacks need real specificity here. */
@media (max-width: 1100px) {
  .race-theme .e-con.intro-grid { grid-template-columns: 1fr; }
  .race-theme .e-con.statement-top,
  .race-theme .e-con.race-leaders__heading-row,
  .race-theme .e-con.race-leaders__footer { flex-direction: column; align-items: flex-start; }
  .race-theme .e-con.footer-grid { grid-template-columns: 1fr 1fr; }
  .race-theme .e-con.pulse-header { display: block; }
  .race-theme .e-con.race-leaders__footer { gap: 8px; }
}
@media (max-width: 767px) {
  .race-theme .e-con.footer-grid { grid-template-columns: 1fr; }
  .race-theme .e-con.footbottom { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .race-theme .e-con.flipbook-head { display: block; }
  .race-theme .e-con.brand { flex-direction: row; }
}

/* ---------- Elementor forces `img{height:auto}` — restore full-bleed images from the original */
.race-theme .elementor .rc-curtain-image,
.race-theme .elementor .featured-event-image,
.race-theme .elementor .race-leader__image img,
.race-theme .elementor .image-stage img,
.race-theme .elementor .poker-card__image img,
.race-theme .elementor .race-mobile-card__visual img,
.race-theme .elementor .nav .brand img,
.race-theme .elementor .footer .brand img { height: 100%; }
.race-theme .elementor .nav .brand img { height: 58px; }
.race-theme .elementor .race-mobile-card__visual img { height: 230px; }
.race-theme .elementor .parent-video-media video { width: 100%; height: 100%; }

/* ---------- School Pulse kicker bar (original markup used an <i>) */
.race-theme .elementor-widget-heading.pulse-kicker .elementor-heading-title { display: flex; align-items: center; gap: 12px; }
.race-theme .elementor-widget-heading.pulse-kicker .elementor-heading-title::before { content: ""; width: 38px; height: 3px; display: block; background: linear-gradient(90deg, #123A7A, #FAD80B); }