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

:root {
    --container-width: 1280px;
    --logo-height: 2.3rem;
    --header-height: 4rem;

    /**********************************************
     * Spacing scale
     *********************************************/
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --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(4rem, calc(3.24rem + 3.40vw), 6rem);
    --space-section-l: clamp(5rem, calc(3.48rem + 6.81vw), 8rem);

    --transition: all 0.3s ease-in-out;

    /**********************************************
     * Type scale
     * Families live in Customize > Typography.
     * Mono is the one family Blocksy has no slot for.
     *********************************************/
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    --font-2xs: 0.625rem;
    --font-xs: 0.75rem;
    --font-s: 0.875rem;
    --font-base: 1rem;
    --font-h6: 0.75rem;
    --font-h5: 0.875rem;
    --font-h4: 1rem;
    --font-h3: 1.125rem;
    --font-h2: clamp(1.5rem, calc(1.29rem + 0.90vw), 1.875rem);
    --font-h1: clamp(2.25rem, calc(1.40rem + 3.60vw), 3.75rem);
    --font-hero: clamp(2.25rem, calc(1.68rem + 2.40vw), 3rem);
    --font-display: clamp(2.25rem, calc(1.11rem + 4.83vw), 4.5rem);

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

    /**********************************************
     * Buttons
     *********************************************/
    --button-radius: var(--radius-full);
    --button-padding-block: 0.8125rem;
    --button-padding-inline: 1.75rem;
    --button-font-size: var(--font-s);
    --button-font-weight: 500;
    --button-letter-spacing: 0em;

    --button-primary-bg: var(--theme-palette-color-1, #060606);
    --button-primary-color: var(--theme-palette-color-7, #FAFAFA);
    --button-primary-bg-hover: var(--theme-palette-color-2, #262626);

    --button-invert-bg: var(--theme-palette-color-7, #FAFAFA);
    --button-invert-color: var(--theme-palette-color-1, #060606);
    --button-invert-bg-hover: var(--theme-palette-color-8, #FFFFFF);

    /**********************************************
     * Cards
     *********************************************/
    --card-radius: var(--radius-l);
    --card-bg: var(--theme-palette-color-6, #F5F5F5);
    --card-border: 1px solid var(--theme-palette-color-5, #E1E1E1);
}

/**************************************************
 * Basics
 * ***********************************************/
img{
	display:block;
	width:100%;
	height:auto;
}
/**************************************************
 * Animate
 * ***********************************************/
@media (prefers-reduced-motion: no-preference) {
  .animate {
    opacity: 0;
    transform: translateY(50px);
    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;
  }
}