/*
Theme Name: Miranas Kokushi Theme
Author: Miranas
Description: 看護師国家試験対策塾「ミラナス」の無料模擬試験専用テーマです。
Version: 1.3.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miranas-kokushi-theme
*/

:root {
	--mq-color-navy-950: #30364b;
	--mq-color-navy-900: #30364b;
	--mq-color-navy-800: #3f4964;
	--mq-color-teal-700: #147b71;
	--mq-color-teal-600: #078781;
	--mq-color-teal-100: #dff4f1;
	--mq-color-teal-50: #effaf8;
	--mq-color-sky-50: #fffafd;
	--mq-color-surface: #fff;
	--mq-color-text: #30364b;
	--mq-color-muted: #666d84;
	--mq-color-border: #e7e3ec;
	--mq-theme-pink: #b74d7b;
	--mq-theme-pink-soft: #fff0f6;
	--mq-theme-blue: #567fa7;
	--mq-theme-blue-soft: #eef6fc;
	--mq-theme-mint: #147b71;
	--mq-theme-mint-soft: #eaf7f3;
	--mq-color-focus: #246bcc;
	--mq-color-error: #a62b29;
	--mq-color-error-bg: #fff1f0;
	--mq-color-success: #17663d;
	--mq-color-success-bg: #eaf7ef;
	--mq-radius-sm: .625rem;
	--mq-radius-md: 1rem;
	--mq-radius-lg: 1.5rem;
	--mq-shadow-card: 0 8px 28px #4a355509;
	--mq-content-width: 68.75rem;
	--mq-reading-width: 48rem;
	--mq-control-size: 2.75rem;
	--mq-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0; color: var(--mq-color-text); background: #fffafd;
	font-family: var(--mq-font-sans); font-size: 1rem; font-weight: 500;
	line-height: 1.75; overflow-wrap: anywhere;
}
body.admin-bar { min-height: calc(100vh - 32px); }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: #7f3d68; text-decoration-thickness: .1em; text-underline-offset: .2em; }
a:hover { color: var(--mq-color-navy-900); }
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--mq-color-focus); outline-offset: 3px;
}
[hidden] { display: none !important; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: fixed; top: 12px; left: 12px; z-index: 100000; width: auto; height: auto;
	padding: 12px 16px; margin: 0; overflow: visible; clip: auto; white-space: normal;
	background: #fff; color: var(--mq-color-text); border: 2px solid currentColor; border-radius: 8px;
}
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }
.site-container { width: min(100% - 40px, var(--mq-content-width)); margin-inline: auto; }

/* The compact header remains useful on ordinary WordPress pages. */
.site-header { position: relative; z-index: 30; background: #fffafd; }
.site-header__inner { display: flex; align-items: center; gap: 16px; min-height: 88px; padding-block: 16px; }
.site-branding { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.mq-brand-logo { display: flex; align-items: center; width: 178px; height: 48px; overflow: hidden; }
.mq-brand-logo img { width: 178px; max-width: none; height: auto; flex-shrink: 0; mix-blend-mode: multiply; }
.custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 178px; }
.custom-logo { width: auto; height: auto; max-height: 48px; object-fit: contain; }
.mq-header-subject { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.primary-navigation { padding-block: 0 12px; }
.primary-navigation ul { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.primary-navigation a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; }
.primary-navigation .current-menu-item > a { color: var(--mq-theme-pink); }

/* Native details works without JavaScript and does not touch quiz answers. */
.mq-theme-help { position: relative; margin-left: auto; flex-shrink: 0; }
.mq-theme-help > summary {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	padding: 0; color: #756b7b; background: transparent; border: 2px solid #8a8090;
	border-radius: 50%; font-size: 30px; font-weight: 500; line-height: 1; cursor: pointer; list-style: none;
}
.mq-theme-help > summary::-webkit-details-marker { display: none; }
.mq-theme-help[open] > summary { color: var(--mq-theme-pink); border-color: currentColor; background: var(--mq-theme-pink-soft); }
.mq-theme-help__panel {
	position: absolute; top: calc(100% + 12px); right: 0; z-index: 40;
	width: min(390px, calc(100vw - 40px)); max-height: min(70vh, 620px); overflow: auto;
	padding: 22px; border: 1px solid var(--mq-color-border); border-radius: 18px;
	background: #fff; box-shadow: 0 12px 40px #3b294b20; color: var(--mq-color-text);
}
.mq-theme-help__panel h2 { margin: 0; font-size: 20px; line-height: 1.5; }
.mq-theme-help__panel h3 { margin: 18px 0 0; font-size: 16px; line-height: 1.5; }
.mq-theme-help__panel p, .mq-theme-help__panel ol { margin: 10px 0 0; font-size: 14px; line-height: 1.85; }
.mq-theme-help__panel ol { padding-left: 1.5em; }
.mq-theme-help__panel li + li { margin-top: 7px; }
.mq-theme-help__panel .mq-theme-help__close-note { color: var(--mq-color-muted); font-size: 12px; }

/* Home is a short welcome, followed immediately by the plugin's start card. */
.mq-home-hero { background: transparent; }
.mq-home-hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; min-height: 255px; padding-block: 20px 0; }
.mq-home-hero__copy { position: relative; z-index: 1; min-width: 0; padding-left: 12px; }
.mq-home-hero__copy h1 { margin: 0; font-size: clamp(30px, 4vw, 43px); line-height: 1.45; letter-spacing: .06em; font-weight: 800; }
.mq-home-hero__copy p { margin: 8px 0 0; font-size: clamp(17px, 2vw, 22px); line-height: 1.7; font-weight: 700; letter-spacing: .025em; }
.mq-home-copy--desktop { display: none; }
.mq-home-mascots { display: flex; align-items: end; justify-content: center; min-width: 0; width: 100%; max-width: 380px; margin-left: auto; background: #fffafd; isolation: isolate; }
.mq-home-mascot { flex: 0 0 66%; width: 66%; max-width: none; height: auto; aspect-ratio: 1; object-fit: contain; }
.mq-home-mascot--mirai { mix-blend-mode: multiply; }
.mq-home-mascot--kanata { margin-left: -32%; }
.quiz-app-section { position: relative; min-height: 12rem; padding-block: 8px 40px; }
.miranas-quiz-host { min-height: 12rem; }
#miranas-home, #miranas-quiz { scroll-margin-top: 20px; }
.mq-quiz-active .quiz-app-section { min-height: 70vh; padding-top: 12px; }
.quiz-unavailable { padding: 24px; border: 1px solid #ead4e0; border-radius: 20px; background: #fff; text-align: center; }
.quiz-unavailable h2 { margin: 0; font-size: 21px; line-height: 1.5; }
.quiz-unavailable p { margin: 10px 0 0; color: var(--mq-color-muted); }
.quiz-unavailable__admin-note { padding-top: 12px; border-top: 1px solid var(--mq-color-border); font-size: 14px; }

/* Standard page and blog content keep their readable container. */
.content-shell { width: min(100% - 40px, var(--mq-reading-width)); padding-block: 36px 56px; margin-inline: auto; }
.entry-card, .empty-state { padding: clamp(20px, 4vw, 36px); margin-bottom: 24px; border: 1px solid var(--mq-color-border); border-radius: 18px; background: #fff; }
.entry-title { margin: 0; color: var(--mq-color-navy-900); font-size: clamp(24px, 4vw, 36px); line-height: 1.5; }
.entry-title a { color: inherit; }
.entry-content { margin-top: 20px; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content :where(p, li) { line-height: 1.9; }
.entry-content :where(h2, h3, h4) { color: var(--mq-color-navy-900); line-height: 1.5; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--mq-color-border); border-radius: 10px; background: #fff; }
.navigation.pagination .current { background: var(--mq-theme-pink); color: #fff; border-color: var(--mq-theme-pink); }
.site-footer { flex-shrink: 0; border-top: 1px solid var(--mq-color-border); color: var(--mq-color-muted); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; min-height: 72px; padding-block: 18px; }
.site-footer p { margin: 0; font-size: 12px; }
.site-footer p > span { display: block; font-size: 11px; }

/* Only the home/result states expose mobile navigation. */
.mq-bottom-nav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--mq-color-border); background: #fffffffa; box-shadow: 0 -4px 16px #56435c05;
}
.mq-bottom-nav button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	min-width: 0; min-height: 57px; padding: 1px 8px; border: 0; border-radius: 12px;
	background: transparent; color: #696b85; font-size: 12px; font-weight: 700; cursor: pointer;
}
.mq-bottom-nav svg { display: block; width: 29px; height: 29px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mq-bottom-nav button[aria-current="page"] { color: var(--mq-theme-pink); background: #fff0f6; }
.mq-bottom-nav button[aria-expanded="true"] { color: var(--mq-theme-pink); }

@media (max-width: 52rem) {
	body.admin-bar { min-height: calc(100vh - 46px); }
	.site-container { width: min(100% - 32px, var(--mq-content-width)); }
	.site-header__inner { min-height: 72px; gap: 12px; padding-block: 12px; }
	.mq-brand-logo { width: 146px; height: 42px; }
	.mq-brand-logo img { width: 146px; }
	.custom-logo-link { max-width: 146px; }
	.custom-logo { max-height: 42px; }
	.mq-header-subject { font-size: 15px; }
	.mq-theme-help > summary { width: 39px; height: 39px; font-size: 27px; }
	.mq-home-hero__grid { grid-template-columns: .85fr 1.15fr; gap: 0; min-height: 160px; padding-block: 5px 0; }
	.mq-home-hero__copy { padding-left: 3px; }
	.mq-home-hero__copy h1 { font-size: clamp(27px, 6vw, 34px); }
	.mq-home-hero__copy p { margin-top: 6px; font-size: 16px; line-height: 1.7; }
	.mq-home-mascots { max-width: 250px; }
	.quiz-app-section { padding-top: 0; padding-bottom: 28px; }
	.mq-quiz-active .quiz-app-section { padding-top: 8px; }
	.mq-bottom-nav { display: grid; }
	.mq-has-bottom-nav .site { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
	.site-footer__inner { min-height: 64px; gap: 5px; padding-block: 14px; }
	.site-footer p { font-size: 10px; }
	.site-footer p > span { display: none; }
}
@media (max-width: 360px) {
	.site-container { width: calc(100% - 24px); }
	.site-header__inner { gap: 9px; }
	.mq-brand-logo { width: 126px; }
	.mq-brand-logo img { width: 126px; }
	.custom-logo-link { max-width: 126px; }
	.mq-header-subject { font-size: 13px; }
	.mq-theme-help > summary { width: 36px; height: 36px; font-size: 25px; }
	.mq-home-hero__grid { min-height: 140px; }
	.mq-home-hero__copy h1 { font-size: 27px; }
	.mq-home-hero__copy p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
	.site-header, .mq-theme-help__panel, .mq-bottom-nav, .quiz-unavailable, .entry-card, .empty-state { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
	.mq-bottom-nav button[aria-current="page"] { color: Highlight; border: 1px solid Highlight; background: Canvas; }
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}

/* Desktop home only. All existing layouts below 1024px remain unchanged. */
@media (min-width: 64rem) {
	.mq-home-copy--mobile { display: none; }
	.mq-home-copy--desktop { display: inline; }
	body[data-mq-theme-screen="start"] .mq-home {
		display: grid;
		grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr);
		align-items: start;
		align-content: start;
		gap: 24px 48px;
		width: min(100% - 64px, var(--mq-content-width));
		margin-inline: auto;
		padding: 30px 0 48px;
	}
	body[data-mq-theme-screen="start"] .mq-home-hero { grid-column: 1; grid-row: 1; min-width: 0; align-self: stretch; }
	body[data-mq-theme-screen="start"] .mq-home-hero__grid {
		display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
		gap: 22px; width: 100%; min-height: 0; height: 100%; padding: 8px 0 12px;
	}
	body[data-mq-theme-screen="start"] .mq-home-hero__copy { padding: 0; width: 100%; }
	body[data-mq-theme-screen="start"] .mq-home-hero__copy h1 { font-size: clamp(29px, 2.6vw, 38px); line-height: 1.5; letter-spacing: .025em; }
	body[data-mq-theme-screen="start"] .mq-home-hero__copy p { font-size: 17px; font-weight: 500; margin-top: 18px; line-height: 1.9; color: var(--mq-color-muted); }
	body[data-mq-theme-screen="start"] .mq-home-mascots { width: 100%; max-width: 310px; margin: 0 auto; }
	/* Let the plugin keep ownership of its DOM and event handlers while arranging its start panels. */
	body[data-mq-theme-screen="start"] .quiz-app-section,
	body[data-mq-theme-screen="start"] .quiz-app-section > .site-container,
	body[data-mq-theme-screen="start"] .miranas-quiz-host,
	body[data-mq-theme-screen="start"] .mq-app[data-mq-screen="start"],
	body[data-mq-theme-screen="start"] .mq-start { display: contents; }
	body[data-mq-theme-screen="start"] .mq-start-card,
	body[data-mq-theme-screen="start"] .mq-app > .mq-panel { grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 26px; }
	body[data-mq-theme-screen="start"] .mq-start-contents { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 10px 0 0; }
	body[data-mq-theme-screen="start"] .mq-start-contents dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 16px; }
	body[data-mq-theme-screen="start"] .mq-start-contents dl > div { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 18px; }
	body[data-mq-theme-screen="start"] .mq-start-contents dl > div + div { border-top: 0; border-left: 1px solid var(--mq-color-border); }
	body[data-mq-theme-screen="start"] .mq-start-contents dt { font-size: 16px; }
	body[data-mq-theme-screen="start"] .mq-start-contents dd { width: 100%; justify-content: space-between; padding-left: 48px; }
	body[data-mq-theme-screen="start"] .mq-start-contents dd strong { font-size: 20px; }
	body[data-mq-theme-screen="start"] .mq-start-contents .mq-submit-note { margin: 16px 0 0; }
	body[data-mq-theme-screen="start"] .mq-scoring-guide { grid-column: 1 / -1; grid-row: 3; width: 100%; margin: 0; }
	/* Notices must stay in document order, never overlap the introduction or form. */
	body[data-mq-theme-screen="start"] .mq-home:has(.mq-app > .mq-alert, .mq-connectivity:not([hidden])) { display: block; }
	body[data-mq-theme-screen="start"] .mq-home:has(.mq-app > .mq-alert, .mq-connectivity:not([hidden])) .mq-home-hero { margin-bottom: 24px; }
	body[data-mq-theme-screen="start"] .mq-home:has(.mq-app > .mq-alert, .mq-connectivity:not([hidden])) .mq-home-hero__grid { flex-direction: row; align-items: center; }
}