/* Shared theme-aware navbar presentation for USURAL navigation variants. */

:root {
  --navbar-height: 84px;
  --navbar-z-index: 2000;

  --nav-black: #000000;
  --nav-white: #ffffff;
  --nav-text-dark: #111111;
  --nav-accent: #002fa7;
}

/* ----------------------------------------
   NAVBAR HEIGHT
---------------------------------------- */

body.usural-v2 {
  --navbar-height: var(--v2-nav-height, 84px);
}

body.journal-index,
body.journal-article {
  --navbar-height: clamp(72px, 7vw, 92px);
}

@media screen and (max-width: 760px) {
  body.usural-v2,
  body.journal-index,
  body.journal-article {
    --navbar-height: 72px;
  }
}

/* Offset page content because navbar is fixed */
body:has(> .v2-nav),
body:has(.section-header.var-1) {
  padding-top: var(--navbar-height);
}

/* ----------------------------------------
   FIXED NAVBAR
---------------------------------------- */

.section-header.var-1,
.v2-nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  background-image: none;

  isolation: isolate;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  z-index: var(--navbar-z-index);

  mix-blend-mode: normal;
  opacity: 1;
}

/* ----------------------------------------
   DEFAULT NAVBAR VARIABLES
---------------------------------------- */

.section-header.var-1,
.navbar-content,
.v2-nav {
  --nav-bg: var(--nav-white);
  --nav-text: var(--nav-text-dark);
  --nav-muted: rgba(17, 17, 17, 0.72);
  --nav-border: rgba(17, 17, 17, 0.12);
  --nav-active: var(
    --usural-accent,
    var(--v2-blue, var(--nav-accent))
  );
}

/* ----------------------------------------
   BASE NAVBAR APPEARANCE
---------------------------------------- */

html body .section-header.var-1,
html body .navbar-content,
html body .v2-nav {
  background-color: var(--nav-bg) !important;
  background-image: none !important;

  border-color: var(--nav-border) !important;

  color: var(--nav-text) !important;

  transition:
    background-color 650ms cubic-bezier(0.65, 0, 0.35, 1),
    border-color 650ms cubic-bezier(0.65, 0, 0.35, 1),
    color 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* ----------------------------------------
   DARK THEME
---------------------------------------- */

.section-header.var-1[data-theme="dark"],
.navbar-content[data-theme="dark"],
.v2-nav[data-theme="dark"] {
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-muted: rgba(255, 255, 255, 0.72);
  --nav-border: rgba(255, 255, 255, 0.14);
}

/* ----------------------------------------
   LIGHT THEME
---------------------------------------- */

.section-header.var-1[data-theme="light"],
.navbar-content[data-theme="light"],
.v2-nav[data-theme="light"] {
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-muted: rgba(17, 17, 17, 0.72);
  --nav-border: rgba(17, 17, 17, 0.12);
}

/* ----------------------------------------
   NAV LINKS
---------------------------------------- */

html body .navbar-content .navbar-link,
html body .v2-nav .v2-nav-links a,
html body .v2-nav .v2-menu-button {
  color: var(--nav-text) !important;

  transition:
    color 650ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 180ms ease,
    transform 180ms ease !important;
}

html body .navbar-content .navbar-link,
html body .v2-nav .v2-nav-links a {
  font-weight: 500 !important;
  opacity: 0.78 !important;
}

/* ----------------------------------------
   HOVER
---------------------------------------- */

html body
  .navbar-content
  .header-link-wrap.navbar:hover
  .navbar-link,
html body .v2-nav .v2-nav-links a:hover {
  color: var(--nav-active) !important;
  opacity: 1 !important;
}

/* ----------------------------------------
   ACTIVE NAV ITEMS
---------------------------------------- */

html body
  .navbar-content
  .header-link-wrap.navbar.w--current
  .navbar-link,

html body
  .usural-service-detail-page
  .navbar-content
  .header-link-wrap.navbar[href="/services/"]
  .navbar-link,

html body
  .usural-legacy-service-page
  .navbar-content
  .header-link-wrap.navbar[href="/services/"]
  .navbar-link,

html body
  .usural-project-detail-page
  .navbar-content
  .header-link-wrap.navbar[href="/projects/"]
  .navbar-link,

html body
  .v2-nav
  .v2-nav-links
  a[aria-current="page"] {
  color: var(--nav-text) !important;
  opacity: 1 !important;
}

/* ----------------------------------------
   ACTIVE / HOVER UNDERLINE
---------------------------------------- */

.navbar-content .header-link-wrap.navbar::after,
.v2-nav .v2-nav-links a::after {
  background: var(--nav-active) !important;
}

/* ----------------------------------------
   LINK SEPARATORS
---------------------------------------- */

.navbar-content
  .header-link-wrap.navbar
  + .header-link-wrap.navbar::before,

.v2-nav
  .v2-nav-links
  a
  + a::before {
  background: var(--nav-border) !important;

  transition:
    background-color 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* ----------------------------------------
   LOGO
---------------------------------------- */

.navbar-content .navbar-logo-dark img,
.v2-nav .v2-logo img {
  transition:
    filter 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* White logo over black navbar */
.navbar-content[data-theme="dark"] .navbar-logo-dark img,
.section-header.var-1[data-theme="dark"]
  .navbar-content
  .navbar-logo-dark
  img,
.v2-nav[data-theme="dark"] .v2-logo img {
  filter: brightness(0) invert(1);
}

/* Original / black logo over white navbar */
.navbar-content[data-theme="light"] .navbar-logo-dark img,
.section-header.var-1[data-theme="light"]
  .navbar-content
  .navbar-logo-dark
  img,
.v2-nav[data-theme="light"] .v2-logo img {
  filter: none;
}

/* ----------------------------------------
   WEBFLOW MENU ICON
---------------------------------------- */

.navbar-content .navbar-open {
  transition:
    filter 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Black icon on white navbar */
.navbar-content[data-theme="light"]
  .navbar-button-wrap.visible
  .navbar-open,
.section-header.var-1[data-theme="light"]
  .navbar-content
  .navbar-button-wrap.visible
  .navbar-open {
  filter: brightness(0);
}

/* White icon on black navbar */
.navbar-content[data-theme="dark"]
  .navbar-button-wrap.visible
  .navbar-open,
.section-header.var-1[data-theme="dark"]
  .navbar-content
  .navbar-button-wrap.visible
  .navbar-open {
  filter: none;
}

/* ----------------------------------------
   MENU TEXT
---------------------------------------- */

html body .navbar-content .menu-icon-text {
  color: var(--nav-text) !important;

  transition:
    color 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* ----------------------------------------
   FOCUS STATES
---------------------------------------- */

.navbar-content .navbar-link:focus-visible,
.navbar-content .header-link-wrap:focus-visible,
.v2-nav a:focus-visible,
.v2-nav button:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 4px;
}

/* ----------------------------------------
   V2 MOBILE PANEL
---------------------------------------- */

.v2-mobile-panel {
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-border: rgba(17, 17, 17, 0.12);

  background: var(--nav-bg) !important;
  border-color: var(--nav-border) !important;

  transition:
    background-color 650ms cubic-bezier(0.65, 0, 0.35, 1),
    border-color 650ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

html[data-nav-theme="dark"] .v2-mobile-panel {
  --nav-bg: #000000;
  --nav-text: #ffffff;
  --nav-border: rgba(255, 255, 255, 0.14);
}

html[data-nav-theme="light"] .v2-mobile-panel {
  --nav-bg: #ffffff;
  --nav-text: #111111;
  --nav-border: rgba(17, 17, 17, 0.12);
}

.v2-mobile-panel a {
  border-color: var(--nav-border) !important;
  color: var(--nav-text) !important;
}

/* ----------------------------------------
   REDUCED MOTION
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .section-header.var-1,
  .navbar-content,
  .v2-nav,
  .navbar-content .navbar-link,
  .navbar-content .menu-icon-text,
  .v2-nav .v2-nav-links a,
  .v2-nav .v2-menu-button,
  .navbar-content .navbar-logo-dark img,
  .v2-nav .v2-logo img,
  .navbar-content .navbar-open,
  .v2-mobile-panel {
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   DESKTOP NAV VISIBILITY FIX
   Keeps Webflow mobile menu structure but exposes the
   horizontal navigation on desktop.
========================================================= */

@media screen and (min-width: 992px) {

  .section-header.var-1 .navbar-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .section-header.var-1 .navbar-menu.w-nav-menu {
    display: flex !important;
    position: static !important;

    width: auto !important;
    height: auto !important;

    background: transparent !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto !important;
  }

  .section-header.var-1 .navbar-menu .menu-wrap {
    display: flex !important;
    position: static !important;

    width: auto !important;
    height: auto !important;

    background: transparent !important;
  }

  .section-header.var-1 .navbar-menu .menu-flex {
    display: flex !important;
    align-items: center !important;

    width: auto !important;
    height: auto !important;

    position: static !important;
  }

  .section-header.var-1 .navbar-menu-wrapper {
    display: flex !important;
    align-items: center !important;

    width: auto !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }

  .section-header.var-1
    .navbar-menu-wrapper
    .header-link-wrap.navbar {
    display: inline-flex !important;
    align-items: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
  }

  .section-header.var-1
    .navbar-menu-wrapper
    .navbar-link {
    display: block !important;

    color: var(--nav-text) !important;

    opacity: 0.78 !important;
    visibility: visible !important;
  }

  .section-header.var-1
    .navbar-menu-wrapper
    .header-link-wrap.navbar.w--current
    .navbar-link {
    color: var(--nav-text) !important;
    opacity: 1 !important;
  }

  .section-header.var-1
    .navbar-menu-wrapper
    .header-link-wrap.navbar:hover
    .navbar-link {
    color: var(--nav-active) !important;
    opacity: 1 !important;
  }

  /* Hide hamburger/menu trigger on desktop */
  .section-header.var-1
    > .navbar-content
    > .navbar-wrapper
    .navbar-button-wrap.visible {
    display: none !important;
  }

  /* Hide mobile-menu-only close control */
  .section-header.var-1
    .navbar-menu
    .navbar-wrapper.close {
    display: none !important;
  }

  /* Hide image belonging to fullscreen mobile menu */
  .section-header.var-1
    .navbar-menu
    .menu-image {
    display: none !important;
  }
}