/* Sitewide contrast pass (amalance-web / willed-web と同じ方向性:
   フラットで淡い既定テーマに、ブランド色（黒 × イエロー）でメリハリを付ける)。
   全ページの </head> 末尾で読み込む共通レイヤー。ここにあるルールはどれも
   「そのクラス/IDがあるページにだけ効く」ので、ページごとの差分は気にしなくてよい。
   2026-09-26: index.html から開始 → 全ページへ展開。 */

:root {
  --wp-ink: #1e2022;
  --wp-ink-soft: #5b6472;
  --wp-line: #e4e6ef;
  --wp-accent: var(--wiffy-accent, #f3cf35);
  --wp-accent-dark: var(--wiffy-accent-dark, #7a6500);
}

/* ---------- Header: a hairline turns "white space" into a bar ---------- */
#header .header-inner {
  border-bottom: 1px solid var(--wp-line);
}
#header .header-extras a { transition: color .2s ease; }
#header .header-extras a:hover,
#header .header-extras a:hover i {
  color: var(--wp-accent-dark) !important;
}

/* ---------- Generic page hero (#page-title): plain centered h1 -> real hierarchy.
   ai.html has its own bespoke hero (.wiffy-ai-page-title), left untouched. ---------- */
#page-title:not(.wiffy-ai-page-title) {
  border-top: 1px solid var(--wp-line);
  border-bottom: 1px solid var(--wp-line);
}
#page-title:not(.wiffy-ai-page-title) .page-title > h1 {
  position: relative;
  padding-bottom: 22px;
  font-weight: 800;
  color: var(--wp-ink);
}
#page-title:not(.wiffy-ai-page-title) .page-title > h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: var(--wp-accent);
}
#page-title:not(.wiffy-ai-page-title) .page-title > span,
#page-title:not(.wiffy-ai-page-title) .page-title > small {
  display: inline-block;
  margin-top: 6px;
  color: var(--wp-ink-soft);
  font-weight: 500;
}

/* ---------- News ticker (index.html): ドットだけ amalance の .hero-eyebrow 風に
   光彩リングを付ける（枠・背景は付けない）。 ---------- */
.news-ticker-content a::before {
  box-shadow: 0 0 0 4px rgba(30, 32, 34, .12);
}

/* ---------- Hero carousel captions (index.html): bolder badge + title ---------- */
.post-entry-meta-category .badge {
  font-weight: 700;
  letter-spacing: .03em;
  padding: 6px 12px;
}
.post-entry-meta-title h2,
.post-entry-meta-title h2 a {
  font-weight: 800;
  letter-spacing: .01em;
}

/* ---------- Section headings (index.html "heading-section" pattern):
   separate the eyebrow from the headline ---------- */
.heading-text.heading-section h5 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--wp-accent-dark);
}
.heading-text.heading-section h5::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--wp-accent);
}
.heading-text.heading-section h1.text-large {
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--wp-ink);
}
@media (max-width: 767px) {
  .heading-text.heading-section h1.text-large { font-size: clamp(26px, 7vw, 36px); }
}

/* Section headings used everywhere else ("デバイス" / "導入パターン" / FAQ 等):
   swap the faint grey underline for a short accent bar. */
.heading-text.heading-line h4::before {
  width: 44px;
  height: 3px;
  background-color: var(--wp-accent);
}

/* ---------- Primary CTA anchor-buttons: flat white/grey -> real contrast.
   Scoped to <a>, not <button>, so inline tool controls (video play/pause,
   date pickers, form buttons) are left exactly as they are. ---------- */
a.btn.btn-light {
  background: var(--wp-ink);
  border-color: var(--wp-ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 13px 34px;
  border-radius: 4px;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
a.btn.btn-light:hover {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-ink);
  transform: translateY(-2px);
}

/* ---------- Feature icon rows (index.html): barely-there cards -> defined, on-brand hover ---------- */
.icon-set-container .row > [class^="col-"] {
  border: 1px solid var(--wp-line);
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.icon-set-container .row > [class^="col-"]:hover {
  background-color: var(--wp-ink);
  border-color: var(--wp-ink);
  box-shadow: 0 16px 32px rgba(30, 32, 34, .18);
}
.icon-set-container .icon-preview .icon-holder {
  background: rgba(30, 32, 34, .06);
  color: var(--wp-ink);
}
.icon-set-container .row > [class^="col-"]:hover .icon-holder {
  background-color: var(--wp-accent);
  color: var(--wp-ink);
}
.icon-set-container .icon-preview .icon-class {
  font-weight: 700;
}

/* ---------- Deploy pattern cards (index.html): crisper edge for the stronger hover shadow ---------- */
#deploy .wiffy-deploy-card {
  border: 1px solid rgba(30, 32, 34, .06);
}
#deploy .wiffy-deploy-tag {
  font-weight: 800;
}

/* ---------- Page menu bar: filled pill on hover instead of a color change only ---------- */
.page-menu nav > ul > li > a {
  font-weight: 700;
  letter-spacing: .02em;
}
.page-menu nav > ul > li:hover > a,
.page-menu nav > ul > li.active > a {
  background: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-ink) !important;
}

/* ---------- Footer copyright bar: flat pale grey -> real contrast.
   Scoped to .copyright-content (not the whole #footer) so privacy.html's
   widget block above it keeps its own light styling untouched. ---------- */
#footer .copyright-content {
  background: var(--wp-ink) !important;
  color: rgba(255, 255, 255, .68);
}
#footer .copyright-content .copyright-text {
  color: rgba(255, 255, 255, .68);
  letter-spacing: .04em;
}