/*
	Theme Name: Hello Elementor Child
	Theme URI: https://kevinott.ca/hello-elementor
	Description: Hello Elementor Child Theme
	Author: Kevin Ott
	Author URI: https://kevinott.ca
    Template: hello-elementor
	Requires at least: 6.0
	Requires PHP: 7.4
	Version: 0.0.0
*/

/*
 *	Set default font size, weight, and colour
 */
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title,
p,
div.elementor-heading-title,
a{
    color: var(--text-color);
    line-height: 1.3em;
}
h1.elementor-heading-title.elementor-size-default{
    font-size: clamp(52px, 8rem, 64px);
    font-weight: 900;
}
h2.elementor-heading-title.elementor-size-default{
    font-size: clamp(48px, 7rem, 52px);
    font-weight: 900;
}
h3.elementor-heading-title.elementor-size-default{
    font-size: clamp(40px, 6rem, 48px);
    font-weight: 700;
}
h4.elementor-heading-title.elementor-size-default{
    font-size: clamp(32px, 5rem, 40px);
    font-weight: 700;
}
h5.elementor-heading-title.elementor-size-default{
    font-size: clamp(24px, 4rem, 32px);
    font-weight: 600;
}
h6.elementor-heading-title.elementor-size-default{
    font-size: clamp(16px, 3rem, 24px);
    font-weight: 600;
}
p,
div,
a
span{
    font-size: clamp(16px, 2rem, 24px);
    font-weight: 500;
}
.elementor p a{
    color: var(--accent-color);
    text-decoration: underline;
}
.elementor p a:hover{
    text-decoration: none;
}

.color-invert h1.elementor-heading-title,
.color-invert h2.elementor-heading-title,
.color-invert h3.elementor-heading-title,
.color-invert h4.elementor-heading-title,
.color-invert h5.elementor-heading-title,
.color-invert h6.elementor-heading-title,
.color-invert div.elementor-heading-title,
.color-invert div,
.color-invert p{
    color: var(--color-invert);   
}
/* Other */

/* Button text height reset */
a.elementor-button,
span.elementor-button-content-wrapper,
span.elementor-button-text,
span.elementor-button-icon{
    line-height: 1;
}

/* Span all grid columns */
.grid-col-span{
	grid-column:1 / -1;
}

/* Option 2 of the button */
div.button-v2.button-v2.elementor-element a.elementor-button{
    background-color: transparent;
    border-color: var(--HC-secondary-color);
    color: var(--HC-secondary-color);
}
div.button-v2.button-v2.elementor-element a.elementor-button:hover{
    background-color: transparent;
    border-color: var(--HC-accent-color);
    color: var(--HC-accent-color);
}
div.button-v2.button-v2.elementor-element a.elementor-button svg{
    transition: all 0.3s ease;
    fill: var(--HC-secondary-color);
}
div.button-v2.button-v2.elementor-element a.elementor-button:hover svg{
    fill: var(--HC-accent-color);
}

/* Translate button icon on hover */
div.elementor-element a.elementor-button svg{
    transition: transform 0.3s ease;
}
div.elementor-element a.elementor-button:hover svg{
    transform: translateX(1rem);
}

.footer-inner{
    row-gap: 16px;
}

/* Fix header icon sizing */
@media (max-width:992px){
	header.site-header .header-inner{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.header-inner .site-navigation-toggle-holder{
		justify-content: flex-end;
	}
	.header-inner .site-navigation-toggle-holder .site-navigation-toggle{
/* 		width: 32px; */
	}
	.header-inner .site-navigation-toggle-holder .site-navigation-toggle-icon{
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 32px;
	}
	.header-inner .site-navigation-toggle-holder .site-navigation-toggle-icon:before,
	.header-inner .site-navigation-toggle-holder .site-navigation-toggle-icon:after{
		all: unset;
		content:"";
		display:block;
		height: 4px;
		width: 100%;
		border-block: 4px solid var(--HC-accent-color);
		transition: all 0.3s ease;
	}
	.header-inner .elementor-active.site-navigation-toggle-holder .site-navigation-toggle-icon:before,
	.header-inner .elementor-active.site-navigation-toggle-holder .site-navigation-toggle-icon:after{
		height: 0px;
		width: 75%;
		border: unset;
		border-top: 8px solid var(--HC-accent-color);
	}
}