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

/**************************************************
 * Design tokens
 *
 * Colors and font families are NOT here - they live in the
 * Blocksy Customizer (Colors / Typography) and reach CSS as
 * --theme-palette-color-1..8 and the global font stack.
 * ***********************************************/
:root {
    /* --- Layout --- */
    --container-width: 1160px;
    --logo-height: 1.25rem;
    --header-height: 4.5rem;

    /* --- Spacing --- */
    --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);
    /* 56px -> 84px, matching the design's section rhythm */
    --space-section: clamp(3.5rem, calc(2.333rem + 3.889vw), 5.25rem);

    /* --- Font sizes --- */
    --font-2xs: 0.625rem;   /* 10px - micro uppercase labels */
    --font-xs: 0.6875rem;   /* 11px - eyebrow, meta, footer nav */
    --font-s: 0.875rem;     /* 14px - small body, price */
    --font-base: 1rem;      /* 16px - body, inputs */
    --font-h6: 0.875rem;    /* 14px */
    --font-h5: 1.0625rem;   /* 17px - step title */
    --font-h4: 1.125rem;    /* 18px - card title, hero lead */
    --font-h3: clamp(1.25rem, calc(1.19rem + 0.27vw), 1.375rem);  /* 20 -> 22 */
    --font-h2: clamp(1.625rem, 3vw, 2.125rem);                    /* 26 -> 34 */
    --font-h1: clamp(2.125rem, 4.4vw, 3.25rem);                  /* 34 -> 52, inner page titles */
    --font-hero: clamp(2.375rem, 5vw, 3.875rem);                  /* 38 -> 62 */

    /* Mirrors the Customizer heading font, for non-<h*> elements */
    --font-headings: 'DM Sans', Helvetica, Arial, sans-serif;

    /* --- Radii --- (this brand is square-cornered by design) */
    --radius-s: 0rem;
    --radius-m: 0rem;
    --radius-l: 0rem;
    --radius-xl: 0rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-s: 0 1px 3px rgba(11, 38, 57, 0.06);
    --shadow-m: 0 6px 22px rgba(11, 38, 57, 0.07);
    --shadow-l: 0 14px 40px rgba(11, 38, 57, 0.10);

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

    /* --- One-off colors (too rare for a palette slot) --- */
    --color-muted: #6B7580;        /* meta, captions, tertiary text */
    --color-accent-soft: #F3C9B9;  /* icon frame border */
    --color-disabled: #B8BCC0;     /* disabled pagination arrow */

    /* --- Component: buttons --- */
    --button-radius: var(--radius-s);
    --button-padding-block: 0.9375rem;
    --button-padding-inline: 1.625rem;
    --button-display: inline-block;
    --button-text-transform: uppercase;
    --button-font-size: var(--font-xs);
    --button-font-weight: 500;
    --button-letter-spacing: 0.12em;
    --button-primary-bg: var(--theme-palette-color-1, #F24E24);
    --button-primary-color: var(--theme-palette-color-8, #FFFFFF);
    --button-primary-bg-hover: var(--theme-palette-color-2, #D84119);
    --button-secondary-color: var(--theme-palette-color-4, #0B2639);
    --button-secondary-border-color: var(--theme-palette-color-4, #0B2639);

    /* --- Component: cards --- */
    --card-radius: var(--radius-s);
    --card-bg: var(--theme-palette-color-8, #FFFFFF);
    --card-shadow: none;
    --card-padding: var(--space-m);
    --card-border-width: 1px;
    --card-border-color: var(--theme-palette-color-5, #E6E4E1);
    --card-hover-border-color: var(--theme-palette-color-1, #F24E24);
    --card-hover-shadow: var(--shadow-m);
}

/**************************************************
 * Basics
 * ***********************************************/
img{
	display:block;
	width:100%;
	height:auto;
}

/**************************************************
 * Header
 *
 * The design puts a hairline between the nav and the language
 * switcher. Blocksy's header builder has no element for it, so it
 * lives as a pseudo-element on the switcher itself.
 * ***********************************************/
.ct-header [data-id="menu-secondary"] {
    position: relative;
    margin-left: var(--space-l);
}

.ct-header [data-id="menu-secondary"]::before {
    content: "";
    position: absolute;
    left: calc(var(--space-l) / -2);
    top: 50%;
    width: 1px;
    height: 1.125rem;
    transform: translateY(-50%);
    background-color: var(--theme-palette-color-5, #E6E4E1);
}

/**************************************************
 * Single documents
 * ***********************************************/
.sps-intro__image img {
	box-sizing: border-box;
	padding: 1rem;
	border: 1px solid var(--theme-palette-color-1);
	background: #fff;
}
/**************************************************
 * Checkout adjustments
 * ***********************************************/
.makecommerce-payment-methods .makecommerce-picker.bg-white {
	--bs-bg-opacity: 0;
}

.makecommerce-payment-methods .rounded {
    border: 1px solid var(--theme-palette-color-5);
    --bs-box-shadow-sm: none;
}
.makecommerce-payment-methods .rounded:hover {
    background: #ffffff00;
}
.makecommerce-payment-methods .form-select{
	--bs-body-bg:transparent;
    --bs-border-color:var(--theme-palette-color-5);
}
.makecommerce-payment-methods .payment-method-selected {
    border-color: var(--theme-palette-color-1);
}
/**************************************************
 * 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;
  }
}