/**
 * SPハンバーガードロワー（Kadence mobile popup）の見た目調整
 *
 * WHY: クライアント指示（2026-09-25 修正依頼 H1 / SSOT DSK-085）で、ドロワー内の
 *      メニュー項目にアイコン・右矢印・区切り線を追加し、既存の「電話番号・受付
 *      時間」（mobile-html）「無料相談はこちら」（mobile-button）を参考画像どおり
 *      の見た目に整えるよう依頼された。電話番号・受付時間・問い合わせ先URLは
 *      Kadence カスタマイザー（theme_mod: mobile_html_content / mobile_button_link）
 *      に既に設定済みで、PHP側で複製しない（inc/mobile-drawer.php 冒頭 WHY 参照）。
 *      全ページ共通のヘッダー要素のため is_front_page() で絞らず、functions.php で
 *      全ページに enqueue する（front.css は is_front_page() 限定のため対象外）。
 *      ルートセレクタに #mobile-drawer（Kadence 標準の固定ID）を使うのは、
 *      Kadence 側のグローバルパレット由来の動的インラインCSS（クラスセレクタ）に
 *      対して詳細度で負けないようにするため。PCヘッダー（.main-header-menu-container
 *      等）には一切触れない。
 *
 * @package kadence-child
 */

/* --------------------------------------------------------------------------
   メニュー項目（mobile-navigation）: アイコン + ラベル + 区切り線 + ›
   -------------------------------------------------------------------------- */

#mobile-drawer #mobile-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#mobile-drawer #mobile-menu > .menu-item {
	border-bottom: 1px solid var(--ds-line);
}

#mobile-drawer #mobile-menu > .menu-item:last-child {
	border-bottom: none;
}

#mobile-drawer #mobile-menu > .menu-item > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
	color: var(--ds-fg);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

/* WHY: アイコンは疑似要素の背景画像で出す。種類の出し分けは inc/mobile-drawer.php の
 *      nav_menu_css_class フィルタが URL パターンから付与する ds-mnav__item--* クラス。 */
#mobile-drawer #mobile-menu > .menu-item > a::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mobile-drawer #mobile-menu > .menu-item > a::after {
	content: "\203A"; /* › */
	margin-left: auto;
	color: var(--ds-brand);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

#mobile-drawer .ds-mnav__item--service > a::before {
	background-image: url("../img/icon-mnav-service.svg");
}

#mobile-drawer .ds-mnav__item--reasons > a::before {
	background-image: url("../img/icon-mnav-reasons.svg");
}

#mobile-drawer .ds-mnav__item--shop > a::before {
	background-image: url("../img/icon-mnav-shop.svg");
}

#mobile-drawer .ds-mnav__item--blog > a::before {
	background-image: url("../img/icon-mnav-blog.svg");
}

/* --------------------------------------------------------------------------
   「＼ お問い合わせ ／」+ 電話番号・受付時間（mobile-html）
   -------------------------------------------------------------------------- */

#mobile-drawer [data-section="kadence_customizer_mobile_html"] {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ds-line);
	text-align: center;
	/* WHY: Kadence はこの枠を横並びの flex にするため、::before の小見出しが
	 *      電話番号の左へ回り込む（2026-09-27 に 375px で実測）。縦積みに固定する。 */
	flex-direction: column;
	align-items: center;
}

/* WHY: 小見出し「＼ お問い合わせ ／」はクライアント参考画像の装飾ラベルで、
 *      customizer の mobile_html_content（電話番号・受付時間の実データ）とは
 *      別物のため、複製せず疑似要素の装飾テキストとして追加する。 */
#mobile-drawer [data-section="kadence_customizer_mobile_html"]::before {
	content: "＼ お問い合わせ ／";
	display: block;
	margin-bottom: 10px;
	color: var(--ds-fg-soft);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

#mobile-drawer .ds-hdr-tel {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

#mobile-drawer .ds-hdr-tel__num {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ds-fg);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

#mobile-drawer .ds-hdr-tel__num::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("../img/icon-mnav-tel.svg") no-repeat center / contain;
}

#mobile-drawer .ds-hdr-tel__hours {
	color: var(--ds-fg-soft);
	font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   「無料相談はこちら」ボタン（mobile-button）
   -------------------------------------------------------------------------- */

#mobile-drawer [data-section="kadence_customizer_mobile_button"] {
	margin-top: 16px;
}

#mobile-drawer .mobile-header-button-wrap .mobile-header-button.button { /* .button: style.css の既存 block 指定より詳細度を上げる */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 15px 16px;
	background-color: var(--ds-cta-ink);
	border-radius: var(--ds-radius-md);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

#mobile-drawer .mobile-header-button-wrap .mobile-header-button:hover,
#mobile-drawer .mobile-header-button-wrap .mobile-header-button:focus-visible {
	background-color: var(--ds-cta-ink-hover);
	color: #fff;
}

#mobile-drawer .mobile-header-button-wrap .mobile-header-button::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("../img/icon-mnav-mail-white.svg") no-repeat center / contain;
}

#mobile-drawer .mobile-header-button-wrap .mobile-header-button::after {
	content: "\203A"; /* › */
	line-height: 1;
}