/**
 * AOSE WordPress
 * aose-base.css
 *
 * AOSE 共通ベーススタイル
 * 対象：aose.jp / SWELL CHILD
 *
 * 役割：
 * - AOSE本文Rootの基本状態
 * - box-sizing
 * - 画像・動画・埋め込みの安全な基本処理
 * - フォーム要素の基本継承
 * - focus-visible
 * - アクセシビリティ用補助クラス
 *
 * 注意：
 * - SWELL全体をリセットしない
 * - 見出し・本文文字組みは typography.css
 * - 幅・グリッド・余白は layout.css
 * - ボタン・カード等は components.css
 * - SWELL固有調整は aose-swell.css
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. AOSE ROOT
   ========================================================= */

/*
 * AOSE本文の基本Root。
 *
 * WordPress / SWELL側では
 * 本文を div または Group Block とし、
 * .aose-page を付与する。
 */
.aose-page {
	color: var(--aose-color-text);
	background-color: var(--aose-color-background);
}


/* =========================================================
   2. BOX SIZING
   ========================================================= */

/*
 * AOSE本文内部だけを border-box に統一。
 * SWELLや他ページ全体へグローバルリセットをかけない。
 */
.aose-page,
.aose-page *,
.aose-page *::before,
.aose-page *::after {
	box-sizing: border-box;
}


/* =========================================================
   3. MEDIA BASE
   ========================================================= */

/*
 * 画像・動画等が親要素から
 * 意図せずはみ出さないための基本処理。
 */
.aose-page :where(
	img,
	video,
	canvas,
	iframe
) {
	max-width: 100%;
}


/*
 * 本来の画像比率を維持する。
 */
.aose-page :where(
	img,
	video
) {
	height: auto;
}


/*
 * picture 自体が幅を妨げないようにする。
 */
.aose-page picture {
	max-width: 100%;
}


/*
 * iframe の枠線は
 * 各コンポーネント側で必要な場合だけ指定する。
 */
.aose-page iframe {
	border: 0;
}


/* =========================================================
   4. TEXT SAFETY
   ========================================================= */

/*
 * 長いURL・英数字等によって
 * ページ全体が横にはみ出す事故を抑える。
 *
 * 日本語本文の通常改行を過度に変更しない。
 */
.aose-page {
	overflow-wrap: break-word;
}


/* =========================================================
   5. LINKS
   ========================================================= */

/*
 * リンク色・装飾デザインそのものは
 * typography / components 側で定義する。
 *
 * ここではブラウザーの文字描画上の
 * 基本的な扱いだけを指定する。
 */
.aose-page a {
	text-decoration-skip-ink: auto;
}


/* =========================================================
   6. FORM ELEMENTS
   ========================================================= */

/*
 * AOSE内のフォーム要素は
 * 周囲のフォント・文字色を継承する。
 *
 * 外観そのものはSWELL標準または
 * 専用コンポーネント側で調整する。
 */
.aose-page :where(
	button,
	input,
	select,
	textarea
) {
	font: inherit;
	color: inherit;
}


/*
 * textarea の横方向Resizeによる
 * レイアウト破壊を防ぐ。
 */
.aose-page textarea {
	resize: vertical;
}


/* =========================================================
   7. INTERACTIVE ELEMENT BASE
   ========================================================= */

/*
 * ボタン・リンク等は
 * Pointer操作可能であることを示す。
 *
 * disabled 要素へは強制しない。
 */
.aose-page :where(
	a[href],
	button:not(:disabled),
	summary,
	[role="button"]:not([aria-disabled="true"])
) {
	cursor: pointer;
}


/* =========================================================
   8. FOCUS VISIBLE
   ========================================================= */

/*
 * キーボード操作時のフォーカス表示。
 *
 * outline:none は使用しない。
 * 色だけでなく輪郭そのものを表示する。
 */
.aose-page :where(
	a[href],
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex]
):focus-visible {
	outline: 2px solid var(--aose-color-brown);
	outline-offset: 3px;
}


/* =========================================================
   9. DISABLED STATE
   ========================================================= */

/*
 * 操作不能要素について、
 * Pointerを表示しない。
 *
 * 見た目の透明度等は
 * 各Component側で必要に応じて指定する。
 */
.aose-page :where(
	button:disabled,
	input:disabled,
	select:disabled,
	textarea:disabled,
	[aria-disabled="true"]
) {
	cursor: not-allowed;
}


/* =========================================================
   10. VISUALLY HIDDEN
   ========================================================= */

/*
 * 視覚的には非表示にしながら
 * スクリーンリーダーには残したい情報用。
 *
 * display:none は使わない。
 */
.aose-visually-hidden {
	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: 0 !important;
}


/* =========================================================
   11. EMPTY MEDIA SAFETY
   ========================================================= */

/*
 * src属性のない画像を
 * レイアウト上に誤表示しない。
 *
 * WordPress編集中の通常画像には影響しないよう
 * AOSE本文内に限定する。
 */
.aose-page img:not([src]) {
	visibility: hidden;
}


/* =========================================================
   12. ACCESSIBILITY / USER SETTINGS
   ========================================================= */

/*
 * 強制的な滑らかスクロールはここでは設定しない。
 *
 * prefers-reduced-motion との整合は
 * aose-motion.css 側で管理する。
 */


/* =========================================================
   13. IMPORTANT IMPLEMENTATION RULES
   ========================================================= */

/*
 * 以下は意図的に設定しない。
 *
 * - body全体へのmarginリセット
 * - h1〜h6のmarginリセット
 * - p / ul / olのmarginリセット
 * - buttonのborder/backgroundリセット
 * - 全リンクの色強制
 * - overflow-x:hidden
 * - outline:none
 * - SWELL内部classへの直接上書き
 *
 * これらはSWELLとの競合や、
 * 横はみ出し等の不具合を隠す原因になるため。
 */