/* Hide Avada header/titlebar on landing pages so your custom header wins */
body.cl-no-scroll { overflow: hidden; }
body.cl-landing .fusion-header-wrapper,
body.cl-landing .fusion-header,
body.cl-landing .fusion-header-v1,
body.cl-landing .fusion-header-v2,
body.cl-landing .fusion-header-v3,
body.cl-landing .fusion-header-v4,
body.cl-landing .fusion-tb-header,              /* Avada Header Builder */
body.cl-landing .fusion-page-title-bar,
body.cl-landing .fusion-secondary-header,
body.cl-landing .fusion-header-sticky-height,
body.cl-landing .fusion-sticky-header-wrapper,
body.cl-landing .fusion-sticky-header,
body.cl-landing header.fusion-header-wrapper,
body.cl-landing header.fusion-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Header wrapper */
.cl-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 16px 48px;
}

/* WP admin bar offset */
body.admin-bar .cl-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .cl-header { top: 46px; }
}

.cl-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  gap: 16px;
}

.cl-logo img {
  height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Nav styles */
.cl-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.cl-nav a {
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
}

.cl-nav a:hover {
  opacity: 1;
}

/* Match your "Search" emphasis */
.cl-active {
  font-weight: 800;
}

/* CTA button */
.cl-cta {
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  padding: 10px 24px;
  border-radius: 999px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Spacer so content doesn't sit under fixed header */
.cl-header-spacer {
  height: 120px;
}
body.admin-bar .cl-header-spacer { height: 152px; } /* gives breathing room under admin bar */

/* -----------------------------
   Mobile hamburger + menu styles
   (requires markup: .cl-burger, .cl-mobile-menu, .cl-mobile-backdrop)
------------------------------ */

/* Hidden by default on desktop */
.cl-burger,
.cl-mobile-menu,
.cl-mobile-backdrop {
  display: none;
}

/* Hamburger button */
.cl-burger {
  border: 1px solid rgba(255,255,255,0.20);
  background: transparent;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.cl-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
}

/* Backdrop */
.cl-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.60);
  z-index: 99998; /* under header but above page */
}

/* Mobile panel */
.cl-mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 120px; /* overridden on mobile */
  z-index: 99998;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 14px 18px;
}

.cl-mobile-menu a {
  display: block;
  padding: 10px 0;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  opacity: 0.95;
}

.cl-mobile-menu a:hover { opacity: 1; }

.cl-mobile-menu .cl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  width: 100%;
  padding: 12px 18px;
}

/* Open state helpers (toggle these classes via JS) */
.cl-mobile-backdrop.is-open { display: block; }
.cl-mobile-menu.is-open { display: block; }

/* Responsive hides (mirrors your Tailwind hidden md/lg behavior) */
@media (max-width: 767px) {
  .cl-hide-md { display: none; }

  /* Make header height predictable */
  .cl-header { padding: 10px 14px; }
  .cl-header-inner { gap: 10px; }

  /* Keep logo from being too tall for the header */
  .cl-logo img {
    height: 52px;             /* 52–58 tends to be perfect on mobile */
    max-width: 70vw;          /* prevents overflow */
  }

  /* Hide desktop nav on mobile */
  .cl-nav { display: none; }

  /* Show hamburger on mobile */
  .cl-burger { display: inline-flex; }

  /* Spacer should match actual header height */
  .cl-header-spacer { height: 80px; }
  body.admin-bar .cl-header-spacer { height: 126px; } /* 80 + 46 admin bar */

  /* Mobile menu should start below header */
  .cl-mobile-menu { top: 80px; }
  body.admin-bar .cl-mobile-menu { top: 126px; }
}

@media (max-width: 1023px) {
  .cl-hide-lg { display: none; }
}
/* Hide landing header while gallery/lightbox is open (prevents overlap in landscape) */
body.cl-gallery-open .cl-header,
body.cl-gallery-open .cl-mobile-menu,
body.cl-gallery-open .cl-mobile-backdrop,
body.cl-gallery-open .cl-header-spacer {
  display: none !important;
}