/* Oasis shared navigation: identical on every page.
   Visual spec copied from the homepage header. Do not edit per page. */

/* Before a page's content has rendered: show only the dark page + nav (no raw template, no light flash) */
x-dc { display: none !important; }
html:not(:has(#dc-root > *)) { background: #111111 !important; }
html:not(:has(#dc-root > *)) body { background: transparent !important; }
/* Homepage first visit: the intro animation reveals the nav itself */
.intro-pending .onav__shell { opacity: 0; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
::view-transition-group(oasis-nav) { animation: none; }
::view-transition-old(oasis-nav) { display: none; }
::view-transition-new(oasis-nav) { animation: none; }

.onav {
  --nav-k: 1;
  --nav-bg: rgba(255,255,255,.02);
  --nav-grad: linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
  --nav-border: rgba(255,255,255,.14);
  --nav-text: rgb(255,255,255);
  position: fixed; top: 16px; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.onav *, .onav *::before, .onav *::after { box-sizing: border-box; }
.onav a { text-decoration: none; }

.onav__shell {
  pointer-events: auto; width: auto; max-width: 100%;
  view-transition-name: oasis-nav; /* keeps the nav still while pages change (on the shell, not the header, so the glass blur keeps working) */
  background: var(--nav-grad), var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px -14px rgba(0,0,0,.35);
  transition: background-color .25s linear, border-color .25s linear, color .25s linear;
}
.onav__inner { display: flex; align-items: center; gap: 56px; padding: 6px 6px 6px 16px; }

/* Current-page dot: absolutely positioned so it never changes the nav's size or item positions */
.onav__dot {
  position: absolute; left: -12px; top: 50%; margin-top: -2.5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #EC1C24; display: none;
}
[aria-current="page"] > .onav__dot { display: block; }

.onav__logo { position: relative; display: block; height: 34px; flex: none; }
.onav__logo .onav__dot { left: -11px; }
.onav__logo img { height: 34px; width: 63px; display: block; }

.onav__links { display: flex; gap: 44px; font-size: 15px; font-weight: 500; color: var(--nav-text); transition: color .25s linear; }
.onav__links a, .onav__links span[data-soon] { position: relative; color: inherit; transition: opacity .2s; line-height: normal; }
.onav__links a:hover { color: inherit; opacity: .6; }
.onav [data-soon] { cursor: default; }

.onav__cta {
  background: #EC1C24; color: #FFFFFF; font-size: 15px; font-weight: 500;
  padding: 12px 20px; border-radius: 10px; white-space: nowrap;
  display: inline-flex; justify-content: center; line-height: normal;
  transition: background .2s, color .2s, transform .12s;
}
.onav__cta:hover { background: #FFFFFF; color: #EC1C24; }
.onav__cta:active { transform: scale(.96); }

.onav__burger {
  display: none; width: 44px; height: 44px; flex: none; border: 0; border-radius: 10px;
  background: transparent; color: var(--nav-text); cursor: pointer;
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; padding: 0 11px;
}
.onav__burger span { display: block; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s, width .2s; }
.onav__burger span:nth-child(1) { width: 22px; }
.onav__burger span:nth-child(2) { width: 16px; }
.onav__burger span:nth-child(3) { width: 10px; }
.onav[data-open="true"] .onav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.onav[data-open="true"] .onav__burger span:nth-child(2) { opacity: 0; }
.onav[data-open="true"] .onav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 22px; }

.onav__menu { display: none; flex-direction: column; padding: 4px 20px 16px; color: var(--nav-text); }
.onav__menu a, .onav__menu span[data-soon] { position: relative; padding: 14px 0; font-size: 18px; color: inherit; border-top: 1px solid var(--nav-border); }
.onav__menu .onav__dot { left: -12px; }

@media (max-width: 860px) {
  .onav__links { display: none; }
  .onav__burger { display: flex; }
  .onav__shell { width: 100%; }
  .onav__inner { gap: 8px; padding: 8px 8px 8px 14px; }
  .onav__cta { margin-left: auto; padding: 11px 16px; }
  .onav[data-open="true"] .onav__menu { display: flex; }
}

/* ---- Shared floating WhatsApp bubble (same on every page; number +60 16-412 7815) ---- */
.owa {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; align-items: center;
  background: #25D366; color: #07210F; text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 650; font-size: 15px; line-height: normal;
  padding: 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: padding .35s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  view-transition-name: oasis-wa;
}
.owa img { width: 26px; height: 26px; display: block; flex: none; }
.owa__label { display: block; overflow: hidden; white-space: nowrap; max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .35s cubic-bezier(.2,.8,.2,1), opacity .25s, margin .35s; }
.owa:active { transform: scale(.94); }
@media (hover: hover) {
  .owa:hover { background: #FFFFFF; color: #07210F; padding-right: 22px; }
  .owa:hover .owa__label { max-width: 140px; opacity: 1; margin-left: 10px; }
}
@media (max-width: 600px) { .owa { right: 16px; bottom: 16px; } }
.intro-pending .owa { opacity: 0; }
::view-transition-group(oasis-wa) { animation: none; }
::view-transition-old(oasis-wa) { display: none; }
::view-transition-new(oasis-wa) { animation: none; }