/* AgentUp pages in Elementor: what it takes for native Elementor containers and widgets to take the design's styles
   (design.css, loaded after this file). Scoped to body.au-el.
   - Containers behave like the design's plain <div>s (block, no padding/gap/transition) until a design class gives
     them a layout. These rules have the same weight as design.css, which comes later and so wins.
   - Headings and Text Editor widgets carry the design class on their wrapper; the inner element inherits it.
   - Buttons are Elementor Button widgets with au-btn classes (the design's .btn is kept for the drone's button). */

html body.au-el {
  --kit-widget-spacing: 0px;
  --widgets-spacing: 0px 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
}
html body.au-el [hidden]:not([hidden=until-found i]) { display: none !important; }
/* Lenis scrolls the page itself: the theme's html { scroll-behavior: smooth } would smooth every step a second time
   (heavy, lagging scroll). Lenis' own stylesheet rules, which the design does not load. */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: hidden; }

/* ---------- containers ---------- */
html body.au-el .e-con {
  --display: block; --flex-direction: row; --flex-wrap: nowrap; --align-items: normal; --justify-content: normal; --align-content: normal;
  --gap: 0px 0px; --row-gap: 0px; --column-gap: 0px;
  --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;
  --margin-top: 0px; --margin-bottom: 0px; --margin-block-start: 0px; --margin-block-end: 0px;
  --min-height: 0; --width: 100%; --content-width: 100%; --position: static; --overflow: visible; --z-index: auto;
  display: block; padding: 0; gap: 0; min-width: 0; max-width: none; width: auto; margin: 0; transition: none; text-align: inherit;
}
html body.au-el .elementor-element { transition: none; }
/* low weight (:where), so design classes on a container (.wrap and its max-width / auto margins) win */
html body.au-el :where(.e-con > .elementor-element) { width: auto; max-width: 100%; margin: 0; }

/* decor layers (glows, waves) are placed against their section, as in the design: their widget is no positioning box */
html body.au-el .elementor-widget-au-decor, html body.au-el .elementor-widget-au-decor > .elementor-widget-container { position: static; }

/* stacking above the glyph field (the design's main, header, footer) */
html body.au-el .elementor, html body.au-el #masthead, html body.au-el #colophon { position: relative; z-index: 1; }
html body.au-el #masthead { z-index: 3; }

/* ---------- headings and text: the design class sits on the widget, the inner element takes it over ---------- */
html body.au-el :where(.elementor-heading-title) { line-height: inherit; color: inherit; font-family: inherit; font-weight: inherit; }
html body.au-el :where(.elementor-widget-text-editor) p { margin: 0; }
html body.au-el .elementor-widget-heading.eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; font: inherit; letter-spacing: inherit; white-space: inherit; }
html body.au-el .elementor-widget-heading.eyebrow { display: block; }
/* centred eyebrows (application band): the inner line takes the alignment the design gives the eyebrow */
html body.au-el .elementor-widget-heading.eyebrow .elementor-heading-title { justify-content: inherit; }
html body.au-el .elementor-widget-heading h2.elementor-heading-title { margin-top: 18px; }
html body.au-el .elementor-widget-heading.ar .elementor-heading-title { font: inherit; direction: inherit; text-align: inherit; color: inherit; }
html body.au-el .ft .sm p { color: inherit; font-size: inherit; line-height: inherit; }
html body.au-el .band .p p { font: inherit; color: inherit; }

/* spacing the design wrote inline */
/* Elementor caps widgets at max-width:100% with .elementor.elementor .e-con > .elementor-widget; the design's own caps */
html body.au-el .elementor.elementor .e-con > .elementor-widget.lead { max-width: 62ch; }
html body.au-el .elementor.elementor .hero .e-con > .elementor-widget.lead { max-width: 580px; }
html body.au-el .au-w820 { max-width: 820px; }
html body.au-el .au-eyebrow-soft { color: rgba(255, 255, 255, .85); }
html body.au-el .au-mt28 { margin-top: 28px; }
html body.au-el .au-mt96 { margin-top: 96px; }
html body.au-el .tcard-wrap { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
html body.au-el .top-cta { display: flex; gap: 12px; align-items: center; }
html body.au-el .ehead > .elementor-widget-au-tabs { flex: none; max-width: 100%; min-width: 0; }

/* ---------- buttons (Elementor Button widget, classes au-btn au-btn--primary|secondary au-btn--lg|sm [au-btn--ic]) ---------- */
html body.au-el .au-btn .elementor-button {
  display: inline-flex; align-items: center; gap: 16px; height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  background: none; color: #fff; fill: #fff; font: 400 18px/1.45 var(--sans); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  box-shadow: none; transition: transform .2s ease, box-shadow .2s ease;
}
html body.au-el .au-btn .elementor-button:hover, html body.au-el .au-btn .elementor-button:focus { color: #fff; transform: translateY(-1px); }
html body.au-el .au-btn .elementor-button-content-wrapper { display: contents; }
html body.au-el .au-btn .elementor-button-icon { display: none; }
html body.au-el .au-btn--sm .elementor-button { height: 44px; padding: 0 20px; font-size: 16px; gap: 12px; }
html body.au-el .au-btn--primary .elementor-button { background: linear-gradient(90deg, #5E24F2, #5BB5F1); box-shadow: 0 10px 30px -12px rgba(94, 36, 242, .7); }
html body.au-el .au-btn--secondary .elementor-button { border: 1px solid rgba(255, 255, 255, .45); }
/* the round arrow after the label */
html body.au-el .au-btn--ic .elementor-button { padding-right: 8px; }
html body.au-el .au-btn--sm.au-btn--ic .elementor-button { padding-right: 6px; }
html body.au-el .au-btn--ic .elementor-button::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(1, 62, 129, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html body.au-el .au-btn--secondary.au-btn--ic .elementor-button::after { background-color: rgba(255, 255, 255, .14); }
html body.au-el .au-btn--sm.au-btn--ic .elementor-button::after { width: 32px; height: 32px; }
html body.au-el .band .au-btn { margin-top: 32px; }
html body.au-el.pp-done .band .au-btn--primary .elementor-button, html body.au-el.pp-done .top .au-btn--primary .elementor-button { animation: ppglow 2.2s ease-in-out infinite; }
@media (max-width: 520px) {
  html body.au-el .au-btn--lg .elementor-button { font-size: 16px; padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.au-el.pp-done .band .au-btn--primary .elementor-button, html body.au-el.pp-done .top .au-btn--primary .elementor-button { animation: none; }
}

/* ---------- application page: the Typeform fills the card ---------- */
html body.au-el .ap-card.ap-tf { padding: 0; overflow: hidden; gap: 0; }
html body.au-el .ap-tf [data-tf-widget] { width: 100%; min-height: 560px; }

/* ---------- editing: the header template on its own page (white type on the grey band) ---------- */
html body.au-el.au-template .top { position: relative; background: #475059; }

/* ---------- phones: the five things you leave with (Program) and the support items (The two weeks) take the row
   layout of the Who can join criteria: icon on the left, label, title and text on the right, a line between rows ---------- */
@media (max-width: 760px) {
  html body.au-el ol.path { row-gap: 0; }
  html body.au-el ol.path::before { display: none; }
  html body.au-el ol.path > li.st,
  html body.au-el .after .items > div {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start;
    padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line);
  }
  html body.au-el .after .items { row-gap: 0; }
  html body.au-el ol.path > li.st > .node,
  html body.au-el .after .items > div > svg { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  html body.au-el ol.path > li.st > .node { width: 40px; height: 40px; }
  html body.au-el ol.path > li.st > .node svg { width: 22px; height: 22px; }
  html body.au-el .after .items > div > svg { width: 36px; height: 36px; }
  html body.au-el ol.path > li.st > :not(.node),
  html body.au-el .after .items > div > :not(svg) { grid-column: 2; }
  html body.au-el ol.path > li.st > .lab,
  html body.au-el .after .items > div > .lab { margin-top: 0; }
  html body.au-el ol.path > li.st > .h3,
  html body.au-el ol.path > li.st > .sm,
  html body.au-el .after .items > div > .h3,
  html body.au-el .after .items > div > .sm { margin-top: 8px; }
}

/* ---------- the drone, parked in the corner until it opens the AI chatbot (no flying, talking or catching) ---------- */
html body.au-el .drone.parked { left: auto; top: auto; right: 24px; bottom: 24px; transform: none !important; cursor: default; pointer-events: none; }
html body.au-el .drone.parked .drone-tilt { animation: drone-park 3.2s ease-in-out infinite; }
@keyframes drone-park { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 760px) {
  html body.au-el .drone.parked { right: 12px; bottom: 12px; --ds: .75; }
}
@media (prefers-reduced-motion: reduce) {
  html body.au-el .drone.parked .drone-tilt { animation: none; }
}

/* ---------- the drone opens the AgentUp Assistant (ConnectLoop; agentup.js): the chat's own round launcher is hidden
   while the chat is closed (the widget sets visibility and opacity inline, so it is clipped instead), the drone while
   the chat is open. Without the drone (application page, reduced motion) the launcher shows as usual. ---------- */
html body.au-el.au-chat-drone:not(.au-chat-open) #chat-widget-iframe { clip-path: inset(50%) !important; pointer-events: none !important; }
html body.au-el.au-chat-drone.au-chat-open .drone { opacity: 0; pointer-events: none; }
html body.au-el .drone.parked.chat { pointer-events: auto; cursor: pointer; transition: opacity .2s; }
/* after the widget is ready: its launcher (72px, 36px in from the iframe's bottom-right corner) stays clickable but
   invisible, with the drone centred over it; the greeting bubble and the rest of the iframe stay clipped */
html body.au-el.au-chat-drone.au-chat-pass:not(.au-chat-open) #chat-widget-iframe { filter: opacity(0) !important; clip-path: inset(calc(100% - 108px) 36px 36px calc(100% - 108px)) !important; pointer-events: auto !important; }
html body.au-el.au-chat-pass .drone.parked.chat { right: 24px; bottom: 44px; pointer-events: none; }
html body.au-el.au-chat-pass .drone.parked.chat.hover::after { opacity: 1; }
html body.au-el.au-chat-pass .drone.parked.chat.focus { outline: 2px solid #CE8FFF; outline-offset: 4px; border-radius: 14px; }
html body.au-el .drone.parked.chat.waiting { animation: au-chat-wait 1s ease-in-out infinite; cursor: progress; }
@keyframes au-chat-wait { 50% { opacity: .5; } }
html body.au-el .drone.parked.chat:focus-visible { outline: 2px solid #CE8FFF; outline-offset: 4px; border-radius: 14px; }
html body.au-el .drone.parked.chat::after { content: attr(data-tip); position: absolute; right: 50%; bottom: calc(100% + 6px); transform: translateX(50%); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: #2F353B; color: #fff; font: 500 13px/16px var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s; }
html body.au-el .drone.parked.chat:hover::after, html body.au-el .drone.parked.chat:focus-visible::after { opacity: 1; }

/* ---------- desktop scroll story: once the waves have covered the hero, Explore follows the stats closely instead of
   after the empty lower part of the pinned screen ("Explore the program" right under the stats; was 512px apart) ---------- */
html body.au-el.story-pin .explore { margin-top: calc(-8px - 56vh); }

/* ---------- Questions tab: room between the title and the accordion ---------- */
html body.au-el #faq .elementor-widget-au-faq { margin-top: 48px; }
@media (max-width: 760px) {
  html body.au-el #faq .elementor-widget-au-faq { margin-top: 32px; }
}

/* ---------- language switch (EN / عربي) next to Apply in the header ---------- */
html body.au-el .au-lang .elementor-button { padding: 0 16px; min-width: 52px; justify-content: center; font-family: "IBM Plex Sans Arabic", var(--sans); }
@media (max-width: 760px) {
  html body.au-el .au-lang .elementor-button { height: 38px; padding: 0 12px; font-size: 14px; }
}