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

   Palette comes from Miranda's own store bio, which leads with 🩵🩷 — a soft
   blue and pink. Light tints carry the decoration; the -dk variants are the
   only ones ever used for text or on-color fills, since the tints themselves
   fail contrast against cream.

   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:  #FDFAF6;
  --kq-sand:   #F6EEE6;
  --kq-white:  #FFFFFF;
  --kq-ink:    #262B33;
  --kq-slate:  #5C6672;   /* 4.9:1 on cream — clears AA for body text */
  --kq-line:   #E8DDD2;

  /* Brand — light tints are decorative only */
  --kq-blue:     #7CC3DC;
  --kq-blue-mid: #3E93B4;
  --kq-blue-dk:  #1F5F7A;  /* 6.9:1 on white — text + button fills */
  --kq-pink:     #F5A8BC;
  --kq-pink-mid: #E8748F;
  --kq-pink-dk:  #B8496A;  /* 5.5:1 on white — text + button fills */
  --kq-sun:      #F7C948;
  --kq-green:    #4E8C6E;

  /* 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(38,43,51,.04), 0 12px 28px rgba(38,43,51,.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-blue-dk);}
h1,h2,h3,h4{font-family:var(--kq-display); font-weight:700; line-height:1.18; letter-spacing:-.01em;}
::selection{background:var(--kq-sun); color:var(--kq-ink);}
:focus-visible{outline:3px solid var(--kq-blue-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-pink-dk); margin-bottom:.9rem;
}
.kq-eyebrow--blue{color:var(--kq-blue-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-pink-dk); color:#fff; box-shadow:0 6px 16px rgba(184,73,106,.28);}
.kq-btn--primary:hover{background:#a23e5c;}
.kq-btn--secondary{background:transparent; color:var(--kq-blue-dk); border-color:var(--kq-blue-dk);}
.kq-btn--secondary:hover{background:var(--kq-blue-dk); color:#fff;}
.kq-btn--light{background:#fff; color:var(--kq-blue-dk); box-shadow:var(--kq-shadow);}

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

/* Inline text link with underline offset */
.kq-link{
  color:var(--kq-blue-dk); font-weight:700;
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.kq-link:hover{color:var(--kq-pink-dk);}

/* 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);
}

/* Decorative dot grid used behind hero art */
.kq-dots{
  background-image:radial-gradient(var(--kq-blue) 2px, transparent 2px);
  background-size:18px 18px;
}

.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; aspect-ratio:4/5; border-radius:var(--kq-radius);
  background:linear-gradient(160deg,#EAF5F9,#FFF3F6); border:1px solid var(--kq-line);
  display:grid; place-items:center; text-align:center; padding:2rem; overflow:hidden;
}
.kq-intro__portrait p{font-size:.85rem; color:var(--kq-slate); max-width:24ch;}
.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(38,43,51,.06), 0 18px 36px rgba(38,43,51,.10);}
.kq-cat__icon{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  font-size:1.5rem; margin-bottom:1rem; background:var(--kq-sand);
}
.kq-cat:nth-child(4n+1) .kq-cat__icon{background:#FFF3F6;}
.kq-cat:nth-child(4n+2) .kq-cat__icon{background:#EAF5F9;}
.kq-cat:nth-child(4n+3) .kq-cat__icon{background:#FFF9E8;}
.kq-cat:nth-child(4n+4) .kq-cat__icon{background:#EDF7F1;}
.kq-cat h3{font-size:1.12rem; margin-bottom:.5rem;}
.kq-cat p{font-size:.94rem; color:var(--kq-slate); flex:1;}
.kq-cat__more{
  margin-top:1rem; font-weight:700; font-size:.9rem; color:var(--kq-blue-dk);
  display:inline-flex; align-items:center; gap:.4em;
}
.kq-cat:hover .kq-cat__more{color:var(--kq-pink-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-blue-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:#CFE4EE; 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-sun); outline-offset:2px;}
.kq-news__fine{margin-top:1rem; font-size:.82rem; color:#A8C8D8;}