/* ==========================================================================
   2026-08-27 ヘッダーメニュー刷新 (birusisu.co.jp の実装思想を参考に独自実装)
   - JSに頼らず :hover / :focus-within で開く (Kadence標準の hover-to-open を踏襲)
   - デスクトップ (#main-header, min-width:1025px) のみに影響。
     モバイルは #mobile-site-navigation (別DOM・別実装) のため無関係。
   - 参考サイトのCSSはコピーせず、自社ブランドカラー(#c41e3a)で再構築した。
   ========================================================================== */

/* --- SVGの「拡大」ツールチップ露出を止め、独自の矢印に置き換え --- */
.header-navigation .dropdown-nav-toggle svg {
    display: none;
}
.header-navigation .dropdown-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-navigation .dropdown-nav-toggle::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078";
    font-size: .68em;
    display: inline-block;
    transition: transform .25s ease;
}
.header-navigation li.menu-item:hover > a .dropdown-nav-toggle::after,
.header-navigation li.menu-item:focus-within > a .dropdown-nav-toggle::after {
    transform: rotate(180deg);
}

/* --- トップレベルのリンク: ホバー色をブランド赤に統一 + 下線スライド演出 --- */
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819) > a {
    position: relative;
    transition: color .2s ease;
}
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819):hover > a,
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819):focus-within > a,
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819) > a:focus {
    color: #c41e3a !important;
}
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819) > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.4rem;
    height: 2px;
    background: #c41e3a;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819):hover > a::after,
.header-navigation .header-menu-container > ul > li.menu-item:not(#menu-item-819):focus-within > a::after {
    transform: scaleX(1);
}

/* --- 2026-08-27 第3便: 閉じているドロップダウンは絶対にクリックを奪わない ---
   Kadence の閉状態は opacity/visibility を 0.2s かけて遷移させるため、閉じ始めてから
   実際に visibility:hidden になるまでの間、透明なパネルが下の要素を覆ってしまう。
   pointer-events は transition の対象外なので、状態が外れた瞬間にヒットテストから
   外れる。これで「メガメニューがフェードアウトしている最中に他のメニューが押せない」
   が構造的に起きなくなる (デスクトップの #site-navigation のみ。SPドロワーは別DOM)。 */
.header-navigation .header-menu-container ul ul.sub-menu {
    pointer-events: none;
}
.header-navigation .header-menu-container ul li.menu-item:hover > ul.sub-menu,
.header-navigation .header-menu-container ul li.menu-item:focus-within > ul.sub-menu,
.header-navigation .header-menu-container ul li.menu-item.menu-item--toggled-on > ul.sub-menu {
    pointer-events: auto;
}

/* --- 2026-08-27 第3便: キーボード (Tab) でもドロップダウンを開けるようにする ---
   親テーマ Kadence の「開く」ルールは
     .header-navigation[...] ul li:not(.menu-item--has-toggle):focus > ul
   だが、ドロップダウンを持つ項目には Kadence 自身の JS が必ず
   .menu-item--has-toggle を付けるため、この :focus 経路は永久に成立しない。
   結果、子メニューは visibility:hidden のままでフォーカスも当たらず、
   Tab だけでは「新着情報一覧」「電気設備工事」等に一切到達できなかった
   (第1〜3便の変更とは無関係の、親テーマ側の既存の穴。実測で確認済み)。
   親テーマは変更禁止なので、子テーマ側で :focus-within の経路を明示的に開く。
   display は #menu-item-834 > .sub-menu (ID詳細度) の grid が勝つため
   メガメニューの2カラムレイアウトは崩れない。 */
.header-navigation .header-menu-container ul li.menu-item:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    clip: auto;
    height: auto;
    display: block;
}

/* --- 共通ドロップダウン (1〜2項目の項目) の見た目を刷新 --- */
.header-navigation .header-menu-container ul ul.sub-menu {
    min-width: 15rem;
    padding: .5rem 0;
    border-radius: .75rem;
    border-top: 3px solid #c41e3a;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
    padding: .85rem 1.5rem;
    font-size: .95rem;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.header-navigation .header-menu-container ul ul li.menu-item:hover > a {
    padding-left: 1.8rem;
}

/* ==========================================================================
   事業案内 (menu-item-834, 6項目) — birusisu型の2カラムメガメニュー
   メニュー項目IDは実測・固定 (WPメニュー編集で並び替えない限り不変)
   ========================================================================== */
#menu-item-834 > .sub-menu {
    position: absolute;
    left: 50%;
    right: auto;
    top: calc(100% + .75rem);
    transform: translateX(-50%) translateY(-12px);
    width: min(58rem, 92vw);
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem 2.5rem;
    padding: 2.2rem 3rem;
    border-radius: 1.2rem;
    border-top: none;
    background: #1c1c1c;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}
#menu-item-834:hover > .sub-menu,
#menu-item-834:focus-within > .sub-menu,
#menu-item-834.menu-item--toggled-on > .sub-menu {
    transform: translateX(-50%) translateY(0);
}

/* トリガーとメガメニューの間の物理的な隙間 (top: calc(100% + .75rem) 分) を
   不可視のブリッジで埋め、まっすぐ下に降りる動きで hover が切れないようにする。

   🔴 2026-08-27 第3便で範囲を修正した。
   第2便では width:min(58rem,92vw) = 928px の帯を「常時」敷いていたため、
   事業案内とは無関係の「お問い合わせ」ボタンの下端(y=67〜79)までこの不可視の帯が
   覆いかぶさり、そこをクリックしても反応しない状態になっていた。
   (実測: メニューを一切開いていない状態で document.elementFromPoint(1248, 73) が
    A[in menu-item-819] ではなく LI#menu-item-834 を返していた)
   → ブリッジはトリガー自身の幅だけに限定し、かつ開いている時だけ出す。
     斜め移動の救済は mega-menu.js の三角形判定が受け持つ。 */
#menu-item-834:hover::before,
#menu-item-834:focus-within::before,
#menu-item-834.menu-item--toggled-on::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .85rem;
    z-index: 1;
}

/* ブランドの「N」マーク的な、大きく淡いアイコンの透かし (装飾のみ) */
#menu-item-834 > .sub-menu::after {
    content: "\f0e7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: -1rem;
    bottom: -2.2rem;
    font-size: 12rem;
    line-height: 1;
    color: #c41e3a;
    opacity: .1;
    pointer-events: none;
    z-index: 0;
}

#menu-item-834 > .sub-menu > li.menu-item {
    position: relative;
    z-index: 1;
    border-bottom: none !important;
}
#menu-item-834 > .sub-menu > li.menu-item > a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.1rem !important;
    border-radius: .6rem;
    color: #f2f2f2 !important;
    font-size: 1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, .18);
}
#menu-item-834 > .sub-menu > li.menu-item:last-child > a,
#menu-item-834 > .sub-menu > li.menu-item:nth-last-child(2) > a {
    border-bottom: none;
}
#menu-item-834 > .sub-menu > li.menu-item:hover > a {
    background-color: rgba(255, 255, 255, .08);
    color: #fff !important;
    padding-left: 1.5rem !important;
}
#menu-item-834 > .sub-menu > li.menu-item > a::before {
    flex: 0 0 auto;
    width: 1.6rem;
    margin-right: 0;
    text-align: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.15rem;
    color: #c41e3a;
    transition: transform .2s ease;
}
#menu-item-834 > .sub-menu > li.menu-item:hover > a::before {
    transform: scale(1.15);
}

/* 各リンクのアイコン (/service/ の見出しアイコンと対応させている) */
#menu-item-801 > a::before { content: "\f0e7"; } /* 電気設備工事: fa-bolt */
#menu-item-802 > a::before { content: "\f519"; } /* 無線・放送設備: fa-tower-broadcast */
#menu-item-803 > a::before { content: "\f2dc"; } /* 屋根融雪・ロードヒーティング: fa-snowflake */
#menu-item-804 > a::before { content: "\f0f3"; } /* 火災報知器設備: fa-bell */
#menu-item-805 > a::before { content: "\f095"; } /* 電話設備: fa-phone */
#menu-item-806 > a::before { content: "\f5ba"; } /* 太陽光発電システム: fa-solar-panel */