/*
Theme Name: Mirainet NP-Found (Hirosaki / Hachinohe)
Theme URI: https://np-found.aomori-mirainet.com/
Template: mirainet-base
Author: 一般社団法人 男女共同参画地域みらいねっと
Description: 災害関連死を起こさない地域づくり事業（弘前市・八戸市／キッチンカー基金助成）用 子テーマ。親テーマ Mirainet とセットで有効化（akaihane と同じ方式）。
Version: 1.3.1
Text Domain: np-found
*/

:root {
  /*
   * 日本フィランソロピック財団ブランド準拠
   * ネイビー（信頼）＋ミディアムブルー（活力）＋ゴールド（アクセント）
   * ※ピンクCTAは使わず、ブランドの金茶へ寄せる
   */
  --color-primary: #0C2340;         /* ロゴ文字に近いディープネイビー */
  --color-primary-bright: #2B5BB5;  /* リボンのミディアムブルー */
  --color-primary-dark: #071833;    /* ホバー用の濃紺 */
  --color-bright-dark: #1E4A96;     /* ブルーホバー */
  --color-surface-2: #F2F4F7;       /* 帯セクション：冷たい薄いグレー */
  --color-surface-3: #E8EEF8;       /* 淡いスカイブルー面 */
  --color-area: #0C2340;            /* ナビは濃紺でロゴと揃える */

  /* CTA：ブランドのミュートゴールド */
  --color-cta: #C4A35A;
  --color-cta-hover: #A8873F;
  --color-cta-ink: #FFFFFF;
  --color-cta-soft: #F7F1E4;
}

/* トップバー下線もネイビー寄りに */
.topbar { border-bottom-color: var(--color-primary-bright); }

/* プロモビデオ枠：ネイビー→ブルーのグラデ（ブランドリボンを想起） */
.video-cover {
  position: relative;
  margin: 0 auto 14px;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(196, 163, 90, 0.35), transparent 55%),
    linear-gradient(155deg, #071833 0%, #0C2340 35%, #2B5BB5 78%, #5B8FD4 100%);
  color: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px 14px;
}
.video-cover__play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.video-cover__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}
.video-cover__title {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.45;
  word-break: keep-all;
}
.video-cta:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* 財団ロゴは横長 */
.grant-logo img {
  max-width: min(280px, 56vw);
  max-height: 48px;
}
@media (min-width: 900px) {
  .grant-logo img {
    max-height: 56px;
    max-width: 300px;
  }
}

/* ナビ：濃紺地に白文字のコントラストを確保 */
.navbar .gnav a:hover,
.navbar .gnav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
}