/*
 Theme Name:   Spencehouse Theme
 Theme URI:    https://spencehouse.com.au
 Description:  A custom child theme for GeneratePress
 Author:       Brent Tunney
 Author URI:   https://spencehouse.com.au
 Template:     generatepress
 Version:      1.1
*/

/* ========== TABLE OF CONTENTS ========== 

1. Theme Tweaks
2. Utilities
3. Typography
4. Buttons
5. Space
6. Corner radius
7. Grid
8. Search bar
9. Homepage Carousel


======================================== */


/*** 1. THEME TWEAKS ***/

:root {
	
	/* default GeneratePress color variables */
	--contrast: var(--grey-00);
	--contrast-2: var(--grey-20);
	--contrast-3: var(--grey-60);
	--base: var(--grey-90);
	--base-2: var(--grey-95);
	--base-3: var(--grey-99);
	--swiper-theme-color: var(--color-primary)
	
}

/*** 2. UTILITIES ***/

/*** 3. TYPOGRAPHY  ***/

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	/*
    --font-sans: 'DM Sans', sans-serif, system-ui;
    --font-serif: 'Bitter', Georgia, serif, system-ui;
	*/
    
    --fontsize-body-xs: clamp(0.7901rem, 0.763rem + 0.1355vw, 0.8681rem);
    --fontsize-body-s: clamp(0.8889rem, 0.8357rem + 0.2657vw, 1.0417rem);
    --fontsize-body: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --fontsize-body-xl: clamp(1.125rem, 0.9946rem + 0.6522vw, 1.5rem);
    --fontsize-body-xxl: clamp(1.2656rem, 1.0798rem + 0.9293vw, 1.8rem);
    --fontsize-h4: clamp(1.4238rem, 1.1678rem + 1.2803vw, 2.16rem);
    --fontsize-h3: clamp(1.6018rem, 1.2574rem + 1.7221vw, 2.592rem);
    --fontsize-h2: clamp(1.802rem, 1.3469rem + 2.2754vw, 3.1104rem);
    --fontsize-h1: clamp(2.0273rem, 1.4342rem + 2.9656vw, 3.7325rem);
    --fontsize-hxl: clamp(2.2807rem, 1.5161rem + 3.8231vw, 4.479rem);
    --fontsize-hxxl: clamp(2.5658rem, 1.5887rem + 4.8852vw, 5.3748rem);
}


/*** 4. BUTTONS ***/ 

/* set text color to override global text link color */

a.btn-primary--fill,
a.btn-primary--fill:visited,
a.btn-primary--fill:hover,
a.btn-primary--fill:focus,

a.btn-small--fill,
a.btn-small--fill:visited,
a.btn-small--fill:hover,
a.btn-small--fill:focus,

a.btn-xs--fill,
a.btn-xs--fill:visited,
a.btn-xs--fill:hover,
a.btn-xs--fill:focus {
  color: var(--grey-99, #FFF); 
}

a.btn-primary--outline,
a.btn-primary--outline:visited,
a.btn-small--outline,
a.btn-small--outline:visited
a.btn-xs--outline,
a.btn-xs--outline:visited {
  color: var(--color-primary-30, #000); 
}
a.btn-primary--outline:hover,
a.btn-primary--outline:focus,
a.btn-small--outline:hover,
a.btn-small--outline:focus,
a.btn-xs--outline:hover,
a.btn-xs--outline:focus {
  color: var(--grey-99, #FFF); 
}

a.btn-secondary--fill,
a.btn-secondary--fill:visited,
a.btn-secondary--fill:hover,
a.btn-secondary--fill:focus,

a.btn-secondary-sml--fill,
a.btn-secondary-sml--fill:visited,
a.btn-secondary-sml--fill:hover,
a.btn-secondary-sml--fill:focus,

a.btn-white--fill,
a.btn-white--fill:visited,
a.btn-white--fill:hover,
a.btn-white--fill:focus,

a.btn-white-sml--fill,
a.btn-white-sml--fill:visited,
a.btn-white-sml--fill:hover,
a.btn-white-sml--fill:focus {
  color: var(--grey-00, #000); 
}

a.btn-white--outline,
a.btn-white--outline:visited {
	color: var(--grey-99, #FFF); 
}

a.btn-white--outline:hover,
a.btn-white--outline:focus {
	color: var(--color-primary-30, #000); 
}


  
/*** 5. SPACE ***/ 

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
	--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
	--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
	--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
	--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
	--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
	--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
	--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
	--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

	/* One-up pairs */
	--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
	--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
	--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
	--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
	--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
	--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
	--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
	--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

	/* Custom pairs */
	--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
	--space-s-xl: clamp(1.125rem, 0.212rem + 4.5652vw, 3.75rem);
	--space-m-xl: clamp(1.6875rem, 0.9701rem + 3.587vw, 3.75rem);
}

/* Flow space - for consistent vertical rhythm */
/* Add .flow classes to instantly add consistent vertical margin to all child elements */

/* https://utopia.fyi/blog/painting-with-a-fluid-space-palette */
/* https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties/ */
  
  
  .flow-sml > * + * {
      margin-top: .75em;
  }
  
  .flow-med > * + * {
    margin-top: 1em;
  }
  
  .flow-lge > * + * {
    margin-top: 2em;
  }


/*** 6. CORNER RADIUS ***/

:root {
	--corner-2xs: 0.5rem;
	--corner-xs: 0.75rem;
	--corner-s: 1rem;
	--corner-m: 1.25rem;
	--corner-l: 2rem;
	--corner-xl: 3rem;
}



/*** 7. GRID ***/

/* @link https://utopia.fyi/grid/calculator?c=320,18,1.2,1240,20,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
	--grid-max-width: 77.50rem;
	--grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem));
	--grid-columns: 12;
}


/*** 8. SEARCH BAR ***/

.wp-block-search__button {
	color: var(--grey-99, #FFF);
	background-color: var(--grey-00, #000);
	border-radius: 0.75rem;
}

.wp-block-search__button:visited,
.wp-block-search__button:hover,
.wp-block-search__button:focus {
	color: var(--grey-90, #FFF);
	background-color: var(--grey-20, #000);
}


/*** 9. Homepage Carousel ***/


.my-carousel .swiper-slide.left .slide-grid {
  flex-direction: row;
}

.my-carousel .swiper-slide.right .slide-grid {
  flex-direction: row-reverse;
}