/**
 * eat2die theme styles
 *
 * 只寫 theme.json 做不到的東西：sticky header、Block Style 變化、
 * Hero 裝飾、focus state、可讀性微調。
 * 顏色 / 間距 / 字級一律使用 theme.json 產生的 CSS 變數。
 *
 * @package eat2die
 */

/* -------------------------------------------------------------------------
 * 1. Base / guards
 * ---------------------------------------------------------------------- */

:root {
	--e2d-radius-sm: 12px;
	--e2d-radius-md: 18px;
	--e2d-radius-lg: 24px;
	--e2d-radius-xl: 32px;
	--e2d-ease: cubic-bezier( 0.2, 0.7, 0.3, 1 );

	/* 藥丸標籤配色：Style Variation 可以只覆寫這兩個變數。 */
	--e2d-pill-bg: var( --wp--preset--color--accent-2 );
	--e2d-pill-fg: #9A4100;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	text-wrap: pretty;
}

/* 標題用 balance 斷行，中文長標題比較不會孤字。 */
h1,
h2,
h3,
.wp-block-post-title {
	text-wrap: balance;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * 2. Accessibility
 * ---------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, .wp-block-button__link ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link:focus {
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
	z-index: 200;
}

@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Header
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 100;
}

/*
 * 背景與毛玻璃效果放在 ::before，而不是 .site-header 本身。
 * 帶有 backdrop-filter 的元素會成為 position:fixed 子元素的 containing block，
 * 直接加在 header 上會讓行動版導覽的全螢幕選單被關在 header 裡面。
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* 跟著 Style Variation 的 base 色走，深色樣式不用另外覆寫。 */
	background-color: var( --wp--preset--color--base );
	background-color: color-mix( in srgb, var( --wp--preset--color--base ) 86%, transparent );
	-webkit-backdrop-filter: saturate( 180% ) blur( 14px );
	backdrop-filter: saturate( 180% ) blur( 14px );
	border-bottom: 1px solid var( --wp--preset--color--line );
	transition: box-shadow 0.25s var( --e2d-ease );
}

.site-header.is-scrolled::before {
	box-shadow: var( --wp--preset--shadow--soft );
}

/* 品牌區：圖示 + 站名 + eat2die.com */
.e2d-brand {
	line-height: 1.15;
}

.e2d-brand .wp-block-site-title {
	white-space: nowrap;
}

.e2d-brand .wp-block-site-logo img {
	border-radius: 11px;
}

/* Navigation：桌機水平、行動裝置交給 Core 的 overlay */
.site-header .wp-block-navigation {
	--navigation-layout-align: center;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--30 );
	background-color: var( --wp--preset--color--base );
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: var( --wp--preset--spacing--30 );
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
}

/*
 * Convo Design CTA：直接做成導覽選單的最後一個項目，
 * 這樣桌機是橘色藥丸按鈕，行動版也會出現在全螢幕選單裡。
 */
.site-header .wp-block-navigation-item.e2d-nav-cta .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 0.2s var( --e2d-ease );
}

.site-header .wp-block-navigation-item.e2d-nav-cta .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item.e2d-nav-cta .wp-block-navigation-item__content:focus {
	background-color: #D95A00;
	color: var( --wp--preset--color--base );
}

@media ( max-width: 600px ) {

	.site-header .wp-block-navigation-item.e2d-nav-cta .wp-block-navigation-item__content {
		padding: 0.5rem 0.85rem;
		font-size: var( --wp--preset--font-size--caption );
	}
}

/* -------------------------------------------------------------------------
 * 4. Block Styles
 * ---------------------------------------------------------------------- */

/* 卡片 */
.wp-block-group.is-style-card,
.wp-block-columns.is-style-card {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --e2d-radius-lg );
	box-shadow: 0 4px 18px rgba( 20, 20, 20, 0.04 );
	overflow: hidden;
	transition: transform 0.25s var( --e2d-ease ), box-shadow 0.25s var( --e2d-ease );
}

.wp-block-group.is-style-card-flat {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --e2d-radius-lg );
	overflow: hidden;
}

.wp-block-group.is-style-card:hover,
.wp-block-group.is-style-card:focus-within,
.wp-block-columns.is-style-card:hover {
	transform: translateY( -4px );
	box-shadow: var( --wp--preset--shadow--card );
}

/* 卡片裡的縮圖要貼齊卡片邊緣 */
.is-style-card > .wp-block-post-featured-image img,
.is-style-card-flat > .wp-block-post-featured-image img {
	border-radius: 0;
}

/* 圖示底（Block Style 與 Pattern 內的裝飾字元共用同一組樣式） */
.e2d-icon-badge,
.wp-block-group.is-style-icon-badge {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background-color: var( --wp--preset--color--accent-2 );
	color: var( --wp--preset--color--accent );
	font-size: 1.35rem;
	font-weight: 900;
	line-height: 1;
}

.wp-block-group.is-style-icon-badge > * {
	margin: 0;
}

/* 手寫便條 */
.wp-block-group.is-style-sticky-note {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --e2d-radius-md );
	box-shadow: var( --wp--preset--shadow--card );
}

/* Eyebrow 小標 */
.wp-block-paragraph.is-style-eyebrow,
p.is-style-eyebrow {
	margin-bottom: 0.75rem;
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/* 手寫註記 */
p.is-style-handwriting {
	color: var( --wp--preset--color--contrast-2 );
	font-weight: 700;
	line-height: 1.4;
	transform: rotate( -1.5deg );
}

/* 藥丸標籤（分類 / 技術） */
.wp-block-post-terms.is-style-pill a,
.wp-block-post-terms.is-style-pill-muted a {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 800;
	text-decoration: none;
	line-height: 1.4;
}

.wp-block-post-terms.is-style-pill a {
	background-color: var( --e2d-pill-bg );
	color: var( --e2d-pill-fg );
}

.wp-block-post-terms.is-style-pill-muted a {
	background-color: var( --wp--preset--color--base-3 );
	color: var( --wp--preset--color--contrast-2 );
}

.wp-block-post-terms.is-style-pill a:hover,
.wp-block-post-terms.is-style-pill-muted a:hover {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.wp-block-post-terms.is-style-pill .wp-block-post-terms__separator,
.wp-block-post-terms.is-style-pill-muted .wp-block-post-terms__separator {
	display: inline-block;
	width: 0.3rem;
	color: transparent;
}

/* 卡片標題 */
.wp-block-post-title.is-style-card-title {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.4;
	letter-spacing: -0.015em;
	margin: 0;
}

/* 圖片變化 */
.wp-block-image.is-style-rounded-xl img {
	border-radius: var( --e2d-radius-xl );
}

.wp-block-image.is-style-cover-16-9 img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 細分隔線 */
.wp-block-separator.is-style-hairline {
	border: none;
	border-top: 1px solid var( --wp--preset--color--line );
	opacity: 1;
	width: 100%;
	max-width: none;
}

/* -------------------------------------------------------------------------
 * 5. Homepage sections
 * ---------------------------------------------------------------------- */

/*
 * Hero
 *
 * 782px 以上 Core Columns 還沒堆疊，但左欄只剩約 55% 寬度，
 * Display 字級會讓中文主標多斷一行。這一段把平板橫向那個區間的標題縮小。
 *
 * 直接在 hero 範圍內重新定義 preset 變數：core 產生的
 * .has-display-font-size 帶有 !important，改寫變數比覆寫字級乾淨。
 */
@media ( min-width: 782px ) and ( max-width: 1100px ) {

	.e2d-hero {
		--wp--preset--font-size--display: clamp( 2.25rem, 4.2vw, 3.25rem );
	}
}

.e2d-hero-visual {
	position: relative;
}

.e2d-hero-visual .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var( --e2d-radius-xl );
	box-shadow: var( --wp--preset--shadow--card );
}

.e2d-hero-badge {
	position: absolute;
	right: -0.75rem;
	top: 1.5rem;
	display: grid;
	place-items: center;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	text-align: center;
	transform: rotate( 7deg );
	box-shadow: var( --wp--preset--shadow--accent );
	pointer-events: none;
}

.e2d-hero-badge p {
	margin: 0;
	color: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 800;
	line-height: 1.25;
}

.e2d-hero-note {
	position: absolute;
	left: -1rem;
	bottom: 1.5rem;
	max-width: 15rem;
	padding: 0.85rem 1rem;
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --e2d-radius-md );
	box-shadow: var( --wp--preset--shadow--card );
}

.e2d-hero-note p {
	margin: 0;
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	line-height: 1.45;
}

@media ( max-width: 781px ) {

	.e2d-hero-badge {
		width: 104px;
		height: 104px;
		right: 0;
		top: 0.75rem;
	}

	.e2d-hero-badge p {
		font-size: var( --wp--preset--font-size--caption );
	}

	.e2d-hero-note {
		left: 0.5rem;
		bottom: 0.75rem;
		max-width: 12rem;
	}
}

/* Hero 數字列 */
.e2d-stats .e2d-stat-value {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.e2d-stats .e2d-stat-label {
	margin: 0.15rem 0 0;
	color: var( --wp--preset--color--contrast-3 );
	font-size: var( --wp--preset--font-size--caption );
	line-height: 1.5;
}

/* Section 標題列：左標題右連結，手機自動換行 */
.e2d-section-head {
	align-items: flex-end;
}

@media ( max-width: 781px ) {

	.e2d-section-head {
		align-items: flex-start;
	}
}

.e2d-section-head .e2d-section-sub {
	margin: 0.35rem 0 0;
	color: var( --wp--preset--color--contrast-3 );
}

.e2d-more-link {
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 800;
	white-space: nowrap;
}

.e2d-more-link a {
	text-decoration: none;
}

.e2d-more-link a:hover {
	text-decoration: underline;
}

/* 身份標籤 */
.e2d-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 999px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast-2 );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	line-height: 1.5;
}

/* 編號（01 / 02 / 03 / 04） */
.e2d-index {
	margin: 0;
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 800;
	letter-spacing: 0.12em;
}

/* Convo Design 區塊 */
.e2d-convo {
	border-radius: var( --e2d-radius-xl );
	overflow: hidden;
}

.e2d-convo-service {
	background-color: var( --wp--preset--color--base );
	background-color: color-mix( in srgb, var( --wp--preset--color--base ) 82%, transparent );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--base ) 70%, transparent );
	border-radius: var( --e2d-radius-md );
}

/* 文章 / 作品卡的標題連結：沿用標題顏色，hover 才變橘色 */
.wp-block-post-title a,
.e2d-card-link {
	color: var( --wp--preset--color--contrast );
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.e2d-card-link:hover {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
}

/* 卡片底部的箭頭連結 */
.e2d-arrow-link {
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 800;
}

.e2d-arrow-link a {
	text-decoration: none;
}

.e2d-arrow-link a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 6. 內容可讀性（單篇文章 / 作品 / 演講）
 * ---------------------------------------------------------------------- */

.e2d-prose :where( h2, h3, h4 ) {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
}

.e2d-prose :where( p, ul, ol ) {
	margin-top: 0;
	margin-bottom: 1.35em;
}

.e2d-prose :where( figure, .wp-block-image, .wp-block-gallery, .wp-block-embed ) {
	margin-top: 2em;
	margin-bottom: 2em;
}

.e2d-prose .wp-block-image img {
	border-radius: var( --e2d-radius-md );
}

.e2d-prose :where( code, kbd ):not( .wp-block-code code ) {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background-color: var( --wp--preset--color--base-3 );
	font-family: var( --wp--preset--font-family--mono );
	font-size: 0.875em;
}

.wp-block-code {
	overflow-x: auto;
}

.wp-block-code code {
	white-space: pre;
	tab-size: 2;
}

/* 表格在手機可以橫向捲，但不撐破版面 */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where( th, td ) {
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--line );
}

.wp-block-table thead th {
	background-color: var( --wp--preset--color--base-3 );
	text-align: start;
}

/* 文章中的 meta 列 */
.e2d-entry-meta {
	color: var( --wp--preset--color--contrast-3 );
	font-size: var( --wp--preset--font-size--caption );
}

/* -------------------------------------------------------------------------
 * 7. Works / Talks 詳細資料（eat2die-core 動態區塊）
 * ---------------------------------------------------------------------- */

.e2d-meta-list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
	margin: 0;
	padding: var( --wp--preset--spacing--40 );
	background-color: var( --wp--preset--color--base-2 );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --e2d-radius-lg );
}

.e2d-meta-list > div {
	min-width: 0;
}

.e2d-meta-list dt {
	margin: 0 0 0.25rem;
	color: var( --wp--preset--color--contrast-3 );
	font-size: var( --wp--preset--font-size--caption );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.e2d-meta-list dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.e2d-reading-time {
	color: var( --wp--preset--color--contrast-3 );
	font-size: var( --wp--preset--font-size--caption );
}

/* -------------------------------------------------------------------------
 * 8. Footer
 * ---------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var( --wp--preset--color--line );
}

/*
 * Core Columns 要到 781px 才堆疊，中間那段四欄會擠成很窄的直條，
 * 這裡讓頁尾在平板先排成 2×2。
 *
 * 需要 !important：core 自己就是用 flex-wrap:nowrap!important 撐開四欄，
 * 而第一欄的 flex-basis 是寫在 inline style 上的。
 */
@media ( min-width: 782px ) and ( max-width: 960px ) {

	.site-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.site-footer .wp-block-columns > .wp-block-column {
		flex-basis: calc( 50% - ( var( --wp--preset--spacing--50 ) / 2 ) ) !important;
		flex-grow: 0;
	}
}

/* 頁尾的連結清單當成導覽用，不要項目符號、也不要整片橘色 */
.site-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
}

.site-footer .wp-block-list a {
	color: var( --wp--preset--color--contrast-2 );
	text-decoration: none;
}

.site-footer .wp-block-list a:hover,
.site-footer .wp-block-list a:focus {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
}

.site-footer .wp-block-social-links .wp-social-link {
	background-color: transparent;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
	transform: translateY( -2px );
}

.e2d-footer-note {
	color: var( --wp--preset--color--contrast-3 );
	font-size: var( --wp--preset--font-size--caption );
}

/* -------------------------------------------------------------------------
 * 9. Query Loop 空狀態 / 分頁
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
}

.wp-block-query-pagination .page-numbers {
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.wp-block-query-no-results {
	color: var( --wp--preset--color--contrast-3 );
}