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

/*****************
 * Global Styles *
 *****************/

body {
  -webkit-font-smoothing: antialiased; /* for Chrome, Safari on macOS */
  -moz-osx-font-smoothing: grayscale; /* for Firefox on macOS */
}

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

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


/* Heading/Blog/Page Title "Shadow" */
.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: left;
	font-weight: 800;
	transform: scale(.75,1);
	transform-origin: -42px;
	line-height: 1;
	color: var(--theme-palette-color-7);
	text-shadow: -1px 0  var(--theme-palette-color-1), 0 1px var(--theme-palette-color-1), 1px 0  var(--theme-palette-color-1), 0 -1px var(--theme-palette-color-1);
/* was:	text-shadow: 0 0 1px rgba(255, 255, 255, 0.1); */
/* was:	text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); */

}

/* Heading Title "Shadow" */
.ct-advanced-heading:after {
	left: 0 ;
	font-size: clamp(70px, 10vw, 140px) ;
	transform: scale(.75,1) ;
	transform-origin: -42px ;
}

/* Blog/Page Title */
.blog .page-title,
.page .page-title {
	margin-left: 30px !important ;
}
/* Blog/Page Title "Shadow" */
.blog .page-title:after,
.page .page-title:after {
	content: var(--wp-document-title-quoted) !important;
	font-size: 110px ;
	transform: scale(.7,1) ;
	transform-origin: -110px ;
}

/* Narrower than 450px */
@media ( max-width: 450px ) {

	/* The only heading title, on main page, is reduced manually to 30px
	   This adjusts heading title "Shadow" to match */
	.ct-advanced-heading::after {
		left: 0.3vw !important ;
		font-size: clamp(44px, 11.4vw, 60px) !important ;
	}	

}	

/* Narrower than 690px */
@media ( max-width: 689px ) {
	
	/* Blog/Page Title */
	.blog .page-title,
	.page .page-title {
		margin-left: 0px !important ;
	}
	/* Blog/Page Title "Shadow" */
	.blog .page-title:after,
	.page .page-title:after {
		font-size: 60px ;
		justify-content: center ;
		transform-origin: center ;
	}

	/* The only heading title, on main page, is reduced manually to 40px
	   This adjusts heading title "Shadow" to match */
	.ct-advanced-heading::after {
		left: 0 !important ;
		font-size: clamp(50px, 9vw, 74px) !important ;
		
	}	
	
}

/* Wider than 689px */
@media (min-width: 690px) {

	/* Heading Title "Shadow" */
	.ct-advanced-heading:after {
		justify-content: initial !important ;
	}

}

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

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

	.ct-advanced-heading::after {
		left: 0 !important ;
		font-size: clamp(58px, 9vw, 140px)  !important ;
	}	

}
/* Wider than 999px */ 
@media (min-width: 1000px) {

	/* Reduce Menu Font to 12px */
	.menu .ct-menu-link {
		font-size: 13.5px !important;
	    font-weight: 300 !important;
	}

	/* [Therapies] and [Injuries] Mega Menu Styling (Wider than 999): */
	
	/* define [Therapies] and [Injuries] Mega Menu Variables: */
	:root {
		/* hover color */
		--theme-link-hover-color: #0d4d79 ;
		/* top heading color when hovered or active */
		--theme-child-mega-menu-heading-active-color: #fff ;
		/* top heading underline color when hovered or active */
		--theme-child-mega-menu-heading-active-underline-color: #0d4d79 ;
		/* first column's background color */
		--theme-child-mega-menu-first-column-background-color: #b0aeab ;
		/* first column's text color */
		--theme-child-mega-menu-first-column-text-color: #000 ;
		/* first column's divider color */
		--theme-child-mega-menu-first-column-divider-color: #727f88 ;
	}
	/* Mega Menu heading active (or current page is listed under that menu heading) */
	header nav#header-menu-1 #menu-item-3049.ct-active > a ,
	header nav#header-menu-1 #menu-item-3049.current-menu-ancestor > a ,
	header nav#header-menu-1 #menu-item-8222.ct-active > a ,
	header nav#header-menu-1 #menu-item-8222.current-menu-ancestor > a { 
		color: var(--theme-child-mega-menu-heading-active-color) !important ;
	}
	/* Mega Menu heading underline */
	header nav#header-menu-1 #menu-item-3049 > a::after , 
	header nav#header-menu-1 #menu-item-8222 > a::after { 
		background-color: var(--theme-child-mega-menu-heading-active-underline-color) !important ;
	}
	/* Mega Menu heading underline active */
	header nav#header-menu-1 #menu-item-3049.ct-active > a::after , 
	header nav#header-menu-1 #menu-item-8222.ct-active > a::after { 
		width: calc(100% - var(--menu-items-spacing, 36px)) ;
	}
	
	/* first column background */
	header nav#header-menu-1 #menu-item-3049 .sub-menu .menu-item-8374,
	header nav#header-menu-1 #menu-item-8222 .sub-menu .menu-item-9130 {
		background-color: var(--theme-child-mega-menu-first-column-background-color) ;
	}
	/* first column text color */
	header nav#header-menu-1 li#menu-item-8374:not(:hover,.current-menu-parent) > a:not(:active,:focus,:hover) ,
	header nav#header-menu-1 li#menu-item-8374 li:not(.current_page_item) > a:not(:active,:focus,:hover) ,
	header nav#header-menu-1 li#menu-item-9130:not(:hover,.current-menu-parent) > a:not(:active,:focus,:hover) ,
	header nav#header-menu-1 li#menu-item-9130 li:not(.current_page_item) > a:not(:active,:focus,:hover) {
		color: var(--theme-child-mega-menu-first-column-text-color) !important ;
	}
	/* first column heading color */
	header nav#header-menu-1 li#menu-item-8374:hover > a ,
	header nav#header-menu-1 li#menu-item-9130:hover > a {
		/* color: var(--theme-link-hover-color) !important ; */
		color: var(--theme-child-mega-menu-first-column-text-color) !important ;
	}
	/* first column dividers */
	header nav#header-menu-1 li#menu-item-8374 li ,
	header nav#header-menu-1 li#menu-item-9130 li {
		border-top-color: var(--theme-child-mega-menu-first-column-divider-color) ;
  		border-top-style: solid ;
	}
	/* column headings */
	header nav#header-menu-1 li#menu-item-8373 > a ,
	header nav#header-menu-1 li#menu-item-8374 > a ,
	header nav#header-menu-1 li#menu-item-9130 > a ,
	header nav#header-menu-1 li#menu-item-9128 > a {
		padding: 0 0 20px 10px !important ;
  		font-weight: 900 !important ;
	}
	
}

/* Wider than 1250px */
@media (min-width: 1251px) {	

	/* Therapies Mega Menu Styling (Wider than 1150): */
		
	/* side image anchor */
	header nav#header-menu-1 #menu-item-3049 ,
	header nav#header-menu-1 #menu-item-8222 {
		position: relative ;
	}
	/* side image styles */
	header nav#header-menu-1 #menu-item-3049 > .sub-menu::before {
    	content: "";
		position: absolute;
    	left: -200px;
    	top: 100%;
    	height: 100%;
    	width: 200px;
		background: url('https://medicalegersis.gr/wp64/wp-content/uploads/depositphotos_324239386-stock-photo-human-spine-with-intervertebral-disks.jpg') no-repeat 55% / cover;
	}
	header nav#header-menu-1 #menu-item-8222 > .sub-menu::before {
    	content: "";
		position: absolute;
    	left: -80%;
    	top: 100%;
    	height: 100%;
    	width: 80%;
		background: url('https://medicalegersis.gr/wp64/wp-content/uploads/depositphotos_145342181-stock-photo-shoulder-elbow-hand.jpg') no-repeat 100% 100% / contain;
	}


}

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


/* Mobile & Tablet Menu: parent name acts as the dropdown toggle */
@media (max-width: 999px) {
	/* Scope to Blocksy mobile/off-canvas nav only */
	nav.mobile-menu[data-id="mobile-menu"] li.menu-item-has-children > .ct-sub-menu-parent { 
    	position: relative; 
	}
	/* Stretch Blocksy's button over the whole row so any tap toggles */
	nav.mobile-menu[data-id="mobile-menu"] 
	li.menu-item-has-children > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile {
		position: absolute;
		inset: 0;                 /* cover the entire row */
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		z-index: 2;               /* sit on top of the link text */
	}
	/* Keep the chevron visible and at the right edge */
	nav.mobile-menu[data-id="mobile-menu"] 
	li.menu-item-has-children > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile .ct-icon {
		position: absolute;
		width: 22px !important ;
		height: 22px !important ;
		right: -2.3rem;           /* tweak to taste */
		top: 50%;
		transform: translateY(-48%);
		pointer-events: none;     /* icon itself shouldn’t swallow events */
	}
	/* Prevent the name link underneath from hijacking taps */
	nav.mobile-menu[data-id="mobile-menu"] 
	li.menu-item-has-children > .ct-sub-menu-parent > a.ct-menu-link {
		pointer-events: none;     /* the overlayed button receives the tap */
		text-decoration: none;
		cursor: default;
	}	
	/*  Menu text coloring when active */
	nav.mobile-menu li.menu-item-has-children.dropdown-active > span.ct-sub-menu-parent > a.ct-menu-link {
		color: #33536a !important ;	
	}
	/*  Menu toggle arrow coloring when active */
	nav.mobile-menu li.menu-item-has-children.dropdown-active > span.ct-sub-menu-parent > button > .ct-icon {		
		fill: currentColor !important ; 
		color: #33536a !important ;		
	}
	/* Sub-Menu item font size slightly smaller */
	nav.mobile-menu li.menu-item-has-children > ul.sub-menu a {
		font-size: 1.5rem !important ;
	}
	/* Sub-sub-Menu item font size smaller still */
	nav.mobile-menu li.menu-item-has-children > ul.sub-menu ul.sub-menu a {
		font-size: 1rem !important ;
	}
}

/*****************
 * Footer Styles *
 *****************/

/* Map Widget */
footer #custom_html-5 {
	@media (555px < width < 1000px) {
  	width: 77% !important ;
	}
	@media (width <= 555px) {
	  width: 100% !important ;
	}
}
footer #custom_html-5 div iframe.footer-map {
	filter: invert(100%) sepia(100%)  grayscale(60%) contrast(94.5%) !important
}

/* Site Developer -- it should not have been necessary to enforce these here */
footer #custom_html-7 { 
	--theme-text-color: var(--theme-palette-color-3);
	--theme-link-initial-color: #e67817;
	--theme-link-hover-color: #e67817;
}


/*********************
 * Front Page Styles *
 *********************/

/* Background Adjustments ,
body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-d89e132.stk-block-background*/
body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)) !important ;
}
@media (max-width: 1023px) {
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background 	{
		height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important ;
		background-size: auto 100svh !important;
	}
}
@media (max-width: 689px) {
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background, 
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-d89e132.stk-block-background {
		background-position: 61% 0% !important ;
	}
}

/* Doctor Title Boxes */
body.page-id-772 main#main.site-main div.front-page-doctor-name > h2,
body.page-id-772 main#main.site-main div.front-page-doctor-credentials > p,
body.page-id-772 main#main.site-main div.front-page-doctor-intro-title h4 {
	font-weight: 300 !important ;
}
@media (max-width: 1023px) {
	body.page-id-772 main#main.site-main div.front-page-doctor-name > h2 {
		font-size: 30px !important ;
	}
	body.page-id-772 main#main.site-main div.front-page-doctor-credentials > p {
		font-size: 18px !important ;
	}
}
@media (max-width: 999px) {
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background {
		padding-top: 65vh !important;
		padding-bottom: 5vw !important;
	}
	body.page-id-772 main#main.site-main div.front-page-doctor-credentials {
  		margin-bottom: 50px !important ;
	}
	body.page-id-772 main#main.site-main div.front-page-doctor-credentials > p {
		color: #d0d0d0 !important ;
	}
	body.page-id-772 main#main.site-main div.entry-content > div.stk-3c28047.stk-block-background {
		padding-top: calc(100vh - 350px) !important ;	
	}
}
@media (max-height: 600px) {

	body.page-id-772 main#main.site-main div.entry-content > div.stk-3c28047.stk-block-background {
		padding-top: calc(100vh - 150px) !important ;	
	}
	body.page-id-772 .stk-3c28047 {
		background-position-y: 50% !important;
	}

}
/* Front Page Social Budges */
@media ( min-width: 1024px ) {
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background > div.stk-row,
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background > div.stk-row > 
	div.stk-31de384,
	body.page-id-772 main#main.site-main div.entry-content.is-layout-flow > div.stk-3c28047.stk-block-background > div.stk-row div.stk-31de384-inner-blocks {
		position: static !important ;
	}
}

/* Doctor Welcome */

/* always position it right after then first page scroll
 * variable is defined with javascript using the Custom CSS & JS add-on */
body.page-id-772 main#main.site-main div.stk-3c28047 {
	padding-bottom: calc(98vh - var(--front-page-social-budges-bottom)) !important ;
}

/* Welcome box's padding background */
body.page-id-772 main#main.site-main .stk-d89e132::before {
  /* needs to be adjusted very slightly to much top of page */
}

main#main.site-main div.stk-row.stk-inner-blocks.stk-d89e132-column {
	background-color: #1a1a1aa0 !important ;
}
@media ( max-width: 1023px ) {
	main#main.site-main img.wp-image-8312 {
		min-width: 100% !important ;
	}
	main#main.site-main div.stk-69da1f7 div.wp-block-column.has-border-color {
		border-width: 30px !important ;
	}
	main#main.site-main div.front-page-doctor-intro-title {
		margin-bottom: 25px !important ;
	}
	main#main.site-main div.stk-e9b53a5 {
		padding-left: 30px !important ;
		padding-right: 30px !important ;
		padding-top: 0px !important ;
		padding-bottom: 60px !important ;
	}
}

/* Front Page Social and Communication Icons */
div.front-page-social-badges {
	z-index: 2 !important
}

/* Egersis Approach Boxes */
div.wp-block-stackable-column.egersis-approach-box {
	padding-left: min(3vw,70px) !important;
	padding-right: min(3vw,70px) !important;
}

/* Always hide Egersis orb over heading */
.egersis-orb { 
	display: none ! important 
}


/* Front page Headings center when narrower then 768px */
@media ( max-width: 767px ) {
	
	/* Heading Title */
	.ct-advanced-heading {
		padding-left: 0px !important ;
		padding-right: 14px !important ;
	}
	/* Heading Title "Shadow" */
	.ct-advanced-heading:after {
		justify-content: center ;
		transform-origin: center ;
		
	}
	
}

/* Front page call out boxes turn blue on tablets and mobiles 768px */
@media ( max-width: 767px ) {

	body.page-id-772 div.ct-special-features > div > div.stk-column {
		background-color: var(--theme-selection-background-color) !important ;
	}

}