/* Site chrome: sticky nav, hamburger menu drawer, and footer.
   Shared by the landing page and the FAQ page (both use partials/nav + partials/footer).
   The 404 page uses its own slimmer nav/footer in page-404.css. */

/* -------- nav -------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--magenta);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav.scrolled{
  background: var(--magenta-deep);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 24px rgba(192,24,95,.28);
}
.nav .logo-img{
  height: 45px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.nav.scrolled .logo-img{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.logo-mark{
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--magenta) 0%, #FF6FA8 100%);
  display:grid; place-items:center;
  color:white; font-weight:800; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(233,30,118,.35);
}
.logo-mark::before{ content:"K"; font-family: var(--display); font-weight: 400; }
.logo-img{
  display:block; height: 30px; width: auto;
}
.menu-drawer-head .logo-img{ height: 28px; }
.foot-logo-img{ height: 34px; }
.nav-cta{ display:flex; align-items:center; gap: clamp(14px, 2vw, 28px); }

/* -------- hamburger + menu drawer -------- */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  flex: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  padding: 0;
}
.menu-toggle:hover{ border-color: var(--magenta); transform: translateY(-1px); }
.menu-toggle .bars{
  position: relative; width: 20px; height: 14px;
}
.menu-toggle .bars span{
  position:absolute; left:0; right:0; height: 2.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.menu-toggle .bars span:nth-child(1){ top: 0; }
.menu-toggle .bars span:nth-child(2){ top: 6px; }
.menu-toggle .bars span:nth-child(3){ top: 12px; }
body.menu-open .menu-toggle .bars span:nth-child(1){ top: 6px; transform: rotate(45deg); }
body.menu-open .menu-toggle .bars span:nth-child(2){ opacity: 0; }
body.menu-open .menu-toggle .bars span:nth-child(3){ top: 6px; transform: rotate(-45deg); }

/* hamburger sits on magenta — white button, magenta bars */
.nav .menu-toggle{ background: white; border-color: white; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.nav .menu-toggle .bars span{ background: var(--magenta); }
.nav .menu-toggle:hover{ background: white; border-color: white; }

.menu-overlay{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(31,18,51,.42);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
body.menu-open .menu-overlay{ opacity: 1; visibility: visible; }

.menu-drawer{
  position: fixed; top: 0; right: 0; z-index: 61;
  height: 100%; width: min(360px, 88vw);
  background: var(--paper);
  box-shadow: -20px 0 60px rgba(31,18,51,.18);
  transform: translateX(100%);
  transition: transform .36s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column;
  padding: 26px 28px 32px;
  overflow-y: auto;
}
body.menu-open .menu-drawer{ transform: translateX(0); }
.menu-drawer-head{
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 26px;
}
.menu-drawer-head .logo{ font-size: 1.3rem; }
.menu-close{
  width: 40px; height: 40px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--paper);
  display:grid; place-items:center; color: var(--ink);
  font-size: 1.2rem; transition: border-color .2s ease, color .2s ease;
}
.menu-close:hover{ border-color: var(--magenta); color: var(--magenta); }
.menu-label{
  font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 4px 0 12px;
}
.menu-nav{ display:flex; flex-direction:column; gap: 2px; }
.menu-nav a{
  display:flex; align-items:center; gap: 14px;
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 1.08rem;
  padding: 13px 14px;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.menu-nav a .idx{
  font-family: var(--display); font-weight: 400; font-size: .95rem;
  color: var(--magenta);
  width: 24px; flex: none;
}
.menu-nav a:hover{ background: var(--cream); color: var(--magenta); padding-left: 18px; }
/* FAQ sits below the numbered sections — set apart with a hairline so it doesn't
   read as another section. */
.menu-nav .menu-faq{ margin-top: 6px; padding-top: 15px; border-top: 1px solid var(--line); }
.menu-foot{ margin-top: auto; padding-top: 24px; display:grid; gap: 12px; }
.menu-foot .btn{ justify-content:center; width: 100%; }
.menu-foot .menu-login{
  text-align:center; text-decoration:none; font-weight: 700;
  color: var(--ink); padding: 10px; font-size: .98rem;
}
.menu-foot .menu-login:hover{ color: var(--magenta); }

.login-link{
  text-decoration: none;
  font-weight: 700;
  color: white;
  font-size: 0.97rem;
  position: relative;
  padding: 6px 4px;
  white-space: nowrap;
  flex: none;
}
.login-link::after{
  content:""; position:absolute; left:4px; right:4px; bottom:2px;
  height:2px; background: white;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s ease;
}
.login-link:hover::after{ transform: scaleX(1); transform-origin:left; }

/* -------- footer -------- */
footer{
  background: var(--ink); color: rgba(255,255,255,.7);
  padding: 56px 0 36px;
  font-size: .92rem;
}
.foot-grid{
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}
.foot-grid .logo{ color: white; }
.foot-grid .logo-mark{ box-shadow: none; }
.foot-links{ display:flex; gap: 24px; flex-wrap:wrap; }
.foot-links a{ text-decoration:none; color: rgba(255,255,255,.7); transition: color .2s; }
.foot-links a:hover{ color: white; }
.foot-bottom{
  margin-top: 36px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 12px;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
}

/* -------- shared responsive chrome -------- */
@media (max-width: 560px){
  .login-link{ display:none; }
  .nav-inner{ height: 64px; }
  .btn{ padding: 11px 18px; font-size: .92rem; }
}