/* menu-v8.css
 * Side menu modernization, scoped to site version 8.
 * Loaded via SITE_META_UPPER@v=8 record. At v<8 this file is not loaded.
 * Target: .container .menu-sub (shared by clinic / care / shinkyu / studio / sunnycafe).
 *
 * Section theming via :has() on the page header (header.clinic / .care / .shinkyu).
 */


/* ---------- default (clinic-blue) theme tokens ---------- */

.container .menu-sub {
	--menu-accent:            #317dab;
	--menu-accent-strong:     #1f5d80;
	--menu-accent-bg-soft:    rgba(49, 125, 171, 0.08);
	--menu-accent-bg-active:  rgba(49, 125, 171, 0.18);
	--menu-accent-border-sub: rgba(49, 125, 171, 0.18);

	font-size: 0.95rem;
}

/* Care = warm amber */
body:has(header.care) .container .menu-sub {
	--menu-accent:            #c97a14;
	--menu-accent-strong:     #8b5208;
	--menu-accent-bg-soft:    rgba(255, 190, 89, 0.18);
	--menu-accent-bg-active:  rgba(201, 122, 20, 0.28);
	--menu-accent-border-sub: rgba(201, 122, 20, 0.25);
}

/* Shinkyu = mint */
body:has(header.shinkyu) .container .menu-sub {
	--menu-accent:            #1a8050;
	--menu-accent-strong:     #115c39;
	--menu-accent-bg-soft:    rgba(87, 255, 175, 0.18);
	--menu-accent-bg-active:  rgba(26, 128, 80, 0.28);
	--menu-accent-border-sub: rgba(26, 128, 80, 0.25);
}


/* ---------- list reset ---------- */

.container .menu-sub ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.container .menu-sub ul li {
	background: none;
	padding: 0;
	margin: 0 0 2px 0;
	line-height: 1.4;
}


/* ---------- item rows (link + active span) ---------- */

.container .menu-sub ul li > a,
.container .menu-sub ul li > span {
	display: block;
	padding: 7px 10px 7px 14px;
	border-radius: 6px;
	border-left: 3px solid transparent;
	color: var(--menu-accent);
	text-decoration: none;
	line-height: 1.35;
	transform: translateX(0);
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
		padding-left 0.18s ease;
}

.container .menu-sub ul li > a:hover {
	background-color: var(--menu-accent-bg-soft);
	color: var(--menu-accent-strong);
	transform: translateX(3px);
	padding-left: 16px;
}

.container .menu-sub ul li > a:active {
	transform: translateX(3px) scale(0.97);
	transition-duration: 0.08s;
}

.container .menu-sub ul li > span.active {
	background: linear-gradient(
		90deg,
		var(--menu-accent-bg-active) 0%,
		var(--menu-accent-bg-soft) 100%);
	border-left: 4px solid var(--menu-accent);
	color: var(--menu-accent-strong);
	font-weight: 700;
	padding-left: 18px;
	position: relative;
}

.container .menu-sub ul li > span.active::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--menu-accent);
	transform: translateY(-50%);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}


/* ---------- nested (sub) items ---------- */

.container .menu-sub ul ul {
	margin: 2px 0 8px 14px;
	padding-left: 10px;
	border-left: 1px solid var(--menu-accent-border-sub);
	background: none;
}

.container .menu-sub ul ul li {
	background: none;
	padding: 0;
	margin: 0 0 1px 0;
	line-height: 1.35;
}

.container .menu-sub ul ul li > a,
.container .menu-sub ul ul li > span {
	padding: 4px 8px 4px 10px;
	font-size: 0.88em;
	border-radius: 4px;
	border-left: 2px solid transparent;
}

.container .menu-sub ul ul li > span.active {
	background: var(--menu-accent-bg-soft);
	border-left: 3px solid var(--menu-accent);
	padding-left: 14px;
}

.container .menu-sub ul ul li > span.active::before {
	width: 6px;
	height: 6px;
	left: -6px;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}


/* ---------- sticky wrapper ---------- */

.container .menu-sub .menu-sub-sticky {
	background: #ffffff;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
	padding: 14px 10px;
}


/* ---------- top pills (TOP / Section-TOP) ---------- */

.container .menu-sub .menu-sub-sticky > a:first-child,
.container .menu-sub .menu-sub-sticky > a:nth-child(3),
.container .menu-sub .menu-sub-sticky > span.active {
	display: inline-flex;
	align-items: center;
	background-image: none;
	background-color: var(--menu-accent);
	border: 1px solid var(--menu-accent);
	border-radius: 999px;
	padding: 3px 12px 3px 10px;
	margin: 0 4px 10px 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-decoration: none;
	transform: translateX(0);
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.2s ease;
}

.container .menu-sub .menu-sub-sticky > a:first-child::before,
.container .menu-sub .menu-sub-sticky > a:nth-child(3)::before,
.container .menu-sub .menu-sub-sticky > span.active::before {
	content: "\2190";
	display: inline-block;
	margin-right: 6px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.9em;
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.18s ease;
}

.container .menu-sub .menu-sub-sticky > a:first-child:hover,
.container .menu-sub .menu-sub-sticky > a:nth-child(3):hover {
	background-color: var(--menu-accent-strong);
	border-color: var(--menu-accent-strong);
	color: #ffffff;
	transform: translateX(-2px);
	box-shadow: 0 2px 8px var(--menu-accent-bg-active);
}

.container .menu-sub .menu-sub-sticky > a:first-child:hover::before,
.container .menu-sub .menu-sub-sticky > a:nth-child(3):hover::before {
	transform: translateX(-3px);
	color: #ffffff;
}

.container .menu-sub .menu-sub-sticky > a:first-child:active,
.container .menu-sub .menu-sub-sticky > a:nth-child(3):active {
	transform: translateX(-2px) scale(0.96);
	transition-duration: 0.08s;
}

/* Inline the two top pills by hiding the <br> between them */
.container .menu-sub .menu-sub-sticky > br {
	display: none;
}


/* ---------- 1st pill (site-wide TOP) overrides to neutral ----------
 * The 2nd pill (section TOP) keeps --menu-accent (clinic-blue / care-amber / shinkyu-mint).
 * Position-based selectors so this works whether the 1st child is <a> or <span class="active">.
 */

.container .menu-sub .menu-sub-sticky > a:first-child,
.container .menu-sub .menu-sub-sticky > span:first-child.active {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #ffffff;
}

.container .menu-sub .menu-sub-sticky > a:first-child:hover {
	background-color: #495057;
	border-color: #495057;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(108, 117, 125, 0.28);
}


/* ---------- mobile drawer refinement ---------- */

@media (max-width: 768px) {
	.container .menu-sub .menu-sub-sticky {
		border-radius: 0;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	}
}


/* ---------- summary table jump anchors ----------
 * Used in content summary tables (clinic-pediatric / clinic-vaccine etc.)
 * Circular icon button. Theme color follows header section class.
 * Note: --menu-accent vars are scoped to .menu-sub, so we hard-code per section.
 */

.summary-jump {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #317dab;
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color 0.2s ease,
		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.2s ease;
}

.summary-jump:hover,
.summary-jump:focus {
	background: #1f5d80;
	color: #ffffff;
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}

.summary-jump:active {
	transform: scale(0.96);
	transition-duration: 0.08s;
}

/* Care = warm amber */
body:has(header.care) .summary-jump {
	background: #c97a14;
}
body:has(header.care) .summary-jump:hover,
body:has(header.care) .summary-jump:focus {
	background: #8b5208;
}

/* Shinkyu = mint */
body:has(header.shinkyu) .summary-jump {
	background: #1a8050;
}
body:has(header.shinkyu) .summary-jump:hover,
body:has(header.shinkyu) .summary-jump:focus {
	background: #115c39;
}


/* ---------- content h3 padding tweak (v8) ----------
 * base.css indents h3 by 2rem (deeper than h2's 1rem).
 * Tone it down for a calmer hierarchy.
 */

.container h3 {
	padding-left: 1.25rem;
}

@media screen and (max-width: 767px) {
	.container h3 {
		padding-left: 0.8rem;
	}
}


/* ---------- content h4 restyle (v8) ----------
 * base.css gives h4 the same dashed underline as h3 with only 0.1rem size diff.
 * Restyle as a smaller, left-bar accent heading to make hierarchy obvious.
 */

.container h4 {
	font-weight: 600;
	font-size: 1.05rem;
	padding: 0.2rem 0.4rem 0.2rem 0.8rem;
	margin-top: 1.75rem;
	margin-bottom: 0.6rem;
	margin-left: 1.25rem;
	border-left: 3px solid #317dab;
	border-bottom: none;
}

/* Care theme */
body:has(header.care) .container h4 {
	border-left-color: #c97a14;
}

/* Shinkyu theme */
body:has(header.shinkyu) .container h4 {
	border-left-color: #1a8050;
}


/* ---------- reservation box (v8) ----------
 * Highlight phone reservation block in content.
 * Used in clinic-pediatric / clinic-vaccine.
 */

.reservation-box {
	background: rgba(49, 125, 171, 0.06);
	border-left: 4px solid #317dab;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}

.reservation-box .reservation-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-weight: 700;
	color: #1f5d80;
	font-size: 1.05rem;
}

.reservation-box .reservation-title::before {
	content: "\1F4DE"; /* 📞 */
	font-size: 1.1em;
}

.reservation-box .reservation-tel {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0.25rem 0 0.75rem;
}

.reservation-box .reservation-tel a {
	font-size: 1.6rem;
	font-weight: 700;
	color: #1f5d80;
	text-decoration: none;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.reservation-box .reservation-tel a:hover,
.reservation-box .reservation-tel a:focus {
	color: #317dab;
	text-decoration: underline;
}

.reservation-box .reservation-tel-label {
	color: #555;
	font-size: 0.9rem;
}

.reservation-box ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

.reservation-box ul li {
	margin: 0.25rem 0;
	color: #444;
}

/* Care theme */
body:has(header.care) .reservation-box {
	background: rgba(201, 122, 20, 0.07);
	border-left-color: #c97a14;
}
body:has(header.care) .reservation-box .reservation-title,
body:has(header.care) .reservation-box .reservation-tel a {
	color: #8b5208;
}
body:has(header.care) .reservation-box .reservation-tel a:hover,
body:has(header.care) .reservation-box .reservation-tel a:focus {
	color: #c97a14;
}

/* Shinkyu theme */
body:has(header.shinkyu) .reservation-box {
	background: rgba(26, 128, 80, 0.07);
	border-left-color: #1a8050;
}
body:has(header.shinkyu) .reservation-box .reservation-title,
body:has(header.shinkyu) .reservation-box .reservation-tel a {
	color: #115c39;
}
body:has(header.shinkyu) .reservation-box .reservation-tel a:hover,
body:has(header.shinkyu) .reservation-box .reservation-tel a:focus {
	color: #1a8050;
}

@media (max-width: 600px) {
	.reservation-box {
		padding: 1rem 1.1rem;
	}
	.reservation-box .reservation-tel a {
		font-size: 1.35rem;
	}
}