/*!
 * Kazmi Carpets - floating pill header
 * Scoped under #kc-header / #kc-nav so nothing leaks into the rest of the site.
 */

:root { --kzh-gap: 18px; }

/* ---------------- 1. The pill ---------------- */
#kc-header {
  position: fixed;
  top: var(--kzh-gap);
  left: 50%;
  transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 28px);
  margin: 0;
  padding: 9px 12px 9px 16px;
  gap: 22px;
  align-items: center;
  border-radius: 999px;
  background-color: rgba(246, 241, 232, .68);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  backdrop-filter: blur(16px) saturate(1.18);
  border: 1px solid rgba(200, 183, 154, .55);
  box-shadow: 0 12px 44px rgba(36, 26, 19, .14);
  z-index: 900;
  opacity: 1;
  transition:
    opacity 640ms cubic-bezier(.16, .8, .24, 1),
    transform 640ms cubic-bezier(.16, .8, .24, 1),
    background-color 380ms ease,
    box-shadow 380ms ease,
    padding 380ms ease;
}

/* entrance - JS adds .kzh-enter, then drops it on the next frame */
#kc-header.kzh-enter { opacity: 0; transform: translate(-50%, -16px); }

/* scrolled: more opaque, tighter, deeper shadow */
#kc-header.kzh-scrolled {
  background-color: rgba(246, 241, 232, .93);
  box-shadow: 0 16px 50px rgba(36, 26, 19, .2);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* the existing mobile hide-on-scroll must keep the pill centred */
body.kz-hdr-hidden #kc-header { transform: translate(-50%, -190%); }

#kc-header > .e-con { padding: 0; }

/* ---------------- 2. Logo ---------------- */
#kc-logo { line-height: 0; }
#kc-logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: height 380ms ease;
}
#kc-header.kzh-scrolled #kc-logo img { height: 37px; }

/* ---------------- 3. Menu ---------------- */
#kc-nav .xpro-elementor-horizontal-navbar-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#kc-nav .xpro-elementor-horizontal-navbar-nav > li { margin: 0; }

#kc-nav .xpro-elementor-nav-link {
  position: relative;
  z-index: 2;
  display: block;
  padding: 10px 17px;
  border-radius: 999px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #241A13;
  text-decoration: none;
  white-space: nowrap;
  transition: color 340ms cubic-bezier(.16, .8, .24, 1);
}

/* Xpro's own underline effect would fight the sliding pill */
#kc-nav .xpro-elementor-nav-link::before,
#kc-nav .xpro-elementor-nav-link::after { display: none !important; }

#kc-nav .xpro-elementor-nav-link.kzh-lit { color: #F6F1E8; }

/* the gliding indicator */
#kc-nav .kzh-ind {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  width: 0;
  margin-top: -18px;
  border-radius: 999px;
  background: #241A13;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateX(0);
  transition:
    transform 450ms cubic-bezier(.16, .8, .24, 1),
    width 450ms cubic-bezier(.16, .8, .24, 1),
    opacity 300ms ease;
}
#kc-nav .kzh-ind.is-on { opacity: 1; }

/* logged-in admins get the 32px WP admin bar above everything */
body.admin-bar #kc-header { top: calc(var(--kzh-gap) + 32px); }
body.admin-bar .kzh-panel { top: calc(var(--kzh-gap) + 106px); }
@media (max-width: 782px) {
  body.admin-bar #kc-header { top: calc(var(--kzh-gap) + 46px); }
  body.admin-bar .kzh-panel { top: calc(var(--kzh-gap) + 120px); }
}

/* ---------------- 4. Hamburger ---------------- */
.kzh-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #241A13;
  cursor: pointer;
  position: relative;
  transition: background-color 300ms ease, transform 300ms cubic-bezier(.16, .8, .24, 1);
}
.kzh-burger:active { transform: scale(.94); }
.kzh-burger:focus-visible { outline: 2px solid #8B6A3C; outline-offset: 3px; }
.kzh-burger span {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.6px;
  margin-left: -9px;
  border-radius: 2px;
  background: #F6F1E8;
  transition: transform 420ms cubic-bezier(.16, .8, .24, 1), opacity 200ms ease;
}
.kzh-burger span:nth-child(1) { top: 16px; }
.kzh-burger span:nth-child(2) { top: 21.2px; }
.kzh-burger span:nth-child(3) { top: 26.4px; }
.kzh-burger.is-open span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.kzh-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.kzh-burger.is-open span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* ---------------- 5. Mobile panel ---------------- */
.kzh-panel {
  position: fixed;
  top: calc(var(--kzh-gap) + 74px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: calc(100vw - 28px);
  max-width: 420px;
  padding: 10px;
  border-radius: 26px;
  background: rgba(246, 241, 232, .96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(200, 183, 154, .55);
  box-shadow: 0 22px 60px rgba(36, 26, 19, .22);
  opacity: 0;
  visibility: hidden;
  z-index: 899;
  transition: opacity 340ms ease, transform 420ms cubic-bezier(.16, .8, .24, 1), visibility 0s linear 340ms;
}
.kzh-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.kzh-panel a {
  display: block;
  padding: 15px 18px;
  border-radius: 16px;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #241A13;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.16, .8, .24, 1), background-color 260ms ease;
}
.kzh-panel.is-open a { opacity: 1; transform: translateY(0); }
.kzh-panel.is-open a:nth-child(1) { transition-delay: 60ms; }
.kzh-panel.is-open a:nth-child(2) { transition-delay: 115ms; }
.kzh-panel.is-open a:nth-child(3) { transition-delay: 170ms; }
.kzh-panel.is-open a:nth-child(4) { transition-delay: 225ms; }
.kzh-panel.is-open a:nth-child(5) { transition-delay: 280ms; }
.kzh-panel a.is-current { background: #241A13; color: #F6F1E8; }

/* ---------------- 6. Breakpoint ---------------- */
@media (max-width: 860px) {
  #kc-header { padding: 8px 8px 8px 14px; gap: 12px; }
  #kc-nav .xpro-elementor-horizontal-navbar-wrapper { display: none; }
  .kzh-burger { display: block; }
  #kc-logo img { height: 38px; }
  #kc-header.kzh-scrolled #kc-logo img { height: 35px; }
}
@media (min-width: 861px) {
  .kzh-panel { display: none; }
}

/* ---------------- 7. Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  #kc-header,
  #kc-header *,
  .kzh-panel,
  .kzh-panel a,
  .kzh-burger span,
  #kc-nav .kzh-ind {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  #kc-header.kzh-enter { opacity: 1; transform: translateX(-50%); }
}