/*----------------------------------------------------------------------*/
/* Mystic Munson — Glass Header v2.6                                    */
/*----------------------------------------------------------------------*/

/* Fluid tokens you actually use */
:root{
  --mm-header-h:  clamp(3rem, 2.6rem + 0.6vw, 3.25rem);
  --mm-gap-fixed: clamp(8rem, 6rem + 6vw, 16rem);   /* center gap */
  --mm-btn-min:   clamp(6.5rem, 5rem + 2vw, 8rem);

  --mm-edge-pad:  0px; /*clamp(.125rem, .1rem + .3vw, .5rem);*/
  --mm-btn-pad-y: 0px; /*clamp(.225rem, .2rem + .1vw, .3rem); */
  --mm-btn-pad-x: clamp(.9rem,  .8rem + .6vw, 1.4rem);

  --mm-radius: .75rem;
  --mm-bg: rgba(32,19,67,.52);
  --mm-blur: clamp(8px, 6px + .6vw, 12px);
  --mm-shadow: 0 6px 24px rgba(0,0,0,.18);

  --mm-sticky-top: 12px; /* parked offset (no animations) */

    /* The nav link font size used in the pills (set to whatever yours is) */
  --mm-pill-font: 1rem;          /* adjust if your pill text is larger/smaller */
  --mm-pill-line: 1;             /* matches your link's line-height: 1 */

  /* Pill height = text height + vertical padding */
  --mm-pill-h: calc(var(--mm-pill-font) * var(--mm-pill-line) + (2 * var(--mm-btn-pad-y)));

  /* Make L/R inset equal the vertical “air” inside the bar */
  --mm-edge-pad: max(0px, calc((var(--mm-header-h) - var(--mm-pill-h)) / 2));

 /* animation controls   */
  --mm-dur:      420ms;
  --mm-ease-out: cubic-bezier(.2,.7,.2,1);
  --mm-drop:     22px;  /* how far the bar starts above the top before dropping */
}

/* Glass bar: fixed, parked offscreen slightly; visibility toggled by JS */
header#header[data-test="header"]{
  position: fixed;
  left: 50%;
  top: var(--mm-sticky-top);
  transform: translateX(-50%) translateY(calc(-1 * var(--mm-drop))); /* start above */
  z-index: 1200;

  height: var(--mm-header-h);
  width: min(92vw, clamp(26rem, 20rem + 12vw, 44rem));
  border-radius: var(--mm-radius);
  background: var(--mm-bg);
  -webkit-backdrop-filter: blur(var(--mm-blur));
  backdrop-filter: blur(var(--mm-blur));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--mm-shadow);
  box-sizing: border-box;
  overflow: visible;

  /* fade+drop animation */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform var(--mm-dur) var(--mm-ease-out),
    opacity   var(--mm-dur) var(--mm-ease-out);
  will-change: transform, opacity;
}

header#header[data-test="header"].mm-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* dropped into place */
  pointer-events: auto;
  visibility: visible;
}

/* Strip Squarespace extras inside the bar */
header#header .header-background,
header#header [data-test="header-border"],
header#header [data-test="header-dropshadow"]{ display:none !important; }
header#header .header-actions,
header#header .header-title{ display:none !important; }

/* Neutralize wrappers so they don't create positioning contexts */
header#header .header-inner,
header#header .header-display-desktop,
header#header .header-display-mobile,
header#header .header-title-nav-wrapper,
header#header .header-nav,
header#header .header-nav-wrapper,
header#header .header-nav-list{
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* Keep only FIRST and LAST nav items */
header#header .header-nav-list > .header-nav-item:not(:first-child):not(:last-child){
  display: none !important;
}

/* Center spacer for your decorative image / gap */
header#header::before{
  content:"";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: var(--mm-gap-fixed);
  transform: translateX(-50%);
  pointer-events: none;
}

/* === Place the two pills directly inside the bar edges =============== */
/* Vertically center via top:0; bottom:0; margin-block:auto; */
/* Left pill */
header#header .header-nav-list > .header-nav-item:first-child > a{
  position: absolute !important;
  left: var(--mm-edge-pad) !important;
  top: 0; bottom: 0;              /* vertical centering without translate */
  margin-block: auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2;
}
/* Right pill */
header#header .header-nav-list > .header-nav-item:last-child > a{
  position: absolute !important;
  right: var(--mm-edge-pad) !important;
  top: 0; bottom: 0;              /* vertical centering without translate */
  margin-block: auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2;
}

/* Pill visuals (unchanged) */
header#header .header-nav-list > .header-nav-item > a{
  min-width: var(--mm-btn-min);
  padding-block: var(--mm-btn-pad-y);
  padding-inline: var(--mm-btn-pad-x);
  border-radius: .5rem; 
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #BBBABF;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.35);
  margin: 0 !important;
}
header#header .header-nav-list > .header-nav-item > a:hover,
header#header .header-nav-list > .header-nav-item > a:focus-visible{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
  outline: none;
}

/* Keep overlay menu above */
.header-menu{ z-index: 2000; }

/* Make the glass bar the containing block */
header#header[data-test="header"]{
  position: fixed !important;          /* already fixed; ensure it's the positioned ancestor */
  padding-left: 0 !important;          /* keep padding off the bar so edges are exact */
  padding-right: 0 !important;
}

/* Neutralize the wrapper that creates a new positioning context */
header#header .header-nav-item{
  position: static !important;         /* was relative in the theme */
  transform: none !important;          /* transforms also create containing blocks */
  filter: none !important;             /* so does filter/backdrop-filter on the wrapper */
  perspective: none !important;
}

/* Belt-and-suspenders: no other nav wrappers should be positioned */
header#header .header-title-nav-wrapper,
header#header .header-nav,
header#header .header-nav-wrapper,
header#header .header-nav-list{
  position: static !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* Absolutely anchor the two pills to the bar’s edges (vertical center sans translate) */
header#header .header-nav-list > .header-nav-item:first-child > a{
  position: absolute !important;
  left: var(--mm-edge-pad) !important;
  top: 0; bottom: 0; margin-block: auto;
  z-index: 2;
}
header#header .header-nav-list > .header-nav-item:last-child > a{
  position: absolute !important;
  right: var(--mm-edge-pad) !important;
  top: 0; bottom: 0; margin-block: auto;
  z-index: 2;
}
/* Fix the positioning context: pills should anchor to the GLASS BAR, not this wrapper */
header#header[data-test="header"] > .header-announcement-bar-wrapper{
  position: static !important;     /* was relative — steals absolute children */
  inset: auto !important;          /* neutralize any offsets if present */
  transform: none !important;      /* belt/suspenders: avoid creating a containing block */
  filter: none !important;
  perspective: none !important;

  /* also kill stray gutters so the inner box matches the bar width */
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

header#header .header-nav-list > .header-nav-item > a{
  font-size: var(--mm-pill-font);
  line-height: var(--mm-pill-line);
}

/* Restore pill sizing inside the glass header (beats Fonts.css !important) */
header#header .header-nav-list > .header-nav-item > a{
  font-size: var(--mm-pill-font) !important;   /* keep font size variable-driven */
  line-height: var(--mm-pill-line) !important; /* 1 → lets padding actually shrink height */
  padding-block: var(--mm-btn-pad-y) !important; /* 0px will now work */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Remove the injected "Skip to Content" link inside the header */
header#header .header-skip-link{ display:none !important; }

/* === Centered logo for glass header ================================== */
:root{
  /* optional: tweak the logo size here */
  --mm-logo-h: 2rem;
}

/* Place the injected image perfectly centered inside the glass bar */
header#header[data-test="header"] .mm-logo-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* follows header drop/transform */
  height: var(--mm-logo-h);
  opacity: 0;                         /* hidden until header reveals */
  pointer-events: none;               /* never block clicks on pills */
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  z-index: 1;                         /* under edge pills (which are z:2) */

  /* match the header’s reveal timing */
  transition: opacity var(--mm-dur) var(--mm-ease-out);
}

/* Fade in when header becomes visible */
header#header[data-test="header"].mm-visible .mm-logo-center{
  opacity: .95;
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce){
  header#header[data-test="header"] .mm-logo-center{
    transition: opacity 1ms linear;
  }
}