/**
 * 響應式樣式 (RWD)
 * @package mytheme
 */

/* 大螢幕設備 (max-width: 1440px) */
@media (max-width: 1440px) {
	.container {
		max-width: 95%;
		margin: 0 auto;
		justify-items: center;
	}

	/* 調整容器寬度為適應1440px */
	.section-content,
	.services-grid,
	.features-grid,
	.articles-grid {
		max-width: 95%;
		margin: 0 auto;
	}
}

/* 平板設備 (max-width: 1024px) */
@media (max-width: 1024px) {
	body {
		padding-top: 4.25rem;
	}

	.header-container {
		padding: 0;
		justify-content: space-between;
	}

	/* 平板版 - 隱藏電腦版菜單 */
	.site-navigation {
		display: none;
	}

	/* 平板版 - 顯示菜單按鈕 */
	.menu-toggle {
		background-color: #FFAB36;
		color: #FFF;
		position: absolute;
		right: 0;
		display: flex !important;
		width: 5.75rem;
		height: 100%;
		padding: 0.75rem 0.625rem;
		gap: var(--spacing-xs);
		justify-content: center;
		align-items: center;
	}

	.hamburger-icon {
		color: #FFF;
		width: 1.75rem;
		height: 1.5625rem;
	}

	/* 平板版側滑菜單顯示 */
	.slide-menu-overlay {
		display: block;
	}

	.slide-menu {
		display: block;
		max-width: 138px;
	}

	.banner-section {
		background-attachment: scroll;
	}

	.banner-title {
		font-size: var(--font-size-3xl);
	}

	.banner-content {
		padding: var(--spacing-xl);
	}

	.section-title {
		font-size: 2.25rem;
		width: 20rem;
		height: 4.688rem;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
		background-position: center bottom;
		background-size: contain;
	}

	.section-title::after {
		position: absolute;
		bottom: -1rem;
		right: -2.9375rem;
		width: 4.8125rem;
		height: 6.8125rem;
	}

	.articles-grid {
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
		gap: var(--spacing-md);
	}

	.contact-wrapper {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}

	.contact-map-compact {
		height: 18.75rem;
	}

	.features-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	section {
		padding: 0;
	}

	.section-header {
		margin-bottom: var(--spacing-2xl);
	}

	.feature-card {
		padding: var(--spacing-lg);
	}

	.footer-top-row {
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.footer-social-media {
		gap: var(--spacing-md);
	}

	.social-media-icon {
		width: 2.8125rem;
		height: 2.8125rem;
	}

	.error-icon {
		font-size: 5rem;
	}

	.thankyou-icon {
		font-size: 4rem;
	}
}

/* 手機設備 (max-width: 480px) */
@media (max-width: 480px) {
	body {
		padding-top: 2.5rem;
	}

	.container {
		position: relative;
		width: 100%;
		max-width: 300px;
		padding: 0;
		margin: 0 auto;
	}

	/* Header 調整 */
	.header-container {
		height: 2.5rem;
		max-width: 100%;
		padding: 0;
	}

	/* 手機版菜單按鈕 */
	.menu-toggle {
		background-color: #FFAB36;
		color: #FFF;
		display: flex !important;
		width: 2.75rem;
		height: 2.5rem;
		padding: 0.75rem 0.625rem;
		gap: var(--spacing-xs);
	}

	/* 手機版隱藏聯絡瓦吉按鈕 */
	.contact-wagi-link {
		display: none;
	}

	.hamburger-icon {
		width: 1.5rem;
		height: 1rem;
	}

	/* Banner 調整 */
	.banner-section {
		padding: 0;
		min-height: auto;
	}

	.banner-title {
		font-size: var(--font-size-3xl);
		margin-bottom: var(--spacing-md);
	}

	.banner-description {
		font-size: var(--font-size-base);
		margin-bottom: var(--spacing-lg);
	}

	.banner-content {
		padding: 0;
	}

	/* Section 調整 */
	section {
		padding: var(--spacing-xl) 0;
	}

	.section-header {
		margin-bottom: var(--spacing-xl);
	}

	.section-title {
		font-size: 0.875rem;
		width: 7.5rem;
		height: 1.938rem;
		max-width: 100%;
		margin-bottom: var(--spacing-lg);
		background-size: contain;
		background-position: center;
	}

	.section-title::after {
		top: 0;
		right: -1rem;
		width: 1.9375rem;
		height: 2.1875rem;
	}

	/* Grid 調整 */
	.features-grid,
	.articles-grid,
	.team-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr !important;
	}

	/* 按鈕調整 */
	.btn {
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: var(--font-size-sm);
	}

	.btn-lg {
		padding: var(--spacing-md) var(--spacing-lg);
		font-size: var(--font-size-base);
	}

	/* 行動導覽 */
	.thankyou-actions,
	.error-actions {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.thankyou-actions .btn,
	.error-actions .btn {
		width: 100%;
	}

	/* Footer 調整 */
	.footer-logo {
		width: 10.625rem;
		margin-bottom: 0;
	}

	.footer-top-row {
		flex-direction: column;
		gap: var(--spacing-md);
		margin-bottom: 10px;
	}

	.footer-social-media {
		display: none;
	}

	.footer-social-media-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24px;
		margin-top: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		width: 100%;
	}

	.social-media-icon {
		width: 2rem;
		height: 2rem;
	}

	.footer-bottom {
		text-align: center;
		padding: 0;
	}

	/* 表格調整 */
	table {
		font-size: var(--font-size-sm);
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* 麵包屑導航 */
	.breadcrumb {
		font-size: 0.75rem;
		padding: var(--spacing-sm);
	}

	/* 圖片調整 */
	.article-card__image {
		height: 9.375rem;
	}

	/* 404 / 感謝頁 */
	.error-icon {
		font-size: 4rem;
	}

	.error-title {
		font-size: var(--font-size-2xl);
	}

	.thankyou-icon {
		font-size: 3rem;
	}

	.thankyou-title {
		font-size: var(--font-size-2xl);
	}

	/* Social Icons */
	.social-icons {
		justify-content: center;
	}

	/* Info Items */
	.info-item {
		text-align: center;
	}

	/* Google Map */
	.contact-map iframe {
		height: 18.75rem;
	}

	/* 聯絡頁面、文章列表和關於我們 */
	.contact-hero,
	.archive-hero,
	.about-hero-section {
		padding: var(--spacing-2xl) 0;
		margin-bottom: var(--spacing-2xl);
	}

	.contact-hero h1,
	.archive-hero h1,
	.about-hero-section h1 {
		font-size: var(--font-size-3xl);
	}

	.contact-hero p,
	.archive-hero p,
	.about-hero-section p {
		font-size: var(--font-size-base);
	}

	.archive-header {
		padding: var(--spacing-2xl) 0;
		margin-bottom: var(--spacing-2xl);
	}

	.archive-header h1 {
		font-size: var(--font-size-3xl);
	}
}

/* 打印樣式 */
@media print {
	body {
		background: white;
		color: black;
	}

	.site-header,
	.site-footer,
	.menu-toggle,
	.breadcrumb,
	.pagination-wrapper,
	.error-actions,
	.thankyou-actions {
		display: none;
	}

	a {
		text-decoration: underline;
	}

	img {
		max-width: 100%;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		page-break-after: avoid;
	}

	p,
	li {
		page-break-inside: avoid;
	}
}