/* ============================================================
   EV図鑑 子テーマ：フレームCSS
   ヘッダー／レイアウト／サイドバー／フッターなど「枠組み」専用。
   本文コンポーネントは site.css（旧カスタマイザーCSS移植）が担当する。
   ============================================================ */

/* ---------- 基盤 ---------- */
html{scroll-padding-top:80px;}
body{background:#fff;}
img{max-width:100%;}

/* ---------- ヘッダー（固定・PC64px／モバイル56px、ロゴ左） ---------- */
.ev-header{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:1002;
  background:#fff;border-bottom:1px solid var(--ev-line,#e2e9f2);
}
body.admin-bar .ev-header{top:32px;}
@media (max-width:782px){ body.admin-bar .ev-header{top:46px;} }
.ev-header-in{
  height:100%;display:flex;align-items:center;
  padding:0 24px;max-width:none;
}
.ev-header .logo{line-height:1;}
.ev-header .site-logo-image{height:40px;width:auto;display:block;}
/* 固定ヘッダー分の逃げ（トップ525は自前ヘッダーのため対象外） */
body:not(.page-id-525){padding-top:64px;}
body.admin-bar:not(.page-id-525){padding-top:96px;}
@media (max-width:1023px){
  .ev-header{height:56px;}
  body:not(.page-id-525){padding-top:56px;}
  body.admin-bar:not(.page-id-525){padding-top:88px;}
  /* メニューボタン（ev-header-buttons・ロゴ左に固定表示）とロゴが重ならないよう左余白を確保 */
  .ev-header-in{padding-left:52px;}
  .ev-header .site-logo-image{height:34px;}
}
@media (max-width:782px){
  body.admin-bar:not(.page-id-525){padding-top:102px;}
}

/* ---------- レイアウト（左サイドバー＋メイン） ---------- */
.ev-layout{display:block;padding:0 18px;}
.ev-main{min-width:0;}
.ev-frame-side{display:none;}
@media (min-width:1024px){
  .ev-layout{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;gap:24px;padding:0 24px;}
  .ev-main{flex:1 1 0%;width:auto;max-width:none;min-width:0;}
  .ev-frame-side{
    display:block;flex:0 0 240px;width:240px;
    position:sticky;top:76px;z-index:50;
  }
  body.admin-bar .ev-frame-side{top:108px;}
}

/* ---------- パンくず（現行運用どおり非表示。HTMLには残す） ---------- */
.ev-breadcrumb{display:none;}

/* ---------- 記事見出し部 ---------- */
.date-tags{margin-top:10px;font-size:13px;color:var(--ev-muted,#71808a);}
.date-tags .post-update time{font-weight:700;color:var(--ev-ink,#1c2530);}

/* ---------- 前後記事ナビ ---------- */
.ev-post-nav{display:flex;gap:14px;margin:28px 0 8px;flex-wrap:wrap;}
.ev-post-nav a{
  flex:1 1 240px;display:block;border:1px solid var(--ev-line,#e2e9f2);
  background:var(--ev-section,#f3f7ff);padding:12px 14px;text-decoration:none;
}
.ev-post-nav-label{display:block;font-size:12px;color:var(--ev-muted,#71808a);font-weight:700;margin-bottom:4px;}
.ev-post-nav-title{font-size:14px;font-weight:700;color:var(--ev-ink,#1c2530);line-height:1.55;}
.ev-post-nav-next{text-align:right;}

/* ---------- コメント ---------- */
.ev-comments{margin-top:36px;}
.ev-comments .wp-block-comment-template li{margin-bottom:18px;}
.ev-comments .comment-form input[type="text"],
.ev-comments .comment-form input[type="email"],
.ev-comments .comment-form input[type="url"],
.ev-comments .comment-form textarea{font-size:16px;max-width:100%;}

/* ---------- アーカイブ見出し・検索 ---------- */
.ev-archive-title{font-size:26px;margin:18px 0 14px;}
.ev-search-form{margin:0 0 18px;}
.ev-search-form form{display:flex;gap:8px;max-width:560px;}
.ev-search-form input[type="search"]{flex:1;height:44px;border:1px solid #b9cbdd;padding:0 12px;font-size:16px;min-width:0;background:#fff;-webkit-appearance:none;appearance:none;}
.ev-search-form button,.ev-search-form input[type="submit"]{height:44px;padding:0 16px;background:#14467c;color:#fff;border:0;font-weight:700;font-size:15px;cursor:pointer;flex:none;}
.archive-description{font-size:14px;color:var(--ev-body,#3d474c);margin-bottom:14px;}
.ev-archive-query .wp-block-query-pagination{margin-top:26px;}
.ev-archive-query .wp-block-query-pagination a,
.ev-archive-query .wp-block-query-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  border:1px solid var(--ev-line,#e2e9f2);padding:0 10px;text-decoration:none;color:var(--ev-ink,#1c2530);font-weight:700;
}
.ev-archive-query .wp-block-query-pagination .page-numbers.current{background:#14467c;color:#fff;border-color:#14467c;}
.ev-archive-list{list-style:none;margin:0;padding:0;}
.ev-archive-list>li{margin:0;min-width:0;}

/* ---------- 人気記事（WP Statistics） ---------- */
.ev-popular{margin:28px 0;border:1px solid var(--ev-line,#e2e9f2);background:var(--ev-section,#f3f7ff);padding:16px;}
.ev-popular h3{margin:0 0 10px;font-size:16px;}
.ev-popular-list{list-style:none;margin:0;padding:0;}
.ev-popular-list li{margin:0 0 8px;}
.ev-popular-list a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ev-ink,#1c2530);font-weight:700;font-size:14px;line-height:1.5;}
.ev-popular-list img{width:64px;height:auto;display:block;}

/* ---------- 404 ---------- */
.ev-404-search{margin:18px 0;}
.ev-404-search form{display:flex;gap:8px;max-width:560px;}
.ev-404-search input[type="search"]{flex:1;height:44px;border:1px solid #b9cbdd;padding:0 12px;font-size:16px;min-width:0;}
.ev-404-search button{height:44px;padding:0 16px;background:#14467c;color:#fff;border:0;font-weight:700;font-size:15px;cursor:pointer;}

/* ---------- フッター（濃色・全ページ共通） ---------- */
.ev-footer{background:#0a0a0a;color:#cfd8e3;margin-top:56px;}
.ev-footer-in{padding:26px 24px 20px;max-width:none;}
.ev-footer #navi-footer .menu-footer{
  list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;
}
.ev-footer #navi-footer .menu-footer li{border-left:1px solid rgba(255,255,255,.25);padding:0 10px;}
.ev-footer #navi-footer .menu-footer li:first-child{border-left:none;}
.ev-footer #navi-footer .menu-footer a{color:#e8eef5;text-decoration:none;font-size:13.5px;line-height:2;}
.ev-footer #navi-footer .menu-footer a:hover{text-decoration:underline;}
.ev-footer-base{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ev-footer .footer-site-logo-image{height:30px;width:auto;display:block;}
.ev-footer .copyright{margin:0;font-size:12.5px;color:#cfd8e3;}
@media (max-width:1023px){
  .ev-footer #navi-footer .menu-footer{display:block;text-align:left;}
  .ev-footer #navi-footer .menu-footer li{display:block;border-left:none;border-bottom:1px solid rgba(255,255,255,.16);padding:0;margin:0;}
  .ev-footer #navi-footer .menu-footer a{display:flex;align-items:center;min-height:44px;padding:11px 4px;font-size:14px;}
}

/* ---------- ev-header-buttons の表示調整（旧 ev-frame.css から移植） ----------
   デスクトップ幅では検索ボタン＋検索バーだけを有効化し（メニューボタンとドロワーは出さない）、
   モバイル幅では枠なしアイコンに小型化してメニューボタンをロゴ左へ置く。 */
@media (min-width:1024px){
  body:not(.page-id-525) .evhb-btns{
    display:flex !important;position:fixed;top:10px;right:24px;left:auto;z-index:1003;gap:8px;
  }
  body.admin-bar:not(.page-id-525) .evhb-btns{top:42px;}
  body:not(.page-id-525) .evhb-btn{
    width:44px;height:44px;background:#fff;border:1px solid #d7e3ee;border-radius:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  body:not(.page-id-525) .evhb-btn svg{width:22px;height:22px;stroke:#20303c;fill:none;stroke-width:2.2;stroke-linecap:round;}
  body:not(.page-id-525) #evhbMenuBtn{display:none !important;}
  body:not(.page-id-525) .evhb-search{
    display:block !important;position:fixed;top:0;left:0;right:0;z-index:1004;background:#fff;
    border-bottom:1px solid #d7e3ee;box-shadow:0 6px 14px rgba(20,70,124,.12);
    padding:8px 12px;transform:translateY(-110%);transition:transform .25s ease;
  }
  body.admin-bar:not(.page-id-525) .evhb-search{top:32px;}
  body:not(.page-id-525) .evhb-search.open{transform:translateY(0);}
  body:not(.page-id-525) .evhb-search form{display:flex;gap:8px;margin:0;align-items:center;}
  body:not(.page-id-525) .evhb-search input[type="search"]{
    flex:1;height:44px;border:1px solid #b9cbdd;border-radius:0;padding:0 12px;font-size:16px;min-width:0;
    background:#fff;-webkit-appearance:none;appearance:none;
  }
  body:not(.page-id-525) .evhb-search button[type="submit"]{
    height:44px;padding:0 16px;background:#14467c;color:#fff;border:0;border-radius:0;
    font-weight:700;font-size:15px;cursor:pointer;flex:none;
  }
  body:not(.page-id-525) .evhb-search .evhb-sclose{
    width:44px;height:44px;background:#fff;border:1px solid #d7e3ee;border-radius:0;
    font-size:17px;color:#20303c;cursor:pointer;flex:none;line-height:1;
  }
}
@media (max-width:1023px){
  body:not(.page-id-525) .evhb-btns{top:8px;right:6px;gap:2px;}
  body:not(.page-id-525) .evhb-btn{width:40px !important;height:40px !important;background:transparent !important;border:none !important;box-shadow:none !important;}
  body:not(.page-id-525) .evhb-btn svg{width:23px;height:23px;}
  body:not(.page-id-525) .evhb-menubtn{top:8px;left:6px;}
}
@media (max-width:782px){
  body.admin-bar:not(.page-id-525) .evhb-btns{top:54px;}
  body.admin-bar:not(.page-id-525) .evhb-menubtn{top:54px;}
}

/* ---------- サイドバー本体＋階層カスケード（旧 ev-frame.css から原文移植） ---------- */
.evf-side-nav{
  background:#f3f7ff;
  border:1px solid #e2e9f2;
  padding:18px 16px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
.evf-side-group{margin:0 0 18px;}
.evf-side-group:last-child{margin-bottom:0;}
.evf-side-group h3{
  font-size:13.5px;
  letter-spacing:.06em;
  color:#16324F;
  background:#C4D8F0;
  margin:0 0 6px;
  padding:7px 10px;
  font-weight:900;
}
.evf-side-group a{
  display:block;
  padding:8px 10px;
  font-size:14px;
  font-weight:700;
  color:#3d474c;
  text-decoration:none;
  line-height:1.5;
}
.evf-side-group a:hover{background:#fff;color:#004fd6;}

/* サイドバー階層カスケード（メーカー・車種ページ）2026-11-11 v2
   構造は tools_tmp/build_cascade_menu.py が生成。トップ525の .side-nav 側と同一設計。
   - パネルは完全不透明・トランジション無し（開閉は即時）。透け／残像／二重表示を防ぐため。
   - パネルに overflow を付けると下の層がクリップされるため付けない。
   - 開くパネルは常に1つだけ：排他制御は JS 側（mouseenter で他を即閉じ）。 */
.evf-side-nav .evc{list-style:none;margin:0;padding:0;}
.evf-side-nav .evc-root{position:relative;}
.evf-side-nav .evc-rootbtn{
  display:flex;align-items:center;width:100%;
  padding:8px 10px;font:inherit;font-size:14px;font-weight:700;color:#3d474c;
  background:none;border:0;cursor:pointer;text-align:left;line-height:1.5;
}
.evf-side-nav .evc-rootbtn:hover,.evf-side-nav .evc-root.open .evc-rootbtn{background:#fff;color:#004fd6;}
.evf-side-nav .evc-arrow{margin-left:auto;color:#004fd6;font-weight:800;font-size:15px;}
.evf-side-nav .evc-panel{
  position:absolute;left:100%;top:0;z-index:200;
  background:#fff;border:1px solid #b9cbdd;box-shadow:0 12px 32px rgba(20,70,124,.22);
  padding:6px 0;min-width:204px;
  visibility:hidden;pointer-events:none;
}
.evf-side-nav .evc-panel--models{min-width:220px;}
/* 斜め移動でパネル左端をかすめてもホバーが切れにくいよう、左側に透明な回廊を持たせる */
.evf-side-nav .evc-panel::before{content:"";position:absolute;left:-48px;top:0;bottom:0;width:48px;}
.evf-side-nav .evc-panel--up{top:auto;bottom:0;}
.evf-side-nav .evc-list{list-style:none;margin:0;padding:0;}
.evf-side-nav .evc-node{position:relative;}
.evf-side-nav .evc-makerlink,.evf-side-nav .evc-nodelabel{
  display:flex;align-items:center;padding:7px 12px;font-size:13.5px;white-space:nowrap;cursor:pointer;
}
.evf-side-nav .evc-panel--models a{padding:7px 12px;font-size:13.5px;font-weight:600;white-space:nowrap;}
/* 表示制御は JS の .open クラスに一本化する（:hover で出すと、隣の項目をかすめた瞬間に
   両方のパネルが重なって見えるため）。:focus-within はキーボード操作用 */
.evf-side-nav .evc-root:focus-within>.evc-panel,.evf-side-nav .evc-root.open>.evc-panel,
.evf-side-nav .evc-node:focus-within>.evc-panel,.evf-side-nav .evc-node.open>.evc-panel{
  visibility:visible;pointer-events:auto;
}
.evf-side-nav .evc-badge{
  display:inline-block;margin-left:7px;padding:1px 5px;background:#e9a319;color:#1c2530;
  font-size:10px;font-weight:800;line-height:1.5;vertical-align:1px;
}


/* アーカイブ／検索カードの基礎（Cocoonコア相当） */
.ev-archive-list .entry-card-content{padding:2px 2px 10px;}
.ev-archive-list .entry-card-title{font-size:15px;line-height:1.55;font-weight:700;margin:8px 0 4px;color:var(--ev-navy);}
.ev-archive-list .entry-card-info{font-size:12px;color:#5b6b7f;}
.ev-archive-list .entry-card-wrap:hover .entry-card-title{color:var(--ev-blue);}