/* ==========================================================================
   Match & Party — Header (orange theme, stylish burger)  [REPLACEMENT]
   ========================================================================== */

:root{
  /* Bar + menu tones */
  --hdr-bg: rgba(40, 33, 24, 1);        /* #282118 */
  --hdr-menu-panel: rgba(40, 33, 24, 0.95);
  --hdr-border: rgba(255,255,255,.08);

  /* Nav text */
  --hdr-text: #FF8562;                  /* orange */
  --hdr-text-hover: #FFA488;
  --hdr-text-active: #FF8562;

  /* CTA */
  --hdr-cta: #C0A062;                   /* gold */
  --hdr-cta-text: #000000;              /* black */

  /* Burger button background */
  --hdr-icon-bg: rgba(40, 33, 24, 1);
  --hdr-icon-bg-hover: rgba(0,0,0,.28);

  /* Fixed-header offsets (used by pages that opt-in) */
  --hdr-offset-desktop: 112px;
  --hdr-offset-mobile: 92px;
}

/* --- Header bar --------------------------------------------------------- */
.mp-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--hdr-bg);
  /* IMPORTANT: no blur directly on the header to avoid rasterizing children */
  /* backdrop-filter: blur(6px); */
  /* -webkit-backdrop-filter: blur(6px); */
  border-bottom: 1px solid var(--hdr-border);
  padding: 16px 0; /* balanced height on all screens */
  transition: transform .3s ease, background-color .2s ease;
  isolation: isolate;         /* keep pseudo-layer isolated */
}

/* Blur lives on a background overlay BELOW content */
.mp-header::before{
  content:"";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 0;                 /* behind header content */
}

/* Container (max-w-7xl + px-6) */
.mp-header .wrap{
  max-width: 80rem;           /* 1280px */
  margin: 0 auto;
  padding: 0 1.5rem !important; /* px-6 */
  display: flex; align-items: center; justify-content: space-between;
  position: relative;
  z-index: 1;                 /* above the ::before blur layer */
}

/* --- Brand: logo-only (no wordmark) ------------------------------------ */
.mp-header .brand{
  display: inline-flex; align-items: center; gap: .75rem;
  text-decoration: none;
  position: relative; z-index: 1;
}

/* CRISP: one integer size per breakpoint, no transforms/filters/image-rendering */
.mp-header .brand-logo{
  display: block;
  height: 64px;              /* mobile: exact integer pixels to avoid subpixel blur */
  width: auto;
  backface-visibility: hidden;
  transform: translateZ(0);  /* own layer without forcing parent rasterization */
}
@media (min-width:768px){
  .mp-header .brand-logo{ height: 72px; }
}

.mp-header .brand-wordmark{ display: none !important; } /* hide text */

/* --- Desktop nav -------------------------------------------------------- */
.mp-header .nav{ display:none; align-items:center; gap:24px; }
@media (min-width:768px){ .mp-header .nav{ display:flex; } }

/* Links */
.mp-header, .mp-header .nav, .mp-header .nav-link, .mp-header .button-text-black{
  font-family: 'Poppins', system-ui, sans-serif;
}
.mp-header .nav-link{
  color: var(--hdr-text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .95rem;
  opacity: .98;
  text-decoration: none;
  position: relative;
  transition: color .15s ease, opacity .15s ease;
}
@media (min-width:768px){ .mp-header .nav-link{ font-size: 15px; } }
.mp-header .nav-link:hover{ color: var(--hdr-text-hover); }

/* Active underline (desktop) */
@media (min-width:768px){
  .mp-header .nav-link.is-active::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:-10px; height:2px; width:22px;
    background: var(--hdr-text-active); border-radius:9999px;
  }
  /* ensure no accidental afters */
  .mp-header .nav-link::after { content: none; }
}

/* Submenu (desktop hover) */
.nav-item{ position: relative; }
.nav-item > .nav-link--toggle{
  all: unset; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  color: var(--hdr-text); text-transform: uppercase; letter-spacing:.08em; font-weight:700; font-size:.95rem;
}
@media (min-width:768px){ .mp-header .nav-link--toggle{ font-size:15px; } }
.mp-header .nav-link--toggle:hover{ color: var(--hdr-text-hover); }
.nav-item .chev{ display:inline-block; transition: transform .15s ease; font-size:.9em; }

@media (min-width:768px){
  .submenu{
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 220px;
    background: rgba(40,33,24,.98);
    border: 1px solid var(--hdr-border);
    border-radius: 12px;
    padding: .6rem;
    display:none; z-index: 9999; margin-top: 10px;
  }
  .submenu a{
    display:block; padding:.55rem .75rem; border-radius:8px;
    text-transform:none; letter-spacing:.02em; font-weight:600;
    color: var(--hdr-text);
  }
  .submenu a:hover{ background: rgba(255,255,255,.06); color: var(--hdr-text-hover); }
  .nav-item:hover > .submenu{ display:block; }

  /* Invisible hover bridge to prevent gaps */
  .nav-item:hover::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:12px;
  }
}

/* --- Mobile panel (reuses .nav) ---------------------------------------- */
@media (max-width:767.98px){
  .mp-header .nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--hdr-menu-panel);
    /* blur on the panel is okay — it's a separate layer from the logo */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top:1px solid var(--hdr-border);
    display:none; flex-direction:column; align-items:stretch; gap:.4rem; padding:1rem;
    z-index: 2;
  }
  .mp-header.is-open .nav{ display:flex; }

  .mp-header .nav-link,
  .mp-header .nav-link--toggle{
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--hdr-text);
    text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; font-size: 1rem;
    display:flex; align-items:center; justify-content:space-between;
    padding:.9rem 1rem; border-radius:10px;
  }
  .mp-header .nav-link:hover,
  .mp-header .nav-link--toggle:hover{ background: rgba(255,255,255,.06); color: var(--hdr-text-hover); }

  .nav-item .chev{
    display:inline-block; font-size:.95em; line-height:1;
    transition: transform .2s ease, opacity .2s ease; margin-left:.4rem;
  }
  .nav-item.is-open .chev{ transform: rotate(180deg); }

  .nav-item .submenu{
    display:none; padding:.25rem 0 .5rem 0;
    margin:.15rem 0 0 .25rem;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--hdr-border);
    border-radius: 10px;
  }
  .nav-item.is-open .submenu{ display:block; }

  .submenu a{
    display:block; font-family:'Poppins', system-ui, sans-serif;
    color: var(--hdr-text);
    text-transform:none; letter-spacing:.02em;
    font-weight:600; font-size:.98rem;
    padding:.7rem 1rem .7rem 1.25rem; border-radius:8px;
  }
  .submenu a:hover{ background: rgba(255,255,255,.06); color: var(--hdr-text-hover); }
}

/* Admin identity */
.mp-header .you{ color: var(--hdr-text); font-size:.92rem; opacity:.9; }

/* CTA button (gold) */
.mp-header .btn-primary,
.mp-header .button-text-black{
  background: var(--hdr-cta) !important;
  color: var(--hdr-cta-text) !important;
  font-weight: 800; text-transform: uppercase; line-height: 1;
  border-radius: 12px; padding: .55rem 1.0rem; border: none;
  transition: transform .15s ease, opacity .15s ease;
}
.mp-header .btn-primary:hover,
.mp-header .button-text-black:hover{ transform: scale(1.03); opacity:.95; }

/* --- Stylish hamburger -------------------------------------------------- */
.mp-header .nav-toggle{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--hdr-icon-bg);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  color: #fff; align-self: center;
}
.mp-header .nav-toggle:hover{ background: var(--hdr-icon-bg-hover); }
@media (min-width:768px){ .mp-header .nav-toggle{ display:none; } }

.mp-header .nav-toggle svg{
  width: 32px; height: 32px; display:block; stroke:#ffffff;
}

/* Optional span burger fallback */
.mp-header .nav-toggle .burger{
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
}
.mp-header .nav-toggle .burger > span{
  height:3px; border-radius:9999px; background:#fff; display:block; width:22px;
}
.mp-header .nav-toggle .burger > span:nth-child(3){ width:14px; }
.mp-header.is-open .nav-toggle .burger > span:nth-child(1){ transform: translateY(9px) rotate(45deg); width:22px; }
.mp-header.is-open .nav-toggle .burger > span:nth-child(2){ opacity:0; }
.mp-header.is-open .nav-toggle .burger > span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); width:22px; }
.mp-header .nav-toggle .burger > span{ transition: transform .15s ease, opacity .15s ease, width .15s ease; }

/* --- Fixed-header offset opt-in ---------------------------------------- */
body.mp-has-fixed-header { padding-top: var(--hdr-offset-desktop) !important; }
@media (max-width:768px){
  body.mp-has-fixed-header { padding-top: var(--hdr-offset-mobile) !important; }
}

/* Keep only ONE version like this */
.mp-header .brand-logo{
  display: block;
  height: 48px;   /* mobile */
  width: auto;    /* keep aspect ratio */
}
@media (min-width:768px){
  .mp-header .brand-logo{
    height: 56px; /* desktop */
    width: auto;  /* keep aspect ratio */
  }
}


/* Avoid any softening */
.mp-header .brand-logo{
  backface-visibility: hidden;
  transform: none;
  image-rendering: auto; /* let iOS pick best sampling */
}

.brand-logo {
  height: 48px;
  width: auto;
  display: block; /* optional, avoids inline gaps */
}