/*
 * 「今日の資格問題」（[qlm_today_questions]）専用の見た目。すべて .qlm-today 配下にscopeしている。
 * 今日表示する問題の選択ロジック・simulation/live判定・X投稿との紐付け・日付判定・資格判定・
 * 問題データ・正解・解説・根拠・出典・10問テストURL判定・X投稿URLはこのCSSでは一切変更していない
 * （見た目のみ）。トップページ・資格一覧・資格探索・資格比較・資格詳細・10問テストで確定した
 * デザイントークン（qlm-common.css）を引き継ぐ。
 */

/*
 * ページ上部の余白・タイトルサイズの調整（このページ専用）。他ページと同じ調整。
 * main の margin-top とグループの padding-top はテンプレート側のinline styleで
 * 指定されているため、上書きには!importantが必要。このCSSファイルは今日の資格問題ページでのみ
 * 読み込まれるため、他ページには影響しない。固定ページタイトルの文言自体は変更しない。
 */
main {
	margin-top: 24px !important;
}

main > .wp-block-group.alignfull {
	padding-top: 32px !important;
}

.wp-block-post-title {
	font-size: 2rem;
}

.qlm-today {
	max-width: 1040px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: var( --qlm-color-text );
	box-sizing: border-box;
}

.qlm-today * {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* 問題カード・空状態は、資格詳細・10問テストと同じ考え方で読みやすい行幅に留める
   （外側の .qlm-today 自体は他ページと横位置を揃えるため広めに保つ）。 */
.qlm-today-date,
.qlm-today-empty,
.qlm-today-block {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.qlm-today-heading {
	margin-bottom: 0.25em;
}

.qlm-today-date {
	color: var( --qlm-color-text-muted );
	font-size: 0.95em;
	margin-top: 0;
	margin-bottom: 1.5em;
}

.qlm-today-empty {
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	color: var( --qlm-color-text );
	padding: 1.1em 1.3em;
}

/* ---------------------------------------------------------------------
 * 問題カード。
 * ------------------------------------------------------------------- */

.qlm-today-block {
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.4em 1.5em;
	margin-bottom: 1.6em;
}

.qlm-today-qualification {
	margin: 0 0 0.3em;
	font-size: 1.2rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
}

.qlm-today-code {
	margin: 0 0 1.1em;
	font-size: 0.85em;
	font-weight: 600;
	color: var( --qlm-color-text-muted );
	letter-spacing: 0.02em;
}

.qlm-today-question {
	margin: 0 0 1.1em;
	background: var( --qlm-color-bg-section );
	border-radius: var( --qlm-radius-button );
	padding: 0.9em 1.1em;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.7;
	color: var( --qlm-color-text );
}

/* 回答フォームと誤認されないよう、hover等のインタラクション表現は付けない静的な表示にする。 */
.qlm-today-choices {
	list-style: none;
	margin: 0 0 1.1em;
	padding: 0;
}

.qlm-today-choices li {
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-button );
	padding: 0.75em 1em;
	margin-bottom: 0.5em;
	color: var( --qlm-color-text );
}

.qlm-today-answer {
	border-left: 3px solid var( --qlm-color-success );
	background: var( --qlm-color-bg );
	border-radius: 0 var( --qlm-radius-button ) var( --qlm-radius-button ) 0;
	padding: 0.7em 1em;
	margin: 0 0 1.2em;
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --qlm-color-success );
}

.qlm-today-explanation {
	margin: 0 0 1.1em;
	color: var( --qlm-color-text );
}

.qlm-today-rationale {
	background: var( --qlm-color-bg-section );
	border-radius: var( --qlm-radius-button );
	padding: 0.8em 1em;
	margin: 0 0 1.1em;
	color: var( --qlm-color-text );
	font-size: 0.95em;
}

.qlm-today-source {
	margin: 0 0 1.3em;
	font-size: 0.9em;
	color: var( --qlm-color-text-muted );
}

.qlm-today-source a {
	color: var( --qlm-color-secondary );
}

.qlm-today-newtab {
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
}

/* ---------------------------------------------------------------------
 * 10問テストCTA：資格詳細・10問テストページと同じプライマリボタン。
 * PCでは過度に横長にせず、スマホでは押しやすい幅を確保する。
 * ------------------------------------------------------------------- */

.qlm-today-cta {
	text-align: center;
	margin: 0 0 1em;
}

.qlm-today-cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0 1.5em;
	border-radius: var( --qlm-radius-button );
	background: var( --qlm-color-secondary );
	color: var( --qlm-color-on-primary );
	text-decoration: none;
	font-weight: 700;
}

.qlm-today-cta-link:hover,
.qlm-today-cta-link:focus-visible {
	background: var( --qlm-color-primary );
	color: var( --qlm-color-on-primary );
}

@media ( min-width: 481px ) {
	.qlm-today-cta-link {
		width: 100%;
		max-width: 420px;
		min-width: 360px;
	}
}

/* ---------------------------------------------------------------------
 * X投稿リンク：10問テストCTAより優先度を一段下げ、テキストリンク程度にする。
 * ------------------------------------------------------------------- */

.qlm-today-x-link {
	text-align: center;
	margin: 0 0 0.4em;
	font-size: 0.95em;
}

.qlm-today-x-link a {
	color: var( --qlm-color-secondary );
	font-weight: 600;
	text-decoration: none;
}

.qlm-today-x-link a:hover,
.qlm-today-x-link a:focus-visible {
	text-decoration: underline;
}

/* カードごとの区切りは白カード自体の余白で十分なため、線としての区切りは表示しない。 */
.qlm-today-divider {
	display: none;
}

@media ( max-width: 480px ) {
	.wp-block-post-title {
		font-size: 1.5rem;
	}
}