/**
 * Accessibility Styles
 *
 * @package Aomo_Web
 * @since 1.0.0
 */

/* ==========================================================================
   Focus Styles
   ========================================================================== */

/* キーボードフォーカスの可視化 */
*:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* マウス操作時はフォーカスリングを非表示（オプション） */
*:focus:not(:focus-visible) {
	outline: none;
}

/* キーボード操作時のフォーカスリング */
*:focus-visible {
	outline: 3px solid #0073aa;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ボタンとリンクのフォーカススタイル */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid #0073aa;
	outline-offset: 3px;
	border-radius: 2px;
}

/* スキップリンクのフォーカス */
.skip-link:focus {
	top: 0;
	z-index: 999999;
	background-color: #000;
	color: #fff;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

/* ユーザーがアニメーションを減らす設定をしている場合 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.scroll-down span {
		animation: none !important;
	}

	.feature-card:hover,
	.case-study-card:hover,
	.testimonial-card:hover,
	.pricing-card:hover {
		transform: none !important;
	}
}

/* ==========================================================================
   High Contrast Mode
   ========================================================================== */

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
	body {
		background-color: #fff;
		color: #000;
	}

	a {
		color: #0000ff;
		text-decoration: underline;
	}

	.btn {
		border: 2px solid #000;
	}

	.feature-card,
	.case-study-card,
	.testimonial-card,
	.pricing-card {
		border: 2px solid #000;
	}
}

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border-width: 0 !important;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	padding: 0.5rem 1rem !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	background-color: #000 !important;
	color: #fff !important;
	z-index: 999999 !important;
}

/* ==========================================================================
   ARIA Attributes Support
   ========================================================================== */

/* 非表示要素のスタイル */
[aria-hidden="true"] {
	display: none;
}

[aria-hidden="false"] {
	display: block;
}

/* 無効化された要素 */
[aria-disabled="true"],
[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* 展開/折りたたみ状態の視覚的表示 */
[aria-expanded="true"]::after {
	content: ' (展開中)';
	font-size: 0;
}

[aria-expanded="false"]::after {
	content: ' (折りたたみ中)';
	font-size: 0;
}

/* ==========================================================================
   Keyboard Navigation
   ========================================================================== */

/* タブ順序の視覚的表示（デバッグ用、本番では削除） */
/* *:focus {
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.5) !important;
} */

/* フォーカストラップ（モーダルなど） */
.focus-trap {
	outline: none;
}

/* ==========================================================================
   Color Contrast
   ========================================================================== */

/* テキストと背景のコントラスト比を確保 */
.text-contrast {
	color: #333;
	background-color: #fff;
}

/* リンクのコントラスト */
a {
	color: #0073aa;
}

a:visited {
	color: #005177;
}

a:hover,
a:focus {
	color: #005177;
	text-decoration: underline;
}

/* ==========================================================================
   Form Accessibility
   ========================================================================== */

/* 必須フィールドの表示 */
.required {
	color: #dc3545;
	font-weight: 600;
}

/* エラーメッセージ */
.error-message,
.form-error {
	color: #dc3545;
	font-weight: 600;
	margin-top: 0.5rem;
	display: block;
}

/* ラベルの必須表示 */
label .required::after {
	content: ' (必須)';
	font-size: 0.875rem;
}

/* フォームヘルプテキスト */
.form-help {
	font-size: 0.875rem;
	color: #666;
	margin-top: 0.25rem;
	display: block;
}

/* ==========================================================================
   Image Accessibility
   ========================================================================== */

/* 装飾用画像の非表示（alt=""の場合） */
img[alt=""] {
	border: 0;
}

/* 画像の読み込みエラー */
img[src=""],
img:not([src]) {
	border: 2px dashed #dc3545;
	min-height: 50px;
	display: block;
}

/* ==========================================================================
   Skip Links
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -40px;
	left: 6px;
	background-color: #000;
	color: #fff;
	padding: 8px 16px;
	text-decoration: none;
	z-index: 999999;
	border-radius: 0 0 4px 4px;
}

.skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Landmark Regions
   ========================================================================== */

/* ランドマーク領域の視覚的表示（デバッグ用、本番では削除） */
/* [role="banner"],
[role="navigation"],
[role="main"],
[role="complementary"],
[role="contentinfo"] {
	outline: 2px dashed #0073aa;
	margin: 2px;
} */

/* ==========================================================================
   Responsive Accessibility
   ========================================================================== */

@media (max-width: 768px) {
	/* モバイルでのタッチターゲットサイズ確保 */
	a,
	button,
	input[type="submit"],
	input[type="button"] {
		min-height: 44px;
		min-width: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}