/**
 * Asakim design layer — header and main menu (phase 3).
 *
 * Appearance only: the logo, menu items, their order and links are untouched
 * (D9). Sahifa hides .top-nav and #main-nav below 900px and shows its mobile
 * menu instead, so these rules only matter on desktop.
 *
 * 1. Top bar: 12px light grey (#838383 on #fbfbfb, ~3.7:1, below WCAG AA) ->
 *    13px #666 (~5.5:1).
 * 2. Main menu bar: flat. Sahifa draws a bevel (inset shadow), 1px dividers
 *    between items, and gives normal items a 42px box inside the 52px bar,
 *    while the current item fills all 52px. Now every item is 52px with its
 *    text centred, no bevel and no dividers.
 * 3. Menu text 13px -> 15px from 1046px up. Between 900px and 1045px the bar
 *    is ~99% of the window and the English menu (9 items, ~823px at 13px)
 *    would wrap at 15px, so the size stays 13px there.
 * 4. Dropdown links 12px -> 14px.
 *
 * Colours are left to Sahifa's theme options (bar #2d2d2d, accent #00acbc).
 * Every rule is scoped under body.wp-theme-sahifa.
 */

/* 1. Top bar ------------------------------------------------------------- */

body.wp-theme-sahifa .top-nav ul li {
	font-size: 13px;
}

body.wp-theme-sahifa .top-nav ul li a {
	color: #666;
}

/* 2. Main menu bar: flat, full-height items ------------------------------ */

body.wp-theme-sahifa #main-nav {
	box-shadow: none;
	border-bottom-width: 3px;
}

body.wp-theme-sahifa #main-nav .main-menu > ul > li {
	height: 52px;
	border-width: 0;
}

body.wp-theme-sahifa #main-nav .main-menu > ul > li > a {
	height: 52px;
	line-height: 52px;
	border-width: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The little arrow that joins an open dropdown to its item: Sahifa places it
   at 36px for 42px items and 45px for the (52px) current item. All items are
   52px now, so all use 45px. */
body.wp-theme-sahifa #main-nav .main-menu > ul > li.menu-item-has-children:hover > a:after,
body.wp-theme-sahifa #main-nav .main-menu > ul > li.mega-menu:hover > a:after {
	top: 45px;
}

/* 3. Menu text size (wide screens only, see header) --------------------- */

@media only screen and (min-width: 1046px) {
	body.wp-theme-sahifa #main-nav .main-menu > ul > li {
		font-size: 15px;
		font-weight: 500;
	}
}

/* 4. Dropdown ------------------------------------------------------------ */

body.wp-theme-sahifa #main-nav ul ul a {
	font-size: 14px;
}