/* a0-spa-quickstart/public/css/main.css */

/* CSS変数のデフォルト値（モダンテーマ）*/
:root {
  --color-primary: #141a1f;
  --color-secondary: #2b3740;
  --color-accent: #404754;
  --color-textPrimary: #ffffff;
  --color-textSecondary: #ffffff;
  --color-textAccent: #141a1f;
  --color-buttonBg: #b2d0e5;
  --color-buttonText: #141a1f;
  --color-buttonBorder: #2b3740;
  --color-inputBg: #2b3740;
  --color-inputBorder: transparent;
  --color-inputText: #ffffff;
  --color-inputPlaceholder: #9db0be;
  --color-headerBorder: #2b3740;
  --color-logoColor: #ffffff;
  --image-heroImage: url("https://static.a0training.me/images/acul-blueline/modern-login-hero.png");
}

/* Natural Theme */
[data-theme="natural"] {
  --color-primary: #f8f6f0;
  --color-secondary: #e8e2d4;
  --color-accent: #d4c8b8;
  --color-textPrimary: #3d3529;
  --color-textSecondary: #6b5d4f;
  --color-textAccent: #f8f6f0;
  --color-buttonBg: #8b7355;
  --color-buttonText: #f8f6f0;
  --color-buttonBorder: #6b5d4f;
  --color-inputBg: #ffffff;
  --color-inputBorder: #d4c8b8;
  --color-inputText: #3d3529;
  --color-inputPlaceholder: #6b5d4f;
  --color-headerBorder: #e8e2d4;
  --color-logoColor: #3d3529;
  --image-heroImage: url("https://sdmntprsouthcentralus.oaiusercontent.com/files/00000000-dd50-61f7-8ec3-9216739f4f4c/raw?se=2025-06-23T14%3A52%3A54Z&sp=r&sv=2024-08-04&sr=b&scid=0a929f91-412c-5e79-a507-db7de148c165&skoid=b64a43d9-3512-45c2-98b4-dea55d094240&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2025-06-23T13%3A35%3A05Z&ske=2025-06-24T13%3A35%3A05Z&sks=b&skv=2024-08-04&sig=1lAxmWx9xcJjG/6GC788eWR5AKZSEp9tnNubJh8dJlU%3D");
}

/* 基本的なスタイル */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* フッターテキストを強制的に白にする（Modernテーマ時） */
:root footer .text-theme-text-secondary {
  color: #ffffff !important;
}

/* Naturalテーマの場合は元の色を維持 */
[data-theme="natural"] footer .text-theme-text-secondary {
  color: #6b5d4f !important;
}

/* Modernテーマ時のドロップダウン内のテキストを見やすくする */
:root #themeDropdown button {
  color: #ffffff !important;
}

/* Naturalテーマ時のドロップダウン内のテキスト */
[data-theme="natural"] #themeDropdown button {
  color: #3d3529 !important;
}

body {
  font-family: 'Space Grotesk', 'Noto Sans', sans-serif;
  line-height: 1.6;
  background-color: var(--color-primary);
  color: var(--color-textPrimary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* フォントファミリーの設定 */
.font-catchphrase-ja {
  font-family: 'Noto Serif JP', serif;
}

.font-catchphrase-en {
  font-family: 'Lora', serif;
}

.hero-title.ja {
  font-family: 'Noto Serif JP', serif;
}

.hero-title.en {
  font-family: 'Lora', serif;
}

.hidden {
  display: none !important;
}

a {
  color: var(--color-buttonBg);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  opacity: 0.8;
}

/* 認証状態による表示切り替え */
.auth-invisible {
  display: block;
}

.auth-visible {
  display: none;
}

.auth-visible.show {
  display: flex;
}

/* ドロップダウンのスタイル */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 160px;
  background-color: var(--color-secondary);
  border: 1px solid var(--color-accent);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.dropdown-menu.show {
  display: block;
}

/* ACUL Login画面と一致させるためのスタイル */
#languageDropdown {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary);
  border-color: var(--color-accent);
}

#languageDropdown.hidden {
  display: none !important;
}

#languageDropdown button {
  display: block;
  width: 100%;
  color: var(--color-textPrimary);
}

#languageDropdown button:hover {
  background-color: var(--color-accent) !important;
}

#themeDropdown {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary);
  border-color: var(--color-accent);
}

#themeDropdown.hidden {
  display: none !important;
}

#themeDropdown button {
  display: block;
  width: 100%;
  color: var(--color-textPrimary);
}

#themeDropdown button:hover {
  background-color: var(--color-accent) !important;
}

.dropdown-item,
.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  color: var(--color-textPrimary);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-menu button:hover {
  background-color: var(--color-accent);
  color: var(--color-textPrimary);
}

.dropdown-item:first-child,
.dropdown-menu button:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.dropdown-item:last-child,
.dropdown-menu button:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.dropdown-header {
  padding: 0.75rem 1rem;
  color: var(--color-textPrimary);
  font-weight: 600;
  border-bottom: 1px solid var(--color-accent);
  font-size: 0.875rem;
}

/* Modernテーマのドロップダウンヘッダー */
:root .dropdown-header {
  color: #e8f0f7;
  border-bottom: 1px solid #3a4952;
}

/* Naturalテーマのドロップダウンヘッダー */
[data-theme="natural"] .dropdown-header {
  color: #2d2d2d;
  border-bottom: 1px solid #d4d0c6;
}

/* プロフィール画像 */
.profile-image {
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  transition: border-color 0.2s ease;
}

.profile-image:hover {
  border-color: var(--color-buttonBg);
}

/* ページのレスポンシブ対応 */
.page {
  transition: opacity 0.3s ease;
}

.page.hidden {
  display: none;
}

/* ボタンのホバー効果 */
button {
  transition: all 0.2s ease;
}

button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ヒーロー画像のスタイル */
.hero-section {
  position: relative;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 2rem;
  /* デフォルトでmodernテーマの画像を使用 */
  background-image: url('https://static.a0training.me/images/acul-blueline/modern-hero.jpg');
}

/* ナチュラルテーマのヒーロー画像 */
[data-theme="natural"] .hero-section {
  background-image: url('https://static.a0training.me/images/acul-blueline/natural-hero.jpg') !important;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(20, 26, 31, 0.1) 0%, 
    rgba(20, 26, 31, 0.3) 40%, 
    rgba(20, 26, 31, 0.6) 80%, 
    rgba(20, 26, 31, 0.8) 100%);
  border-radius: 1rem;
}

[data-theme="natural"] .hero-overlay {
  background: linear-gradient(to bottom, 
    rgba(248, 246, 241, 0.1) 0%, 
    rgba(248, 246, 241, 0.3) 40%, 
    rgba(248, 246, 241, 0.6) 80%, 
    rgba(248, 246, 241, 0.8) 100%);
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
  padding: 3rem 2rem;
  width: 100%;
}

.hero-logo {
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

[data-theme="natural"] .hero-logo {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-textPrimary);
  margin-bottom: 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.hero-description {
  font-size: 1.125rem;
  color: var(--color-textSecondary);
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.4);
}

[data-theme="natural"] .hero-description {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6), 0 1px 1px rgba(255, 255, 255, 0.7);
}

[data-theme="natural"] .hero-title {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* モバイル対応 */
@media (max-width: 640px) {
  .flex-col.sm\\:flex-row {
    flex-direction: column;
  }
  
  .text-center.sm\\:text-left {
    text-align: center;
  }
  
  .hero-section {
    min-height: 300px;
  }
  
  .hero-title {
    font-size: 1.875rem;
  }
  
  .hero-content {
    padding: 2rem 1.5rem;
  }
}

/* テーマ切り替え時のスムーズなトランジション */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* カスタムテーマクラス */
.text-theme-text-primary {
  color: var(--color-textPrimary);
}

.text-theme-text-secondary {
  color: var(--color-textSecondary);
}

.text-theme-button-bg {
  color: var(--color-buttonBg);
}

/* Modernテーマでのフッターテキスト色を調整 */
footer .text-theme-text-secondary {
  color: #c4d3e0; /* より明るいグレーに変更 */
}

footer .text-theme-text-secondary:hover {
  color: var(--color-buttonBg);
}

/* Naturalテーマでのフッターテキスト色 */
[data-theme="natural"] footer .text-theme-text-secondary {
  color: #6b6b6b;
}

[data-theme="natural"] footer .text-theme-text-secondary:hover {
  color: var(--color-buttonBg);
}

/* テーマドロップダウンボタンの専用スタイル */
.theme-dropdown-button {
  /* Modernテーマでの色設定 */
  color: #ffffff !important;
  background-color: transparent;
}

.theme-dropdown-button:hover {
  background-color: var(--color-accent) !important;
  color: #ffffff !important;
}

/* Naturalテーマでの色設定 */
[data-theme="natural"] .theme-dropdown-button {
  color: #2d2d2d !important;
}

[data-theme="natural"] .theme-dropdown-button:hover {
  background-color: var(--color-accent) !important;
  color: #2d2d2d !important;
}