/* ==========================================================================
   KQ LEARNING STUDIO — layout.css
   Site header (with mobile nav) and footer. Shared by every page.
   ========================================================================== */

/* ============ HEADER ============ */
.kq-header{
  position:sticky; top:0; z-index:100;
  background:rgba(253,250,246,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--kq-line);
}
.kq-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:74px;
}

/* Wordmark — type only, no image asset required.
   Swap in an <img> here if a real logo ever gets designed. */
.kq-mark{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--kq-ink);}
.kq-mark__badge{
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px;
  border-radius:12px; background:var(--kq-blue-dk); color:#fff;
  font-family:var(--kq-display); font-weight:700; font-size:1.02rem; letter-spacing:.02em;
}
.kq-mark__text{display:flex; flex-direction:column; line-height:1.1;}
.kq-mark__name{font-family:var(--kq-display); font-weight:700; font-size:1.06rem;}
.kq-mark__tag{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--kq-slate); font-weight:600;}

.kq-nav{display:flex; align-items:center; gap:1.75rem;}
.kq-nav__list{display:flex; align-items:center; gap:1.6rem; list-style:none;}
.kq-nav__link{
  text-decoration:none; color:var(--kq-ink); font-weight:600; font-size:.97rem;
  padding-block:.4rem; border-bottom:2px solid transparent;
}
.kq-nav__link:hover{color:var(--kq-pink-dk); border-bottom-color:var(--kq-pink);}
.kq-nav__link[aria-current="page"]{color:var(--kq-blue-dk); border-bottom-color:var(--kq-blue-dk);}
.kq-nav .kq-btn{padding:.6em 1.25em; font-size:.92rem;}

/* Mobile toggle */
.kq-navtoggle{
  display:none; width:44px; height:44px; border:1px solid var(--kq-line);
  border-radius:var(--kq-radius-sm); background:var(--kq-white); cursor:pointer;
  padding:0; place-items:center;
}
.kq-navtoggle__bars{display:block; width:20px; height:2px; background:var(--kq-ink); position:relative;}
.kq-navtoggle__bars::before,
.kq-navtoggle__bars::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--kq-ink);
  transition:transform .2s ease, top .2s ease;
}
.kq-navtoggle__bars::before{top:-6px;}
.kq-navtoggle__bars::after{top:6px;}
.kq-navtoggle[aria-expanded="true"] .kq-navtoggle__bars{background:transparent;}
.kq-navtoggle[aria-expanded="true"] .kq-navtoggle__bars::before{top:0; transform:rotate(45deg);}
.kq-navtoggle[aria-expanded="true"] .kq-navtoggle__bars::after{top:0; transform:rotate(-45deg);}

@media (max-width:860px){
  .kq-header__inner{flex-wrap:wrap;}
  .kq-navtoggle{display:grid;}
  .kq-nav{
    flex-direction:column; align-items:stretch; gap:0; width:100%;
    background:var(--kq-cream);
    padding:.5rem var(--kq-gutter) 1.5rem;
  }
  .kq-nav__list{flex-direction:column; align-items:stretch; gap:0;}
  .kq-nav__link{padding:.9rem 0; border-bottom:1px solid var(--kq-line);}
  .kq-nav__link[aria-current="page"]{border-bottom-color:var(--kq-line);}
  .kq-nav .kq-btn{margin-top:1.1rem; width:100%;}

  /* With JS the nav collapses into an overlay panel driven by .is-open.
     Without JS (.js never gets added) it stays in flow as a stacked list under
     the header — less pretty, still fully usable. Toggling a class rather than
     the [hidden] attribute avoids the specificity fight where .kq-nav's own
     display:flex beats the UA rule for [hidden] and shows a nav that assistive
     tech has been told is hidden. */
  .js .kq-nav{
    position:absolute; inset:74px 0 auto 0; display:none;
    border-bottom:1px solid var(--kq-line);
    box-shadow:0 16px 28px rgba(38,43,51,.08);
  }
  .js .kq-nav.is-open{display:flex;}
}

/* ============ FOOTER ============ */
.kq-footer{
  background:var(--kq-ink); color:#D9DEE6;
  padding-block:clamp(44px,6vw,68px) 28px; margin-top:auto;
}
.kq-footer a{color:#D9DEE6;}
.kq-footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(28px,5vw,56px);
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12);
}
.kq-footer .kq-mark{color:#fff;}
.kq-footer .kq-mark__badge{background:var(--kq-pink-dk);}
.kq-footer .kq-mark__tag{color:#9AA4B2;}
.kq-footer__blurb{margin-top:1rem; font-size:.94rem; color:#9AA4B2; max-width:38ch;}
.kq-footer__h{
  font-family:var(--kq-display); font-size:.8rem; letter-spacing:.13em;
  text-transform:uppercase; color:#fff; margin-bottom:1rem;
}
.kq-footer__list{list-style:none; display:flex; flex-direction:column; gap:.65rem; font-size:.94rem;}
.kq-footer__list a{text-decoration:none;}
.kq-footer__list a:hover{color:var(--kq-blue); text-decoration:underline;}
.kq-footer__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:22px; font-size:.85rem; color:#8A93A1;
}
@media (max-width:760px){
  .kq-footer__grid{grid-template-columns:1fr; gap:32px;}
}

/* The freebie is the highest-value destination on the site, so its nav item
   gets a little weight without becoming a second button. */
.kq-nav__link--free{color:var(--kq-pink-dk);}
.kq-nav__link--free:hover{color:var(--kq-pink-dk);}