/*
 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
10. Shop
11. Gravity forms


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


/*** 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);	
}

/* Fix Logo height on shop pages
/* This overrides the WooCommerce image height css */

.header--logo {
    display: flex;
    align-items: center;
    height: 75px;
}

.header--logo img {
    max-height: 100%;
    width: auto;
    max-width: none;
}

@media (max-width: 768px) {
    .header--logo {
        height: 50px;
    }
}






/*** 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;
  }

  .dynamic-entry-content > * + * {
	  margin-top: 1.1em;
  }


/*** 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;
}

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

/* Controls live in normal document flow */
.swiper-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px; /* space from carousel content */
}

/* Neutralise Swiper defaults */
.swiper-controls .swiper-button-prev,
.swiper-controls .swiper-button-next {
  position: static;
  margin: 0;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

/* Pagination inline */
.swiper-controls .swiper-pagination {
  position: static;
  width: auto;
  margin: 0;
  transform: none;
}

/* Bullet spacing */
.swiper-controls .swiper-pagination-bullet {
  margin: 0 3px;
}




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

/*** 10. Shop  ***/

/* Constrain only WooCommerce main content to theme grid */
.woocommerce .entry-content,
.woocommerce .product .entry-summary,
.woocommerce-page #primary,
.woocommerce-page .entry-content,
#wc-column-container {
    max-width: var(--grid-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Add horizontal padding on mobile */
@media (max-width: 768px) {
    .woocommerce .entry-content,
    .woocommerce .product .entry-summary,
    .woocommerce-page #primary,
    .woocommerce-page .entry-content,
    #wc-column-container {
        padding-left: var(--space-xs);
        padding-right: var(--space-xs);
    }
}

/* Shop / archive product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--gp-font--sans);
    font-size: var(--fontsize-body);
    color: var(--grey-00);
}

/* --- Shop / archive product grid fix --- */

/* Remove legacy float and margin on product images */
.woocommerce ul.products li.product .wc-product-image {
    float: none !important;
    margin: 0 !important;
}


/* Reset product list to use grid with consistent spacing */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr)); /* adjust columns as needed */
    gap: var(--space-s-l); /* spacing between cards */
    margin-left: 0; /* override any legacy container margins */
    margin-right: 0;
}

/* Optional: responsive tweaks */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-m); /* slightly bigger gap on smaller screens */
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }
}




.woocommerce div.product div.images .flex-control-thumbs {
	margin-bottom: var(--space-2xl);
}

.woocommerce ul.products li.product .price, .woocommerce div.product p.price {
	font-weight: 400 !important;
	color: var(--grey-30) !important;
}

/* SHOP - PRODUCT PAGE */

.single-product .entry-summary {
    /* remove any old margins on children first */
}

.single-product .entry-summary > * {
    margin: 0; /* reset any default margins */
}

.single-product .entry-summary > * + * {
    margin-top: var(--space-s); 
}




/* WooCommerce Block buttons — all states */
.wc-block-components-button.wp-element-button {
    background-color: var(--color-primary); /* button background */
    color: var(--grey-99); /* button text */
    border: 1px solid var(--color-primary); /* optional border */
    font-family: var(--gp-font--sans);
    font-size: var(--fontsize-body);
	transition: all 0.3s ease-in-out;
}

/* Hover / focus */
.wc-block-components-button.wp-element-button:hover,
.wc-block-components-button.wp-element-button:focus {
    background-color: var(--color-primary-30); /* your hover color */
    color: var(--grey-99);
    border-color: var(--color-primary-30);
}

/* WooCommerce breadcrumb styling */
body.woocommerce .woocommerce-breadcrumb {
    font-size: var(--fontsize-body-s);
    color: var(--grey-40);
}

/* Optional: links inside breadcrumb */
body.woocommerce .woocommerce-breadcrumb a {
    color: var(--grey-40); /* match text color */
    text-decoration: none; /* remove underline if you want cleaner look */
}

/* hover */
body.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--grey-10);
	/* text-decoration: underline; */
}

/* ===========================================
11. Gravity Forms 
============================================== */

/* Default theme (light background) */
.gform_wrapper {
    --button-bg: var(--color-primary);
    --button-text: var(--grey-99);
    --button-hover-bg: var(--color-primary-20);
    --input-bg: white;
    --input-border: #e0e0e0;
    --input-border-focus: #c0c0c0;
    --input-text: #1a1a1a;
    --label-color: #1a1a1a;
    --focus-shadow: rgba(101, 29, 50, 0.3);
}

/* Dark background theme */
.dark-bg-form_wrapper {
    --button-bg: var(--color-secondary);
    --button-text: var(--grey-00);
    --button-hover-bg: var(--color-secondary-80);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border-focus: var(--grey-99);
    --label-color: var(--grey-99);
    --focus-shadow: rgba(251, 251, 251);
}

/* Override GF's danger color for dark theme */
.gform-theme--framework.dark-bg-form_wrapper {
    --gf-color-danger: var(--color-secondary-80);
}

/* Error message box for dark theme */
.dark-bg-form_wrapper .gform_validation_errors {
    background-color: var(--color-secondary-80) !important;
    opacity: 0.9;
    border: 2px solid var(--color-secondary-80) !important;
    padding: 16px !important;
    border-radius: 8px !important;
}

/* Button styling */
.gform_wrapper .gform_button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gfield input[type="submit"] {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border: none;
    padding: 20px 32px !important;
    width: 100% !important;
    font-weight: 600 !important;
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border-radius: 100px !important;
    transition: all 0.3s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gfield input[type="submit"]:hover {
    background-color: var(--button-hover-bg) !important;
    transform: translateY(-2px);
}

/* Input fields */
.gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper textarea,
.gform_wrapper select {
    background-color: var(--input-bg) !important;
    padding: 32px 16px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    font-family: var(--font-sans) !important;
    color: var(--input-text) !important;
    transition: border-color 0.2s ease;
}

/* Focus state */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    border-color: var(--input-border-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--focus-shadow) !important;
}

/* Labels */
.gform_wrapper label,
.gform_wrapper .gfield_label {
    font-family: var(--font-sans) !important;
    color: var(--label-color) !important;
}

/* Placeholder text */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: var(--input-text) !important;
    opacity: 0.6;
}

/* Field spacing */
.gform_wrapper .gfield {
    margin-bottom: 0px !important;
}