/* ==========================================================================
   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,244,.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);}
/* The logo is a circular lockup that already contains the brand name, but at
   header size that script lettering is not legible, so it does the decorative
   job and the live text beside it does the readable one. */
.kq-mark__logo{
  width:48px; height:48px; flex:0 0 48px; display:block; object-fit:contain;
}
.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-coral-dk); border-bottom-color:var(--kq-coral);}
.kq-nav__link[aria-current="page"]{color:var(--kq-mint-dk); border-bottom-color:var(--kq-mint-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(43,42,40,.08);
  }
  .js .kq-nav.is-open{display:flex;}
}

/* ============ FOOTER ============ */
.kq-footer{
  background:var(--kq-ink); color:#D8D3CA;
  padding-block:clamp(44px,6vw,68px) 28px; margin-top:auto;
}
.kq-footer a{color:#D8D3CA;}
.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__tag{color:#A79F92;}
.kq-footer__blurb{margin-top:1rem; font-size:.94rem; color:#A79F92; 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-mint); text-decoration:underline;}
.kq-footer__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:22px; font-size:.85rem; color:#A79F92;
}
@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-coral-dk);}
.kq-nav__link--free:hover{color:var(--kq-coral-dk);}