/*
Theme Name: GeNEE Intellecta
Theme URI: https://genee.jp/
Author: GeNEE Inc.
Author URI: https://genee.jp/
Description: GeNEE Intellecta（生成AI研修・コンサルティング）サイト用オリジナルテーマ。静的HTML/CSS一式から移植。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: genee-intellecta
*/

/* ==========================================================================
   Design tokens
   （元: 各画面共通で使用されているCSSカスタムプロパティ）
   ========================================================================== */
:root {
  --color-bg: #FDFFFF;
  --color-bg-alt: #F5F8FB;
  --color-bg-soft: #F9FCFF;
  --color-text: #14293E;
  --color-text-strong: #0F2A47;
  --color-text-muted: #5B6169;
  --color-text-faint: #8A8F98;
  --color-border: #E7E8EA;

  --color-accent-orange: #E8720F;
  --color-accent-orange-bg: #FCE9DC;
  --color-accent-blue: #2B6FE0;
  --color-accent-blue-soft: #4FA0D8;
  --color-accent-purple: #A855C4;
  --color-card-blue-bg: #DCE9FA;
  --color-card-blue-light: #EBF4FF;
  --color-card-blue: #D4E7FF;
  --color-card-dark-bg: #14293E;
  --color-card-dark-text: #FFFFFF;
  --color-text-fainter: #8A8F98;

  /* タグ・ラベル用（03/04-02/05画面で使用） */
  --color-tag-blue-bg: #DCE9FA;
  --color-tag-blue-text: #0F2A47;
  --color-tag-peach-bg: #FCE9DC;
  --color-tag-peach-text: #CA7B38;
  --color-tag-red-bg: #FCE3E3;
  --color-tag-red-text: #B3261E;
  --color-tag-yellow-bg: #FCF0C2;
  --color-tag-yellow-text: #B8860B;
  --color-tag-gray-bg: #EDEFF2;
  --color-tag-gray-text: #14293E;

  --gradient-brand: linear-gradient(90deg, #2B6FE0 0%, #A855C4 50%, #E8720F 100%);

  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --content-max-width: 1200px;
  --article-max-width: 940px;
  /* お知らせ一覧・詳細のみ、本文幅を少し狭めて読みやすくしています */
  --news-max-width: 850px;
  --content-padding-inline: 24px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --space-section: 80px;
}

/* スマホ幅では画面が縦長でスクロールも多いため、セクション上下の余白を
   PCより詰めて間延びして見えないようにします（サイト全体の--space-sectionを
   一括で上書き） */
@media (max-width: 767px) {
  :root {
    --space-section: 50px;
  }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, p, dl, dd, figure {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrapper {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding-inline);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 48px;
}

/* ==========================================================================
   Buttons
   （全画面共通）
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  border: 1px solid transparent;
  cursor: pointer;
}

.button--cta {
  background: var(--gradient-brand);
  color: #fff;
}

.button--outline {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

.button--solid {
  background: var(--color-text-strong);
  color: #fff;
}

/* ==========================================================================
   Site header（header.php）
   ========================================================================== */
.site-header {
  background-color: var(--color-bg);
}

.site-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--content-padding-inline);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* トップページのみロゴを<h1>で囲むため、レイアウトに影響しないようにする。
   display:contents はボックスを消すだけで継承は止めないため、
   h1のデフォルトスタイル（文字サイズ2em・太字など）が子要素の
   .brand__nameに継承されてロゴ文字が巨大化しないよう明示的にリセットする。 */
.brand__heading {
  display: contents;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

.brand__logo {
  height: 40px;
  width: auto;
}

.brand__name {
  font-weight: 700;
  color: var(--color-text-strong);
}

.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.main-nav__list a {
  font-size: 0.9375rem;
  font-weight: 500;
}

.main-nav__list li.current-menu-item > a,
.main-nav__list li.current-menu-ancestor > a {
  color: var(--color-accent-blue);
}

/* ==========================================================================
   グロナビの大カテゴリ配下サブメニュー
   （genee_intellecta_default_primary_menu()が出力する.main-nav__toggle／
   .main-nav__submenu。PCはここで:hover / :focus-withによるポップアップ表示、
   スマホは@media (max-width: 767px)内で＋－開閉のアコーディオンに上書きします）
   ========================================================================== */
.main-nav__item--has-children {
  position: relative;
}

.main-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.main-nav__toggle-icon {
  display: inline-block;
  font-size: 0.7em;
  line-height: 1;
  color: var(--color-text-faint);
}

.main-nav__toggle-icon::before {
  content: "\25BE";
}

.main-nav__toggle[aria-expanded="true"] .main-nav__toggle-icon::before {
  content: "\25B4";
}

.main-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  box-shadow: 0 20px 40px rgba(15, 42, 71, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 100;
}

/* PC: ボタンのhover／キーボードフォーカス、またはJSが付与する.is-openで表示。
   ボタンとパネルの間に隙間（dead zone）を作らないよう top は100%ぴったりにしています */
.main-nav__item--has-children:hover .main-nav__submenu,
.main-nav__item--has-children:focus-within .main-nav__submenu,
.main-nav__submenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.main-nav__submenu li + li {
  margin-top: 2px;
}

.main-nav__item--has-children .main-nav__submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.main-nav__item--has-children .main-nav__submenu a:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-accent-blue);
}

.site-header__cta {
  flex-shrink: 0;
}

/* ヘッダーCTAの2ボタン化（資料ダウンロード + 無料相談）。
   資料ダウンロードボタンは画面が狭くなるとナビゲーションが窮屈になるため、
   1200px未満では非表示にしています（無料相談ボタンのみ残ります） */
.site-header__actions {
  display: flex;
  gap: 8px;
}

.site-header__actions .button {
  padding: 10px 20px;
}

@media (max-width: 1199px) {
  .site-header__actions .button--outline {
    display: none;
  }
}

/* ハンバーガーボタン（768px未満のみ表示。デフォルトでは非表示） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-strong);
}

/* 768px以上ではナビゲーション・CTAボタンをこれまで通り横並び表示にする
   （.nav-panel 自体をレイアウトに関与させないための display:contents） */
.nav-panel {
  display: contents;
}

.nav-panel__close {
  display: none;
}

.nav-panel__overlay {
  display: none;
}

/* ==========================================================================
   Site footer（footer.php）
   ========================================================================== */
.site-footer {
  background-color: var(--color-bg);
  padding: 64px var(--content-padding-inline) 32px;
  text-align: center;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.site-footer__logo {
  height: 32px;
  width: auto;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.footer-link-group__heading {
  font-size: 0.8125rem;
  color: var(--color-text-faint);
  margin-bottom: 8px;
}

.footer-link-group__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: 0.875rem;
}

.footer-link-group__list a[href^="#"] {
  color: var(--color-accent-blue);
}

.site-footer__copyright {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* ==========================================================================
   セクション見出し（.section-header より簡易版。AI研修・AIコンサルティング・
   オンライン講座詳細TOPで使用）
   ========================================================================== */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.section-title__label {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}

.section-title__lead {
  margin-top: 16px;
  max-width: 640px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   タグ（講師紹介・コンサルタント紹介・研修教材サンプル画面で使用）
   ========================================================================== */
.tag {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.tag--blue {
  background-color: var(--color-tag-blue-bg);
  color: var(--color-tag-blue-text);
}

.tag--peach {
  background-color: var(--color-tag-peach-bg);
  color: var(--color-tag-peach-text);
}

.tag--red {
  background-color: var(--color-tag-red-bg);
  color: var(--color-tag-red-text);
}

.tag--yellow {
  background-color: var(--color-tag-yellow-bg);
  color: var(--color-tag-yellow-text);
}

.tag--gray {
  background-color: var(--color-tag-gray-bg);
  color: var(--color-tag-gray-text);
}

/* ==========================================================================
   パンくずリスト（下層ページ共通 / breadcrumb.php で出力）
   元HTMLでは区切り文字（">" / "›"）や現在地の太さ(700/500)に画面ごとの
   細かな揺れがありましたが、本テーマではデザインを1種類に統一しています。
   ========================================================================== */
.breadcrumb {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 24px var(--content-padding-inline) 0;
}

.breadcrumb--narrow {
  max-width: var(--article-max-width);
}

.breadcrumb--news {
  max-width: var(--news-max-width);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
}

.breadcrumb__list li:not(:last-child) {
  color: var(--color-text-faint);
}

.breadcrumb__list li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: var(--color-text-faint);
}

.breadcrumb__list li[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

/* ==========================================================================
   CTA section（下層ページ共通）
   トップページのみ background-color が異なるため front-page.css 側で上書き。
   「06_AIコンサルティング画面」も --color-bg-alt を使用していたため、
   page-ai-consulting.css 側で上書きしています。
   ========================================================================== */
.cta {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-section) var(--content-padding-inline);
  text-align: center;
  background-color: var(--color-bg-soft);
}

.cta__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text-strong);
}

.cta__label {
  margin-top: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
}

.cta__button {
  margin-top: 24px;
}

/* ==========================================================================
   Responsive breakpoints（header / footer 関連分のみ）
   画面固有のCSS（ヒーロー・カード等）は各テンプレート側のスタイルシートで追加予定
   ========================================================================== */
@media (min-width: 768px) {
  .site-footer__links {
    flex-direction: row;
    justify-content: center;
    gap: 64px;
  }

  .footer-link-group {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .main-nav__list {
    gap: 24px;
  }

  /* ヘッダーCTAが2ボタン（資料ダウンロード＋無料相談）になり横幅を
     取るようになったため、PC表示のみメニューの文字サイズを少し小さくして
     1行に収まるようにしています */
  .main-nav__list a,
  .main-nav__toggle {
    font-size: 0.8125rem;
  }
}

@media (max-width: 767px) {
  /* ハンバーガーボタンを表示し、通常のヘッダーCTAは非表示にする
     （CTAボタンはメニューパネルの中に同じ .site-header__cta が表示されます） */
  .nav-toggle {
    display: flex;
  }

  .site-header__inner > .site-header__cta {
    display: none;
  }

  /* .nav-panel を「画面右からスライドインするメニュー」に切り替える */
  .nav-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    padding: 24px var(--content-padding-inline);
    background-color: var(--color-bg);
    box-shadow: -4px 0 24px rgba(15, 42, 71, 0.12);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1000;
  }

  .nav-panel.is-open {
    transform: translateX(0);
  }

  .nav-panel__close {
    display: block;
    align-self: flex-end;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-strong);
    cursor: pointer;
  }

  .nav-panel .main-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }

  /* 大カテゴリ本体（直接の子<a>）のみに矢印・太字などを適用し、
     サブメニュー内のリンク（.main-nav__submenu a）には影響しないよう
     > で直接の子要素に絞っています */
  .nav-panel .main-nav__list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
  }

  .nav-panel .main-nav__list > li > a::after {
    content: "\2192";
    color: var(--color-text-faint);
    font-weight: 400;
  }

  .nav-panel .site-header__cta {
    width: 100%;
  }

  /* サブメニュー付きの大カテゴリ（AI研修など）は<button>で出力されるため、
     直接の子<a>を対象とする上のルールとは別に、同じ見た目を明示的に指定します */
  .main-nav__toggle {
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text-strong);
  }

  .main-nav__toggle-icon {
    font-size: 1rem;
  }

  .main-nav__toggle-icon::before {
    content: "+";
    font-weight: 400;
  }

  .main-nav__toggle[aria-expanded="true"] .main-nav__toggle-icon::before {
    content: "\2212";
  }

  /* サブメニューは常時ポップアップのPC用スタイルをリセットし、
     ＋－で開閉するアコーディオン（2列グリッド）に切り替える */
  .main-nav__submenu {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.25s ease;
  }

  .main-nav__submenu.is-open {
    max-height: 600px;
    padding-bottom: 12px;
  }

  .main-nav__submenu li + li {
    margin-top: 0;
  }

  /* 先頭の「－」はアコーディオンの開閉アイコン（－）と紛らわしいため廃止し、
     PC版のポップアップ内リンクやお知らせ・会社概要と同じ「文字＋→」の見た目に揃えます */
  .main-nav__item--has-children .main-nav__submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: normal;
  }

  .main-nav__item--has-children .main-nav__submenu a::after {
    content: "\2192";
    color: var(--color-text-faint);
    font-weight: 400;
    flex-shrink: 0;
  }

  /* メニュー背後のオーバーレイ */
  .nav-panel__overlay {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(15, 42, 71, 0.4);
    z-index: 999;
  }

  .nav-panel__overlay[hidden] {
    display: none;
  }

  /* メニュー表示中は背景のスクロールを止める */
  body.nav-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   フローティングバナー（footer.php／assets/js/floating-banner.js）
   トップページ・お問い合わせページ以外の全ページで、ページの40%まで
   スクロールした時点で表示されます。
   ========================================================================== */
.floating-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 900;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-banner[hidden] {
  display: none;
}

.floating-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-banner__inner {
  position: relative;
}

.floating-banner__link {
  display: block;
  line-height: 0;
}

.floating-banner__image {
  display: block;
  height: 100px;
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(15, 42, 71, 0.25);
}

.floating-banner__close {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background-color: rgba(15, 42, 71, 0.85);
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 768px) {
  .floating-banner__image {
    height: 100px;
  }
}