/**
 * Public marketing site layout — load on pages using res/end.php (home, pages/*).
 *
 * Fixed header flush to viewport top; content offset via header + sibling margin.
 */

:root {
  --public-header-height: 70px;
  --z-header: 200;
  --z-overlay: 900;
  --z-public-sidebar: 1100;
  --public-sidebar-width: 325px;
}

body.has-public-site {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.has-public-site .header-menu-area {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fff;
  z-index: var(--z-header, 200) !important;
  overflow: visible !important;
}

body.has-public-site .header-menu-area .header-menu-content {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: 100% !important;
  position: relative !important;
  top: auto !important;
  overflow: visible !important;
}

body.has-public-site .header-menu-area .container-fluid,
body.has-public-site .header-menu-area .main-menu-content,
body.has-public-site .header-menu-area .row,
body.has-public-site .header-menu-area .col-lg-2,
body.has-public-site .header-menu-area .col-lg-10,
body.has-public-site .header-menu-area .col-lg-12,
body.has-public-site .header-menu-area .menu-wrapper,
body.has-public-site .header-menu-area .nav-right-button,
body.has-public-site .header-menu-area .user-action-wrap,
body.has-public-site .header-menu-area .logo-box {
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

body.has-public-site .header-menu-area .menu-wrapper {
  padding-bottom: 0 !important;
  align-items: center;
  min-height: var(--public-header-height);
}

body.has-public-site .header-menu-area .logo-box {
  min-height: var(--public-header-height);
  align-items: center;
  padding-bottom: 0 !important;
}

/* First page section sits below the fixed public header */
body.has-public-site > header.header-menu-area + * {
  margin-top: var(--public-header-height) !important;
}

[data-theme="dark"] body.has-public-site .header-menu-area {
  background-color: var(--nav-bg, #0d1117);
}

/*
 * Mobile menu portal (sibling of header, not inside fixed header stacking context).
 * Overlay dims content to the right of the sidebar only — sidebar stays clickable.
 */
body.has-public-site .main-off-canvas-menu:not(.active) {
  transform: translate3d(-100%, 0, 0) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.has-public-site .main-off-canvas-menu.active {
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: var(--z-public-sidebar) !important;
}

body.has-public-site .main-off-canvas-menu .main-menu-close {
  z-index: calc(var(--z-public-sidebar) + 1) !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

body.has-public-site .body-overlay {
  z-index: var(--z-overlay) !important;
}

body.has-public-site .body-overlay:not(.active) {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.has-public-site .body-overlay.active {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 1199px) {
  body.has-public-site .body-overlay.active {
    left: var(--public-sidebar-width) !important;
    width: calc(100% - var(--public-sidebar-width)) !important;
  }
}

@media (max-width: 375px) {
  body.has-public-site .body-overlay.active {
    left: 320px !important;
    width: calc(100% - 320px) !important;
  }
}

@media (max-width: 1199px) {
  :root {
    --public-header-height: 56px;
  }

  body.has-public-site .header-menu-area .header-menu-content.pr-150px,
  body.has-public-site .header-menu-area .header-menu-content.pl-150px {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 575.98px) {
  body.has-public-site .header-menu-area .header-menu-content.pr-150px,
  body.has-public-site .header-menu-area .header-menu-content.pl-150px {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Logged-in avatar menu (matches dashboard user-profile-cart) */
body.has-public-site .header-menu-area .user-profile-cart {
  position: relative;
  z-index: 5;
}

body.has-public-site .header-menu-area .user-profile-cart .shop-cart-btn {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--public-header-height);
}

body.has-public-site .header-menu-area .user-profile-cart .cart-dropdown-menu {
  right: 0;
  left: auto;
  z-index: calc(var(--z-header, 200) + 20);
}

/* Nav + theme toggle: one horizontal line, vertically centered in header */
body.has-public-site .header-menu-area .main-menu {
  margin-right: 12px;
}

body.has-public-site .header-menu-area .main-menu > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  min-height: var(--public-header-height);
}

body.has-public-site .header-menu-area .main-menu > ul > li {
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
  height: var(--public-header-height);
  vertical-align: middle;
}

body.has-public-site .header-menu-area .main-menu > ul > li > a {
  display: inline-flex;
  align-items: center;
  height: var(--public-header-height);
  padding-bottom: 0 !important;
  line-height: 1.2;
}

/* Sun/moon theme control after nav links */
body.has-public-site .header-menu-area .main-menu > ul > li.nav-theme-item {
  margin-left: 4px;
  margin-right: 0;
  padding-left: 4px;
}

body.has-public-site .header-menu-area .main-menu > ul > li.nav-theme-item .theme-picker-compact {
  height: var(--public-header-height);
  align-items: center;
}

body.has-public-site .header-menu-area .main-menu > ul > li.nav-theme-item .theme-picker-compact .theme-picker-btn {
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: #233d63;
  box-shadow: none !important;
}

[data-theme="dark"] body.has-public-site .header-menu-area .main-menu > ul > li.nav-theme-item .theme-picker-compact .theme-picker-btn {
  color: var(--text-primary, #eef2f6);
}

/* Public header: mobile theme + avatar (match hamburger breakpoint @ 1199) */
@media (max-width: 1199.98px) {
  body.has-public-site .header-menu-area .public-header-theme-mobile {
    display: flex !important;
  }

  body.has-public-site .header-menu-area .public-header-avatar-mobile {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.has-public-site .header-menu-area .public-header-avatar-desktop {
    display: none !important;
  }

  body.has-public-site .header-menu-area .logo-box .user-btn-action {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 8px;
  }

  body.has-public-site .header-menu-area .public-header-avatar-mobile .user-profile-cart,
  body.has-public-site .header-menu-area .public-header-avatar-mobile .shop-cart-btn,
  body.has-public-site .header-menu-area .public-header-avatar-mobile .avatar-xs,
  body.has-public-site .header-menu-area .public-header-avatar-mobile .avatar-xs img {
    display: flex !important;
    visibility: visible !important;
  }

  body.has-public-site .header-menu-area .public-header-avatar-mobile .avatar-xs img {
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
  }
}

@media (min-width: 1200px) {
  body.has-public-site .header-menu-area .public-header-theme-mobile,
  body.has-public-site .header-menu-area .public-header-avatar-mobile {
    display: none !important;
  }

  body.has-public-site .header-menu-area .public-header-avatar-desktop {
    display: flex !important;
  }
}

/* Mobile: avatar sits with search / theme / hamburger */
body.has-public-site .header-menu-area .public-header-avatar-mobile .user-profile-cart .shop-cart-btn,
body.has-public-site .header-menu-area .header-avatar-mobile .user-profile-cart .shop-cart-btn {
  min-height: 36px;
  padding: 0;
}

body.has-public-site .header-menu-area .public-header-avatar-mobile .cart-dropdown-menu,
body.has-public-site .header-menu-area .header-avatar-mobile .cart-dropdown-menu {
  right: 0;
  left: auto;
  min-width: 260px;
}

/* Tap-friendly open for mobile avatar menu (hover alone is unreliable) */
@media (max-width: 1199.98px) {
  body.has-public-site .header-menu-area .public-header-avatar-mobile .user-profile-cart > ul > li.is-open .cart-dropdown-menu,
  body.has-public-site .header-menu-area .public-header-avatar-mobile .user-profile-cart > ul > li:focus-within .cart-dropdown-menu,
  body.has-public-site .header-menu-area .header-avatar-mobile .user-profile-cart > ul > li:focus-within .cart-dropdown-menu {
    opacity: 1;
    visibility: visible;
    top: 45px;
  }
}

/* AI discoverability factual blocks (Phase 6) */
body.has-public-site .ai-discoverability-area {
  background: linear-gradient(180deg, rgba(11, 61, 74, 0.04) 0%, transparent 100%);
}

body.has-public-site .ai-discoverability-item {
  border-bottom: 1px solid rgba(11, 61, 74, 0.12);
}

body.has-public-site .ai-discoverability-item:last-child {
  border-bottom: 0;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}