/*
 * 只在前台載入：固定導覽列、輪播。
 */

/* ---------- 導覽列 ---------- */

.msc-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	min-height: 56px;
	padding: 0 16px;
	background-color: transparent;
	transition: background-color 0.3s;
}

/* 頁首是固定定位，main 與頁尾不需要區塊間距。 */
.wp-site-blocks > .msc-main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

body.msc-scrolled .msc-header,
body.msc-no-hero .msc-header {
	background-color: #1b1b1b;
}

body.msc-no-hero .msc-main {
	padding-top: 56px;
}

.msc-site-title {
	color: #fff;
	font-family: var(--wp--preset--font-family--quicksand);
	font-size: 18pt;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
	padding: 16px 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.msc-site-title a {
	color: inherit;
	text-decoration: none;
}

.msc-nav {
	font-family: var(--wp--preset--font-family--source-sans);
	font-size: 11pt;
	line-height: 1.42;
}

/* 核心導覽區塊的樣式較晚載入，選擇器要加上 .msc-header 才蓋得過。 */
.msc-header .msc-nav .wp-block-navigation__container {
	gap: 2px;
}

.msc-header .msc-nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.87);
	padding: 10px 12px;
	text-decoration: none;
}

.msc-header .msc-nav .wp-block-navigation-item__content:hover,
.msc-header .msc-nav .current-menu-item > .wp-block-navigation-item__content {
	color: #fff;
}

.msc-header .msc-nav .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

.msc-header .msc-nav .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* 手機版展開的選單 */
.msc-header .msc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 14pt;
}

@media (max-width: 767px) {
	.msc-site-title { font-size: 17pt; }
}

/* 手機版：漢堡選單在網站名稱左邊（同原站） */
@media (max-width: 599px) {
	.msc-header.wp-block-group {
		justify-content: flex-start;
		padding-left: 4px;
	}
	.msc-header .msc-nav {
		order: -1;
	}
}

@media (max-width: 479px) {
	.msc-site-title { font-size: 15pt; }
}

/* ---------- 輪播（圖庫區塊選「輪播 Carousel」樣式） ---------- */

/* 原站：圖片區 562×363，下方 35px 後是 10px 圓點列，整體比例 1.38:1。 */
.wp-block-gallery.is-style-msc-carousel.msc-carousel-ready {
	display: block;
	gap: 0;
}

.msc-carousel-stage {
	position: relative;
	aspect-ratio: 562 / 363;
	overflow: hidden;
}

.msc-carousel-stage > figure.wp-block-image {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 0.6s;
}

.msc-carousel-stage > figure.wp-block-image.is-active {
	opacity: 1;
	z-index: 1;
}

.msc-carousel-stage > figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* 左右箭頭：滑鼠移到圖片上才出現 */
.msc-carousel-btn {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.2s;
}

.msc-carousel-stage:hover .msc-carousel-btn,
.msc-carousel-btn:focus-visible {
	opacity: 1;
}

.msc-carousel-btn svg {
	width: 32px;
	height: 32px;
}

.msc-carousel-prev { left: 12px; }
.msc-carousel-next { right: 12px; }

.msc-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-top: 35px; /* 用 padding：圖庫的版面規則會把子元素的 margin 歸零 */
}

.msc-carousel-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c7c7c7;
	cursor: pointer;
}

.msc-carousel-dots button.is-active {
	background: #303033;
}

/* 觸控裝置沒有滑鼠移入，箭頭一直顯示 */
@media (hover: none) {
	.msc-carousel-btn { opacity: 1; }
}