/* =========================
   STELLANEWS.LIFE - Header Only
   Scope: body.snl-header …
   ========================= */

body.snl-header {
  --header-bg:#0b1020;
  --header-fg:#e6eef4;
  --header-link:#b8c7d4;
  --header-link-hover:#ffffff;
  --brand-fg:#ffffff;
  --brand-fg-dim:#dbe6ef;
  --brand-accent:#1d4ed8;
  --menu-gap:14px;
  --cover-url:url("https://stellanews.life/wp-content/uploads/2024/03/cropped-headercover.webp");
}

/* ============ 上部インフォバー（SNS等） ============ */
body.snl-header .mg-head-detail{
  background: var(--header-bg);
  color: var(--header-fg);
  font-size: 12.5px;
  line-height: 1;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body.snl-header .mg-head-detail .info-left:empty{ display:none; }
body.snl-header .mg-head-detail a{ color: var(--header-link); text-decoration: none; }
body.snl-header .mg-head-detail a:hover{ color: var(--header-link-hover); }

body.snl-header .mg-head-detail .mg-social{
  display:flex; gap:10px; justify-content:flex-end; align-items:center; margin:0;
}
body.snl-header .mg-head-detail .mg-social li{ list-style:none; }
body.snl-header .mg-head-detail .icon-soci{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background: rgba(255,255,255,.08);
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
body.snl-header .mg-head-detail .icon-soci i{ font-size:14px; color:#fff; line-height:1; }
body.snl-header .mg-head-detail .icon-soci:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16); }

/* ============ カバー＋ロゴ帯 ============ */
body.snl-header .mg-nav-widget-area-back{
  position: relative;
  background-image: var(--cover-url) !important;
  background-size: cover; background-position: center;
}
body.snl-header .mg-nav-widget-area-back .overlay{
  background: linear-gradient(180deg, rgba(0,0,10,0.55), rgba(0,0,0,0.55));
}
body.snl-header .mg-nav-widget-area-back .inner{
  background: transparent !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.snl-header .mg-nav-widget-area{
  padding: 14px 0; /* 間延び防止 */
}

/* ロゴ最適化（元 style.css から移設＆磨き） */
body.snl-header .custom-logo{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
body.snl-header .site-branding .custom-logo,
body.snl-header .site-header .custom-logo,
body.snl-header .header-layout .custom-logo{
  max-height:48px !important;
}
@media (min-width: 992px){
  body.snl-header .site-logo .custom-logo{ max-height:60px !important; }
}
@media (max-width:480px){
  body.snl-header .site-branding .custom-logo,
  body.snl-header .site-header .custom-logo,
  body.snl-header .header-layout .custom-logo{
    max-height:40px !important;
  }
}

/* ============ ナビゲーション（広告の下に来る <nav>） ============ */
body.snl-header .navbar-wp{
  background: #0f1526;
  color: var(--brand-fg);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
body.snl-header .navbar-wp .container-fluid{ gap: 8px; }

/* モバイル用ホームボタン */
body.snl-header .navbar-wp .mobilehomebtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  color:#fff; background: rgba(255,255,255,.08);
  text-decoration:none;
}
body.snl-header .navbar-wp .mobilehomebtn:hover{ background: rgba(255,255,255,.16); }

/* ハンバーガー */
body.snl-header .navbar-toggler .burger-line{
  display:block; width:18px; height:2px; margin:4px auto; background:#fff; border-radius:2px;
}

/* グローバルメニュー */
body.snl-header .navbar-wp .nav.navbar-nav > li{ position:relative; }
body.snl-header .navbar-wp .nav.navbar-nav > li > a.nav-link,
body.snl-header .navbar-wp .nav.navbar-nav > li > a.homebtn{
  padding: 10px 0;
  margin: 0 calc(var(--menu-gap) / 2);
  color: var(--brand-fg-dim);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
  opacity: .92;
}
body.snl-header .navbar-wp .nav.navbar-nav > li > a:hover,
body.snl-header .navbar-wp .nav.navbar-nav > li.active > a{
  color: #fff; opacity: 1;
}
body.snl-header .navbar-wp .nav.navbar-nav > li.active > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px;
  background: var(--brand-accent); border-radius:2px; opacity:.95;
}

/* 検索（右側＆ドロップダウン） */
body.snl-header .mg-search-box .msearch{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  color:#fff; background: rgba(255,255,255,.08);
}
body.snl-header .mg-search-box .msearch:hover{ background: rgba(255,255,255,.16); }
body.snl-header .searchinner{
  min-width: 280px; padding: 12px; border-radius: 12px; border: none;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  background: #0f1526; color: #fff;
}
body.snl-header .searchinner .form-control{
  background:#0b1020; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius: 12px; height: 40px;
}
body.snl-header .searchinner .btn{
  background: var(--brand-accent); color:#fff; border:0; border-radius: 10px; padding: 8px 12px;
}
body.snl-header .searchinner .btn:hover{ filter: brightness(1.08); }

@media (min-width: 992px){
  body.snl-header .navbar-wp .nav.navbar-nav{ display:flex; align-items:center; }
  body.snl-header .navbar-wp .nav.navbar-nav > li > a{ margin: 0 var(--menu-gap); }
}

/* モバイル時の縦長・上端余白対策（元 style.css から移設） */
@media (max-width: 767.98px){
  body.snl-header{ display: flow-root !important; min-height:100% !important; }
  body.snl-header > :first-child,
  body.snl-header .site > :first-child,
  body.snl-header .site-main > :first-child,
  body.snl-header .site-content > :first-child,
  body.snl-header main > :first-child{ margin-top:0 !important; }
  body.snl-header .site,
  body.snl-header .site-wrapper,
  body.snl-header .wrap,
  body.snl-header .container,
  body.snl-header .container-fluid{
    padding-top:0 !important; margin-top:0 !important;
  }
  body.snl-header .site-header-placeholder,
  body.snl-header .sticky-header-spacer,
  body.snl-header .header-placeholder,
  body.snl-header .header-space{ height:0 !important; margin:0 !important; padding:0 !important; }

  /* ロゴ中央寄せ（元 style.css を統合） */
  body.snl-header .site-logo{ width:100% !important; text-align:center !important; padding:8px 0 !important; }
  body.snl-header .site-logo, body.snl-header .site-logo *{ float:none !important; }
  body.snl-header .site-logo .navbar-brand{ display:inline-block !important; margin:0 auto !important; }
  body.snl-header .site-logo img.custom-logo{
    display:block !important; margin:0 auto !important; height:auto !important;
    max-width:56vw; width:clamp(120px, 56vw, 180px);
  }
  body.snl-header .site-header, body.snl-header .header-main, body.snl-header .navbar{ align-items:center !important; }
  body.snl-header .header-main .site-logo{ justify-content:center !important; }
}

/* 微調整 */
body.snl-header .navbar-wp .desk-header{ gap:8px; }
body.snl-header .navbar-wp .dropdown-menu{ border:0; }
body.snl-header .navbar-wp .navbar-brand,
body.snl-header .navbar-wp .navbar-brand img{ display:block; }


/* =========================
   Header Hero base（背景＋黒で締める）
   ========================= */
.snl-hero{
  position: relative;
  isolation: isolate;
  background-color: #0a0a12;
  /* PHP から渡す背景URL（未設定時はフォールバックを header.php が供給）*/
  background-image: var(--snl-hero-img);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: clamp(140px, 18vw, 280px);
  color: #fff;
}

/* =========================
   艶（グロス）ハイライト
   斜めに薄い光を入れて高級感を演出
   ========================= */
.snl-hero::after{
  content:"";
  position:absolute;
  inset:-10% -10% -20% -10%;
  pointer-events:none;
  /* 右上→左下に細いハイライトを通す */
  background:
    linear-gradient(60deg,
      rgba(255,255,255, .00) 35%,
      rgba(255,255,255, .12) 45%,
      rgba(255,255,255, .00) 58%)
    ;
  mix-blend-mode: screen;            /* 背景を明るく */
  opacity: .55;
  transform: translateZ(0);
}

/* =========================
   ビネット＋下部の読みやすさグラデ
   ========================= */
.snl-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* 周辺を落として中央に視線を集め、下に文字用の濃いめグラデ */
  background:
    radial-gradient(100% 120% at 50% 10%,
      rgba(0,0,0, .00) 0%,
      rgba(0,0,0, .25) 65%,
      rgba(0,0,0, .45) 100%),
    linear-gradient(180deg,
      rgba(0,0,0, .00) 0%,
      rgba(0,0,0, .25) 55%,
      rgba(0,0,0, .55) 100%);
  z-index: 0;
}

/* =========================
   透明オーバーレイ（締まり＋質感）
   ========================= */
.snl-hero .overlay{
  position: relative;
  z-index: 1;
  background: rgba(0,0,10,.38);
  /* サポート環境で軽く質感アップ（非対応でも劣化なし） */
  -webkit-backdrop-filter: saturate(120%) contrast(105%);
  backdrop-filter: saturate(120%) contrast(105%);
}

.snl-hero .inner{
  background: transparent;
  color: #fff;
}

/* ロゴの視認性向上 */
.snl-hero .site-logo img{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  height: auto;
  max-height: 150px; /* テーマのロゴ設定に合わせて必要なら調整 */
}

/* 大きな画面では視差風（控えめ） */
@media (min-width:1200px){
  .snl-hero{
    background-attachment: fixed;
    background-position: center top;
  }
}

/* 低速環境/配慮 */
@media (prefers-reduced-motion: reduce){
  .snl-hero{ background-attachment: scroll; }
}

/* レイアウト微調整（狭い画面での高さ確保） */
@media (max-width: 575.98px){
  .snl-hero{ min-height: 180px; }
}

/* 既存テーマとの競合緩和：明示的に上書き */
.mg-nav-widget-area-back.snl-hero{
  background-image: var(--snl-hero-img) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* =========================================
   ① アイコン帯（ソーシャルのある細い帯）を少し透過
   ========================================= */
.snl-header .mg-head-detail{
  background: rgba(8,10,18,.28);          /* ← 透け感を強めに（.28 目安） */
  color: #e9eef7;
  border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}
.snl-header .mg-head-detail a{ color:#e9eef7; }
.snl-header .mg-head-detail .icon-soci{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background: rgba(255,255,255,.06);
  transition: background .2s ease, transform .2s ease;
}
.snl-header .mg-head-detail .icon-soci:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* =========================================
   ② ヘッダー背景：ワイド幅で“全体像”を見せる
   - 通常は cover（トリミング少しあり）
   - 1440px 以上では contain に切替えて引き気味に
   ========================================= */
/* デフォルト（既存）：cover */
.snl-hero{
  background-size: var(--snl-hero-size, cover); /* ← カスタムプロパティで切替 */
  background-position: center top;
  background-repeat: no-repeat;
}

/* ワイド画面で “全体像寄り” に */
@media (min-width: 1440px){
  .snl-hero{
    --snl-hero-size: contain;      /* ← 1600px素材を等倍～縮小で見せる */
    /* サイドに余白が出る場合は下のグラデで自然に馴染ませる */
    background-color: #0a0a12;     /* 余白はダークで引き締め */
  }
}

/* さらに超ワイド（4Kなど）では軽く上下の余白を増やしてバランス調整 */
@media (min-width: 1920px){
  .snl-hero{
    min-height: clamp(180px, 16vw, 320px);
  }
}

/* オーバーレイの“締まり”は少し弱めて透け感アップ（ご感想反映） */
.snl-hero .overlay{
  background: rgba(0,0,10,.28);          /* 旧 .38 → .28 に */
  -webkit-backdrop-filter: saturate(120%) contrast(105%);
  backdrop-filter: saturate(120%) contrast(105%);
}

/* グロス（艶）ハイライトはそのまま。強めたい場合は opacity を上げる */
.snl-hero::after{ opacity:.55; } /* 例：.45〜.65 で調整推奨 */

/* 帯（.inner）を半透明化：中身は不透明のまま維持 */
.snl-header .snl-hero .inner{
  position: relative;
  isolation: isolate;            /* 重なりの独立性を確保 */
  padding-top: clamp(12px, 2.2vw, 20px);
  padding-bottom: clamp(12px, 2.2vw, 20px);
}

/* 半透明のバンド本体（内容物とは別レイヤー） */
.snl-header .snl-hero .inner::before{
  content: "";
  position: absolute;
  inset: 0;                      /* .inner 全体をカバー */
  z-index: -1;                   /* コンテンツの背面に配置 */
  pointer-events: none;

  /* 透け感と質感（数値で調整） */
  background: rgba(8,10,18,.28); /* 透け度：0.20〜0.40で好みに */
  -webkit-backdrop-filter: saturate(115%) blur(2px);
  backdrop-filter: saturate(115%) blur(2px);

  /* 端の締まりと艶を少しだけ */
  box-shadow:
    inset 0 -24px 36px rgba(0,0,0,.28),   /* 下端の締め */
    inset 0  24px 36px rgba(0,0,0,.18);   /* 上端のビネット */
  border-radius: 0; /* 角丸にしたければ 8px など */
}

/* ホバーでほんのり艶を強めたい場合（任意） */
.snl-header .snl-hero .inner:hover::before{
  background: rgba(8,10,18,.32);
}

/* モバイルは読みやすさ優先で少し濃いめ */
@media (max-width: 575.98px){
  .snl-header .snl-hero .inner::before{
    background: rgba(8,10,18,.36);
    -webkit-backdrop-filter: saturate(120%) blur(3px);
    backdrop-filter: saturate(120%) blur(3px);
  }
}
/* 帯（.inner）を半透明化：中身は不透明のまま維持 */
.snl-header .snl-hero .inner{
  position: relative;
  isolation: isolate;            /* 重なりの独立性を確保 */
  padding-top: clamp(12px, 2.2vw, 20px);
  padding-bottom: clamp(12px, 2.2vw, 20px);
}

/* 半透明のバンド本体（内容物とは別レイヤー） */
.snl-header .snl-hero .inner::before{
  content: "";
  position: absolute;
  inset: 0;                      /* .inner 全体をカバー */
  z-index: -1;                   /* コンテンツの背面に配置 */
  pointer-events: none;

  /* 透け感と質感（数値で調整） */
  background: rgba(8,10,18,.28); /* 透け度：0.20〜0.40で好みに */
  -webkit-backdrop-filter: saturate(115%) blur(2px);
  backdrop-filter: saturate(115%) blur(2px);

  /* 端の締まりと艶を少しだけ */
  box-shadow:
    inset 0 -24px 36px rgba(0,0,0,.28),   /* 下端の締め */
    inset 0  24px 36px rgba(0,0,0,.18);   /* 上端のビネット */
  border-radius: 0; /* 角丸にしたければ 8px など */
}

/* ホバーでほんのり艶を強めたい場合（任意） */
.snl-header .snl-hero .inner:hover::before{
  background: rgba(8,10,18,.32);
}

/* モバイルは読みやすさ優先で少し濃いめ */
@media (max-width: 575.98px){
  .snl-header .snl-hero .inner::before{
    background: rgba(8,10,18,.36);
    -webkit-backdrop-filter: saturate(120%) blur(3px);
    backdrop-filter: saturate(120%) blur(3px);
  }
}