/*
Theme Name: NXTweb Theme
Theme URI: https://nxtweb.no
Author: NXTweb
Author URI: https://nxtweb.no
Description: Et raskt, WordPress-native tema bygget for NXTweb AI Page Builder. Design hele sider visuelt med drag-and-drop-blokker og la den innebygde AI-en generere ferdige layouter, tekster og bilder. Full kontroll over farger, typografi og oppsett – uten kode. Aktiver child-temaet for å beholde egne tilpasninger på tvers av oppdateringer.
Version: 1.12.11
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nxtweb-theme
Tags: full-site-editing, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready, theme-options, wide-blocks
*/

:root {
  --color-primary: #0066ff;
  --color-secondary: #1a1a2e;
  --color-accent: #ff6b35;
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-sans);
  --nxt-layout-width: 1400px;
  --nxt-body-frame: 0px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--nxt-body-bg, var(--color-bg));
  padding: var(--nxt-body-frame);
  /* Prevent stray horizontal page overflow (full-bleed rows, 100vw helpers).
     Beyond avoiding an ugly sideways scroll, overflow here would expand the
     layout viewport on real mobile, shifting every position:fixed control
     (e.g. the off-canvas close button pinned to the right) off-screen. `clip`
     (not `hidden`) avoids creating a scroll container, so position:sticky keeps
     working. */
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-sans));
}

.site-main {
  max-width: var(--nxt-layout-width, 1400px);
  margin: 0 auto;
  /* Ingen vertikal padding — rad/kolonne-margin styrer luften over/under innholdet */
  padding: 0 1.5rem;
}

.nxtweb-site-header-inner.is-header-full-width {
  max-width: none;
}

.nxtweb-content-area.is-content-full-width {
  max-width: none;
  width: 100%;
}

.nxtweb-site-header {
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  position: relative;
  z-index: 40;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

/* Header Content Block: rendered as a normal element right after </header>
   (see nxtweb-theme/header.php). By default it just sits below the header in
   normal flow. When transparency is active (the common case — "Remove
   Transparency" Page Option left unchecked), the header switches to
   position:absolute with a transparent background so it floats over this
   block instead of pushing it down — e.g. logo + nav over a full-width hero
   image built as the header block. */
.nxtweb-header-block {
  position: relative;
}

.nxtweb-site-header.has-header-block-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.nxtweb-site-header.is-menu-borderless {
  border-bottom: 0;
}

/* Top-bar */
.nxtweb-top-bar {
  width: 100%;
  background: #111827;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.4;
}

.nxtweb-top-bar-inner {
  max-width: var(--nxt-layout-width, 1400px);
  margin: 0 auto;
  padding: 0.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: inherit;
}

.nxtweb-top-bar.is-align-left .nxtweb-top-bar-inner {
  justify-content: flex-start;
}

.nxtweb-top-bar.is-align-center .nxtweb-top-bar-inner {
  justify-content: center;
}

.nxtweb-top-bar.is-align-right .nxtweb-top-bar-inner {
  justify-content: flex-end;
}

.nxtweb-top-bar a {
  color: inherit;
}

.nxtweb-top-bar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.nxtweb-top-bar-menu a {
  text-decoration: none;
}

.nxtweb-top-bar-html {
  display: flex;
  align-items: center;
}

.nxtweb-top-bar-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0;
}

.nxtweb-top-bar.is-divider-none .nxtweb-top-bar-lines {
  gap: 0.2rem 1rem;
}

.nxtweb-top-bar-line {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
  white-space: nowrap;
  --nxt-top-bar-divider-color: currentColor;
}

.nxtweb-top-bar.is-divider-bullet .nxtweb-top-bar-line + .nxtweb-top-bar-line::before,
.nxtweb-top-bar.is-divider-line .nxtweb-top-bar-line + .nxtweb-top-bar-line::before {
  color: var(--nxt-top-bar-divider-color, currentColor);
  margin: 0 12px;
  flex: 0 0 auto;
}

.nxtweb-top-bar.is-divider-bullet .nxtweb-top-bar-line + .nxtweb-top-bar-line::before {
  content: '\2022';
  font-size: 0.9em;
  line-height: 1;
}

.nxtweb-top-bar.is-divider-line .nxtweb-top-bar-line + .nxtweb-top-bar-line::before {
  content: '';
  width: 1px;
  height: 0.95em;
  background: var(--nxt-top-bar-divider-color, currentColor);
}

.nxtweb-top-bar-line-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.nxtweb-top-bar-line-icon {
  display: block;
}

.nxtweb-top-bar-line-text {
  display: inline-block;
  min-width: 0;
}

@media (max-width: 767px) {
  /* Scale rem-based content down a touch on phones so default text is not
     oversized. Builder blocks that set an explicit px size are unaffected. */
  html {
    font-size: var(--nxt-mobile-root-scale, 93.75%);
  }

  .nxtweb-top-bar {
    font-size: var(--nxt-top-bar-font-mobile, 0.75rem);
  }

  /* Always left-align the top-bar content on phones regardless of the
     desktop alignment setting. */
  .nxtweb-top-bar.is-align-left .nxtweb-top-bar-inner,
  .nxtweb-top-bar.is-align-center .nxtweb-top-bar-inner,
  .nxtweb-top-bar.is-align-right .nxtweb-top-bar-inner {
    justify-content: flex-start;
    text-align: left;
  }

  .nxtweb-top-bar-lines {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .nxtweb-top-bar-line {
    white-space: normal;
  }

  /* When a mobile font size is set in Theme Options, override the per-line
     inline size so the top-bar text scales consistently on mobile. */
  .nxtweb-top-bar[style*="--nxt-top-bar-font-mobile"] .nxtweb-top-bar-line {
    font-size: var(--nxt-top-bar-font-mobile) !important;
  }

  /* Per-line mobile font size (overrides the per-line inline px and the
     top-bar-wide mobile size). Specificity raised so it wins over the
     top-bar-wide rule above. */
  .nxtweb-top-bar .nxtweb-top-bar-line[style*="--nxt-tbl-font-mobile"] {
    font-size: var(--nxt-tbl-font-mobile) !important;
  }

  .nxtweb-top-bar.is-divider-bullet .nxtweb-top-bar-line + .nxtweb-top-bar-line::before,
  .nxtweb-top-bar.is-divider-line .nxtweb-top-bar-line + .nxtweb-top-bar-line::before {
    content: none;
    margin: 0;
  }
}

/* Page Options overrides */
/* "Transparent Menu" (single toggle, see header.php $nxtweb_page_transparent_menu):
   opaque is the baseline (.nxtweb-site-header's own background: #fff already
   covers that, no override needed) — .is-transparent, applied only when the
   toggle is checked, is what enables transparency, both for the header
   content block overlay above and the scroll-at-top effect below. */
.nxtweb-site-header.is-no-shadow,
.nxtweb-site-header.is-no-shadow.is-scrolled {
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

.nxtweb-site-header.is-menu-width-full .nxtweb-site-header-inner {
  max-width: none;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.nxtweb-site-header.is-menu-width-contained .nxtweb-site-header-inner {
  max-width: var(--nxtweb-layout-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.nxtweb-site-header.is-menu-width-narrow .nxtweb-site-header-inner {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.nxtweb-site-header.is-menu-hide.is-scroll-down {
  transform: translateY(-100%);
}

.nxtweb-site-header.is-menu-hide.is-scroll-up {
  transform: translateY(0);
}

.nxtweb-site-header.is-menu-shrink .nxtweb-site-header-inner {
  transition: padding 0.2s ease;
}

.nxtweb-site-header.is-menu-shrink.is-scrolled .nxtweb-site-header-inner {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.nxtweb-site-header.is-menu-shrink.is-scrolled .nxtweb-logo {
  height: calc(var(--nxt-nav-logo-height, 70px) * 0.82);
}

@media (min-width: 783px) {
  .nxtweb-site-header.is-sticky-desktop {
    position: sticky;
    top: 0;
  }

  .nxtweb-site-header.is-desktop-transp-scroll.is-transparent.is-at-top {
    background: transparent;
    border-bottom-color: transparent;
  }
}

@media (max-width: 782px) {
  .nxtweb-site-header.is-sticky-mobile {
    position: sticky;
    top: 0;
  }

  .nxtweb-site-header.is-mobile-transp-scroll.is-transparent.is-at-top {
    background: transparent;
    border-bottom-color: transparent;
  }

  .nxtweb-site-header.is-logo-mobile-enabled.is-menu-shrink.is-scrolled .nxtweb-logo {
    height: calc(var(--nxt-nav-logo-height-mobile, 50px) * 0.82);
  }
}

.nxtweb-site-header-inner {
  /* border-box so width:100% + padding stays within the viewport (see the
     matching fix on .nxtweb-site-footer-inner). Without this the full-width
     header (width:100% + padding, content-box) renders wider than the page,
     pushing the hamburger toggle off-screen on the right. */
  box-sizing: border-box;
  max-width: var(--nxt-layout-width, 1400px);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nxtweb-site-header.is-full-width .nxtweb-site-header-inner {
  max-width: none;
  width: 100%;
}

.nxtweb-brand-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--nxt-nav-logo-height, 70px);
}

.nxtweb-brand-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
}

.nxtweb-logo {
  display: block;
  height: var(--nxt-nav-logo-height, 70px);
  width: auto;
  max-width: min(320px, 42vw);
  object-fit: contain;
}

.nxtweb-logo-dark {
  display: none;
}

.nxtweb-logo-mobile-light,
.nxtweb-logo-mobile-dark {
  display: none;
}

.nxtweb-site-header.is-logo-switchable .nxtweb-logo-light {
  display: block;
}

.nxtweb-site-header.is-logo-switchable .nxtweb-logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .nxtweb-site-header.is-logo-switchable .nxtweb-logo-light {
    display: none;
  }

  .nxtweb-site-header.is-logo-switchable .nxtweb-logo-dark {
    display: block;
  }
}

/* Primary Menu Skin (an explicit admin choice about the header's own fixed
   background) always wins over the visitor's OS dark-mode preference above —
   a "dark" skin means the header background is dark regardless of what the
   visitor's device theme is set to, so the logo must match it. Deliberately
   NOT gated behind .is-logo-switchable — that toggle only opts into adapting
   to the *visitor's* OS theme; showing the right logo for your own
   configured skin is unrelated and should work regardless of it. Higher
   specificity + !important guarantees this beats the prefers-color-scheme
   block regardless of source order or a visitor's OS setting. */
.nxtweb-site-header.is-primary-skin-dark .nxtweb-logo-light {
  display: none !important;
}

.nxtweb-site-header.is-primary-skin-dark .nxtweb-logo-dark {
  display: block !important;
}

@media (max-width: 782px) {
  .nxtweb-site-header.is-logo-mobile-enabled .nxtweb-logo-light,
  .nxtweb-site-header.is-logo-mobile-enabled .nxtweb-logo-dark {
    display: none !important;
  }

  .nxtweb-site-header.is-logo-mobile-enabled .nxtweb-logo-mobile-light {
    display: block;
  }

  .nxtweb-site-header.is-logo-mobile-enabled .nxtweb-logo-mobile-dark {
    display: none;
  }
}

@media (max-width: 782px) and (prefers-color-scheme: dark) {
  .nxtweb-site-header.is-logo-mobile-enabled.is-logo-switchable .nxtweb-logo-mobile-light {
    display: none;
  }

  .nxtweb-site-header.is-logo-mobile-enabled.is-logo-switchable .nxtweb-logo-mobile-dark {
    display: block;
  }
}

@media (max-width: 782px) {
  /* Same Primary Menu Skin priority as the desktop logo above — not gated
     behind .is-logo-switchable, same reasoning. .is-logo-mobile-enabled is
     kept: that's a genuinely different toggle (whether separate mobile logo
     images are used at all). */
  .nxtweb-site-header.is-logo-mobile-enabled.is-primary-skin-dark .nxtweb-logo-mobile-light {
    display: none !important;
  }

  .nxtweb-site-header.is-logo-mobile-enabled.is-primary-skin-dark .nxtweb-logo-mobile-dark {
    display: block !important;
  }
}

.nxtweb-primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex: 1;
}

.nxtweb-primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nxtweb-primary-nav li {
  position: relative;
}

.nxtweb-primary-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 0.5rem;
  margin-top: 0.4rem;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 65;
}

.nxtweb-site-header.is-dropdown-anim-none .nxtweb-primary-nav ul ul {
  transition: none;
  transform: none;
}

.nxtweb-site-header.is-dropdown-anim-fade .nxtweb-primary-nav ul ul {
  transition: opacity 0.18s ease, visibility 0.18s ease;
  transform: none;
}

.nxtweb-site-header.is-dropdown-anim-slide-down .nxtweb-primary-nav ul ul {
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nxtweb-site-header:not(.is-dropdown-on-click) .nxtweb-primary-nav li:hover > ul,
.nxtweb-site-header:not(.is-dropdown-on-click) .nxtweb-primary-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nxtweb-site-header.is-dropdown-on-click .nxtweb-primary-nav .menu-item-has-children.is-submenu-open > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nxtweb-site-header .nxtweb-primary-nav ul ul a {
  display: block;
  white-space: nowrap;
  padding: 0.4rem 0.55rem;
  color: var(--nxt-skin-submenu-text, inherit);
}

/* Divider between submenu items — automatically a touch lighter than the
   submenu background so it reads as a subtle separator. */
.nxtweb-primary-nav ul ul li + li {
  border-top: 1px solid var(--nxt-submenu-divider, color-mix(in srgb, var(--nxt-skin-submenu-bg, #1f2937) 84%, #ffffff 16%));
}

.nxtweb-site-header .nxtweb-primary-nav a {
  text-decoration: none;
  color: var(--nxt-skin-menu-text, inherit);
  font-weight: 500;
  font-size: var(--nxt-menu-font-size, 16px);
  font-weight: var(--nxt-menu-font-weight, 600);
  letter-spacing: var(--nxt-menu-letter-spacing, 0);
}

.nxtweb-site-header .nxtweb-primary-nav a:hover,
.nxtweb-site-header .nxtweb-primary-nav .current-menu-item > a,
.nxtweb-site-header .nxtweb-primary-nav .current_page_item > a {
  color: var(--nxt-skin-menu-hover, var(--nxt-menu-highlight, #000));
  text-decoration: none;
}

/* Submenu hover/active uses its own color so it can differ from the main menu. */
.nxtweb-site-header .nxtweb-primary-nav ul ul a:hover,
.nxtweb-site-header .nxtweb-primary-nav ul ul .current-menu-item > a,
.nxtweb-site-header .nxtweb-primary-nav ul ul .current_page_item > a {
  color: var(--nxt-skin-submenu-hover, var(--nxt-skin-menu-hover, var(--nxt-menu-highlight, #000)));
  text-decoration: none;
}

.nxtweb-primary-nav ul ul {
  font-size: var(--nxt-submenu-font-size, 15px);
}

.nxtweb-site-header.is-first-level-uppercase .nxtweb-primary-nav > ul > li > a {
  text-transform: uppercase;
}

.nxtweb-site-header.is-other-levels-uppercase .nxtweb-primary-nav ul ul a {
  text-transform: uppercase;
}

.nxtweb-site-header.is-menu-style-normal .nxtweb-primary-nav a {
  font-style: normal;
}

.nxtweb-site-header.is-menu-style-italic .nxtweb-primary-nav a {
  font-style: italic;
}

.nxtweb-site-header.is-menu-font-inter .nxtweb-primary-nav {
  font-family: Inter, system-ui, sans-serif;
}

.nxtweb-site-header.is-menu-font-arial .nxtweb-primary-nav {
  font-family: Arial, Helvetica, sans-serif;
}

.nxtweb-site-header.is-menu-font-georgia .nxtweb-primary-nav {
  font-family: Georgia, serif;
}

.nxtweb-site-header.is-menu-font-times-new-roman .nxtweb-primary-nav {
  font-family: "Times New Roman", Times, serif;
}

.nxtweb-site-header.is-primary-skin-light {
  background: var(--nxt-skin-primary-bg, #ffffff);
  color: var(--nxt-skin-menu-text, inherit);
  border-bottom-color: var(--nxt-skin-border, #e5e7eb);
}

.nxtweb-site-header.is-primary-skin-dark {
  background: var(--nxt-skin-primary-bg, #111827);
  color: var(--nxt-skin-menu-text, #f9fafb);
  border-bottom-color: var(--nxt-skin-border, rgba(255, 255, 255, 0.18));
}

.nxtweb-site-header.is-submenu-skin-dark .nxtweb-primary-nav ul ul {
  background: var(--nxt-skin-submenu-bg, #1f2937);
  color: var(--nxt-skin-menu-text, #f9fafb);
}

.nxtweb-site-header.is-submenu-skin-light .nxtweb-primary-nav ul ul {
  background: var(--nxt-skin-submenu-bg, #ffffff);
  color: var(--nxt-skin-menu-text, inherit);
}

/* ── Dropdown affordance: caret on items with a submenu ───────────── */
.nxtweb-primary-nav .menu-item-has-children > a,
.nxtweb-primary-nav .has-megamenu > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.nxtweb-primary-nav .menu-item-has-children > a::after,
.nxtweb-primary-nav .has-megamenu > a::after {
  content: "";
  flex: 0 0 auto;
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.2em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

/* Submenu (level 2+) parents point their caret to the side */
.nxtweb-primary-nav ul ul .menu-item-has-children > a {
  justify-content: space-between;
}

.nxtweb-primary-nav ul ul .menu-item-has-children > a::after {
  transform: rotate(-45deg);
  margin-top: 0;
}

/* Open state (click-dropdown or hover) flips the top-level caret up */
.nxtweb-site-header.is-dropdown-on-click .nxtweb-primary-nav .menu-item-has-children.is-submenu-open > a::after,
.nxtweb-site-header.is-dropdown-on-click .nxtweb-primary-nav .has-megamenu.is-submenu-open > a::after {
  transform: rotate(225deg);
  margin-top: 0.12em;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .menu-item-has-children.is-submenu-open > a::after,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .has-megamenu.is-submenu-open > a::after {
  transform: rotate(225deg);
  margin-top: 0.12em;
}

.nxtweb-site-header:not(.is-dropdown-on-click):not(.is-layout-off-canvas):not(.is-layout-overlay):not(.is-layout-overlay-center) .nxtweb-primary-nav > ul > li.menu-item-has-children:hover > a::after {
  transform: rotate(225deg);
  margin-top: 0.12em;
}

/* Hover bridge so the cursor can reach floating dropdowns without the
   submenu closing while crossing the visual gap. */
.nxtweb-site-header:not(.is-layout-off-canvas):not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-lateral) .nxtweb-primary-nav .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.4rem;
  height: 0.4rem;
}

/* Nested (level 3+) floating submenus open to the side instead of overlapping. */
.nxtweb-site-header:not(.is-layout-off-canvas):not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-lateral) .nxtweb-primary-nav ul ul ul {
  top: -0.5rem;
  left: 100%;
  margin-top: 0;
}

.nxtweb-site-header:not(.is-layout-off-canvas):not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-lateral) .nxtweb-primary-nav ul ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.4rem;
  width: 0.4rem;
}

/* Right-aligned layouts: open the dropdown toward the left edge of the item
   so it is not clipped by the header's horizontal overflow boundary. */
.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li > ul,
.nxtweb-site-header.is-menu-h-align-right .nxtweb-primary-nav > ul > li > ul {
  left: auto;
  right: 0;
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
  background: var(--nxt-side-menu-bg, color-mix(in srgb, var(--nxt-overlay-menu-bg, #ffffff) calc(var(--nxt-overlay-menu-opacity, 0.98) * 100%), transparent));
}

.nxtweb-site-header.is-layout-overlay.is-overlay-skin-dark .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center.is-overlay-skin-dark .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-off-canvas.is-overlay-skin-dark .nxtweb-primary-nav {
  color: var(--nxt-side-menu-text, #f9fafb);
}

.nxtweb-site-header.is-layout-overlay.is-overlay-skin-light .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center.is-overlay-skin-light .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-off-canvas.is-overlay-skin-light .nxtweb-primary-nav {
  color: var(--nxt-side-menu-text, #111827);
}

.nxtweb-menu-extra-mobile {
  display: none;
}

.nxtweb-menu-toggle {
  display: none;
  /* Comes after the Action Menu in source order (it's markup-first, before
     .nxtweb-primary-nav), so a flex order puts it visually last regardless
     of which state is active — see .nxtweb-action-menu below. */
  order: 3;
  border: 1px solid color-mix(in srgb, var(--nxt-hamburger-line-color, #1f2937) 30%, transparent);
  border-radius: var(--nxt-hamburger-radius, 8px);
  background: var(--nxt-hamburger-bg, transparent);
  width: var(--nxt-hamburger-size, 42px);
  height: var(--nxt-hamburger-size, 42px);
  cursor: pointer;
  color: var(--nxt-hamburger-line-color, currentColor);
}

/* Secondary Menu: plain links from a separate WP menu (Theme Options →
   Navbar → Secondary Menu), between the primary nav and the Action Menu
   buttons. order:1 so it lands right after .nxtweb-primary-nav (order 0). */
.nxtweb-secondary-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  order: 1;
}

.nxtweb-secondary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nxtweb-secondary-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 500;
  white-space: nowrap;
}

.nxtweb-secondary-nav a:hover {
  color: var(--nxt-menu-highlight, var(--color-primary, #2563eb));
}

/* Action Menu: buttons rendered from a separate WP menu (Theme Options →
   Navbar → Action Menu). Sits after the Secondary Menu (order 1) — or after
   .nxtweb-primary-nav directly, if there's no Secondary Menu — when visible
   in-flow, and — via the toggle's order:3 above — before the hamburger once
   the nav collapses to an off-canvas/overlay panel (removed from flow, so it
   stops competing for this slot). One placement, both states. */
.nxtweb-action-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  order: 2;
}

/* Whichever of Secondary Menu / Action Menu comes first in visual order
   absorbs the header row's leftover space (assigned in header.php), pinning
   the whole trailing group to the right. .nxtweb-primary-nav is flex:1 and
   normally eats all the free space itself, so this margin resolves to 0 and
   the group just sits right after it — BUT for Off-canvas/Overlay/
   Overlay-center layouts the nav is *always* position:fixed (out of flow,
   even on desktop), leaving branding + this group + toggle as the only flex
   items; header-inner's justify-content:space-between would otherwise center
   the group on the page. margin-left:auto overrides that regardless of
   whatever justify-content the active layout sets. */
.nxtweb-nav-push-right {
  margin-left: auto;
}

.nxtweb-menu-toggle-icon {
  width: 18px;
  height: 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.nxtweb-menu-toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nxtweb-site-header.is-hamburger-lines-2 .nxtweb-menu-toggle-line-third {
  display: none;
}

.nxtweb-menu-close {
  display: none;
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 62;
}

.nxtweb-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 22, 0.46);
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 58;
  cursor: pointer;
}

.nxtweb-menu-close-floating {
  display: none;
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  width: var(--nxt-side-menu-close-size, 38px);
  height: var(--nxt-side-menu-close-size, 38px);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: rgba(255, 255, 255, 0.08);
  color: var(--nxt-side-menu-close-color, inherit);
  border-radius: 8px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 70;
}

.nxtweb-site-header.is-layout-left .nxtweb-site-header-inner {
  flex-direction: row-reverse;
}

.nxtweb-site-header.is-layout-center .nxtweb-site-header-inner,
.nxtweb-site-header.is-layout-center-split .nxtweb-site-header-inner,
.nxtweb-site-header.is-layout-center-double .nxtweb-site-header-inner {
  justify-content: center;
}

.nxtweb-site-header.is-layout-center .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-center-split .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-center-double .nxtweb-primary-nav {
  justify-content: center;
}

.nxtweb-site-header.is-layout-justify .nxtweb-primary-nav ul {
  width: 100%;
  justify-content: space-between;
}

/* Inline-bar horizontal placement only. Excluded for the overlay / off-canvas
   / collapsed panels, where the nav is a vertical flex column and flex-end /
   center would bottom- or centre-align the item stack (clipping the first
   item out of the scroll area). */
.nxtweb-site-header.is-menu-pos-left:not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-off-canvas):not(.is-nav-collapsed) .nxtweb-primary-nav {
  justify-content: flex-start;
}

.nxtweb-site-header.is-menu-pos-center:not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-off-canvas):not(.is-nav-collapsed) .nxtweb-primary-nav {
  justify-content: center;
}

.nxtweb-site-header.is-menu-pos-right:not(.is-layout-overlay):not(.is-layout-overlay-center):not(.is-layout-off-canvas):not(.is-nav-collapsed) .nxtweb-primary-nav {
  justify-content: flex-end;
}

.nxtweb-site-header.is-menu-v-align-top .nxtweb-site-header-inner {
  align-items: flex-start;
}

.nxtweb-site-header.is-menu-v-align-middle .nxtweb-site-header-inner {
  align-items: center;
}

.nxtweb-site-header.is-menu-v-align-bottom .nxtweb-site-header-inner {
  align-items: flex-end;
}

.nxtweb-site-header.is-menu-h-align-left .nxtweb-primary-nav ul {
  justify-content: flex-start;
}

.nxtweb-site-header.is-menu-h-align-center .nxtweb-primary-nav ul {
  justify-content: center;
}

.nxtweb-site-header.is-menu-h-align-right .nxtweb-primary-nav ul {
  justify-content: flex-end;
}

.nxtweb-site-header.is-menu-h-align-justify .nxtweb-primary-nav ul {
  width: 100%;
  justify-content: space-between;
}

.nxtweb-site-header.is-layout-lateral .nxtweb-site-header-inner {
  align-items: stretch;
}

.nxtweb-site-header.is-layout-lateral .nxtweb-primary-nav ul {
  flex-direction: column;
  align-items: flex-start;
}

.nxtweb-site-header.is-layout-studio-slice {
  --nxt-studio-slice-top-overlap: 14px;
  --nxt-studio-slice-bottom-overlap: 12px;
  /* vw-based so the panel width and the inner's padding-left resolve against
     the same reference and always stay in sync (percentages do not). */
  --nxt-studio-slice-panel-width: clamp(200px, 26vw, 360px);
  --nxt-studio-slice-panel-gap: 24px;
  --nxt-studio-slice-cut: 42px;
  /* Side gutter between the viewport edge and the contained layout edge.
     Used to bleed the orange bar and white panel out to the full width
     while logo and menu stay within the layout width. */
  --nxt-studio-slice-bleed: max(0px, calc((100vw - var(--nxt-layout-width, 1200px)) / 2));
  background: transparent;
  color: var(--nxt-skin-menu-text, inherit);
  border-bottom: 0;
  /* Clip ONLY the horizontal bleed (no h-scroll) while letting content overflow
     vertically — both the panel's top/bottom overlap and the menu dropdowns.
     Using overflow-x:clip + overflow-y:visible is invalid per spec (the visible
     axis is coerced to auto), which turned the header into a scroll container
     and hid the dropdowns. clip-path with negative top/bottom insets keeps the
     vertical overflow free. */
  clip-path: inset(-100vh 0 -200vh 0);
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-site-header-inner,
.nxtweb-site-header.is-layout-studio-slice.is-menu-width-full .nxtweb-site-header-inner,
.nxtweb-site-header.is-layout-studio-slice.is-full-width .nxtweb-site-header-inner {
  position: relative;
  z-index: 1;
  min-height: 88px;
  box-sizing: border-box;
  background: var(--nxt-skin-primary-bg, #f08d1f);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: calc(var(--nxt-studio-slice-panel-width) + var(--nxt-studio-slice-panel-gap));
  padding-right: 1.5rem;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  /* Studio Slice always follows the layout width, regardless of the
     menu-width-full / full-width toggles. */
  max-width: var(--nxt-layout-width, 1200px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed orange bar behind the contained menu row. */
.nxtweb-site-header.is-layout-studio-slice .nxtweb-site-header-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--nxt-studio-slice-bleed));
  width: 100vw;
  background: var(--nxt-skin-primary-bg, #f08d1f);
  z-index: -1;
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-branding {
  position: absolute;
  left: calc(-1 * var(--nxt-studio-slice-bleed));
  top: calc(-1 * var(--nxt-studio-slice-top-overlap));
  bottom: calc(-1 * var(--nxt-studio-slice-bottom-overlap));
  z-index: 3;
  width: max-content;
  max-width: calc(var(--nxt-studio-slice-bleed) + var(--nxt-studio-slice-panel-width));
  display: flex;
  align-items: center;
  background: #ffffff;
  clip-path: polygon(0 0, calc(100% - var(--nxt-studio-slice-cut)) 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
  /* right padding = slice cut + ~40px breathing room after the logo */
  padding: 0 calc(var(--nxt-studio-slice-cut) + 40px) 0 calc(var(--nxt-studio-slice-bleed) + 1.5rem);
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-brand-link {
  width: auto;
  min-height: 0;
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-logo {
  max-width: 360px;
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul {
  gap: 1.35rem;
}

.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li > a {
  color: var(--nxt-skin-menu-text, #1f2937);
  text-transform: uppercase;
  font-weight: var(--nxt-menu-font-weight, 700);
  letter-spacing: 0.01em;
}

/* Studio Slice keeps Customize hover/active colors. The hover/active text color is
   tied to the whole list item (li:hover) — not just the link — so it always changes
   together with the bottom bar below, even when the cursor is over the padding area
   beside/under the text. */
.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li:hover > a,
.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li.current-menu-item > a,
.nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li.current_page_item > a {
  color: var(--nxt-skin-menu-hover, var(--nxt-menu-highlight, #000));
  text-decoration: none;
}

/* Studio Slice top-level underline indicator: a single thicker bar that sweeps in
   from the left and sits flush on the bottom edge of the orange menu bar. The nav row
   is stretched to the full bar height so the bar can anchor to the very bottom (the
   -0.4rem offset cancels the inner's 0.4rem vertical padding), and the bar + the
   hover text color are both driven by li:hover so they always appear together. */
.nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav {
  align-self: stretch;
}

.nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav > ul {
  height: 100%;
  align-items: stretch;
}

.nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav > ul > li {
  display: flex;
  align-items: center;
  position: relative;
}

.nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav > ul > li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 3px;
  background: var(--nxt-skin-menu-hover, var(--nxt-menu-highlight, #111));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav > ul > li:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nxtweb-site-header.is-layout-studio-slice:not(.is-nav-collapsed) .nxtweb-primary-nav > ul > li::after {
    transition: none;
  }
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-menu-toggle,
.nxtweb-site-header.is-layout-overlay .nxtweb-menu-toggle,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--nxt-side-menu-bg, color-mix(in srgb, var(--nxt-overlay-menu-bg, #ffffff) calc(var(--nxt-overlay-menu-opacity, 0.98) * 100%), transparent));
  border-left: 1px solid #e5e7eb;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  padding: 5rem 1.25rem 1.25rem;
  /* Clear the site-header bar: when the menu is open the header-inner is lifted
     to z-index 60 (above this z-index-59 panel), so the first menu item must
     start below it or it renders hidden behind the logo row. */
  padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
  scroll-padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
  z-index: 59;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  border-left: 0;
  justify-content: flex-start;
  align-items: stretch;
}

.nxtweb-site-header.is-layout-overlay.is-contained .nxtweb-primary-nav,
.nxtweb-site-header.is-layout-overlay-center.is-contained .nxtweb-primary-nav {
  padding-left: max(1.25rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
  padding-right: max(1.25rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
}

.nxtweb-site-header.is-layout-overlay.is-contained .nxtweb-menu-close,
.nxtweb-site-header.is-layout-overlay-center.is-contained .nxtweb-menu-close {
  right: max(1rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
}

.nxtweb-site-header.is-layout-overlay.is-contained ~ .nxtweb-menu-close-floating,
.nxtweb-site-header.is-layout-overlay-center.is-contained ~ .nxtweb-menu-close-floating {
  right: max(1rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-menu-close,
.nxtweb-site-header.is-layout-overlay .nxtweb-menu-close,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-menu-close {
  position: fixed;
}

body.admin-bar .nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav,
body.admin-bar .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
body.admin-bar .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
  top: 32px;
}

body.admin-bar .nxtweb-site-header .nxtweb-menu-backdrop {
  top: 32px;
}

body.admin-bar .nxtweb-site-header .nxtweb-menu-close {
  top: calc(1rem + 32px);
}

body.admin-bar .nxtweb-menu-close-floating {
  top: calc(1rem + 32px);
}

.nxtweb-site-header.is-menu-open.is-layout-off-canvas .nxtweb-primary-nav,
.nxtweb-site-header.is-menu-open.is-layout-overlay .nxtweb-primary-nav,
.nxtweb-site-header.is-menu-open.is-layout-overlay-center .nxtweb-primary-nav {
  transform: translateX(0);
  /* Always top-align the open panel. It is a vertical scroll container, so any
     centering (justify-content:center / margin:auto) pushes the first item
     above the scrollable area and it becomes unreachable once the list is
     taller than the viewport. `is-menu-pos-right/center` (meant for the inline
     bar) otherwise leaks in here as flex-end/center — force flex-start. */
  justify-content: flex-start;
}

.nxtweb-site-header.is-menu-open.is-layout-off-canvas .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-menu-open.is-layout-overlay .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-menu-open.is-layout-overlay-center .nxtweb-primary-nav > ul {
  margin-top: 0;
  margin-bottom: 0;
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-menu-close,
.nxtweb-site-header.is-layout-overlay .nxtweb-menu-close,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-menu-close {
  display: none !important;
}

.nxtweb-site-header.is-menu-open.is-layout-off-canvas .nxtweb-menu-backdrop,
.nxtweb-site-header.is-menu-open.is-layout-overlay .nxtweb-menu-backdrop,
.nxtweb-site-header.is-menu-open.is-layout-overlay-center .nxtweb-menu-backdrop {
  display: block;
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav ul,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav ul {
  flex-direction: column;
  align-items: flex-start;
}

.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav ul ul,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav ul ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav ul ul,
.nxtweb-site-header.is-layout-lateral .nxtweb-primary-nav ul ul {
  position: static;
  min-width: 0;
  margin-top: 0;
  padding: 0.35rem 0 0.35rem 0.8rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav ul {
  align-items: flex-start;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul {
  width: fit-content;
  max-width: min(var(--nxt-layout-width, 1200px), 100%);
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul > li {
  width: auto;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul > li > a,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a {
  display: block;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-left .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-left .nxtweb-primary-nav > ul {
  margin-left: 0;
  margin-right: auto;
  align-items: flex-start;
  text-align: left;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-center .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-center .nxtweb-primary-nav > ul {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-right .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-right .nxtweb-primary-nav > ul {
  margin-left: auto;
  margin-right: 0;
  align-items: flex-end;
  text-align: right;
}

/* ── Overlay (hamburger) menu: full-width colour bands ──────────────────
   Theme Options → Navbar → Overlay menu → "Show items as colour bands"
   (.is-overlay-bands). Each top-level item with a per-item palette colour
   (Appearance → Menus → "Overlay band colour", exposes --nxt-omenu-band)
   renders as a flush, edge-to-edge band. Plain items keep the same inset. */
.nxtweb-site-header.is-overlay-bands.is-layout-overlay .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-overlay-bands.is-layout-overlay-center .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-overlay-bands.is-layout-off-canvas .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-overlay-bands.is-nav-collapsed .nxtweb-primary-nav > ul {
  width: 100%;
  max-width: 100%;
  gap: var(--nxt-omenu-band-gap, 0);
  align-items: stretch;
}

.nxtweb-site-header.is-overlay-bands.is-layout-overlay .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-overlay-bands.is-layout-overlay-center .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-overlay-bands.is-layout-off-canvas .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-overlay-bands.is-nav-collapsed .nxtweb-primary-nav > ul > li {
  width: 100%;
}

.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li > a {
  display: block;
  width: 100%;
  padding-inline: var(--nxt-omenu-band-px, clamp(1rem, 5vw, 3rem));
  padding-block: 0.45em;
}

.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li.nxtweb-omenu-band > a {
  background: var(--nxt-omenu-band, transparent);
  color: var(--nxt-omenu-band-text, #fff);
  padding-block: var(--nxt-omenu-band-py, clamp(0.55rem, 2.2vw, 1.15rem));
}

/* Plain (un-banded) items get breathing room from the coloured band above. */
.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li.nxtweb-omenu-band + li:not(.nxtweb-omenu-band) {
  margin-top: 0.9em;
}
.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li:not(.nxtweb-omenu-band) + li:not(.nxtweb-omenu-band) {
  margin-top: 0.1em;
}

.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li.nxtweb-omenu-band > a:hover,
.nxtweb-site-header.is-overlay-bands .nxtweb-primary-nav > ul > li.nxtweb-omenu-band.current-menu-item > a {
  filter: brightness(1.08);
  color: var(--nxt-omenu-band-text, #fff);
}

.nxtweb-site-header.is-menu-open.is-layout-off-canvas ~ .nxtweb-menu-close-floating,
.nxtweb-site-header.is-menu-open.is-layout-overlay ~ .nxtweb-menu-close-floating,
.nxtweb-site-header.is-menu-open.is-layout-overlay-center ~ .nxtweb-menu-close-floating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   Auto-collapse to hamburger
   When the inline menu has too many items to fit the available width,
   JS adds .is-nav-collapsed and the menu turns into a hamburger/off-canvas
   panel — at ANY viewport width, not just at a fixed mobile breakpoint.
   =========================== */
.nxtweb-site-header.is-nav-collapsed .nxtweb-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(360px, 86vw);
  max-width: 86vw;
  background: var(--nxt-side-menu-bg, color-mix(in srgb, var(--nxt-overlay-menu-bg, #ffffff) calc(var(--nxt-overlay-menu-opacity, 0.98) * 100%), transparent));
  border-left: 1px solid #e5e7eb;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  padding: 5rem 1.25rem 1.25rem;
  /* Keep the first item below the lifted header-inner bar (z-index 60). */
  padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
  scroll-padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
  z-index: 59;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.nxtweb-site-header.is-nav-collapsed.is-overlay-skin-dark .nxtweb-primary-nav {
  color: var(--nxt-side-menu-text, #f9fafb);
}

.nxtweb-site-header.is-nav-collapsed.is-overlay-skin-light .nxtweb-primary-nav {
  color: var(--nxt-side-menu-text, #111827);
}

body.admin-bar .nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav {
  top: 32px;
}

.nxtweb-site-header.is-nav-collapsed.is-menu-open .nxtweb-primary-nav {
  transform: translateX(0);
}

/* Some layouts (e.g. studio-slice) give .nxtweb-site-header-inner its own
   stacking context (position:relative; z-index:1) which traps the fixed nav
   panel BELOW the backdrop. Lifting the inner above the backdrop while the
   collapsed menu is open lets the panel render on top of the dark overlay.
   This is a no-op for layouts where the inner is position:static. */
.nxtweb-site-header.is-nav-collapsed.is-menu-open .nxtweb-site-header-inner {
  z-index: 60;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav ul {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* All top-level drawer items sit flush-left (no indent). The bullet/chevron/dash
   indicator is an inline ::before marker, so it precedes the label without
   indenting the row. Only opened submenus get a left indent (see rule below). */
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li {
  padding-left: 0;
  margin-left: 0;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav ul ul {
  position: static;
  min-width: 0;
  margin-top: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  background: transparent;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .menu-item-has-children.is-submenu-open > ul,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .has-megamenu.is-submenu-open > ul {
  max-height: none;
  padding: 0.35rem 0 0.35rem 1.5rem;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Parent items use display:inline-flex + gap (for the caret), so the flex gap
   is also inserted before the label, pushing parent text ~0.4em further right
   than plain items. Drop the gap and restore caret spacing via margin so every
   top-level label aligns flush. */
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li.menu-item-has-children > a,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li.has-megamenu > a {
  gap: 0;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li.menu-item-has-children > a::after,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li.has-megamenu > a::after {
  margin-left: 0.4em;
}

/* Active page indicator in the mobile drawer */
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .current-menu-item > a,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .current_page_item > a,
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav .current-menu-ancestor > a {
  color: var(--nxt-menu-active, var(--nxt-accent, #2563eb));
  font-weight: 700;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav a {
  font-size: var(--nxt-mobile-menu-font-size, 16px);
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-menu-extra {
  display: none;
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-menu-extra-mobile {
  display: block;
  margin-top: 1rem;
  width: 100%;
}

.nxtweb-site-header.is-nav-collapsed.is-menu-open .nxtweb-menu-backdrop {
  display: block;
}

/* Collapsed drawer close button: use the body-level floating control (a sibling
   of the header, OUTSIDE its clip-path) so position:fixed anchors to the real
   viewport. The studio-slice header's clip-path establishes a containing block
   for fixed/absolute descendants, which on a real device (horizontal page
   overflow / no scrollbar) pushes a header-scoped close button off-screen.
   Keeping the control outside the header avoids that trap entirely. */
.nxtweb-site-header.is-nav-collapsed .nxtweb-menu-close {
  display: none;
}

.nxtweb-site-header.is-nav-collapsed.is-menu-open ~ .nxtweb-menu-close-floating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Measuring helper: force the nav to its natural (non-shrinking) width so the
   script can reliably detect whether the inline menu overflows. This must
   neutralise every inline layout quirk (justify = width:100%/space-between,
   center-split/double = justify-content:center, lateral = column) so the menu
   is measured as a single natural-width horizontal row for ALL menu types. */
.nxtweb-site-header.is-nav-measuring .nxtweb-primary-nav {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

.nxtweb-site-header.is-nav-measuring .nxtweb-primary-nav > ul {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

/* ===========================
   Side menu styling controls
   Applies to the collapsed panel AND the Off Canvas / Overlay panels.
   All values are driven by theme-option CSS vars; unset vars fall back to
   the previous defaults so existing sites are unchanged.
   =========================== */
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav a,
.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav a,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav a,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav a {
  font-size: var(--nxt-side-menu-font-size, var(--nxt-mobile-menu-font-size, 16px));
  font-weight: var(--nxt-side-menu-font-weight, var(--nxt-menu-font-weight, 600));
}

/* Per top-level item: --nxt-omenu-item-fs (Appearance → Menus → "Overlay
   font size") overrides the shared size for that one item. */
.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul > li > a,
.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul > li > a,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a {
  font-size: var(--nxt-omenu-item-fs, var(--nxt-side-menu-font-size, var(--nxt-mobile-menu-font-size, 16px)));
}

.nxtweb-site-header.is-nav-collapsed .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul {
  gap: var(--nxt-side-menu-item-gap, 4px);
}

/* Divider line between top-level items */
.nxtweb-site-header.is-side-divider.is-nav-collapsed .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-side-divider.is-layout-off-canvas .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-side-divider.is-layout-overlay .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-side-divider.is-layout-overlay-center .nxtweb-primary-nav > ul > li {
  width: 100%;
}

.nxtweb-site-header.is-side-divider.is-nav-collapsed .nxtweb-primary-nav > ul > li + li,
.nxtweb-site-header.is-side-divider.is-layout-off-canvas .nxtweb-primary-nav > ul > li + li,
.nxtweb-site-header.is-side-divider.is-layout-overlay .nxtweb-primary-nav > ul > li + li,
.nxtweb-site-header.is-side-divider.is-layout-overlay-center .nxtweb-primary-nav > ul > li + li {
  border-top: 1px solid var(--nxt-side-menu-divider-color, color-mix(in srgb, currentColor 18%, transparent));
  padding-top: var(--nxt-side-menu-item-gap, 4px);
}

/* Item indicator (marker before each top-level item) */
.nxtweb-site-header.is-side-indicator-chevron.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before {
  content: "\203A";
}

.nxtweb-site-header.is-side-indicator-dot.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before {
  content: "\2022";
}

.nxtweb-site-header.is-side-indicator-dash.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before {
  content: "\2013";
}

.nxtweb-site-header.is-side-indicator-chevron.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-chevron.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dot.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-nav-collapsed .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-off-canvas .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-overlay .nxtweb-primary-nav > ul > li > a::before,
.nxtweb-site-header.is-side-indicator-dash.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a::before {
  display: inline-block;
  margin-right: 0.55rem;
  color: var(--nxt-side-menu-indicator-color, currentColor);
  opacity: 0.85;
}

@media (max-width: 782px) {
  .nxtweb-site-header.is-logo-mobile-enabled .nxtweb-logo {
    height: var(--nxt-nav-logo-height-mobile, 50px);
    max-width: min(220px, 58vw);
  }

  .nxtweb-site-header.is-layout-studio-slice {
    --nxt-studio-slice-top-overlap: 0px;
    --nxt-studio-slice-bottom-overlap: 0px;
    --nxt-studio-slice-panel-width: clamp(150px, 46vw, 230px);
    --nxt-studio-slice-panel-gap: 10px;
    --nxt-studio-slice-cut: 24px;
    background: transparent;
    border-bottom-color: var(--nxt-skin-border, #e5e7eb);
  }

  .nxtweb-site-header.is-layout-studio-slice .nxtweb-site-header-inner {
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: calc(var(--nxt-studio-slice-panel-width) + var(--nxt-studio-slice-panel-gap));
    padding-right: 1rem;
  }

  .nxtweb-site-header.is-layout-studio-slice .nxtweb-branding {
    position: absolute;
    left: calc(-1 * var(--nxt-studio-slice-bleed));
    top: 0;
    bottom: 0;
    width: max-content;
    max-width: calc(var(--nxt-studio-slice-bleed) + var(--nxt-studio-slice-panel-width));
    padding: 0 calc(var(--nxt-studio-slice-cut) + 20px) 0 calc(var(--nxt-studio-slice-bleed) + 0.9rem);
    background: #ffffff;
    clip-path: polygon(0 0, calc(100% - var(--nxt-studio-slice-cut)) 0, 100% 100%, 0 100%);
    box-shadow: none;
    border-radius: 0;
    justify-content: flex-start;
  }

  .nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul {
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .nxtweb-site-header.is-layout-studio-slice .nxtweb-primary-nav > ul > li > a {
    text-transform: none;
    font-weight: var(--nxt-menu-font-weight, 600);
  }

  /* In the mobile drawer, top-level links must use the drawer/overlay text
     color — studio-slice forces a dark menu color that is invisible on the
     dark overlay background. */
  .nxtweb-site-header.is-layout-studio-slice.is-nav-collapsed .nxtweb-primary-nav > ul > li > a {
    color: inherit;
  }

  .nxtweb-site-header.is-layout-off-canvas .nxtweb-menu-toggle,
  .nxtweb-site-header.is-layout-overlay .nxtweb-menu-toggle,
  .nxtweb-site-header.is-layout-overlay-center .nxtweb-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nxtweb-site-header.is-layout-lateral .nxtweb-primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
  }

  .nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav,
  .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
  .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    background: var(--nxt-side-menu-bg, color-mix(in srgb, var(--nxt-overlay-menu-bg, #ffffff) calc(var(--nxt-overlay-menu-opacity, 0.98) * 100%), transparent));
    border-left: 1px solid #e5e7eb;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    padding: 5rem 1.25rem 1.25rem;
    /* Clear the lifted header-inner bar (z-index 60) so the first menu item
       isn't hidden behind the logo row on mobile. */
    padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
    scroll-padding-top: max(5.5rem, calc(var(--nxt-nav-logo-height, 70px) + 3rem));
    z-index: 59;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.admin-bar .nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav,
  body.admin-bar .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
  body.admin-bar .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
    top: 46px;
  }

  body.admin-bar .nxtweb-site-header .nxtweb-menu-backdrop {
    top: 46px;
  }

  .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav,
  .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-left: 0;
    justify-content: flex-start;
    align-items: stretch;
  }

  body.admin-bar .nxtweb-site-header .nxtweb-menu-close {
    top: calc(1rem + 46px);
  }

  .nxtweb-site-header.is-layout-overlay.is-contained .nxtweb-primary-nav,
  .nxtweb-site-header.is-layout-overlay-center.is-contained .nxtweb-primary-nav {
    padding-left: max(1.25rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
    padding-right: max(1.25rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
  }

  .nxtweb-site-header.is-layout-overlay.is-contained .nxtweb-menu-close,
  .nxtweb-site-header.is-layout-overlay-center.is-contained .nxtweb-menu-close {
    right: max(1rem, calc((100vw - var(--nxt-layout-width, 1200px)) / 2 + 1.25rem));
  }

  .nxtweb-site-header.is-menu-open.is-layout-off-canvas .nxtweb-primary-nav,
  .nxtweb-site-header.is-menu-open.is-layout-overlay .nxtweb-primary-nav,
  .nxtweb-site-header.is-menu-open.is-layout-overlay-center .nxtweb-primary-nav {
    transform: translateX(0);
  }

  .nxtweb-site-header.is-layout-off-canvas .nxtweb-primary-nav ul,
  .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav ul,
  .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav ul {
    flex-direction: column;
    align-items: flex-start;
  }

  .nxtweb-primary-nav a {
    font-size: var(--nxt-mobile-menu-font-size, 16px);
  }

  .nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav ul,
  .nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav ul {
    align-items: flex-start;
  }

  .nxtweb-menu-extra-mobile {
    display: block;
    margin-top: 1rem;
    width: 100%;
  }

  .nxtweb-menu-extra {
    display: none;
  }

  .site-main {
    padding: 0 1rem;
  }

  /* Hold logo og innholdstekst p\u00e5 samme venstrekant ogs\u00e5 p\u00e5 mobil */
  .nxtweb-site-header-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.nxtweb-site-footer {
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.nxtweb-site-footer-main,
.nxtweb-site-footer-copyright {
  width: 100%;
}

.nxtweb-site-footer-inner {
  /* border-box so width:100% + padding stays within the viewport. Without this
     the full-width footer (width:100% + 1rem padding, content-box) renders ~32px
     wider than the page, causing a small horizontal scroll on every page. */
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.nxtweb-site-footer.is-full-width .nxtweb-site-footer-inner {
  max-width: none;
  width: 100%;
}

.nxtweb-site-footer.is-full-width .nxtweb-site-footer-main .nxtweb-site-footer-inner {
  padding: 0;
}

.nxtweb-site-footer-main .nxtweb-layout {
  margin: 0;
}

.nxtweb-site-footer-copyright {
  border-top: 1px solid #e5e7eb;
  background: var(--nxt-footer-copyright-bg, #fafafa);
}

.nxtweb-site-footer-copyright p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--nxt-footer-copyright-text, #4b5563);
  line-height: 1.4;
}

.nxtweb-site-footer-copyright.is-align-left .nxtweb-site-footer-inner {
  text-align: left;
}

.nxtweb-site-footer-copyright.is-align-center .nxtweb-site-footer-inner {
  text-align: center;
}

.nxtweb-site-footer-copyright.is-align-right .nxtweb-site-footer-inner {
  text-align: right;
}
/* Link colors based on skin */
.nxtweb-site-header.is-primary-skin-light a,
.nxtweb-site-header.is-primary-skin-dark a {
  color: inherit;
  text-decoration: none;
}

.nxtweb-site-header.is-primary-skin-light a:hover,
.nxtweb-site-header.is-primary-skin-dark a:hover {
  text-decoration: underline;
}

.nxtweb-site-header.is-primary-skin-light a {
  color: var(--nxt-skin-link-color, inherit);
}

.nxtweb-site-header.is-primary-skin-light a:hover {
  color: var(--nxt-skin-link-hover-color, inherit);
}

.nxtweb-site-header.is-primary-skin-dark a {
  color: var(--nxt-skin-link-color, inherit);
}

.nxtweb-site-header.is-primary-skin-dark a:hover {
  color: var(--nxt-skin-link-hover-color, inherit);
}

/* Final overlay alignment model: one source of truth for menu items */
.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul {
  width: 100%;
  max-width: var(--nxt-layout-width, 1200px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul > li,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul > li {
  width: 100%;
  max-width: 100%;
}

.nxtweb-site-header.is-layout-overlay .nxtweb-primary-nav > ul > li > a,
.nxtweb-site-header.is-layout-overlay-center .nxtweb-primary-nav > ul > li > a {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-left .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-left .nxtweb-primary-nav > ul {
  margin-left: 0;
  margin-right: auto;
  align-items: flex-start;
  text-align: left;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-center .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-center .nxtweb-primary-nav > ul {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}

.nxtweb-site-header.is-layout-overlay.is-menu-h-align-right .nxtweb-primary-nav > ul,
.nxtweb-site-header.is-layout-overlay-center.is-menu-h-align-right .nxtweb-primary-nav > ul {
  margin-left: auto;
  margin-right: 0;
  align-items: flex-end;
  text-align: right;
}

/* ===========================
   Megamenu panel
   =========================== */

/* Let the panel escape the li's bounds and anchor to the header */
.nxtweb-primary-nav li.has-megamenu {
  position: static;
}

.nxtweb-megamenu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 65;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.nxtweb-site-header.is-dropdown-anim-none .nxtweb-megamenu-panel {
  transition: none;
  transform: none;
}

.nxtweb-site-header.is-dropdown-anim-fade .nxtweb-megamenu-panel {
  transition: opacity 0.18s ease, visibility 0.18s ease;
  transform: none;
}

/* Hover mode: show on hover / focus-within */
.nxtweb-site-header:not(.is-dropdown-on-click) .nxtweb-primary-nav li.has-megamenu:hover > .nxtweb-megamenu-panel,
.nxtweb-site-header:not(.is-dropdown-on-click) .nxtweb-primary-nav li.has-megamenu:focus-within > .nxtweb-megamenu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Click mode: show when is-submenu-open is added by JS */
.nxtweb-site-header.is-dropdown-on-click .nxtweb-primary-nav li.has-megamenu.is-submenu-open > .nxtweb-megamenu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Skin colours for the panel (inherit from the submenu skin) */
.nxtweb-site-header.is-submenu-skin-dark .nxtweb-megamenu-panel {
  background: var(--nxt-skin-submenu-bg, #1f2937);
  color: var(--nxt-skin-menu-text, #f9fafb);
}

.nxtweb-site-header.is-submenu-skin-light .nxtweb-megamenu-panel {
  background: var(--nxt-skin-submenu-bg, #ffffff);
  color: var(--nxt-skin-menu-text, inherit);
}

/* Strip inner block padding so the panel fills edge-to-edge */
.nxtweb-megamenu-panel .nxtweb-megamenu-block {
  margin: 0;
}

/* Mobile: collapse into a static block inside the open mobile menu */
@media (max-width: 768px) {
  .nxtweb-megamenu-panel {
    position: static;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }

  .nxtweb-primary-nav li.has-megamenu.is-submenu-open > .nxtweb-megamenu-panel {
    display: block;
  }
}