/* ==============================
   LinKnote Header Design
   UM-Theme Existing Header Custom
============================== */

/* ヘッダー全体 */
.site-header,
#masthead,
header.site-header {
  background:
    linear-gradient(180deg, rgba(7, 11, 15, 0.96) 0%, rgba(7, 11, 15, 0.86) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ヘッダー内側 */
.site-header .container,
.site-header .site-container,
.site-header .header-inner,
.site-header .site-header-inner,
#masthead .container,
#masthead .site-container,
#masthead .header-inner,
#masthead .site-header-inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* ロゴ・サイト名 */
.site-header .site-branding,
#masthead .site-branding {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header .site-title,
.site-header .site-title a,
#masthead .site-title,
#masthead .site-title a {
  color: #f4f7f8 !important;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* ロゴ画像 */
.site-header .custom-logo,
#masthead .custom-logo {
  max-height: 42px;
  width: auto;
}

/* メインナビ */
.site-header nav,
#masthead nav,
.site-header .main-navigation,
#masthead .main-navigation {
  background: transparent !important;
}

/* メニュー横並び */
.site-header .main-navigation ul,
#masthead .main-navigation ul,
.site-header nav ul,
#masthead nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* メニュー項目 */
.site-header .main-navigation li,
#masthead .main-navigation li,
.site-header nav li,
#masthead nav li {
  margin: 0;
}

/* メニューリンク */
.site-header .main-navigation a,
#masthead .main-navigation a,
.site-header nav a,
#masthead nav a {
  color: #9aa6ad !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  transition: 0.2s ease;
}

/* メニューホバー */
.site-header .main-navigation a:hover,
#masthead .main-navigation a:hover,
.site-header nav a:hover,
#masthead nav a:hover {
  color: #19d6b2 !important;
  background: rgba(25, 214, 178, 0.09);
}

/* 現在ページ */
.site-header .current-menu-item > a,
.site-header .current_page_item > a,
#masthead .current-menu-item > a,
#masthead .current_page_item > a {
  color: #19d6b2 !important;
  background: rgba(25, 214, 178, 0.13);
}

/* ヘッダー内ボタン風リンク */
.site-header a[href*="register"],
.site-header a[href*="signup"],
.site-header a[href*="login"],
#masthead a[href*="register"],
#masthead a[href*="signup"],
#masthead a[href*="login"] {
  border-radius: 999px;
}

/* 登録ボタンっぽいリンク */
.site-header a[href*="register"],
.site-header a[href*="signup"],
#masthead a[href*="register"],
#masthead a[href*="signup"] {
  background: linear-gradient(135deg, #19d6b2, #0fb394) !important;
  color: #03110e !important;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(25, 214, 178, 0.22);
}

.site-header a[href*="register"]:hover,
.site-header a[href*="signup"]:hover,
#masthead a[href*="register"]:hover,
#masthead a[href*="signup"]:hover {
  color: #03110e !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(25, 214, 178, 0.32);
}

/* ログインボタンっぽいリンク */
.site-header a[href*="login"],
#masthead a[href*="login"] {
  color: #19d6b2 !important;
  border: 1px solid rgba(25, 214, 178, 0.45);
  background: rgba(25, 214, 178, 0.04);
}

.site-header a[href*="login"]:hover,
#masthead a[href*="login"]:hover {
  color: #41f0cc !important;
  border-color: rgba(65, 240, 204, 0.75);
}

/* 検索フォームがある場合 */
.site-header .search-form,
#masthead .search-form {
  position: relative;
}

.site-header .search-field,
#masthead .search-field,
.site-header input[type="search"],
#masthead input[type="search"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f7f8 !important;
  border-radius: 999px !important;
  min-height: 40px;
  padding: 0 16px;
  outline: none;
}

.site-header .search-field::placeholder,
#masthead .search-field::placeholder,
.site-header input[type="search"]::placeholder,
#masthead input[type="search"]::placeholder {
  color: #6f7a82;
}

.site-header .search-field:focus,
#masthead .search-field:focus,
.site-header input[type="search"]:focus,
#masthead input[type="search"]:focus {
  border-color: rgba(25, 214, 178, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(25, 214, 178, 0.12);
}

/* ヘッダー内アイコン */
.site-header svg,
#masthead svg,
.site-header i,
#masthead i {
  color: #9aa6ad;
  transition: 0.2s ease;
}

.site-header a:hover svg,
#masthead a:hover svg,
.site-header a:hover i,
#masthead a:hover i {
  color: #19d6b2;
}

/* ドロップダウンメニュー */
.site-header .sub-menu,
#masthead .sub-menu,
.site-header .children,
#masthead .children {
  background: rgba(13, 18, 24, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ドロップダウン内リンク */
.site-header .sub-menu a,
#masthead .sub-menu a,
.site-header .children a,
#masthead .children a {
  color: #9aa6ad !important;
  border-radius: 10px;
  padding: 10px 12px;
}

.site-header .sub-menu a:hover,
#masthead .sub-menu a:hover,
.site-header .children a:hover,
#masthead .children a:hover {
  color: #19d6b2 !important;
  background: rgba(25, 214, 178, 0.09);
}

/* UM系のヘッダーアイコン・ユーザーメニューがある場合 */
.site-header .um,
#masthead .um,
.site-header .um-profile-photo,
#masthead .um-profile-photo {
  color: #f4f7f8;
}

/* アバター */
.site-header img.avatar,
#masthead img.avatar,
.site-header .avatar,
#masthead .avatar {
  border-radius: 999px;
  border: 2px solid rgba(25, 214, 178, 0.45);
}

/* モバイルメニューボタン */
.site-header .menu-toggle,
#masthead .menu-toggle,
.site-header button.menu-toggle,
#masthead button.menu-toggle {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f4f7f8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  padding: 10px 12px;
}

/* モバイルメニューボタン hover */
.site-header .menu-toggle:hover,
#masthead .menu-toggle:hover,
.site-header button.menu-toggle:hover,
#masthead button.menu-toggle:hover {
  color: #19d6b2 !important;
  border-color: rgba(25, 214, 178, 0.45) !important;
}

/* スマホ表示 */
@media (max-width: 768px) {
  .site-header,
  #masthead,
  header.site-header {
    position: sticky;
    top: 0;
  }

  .site-header .container,
  .site-header .site-container,
  .site-header .header-inner,
  .site-header .site-header-inner,
  #masthead .container,
  #masthead .site-container,
  #masthead .header-inner,
  #masthead .site-header-inner {
    width: min(100% - 28px, 1120px);
  }

  .site-header .site-title,
  .site-header .site-title a,
  #masthead .site-title,
  #masthead .site-title a {
    font-size: 19px;
  }

  .site-header .main-navigation ul,
  #masthead .main-navigation ul,
  .site-header nav ul,
  #masthead nav ul {
    gap: 0;
  }

  .site-header .main-navigation a,
  #masthead .main-navigation a,
  .site-header nav a,
  #masthead nav a {
    font-size: 14px;
    padding: 11px 12px;
  }

  .site-header .sub-menu,
  #masthead .sub-menu,
  .site-header .children,
  #masthead .children {
    border-radius: 12px;
  }
}

.site-header-layout-main {
  background:
    linear-gradient(180deg, rgba(7, 11, 15, 0.96) 0%, rgba(7, 11, 15, 0.86) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 999;
}