/* =============================================================
 * INNOVACTORY Block Theme - layout.css
 *
 * クラシック版と同一レイアウト。
 * ブロックテーマ固有の追加: wp-block-site-logo・サイドバー内ブロックのリセット
 * ============================================================= */

/* =============================================================
 * Sidebar
 * ============================================================= */
.site-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0; /* is-layout-flex が gap:0.5em を注入するのを打ち消す */
    flex-wrap: nowrap; /* is-layout-flex の flex-wrap:wrap を打ち消す */
    transition: transform var(--transition);
}

/* ロゴエリア（白背景）
 * サイドバー幅 200px に対して左右 padding 8px ずつ、実描画幅 184px。
 * これは元サイト innovactory.co.jp と同一仕様。 */
.sidebar-logo-area {
    background: var(--color-white);
    padding: 15px 8px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-logo-area a { display: block; line-height: 0; }
.sidebar-logo-area img { width: 184px; height: auto; }

/* wp:site-logo ブロックのリセット（ブロックデフォルト余白を無効化） */
.sidebar-logo-area .wp-block-site-logo {
    margin: 0;
    line-height: 0;
}
.sidebar-logo-area .wp-block-site-logo a { display: block; line-height: 0; }
.sidebar-logo-area .wp-block-site-logo img { width: 184px; height: auto; }

/* ナビエリア（青背景） */
.sidebar-nav-area {
    background: var(--color-primary);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* is-layout-flex が gap:0.5em を注入するのを打ち消す */
    flex-wrap: nowrap;
    padding-top: var(--sp-md);
    padding-bottom: var(--sp-md);
}

/* sidebar-nav ブロックグループのリセット */
.sidebar-nav.wp-block-group { margin: 0; padding: 0; flex: 1; }

/* ナビメニュー */
.sidebar-nav { flex: 1; }
.sidebar-nav ul { list-style: none; }

.sidebar-nav ul li a {
    display: block;
    position: relative;
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.09em;
    padding: 14px 28px;
    text-decoration: none;
    transition: color var(--transition);
    text-transform: uppercase;
}
/* 元サイトのナビアンダーラインホバー: 左→右へ伸びる白い下線 */
.sidebar-nav ul li a::after {
    content: '';
    position: absolute;
    left: 28px;
    bottom: 8px;
    width: calc(100% - 56px);
    height: 1.5px;
    background: var(--color-white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.sidebar-nav ul li a:hover::after,
.sidebar-nav ul li.current-menu-item > a::after,
.sidebar-nav ul li.current-page-ancestor > a::after,
.sidebar-nav ul li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}
.sidebar-nav ul li a:hover,
.sidebar-nav ul li.current-menu-item > a,
.sidebar-nav ul li.current-page-ancestor > a,
.sidebar-nav ul li.current-menu-ancestor > a {
    color: var(--color-white);
}

/* 情報セキュリティ基本方針メニュー: ラベルが長く 1 行に入らないため、
 * 日本語の単語境界(`word-break: keep-all`)で自然に 2 行へ折り返す。
 * - page ID 9  : 日本語版「情報セキュリティ基本方針」
 * - page ID 98 : 英語版 "Information Security Basic Policy"
 * 将来メニュー項目に CSS クラス `menu-security` を付けた場合にも効くよう汎用ルールも残す。 */
.sidebar-nav .menu-item-9 a,
.sidebar-nav .menu-item-98 a,
.sidebar-nav .menu-security a {
    font-size: 11px;
    letter-spacing: 0;
    padding: 10px 16px;
    line-height: 1.5;
    text-transform: none;
    white-space: normal;
    word-break: keep-all;       /* 日本語の文節境界で改行を許可 */
    overflow-wrap: anywhere;     /* 長い英単語も折り返せるように */
}
/* アンダーラインの位置もこのメニューでは padding に合わせる */
.sidebar-nav .menu-item-9 a::after,
.sidebar-nav .menu-item-98 a::after,
.sidebar-nav .menu-security a::after {
    left: 16px;
    width: calc(100% - 32px);
}

/* 言語切替（JP / EN） */
.sidebar-lang {
    padding: 20px 28px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sidebar-lang.wp-block-group { margin: 0; }
.sidebar-lang a {
    color: var(--color-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity var(--transition);
}
.sidebar-lang a:hover,
.sidebar-lang a.lang-active { opacity: 1; }
.sidebar-lang .lang-separator {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

/* モバイル ハンバーガーボタン */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 200;
    background: var(--color-primary);
    border: none; border-radius: 4px;
    width: 44px; height: 44px;
    padding: 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.sidebar-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--color-white);
    transition: var(--transition);
    transform-origin: center;
}
.sidebar-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sidebar-toggle.is-open span:nth-child(2) { opacity: 0; }
.sidebar-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* モバイルオーバーレイ */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}
.sidebar-overlay.is-open { display: block; }

/* =============================================================
 * コンテンツエリア
 * ============================================================= */
.site-content-area {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main { flex: 1; }

/* =============================================================
 * フッター
 * ============================================================= */
.site-footer {
    background: var(--color-dark);
    color: var(--color-white);
    margin-left: 0;
}
.site-footer-inner {
    /* フッターはサイト全幅。サイドバー幅ぶん左パディングをずらして本文と縦軸を揃え、
     * ワイド画面ではさらに左右パディングを増やして --content-max-width-wide で内容を中央寄せ。 */
    padding-block: var(--sp-xl);
    padding-left: max(
        calc(var(--sidebar-width) + var(--content-padding-x)),
        calc((100% + var(--sidebar-width) - var(--content-max-width-wide)) / 2)
    );
    padding-right: max(
        var(--content-padding-x),
        calc((100% - var(--sidebar-width) - var(--content-max-width-wide)) / 2)
    );
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-xl);
    align-items: start;
}

/* wp:site-title ブロックのリセット */
.footer-brand .wp-block-site-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-white);
    margin: 0 0 var(--sp-sm);
}
.footer-brand .wp-block-site-title a { color: var(--color-white); text-decoration: none; }

.footer-logo-text {
    font-size: 22px; font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-white);
    margin-bottom: var(--sp-sm);
}
.footer-address {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.65);
    line-height: 1.9;
    margin-bottom: var(--sp-sm);
    font-style: normal;
}
.footer-copyright {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: var(--sp-md);
}

/* フッターナビ（2カラム） */
.footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-xl);
}
.footer-nav.wp-block-group { margin: 0; padding: 0; }
.footer-nav-col ul { list-style: none; }
.footer-nav-col li { margin-bottom: 12px; }
.footer-nav-col a {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color var(--transition);
}
.footer-nav-col a:hover { color: var(--color-white); }

/* =============================================================
 * ページヘッダー（内部ページ共通）
 *
 * 元サイトの「英字メイン + 日本語サブ見出し」の2段構成を踏襲。
 * 英字ラベル(ABOUT US / CAREERS 等)を主役級サイズに、
 * 日本語タイトルはそれを補佐する形で配置する。
 * ============================================================= */
.page-header {
    padding-block: var(--sp-2xl) var(--sp-lg);
    padding-inline: var(--container-padding-inline);
    border-bottom: 1px solid var(--color-border);
}
/* wp:group ブロックのデフォルト余白をリセット */
.page-header.wp-block-group { margin: 0; }

/* 英字ラベル（ABOUT US / SERVICE / COMPANY 等）— 元サイトの32pxに準拠する主役級サイズ */
.page-header-en {
    display: block;
    font-size: var(--font-size-en-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 6px;
}
/* wp:paragraph ブロックとして書かれた場合もスタイルが効くよう */
p.page-header-en { margin: 0 0 6px; }

/* 日本語サブ見出し（英字ラベルの下に置く）。
 * h1 タグなのでセマンティクス上は主見出し。視覚的には英字を主役にするが、
 * h1 として読める最低限のサイズ (20px) を確保する。
 * 元サイトに合わせてピンクアクセント色で表示。 */
.page-header-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-accent-pink);
    letter-spacing: 0.06em;
    line-height: var(--line-height-tight);
}
/* wp:post-title ブロックのデフォルト余白をリセット */
.page-header .wp-block-post-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-accent-pink);
    letter-spacing: 0.06em;
    line-height: var(--line-height-tight);
    margin: 0;
    padding: 0;
}

/* 英字エイブロウなしの単独タイトル用（情報セキュリティ基本方針 等、現行サイトに合わせる）。
 * タイトルが主役なのでダーク色・大きめサイズで表示する。 */
.page-header-title-only .page-header-title,
.page-header-title-only .wp-block-post-title {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

/* =============================================================
 * wp:post-content ブロックのリセット
 * ブロックテーマのデフォルト padding/margin を上書き
 * ============================================================= */
.wp-block-post-content {
    margin: 0;
    padding: 0;
}