/* ==========================================================================
   KQ LEARNING STUDIO
   base.css — design tokens, resets, base elements, shared UI

   Palette is sampled straight from the logo artwork (scripts/make-logo.py
   reads the same file). The raw logo colours are decorative only: mint, coral
   and mustard all land near 2:1 on cream and fail as text. The -dk variants
   are derived by holding hue, capping saturation so coral stays rosy rather
   than turning fire-engine red, and walking lightness down until the colour
   clears 4.5:1 on white, cream AND the sand panel, with white-on-fill clearing
   it too. Brown is dark enough to use as text unmodified.

   Poppins is deliberate: it's the same face the Pinterest pin generator
   bundles (pin-generator/fonts/), so pins and site read as one brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');

:root{
  /* Neutrals */
  --kq-cream:  #FDFAF4;
  --kq-sand:   #F7EFE4;
  --kq-white:  #FFFFFF;
  --kq-ink:    #2B2A28;
  --kq-slate:  #6B6459;   /* 5.61:1 on cream */
  --kq-line:   #EADFCE;

  /* Brand — light tints are decorative only */
  --kq-mint:     #7DB8A5;
  --kq-mint-mid: #59A28B;
  --kq-mint-dk:  #417766;  /* 5.18:1 on white, 4.54 on sand */
  --kq-coral:     #F7838D;
  --kq-coral-mid: #F56572;
  --kq-coral-dk:  #B54A54;  /* 5.16:1 on white, 4.52 on sand */
  --kq-mustard:  #FABD2C;  /* decorative only; put ink on it, never white */
  --kq-brown:    #955C3A;  /* 5.43:1 on white; safe as text */

  /* Type */
  --kq-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --kq-ui:      'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --kq-maxw:      1140px;
  --kq-radius:    18px;
  --kq-radius-sm: 10px;
  --kq-section-y: clamp(56px, 8vw, 100px);
  --kq-gutter:    clamp(20px, 5vw, 44px);
  --kq-shadow:    0 2px 4px rgba(43,42,40,.04), 0 12px 28px rgba(43,42,40,.07);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
}

body{
  font-family:var(--kq-ui);
  color:var(--kq-ink);
  background:var(--kq-cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{display:block; max-width:100%; height:auto;}
a{color:var(--kq-mint-dk);}
h1,h2,h3,h4{font-family:var(--kq-display); font-weight:700; line-height:1.18; letter-spacing:-.01em;}
::selection{background:var(--kq-mustard); color:var(--kq-ink);}
:focus-visible{outline:3px solid var(--kq-mint-dk); outline-offset:3px; border-radius:4px;}

/* Skip link — visible only on keyboard focus */
.kq-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--kq-ink); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 var(--kq-radius-sm) 0; font-weight:700;
}
.kq-skip:focus{left:0;}

/* ============ LAYOUT ============ */
.kq-wrap{max-width:var(--kq-maxw); margin:0 auto; padding-inline:var(--kq-gutter);}
.kq-wrap--narrow{max-width:760px;}
.kq-section{padding-block:var(--kq-section-y);}
.kq-section--sand{background:var(--kq-sand);}

/* ============ SHARED UI ============ */
.kq-eyebrow{
  display:inline-block;
  font-family:var(--kq-ui); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--kq-coral-dk); margin-bottom:.9rem;
}
.kq-eyebrow--mint{color:var(--kq-mint-dk);}

.kq-h2{font-size:clamp(1.65rem, 3.6vw, 2.4rem); margin-bottom:.75rem;}
.kq-lede{font-size:clamp(1.02rem, 1.6vw, 1.15rem); color:var(--kq-slate); max-width:62ch;}

.kq-section-head{margin-bottom:clamp(32px, 5vw, 52px); max-width:70ch;}
.kq-section-head--center{margin-inline:auto; text-align:center;}
.kq-section-head--center .kq-lede{margin-inline:auto;}

/* Buttons */
.kq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--kq-ui); font-weight:700; font-size:1rem;
  padding:.85em 1.6em; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.kq-btn:hover{transform:translateY(-2px);}
.kq-btn--primary{background:var(--kq-coral-dk); color:#fff; box-shadow:0 6px 16px rgba(181,74,84,.28);}
.kq-btn--primary:hover{background:#9C3E47;}
.kq-btn--secondary{background:transparent; color:var(--kq-mint-dk); border-color:var(--kq-mint-dk);}
.kq-btn--secondary:hover{background:var(--kq-mint-dk); color:#fff;}
.kq-btn--light{background:#fff; color:var(--kq-mint-dk); box-shadow:var(--kq-shadow);}

.kq-btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.75rem;}


/* Cards */
.kq-card{
  background:var(--kq-white); border:1px solid var(--kq-line);
  border-radius:var(--kq-radius); padding:clamp(20px,3vw,28px);
  box-shadow:var(--kq-shadow);
}


.kq-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ SHARED SECTION COMPONENTS ============
   Intro (portrait + prose) and closing CTA appear on the homepage and on
   subpages, so they live here rather than in home.css. */
/* Intro block */
.kq-intro__inner{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center;
}
.kq-intro__portrait{
  position:relative; margin:0; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--kq-radius); border:1px solid var(--kq-line);
  background:var(--kq-sand); box-shadow:var(--kq-shadow);
}
.kq-intro__portrait img{width:100%; height:100%; object-fit:cover; display:block;}
.kq-intro__quote{
  font-family:var(--kq-display); font-size:clamp(1.15rem,2.2vw,1.45rem);
  line-height:1.45; color:var(--kq-ink); margin-bottom:1.35rem;
}
.kq-intro__body p + p{margin-top:1rem;}
.kq-intro__body p{color:var(--kq-slate);}
.kq-intro__sig{
  margin-top:1.5rem; font-family:var(--kq-display); font-weight:600; color:var(--kq-ink);
}
.kq-intro__sig span{display:block; font-family:var(--kq-ui); font-size:.87rem; color:var(--kq-slate); font-weight:600;}
@media (max-width:820px){
  .kq-intro__inner{grid-template-columns:1fr;}
  .kq-intro__portrait{max-width:320px; margin-inline:auto;}
}

/* Closing CTA */
.kq-cta{text-align:center;}
.kq-cta .kq-btn-row{justify-content:center;}

/* Card grid — homepage categories and the related-products row on the
   freebie landing page. */
.kq-cats{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(258px,100%),1fr)); gap:clamp(16px,2.4vw,24px);}
.kq-cat{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kq-cat:hover{transform:translateY(-4px); box-shadow:0 6px 12px rgba(43,42,40,.06), 0 18px 36px rgba(43,42,40,.10);}
.kq-cat:nth-child(4n+1) .kq-cat:nth-child(4n+2) .kq-cat:nth-child(4n+3) .kq-cat:nth-child(4n+4) .kq-cat h3{font-size:1.12rem; margin-bottom:.5rem;}
.kq-cat p{font-size:.94rem; color:var(--kq-slate); flex:1;}
/* Media variant — product shot at the top of the card. Every source image is
   cropped to exactly 1000x960 by scripts/make-product-images.py, so declaring
   that ratio reserves the right space and object-fit:cover never actually
   crops anything. */
.kq-cat--media{padding:0; overflow:hidden;}
.kq-cat__img{
  width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;
  background:var(--kq-sand); border-bottom:1px solid var(--kq-line);
}
.kq-cat__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2.6vw,24px);
}
.kq-cat--media h3{margin-bottom:.5rem;}

.kq-cat__more{
  margin-top:1rem; font-weight:700; font-size:.9rem; color:var(--kq-mint-dk);
  display:inline-flex; align-items:center; gap:.4em;
}
.kq-cat:hover /* Media variant — product shot at the top of the card. Every source image is
   cropped to exactly 1000x960 by scripts/make-product-images.py, so declaring
   that ratio reserves the right space and object-fit:cover never actually
   crops anything. */
.kq-cat--media{padding:0; overflow:hidden;}
.kq-cat__img{
  width:100%; aspect-ratio:1000/960; object-fit:cover; display:block;
  background:var(--kq-sand); border-bottom:1px solid var(--kq-line);
}
.kq-cat__body{
  display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2.6vw,24px);
}
.kq-cat--media h3{margin-bottom:.5rem;}

.kq-cat__more{color:var(--kq-coral-dk);}

/* Newsletter / email capture. Ships styled; the markup is commented out on
   every page until MailerLite is connected. */
/* (was: NEWSLETTER
   Section ships styled but the markup is commented out in index.html until
   MailerLite is connected. See README — do not show a form that goes nowhere. */
.kq-news{
  background:var(--kq-mint-dk); color:#fff; border-radius:var(--kq-radius);
  padding:clamp(32px,5vw,56px); text-align:center;
}
.kq-news h2{font-size:clamp(1.5rem,3vw,2.05rem); margin-bottom:.6rem;}
.kq-news p{color:#D6E7E0; max-width:52ch; margin-inline:auto;}
.kq-news__form{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
  margin-top:1.9rem; max-width:520px; margin-inline:auto;
}
.kq-news__form input[type="email"]{
  flex:1 1 250px; padding:.85em 1.15em; border-radius:999px; border:2px solid transparent;
  font-family:var(--kq-ui); font-size:1rem; color:var(--kq-ink);
}
.kq-news__form input[type="email"]:focus-visible{outline:3px solid var(--kq-mustard); outline-offset:2px;}
.kq-news__fine{margin-top:1rem; font-size:.82rem; color:#A9C9BE;}