/* ブランド資産（生成物）。編集は tenants/{法人}/config.yml で行う。 */
.ha-mark { background-image: url("/assets/brand/kingkanko/logo.png"); }
:root { --ha-accent: #b8101a; --ha-active: #cf121b; --ha-guide: #8f2a30; }

/*
 * キング観光 ブランド層（2026-09-14）。
 * 公式サイト（m-king.co.jp）の赤 #CF121B（ロゴの赤と同一）基調に合わせる。
 * 寸法・余白・レスポンシブ構造は hall-aio.css のまま、配色と操作状態だけを
 * 上書きする（モナコパレスの brand.css と同じ流儀）。
 * 配色変数（accent / active / guide）の上書きは config.yml の brand.colors 側。
 *
 * コントラスト（WCAG）:
 *   #fff × #cf121b = 5.6:1（太字ナビ・ボタン）
 *   #fff × #a80f18 = 7.7:1（ホバー・押下）
 *   #b8101a × #fff = 6.7:1（本文中のリンク・見出し文字）
 */
:root {
  --ha-brand-red: #cf121b;
  --ha-brand-red-dark: #a80f18;
  --ha-brand-red-text: #b8101a;
  --ha-brand-red-tint: #fbe9ea;
}

/* 見出し帯・リボンを赤に */
.ha-ribbon,
.article .ha-ribbon {
  background: var(--ha-brand-red);
}

.ha-prose h2,
.article .ha-prose h2 {
  background: var(--ha-brand-red);
}

.ha-prose h3 {
  border-bottom-color: var(--ha-brand-red);
}

/* 機種カードのアクセント（出典注記の左罫・リンク色は components.css の
 * 共通スタイルが --ha-active / --ha-accent 経由で赤に解決する） */
.ha-machine {
  border-top: 3px solid var(--ha-brand-red);
}

.ha-faq details p a {
  color: var(--ha-brand-red-text);
}

/* クイックリンクの上罫は3つとも同じ赤（モナコパレスの実績に倣う） */
.ha-quick a:nth-child(1) { border-top-color: var(--ha-brand-red); }
.ha-quick a:nth-child(2) { border-top-color: var(--ha-brand-red); }
.ha-quick a:nth-child(3) { border-top-color: var(--ha-brand-red); }

/* 主ボタン: 赤地・白文字（既定は薄グレー地・墨文字） */
.ha-more,
.ha-store-list-toggle {
  color: #fff !important;
  background: var(--ha-brand-red);
  border-color: var(--ha-brand-red);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.ha-more:active,
.ha-store-list-toggle:active {
  color: #fff !important;
  background: var(--ha-brand-red-dark);
  border-color: var(--ha-brand-red-dark);
  transition-duration: 80ms;
}

.ha-more:focus-visible,
.ha-store-list-toggle:focus-visible {
  color: #fff !important;
  background: var(--ha-brand-red-dark);
  border-color: var(--ha-brand-red-dark);
}

.ha-shell a:focus-visible,
.ha-shell button:focus-visible,
.ha-shell input:focus-visible,
.ha-shell select:focus-visible,
.ha-shell summary:focus-visible {
  outline-color: rgba(207, 18, 27, .42);
}

/* グローバルナビ: 公式サイトと同じ赤い帯＋白文字。
 * 現在地は白抜き＋赤下線（下線色は --ha-active 経由で既に赤）。 */
.ha-desktop-nav {
  background: var(--ha-brand-red);
  border-top-color: var(--ha-brand-red-dark);
  border-bottom-color: var(--ha-brand-red-dark);
}

.ha-desktop-nav a {
  color: #fff;
  background: var(--ha-brand-red);
  border-right-color: rgba(255, 255, 255, .28);
}

.ha-desktop-nav a[aria-current="page"] {
  color: var(--ha-brand-red-text);
  background: #fff;
}

.ha-desktop-nav a:hover,
.ha-desktop-nav a[aria-current="page"]:hover {
  color: #fff;
  background: var(--ha-brand-red-dark);
}

/* モバイルメニュー・ボトムナビの現在地も赤で揃える */
.ha-mobile-menu nav a:not(.ha-parent-return) {
  border-left: 4px solid var(--ha-brand-red);
}

.ha-mobile-menu nav a[aria-current="page"],
.ha-bottom a[aria-current="page"] {
  color: #fff;
  background: var(--ha-brand-red);
}

@media (hover: hover) {
  .ha-more:hover:not(:active),
  .ha-store-list-toggle:hover:not(:active) {
    color: #fff !important;
    background: var(--ha-brand-red-dark);
    border-color: var(--ha-brand-red-dark);
  }

  .ha-mobile-menu nav a:not(.ha-parent-return):hover {
    color: #fff;
    background: var(--ha-brand-red);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ha-more,
  .ha-store-list-toggle {
    transition: none;
  }
}