/* ============================================
   ============================================
   GLOBAL HEADER NAVIGATION + MOBILE VERSION
   ============================================
   ============================================ */


.globalnav {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 320px;
  height: 48px;
  z-index: 9999;
  transition: background 0.3s ease;
}

/* ============================================
   01. GLOBAL NAV – DESKTOP STRUCTURE + STYLING
   ============================================ */

/* Outer nav content container: max-width and layout */
.globalnav-content {
  max-width: 980px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* left = brand, right = links */
  padding: 0 24px;
}

/* Left-side branding link */
.mayhawk-name a {
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

/* Right-side wrapper for nav list */
.globalnav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  overflow: hidden;
}

/* Inner container for nav list items */
.globalnav-list ul {
  display: flex;
  gap: 11px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Link styling within the desktop nav */
.globalnav-list a {
  margin-left: 23px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  line-height: 1;
}

/* Shopping bag icon container and alignment */
.nav-bag,
.nav-bag a,
.nav-bag svg {
  margin: 0 0 0 7px !important;
  padding: 0;
  display: block;
}

.nav-bag {
  padding-right: 4px; /* space for bag dot indicator */
}


/* ==================================================
   02. COLOUR VARIANTS – WHITE, GREY, BLACK, TRANSPARENT
   ================================================== */

body:not(.nav-white):not(.nav-grey):not(.nav-black):not(.nav-transparent) .globalnav {
  background: #fefefe !important; /* Default white */
  color: #1d1d1f !important;
}

body.nav-white .globalnav {
  position: fixed !important;
  background: #ffffffcc !important; /* Semi-transparent white */
  color: #1d1d1f !important;
  backdrop-filter: saturate(180%) blur(20px);
}

body.nav-white .wp-site-blocks {
  padding-top: 48px !important;
}

body.nav-grey .globalnav {
  background: #fafbfc;
  color: #1d1d1f;
}

body.nav-black .globalnav {
  background: #0a0a0a;
  color: #f5f5f7;
}

body.nav-transparent .globalnav {
  background: transparent;
  color: #f1f1f1;
}


/* ==================================================
   03. MOBILE NAVIGATION OVERLAY
   ================================================== */

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fafafc;
  color: #1d1d1f;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 65px 50px 20px;
  opacity: 0;
  pointer-events: none;
  overflow-y: hidden;
  touch-action: none;
  transition: opacity 0.3s ease-out; /* ← faster open */
}

.mobile-nav.show {
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  transition: opacity 0.25s ease-in 0.2s; /* ← slight delay after text exit */
}

.mobile-nav ul li {
  opacity: 0;
  transition: opacity 0.5s ease-out 0.3s; /* ← smoother + delayed fade in */
}

body.menu-open .mobile-nav ul li {
  opacity: 1;
}

body:not(.menu-open) .mobile-nav ul li {
  opacity: 0;
  transition: opacity 0.35s ease-in 0.3s; /* ← quicker fade out */
}


/* Dark variants for mobile overlay */
body.nav-black .mobile-nav,
body.nav-transparent .mobile-nav {
  background-color: #161617;
  color: #f1f1f1;
}

body.nav-black .mobile-nav a,
body.nav-transparent .mobile-nav a {
  color: #f1f1f1;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.mobile-nav li {
  margin-bottom: 19px;
  width: 100%;
}

.mobile-nav a {
  display: block;
  width: 100%;
  max-width: calc(100% - 10px);
  padding-right: 29px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
}

body.nav-black .mobile-nav a,
body.nav-transparent .mobile-nav a {
  color: #f1f1f1;
}

/* Divider line between nav groups */
.mobile-nav li.nav-divider {
  height: 1px;
  width: 89%;
  margin: 24px 0 20px;
  background-color: currentColor;
  pointer-events: none;
}

body.nav-black .mobile-nav li.nav-divider,
body.nav-transparent .mobile-nav li.nav-divider {
  background-color: #f1f1f1;
}


/* ==================================================
   04. MOBILE HEADER CONTROLS – BAG ICON + TOGGLE
   ================================================== */

.mobile-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  padding-right: 0px;
  margin-left: auto;
  height: 48px;
  flex-shrink: 0;
}

.mobile-bag-icon {
  display: inline-block;
  margin-top: -2px;
}

.mobile-bag-icon svg {
  width: 23px;
  height: 23px;
  display: block;
}

/* Cursor pointer for mobile interactive elements */
.mobile-bag-icon,
.mobile-nav-toggle {
  cursor: pointer;
}

/* ===============================
   BAG ICON – BLUE DOT INDICATOR
   =============================== */

.bag-icon-wrapper {
  position: relative;
  display: inline-block;
}

.bag-icon-wrapper {
  position: relative;
  display: inline-block;
}

.bag-indicator {
  display: none;
  background-color: #0066cc; /* soft blue */
  position: absolute;
  top: 0px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out 0.7s, transform 0.5s ease-out 0.7s;
  z-index: 1;
}

.bag-icon-wrapper.has-items .bag-indicator {
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* ==================================================
   05. NAV TOGGLE ICON – OPEN/CLOSE STATE
   ================================================== */

.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 9px;
  z-index: 10001;
  cursor: pointer;
}

.nav-lines {
  position: relative;
  width: 21px;
  height: 12px;
  display: inline-block;
}

.nav-lines::before,
.nav-lines::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  transition: transform 0.4s ease, top 0.4s ease, background-color 0.3s ease;
  background-color: #131318;
}

.nav-lines::before {
  top: 0;
}

.nav-lines::after {
  top: 9px;
}

body.menu-open .nav-lines::before {
  transform: rotate(45deg);
  top: 4.5px;
}

body.menu-open .nav-lines::after {
  transform: rotate(-45deg);
  top: 4.5px;
}

/* Colour variants for nav toggle lines */
body.nav-black .nav-lines::before,
body.nav-black .nav-lines::after,
body.nav-transparent .nav-lines::before,
body.nav-transparent .nav-lines::after {
  background-color: #f1f1f1;
}

body.nav-white .nav-lines::before,
body.nav-white .nav-lines::after,
body:not(.nav-white):not(.nav-black):not(.nav-transparent) .nav-lines::before,
body:not(.nav-white):not(.nav-black):not(.nav-transparent) .nav-lines::after {
  background-color: #131318;
}


/* ==================================================
   06. RESPONSIVE BREAKPOINTS
   ================================================== */

@media (min-width: 834px) {
  .desktop-only {
    display: flex !important;
  }
  .mobile-nav-toggle,
  .mobile-bag-icon,
  .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 833px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-nav-toggle,
  .mobile-bag-icon {
    display: flex !important;
  }
  .mobile-nav {
    display: flex;
  }
}




/* ============================================
   ============================================
   GLOBAL FOOTER BLOCKS + MOBILE VERSION
   ============================================
   ============================================ */


/* ============================================
   GLOBAL FOOTER PLACEHOLDER – TEMPORARY STYLING
============================================ */

.globalfooter {
  width: 100%;
  background-color: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 1rem;
  text-align: center;
}

.globalfooter-inner {
  display: flex;
  border: solid 1px #1d1d1d;
  width:90%;
  max-width: 980px;
  min-width: 320px;
  padding: 1rem;
  height: 150px;
  align-items: center;
  justify-content: center;
  margin: 25px 25px;
}