/*
  Ahmed Bahy — Nilkreuzfahrt Tipps
  Lightning G3 Pro Unit カスタムCSS
  ─────────────────────────────────
  外観 > カスタマイズ > 追加CSS に貼り付けてください。
  使用フォント: Google Fonts より Spectral / Work Sans / IBM Plex Mono
  → 外観 > カスタマイズ > 追加CSS の上部 or functions.php で
    下記 @import を先に読み込んでください:
    @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
*/

/* =============================================
   1. カラートークン
   ============================================= */
:root {
  --nile:       #16243D;
  --nile-deep:  #0F1B2E;
  --nile-soft:  #243A5E;
  --gold:       #C89B3C;
  --gold-bright:#E0B85C;
  --teal:       #2E6F6B;
  --sand:       #EDE3CF;
  --sand-dim:   #C9BFA9;
  --line:       rgba(237,227,207,0.16);

  --display: 'Spectral', serif;
  --body:    'Work Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}

/* =============================================
   2. ベースフォント・背景
   ============================================= */
body,
.site {
  background: var(--nile-deep) !important;
  color: var(--sand) !important;
  font-family: var(--body) !important;
  font-weight: 400;
	font-size: 1.1rem !important;
  line-height: 1.8;
}


/* =============================================
   3. ヘッダー
   ============================================= */
#site-header,
.l-header,
.lightning-header {
  background: rgba(237, 227, 207, 0.96) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(44, 32, 20, 0.12) !important;
}

/* サイトタイトル */
.site-title a,
.site-title,
#site-header .site-title a {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  color: var(--sand) !important;
  letter-spacing: 0.02em;
}

/* キャッチフレーズ */
.site-description,
#site-header .site-description {
  font-family: var(--mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold-bright) !important;
}

/* =============================================
   4. グローバルナビゲーション
   ============================================= */
#g-nav,
.l-gnav,
.global-nav {
  background: transparent !important;
}

#g-nav li a,
.l-gnav li a,
.global-nav li a {
  font-family: var(--body) !important;
  font-size: 0.92rem !important;
  color: var(--nile) !important;
  transition: color 0.2s ease;
}

#g-nav li a:hover,
.l-gnav li a:hover,
.global-nav li a:hover,
#g-nav li.current-menu-item > a,
.l-gnav li.current-menu-item > a {
  color: var(--gold) !important;
  background: transparent !important;
}

/* ドロップダウン */
#g-nav ul ul,
.l-gnav ul ul {
  background: var(--nile-deep) !important;
  border: 1px solid var(--line) !important;
}

.global-nav-name,
strong.global-nav-name {
	font-family: var(--display) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.acc-btn {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}
#vk-mobile-nav-menu-btn {
  background-color: var(--gold) !important;
  color: var(--nile) !important;
  border: none !important;
  border-radius: 4px !important;
}

/* =============================================
   5. ボタン (Lightning のプライマリボタン)
   ============================================= */
.btn-primary,
.vk_button .btn-primary,
.wp-block-button .wp-block-button__link,
.vk_button__btn {
  background: var(--gold) !important;
  color: var(--nile-deep) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: var(--body) !important;
  font-weight: 500 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.btn-primary:hover,
.vk_button .btn-primary:hover,
.wp-block-button .wp-block-button__link:hover,
.vk_button__btn:hover {
  background: var(--gold-bright) !important;
  transform: translateY(-2px) !important;
  color: var(--nile-deep) !important;
}

/* ゴーストボタン */
.btn-outline-primary,
.vk_button .btn-outline-primary {
  border: 1px solid var(--line) !important;
  color: var(--sand) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.vk_button .btn-outline-primary:hover {
  border-color: var(--gold) !important;
  color: var(--gold-bright) !important;
  background: transparent !important;
}

/* =============================================
   6. 見出し (h1〜h3)
   ============================================= */
h1, h2, h3,
.entry-title,
.page-title,
.vk_page_title,
.page-header-title{
  font-family: var(--display) !important;
  font-weight: 600 !important;
  color: var(--sand) !important;
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-family: var(--body) !important;
  color: var(--sand) !important;
}

/* =============================================
   7. 本文・リンク
   ============================================= */
p, li, td, th {
  color: var(--sand-dim);
}

a {
  color: var(--gold) !important;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gold-bright) !important;
  text-decoration: none;
}

/* =============================================
   8. カード / ExUnit カードブロック
   ============================================= */
.vk_post,
.vk_post-col,
.card,
.panel {
  background: var(--nile) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--sand) !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.vk_post:hover,
.card:hover {
  border-color: var(--gold) !important;
  transform: translateY(-3px);
}

.card-title,
.vk_post_title {
  font-family: var(--display) !important;
  color: var(--sand) !important;
}

.card-text,
.vk_post_excerpt {
  color: var(--sand-dim) !important;
}

/* カテゴリバッジ */
.badge,
.vk_post_cat_label {
  background: var(--nile) !important;
  border: 1px solid var(--line) !important;
  color: var(--gold-bright) !important;
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  border-radius: 999px !important;
}

/* =============================================
   9. セクション区切り / 背景色
   ============================================= */
/* Lightning の「背景色つきセクション」系 */
.l-section--bg,
.vk_section_wrapper--bg,
section.bg-light,
.bg-light {
  background: var(--nile-deep) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.bg-dark {
  background: var(--nile-deep) !important;
}

/* =============================================
   10. フォーム (お問い合わせ)
   ============================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: var(--nile-deep) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  color: var(--sand) !important;
  font-family: var(--body) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--gold) !important;
  box-shadow: none !important;
  outline: none !important;
}

::placeholder {
  color: var(--sand-dim) !important;
  opacity: 0.6;
}

label {
  font-family: var(--mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gold-bright) !important;
}

/* =============================================
   11. フッター
   ============================================= */
#footer,
.l-footer,
.site-footer {
  background: var(--nile-deep) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--sand-dim) !important;
}

#footer a,
.l-footer a,
.site-footer a {
  color: var(--sand-dim) !important;
}

#footer a:hover,
.l-footer a:hover,
.site-footer a:hover {
  color: var(--gold-bright) !important;
}

.footer-widget-title,
.widget-title {
  font-family: var(--mono) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gold-bright) !important;
}

#copyright,
.l-footer__copyright {
  font-family: var(--mono) !important;
  font-size: 0.74rem !important;
  color: var(--sand-dim) !important;
  border-top: 1px solid var(--line) !important;
}

/* =============================================
   12. ウィジェット
   ============================================= */
.widget,
.widget_block {
  color: var(--sand-dim) !important;
}

.widget ul li a {
  color: var(--sand-dim) !important;
}

.widget ul li a:hover {
  color: var(--gold-bright) !important;
}

/* =============================================
   13. パンくず
   ============================================= */
.vk_breadcrumb,
#breadcrumb,
.breadcrumb {
  background: transparent !important;
  font-family: var(--mono) !important;
  font-size: 0.74rem !important;
  color: var(--sand-dim) !important;
}

.breadcrumb-item a {
  color: var(--gold) !important;
}

/* =============================================
   14. テーブル (料金表など)
   ============================================= */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.85rem;
}

th {
  background: var(--nile-deep) !important;
  color: var(--gold-bright) !important;
  border: 1px solid var(--line) !important;
  padding: 12px 14px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.04em;
}

td {
  border: 1px solid var(--line) !important;
  padding: 12px 14px;
  text-align: center;
  color: var(--sand-dim) !important;
}

/* =============================================
   16. 見出し H3 強調
   ============================================= */
h3:where(:not(.wp-block-post-title)) {
  border-bottom: none !important;
  background: linear-gradient(to right, #E5DBC9 25%, #C89B3C 25%) 0 100% / 100% 1px no-repeat !important;
  color: var(--gold-bright) !important;
}

.l-headerNav,
#vk-mobile-nav {
  background: var(--nile-deep) !important;
  border-bottom: 1px solid var(--line) !important;
}

.l-headerNav__item a,
#vk-mobile-nav li a {
  color: var(--sand) !important;
  border-bottom: 1px solid var(--line) !important;
}

.l-headerNav__item a:hover,
#vk-mobile-nav li a:hover {
  color: var(--gold-bright) !important;
  background: var(--nile) !important;
}

/* ハンバーガーアイコン */
.vk_mobile_nav_toggle,
.navbar-toggler {
  color: var(--sand) !important;
  border-color: var(--line) !important;
}


/* ドロップダウンメニュー文字色 */
.global-nav-list li ul.sub-menu {
  background-color: var(--nile-deep) !important;
}

.global-nav-list li ul.sub-menu li a {
  color: var(--sand) !important;
}

.global-nav-list li ul.sub-menu li a:hover {
  color: var(--gold) !important;
  background-color: var(--nile-soft) !important;
}

/* トップページお知らせ部分 */
.category-neuigkeit.postlistText,
.vk_posts .category-neuigkeit {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.category-neuigkeit.postlistText {
  background-color: transparent !important;
}

/*.category-neuigkeit.postlistText,
.vk_posts .category-reisetipps {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.category-reisetipps.postlistText {
  background-color: transparent !important;
}*/

/* =============================================
   17. pegetop
   ============================================= */
#page_top {
  background-color: var(--gold) !important;
  color: var(--nile) !important;
  border-radius: 4px !important;
  border: none !important;
  box-shadow: none !important;
}