/*
 * Wolke header. Values are the design's measurements (Homepage Build.html, "HEADER / MEGA MENU"
 * and "MOBILE HEADER"), converted from Tailwind. Scoped to .wk-root; the reset that keeps the theme
 * and the old Elementor kit out is in base.css.
 *
 * Logical properties throughout, so dir="rtl" mirrors the header without a second stylesheet.
 */

/* hello-elementor-child/style.css fixes every <header> for the old design, which would pin the
   utility bar too. Only the bar inside is fixed; the Elementor wrapper scrolls with the page. */
header.elementor-location-header:has([data-wk-header]) { position: relative; top: auto; inset-inline: auto; z-index: 999; }


/* page blur behind an open mega panel or drawer: blur 24px, rgba(0,0,0,.16) */
.wk-root .wk-blur {
	position: fixed; inset: 0; z-index: 997;
	background: rgba(0, 0, 0, .16);
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
body.wk-menu-open .wk-root .wk-blur,
body.wk-mnav-open .wk-root .wk-blur { opacity: 1; }

/* ---------------------------------------------------------------- utility bar: 40px, #040813 */
.wk-root .wk-util { position: relative; z-index: 998; background: var(--ok-util); color: #fff; }
.wk-root .wk-util__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; font-size: 12px; }
.wk-root .wk-util__promo { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-root .wk-util__cta { margin-inline-start: 12px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.wk-root .wk-util__cta:hover { text-decoration: underline; }
.wk-root .wk-util__actions { display: none; flex: none; align-items: center; gap: 32px; }
.wk-root .wk-util__link,
.wk-root .wk-util__region { display: flex; align-items: center; gap: 8px; }
.wk-root .wk-util__actions .wk-util__link svg,
.wk-root .wk-util__region svg { width: 15px; height: 15px; }
.wk-root .wk-util__link:hover { opacity: .75; }

@media (min-width: 1024px) {
	.wk-root .wk-util__inner { font-size: 14px; }
	.wk-root .wk-util__actions { display: flex; }
}
@media (max-width: 1023px) {
	/* M2: the bar scrolls sideways rather than clip "Watch the demo" */
	.wk-root .wk-util__promo { overflow-x: auto; text-overflow: clip; scrollbar-width: none; }
	.wk-root .wk-util__promo::-webkit-scrollbar { display: none; }
	.wk-root .wk-util__promo > * { flex: none; }
}
/* Phones: the promo sentence goes, so "Book a demo →" is never cut (Karen, 7 October 2026) */
@media (max-width: 639px) {
	.wk-root .wk-util__promo > span:first-child { display: none; }
}

/* ---------------------------------------------------------------- floating bar */
/* top follows the utility bar up, then locks (header.js sets --wk-top) */
.wk-root .wk-header { position: fixed; inset-inline: 0; top: var(--wk-top, 40px); z-index: 1000; pointer-events: none; }
.wk-root .wk-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.wk-root .wk-header__row > *,
.wk-root .wk-mnav,
.wk-root .wk-mega { pointer-events: auto; }

/* left pill: glass, radius 40 */
.wk-root .wk-nav-pill {
	display: flex; align-items: center; color: #fff;
	background: var(--ok-glass);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	border-radius: 32px; height: 64px; padding: 0 20px; flex: none;
}
.wk-root .wk-logo { display: flex; align-items: center; color: #fff; }
.wk-root .wk-logo__mark { width: 32px; height: 32px; }
.wk-root .wk-logo__lockup { width: 89px; height: 28px; display: none; } /* 8 October 2026 lockup: 28 tall, desktop and phone */
.wk-root .wk-logo__img { height: 28px; width: auto; }
@media (min-width: 400px) {
	.wk-root .wk-logo__mark { display: none; }
	.wk-root .wk-logo__lockup { display: block; }
}

.wk-root .wk-nav { display: none; align-items: center; column-gap: 10px; }
/* nav links: 16/22.4 500 .2px, pad 4 12, radius 15, blue on hover and while open */
.wk-root .wk-nav-link {
	display: block; padding: 4px 12px; border-radius: 15px;
	font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: .2px; color: #fff;
	transition: background-color .2s ease, color .2s ease;
}
.wk-root .wk-nav-link:hover,
.wk-root .wk-nav-link:focus,
.wk-root .wk-nav-link[aria-expanded="true"] { background: var(--ok-blue); color: var(--ok-cream); border-radius: 15px; }

/* right pill: 227 x 80, radius 40, 12px inner pad */
.wk-root .wk-cta-pill {
	display: none; align-items: center; color: #fff;
	background: var(--ok-glass);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	border-radius: 40px; padding: 12px;
}
.wk-root .wk-cta-btn {
	height: 56px; padding: 18px 16px; border-radius: 30px; white-space: nowrap; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: .2px;
	transition: flex-basis .6s var(--ease-out), flex-grow .6s var(--ease-out), flex-shrink .6s var(--ease-out), opacity .6s var(--ease-out), padding .6s var(--ease-out);
}
.wk-root .wk-cta-ghost { flex: 0 0 auto; color: #fff; }
.wk-root .wk-cta-primary,
.wk-root .wk-cta-primary:hover { flex: 0 0 auto; color: var(--ok-cream); background: var(--ok-blue); }
/* Hovering the primary collapses the ghost and grows the primary to fill the pill (0.6s).
   The design triggers this on any hover over the pill, which pulls "Plans" out from under the
   pointer so it can never be clicked with a mouse. Triggering from the primary keeps the motion. */
.wk-root .wk-cta-pill:has(.wk-cta-primary:hover) .wk-cta-ghost { flex: 0 0 0; opacity: 0; padding-inline: 0; }
.wk-root .wk-cta-pill:has(.wk-cta-primary:hover) .wk-cta-primary { flex: 1 1 100%; }
.wk-root .wk-cta-ghost:hover { color: #fff; opacity: .75; }

@media (min-width: 1024px) {
	.wk-root .wk-header__row { padding-top: 32px; }
	/* the pills bleed 24px so the logo and the button text land on the 64px gutter */
	/* column-gap 22 + the items' 12px padding: 34px from "Wolke" to "Platform", as between the items */
	.wk-root .wk-nav-pill { height: 80px; border-radius: 40px; padding-inline: 24px; column-gap: 22px; margin-inline-start: -24px; }
	.wk-root .wk-logo__mark { display: none; }
	.wk-root .wk-logo__lockup { display: block; }
	.wk-root .wk-logo__img { height: 28px; }
	.wk-root .wk-nav { display: flex; }
	.wk-root .wk-cta-pill { display: flex; height: 80px; width: 244px; flex: none; margin-inline-end: -24px; }
}

/* ---------------------------------------------------------------- mobile action pill */
/* closed: a 64px circular toggle; open: grows to 176px, revealing search and account */
.wk-root .wk-mobile-actions {
	display: flex; align-items: center; flex: none; height: 64px; border-radius: 40px; padding: 0; color: #fff;
	background: var(--ok-glass);
	-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
	transition: padding .3s var(--ease-out);
}
.wk-root .wk-m-icon {
	width: 0; height: 44px; opacity: 0; overflow: hidden; pointer-events: none;
	display: grid; place-items: center; color: #fff; border-radius: 22px;
	transition: width .3s var(--ease-out), opacity .25s ease;
}
.wk-root .wk-m-toggle { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 32px; color: #fff; transition: background-color .25s ease; }
.wk-root .wk-m-toggle .wk-i-close { display: none; }
body.wk-mnav-open .wk-root .wk-mobile-actions { padding-inline-start: 8px; }
body.wk-mnav-open .wk-root .wk-m-icon { width: 48px; opacity: 1; pointer-events: auto; }
body.wk-mnav-open .wk-root .wk-m-toggle { background: #000; }
body.wk-mnav-open .wk-root .wk-m-toggle .wk-i-burger { display: none; }
body.wk-mnav-open .wk-root .wk-m-toggle .wk-i-close { display: block; }
/* the logo collapses to the symbol while the drawer is open */
body.wk-mnav-open .wk-root .wk-nav-pill { width: 64px; padding: 0; justify-content: center; }
body.wk-mnav-open .wk-root .wk-logo__lockup { display: none; }
body.wk-mnav-open .wk-root .wk-logo__mark { display: block; }
@media (min-width: 1024px) {
	.wk-root .wk-mobile-actions { display: none; }
}

/* ---------------------------------------------------------------- mobile drawer */
/* white, radius 24, 16px gutters, 24px padding. Two layers; level 2 slides in from +100% over
   .4s and the box height animates between them. */
.wk-root .wk-mnav { position: absolute; inset-inline: 0; top: 96px; padding-inline: 16px; }
.wk-root .wk-mnav[hidden] { display: none; }
.wk-root .wk-mnav__box {
	position: relative; overflow: hidden; background: #fff; border-radius: 24px; height: 0;
	box-shadow: 0 25px 60px -20px rgba(20, 10, 60, .4);
	transition: height .4s var(--ease-out);
}
.wk-root .wk-mnav__layer {
	position: absolute; top: 0; inset-inline-start: 0; width: 100%; max-height: 100%; padding: 24px;
	background: #fff; overflow-y: auto; overscroll-behavior: contain;
	transition: transform .4s var(--ease-out), opacity .3s ease;
}
.wk-root .wk-mnav__layer--sub { transform: translateX(100%); }
/* Each layer is its own stack, level 2 above level 1: the buttons' tap areas carry z-index 1 (zoom.css)
   and otherwise showed, and took taps, through level 2. */
.wk-root .wk-mnav__layer { z-index: 0; }
.wk-root .wk-mnav__layer--sub { z-index: 1; }
[dir="rtl"] .wk-root .wk-mnav__layer--sub { transform: translateX(-100%); }
.wk-root .wk-mnav__box.is-sub .wk-mnav__layer--sub { transform: translateX(0); }

.wk-root .wk-mnav__item {
	display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px;
	padding: 14px 0; font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ok-ink); text-align: start;
}
.wk-root .wk-mnav__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
/* 16px side padding and no wrap (spec, section 1); sections.css's .wk-btn loads later and set 32px */
.wk-root .wk-mnav__ctas .wk-btn { padding-inline: 16px; white-space: nowrap; }
.wk-root .wk-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
	border-radius: 6px; padding: 12px 32px; font-size: 16px; line-height: 24px; font-weight: 500;
	transition: background-color .2s ease, color .2s ease;
}
.wk-root .wk-btn--pill { border-radius: 64px; padding-inline: 16px; }
.wk-root .wk-btn--dark,
.wk-root .wk-btn--dark:hover { background: var(--ok-ink); color: var(--ok-cream); }
.wk-root .wk-btn--dark:hover { background: #000; }
.wk-root .wk-btn--outline { border: 1px solid var(--ok-ink); color: var(--ok-ink); }
.wk-root .wk-btn--outline:hover { background: var(--ok-ink); color: var(--ok-cream); }

.wk-root .wk-mnav__bottom { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.wk-root .wk-mnav__bottom-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; font-size: 14px; line-height: 20px; color: var(--ok-ink); text-align: center; }
.wk-root .wk-mnav__bottom-item + .wk-mnav__bottom-item { border-inline-start: 1px solid #e6e6e6; }

.wk-root .wk-mnav__back { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--ok-ink); }
.wk-root .wk-mnav__sub[hidden] { display: none; }
.wk-root .wk-mnav__title { margin-top: 20px; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ok-ink); }
.wk-root .wk-mnav__desc { margin-top: 8px; font-size: 16px; line-height: 22.4px; color: #555; }
.wk-root .wk-mnav__quick { margin-top: 16px; }
.wk-root .wk-mnav__sub .wk-rule { margin-block: 16px; }
.wk-root .wk-mnav__h { padding: 12px 0; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ok-ink); }
.wk-root .wk-mnav__link { display: block; padding: 11px 0; font-size: 16px; line-height: 22.4px; color: #555; }
.wk-root .wk-mnav__link--strong { font-weight: 500; }
.wk-root .wk-mnav__link[aria-current="page"] { color: var(--ok-blue); }
/* menu v2 (design/changes/1 Header and menu, 8 October 2026): paragraph, semibold headings, 15px links */
.wk-root .wk-mnav__desc { font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.wk-root .wk-mnav__h { font-weight: 600; }
.wk-root .wk-mnav__link { font-size: 15px; }
.wk-root .wk-mnav__cov { padding-bottom: 8px; }
.wk-root .wk-mnav__cov-h { padding: 12px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ok-ink); }
.wk-root .wk-mnav__cov-region,
.wk-root .wk-mega__cov-region { margin: 12px 0 2px; font-size: 11.5px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #6B665F; }
.wk-root .wk-mnav__cov-countries,
.wk-root .wk-mega__cov-countries { margin: 0; font-size: 13.5px; line-height: 1.5; color: #4A4640; }

@media (min-width: 1024px) {
	.wk-root .wk-mnav { display: none !important; }
}

/* ---------------------------------------------------------------- mega panels */
/* 1440 max, radius 16, shadow 0 4 12 rgba(0,0,0,.1), 64px pad, 26px gap. Closed uses
   visibility:hidden so the links leave the tab order, not just opacity. */
.wk-root .wk-mega {
	position: absolute; inset-inline: 0; top: 144px; display: none;
	opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.wk-root .wk-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.wk-root .wk-mega.is-open .wk-mega__panel { pointer-events: auto; }
@media (min-width: 1024px) {
	.wk-root .wk-mega { display: block; }
}
.wk-root .wk-mega__panel[hidden] { display: none !important; }
.wk-root .wk-mega__panel {
	width: 100%; max-width: var(--grid-max); margin-inline: auto;
	display: flex; gap: 26px; padding: 64px;
	background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	max-height: calc(100vh - 200px); overflow-y: auto; overscroll-behavior: contain;
}
.wk-root .wk-mega__col { flex: 1 0 0; display: flex; flex-direction: column; gap: 16px; }
.wk-root .wk-mega__col--main { padding-inline-end: 24px; gap: 64px; }
.wk-root .wk-mega__title { font-size: 32px; line-height: 40px; font-weight: 400; letter-spacing: -.16px; color: var(--ok-ink); }
.wk-root .wk-mega__desc { margin-top: 12px; max-width: 293px; font-size: 16px; line-height: 22.4px; letter-spacing: .2px; color: var(--ok-ink); }
.wk-root .wk-mega__h { font-size: 16px; line-height: 22.4px; font-weight: 600; letter-spacing: .2px; color: var(--ok-ink); }
/* the rail's paragraph is plain text, not a link (menu v2, 8 October 2026) */
.wk-root .wk-mega__para { margin-top: 14px; max-width: 300px; font-size: 15px; line-height: 1.6; color: #4A4640; text-wrap: pretty; }
.wk-root .wk-mega__cov-h { margin: 0 0 4px; font-size: 16px; line-height: 22.4px; font-weight: 600; color: var(--ok-ink); }
.wk-root .wk-mega__list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.wk-root .wk-mega__list--quick { margin-top: 48px; }
.wk-root .wk-mega__list li { display: flex; align-items: center; gap: 10px; min-height: 24px; } /* the build's rows: 24px line + 12px gap = 36 */
.wk-root .wk-mega__section + .wk-mega__section { margin-top: 24px; }
.wk-root .wk-menu-link { font-size: 15px; line-height: 21px; letter-spacing: .2px; color: var(--ok-ink); transition: color .15s ease; }
/* Information items: warm grey text, no hover, not a link (navigation spec, section 3). */
.wk-root .wk-menu-info,
.wk-root .wk-mnav__link.wk-menu-info { color: #6B665F; cursor: default; }
.wk-root .wk-menu-link:hover,
.wk-root .wk-menu-link:focus,
.wk-root .wk-menu-link[aria-current="page"] { color: var(--ok-blue); }
.wk-root .wk-badge { border-radius: 6px; background: #E7EFFC; padding: 3px 8px; font-size: 13px; font-weight: 500; color: var(--ok-blue); }

.wk-root .wk-feature {
	display: block; border-radius: 16px; padding: 24px; color: #fff;
	/* purple only, no black (Navigation Spec, 5 October 2026) */
	background: linear-gradient(150deg, #8B6CF6 0%, #6A3FF0 55%, #5019E6 100%);
	transition: transform .2s ease;
}
.wk-root .wk-feature--alt { background: linear-gradient(160deg, #9479F7 0%, #6A3FF0 50%, #4A1FC8 100%); }
.wk-root .wk-feature:hover { color: #fff; transform: translateY(-4px); }
.wk-root .wk-feature__title { display: block; font-size: 24px; line-height: 32px; }
.wk-root .wk-feature__desc { display: block; margin-top: 8px; font-size: 16px; line-height: 22.4px; letter-spacing: .2px; color: rgba(255, 255, 255, .9); }

/* ---------------------------------------------------------------- search */
.wk-root .wk-search { position: fixed; inset-inline: 0; top: 0; z-index: 1001; padding: 16px var(--gutter); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.wk-root .wk-search[hidden] { display: none; }
.wk-root .wk-search__form { display: flex; align-items: center; gap: 12px; max-width: var(--content-max); margin-inline: auto; color: var(--ok-ink); }
html .wk-root .wk-search__input {
	flex: 1; min-width: 0; height: 48px; border: 0; border-bottom: 1px solid var(--ok-rule); border-radius: 0;
	background: transparent; padding: 0 4px; font: 400 16px/24px var(--ok-font); color: var(--ok-ink); box-shadow: none; outline-offset: 0;
}
.wk-root .wk-search__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; }
.wk-root .wk-search__close .wk-i-close { display: block; }
body.admin-bar .wk-root .wk-search { top: 32px; }
@media (max-width: 782px) { body.admin-bar .wk-root .wk-search { top: 46px; } }

/* ---------------------------------------------------------------- mobile behaviour */
@media (max-width: 1023px) {
	/* M1: pills hide on scroll down and come back on scroll up */
	.wk-root .wk-header { transition: transform .28s var(--ease-out); will-change: transform; }
	body.wk-nav-hidden .wk-root .wk-header { transform: translateY(-140%); }
	body.wk-mnav-open .wk-root .wk-header { transform: none; }
	:target, [id] { scroll-margin-top: 124px; }
}

@media (prefers-reduced-motion: reduce) {
	.wk-root *,
	.wk-root .wk-header { transition: none !important; }
	.wk-root .wk-feature:hover { transform: none; }
}