/* =====================================================================
   Kopou v2 — Header (Conicorn-style floating pills), sitewide
   Locked 24 Oct 2026 · v3 (hide on scroll). Upload to /wp-content/uploads/kopou-header/ as kopou-header-v3.css
   Markup lives in the header template's HTML widget (header-widget.html).
   Measurements follow conicorn.framer.ai: bar 32px from the top, 56px
   pills, 4px gap, dark glass rgba(0,0,0,.4), light CTA pill 48px,
   menu panel 4px below the bar, same width, 48px radius, 2-column links.
   ===================================================================== */

.kp-nav {
  --kp-nav-top: 32px;
  --kp-ease: cubic-bezier(.2, .7, .2, 1);
  position: fixed;
  top: var(--kp-nav-top);
  left: 50%;
  z-index: 1000;
  transform: translateX(-50%);
  transition: transform .45s var(--kp-ease), opacity .3s var(--kp-ease);
  font-family: 'Quicksand', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .kp-nav { --kp-nav-top: 64px; }
@media (max-width: 782px) { body.admin-bar .kp-nav { --kp-nav-top: 62px; } }

.kp-nav *,
.kp-nav *::before,
.kp-nav *::after { box-sizing: border-box; }

.kp-nav__bar {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- logo pill ---- */
.kp-nav__logo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  transition: transform .35s var(--kp-ease), background-color .35s var(--kp-ease);
}
.kp-nav__logo img { width: 30px; height: 30px; display: block; }
.kp-nav__logo:hover { transform: scale(1.05); background: rgba(0, 0, 0, .5); }

/* ---- menu + CTA pill ---- */
.kp-nav__action {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 4px 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.kp-nav__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: 600 16px/1 'Quicksand', system-ui, sans-serif;
  letter-spacing: -.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-nav__toggle:focus-visible,
.kp-nav__logo:focus-visible,
.kp-nav__cta:focus-visible,
.kp-nav__link:focus-visible { outline: 2px solid #53E6D4; outline-offset: 3px; }

.kp-nav__icon {                      /* two lines that turn into an X */
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}
.kp-nav__icon i {
  position: absolute;
  left: 1px;
  right: 1px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .45s var(--kp-ease), top .45s var(--kp-ease);
}
.kp-nav__icon i:nth-child(1) { top: 5px; }
.kp-nav__icon i:nth-child(2) { top: 11px; }
.kp-nav.is-open .kp-nav__icon i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.kp-nav.is-open .kp-nav__icon i:nth-child(2) { top: 8px; transform: rotate(-45deg); }

.kp-nav__cta,
.kp-nav__cta:visited {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: #1A1A1A;
  font: 600 16px/1 'Quicksand', system-ui, sans-serif;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--kp-ease), color .3s var(--kp-ease);
}
.kp-nav__cta:hover { background: #FFFFFF; color: #0F1417; }

/* ---- menu panel ---- */
.kp-nav__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border-radius: 48px;
  background: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 48px);
  transition: clip-path .5s var(--kp-ease), opacity .35s var(--kp-ease), visibility 0s linear .5s;
}
.kp-nav.is-open .kp-nav__menu {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0 0 0 0 round 48px);
  transition: clip-path .5s var(--kp-ease), opacity .25s var(--kp-ease), visibility 0s;
}
/* Over white sections 40% black glass turns mid-grey and white text loses
   contrast, so the pills and panel get a deeper glass there (set by the JS). */
.kp-nav__logo, .kp-nav__action, .kp-nav__menu { transition-property: background-color, transform, clip-path, opacity, visibility; }
.kp-nav.is-on-light .kp-nav__logo,
.kp-nav.is-on-light .kp-nav__action { background: rgba(15, 20, 23, .78); }
.kp-nav.is-on-light .kp-nav__menu { background: rgba(15, 20, 23, .80); }

.kp-nav__link,
.kp-nav__link:visited {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #FFFFFF;
  font: 600 16px/1 'Quicksand', system-ui, sans-serif;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: background-color .25s var(--kp-ease), opacity .35s var(--kp-ease), transform .35s var(--kp-ease);
}
.kp-nav.is-open .kp-nav__link { opacity: 1; transform: none; }
.kp-nav.is-open .kp-nav__link:nth-child(1) { transition-delay: .08s; }
.kp-nav.is-open .kp-nav__link:nth-child(2) { transition-delay: .12s; }
.kp-nav.is-open .kp-nav__link:nth-child(3) { transition-delay: .16s; }
.kp-nav.is-open .kp-nav__link:nth-child(4) { transition-delay: .20s; }
.kp-nav.is-open .kp-nav__link:nth-child(5) { transition-delay: .24s; }
.kp-nav.is-open .kp-nav__link:nth-child(6) { transition-delay: .28s; }
.kp-nav__link:hover { background: rgba(255, 255, 255, .10); transition-delay: 0s; }
.kp-nav__link.is-current { background: rgba(255, 255, 255, .14); }

/* ---- spacer: keeps other pages' content clear of the fixed bar (not on Home,
   whose hero already has 120px top padding) ---- */
.kp-nav-spacer { height: 120px; }
body.home .kp-nav-spacer { display: none; }
body.admin-bar .kp-nav-spacer { height: 152px; }

/* ---- the header template must not add its own box around the widget ---- */
.elementor-location-header,
.elementor-location-header .e-con:has(.kp-nav),
.elementor-location-header .elementor-element:has(.kp-nav),
.elementor-location-header .elementor-widget-container:has(.kp-nav) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- small phones ---- */
@media (max-width: 400px) {
  .kp-nav { --kp-nav-top: 20px; }
  body.admin-bar .kp-nav { --kp-nav-top: 66px; }
  .kp-nav__logo { width: 52px; height: 52px; }
  .kp-nav__action { height: 52px; padding-left: 18px; gap: 10px; }
  .kp-nav__toggle, .kp-nav__cta { height: 44px; font-size: 15px; }
  .kp-nav__cta { padding: 0 18px; }
  .kp-nav__menu { padding: 24px 16px; border-radius: 36px; }
  .kp-nav.is-open .kp-nav__menu { clip-path: inset(0 0 0 0 round 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .kp-nav *, .kp-nav__menu { transition: none !important; }
}

/* ---- v2: guard against the old kopou-ui.css, which also styles a class named
   .kp-nav (hides it at 900px and below, recolours links) and the Hello theme's
   pink button hover. These rules only touch the new pill header. ---- */
header.kp-nav[data-kp-nav] { display: block !important; visibility: visible !important; position: fixed !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
header.kp-nav[data-kp-nav] .kp-nav__toggle,
header.kp-nav[data-kp-nav] .kp-nav__toggle:hover,
header.kp-nav[data-kp-nav] .kp-nav__toggle:focus,
header.kp-nav[data-kp-nav] .kp-nav__toggle:active { background: none !important; color: #FFFFFF !important; border: 0 !important; box-shadow: none !important; }
header.kp-nav[data-kp-nav] .kp-nav__link,
header.kp-nav[data-kp-nav] .kp-nav__link:visited,
header.kp-nav[data-kp-nav] .kp-nav__link:hover { color: #FFFFFF !important; }
header.kp-nav[data-kp-nav] .kp-nav__cta,
header.kp-nav[data-kp-nav] .kp-nav__cta:visited { color: #1A1A1A !important; }
header.kp-nav[data-kp-nav] .kp-nav__cta:hover { color: #0F1417 !important; }

/* ---- v3: slides away on scroll down, back on scroll up (class set by the JS) ---- */
header.kp-nav[data-kp-nav].is-hidden {
  transform: translate(-50%, calc(-100% - var(--kp-nav-top) - 16px)) !important;
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  header.kp-nav[data-kp-nav] { transition: opacity .2s linear; }
  header.kp-nav[data-kp-nav].is-hidden { transform: translateX(-50%) !important; }
}