/* ==========================================================================
   SaaS-style top navigation
   Layout replicated from the reference design; colours from 365sentri.com
   (primary purple #5b3fd1, navy #1b1f3b, muted #8b91a9).
   Desktop breakpoint: 1280px (matches the reference xl breakpoint).
   ========================================================================== */

:root {
  --tn-accent: #5b3fd1;
  --tn-accent-hover: #4a32b0;
  --tn-black: #1a1a2e;
  --tn-foreground: #1b1f3b;
  --tn-muted: #8b91a9;
  --tn-border: #e6e4f0;
  --tn-card-bg: #ffffff;
  --tn-white: #ffffff;
  --tn-hover-bg: #f5f2fc;
  --tn-font: 'Plus Jakarta Sans', sans-serif;
  --topnav-height: 84px; /* JS keeps this accurate */
}

/* Push page content below the fixed header */
body {
  padding-top: var(--topnav-height);
}

/* --------------------------------------------------------------------------
   Header shell
   -------------------------------------------------------------------------- */
.topnav-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--tn-font);
}

body.admin-bar .topnav-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* White nav card */
.topnav-navwrap {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
}

.topnav {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 80rem;
  padding: 0 16px;
  background: var(--tn-card-bg);
  border: 1px solid var(--tn-border);
  border-radius: 16px;
  transition: box-shadow 0.3s;
}

.topnav-header.is-scrolled .topnav {
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08);
}

.topnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  padding: 8px 0;
}

/* Logo */
.topnav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.topnav__logo img {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.topnav__sitename {
  font-size: 20px;
  font-weight: 600;
  color: var(--tn-foreground);
}

/* --------------------------------------------------------------------------
   Desktop menu (WordPress .topnav-menu output)
   -------------------------------------------------------------------------- */
.topnav__menu {
  display: none;
}

.topnav-menu {
  display: flex;
  /* Items stretch to the full row height so a dropdown positioned off an
     item's bottom edge lands exactly on the card's bottom border, whatever
     sets the row height (e.g. the taller CTA buttons). */
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topnav-menu > li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

.topnav-menu > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  font-size: 15px;
  white-space: nowrap;
  color: var(--tn-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.topnav-menu > li > a:hover,
.topnav-menu > li.is-open > a {
  color: var(--tn-accent);
}

/* Chevron (injected by JS) */
.topnav-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  transition: transform 0.3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.topnav-menu > li.is-open > a .topnav-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel — blends into the nav card: its top edge sits over the
   card's bottom border (same background covers it), square top corners,
   rounded bottom corners only. Shared by menu dropdowns and the log-in
   region dropdown. */
.topnav-login__panel,
.topnav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px); /* li bottom + row padding = card's bottom border */
  left: -12px;
  z-index: 30;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--tn-card-bg);
  border: 1px solid var(--tn-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 32px -8px rgba(16, 24, 40, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.topnav-menu > li.is-open > .sub-menu,
.topnav-login.is-open > .topnav-login__panel {
  opacity: 1;
  visibility: visible;
}

/* Inverted top corners: concave 12px fillets sweeping from the nav card's
   bottom edge into the panel sides, so the panel reads as growing out of
   the bar. The radial gradient paints the area outside a quarter-circle in
   the card colour and traces the 1px border along the curve. */
.topnav-login__panel::before,
.topnav-login__panel::after,
.topnav-menu .sub-menu::before,
.topnav-menu .sub-menu::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.topnav-login__panel::before,
.topnav-menu .sub-menu::before {
  left: -12px;
  background: radial-gradient(circle at 0 100%,
    rgba(255, 255, 255, 0) 11px,
    var(--tn-border) 11.5px,
    var(--tn-card-bg) 12.5px);
}

.topnav-login__panel::after,
.topnav-menu .sub-menu::after {
  right: -12px;
  background: radial-gradient(circle at 100% 100%,
    rgba(255, 255, 255, 0) 11px,
    var(--tn-border) 11.5px,
    var(--tn-card-bg) 12.5px);
}

.topnav-login__panel li,
.topnav-menu .sub-menu li {
  margin: 0;
}

.topnav-login__panel a,
.topnav-menu .sub-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 15px;
  color: var(--tn-foreground);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.topnav-login__panel a:hover,
.topnav-menu .sub-menu a:hover {
  background: var(--tn-hover-bg);
  color: var(--tn-accent);
}

/* Rich items ("supermenu"): bold title + wrapping headline underneath.
   Rendered when the WordPress menu item has a Description. */
.topnav-menu .sub-menu:has(.topnav-has-desc) {
  min-width: 340px;
  max-width: 420px;
}

.topnav-menu .sub-menu .topnav-has-desc a {
  white-space: normal;
}

.topnav-sub__title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--tn-foreground);
  transition: color 0.15s;
}

.topnav-sub__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tn-muted);
}

.topnav-menu .sub-menu .topnav-has-desc a:hover .topnav-sub__title {
  color: var(--tn-accent);
}

/* --------------------------------------------------------------------------
   Log in (region dropdown, desktop CTA cluster)
   -------------------------------------------------------------------------- */
.topnav-login {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.topnav-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  background: none;
  border: 0;
  font-family: var(--tn-font);
  font-size: 15px;
  white-space: nowrap;
  color: var(--tn-foreground);
  cursor: pointer;
  transition: color 0.2s;
}

.topnav-login__btn:hover,
.topnav-login.is-open > .topnav-login__btn {
  color: var(--tn-accent);
}

.topnav-login.is-open > .topnav-login__btn .topnav-chevron {
  transform: rotate(180deg);
}

/* Right-align the log-in panel to its trigger */
.topnav-login__panel {
  left: auto;
  right: -12px;
  min-width: 200px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.topnav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 24px;
  font-family: var(--tn-font);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

/* Text colours carry !important + header scoping so the theme's global
   link/hover rules (martex-theme.css, Elementor kit) can't repaint them. */
.topnav-header a.topnav-btn--solid,
.topnav-header a.topnav-btn--solid:hover,
.topnav-header a.topnav-btn--solid:focus,
.topnav-header a.topnav-btn--solid:visited {
  color: #fff !important;
}

.topnav-header a.topnav-btn--outline,
.topnav-header a.topnav-btn--outline:hover,
.topnav-header a.topnav-btn--outline:focus,
.topnav-header a.topnav-btn--outline:visited {
  color: var(--tn-foreground) !important;
}

.topnav-btn--solid {
  background: var(--tn-accent);
  color: #fff;
  border: 1px solid var(--tn-accent);
}

.topnav-btn--solid:hover {
  background: var(--tn-accent-hover);
  border-color: var(--tn-accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 0 rgba(27, 31, 59, 0.16);
}

.topnav-btn--outline {
  background: var(--tn-white);
  color: var(--tn-foreground);
  border: 1px solid var(--tn-border);
}

.topnav-btn--outline:hover {
  background: var(--tn-hover-bg);
  color: var(--tn-foreground);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
}

.topnav-btn--sm {
  height: 32px;
  padding: 4px 12px;
}

/* Desktop CTA cluster (stretches so the log-in dropdown lands flush on the
   card's bottom edge) */
.topnav__ctas {
  display: none;
  align-items: center;
  align-self: stretch;
  gap: 16px;
  margin-left: auto;
}

.topnav__divider {
  width: 1px;
  height: 20px;
  background: var(--tn-border);
}

/* --------------------------------------------------------------------------
   Mobile actions + hamburger
   -------------------------------------------------------------------------- */
.topnav__mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* While the mobile panel is open, hide the compact CTA — the panel already
   has the full buttons at the bottom, and this keeps the close X in place
   on narrow screens. JS also adds .is-clipped when the bar is too narrow to
   fit logo + button + burger. */
.topnav-header.is-menu-open .topnav__mobile-actions .topnav-btn,
.topnav__mobile-actions .topnav-btn.is-clipped {
  display: none;
}

.topnav__burger {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  color: var(--tn-foreground);
  cursor: pointer;
}

.topnav__burger-box {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}

.topnav__burger-bar {
  position: absolute;
  left: 0;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: all 0.3s;
}

.topnav__burger-bar:nth-child(1) { top: 3px; }
.topnav__burger-bar:nth-child(2) { top: 9px; }
.topnav__burger-bar:nth-child(3) { top: 15px; }

.topnav__burger[aria-expanded="true"] .topnav__burger-bar:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.topnav__burger[aria-expanded="true"] .topnav__burger-bar:nth-child(2) {
  opacity: 0;
}

.topnav__burger[aria-expanded="true"] .topnav__burger-bar:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile slide-down panel
   -------------------------------------------------------------------------- */
.topnav__mobile {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.topnav__mobile.is-open {
  max-height: calc(100vh - 140px);
  opacity: 1;
}

.topnav__mobile-scroll {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 16px 8px 24px;
}

.topnav-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
}

.topnav-mobile-menu li {
  margin: 0;
}

.topnav-mobile-menu > li > a {
  color: var(--tn-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

.topnav-mobile-menu > li > a:hover {
  color: var(--tn-accent);
}

/* Parent rows: link + chevron toggle button (button injected by JS).
   The whole row toggles (JS), so keep the hit box tall and full-width. */
.topnav-mobile-menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.topnav-mobile-menu > li.menu-item-has-children > a {
  flex: 1;
  padding: 6px 0;
}

.topnav-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--tn-foreground);
  cursor: pointer;
}

.topnav-mobile-toggle .topnav-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}

.topnav-mobile-toggle[aria-expanded="true"] .topnav-chevron {
  transform: rotate(180deg);
}

.topnav-mobile-menu .sub-menu {
  flex-basis: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.topnav-mobile-menu li.is-open > .sub-menu {
  max-height: 600px;
  opacity: 1;
  margin-top: 10px;
}

.topnav-mobile-menu .sub-menu li {
  margin: 0 0 10px;
}

.topnav-mobile-menu .sub-menu a {
  font-size: 16px;
  font-weight: 400;
  color: var(--tn-muted);
  text-decoration: none;
}

.topnav-mobile-menu .sub-menu a:hover {
  color: var(--tn-foreground);
  font-weight: 600;
}

.topnav__mobile-hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--tn-border);
}

/* Mobile log-in region list */
.topnav-mobile-login__label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--tn-foreground);
}

.topnav-mobile-login__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}

.topnav-mobile-login__list a {
  font-size: 16px;
  color: var(--tn-muted);
  text-decoration: none;
}

.topnav-mobile-login__list a:hover {
  color: var(--tn-accent);
}

.topnav__mobile-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.topnav__mobile-ctas .topnav-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Desktop (>= 1280px, the reference xl breakpoint)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* Card hangs from the top of the viewport: flush top, rounded bottom
     corners */
  .topnav-navwrap {
    padding: 0 24px;
  }

  .topnav {
    padding: 0 8px 0 24px;
    border-top: 0;
    border-radius: 0 0 16px 16px;
  }

  .topnav__logo img {
    height: 28px;
  }

  .topnav__menu {
    display: flex;
    align-self: stretch;
  }

  .topnav__ctas {
    display: flex;
  }

  .topnav__mobile-actions,
  .topnav__mobile {
    display: none;
  }
}

/* Narrow-desktop tier: just past the breakpoint the row is tight, so pull
   the spacing in until there's room to breathe. Items never wrap — they
   stay on one line at reduced padding instead. */
@media (min-width: 1280px) and (max-width: 1449px) {
  .topnav {
    padding: 0 8px 0 16px;
  }

  .topnav__row {
    gap: 12px;
  }

  .topnav-menu {
    gap: 0;
  }

  .topnav-menu > li > a,
  .topnav-login__btn {
    padding: 0 8px;
    font-size: 14px;
  }

  .topnav__ctas {
    gap: 10px;
  }

  .topnav-btn {
    padding: 8px 16px;
  }
}