/*
################

PME 2026-6th CSS File

################

1. Tag based CSS
=============================================================
*/

/* 1. Tag based CSS*/
html {
  scroll-behavior: smooth;
}

:root {
	--brand-teal: #007681;
	--brand-purple: #5c2d91;
	--brand-hover-teal: #005f68;
	--bg-light: #f4f7f6;
	--bg-white: #ffffff;
	--breadcrumb-bg: #fa5a27;
	--rc-teal: #007681;
	--rc-teal-light: #e6f1f2;
	--rc-purple: #5c2d91;
	--rc-gray: #f8f9fa;
}

body {
	background-color: var(--bg-white);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-logo-img-more {
    max-width: 180px;
    margin-bottom: 10px;
}

/* 頂部工具列 */
.utility-nav {
	background-color: #fff;
	border-bottom: 1px solid #dee2e6;
	font-size: 0.85rem;
}
.utility-nav a {
	color: #6c757d;
	text-decoration: none;
	transition: color 0.2s;
}
.utility-nav a:hover {
	color: var(--brand-teal);
}

/* 8 stages */
.entry-content a {
	
}
.entry-content a:hover, 
.entry-content a:focus {
	box-shadow: none;
}
.entry-content:before,
.entry-content:after {
	content: "";
	display: table;
}
.entry-content:after {
	clear: both;
}
.entry-content:before, 
.entry-content:after {
	content: "";
	display: table;
}

.entry-content:after {
	clear: both;
}
.entry-content {
	border-color: #d1d1d1;
	/*margin-right: 7.6923%;*/
	/*margin-left: 7.6923%;*/
}
.ds-icon-gp{
	justify-content: space-between;
	z-index:99;
}

.ds-icon-gp .row{
	margin:0;
}
.ds-icon {
	text-align: center;
	margin-bottom: 3rem;
}
.ds-icon a {
	text-decoration: none;
	box-shadow: none;
}

.ds-icon a p{
	color:black;
}

.ds-icon p {
	font-size: 1.2rem;
	margin: 0.8rem 0;
}
.hvr-float-rotate-shadow {
	vertical-align: middle;
	position: relative;
	transition-duration: 0.3s;
	transition-property: transform;
	background: #f9f9f9;
	padding: 1rem;
	box-shadow: 3px 3px 6px rgba(204, 204, 204, 0.4);
	height:100%;
	border-radius: 10px;
}
.hvr-float-rotate-shadow:hover {
	transform: translateY(-.8rem) rotate(-5deg);
}
.img-thumbnail{
	border-radius: 10px;
}

.text-secondary {
	color: rgba(93, 106, 119, 1) !important;
}

/* 主導覽列 */
.main-navbar {
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	padding: 0;
}

.navbar-brand .brand-main {
	color: var(--brand-teal);
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1;
	display: block;
}
.navbar-brand .brand-sub {
	color: var(--brand-purple);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
}

/* 底部Site Info */
.site-footer {
	padding: 0 3% 1.75em;
}

.site-info {
	color: #ffffff;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1.6153846154;
}

.site-info a {
	color: #ffffff;
}

.site-info a:hover,
.site-info a:focus {
	color: #007acc;
}

.site-footer .site-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
}

.site-footer .site-title:after {
	content: "\002f";
	display: inline-block;
	font-family: Montserrat, sans-serif;
	opacity: 0.7;
	padding: 0 0.307692308em 0 0.538461538em;
}

/* Footer */
.footer-top-background {
	width: 100%;
	height: 9rem;
	margin-top: 3rem;
	background: transparent 0 0 repeat-x;
	background-size: cover;
}
footer.site-info {
	color: #ffffff;
	margin: 0;
	background: #fa5a27 0 0 repeat-x;
	position: relative;
}
#copyright.site-inner {
	background: transparent;
	box-shadow: 0 0 0 0;
}
#copyright {
	width: 100%;
	margin: 0 auto;
	padding: 1em 0 3.8em;
	position: relative;
}
#copyright>.cpy-left {
	float: left;
	width: 70%;
}
#copyright p {
	margin: 0;
}
#copyright ul {
	list-style: none;
	margin: 0;
}
#copyright li {
	display: inline-block;
	margin-right: 0.5rem;
}
#copyright a:link, #copyright a:active, #copyright a:visited {
	/*color: #fff;*/
	text-decoration: underline;
	padding: .1rem .2rem;
}

#wcag-icon {
	float: right;
}

.ds-intro-image {
	text-align: center;
	margin-bottom: 1rem;
}

/* 選單項目樣式 */
.nav-link {
	color: #495057 !important;
	font-weight: 700;
	padding: 1.5rem 1rem !important;
	border-bottom: 4px solid transparent;
	transition: all 0.2s;
	display: flex;
	justify-content: space-between;
	align-items: center;        }

/* 桌面版懸停觸發機制與多級選單核心 CSS */
@media (min-width: 992px) {
	/* 第一層懸停 */
	.nav-item:hover > .nav-link {
		/* text-shadow: 0 0 5px black; */
		color: #fff !important;
		/* text-decoration-line: underline; */
		/* text-underline-offset: 10px; */
		background-color: var(--breadcrumb-bg);
	}
	
	.nav-item.dropdown:hover > .dropdown-menu {
		display: block;
		margin-top: 0;
	}
	
	.nav-item.dropdown:hover > .nav-link {
		color: var(--brand-teal);
		/* border-bottom-color: var(--brand-teal); */
	}

	/* 第二層子選單懸停 (Nested) */
	.dropdown-menu .dropdown-submenu {
		position: relative;
	}

	.dropdown-menu .dropdown-submenu > .dropdown-menu {
		top: 0;
		/*left: 100%; /* 出現在右側 */
		right: 100%; /* 出現在左側 */
		margin-top: -1px;
		display: none;
		/* border-top: 3px solid var(--breadcrumb-bg); */ /* 不同顏色區分層級 */
	}

	.dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
		display: block;
	}

	/* 箭頭指示 */
	/*.dropdown-toggle-side::after {
		content: "\f054"; / FontAwesome Chevron-right /
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		float: right;
		border: none;
		font-size: 0.7rem;
		margin-top: 5px;
	}*/
	
	/* 箭頭指示 */
	.dropdown-toggle-side::before {
		content: "\f053"; /* FontAwesome Chevron-right */
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		float: left;
		border: none;
		font-size: 0.7rem;
		margin-top: 5px;
		margin-right: 15px;
	}
}

/* 行動版多級選單 CSS (小於 992px) */
@media (max-width: 991.98px) {
	.nav-link {
		padding: 1rem !important;
		border-bottom: 1px solid #eee;
	}
	
	.nav-item:hover > .nav-link {
		/* text-shadow: 0 0 5px black; */
		color: #fff !important;
		/* text-decoration-line: underline; */
		/* text-underline-offset: 10px; */
		background-color: var(--breadcrumb-bg);
	}
	
	.nav-link.show {
		color: #fff !important;
		background-color: var(--breadcrumb-bg);
	}
	
	/* 第二層選單縮進 */
	.dropdown-menu {
		border: none;
		box-shadow: none;
		background-color: #f8f9fa;
		padding-left: 1rem;
		margin: 0;
		display: none; /* 預設隱藏，由 JS 控制 */
	}

	.dropdown-menu.show {
		display: block;
	}

	/* 第三層選單縮進 */
	.dropdown-submenu .dropdown-menu {
		background-color: #eef2f3;
		padding-left: 1rem;
	}

	/* 旋轉箭頭動畫 */
	.dropdown-toggle::after {
		transition: transform 0.3s;
	}
	.dropdown-toggle.show::after {
		transform: rotate(180deg);
	}
	
	.dropdown-toggle-side {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dropdown-toggle-side::after {
		content: "\f078"; /* Chevron Down */
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		border: none;
		font-size: 0.7rem;
		transition: transform 0.3s;
	}
	.dropdown-toggle-side.active::after {
		transform: rotate(180deg);
	}
	.navbar-toggler:not(.collapsed) {
		background-color: var(--rc-teal-light);
		color: #ffffff;
	}
}

/* 下拉選單美化 */
.dropdown-menu {
	border: none;
	/* border-top: 3px solid var(--brand-teal); */
	/* border-top: 3px solid var(--breadcrumb-bg); */
	border-radius: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-item {
	padding: 0.6rem 1.5rem;
	font-weight: 500;
	min-width: 200px;
}
.dropdown-item:hover {
	/* background-color: #f0f7f8; */
	background-color: var(--breadcrumb-bg);
	/* color: var(--brand-teal); */
	color: #fff;
}
.dropdown-item.active {
	/* background-color: #f0f7f8; */
	background-color: var(--breadcrumb-bg);
	/* color: var(--brand-teal); */
	color: #fff;
}

/* 麵包屑 */
.breadcrumb-container {
	/* background-color: #e9ecef; */
	background-color: var(--breadcrumb-bg);
	padding: 0.75rem 0;
}
.breadcrumb-item, .breadcrumb-item.active {
	color: rgba(255, 255, 255, 0.9) !important;
	font-weight: 500;
}
.breadcrumb-item a {
	/* color: var(--brand-teal); */
	/* text-decoration: none; */
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}
.breadcrumb-item a:hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}
/* 調整麵包屑分隔符號顏色*/
.breadcrumb-item + .breadcrumb-item::before {
	color: rgba(255, 255, 255, 0.6);
}

/* 自定義 Accordion 樣式 */
.custom-accordion .accordion-item {
	border: none;
	margin-bottom: 15px;
	border-radius: 12px !important;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	transition: transform 0.2s ease;
}

.custom-accordion .accordion-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.custom-accordion .accordion-button {
	padding: 20px 25px;
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--rc-text);
	background-color: #fff;
	border: none;
}

.custom-accordion .accordion-button:not(.collapsed) {
	background-color: var(--rc-teal-light);
	color: var(--rc-teal);
	box-shadow: none;
}

/* 修改 Bootstrap 預設圖標顏色 */
.custom-accordion .accordion-button::after {
	background-size: 1.25rem;
	transition: transform 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
	filter: sepia(100%) hue-rotate(140deg) saturate(300%);
}

.custom-accordion .accordion-body {
	padding: 25px;
	background-color: #fff;
	line-height: 1.7;
	color: #555;
}

.custom-accordion .accordion-body ul li {
	margin-bottom: 10px;
}

.highlight-box {
	background-color: #fdf6e9;
	border-left: 4px solid #f39200;
	padding: 15px;
	margin-top: 15px;
	border-radius: 0 8px 8px 0;
}

/* 多格Nav */
.topic-tiles{
	padding:26px 0;
	position:relative;
	width:100%
}
.topic-tiles__title{
	font-size:20px;
	font-weight:400;
	line-height:1;
	margin:0 0 18px;
	text-align:center;
	width:100%
}
.topic-tiles__wrapper{
	display:flex;
	flex-flow:row wrap;
	margin:28px -6px 24px
}
.topic-tiles__wrapper:after{
	content:"";
	flex:auto
}
.topic-tiles__item{
	background-color:#e1f0f7;
	border-radius:5px;
	border:1px solid transparent;
	color:#000;
	flex-basis:calc(50% - 0.5em);
	font-size:14px;
	font-weight:700;
	line-height:16px;
	margin:5px;
	max-width:calc(50% - 10px);
	padding:22px 15px 24px;
	text-align:center;
	text-decoration:none
}
.topic-tiles__item:focus,.topic-tiles__item:hover{
	background-color:#fff;
	border-color:#0277bd;
	box-shadow:0 0 10px 0 rgba(0,0,0,.2);
	color:#000
}
.topic-tiles__details{
	height:100%;
	display:flex;
	flex-flow:column;
	align-items:center
}
.topic-tiles__details-title{
	width:100%
}
.topic-tiles__details-icon{
	display:flex;
	height:38px;
	margin-bottom:14px
}
.topic-tiles__details-icon img{
	align-self:center;
	max-height:38px
}
@media screen and (min-width:752px){
	.topic-tiles{
		padding:34px 0 40px
	}
	.topic-tiles:after{
		content:"";
		position:absolute;
		width:100vw;
		border-bottom:1px solid #cfcfcf;
		bottom:0;
		left:50%;
		transform:translateX(-50%)
	}
	.topic-tiles__wrapper{
		margin-top:32px;
		margin-bottom:25px
	}
	.topic-tiles__title{
		font-size:40px;
		font-weight:300
	}
	.topic-tiles__item{
		flex-basis:calc(25% - 12px);
		font-size:17px;
		font-weight:700;
		line-height:20px;
		margin:6px;
		max-width:calc(25% - 12px)
	}
	.topic-tiles__details-icon{
		height:59px;
		margin-bottom:18px
	}
	.topic-tiles__details-icon img{
		max-height:58px
	}
}
@media screen and (min-width:1200px){
	.topic-tiles{
		padding:55px 0
	}
	.topic-tiles:after{
		border-bottom-width:2px
	}
	.topic-tiles__title{
		font-size:50px;
		margin:0 0 25px
	}
	.topic-tiles__wrapper{
		margin:52px -10px 36px
	}
	.topic-tiles__item{
		/* flex-basis:calc(16.66% - 20px); */
		flex-basis:calc(25% - 20px);
		margin:10px;
		/* max-width:calc(16.66% - 20px); */
		max-width:calc(25% - 20px);
		padding:25px 15px 35px
	}
	.topic-tiles__details-icon{
		height:64px
	}
	.topic-tiles__details-icon img{
		max-height:64px
	}
}
/* --- 回到頂部按鈕樣式 --- */
#backToTop {
	position: fixed;
	bottom: 90px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-color: var(--brand-teal);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 1000;
}

#backToTop.show {
	opacity: 1;
	visibility: visible;
}

#backToTop:hover {
	background-color: #e1f0f7;
	color: #000;
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
 @media (max-width: 768px) { /* 窄瑩幕時回到頁頂變細 */
	#backToTop {
		bottom: 90px;
		right: 20px;
		width: 45px;
		height: 45px;
		font-size: 18px;
	}
}

/* --- Quiz Print Cert -- */
.press-to-print {
	cursor: pointer;
}
.print-cert-wrap {
	width: 50%;
	margin: 1rem 0 0 2rem;
}
#printCert {
	display: none;
}
        
        
/* Quiz Container */
.quiz-container {
  background: var(--bg-white);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  padding: 2.5rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

.quiz-header {
  border-bottom: 2px solid var(--bg-light);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.quiz-title {
  color: var(--brand-purple);
  font-weight: 700;
}

/* Questions & Options */
.question-card {
  display: none;
}

.question-card.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.question-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-purple);
  margin-bottom: 1.5rem;
}

.option-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.option-btn {
  background-color: var(--bg-light);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  text-align: left;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-dark);
  font-weight: 500;
}

.option-btn:hover {
  background-color: #e8eceb;
  border-color: var(--brand-teal);
}

/* 答題後鎖定選項 */
.option-container.answered .option-btn {
  pointer-events: none;
  cursor: default;
}

/* 選中與正確/錯誤反饋樣式 */
.option-btn.selected-wrong {
  background-color: #f8d7da !important;
  color: #842029 !important;
  border-color: #f5c2c7 !important;
}

.option-btn.correct-reveal {
  background-color: #d1e7dd !important;
  color: #0f5132 !important;
  border-color: #badbcc !important;
  font-weight: bold;
}

/* 反饋盒子 */
.feedback-box {
  animation: fadeIn 0.4s ease;
  border-radius: 10px;
  font-weight: 500;
}

/* Progress Bar */
.progress {
  height: 8px;
  background-color: #e9ecef;
  border-radius: 10px;
  margin-bottom: 2rem;
}

.progress-bar {
  background-color: var(--brand-teal);
  border-radius: 10px;
  transition: width 0.4s ease;
}

/* Navigation Buttons */
.nav-buttons {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.btn-pme-primary {
  background-color: var(--brand-teal);
  color: white;
  border: none;
  padding: 0.75rem 3rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.btn-pme-primary:hover {
  background-color: var(--brand-hover-teal);
  color: white;
  transform: translateY(-2px);
}

/* Result Section */
.result-section {
  display: none;
  text-align: center;
  animation: fadeIn 0.8s ease;
}

.result-section.active {
  display: block;
}

.score-display {
  font-size: 4rem;
  font-weight: 800;
  color: var(--brand-purple);
  margin: 1rem 0;
}

/* 證書點擊列印樣式 */
.certificate-container {
  margin-top: 2rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: inline-block;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificate-container:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.certificate-img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

.print-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.certificate-container:hover .print-overlay {
  opacity: 1;
}

.print-overlay i {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.print-overlay span {
  font-size: 1.2rem;
  font-weight: 600;
}

/* =============================================================
   跨平台/iOS Safari 列印專用 CSS 媒介配置
   ============================================================= */
@media screen {
    #printSection {
        display: none !important; /* 螢幕檢視時絕對隱藏列印區域 */
    }
}

@media print {
    /* 1. 隱藏原本網頁中除了列印區以外的所有元素 */
    body > *:not(#printSection) {
        display: none !important;
    }
    
    /* 2. 讓列印區塊以最高層級、滿版、無邊界方式顯示 */
    html, body {
        background-color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
    }
    
    #printSection {
        display: flex !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    #printSection img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        page-break-inside: avoid !important;
    }
    
    /* 3. 強制預設為橫向列印，符合一般證書樣式 */
    @page { 
        size: landscape; 
        margin: 0; 
    }
}


/* --- [Old] Quiz Print Cert -- */
.press-to-print {
	cursor: pointer;
}
.print-cert-wrap {
	width: 50%;
	margin: 1rem 0 0 2rem;
}
#printCert {
	display: none;
}