/* main.css - メインCSSファイル（既存構造版） */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* ===== 01 - FOUNDATION（基盤） ===== */
/* CSS変数とリセットスタイル - 最初に読み込む */
@import url('01-foundation/variables.css');
@import url('01-foundation/reset.css');
@import url('01-foundation/typography.css');

/* ===== 02 - LAYOUT（レイアウト） ===== */
/* レイアウトシステムとユーティリティ */
@import url('02-layout/grid.css');
@import url('02-layout/container.css');
@import url('02-layout/utilities.css');

/* ===== 03 - COMPONENTS（コンポーネント） ===== */
/* 再利用可能なUIコンポーネント */
@import url('03-components/buttons.css');
@import url('03-components/forms.css');
@import url('03-components/tables.css');
@import url('03-components/cards.css');
@import url('03-components/navigation.css');

/* ===== 04 - SECTIONS（セクション） ===== */
/* サイトの主要セクション */
@import url('04-sections/header.css');
@import url('04-sections/hero.css');
@import url('04-sections/content.css');
@import url('04-sections/sidebar.css');
@import url('04-sections/footer.css');

/* ===== 05 - PAGES（ページ専用） ===== */
/* ページ固有のスタイル */
@import url('05-pages/home.css');
@import url('05-pages/wlcde.css');
@import url('05-pages/contact.css');
@import url('05-pages/events.css');

/* ===== 06 - RESPONSIVE（レスポンシブ） ===== */
/* レスポンシブ対応 - 最後に読み込んで上書き */
@import url('06-responsive/responsive.css');

/* ===== グローバル調整 ===== */

/* フォーカス管理 */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* スクロールバーのスタイリング（Webkit系） */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-lighter);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* 選択時のスタイル */
::selection {
  background-color: var(--primary-light);
  color: var(--white);
}

::-moz-selection {
  background-color: var(--primary-light);
  color: var(--white);
}

/* ===== アクセシビリティ改善 ===== */

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: var(--white);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* 視覚的に隠すがスクリーンリーダーには読まれるクラス */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== パフォーマンス最適化 ===== */

/* GPU加速を利用 */
.nav-item a,
.btn,
.card,
.news-item,
.activity-item,
.event-card {
  will-change: transform;
}

/* レイアウトシフトを防ぐ */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* フォント表示の最適化 */
@font-face {
  font-family: 'Noto Sans JP';
  font-display: swap;
  src: local('Noto Sans JP');
}
/* ===== CSS変数のフォールバック ===== */
.btn-primary {
  background-color: #5ba1b3; /* var(--primary-color) のフォールバック */
}

.btn-secondary {
  background-color: #48717c; /* var(--secondary-color) のフォールバック */
}