/* CSS Style */

#site-header * {
	margin: 0;
	padding: 0;
	font-weight: var(--sc-font-weight-extralight);
	font-family: var(--sc-font-family-header);
}

#site-header {
	width: 100%;
	height: 100px;
	margin: auto;
	background-color: var(--sc-colorbg-dark-mode-menu);
}

#site-header-inner {
	display: grid;
	position: relative;
	grid-template-columns: 190px max-content max-content;
	grid-template-areas: "logo menu bonus";
	align-items: center;
	justify-content: space-between;
	width: 90%;
	max-width: 1200px;
	height: 100px;
	margin: auto;
	padding-top: 16px;
	gap: 0 10px;
}

#site-logo {
	grid-area: logo;
}

#site-navigation-wrap {
	display: flex;
	grid-area: menu;
	align-items: center;
	justify-content: center;
	margin: auto;
	height: 100%;
}

#site-navigation {
	height: 100%;
	display: flex;
	align-items: center;
}

#header-aside {
	grid-area: bonus;
}

ul#menu-menu-main {
	display: flex;
	/*gap: 20px;*/
	height: 100%;
	align-items: center;
}

ul#menu-menu-main li {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

#site-navigation-wrap ul li.menu-item a {
	color: var(--sc-color-dark-mode);
	font-size: 22px;
	height: 100%;
	display: flex;
	align-items: center;
}

#site-navigation-wrap ul li.menu-item > a {
	padding: 0 10px;
}

#site-navigation-wrap ul li.current-menu-item a span {
	color: var(--sc-color-primary);
	font-weight: var(--sc-font-weight-regular);
	letter-spacing: 0.02em;
}

#site-navigation-wrap ul li a:hover {
	color: var(--sc-color-primary);
}

nav#site-navigation .sc-esta-semana.menu-item {
	position: relative;
}

nav#site-navigation .sc-esta-semana.menu-item::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	background: var(--sc-color-dark-mode);
	bottom: 8px;
	transition: all 0.2s ease-in-out;
}

nav#site-navigation .sc-esta-semana.menu-item:hover::before {
	width: 80%;
	transform: translate(10%, 10%);
	background: var(--sc-color-primary);
}

nav#site-navigation .sc-esta-semana.current_page_item::before {
	width: 100%;
	background: var(--sc-color-primary);
}

#site-navigation-wrap ul li .site-search-toggle {
	padding-left: 32px;
}

#header-aside a.btn {
	display: flex;
	padding: 8px 16px;
	border: 2px solid var(--sc-secondary-button-color-border);
	border-radius: var(--sc-button-primary-border-radius);
	background: none;
	color: var(--sc-secondary-button-color-text);
	font-weight: var(--sc-font-weight-regular);
	font-size: 20px;
	letter-spacing: var(--sc-letter-spacing-uppercase);
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out;
}

#header-aside a:hover {
	background-color: var(--sc-secondary-button-color-background-hover);
	box-shadow: none;
	color: var(--sc-primary-button-color-text);
}

#searchform-header-replace .searchform-header-replace__inner {
	display: flex;
	width: 800px;
	margin: auto;
	gap: 16px;
}

#searchform-header-replace .searchform-header-replace__inner * {
	font-size: 24px;
	font-family: var(--sc-font-family-body);
	text-transform: lowercase;
}

#searchform-header-replace input[type="search"] {
	margin: auto;
	padding-left: 32px;
	border-radius: 100px;
	background-color: var(--sc-color-dark-mode-80);
	color: var(--sc-color-light-mode);
	font-size: 24px;
	text-transform: lowercase;
}

#searchform-header-replace .searchform {
	height: 60px;
}

span.searchform-header-replace-close__icon {
	width: 24px;
	height: 24px;
	border: 2px solid var(--sc-color-dark-mode-60);
	border-radius: 50%;
	color: var(--sc-color-dark-mode-60);
	line-height: 0.9;
	text-align: center;
}

span.searchform-header-replace-close__icon:hover {
	background-color: var(--sc-color-dark-mode);
	color: var(--sc-color-light-mode);
}

/* Mobile MENU --> */

#mobile-menu {
	display: none;
}

#mobile-menu .mobile-menu-toggle__icon {
	color: var(--sc-color-dark-mode);
}

#sidr-main {
	background-color: var(--sc-color-light-mode);
	color: var(--sc-color-dark-mode-80);
	font-weight: var(--sc-font-weight-extralight);
}

#sidr-main a span {
	font-size: 24px;
	font-family: var(--sc-font-family-header);
}

#sidr-main .sidr-class-dropdown-menu > li:first-child,
#sidr-main .sidr-class-dropdown-menu li {
	border: none;
}

#sidr-main .sidr-class-mobile-menu-searchform {
	margin: 32px 16px;
	border-radius: 100px;
	background-color: var(--sc-color-dark-mode-70);
}

#sidr-main .sidr-class-mobile-menu-searchform * {
	color: var(--sc-color-light-mode);
	font-size: 16px;
	line-height: 1;
	font-family: var(--sc-font-family-body);
}

#sidr-main .sidr-class-current_page_item {
	color: var(--sc-color-primary);
	font-weight: var(--sc-font-weight-regular);
}

#site-header-sticky-wrapper.is-sticky #site-header {
	background-color: var(--sc-colorbg-dark-mode-alt-1);
}

/* <-- Mobile MENU*/

/* Media Query for Tablets Ipads portrait mode */
@media (max-width: 1024px) {
	#mobile-menu {
		display: block;
		grid-area: mobile-menu;
	}

	#site-header {
		height: 100px;
	}

	#site-navigation-wrap {
		display: none;
	}

	#site-header-inner {
		grid-template-columns: max-content max-content max-content;
		grid-template-areas: "mobile-menu logo bonus";
		padding: 0 16px;
	}
}

/* Media Query for low resolution  Tablets, Ipads */
@media (max-width: 768px) {
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
	#site-logo .logo-img {
		max-height: 18px;
	}

	#header-aside {
		margin-right: -16px;
	}

	#header-aside a.btn {
		padding: 6px 12px;
		font-size: 14px;
	}
}
