/*
Theme Name: Kids-Collectie Premium
Theme URI: https://kids-collectie.nl
Description: Premium WooCommerce styling voor BlankSlate
Author: Kids-Collectie.nl
Template: blankslate
Version: 2.0
*/

/* ═══════════════════════════════════════════════════════════════════════
   GOOGLE FONTS — Dancing Script (gratis Magnolia Script alternatief)
   Vervang later door Magnolia Script zodra je het .woff2 bestand hebt
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL COLORS & VARIABLES — Nieuw brandpallet 2026
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Primaire brandkleuren */
    --kc-paars:       #9874A8;
    --kc-roze:        #EEA7B7;
    --kc-perzik:      #F5D1C3;
    --kc-mint:        #BFE7E3;
    --kc-lichtroze:   #F4C1D4;
    --kc-lila:        #BFA8CA;

    /* Accentkleuren */
    --kc-felroze:     #FF8FB1;
    --kc-aqua:        #AEE3E8;
    --kc-lichtlila:   #D7CAE1;
    --kc-oranje:      #FFC98A;

    /* Kadence overrides */
    --global-palette1: #9874A8;
    --global-palette2: #EEA7B7;
    --global-palette3: #BFA8CA;
    --global-palette4: #F5D1C3;
    --global-palette5: #BFE7E3;
    --global-palette6: #F4C1D4;

    /* Neutraal */
    --text-dark:       #2d2d2d;
    --text-light:      #777;
    --border-color:    #eee;
    --bg-light:        #fdf6fa;
    --white:           #ffffff;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(152, 116, 168, 0.1);
    --shadow-md: 0 4px 20px rgba(152, 116, 168, 0.15);
    --shadow-lg: 0 8px 30px rgba(152, 116, 168, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */
body, html {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

/* Script font voor logo/titels */
.site-title,
.site-title a,
h1.page-title,
.hero-title {
    font-family: 'Dancing Script', cursive !important;
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 0 0 1rem 0;
}

a {
    color: var(--kc-paars);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover { color: var(--kc-felroze); }

/* ═══════════════════════════════════════════════════════════════════════
   KNOPPEN
   ═══════════════════════════════════════════════════════════════════════ */
.button, button, input[type="submit"],
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button {
    background: var(--kc-paars) !important;
    color: white !important;
    padding: 12px 30px;
    border-radius: 30px !important;
    border: none !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
    background: var(--kc-felroze) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md) !important;
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BLOG CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.omni-recent-blogs {
    margin: 60px 0;
    padding: 40px 20px;
    background: var(--bg-light);
    border-radius: 16px;
}

.recent-blogs-title {
    font-family: 'Dancing Script', cursive !important;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--kc-paars);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.blog-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content { padding: 24px; }
.blog-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.blog-title a { color: var(--text-dark); }
.blog-title a:hover { color: var(--kc-paars); }
.blog-meta { font-size: 14px; color: var(--text-light); margin-bottom: 12px; }
.blog-excerpt { color: #555; line-height: 1.6; margin-bottom: 16px; }
.blog-read-more { color: var(--kc-paars); font-weight: 700; }
.blog-read-more:hover { color: var(--kc-felroze); }

/* ═══════════════════════════════════════════════════════════════════════
   SALE BADGE / ONSALE
   ═══════════════════════════════════════════════════════════════════════ */
.woocommerce span.onsale {
    background: var(--kc-felroze) !important;
    border-radius: 30px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .recent-blogs-title { font-size: 28px; }
}