/* ================= Kitten Kaboodle – Global CSS ========================== */

/* Variables (from Reviews + Home, unified) */

:root{

  --kk-text:#323232;

  --kk-bg:#ffffff;

  --kk-accent:#5A4478;      /* deep purple */

  --kk-accent-2:#856BA8;    /* lavender purple */

  --kk-link:#48697F;        /* slate blue */

  --kk-link-hover:#59B0D4;  /* bright blue */

  --kk-sep:#daedf5;         /* light blue band */

  --kk-soft-green:#e6f4ed;  /* light green alt band */

  --radius:14px;

  --container:860px;        /* unify to 860px (Articles/About/Contact/Reviews) */

}



/* Base reset + typography */

html,body{margin:0;padding:0;background:var(--kk-bg);color:var(--kk-text);}

*,

*::before,

*::after{box-sizing:border-box;}

body{font-family:"Nunito", Arial, sans-serif; line-height:1.65;}

img{max-width:100%;height:auto;display:block;}

a{color:var(--kk-link);text-decoration:none;}

a:hover,a:focus{color:var(--kk-link-hover);outline:none;}



/* Ribbon / primary nav (non-sticky, matches current pages) */

.kk-nav{background:var(--kk-accent);color:#fff;width:100%;}

.kk-nav .wrap{

  max-width:var(--container);

  margin:0 auto;

  padding:10px 16px;

  display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;

}

.kk-nav a{

  color:#fff;

  font-family:"Poppins", Arial, sans-serif;

  font-weight:600;

  letter-spacing:.2px;

  padding:6px 10px;

  border-radius:999px;

}

.kk-nav a:hover,.kk-nav a:focus{background:var(--kk-accent-2);}



/* Page container */

.kk-container{max-width:var(--container);margin:0 auto;padding:20px 16px 40px;}



/* Headings */

h1,h2,h3{

  font-family:"Poppins", Arial, sans-serif;

  color:var(--kk-accent);

  margin:.2em 0 .4em;

  line-height:1.25;

}

h1{font-size:clamp(1.8rem,1.2rem + 1.2vw,2rem);}

h2{font-size:1.35rem;color:var(--kk-link);}

h3{font-size:1.2rem;color:var(--kk-link);}

p{margin:.6em 0;}

ul{padding-left:20px;margin:.6em 0;}

li{margin:.35em 0;}



/* Home: logo + page title block, visit menu, separators */

.kk-hero{text-align:center;padding:16px 0 12px;}

.kk-hero img{width:150px;height:auto;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.06);}

/* KK Logo */
.kk-logo {
  max-width: 240px;      /* desktop cap */
  width: 100%;           /* shrink as needed */
  height: auto;          /* maintain aspect ratio */
  display: block;
  margin: 0 auto;        /* center horizontally */
}

/* On smaller devices, shrink a bit more */
@media (max-width: 600px) {
  .kk-logo {
    max-width: 180px;
  }
}

.kk-visit{text-align:center;line-height:1.9;}

hr{border:0;height:1px;background:var(--kk-sep);margin:28px 0;}



/* Reviews: list cards */

.review-list{display:flex;flex-direction:column;gap:20px;margin-top:20px;}

.review-item{

  display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start;

  background:var(--kk-sep);padding:12px;border-radius:var(--radius);

}

.review-thumb{width:150px;height:150px;overflow:hidden;border-radius:12px;border:3px solid var(--kk-accent);}

.review-thumb img{width:100%;height:100%;object-fit:cover;}

.review-details h3{margin-top:0;font-size:1.2rem;color:var(--kk-accent);}

.review-details p.date{font-size:.85rem;color:var(--kk-link);}

.review-details a{font-weight:600;}



/* ==== Equal-height game cards (grid-scoped, high-specificity) ==== */
.kk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* Fill the grid track and stack content vertically */
.kk-grid .kk-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 1rem;
}

/* Normalise inner spacing so titles/dates don’t create drift */
.kk-grid .kk-card > * { margin-top: 0; }
.kk-grid .kk-card > * + * { margin-top: .5rem; }
.kk-grid .kk-card p { margin: 0; }              /* kill default p margins */

/* Pin the LAST block to the bottom (works for .actions wrapper OR direct <a>) */
.kk-grid .kk-card > :last-child { margin-top: auto !important; }

/* Safety: if the button is the last child directly */
.kk-card .kk-btn,
.kk-card a.kk-btn { margin-top: auto; }



/* Small screens */
@media (max-width:600px){
  .review-item{grid-template-columns:1fr;}
  .review-thumb{width:100%;height:200px;}
}