/*
Theme Name:   Shapely Child
Template:     shapely
Description:  prosper-d.co.jp /ph/ 用の Shapely 子テーマ。Shapely 1.3 系への更新で変わったヘッダーを、更新前（Shapely 1.1.7）の見た目に戻す。
Version:      1.0.0
Text Domain:  shapely-child
*/

/* ==========================================================================
   ヘッダー（全画面幅）
   ========================================================================== */

/* 1.3 系で追加された上下 padding を外す */
#site-navigation.main-navigation {
	padding: 0;
}

/* 1.1.7 の .row（Bootstrap）と同じく左右 -15px で配置する */
#site-navigation .container > .flex-row {
	margin-right: -15px;
	margin-left: -15px;
}

/* ロゴ：1.1.7 と同じく 55px の行に高さ 60% で表示（1.3 系ではこの指定がなくなり原寸で表示される） */
.nav-bar .site-title-container,
.nav-bar .site-title-container .custom-logo-link {
	display: inline-block;
	height: 55px;
}

.nav-bar .site-title-container .logo {
	width: auto;
	max-height: 60%;
}

/* ==========================================================================
   ヘッダー（PC表示：992px 以上）
   Shapely 1.3 系では .flex-row が flex（1行・左右振り分け）になり、
   長いメニューがロゴの横に押し込まれて2段に折り返し、検索アイコンも重なる。
   1.1.7 と同じ float レイアウト（メニューが収まらなければロゴの下の段に右寄せ）に戻す。
   ========================================================================== */
@media all and (min-width: 992px) {
	#site-navigation .container > .flex-row {
		display: block;
	}

	/* float を内包する（1.1.7 では .main-navigation 自体が float で内包していた） */
	#site-navigation .container > .flex-row::after {
		content: "";
		display: table;
		clear: both;
	}

	/*
	 * 検索アイコン：1.1.7 では .module.left が付いており、メニューの右に float:left で並び、
	 * #site-navigation .module.left の padding-left: 15px が効いていた
	 */
	.nav-bar .search-widget-handle {
		float: left;
		padding-left: 15px;
	}

	/* 1.3 系で <div> から <button> に変わり、ブラウザ標準の余白が付いたため外す */
	.nav-bar .search-widget-handle button.search {
		padding: 0;
	}

	/* Font Awesome 7 はアイコン幅が 1.25em 固定のため、1.1.7（FA4）と同じく文字幅に戻す */
	.nav-bar .search-widget-handle button.search i {
		width: auto;
	}

	/*
	 * ドロップダウン矢印：1.1.7 と同じ小さめのグレー、項目の右端に配置。
	 * Font Awesome 7 の矢印は FA4 より大きく太いため、8px で 1.1.7（FA4・11px）とほぼ同じ大きさになる
	 */
	.main-navigation .menu > li.menu-item-has-children {
		padding-right: 18px;
	}

	.main-navigation .menu > li.menu-item-has-children > .dropdown:after,
	.main-navigation .menu > li.menu-item-has-children.dropdown:after {
		right: 0;
		font-size: 8px;
		color: inherit;
	}
}

/* ==========================================================================
   ヘッダー（スマホ・タブレット表示：991px 以下）
   ========================================================================== */
@media all and (max-width: 991px) {
	/* 1.3 系で追加されたメニュー上の余白。閉じている状態でもヘッダーが 20px 高くなるため外す */
	.navbar-collapse {
		margin-top: 0;
	}
}

/*
 * 1024px 以下：1.1.7 と同じく開閉ボタン（.shapely-dropdown）の矢印だけを表示する。
 * 1.3 系では :after の矢印を表示する指定の詳細度が高く、この幅で矢印が2つ並ぶため。
 */
@media all and (max-width: 1024px) {
	.main-navigation .menu > li.menu-item-has-children > .dropdown:after,
	.main-navigation .menu > li.menu-item-has-children.dropdown:after {
		display: none;
	}
}