/**
 * Kreatif Agency Theme — global header and Services mega menu.
 *
 * Markup contract (native Bricks Nav Nested + Dropdown mega menu):
 * - .site-header on the header template root section
 * - .site-header__inner on the full-width inner row (padding only; no max-width)
 * - .site-nav on the nav-nested element
 * - .mega-menu on the dropdown content wrapper (full width of #brx-header)
 * - .mega-menu__link on each service destination link
 * - .mobile-nav__toggle on open/close toggle elements
 *
 * Interaction/layout details that native Bricks controls cannot express cleanly.
 */

html {
  scrollbar-gutter: stable;
}

.site-header {
  position: relative;
  z-index: 30;
  width: 100%;
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  font: var(--font-weight-regular) var(--font-size-body) / 1.2 var(--font-family-primary);
}

.site-header__inner {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  gap: var(--space-m);
  min-height: 4.5rem;
  margin-inline: 0 !important;
  padding-block: var(--space-s);
  padding-inline: var(--padding-inline);
  overflow: visible;
}

.site-header__brand {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  width: clamp(7.5rem, 18vw, 9.5rem);
  min-height: 44px;
  height: 2.75rem;
  background: url("../brand/kreatif-logo.svg") left center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

.site-header__brand:focus-visible {
  color: transparent !important;
}

.site-nav {
  display: inline-flex !important;
  flex: 0 1 auto;
  margin-inline-start: auto;
  justify-content: flex-end;
  align-items: center;
}

.site-nav .brx-nav-nested-items {
  align-items: center;
  gap: var(--space-l);
}

.site-nav__link,
.site-nav__trigger .brx-submenu-toggle,
.site-nav__trigger .brx-submenu-toggle > *,
.site-nav__trigger .brx-submenu-toggle > span,
.site-nav .brx-nav-nested-items > li > a,
.site-nav .brx-nav-nested-items > li > .brxe-text-link {
  color: var(--color-text);
  font-family: var(--font-family-primary);
  /* Fixed px: --font-size-body resolves ~12.5px under this root rem scale */
  font-size: 18px !important;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__trigger .brx-submenu-toggle:hover > *,
.site-nav .brx-nav-nested-items > li > a:hover {
  color: var(--color-accent-hover);
}

.site-nav__trigger .brx-submenu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
}

.site-nav__trigger .brx-submenu-toggle button {
  color: currentColor;
}

.site-nav__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-m);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-family: var(--font-family-primary);
  font-size: 18px !important;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
}

.site-nav__contact:hover,
.site-nav__contact:focus-visible {
  border-color: var(--color-accent-hover);
  color: var(--color-accent);
}

/* Mega menu panel — full width of the header landmark */
.brxe-dropdown.brx-has-megamenu > .brx-dropdown-content,
.brx-has-megamenu > .mega-menu,
.brx-has-megamenu > .brx-dropdown-content.mega-menu,
#brxe-n0csw5 > .brx-dropdown-content,
#brxe-p5rd06.brx-dropdown-content {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: none !important;
  box-sizing: border-box;
  padding: var(--space-l) 0 var(--space-xl);
  background-color: var(--color-bg);
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

/* Align full-viewport mega panel to the left edge of the viewport from header context */
#brx-header {
  overflow: visible;
}

#brx-header .brx-has-megamenu {
  position: static;
}

#brx-header .brx-has-megamenu.open > .brx-dropdown-content,
#brx-header .brx-has-megamenu:hover > .brx-dropdown-content {
  left: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  animation: mega-menu-reveal 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mega-menu-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scaleY(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.mega-menu__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--padding-inline);
  box-sizing: border-box;
}

.mega-menu__column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mega-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  min-height: 44px;
  padding-block: var(--space-m);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  font: var(--font-weight-medium) var(--font-size-h4) / var(--line-height-heading) var(--font-family-primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    color var(--transition-duration) var(--transition-easing),
    border-color var(--transition-duration) var(--transition-easing);
}

.mega-menu__link::after {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  content: "";
  background-color: currentColor;
  transition: transform var(--transition-duration) var(--transition-easing);
  -webkit-mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

.mega-menu__link:hover::after,
.mega-menu__link:focus-visible::after {
  transform: translateX(0.25rem);
}

.mega-menu__link:focus-visible,
.site-nav__link:focus-visible,
.site-nav__contact:focus-visible,
.site-header__brand:focus-visible,
.site-nav__trigger .brx-submenu-toggle > *:focus-visible,
.mobile-nav__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Mobile toggle — base chrome; visibility by breakpoint still belongs to Bricks. */
.mobile-nav__toggle {
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav__toggle::before,
.mobile-nav__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  background-color: currentColor;
  transform-origin: center;
  transition:
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav__toggle::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  -webkit-mask: url("../icons/phosphor/list.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/list.svg") center / contain no-repeat;
}

.mobile-nav__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg) scale(0.7);
  -webkit-mask: url("../icons/phosphor/x.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/x.svg") center / contain no-repeat;
}

.mobile-nav__toggle.is-active::before,
.site-nav.brx-open > .mobile-nav__toggle::before {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
}

.mobile-nav__toggle.is-active::after,
.site-nav.brx-open > .mobile-nav__toggle::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

/* Hide default Bricks hamburger bars when using icon masks */
.mobile-nav__toggle .brxa-wrap,
.mobile-nav__toggle .brxa-inner {
  display: none;
}

/* -------------------------------------------------------------------------
 * Mobile layout (Bricks mobileMenu: tablet_portrait = max-width 991px)
 * Bar stays one row (logo + toggle). Panel is a full-width overlay under it.
 * Single toggle: hamburger closed → green X when open (no second control).
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .site-header,
  #brx-header {
    overflow: visible;
  }

  .site-nav {
    position: static;
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
  }

  /* Keep the bar toggle in the header row — never in the item list flow */
  .site-nav > .mobile-nav__toggle--open,
  .site-nav > .brx-toggle-div.mobile-nav__toggle--open,
  #brxe-ruptsq {
    position: absolute !important;
    top: 50% !important;
    right: var(--padding-inline) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 60;
    flex: 0 0 auto;
    display: inline-flex !important;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  .site-nav.brx-open > .mobile-nav__toggle--open,
  .site-nav.brx-open > .brx-toggle-div.mobile-nav__toggle--open,
  #brxe-68y2a3.brx-open > #brxe-ruptsq {
    position: absolute !important;
    top: 50% !important;
    right: var(--padding-inline) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 60;
    display: inline-flex !important;
    margin: 0 !important;
    transform: translateY(-50%);
    background-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
  }

  .site-nav.brx-open > .mobile-nav__toggle--open::before,
  .site-nav.brx-open > .brx-toggle-div.mobile-nav__toggle--open::before,
  #brxe-68y2a3.brx-open > #brxe-ruptsq::before {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
    -webkit-mask: url("../icons/phosphor/list.svg") center / contain no-repeat;
    mask: url("../icons/phosphor/list.svg") center / contain no-repeat;
  }

  .site-nav.brx-open > .mobile-nav__toggle--open::after,
  .site-nav.brx-open > .brx-toggle-div.mobile-nav__toggle--open::after,
  #brxe-68y2a3.brx-open > #brxe-ruptsq::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  /* Full-width overlay panel under the slim header bar */
  .site-nav.brx-open > .brx-nav-nested-items,
  #brxe-68y2a3.brx-open > #brxe-qenbgs {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 40;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 4.5rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    margin: 0 !important;
    padding: var(--space-m) var(--padding-inline) var(--space-xl) !important;
    background:
      linear-gradient(180deg, rgba(24, 29, 35, 0.36), rgba(11, 13, 16, 0) 7rem),
      var(--color-bg);
    border-top: var(--border-width) solid var(--color-border);
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.42);
    transform-origin: top center;
    animation: mobile-menu-reveal 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-nav.brx-open .brx-nav-nested-items > li,
  #brxe-68y2a3.brx-open > #brxe-qenbgs > li {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: mobile-menu-item-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-nav.brx-open .brx-nav-nested-items > li:nth-child(1) {
    animation-delay: 50ms;
  }

  .site-nav.brx-open .brx-nav-nested-items > li:nth-child(2) {
    animation-delay: 90ms;
  }

  .site-nav.brx-open .brx-nav-nested-items > li:nth-child(3) {
    animation-delay: 130ms;
  }

  .site-nav.brx-open .brx-nav-nested-items > li:nth-child(4) {
    animation-delay: 170ms;
  }

  .site-nav.brx-open .brx-nav-nested-items > li:nth-child(5) {
    animation-delay: 210ms;
  }

  .site-nav.brx-open .brx-nav-nested-items > li > a,
  .site-nav.brx-open .brx-nav-nested-items > li > .brxe-text-link,
  .site-nav.brx-open .site-nav__trigger,
  .site-nav.brx-open .site-nav__trigger .brx-submenu-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .site-nav.brx-open .site-nav__link,
  .site-nav.brx-open .site-nav__trigger .brx-submenu-toggle > *,
  .site-nav.brx-open .brx-nav-nested-items > li > a {
    padding-block: var(--space-s);
  }

  /* Legacy / stray close control if present — never show beside the list */
  .site-nav .brx-nav-nested-items > li:has(> .mobile-nav__toggle--close),
  .site-nav .brx-nav-nested-items > li:has(> .brx-toggle-div.mobile-nav__toggle--close),
  .mobile-nav__toggle--close {
    display: none !important;
  }

  /* Keep the Services destinations in the Services item flow on mobile. */
  .site-nav.brx-open .brx-has-megamenu.open > .brx-dropdown-content,
  .site-nav.brx-open .brx-has-megamenu.open > .mega-menu,
  #brxe-68y2a3.brx-open #brxe-n0csw5.open > #brxe-p5rd06 {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 var(--space-s) !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform-origin: top center;
    animation: mobile-submenu-reveal 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-nav.brx-open .mega-menu__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-inline: 0;
  }

  .site-nav.brx-open .mega-menu__link {
    font-size: 18px !important;
    padding-block: var(--space-s);
    animation: mobile-menu-item-reveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-nav.brx-open .mega-menu__column:nth-child(1) .mega-menu__link:nth-child(1) {
    animation-delay: 40ms;
  }

  .site-nav.brx-open .mega-menu__column:nth-child(1) .mega-menu__link:nth-child(2) {
    animation-delay: 80ms;
  }

  .site-nav.brx-open .mega-menu__column:nth-child(2) .mega-menu__link:nth-child(1) {
    animation-delay: 120ms;
  }

  .site-nav.brx-open .mega-menu__column:nth-child(2) .mega-menu__link:nth-child(2) {
    animation-delay: 160ms;
  }

  .site-nav.brx-open .mega-menu__link::after {
    display: none;
  }

  .site-nav.brx-open .site-nav__contact {
    margin-top: var(--space-s);
    width: 100%;
    box-sizing: border-box;
  }
}

@keyframes mobile-menu-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.75rem) scaleY(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes mobile-menu-item-reveal {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobile-submenu-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu__link,
  .mega-menu__link::after,
  .site-nav__link,
  .site-nav__contact,
  .mobile-nav__toggle,
  .mobile-nav__toggle::before,
  .mobile-nav__toggle::after {
    transition-duration: 0.01ms !important;
  }

  #brx-header .brx-has-megamenu > .brx-dropdown-content,
  .site-nav.brx-open > .brx-nav-nested-items,
  .site-nav.brx-open .brx-nav-nested-items > li,
  .site-nav.brx-open .mega-menu__link {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  .mega-menu__link:hover::after,
  .mega-menu__link:focus-visible::after {
    transform: none;
  }
}