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

:root {
    --container-width: 1300px;
    --logo-height: 2.3rem;
    --header-height: 4.5rem;
	--space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-base: 1.125rem;
    --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(3rem, calc(1.8511rem + 5.1064vw), 6rem);
    /* Vertical rhythm inside the narrow (855px) episode column. */
    --narrow-spacing: clamp(1.875rem, calc(1.65rem + 0.94vw), 2.5rem);
   
    --transition: all 0.3s ease-in-out;
	
	--font-xs: 0.75rem;   /* 12px */
    --font-s: 0.875rem;   /* 14px */
    --font-base: 1.125rem;/* 18px */
    --font-h6: 1rem;
    --font-lead: 1.5rem;  /* hero / intro copy */
    --font-h5: 1.125rem;
    --font-h4: 1.75rem;   /* 28px */
    --font-h3: clamp(1.8rem, 1.1vw + 1.6rem, 2.5rem);
    --font-h2: clamp(2.5rem, 0.8vw + 2.3rem, 3rem);
    --font-h1: clamp(2.5rem, 2.3vw + 2rem, 4rem);
    --font-hero: var(--font-h1);
    --font-headings: 'Epilogue', sans-serif;

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

    /* Shadows */
    --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-l: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* One-off colors (not palette slots — too few uses) */
    --color-muted: #939598;
    --color-success: #0ee36c;
    --color-success-dark: #0cc960;
    --color-accent-yellow: #e3c93b;
    --color-tint-green: #e7f8ee;
    --color-tint-beige: #fcf9eb;

    /* Component: buttons */
    --button-radius: var(--radius-l);
    --button-padding: 0.875rem 1.5rem;
    --button-font-size: var(--font-h5);
    --button-font-weight: 500;
    --button-primary-bg: var(--theme-palette-color-1, #e43324);
    --button-primary-color: var(--theme-palette-color-8, #ffffff);
    --button-primary-bg-hover: var(--theme-palette-color-4, #000000);
    --button-secondary-bg: var(--theme-palette-color-8, #ffffff);
    --button-secondary-color: var(--theme-palette-color-1, #e43324);
    --button-secondary-border: 1px solid var(--theme-palette-color-1, #e43324);
    --button-secondary-bg-hover: var(--theme-palette-color-2, #c22c1f);
    --button-secondary-color-hover: var(--theme-palette-color-8, #ffffff);

    /* Component: cards */
    --card-radius: var(--radius-xl);
    --card-bg: var(--theme-palette-color-8, #ffffff);
    --card-shadow: var(--shadow-s);
    --card-padding: var(--space-l);
    --card-border: 1px solid var(--theme-palette-color-5, #b4b4b4);
}
/**************************************************
 * 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;
  }
}