/* ==========================================================================
   Kinderplezier — Global Styles
   Extracted from Anima CSS exports
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    /* Brand colors */
    --kp-orange: #FF5D00;
    --kp-orange-dark: #E55300;
    --kp-red-orange: #FF3F00;
    --kp-yellow: #F4D401;
    --kp-yellow-amber: #F8C31B;
    --kp-yellow-bright: #FFD400;
    --kp-green: #00AA55;
    --kp-green-dark: #007129;
    --kp-green-sage: #5BA184;
    --kp-mint: #00BBAA;
    --kp-cyan: #00E1FE;
    --kp-blue-electric: #0043FE;
    --kp-blue-sky: #4A90E2;
    --kp-blue-navy: #005599;
    --kp-blue-dark: #115D9A;
    --kp-blue-slate: #2D5777;
    --kp-blue-midnight: #141B34;
    --kp-teal: #00627A;
    --kp-purple: #AE00FE;
    --kp-lime: #00FE72;
    --kp-brown: #68371A;

    /* Neutrals */
    --kp-beige: #E9E5E0;
    --kp-beige-warm: #ECE8E3;
    --kp-offwhite: #FBFBF6;
    --kp-light-gray: #F5F5F5;
    --kp-gray-border: #E7E7E7;
    --kp-gray-silver: #D9D9D9;
    --kp-gray: #AAAAAA;
    --kp-gray-medium: #868686;
    --kp-gray-dark: #636363;
    --kp-dark: #1D1D1B;

    /* Typography */
    --kp-font-heading: "PeachyKeenJF", "Comic Sans MS", cursive;
    --kp-font-body: "Nudica", "Nunito", sans-serif;

    /* Border radius */
    --kp-radius-sm: 4px;
    --kp-radius-md: 8px;
    --kp-radius-lg: 16px;
    --kp-radius-xl: 24px;
    --kp-radius-2xl: 32px;
    --kp-radius-3xl: 40px;
    --kp-radius-pill: 50px;
    --kp-radius-round: 70px;

    /* Shadows */
    --kp-shadow-sm: 0px 0px 8px rgba(0, 0, 0, 0.15);
    --kp-shadow-md: 4px 4px 8px rgba(0, 0, 0, 0.15);
    --kp-shadow-lg: 8px 8px 16px rgba(0, 0, 0, 0.15);
    --kp-shadow-card: 4px 4px 16px rgba(0, 0, 0, 0.15);
    --kp-shadow-elevated: 0px 4px 4px rgba(0, 0, 0, 0.25);

    /* Layout */
    --kp-content-width: 1400px;
    --kp-content-padding: 0 40px;
    --kp-wide-width: 1600px;
}

/* ---------- Global Container ---------- */
.kp-container {
    max-width: var(--kp-content-width);
    margin: 0 auto;
    padding: var(--kp-content-padding);
    width: 100%;
}

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography Base ---------- */
body {
    font-family: var(--kp-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--kp-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kp-font-heading);
    line-height: 1.2;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* ---------- Focus Styles ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--kp-blue-sky);
    outline-offset: 2px;
}

/* ---------- WordPress Block Overrides ---------- */
/* Remove default WP block spacing that fights our layout */
.wp-site-blocks > * + * {
    margin-block-start: 0;
}

.wp-site-blocks > .alignfull + .alignfull {
    margin-block-start: 0;
}

/* Ensure ACF blocks render full-width */
.acf-block-preview {
    width: 100%;
}