/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* =====================================
   ベース調整
===================================== */

/* 投稿者情報の非表示 */
.meta-author { display: none; }

/* ハンバーガーメニュー関連の非表示 */
.menu-bar-wrap { display: none !important; }
#full-screen-menu { display: none !important; }
#mobile-dropdown { display: none !important; }

/* 本文既定色（見出し含む） */
body,
body p,
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: #333333;
}

/* Gutenberg カラム基礎余白 */
.wp-block-columns {
  padding: 24px 16px 24px;
  margin: 16px 16px 8px;
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
  .wp-block-columns { padding: 20px 10px; margin: 5px 0; }
  #content-wrap.container {
    padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto;
    max-width: 100%; width: 100%; box-sizing: border-box;
  }
}

/* ボタンの軽いアニメ */
.wp-block-button { transition: transform .1s ease, box-shadow .1s ease;}
.wp-block-button:hover { transform: scale(1.03); box-shadow: 0 8px 16px rgba(0,0,0,.2); }

/* 画像の明滅（任意） */
img.wp-image-201 { animation: glowingImage 4s infinite; }
@keyframes glowingImage {
  0% { filter: brightness(100%); }
  50% { filter: brightness(150%); }
  100% { filter: brightness(100%); }
}

/* ロゴリンク無効化（任意） */
#site-logo a { pointer-events: none; }

/* ▼【重要】アウトライン/ボーダーの全消しはやめ、対象限定にする（見出し崩れ防止） */
img, a img { border: none !important; }
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid #005BAB !important; /* アクセシビリティを確保 */
  outline-offset: 2px;
  border: none !important;
}

/* カラム高そろえ */
.wp-block-columns { display: flex; align-items: stretch; }
.wp-block-column { display: flex; flex-direction: column; }
.news-column, .please-column { display: flex; flex-direction: column; flex: 1; }
.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-column { flex: 1 1 0; }

/* 投稿日カラー */
.wp-block-latest-posts__post-date { color: #005BAB !important; }

/* 最新の投稿ブロックの枠 */
.wp-block-latest-posts {
  height: 150px; overflow-y: auto; border: 1px solid #ccc; padding: 10px;
}

/* 区切り線 */
hr, .wp-block-separator {
  border: none; border-top: 1px #abb8c3 !important; margin: 2em 0;
}

/* 2カラム枠 */
.please-column, .news-column {
}

/* =====================================
   ページタイトル非表示 + パンくず調整
===================================== */

/* タイトル文字は消す（パンくずは残す） */
.page-header .page-header-title { display: none !important; }

/* パンくずを左寄せ */
.page-header .site-breadcrumbs,
.page-header .oceanwp-breadcrumb,
.page-header .breadcrumbs {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* パンくず下の余白をしっかり詰める */
.page-header,
.page-header .page-header-inner,
.page-header .site-breadcrumbs {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* パンくず直後の要素との隙間も削減 */
.page-header + .content-area,
.page-header + .site-content,
.page-header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 見出し側の上余白も削減（必要に応じて） */
.entry-title,
.entry-header,
.page-header + h1,
.page-header + h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =====================================
   HOME（https://jser.conventions.jp/）だけ非表示
   ※ :has() を利用（主要ブラウザ対応）
===================================== */

/* 親要素ごと非表示（ul>li / nav>span などケース網羅） */
.page-header .site-breadcrumbs li:has(> a[href="https://jser.conventions.jp/"]),
.page-header .site-breadcrumbs li:has(> a[href="https://jser.conventions.jp"]),
.page-header .breadcrumbs li:has(> a[href="https://jser.conventions.jp/"]),
.page-header .trail-items li:has(> a[href="https://jser.conventions.jp/"]),
.page-header .oceanwp-breadcrumb span:has(> a[href="https://jser.conventions.jp/"]) {
  display: none !important;
}

/* a単体で出る場合も非表示（保険） */
.page-header .site-breadcrumbs a[href="https://jser.conventions.jp/"],
.page-header .oceanwp-breadcrumb a[href="https://jser.conventions.jp/"] {
  display: none !important;
}

/* 先頭の区切り（>/など）も非表示に */
.page-header .site-breadcrumbs li:first-child::before,
.page-header .breadcrumbs li:first-child::before,
.page-header .trail-items li:first-child::before {
  content: "" !important; display: none !important; margin: 0 !important;
}

/* =====================================
   任意の微調整（必要なら有効化）
===================================== */
/*
.oceanwp-breadcrumb a { color:#005BAB; text-decoration:none; font-weight:500; }
.oceanwp-breadcrumb a:hover { color:#003f7d; text-decoration:underline; }
.oceanwp-breadcrumb .trail-end { color:#333; font-weight:700; }
*/

/* ==============================
   H1 見出し → アンダーライン付き
============================== */
h1, .entry-content h1, .wp-block-heading h1 {
  color: #005BAB;
  font-size: 2em;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 3px solid #005BAB;
  margin: 1em 0 0.6em; /* ← 上下の余白を抑えめに */
}

/* ==============================
   H2 見出し → 左バー＋テキスト
============================== */
h2, .entry-content h2, .wp-block-heading h2 {
  color: #005BAB!important;
  font-size: 1.6em;
  font-weight: 700;
  border-left: 6px solid #005BAB !important;
  padding-left: 10px;
  margin: 0.0em 0 0.5em; /* ← コンパクトに */
  line-height: 1.4;
}

/* ==============================
   H3 見出し → 左に細バー
============================== */
h3, .entry-content h3, .wp-block-heading h3 {
  color: #005BAB;
  font-size: 1.3em;
  font-weight: 600;
  border-left: 4px solid #005BAB;
  padding-left: 8px;
  margin: 0.7em 0 0.4em;
  line-height: 1.4;
}

/* ==============================
   H4 見出し → 下に細いボーダー
============================== */
h4, .entry-content h4, .wp-block-heading h4 {
  color: #005BAB;
  font-size: 1.1em;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 1px solid #005BAB;
  margin: 0.6em 0 0.4em;
}

/* ==============================
   H5 見出し → 背景つきラベル風
============================== */
h5, .entry-content h5, .wp-block-heading h5 {
  color: #fff;
  background: #005BAB;
  font-size: 1em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin: 0.5em 0 0.3em;
}

/* ==============================
   H6 見出し → 小さめ＆太字カラー文字
============================== */
h6, .entry-content h6, .wp-block-heading h6 {
  color: #005BAB;
  font-size: 0.95em;
  font-weight: 700;
  margin: 0.4em 0 0.2em;
}

/* リンクやフォーム要素にも影響を与える */
a:focus, button:focus, input:focus, textarea:focus {
    outline: none !important;
    border: none !important;
}

/* —— ヘッダーを常時固定 —— */
#site-header.clr {
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 9999 !important;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* WP管理バー（ログイン時）のオフセット */
body.admin-bar #site-header.clr {
  top: 32px !important;
}
@media (max-width: 782px){
  body.admin-bar #site-header.clr {
    top: 46px !important;
  }
}

/* コンテンツがヘッダーの下に潜り込まないよう押し下げ */
body { padding-top: 74px; } /* data-height="74" に合わせた数値 */

/* アンカーやscrollIntoViewでジャンプした時に隠れないよう調整 */
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 82px; /* 74px + 余白8px */
}


/* =====================================
   画像・リンク枠線を消す（デザイン用）
===================================== */
img, a img { 
  border: none; 
}

/* =====================================
   フォーカス時のアウトラインをブランドカラーに変更
   ※ アクセシビリティ確保のため outline は残す
===================================== */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid #005BAB;   /* ブランドカラー（青系） */
  outline-offset: 2px;          /* 要素から少し離して見やすく */
}


.running-underline mark {
  background-color: transparent !important;
  background-image: linear-gradient(#fff59d, #fff59d) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 0.4em !important;
  background-position: 0 calc(100% - 0.05em) !important;
  color: #e60000;
  padding: 0 0.1em;
}

.wp-block-button__link {
  font-size: 14px !important;
  font-weight: 400 !important;
}

h1, .entry-content h1, .wp-block-heading h1 {
  font-size: 2em;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 3px solid #005BAB;
  margin: 1em 0 0.6em;
  
  /* グラデーション */
  background: linear-gradient(90deg, #e60000, #005BAB, #a0d8ef, #005BAB, #e60000);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* アニメーション */
  animation: gradientFlow 8s ease infinite;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}