/*
Theme Name: JoyKidz
Template: twentytwentyfive
Description: Child theme Twenty Twenty-Five untuk joykidz.id — helm anak. Layout terinspirasi buttonscarves.com, palet warna JoyKidz.
Version: 1.0.1
Author: Sunday
Text Domain: joykidz
*/

/* ---------- Promo bar ---------- */
.jk-promobar {
  background: var(--wp--preset--color--primary);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jk-promobar p { margin: 0; padding: 0.55rem 1rem; text-align: center; }

/* ---------- Header ---------- */
.jk-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}
.jk-header .wp-block-navigation__responsive-container-open {
  padding: 0;
}
.jk-logo img { max-height: 46px; width: auto; }

/* ---------- Tombol umum ---------- */
.wp-block-button__link {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Kartu kategori ---------- */
.jk-cat-card {
  border-radius: 24px;
  text-align: center;
  padding: 2.2rem 1rem 1.8rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jk-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(240, 19, 90, 0.12);
}
.jk-cat-card svg { width: 72px; height: 72px; }
.jk-cat-card p { margin-top: 0.9rem; font-weight: 700; }
.jk-cat-card a { text-decoration: none; color: inherit; }

/* ---------- Grid produk WooCommerce (shortcode) ---------- */
.jk-products ul.products li.product {
  text-align: center;
  background: transparent;
}
.jk-products ul.products li.product img {
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.jk-products ul.products li.product:hover img { transform: scale(1.03); }
.jk-products ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.7rem;
}
.jk-products ul.products li.product .price {
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
  font-size: 0.9rem;
}
.jk-products ul.products li.product .button {
  background: transparent;
  color: var(--wp--preset--color--primary);
  border: 1.5px solid var(--wp--preset--color--primary);
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.45em 1.4em;
}
.jk-products ul.products li.product .button:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
}
.jk-products .woocommerce-result-count,
.jk-products .woocommerce-ordering { display: none; }

/* ---------- Seksi ---------- */
.jk-section-kicker {
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  font-weight: 700;
}
.jk-hero { border-radius: 0; }
.jk-hero h1 { line-height: 1.05; }

/* ---------- Galeri komunitas ---------- */
.jk-community .wp-block-cover {
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* ---------- Footer ---------- */
.jk-footer {
  background: #1f1f1f;
  color: #eee;
}
.jk-footer a { color: #fff; text-decoration: none; }
.jk-footer a:hover { color: var(--wp--preset--color--secondary); }
.jk-footer .jk-footer-heading {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #aaa;
}

/* header 3 kolom simetris */
.jk-header-left, .jk-header-right { flex: 1 1 0; min-width: 0; }
.jk-header-right { justify-content: flex-end; }

/* USP */
.jk-usp { text-align: center; padding: 1.2rem 1rem; }
.jk-usp-icon { font-size: 2.4rem; line-height: 1; }
.jk-usp h3 { font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.jk-usp p { font-size: 0.9rem; margin: 0; color: #555; }

/* Testimoni */
.jk-testi {
  background: #FFF0F5;
  border-radius: 24px;
  padding: 1.8rem 1.6rem;
  height: 100%;
}
.jk-testi-stars { color: var(--wp--preset--color--secondary); letter-spacing: 0.2em; margin: 0 0 0.6rem; }
.jk-testi p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.jk-testi-name { font-weight: 700; font-size: 0.85rem; color: var(--wp--preset--color--primary); }

/* Grid komunitas 4x2 */
.jk-igrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.jk-igrid > div { aspect-ratio: 1/1; border-radius: 20px; }
@media (max-width: 781px) { .jk-igrid { grid-template-columns: repeat(2, 1fr); } }