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

/*****************
 * Header Styles *
 *****************/

.page-title,
.ct-advanced-heading {
	position: relative;
}

.ct-advanced-heading:after,
.blog .page-title:after,
.page .page-title:after {
	content: attr(title) !important;
	position: absolute;
	z-index: -1;
	top: -7%;
	bottom: 0;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(50px, 15vw, 200px);
	font-weight: 800;
	line-height: 1;
	color: var(--theme-palette-color-7);
/* 	text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); */
	text-shadow: -1px 0 rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1), 1px 0 rgba(255, 255, 255, 0.1), 0 -1px rgba(255, 255, 255, 0.1);
}

.ct-advanced-heading:after {
	left: 0;
	font-size: clamp(70px, 10vw, 140px);
}

@media (min-width: 690px) {
	.ct-advanced-heading:after {
		justify-content: initial;
	}
}

.ct-special-features .stk-block-column:hover {
	transform: scale3d(1.05, 1.05, 1);
}

/* Between 1000px and 1420px: */
@media (min-width: 1000px) and (max-width: 1420px) {
	
	/* Maximize header width */
	header .ct-container { 
		width: 100% !important ; 
	}

	/* Inverse Logo Margin */
	div.site-branding {
		margin-left: 10px !important ;
		margin-right: 0px !important ;
	}

	
}

/* Between 1000px and 1250px */
@media (min-width: 1000px) and (max-width: 1250px) {

	/* Contain Menu width */
	header .ct-container div[data-column="end"],
	header nav#header-menu-1,
	header ul.menu {
		width: 940px !important ;	
	}
	
	button.ct-header-search {
		margin-right: 10px !important ;
	}
	
}

/* Between 1100px and 1250px: */
@media (min-width: 1100px) and (max-width: 1250px) {

	/* Logo width becomes proportional to viewport width */
	header .ct-container div[data-column="start"],
	div.site-branding,
	.site-logo-container img.default-logo {
		max-width: calc(83vw - 780px) !important ;
	}
}

/* Between 1000 and 1149px */
@media (min-width: 1000px) and (max-width: 1149px) {

	/* Remove Logo Margin */
	div.site-branding {
		margin: 0px !important ;
	}
	
	/* Remove Menu Left Margin */
	header nav#header-menu-1 {
		margin-left: 0px !important ;
	}
	
}

/* Between 1000 and 1099px */
@media (min-width: 1000px) and (max-width: 1099px) {

	/* Afford a Tiny Logo Left Margin */
	div.site-branding {
		margin-left: 10px !important ;
	}

	/* Contain Menu width even more */
	header .ct-container div[data-column="end"],
	header nav#header-menu-1,
	header ul.menu {
		width: 810px !important ;		
	}

	/* Remove Menu Right Margin */
	header nav#header-menu-1 {
		margin-right: 0px !important ;
	}

	/* Reduce menu item padding */
	header ul.menu li.menu-item a.ct-menu-link:not(:empty) {
		padding-left: 10px !important ;
		padding-right: 10px !important ;
	}
	
	/* Fix Logo width */
	header .ct-container div[data-column="start"],
	div.site-branding,
	.site-logo-container img.default-logo {
		max-width: 140px !important ;
	}
	
}


/* Language Icon Visibility */
header ul.menu li.menu-item.menu-item-language a img {
	min-width:20px !important ;
}
/* Between 1000 and 1269px Switch the language sellector to absolute positioning */
@media (min-width: 1000px) and (max-width: 1269px) {	
	header ul.menu li.menu-item.menu-item-language {
		position: absolute !important ;
		top: 84px !important ;
	}
	header ul.menu li.menu-item.menu-item-language a {
		padding: 0px !important ;
	}
}
@media (min-width: 1251px) and (max-width: 1269px) {
	header ul.menu li.menu-item.menu-item-language  {
		left: 96.25vw !important ;
	}
}
@media (min-width: 1151px) and (max-width: 1250px) {
	header ul.menu li.menu-item.menu-item-language  {
		left: 96vw !important ;
	}
}
@media (min-width: 1100px) and (max-width: 1150px) {
	header ul.menu li.menu-item.menu-item-language  {
		left: 96.25vw !important ;
	}
}
@media (min-width: 1000px) and (max-width: 1099px) {
	header ul.menu li.menu-item.menu-item-language  {
		left: calc(500px + 44.15vw) !important ;
	}
}



/* Main Menu Item Wrapping */

header div[data-device="desktop"] nav#header-menu-1 > ul > li > a {
	
	width: min-content !important ;
	white-space: pre-wrap !important ;
	text-align: center !important ;
	
}