/*
Theme Name: Mohamed Yazid
Theme URI: https://mohamedyazid.com
Description: Sahifa child theme for mohamedyazid.com.
Author: Mohamed Yazid
Template: sahifa
Version: 2.0.0
Text Domain: sahifa-mohamedyazid
*/

/* Site-specific overrides (optional) — shared styles live in gp-tech-blog-shared */

/* Keep a clean right-sidebar layout for article pages. */
body.tech-blog .content {
	min-height: 1px;
}

body.tech-blog .post-listing {
	border-radius: 4px;
}

/* Always style Sahifa main-nav submenu with dark palette. */
body.tech-blog #main-nav li.menu-item-has-children > ul.sub-menu.menu-sub-content,
body.tech-blog #main-nav ul.sub-menu.menu-sub-content {
	background: #1f1f1f !important;
	border-top: 2px solid #f88c00 !important;
}

body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li {
	background: transparent !important;
	border-bottom: 1px solid #323232 !important;
}

body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li:last-child {
	border-bottom: 0 !important;
}

body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li > a {
	color: #f4f4f4 !important;
	background: transparent !important;
	padding: 9px 12px !important;
	line-height: 1.45 !important;
	font-weight: 500 !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li:hover > a,
body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li.current-menu-item > a,
body.tech-blog #main-nav ul.sub-menu.menu-sub-content > li.current-menu-parent > a {
	color: #fff !important;
	background: #2d2d2d !important;
}

/* Smooth desktop hover-open behavior for nav dropdowns. */
@media (min-width: 992px) {
	#main-nav li.gp-nav-hover-open > ul.sub-menu,
	#main-nav li.gp-nav-hover-open > .mega-menu-block,
	#top-nav li.gp-nav-hover-open > ul.sub-menu {
		display: block;
		-webkit-animation: tieFadeInDown .2s ease-in;
		-moz-animation: tieFadeInDown .2s ease-in;
		animation: tieFadeInDown .2s ease-in;
	}

	/* Orange connector chevron (same as Sahifa parent hover on items with submenus). */
	#main-nav ul > li.menu-item-has-children:hover > a:after,
	#main-nav ul > li.mega-menu:hover > a:after,
	#main-nav ul > li.menu-item-has-children.gp-nav-hover-open > a:after,
	#main-nav ul > li.mega-menu.gp-nav-hover-open > a:after {
		content: "";
		position: absolute;
		left: 20px;
		top: 36px;
		border-width: 0 8px 8px;
		border-style: solid;
		border-color: transparent transparent #f88c00;
		display: block;
		width: 0;
		z-index: 200;
		-webkit-animation: tieFadeInDown .2s ease-in;
		-moz-animation: tieFadeInDown .2s ease-in;
		animation: tieFadeInDown .2s ease-in;
	}

	#main-nav ul > li.current-menu-item.menu-item-has-children:hover > a:after,
	#main-nav ul > li.current_page_parent.menu-item-has-children:hover > a:after,
	#main-nav ul > li.current-menu-item.menu-item-has-children.gp-nav-hover-open > a:after,
	#main-nav ul > li.current_page_parent.menu-item-has-children.gp-nav-hover-open > a:after {
		top: 45px;
	}

	body.rtl #main-nav ul > li.menu-item-has-children:hover > a:after,
	body.rtl #main-nav ul > li.mega-menu:hover > a:after,
	body.rtl #main-nav ul > li.menu-item-has-children.gp-nav-hover-open > a:after,
	body.rtl #main-nav ul > li.mega-menu.gp-nav-hover-open > a:after {
		right: 20px;
		left: auto;
	}

	/* Brighten dropdown carets while hovered/open. */
	#main-nav ul > li.menu-item-has-children:hover:after,
	#main-nav ul > li.mega-menu:hover:after,
	#main-nav ul > li.menu-item-has-children.gp-nav-hover-open:after,
	#main-nav ul > li.mega-menu.gp-nav-hover-open:after {
		border-top-color: #fff;
	}

	#main-nav ul ul li.menu-item-has-children:hover:after,
	#main-nav ul ul li.mega-menu:hover:after,
	#main-nav ul ul li.menu-item-has-children.gp-nav-hover-open:after,
	#main-nav ul ul li.mega-menu.gp-nav-hover-open:after {
		border-left-color: #fff;
	}

	body.rtl #main-nav ul ul li.menu-item-has-children:hover:after,
	body.rtl #main-nav ul ul li.mega-menu:hover:after,
	body.rtl #main-nav ul ul li.menu-item-has-children.gp-nav-hover-open:after,
	body.rtl #main-nav ul ul li.mega-menu.gp-nav-hover-open:after {
		border-right-color: #fff;
		border-left-color: transparent;
	}

	/* Top bar language/other dropdowns: same upward chevron cue. */
	#top-nav .top-menu > ul > li.menu-item-has-children:hover:before,
	#top-nav .top-menu > ul > li.menu-item-has-children.gp-nav-hover-open:before {
		content: " ";
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		z-index: 2;
		right: 45%;
		border: 4px solid transparent;
		border-top-color: #f88c00;
	}

	/* Hover feedback for top-level links without a submenu. */
	#main-nav .main-menu > ul > li > a {
		transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	}

	#main-nav .main-menu > ul > li:not(.menu-item-has-children):not(.mega-menu):not(.current-menu-item):not(.current-menu-parent):not(.current_page_parent):not(.current-page-ancestor):hover > a,
	#main-nav .main-menu > ul > li:not(.menu-item-has-children):not(.mega-menu):not(.current-menu-item):not(.current-menu-parent):not(.current_page_parent):not(.current-page-ancestor):focus-within > a {
		color: #fff !important;
		background: #383838 !important;
		box-shadow: inset 0 3px 0 #f88c00;
	}

	#top-nav .top-menu > ul > li:not(.menu-item-has-children):not(.current-menu-item):hover > a,
	#top-nav .top-menu > ul > li:not(.menu-item-has-children):not(.current-menu-item):focus-within > a {
		color: #fff !important;
		background: rgba(255, 255, 255, 0.08) !important;
		box-shadow: inset 0 2px 0 #f88c00;
	}

	/* Force primary nav dropdowns to the dark Sahifa panel style. */
	#main-nav .menu-sub-content,
	#main-nav ul ul.sub-menu {
		background: #1f1f1f !important;
		border-top: 2px solid #f88c00 !important;
	}

	#main-nav ul ul.sub-menu li {
		background: transparent !important;
		border-bottom: 1px solid #323232 !important;
	}

	#main-nav ul ul.sub-menu li:last-child {
		border-bottom: 0 !important;
	}

	#main-nav ul ul.sub-menu a,
	#main-nav .menu-sub-content a {
		color: #f4f4f4 !important;
		background: transparent !important;
		padding: 9px 12px !important;
		line-height: 1.45 !important;
		font-weight: 500 !important;
		text-shadow: none !important;
		opacity: 1 !important;
	}

	#main-nav ul ul.sub-menu li:hover > a,
	#main-nav ul ul.sub-menu li.current-menu-item > a,
	#main-nav ul ul.sub-menu li.current-menu-parent > a {
		color: #fff !important;
		background: #2d2d2d !important;
		padding: 9px 12px !important;
	}

	/* Match darker dropdown look from the reference navigation. */
	#top-nav .top-menu ul ul {
		background: #1f1f1f;
		border-top: 2px solid #f88c00;
		min-width: 220px;
	}

	#top-nav .top-menu ul ul li {
		min-width: 220px;
		border-bottom: 1px solid #323232;
	}

	#top-nav .top-menu ul ul li:last-child {
		border-bottom: 0;
	}

	#top-nav .top-menu ul ul a {
		color: #f4f4f4 !important;
		width: auto;
		line-height: 1.45;
		font-weight: 500;
		padding: 10px 12px;
	}

	#top-nav .top-menu ul ul li:hover > a,
	#top-nav .top-menu ul ul li.current-menu-item > a {
		color: #fff !important;
		background: #2d2d2d !important;
		padding: 10px 12px;
	}
}

/* Fallback nav contrast overrides when body class differs (e.g. non tech-blog pages). */
#main-nav ul ul.sub-menu,
#main-nav .menu-sub-content,
#top-nav .top-menu ul ul {
	background: #1f1f1f !important;
	border-top: 2px solid #f88c00 !important;
}

#main-nav ul ul.sub-menu li,
#main-nav .menu-sub-content li,
#top-nav .top-menu ul ul li {
	background: transparent !important;
	border-bottom: 1px solid #323232 !important;
}

#main-nav ul ul.sub-menu li:last-child,
#main-nav .menu-sub-content li:last-child,
#top-nav .top-menu ul ul li:last-child {
	border-bottom: 0 !important;
}

#main-nav ul ul.sub-menu li > a,
#main-nav .menu-sub-content li > a,
#top-nav .top-menu ul ul li > a {
	color: #f4f4f4 !important;
	background: transparent !important;
	text-shadow: none !important;
	opacity: 1 !important;
	font-weight: 500 !important;
}

#main-nav ul ul.sub-menu li:hover > a,
#main-nav ul ul.sub-menu li.current-menu-item > a,
#main-nav ul ul.sub-menu li.current-menu-parent > a,
#main-nav .menu-sub-content li:hover > a,
#main-nav .menu-sub-content li.current-menu-item > a,
#main-nav .menu-sub-content li.current-menu-parent > a,
#top-nav .top-menu ul ul li:hover > a,
#top-nav .top-menu ul ul li.current-menu-item > a {
	color: #fff !important;
	background: #2d2d2d !important;
}