/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

:root {

    /* ── Blocksy Color System ── */
    --color-1: #1B7A3A;    /* Primary brand — buttons, links, accents */
    --color-2: #135A2C;    /* Hover / alt accent — darker green */
    --color-3: #757568;    /* Body text — paragraphs, descriptions */
    --color-4: #2D2D28;    /* Headings — titles, nav, strong text */
    --color-5: #E0E0D8;    /* Borders — dividers, card outlines */
    --color-6: #F0F9F2;    /* Subtle bg — hero, footer, sections (green tint) */
    --color-7: #FAFAF7;    /* Site background — warm off-white */
    --color-8: #FFFFFF;    /* Header / card bg — pure white */

    /* ── Extra Colors (optional) ── */
    --color-9: #C7A23A;    /* Gold — logo badge, premium labels */
    --color-10: #F7F7F4;   /* Neutral section bg — warm stone alt */

    /* ── Layout ── */
    --container-width: 1300px;
    --logo-height: 2.3rem;
    --header-height: 4.5rem;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-base: 1rem;
    --space-m: clamp(1.13rem, calc(1.00rem + 0.56vw), 1.50rem);
    --space-l: clamp(1.50rem, calc(1.33rem + 0.74vw), 2.00rem);
    --space-xl: clamp(2.25rem, calc(2.00rem + 1.11vw), 3.00rem);
    --space-2xl: clamp(3.00rem, calc(2.67rem + 1.48vw), 4.00rem);
    --space-3xl: clamp(3.75rem, calc(3.33rem + 1.85vw), 5.00rem);
    --space-section: clamp(4.50rem, calc(4.00rem + 2.22vw), 6.00rem);

    /* ── Font Sizes ── */
    --font-xs: 0.5rem;
    --font-s: 0.75rem;
    --font-base: 1rem;
    --font-h6: clamp(0.4375rem, 0.4136rem + 0.1064vw, 0.5rem);
    --font-h5: clamp(0.6875rem, 0.6636rem + 0.1064vw, 0.75rem);
    --font-h4: clamp(0.875rem, 0.8271rem + 0.2128vw, 1rem);
    --font-h3: clamp(1rem, 0.9043rem + 0.4255vw, 1.25rem);
    --font-h2: clamp(1.3125rem, 1.1928rem + 0.5319vw, 1.625rem);
    --font-h1: clamp(1.875rem, 1.6835rem + 0.8511vw, 2.375rem);
    --font-display: clamp(2.5rem, 2.1rem + 1.8vw, 3.75rem);

    /* ── Font Families ── */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'DM Sans', -apple-system, sans-serif;

    /* ── Radius ── */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-s: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-m: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-l: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);

    /* ── Transition ── */
    --transition: all 0.3s ease-in-out;
}


/**************************************************
 * Animate
 * ***********************************************/
@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }

  .animate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable animation in the editor preview */
  .editor-styles-wrapper .animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}