/*
Theme Name:  CodeAndCook
Theme URI:   https://codeandcook.com
Author:      CodeAndCook
Description: AI 菜谱网站主题：菜谱生成器、个人 IP 展示、食客来信。
Version:     0.1.83
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: codeandcook
*/

:root {
	--cnc-bg: #fdfaf5;
	--cnc-fg: #2b2622;
	--cnc-accent: #d96c2c;
	--cnc-accent-2: #3f7d58;
	--cnc-card: #ffffff;
	--cnc-muted: #7a716a;
	--cnc-radius: 14px;
}

* { box-sizing: border-box; }

/* 恒定预留滚动条位置，避免页面长短切换时内容水平抖动 */
html { scrollbar-gutter: stable; }

body {
	margin: 0;
	background: var(--cnc-bg);
	color: var(--cnc-fg);
	font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	line-height: 1.7;
}

a { color: var(--cnc-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.cnc-wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* header */
.site-header {
	background: var(--cnc-card);
	border-bottom: 1px solid #eee3d6;
	padding: 12px 0;
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: saturate(1.1) blur(6px);
}
.site-header .cnc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cnc-fg); }
.site-brand:hover { text-decoration: none; }
.site-logo { height: 50px; width: auto; max-width: 78px; object-fit: contain; display: block; flex: none; }
.site-title { font-size: 1.3rem; font-weight: 800; color: var(--cnc-fg); letter-spacing: .2px; }
.site-title span { color: var(--cnc-accent); }
.site-title em { font-style: normal; font-size: .95rem; font-weight: 700; color: var(--cnc-accent-2); margin-left: 2px; }
.main-nav a { color: var(--cnc-muted); margin-left: 18px; font-weight: 600; }
.main-nav a:hover { color: var(--cnc-accent); text-decoration: none; }

/* 博客页内 博文/视频 切换 Tab */
.cnc-tabs { display: flex; gap: 10px; margin: 6px 0 4px; }
.cnc-tab {
	padding: 7px 22px; border-radius: 999px; border: 1px solid #ddd0c0;
	color: var(--cnc-muted); font-weight: 700; font-size: .95rem; background: var(--cnc-card);
}
.cnc-tab:hover { text-decoration: none; color: var(--cnc-accent); border-color: var(--cnc-accent); }
.cnc-tab.is-active { background: var(--cnc-accent); border-color: var(--cnc-accent); color: #fff; }
@media (max-width: 640px) {
	.site-logo { height: 38px; }
	.site-title { font-size: 1.08rem; }
	.main-nav a { margin-left: 12px; font-size: .92rem; }
}

/* hero */
.cnc-hero { text-align: center; padding: 14px 0 10px; }
.cnc-hero h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 4px; }
.cnc-hero p { color: var(--cnc-muted); margin: 0; }

/* card / form */
.cnc-card {
	background: var(--cnc-card);
	border: 1px solid #eee3d6;
	border-radius: var(--cnc-radius);
	padding: 24px;
	margin: 18px 0;
	box-shadow: 0 2px 10px rgba(120, 90, 40, .05);
}
.cnc-form label { display: block; margin: 12px 0 4px; font-weight: 700; font-size: .92rem; }
.cnc-form input, .cnc-form textarea, .cnc-form select {
	width: 100%; padding: 10px 12px; border: 1px solid #ddd0c0; border-radius: 8px;
	font: inherit; background: #fffdf9;
}
.cnc-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cnc-form .row { grid-template-columns: 1fr; } }
.cnc-btn {
	display: inline-block; margin-top: 16px; padding: 11px 26px; border: 0; cursor: pointer;
	background: var(--cnc-accent); color: #fff; border-radius: 999px; font-weight: 700; font-size: 1rem;
}
.cnc-btn:disabled { opacity: .6; cursor: wait; }
.cnc-btn-ghost { background: var(--cnc-accent-2); }

/* recipe output */
.cnc-recipe h2 { margin-top: 0; }
.cnc-recipe .meta { color: var(--cnc-muted); font-size: .9rem; }
.cnc-back-row { margin-top: 28px; text-align: right; }
.cnc-submit-row { margin-top: 16px; text-align: left; }
.cnc-ai-badge {
	background: #fff3e6; border: 1px solid #f0c9a0; color: #9a5b1f;
	padding: 8px 14px; border-radius: 8px; font-size: .85rem; margin: 0 0 18px;
}

/* AI 关闭引导卡片与生成失败替代链接 */
.cnc-ai-off .cnc-btn { margin-right: 10px; }
.cnc-admin-hint { margin-top: 14px; font-size: .88rem; color: var(--cnc-muted); }
.cnc-fallback-links { margin: 8px 0 0; font-size: .92rem; }
.cnc-sec-title { font-size: 1.05rem; margin: 22px 0 8px; color: var(--cnc-accent-2); }
/* 食客来信页：公众号联系卡片（文字左、二维码右，窄屏竖排居中） */
.cnc-contact-card { display: flex; align-items: center; gap: 18px; padding: 18px 24px; }
.cnc-contact-text { flex: 1; min-width: 0; margin: 0; font-weight: 600; }
.cnc-contact-qr { width: 120px; height: 120px; object-fit: contain; border-radius: 8px; flex: none; background: #fff; }
@media (max-width: 640px) {
	.cnc-contact-card { flex-direction: column; text-align: center; }
}
/* single post/recipe header: title left, featured image right */
.cnc-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cnc-post-head-main { flex: 1; min-width: 0; }
.cnc-post-head h1 { margin-top: 0; }
.cnc-post-thumb { flex: none; width: 200px; border-radius: 12px; overflow: hidden; background: #f3ede3; }
.cnc-post-thumb img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
	.cnc-post-head { flex-direction: column; }
	.cnc-post-thumb { width: 100%; max-width: 420px; }
}
/* recipe AI image：外框按图片实际尺寸包裹，避免留白过长 */
.cnc-recipe-img { margin: 4px 0 18px; border-radius: 12px; overflow: hidden; background: #f3ede3; width: fit-content; max-width: 520px; }
.cnc-recipe-img img { display: block; width: 100%; height: auto; }
.cnc-img-loading { display: block; padding: 14px 16px; color: var(--cnc-muted); font-size: .9rem; }
.cnc-ing { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.cnc-ing li { background: #f3ede3; padding: 5px 12px; border-radius: 999px; font-size: .9rem; }
.cnc-steps { padding-left: 0; counter-reset: step; list-style: none; }
.cnc-steps li { margin: 12px 0; padding-left: 40px; position: relative; }
.cnc-steps li::before {
	counter-increment: step; content: counter(step);
	position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--cnc-accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .85rem;
}
.cnc-heat { display: inline-block; background: #eef6f0; color: var(--cnc-accent-2); border-radius: 6px; padding: 2px 8px; font-size: .82rem; margin-top: 4px; }
.cnc-sub td { padding: 4px 10px; border-bottom: 1px dashed #e8ddcf; }
.cnc-nutrition { background: #f7f4ee; border-radius: 10px; padding: 12px 16px; margin-top: 16px; font-size: .92rem; }

/* 菜谱集搜索 */
.cnc-search { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; }
.cnc-search input[type="search"] {
	/* flex:1 + min-width:0：宽屏自动伸展填满整行，窄屏可收缩不溢出 */
	flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #ddd0c0;
	border-radius: 999px; font: inherit; background: #fffdf9;
}
.cnc-search .cnc-btn { margin-top: 0; padding: 10px 24px; }
.cnc-search-clear { color: var(--cnc-muted); font-size: .9rem; }
.cnc-search-clear:hover { color: var(--cnc-accent); }

/* 菜谱集分类导航 chip */
.cnc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; justify-content: center; }
.cnc-chip { display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1px solid #ddd0c0; background: var(--cnc-card); color: var(--cnc-muted); font-size: .9rem; font-weight: 600; text-decoration: none; transition: all .15s ease; }
.cnc-chip:hover { border-color: var(--cnc-accent); color: var(--cnc-accent); text-decoration: none; }
.cnc-chip.is-active { background: var(--cnc-accent); color: #fff; border-color: var(--cnc-accent); }

/* posts grid */
.cnc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 24px 0; }
.cnc-post { background: var(--cnc-card); border: 1px solid #eee3d6; border-radius: var(--cnc-radius); overflow: hidden; }
.cnc-post img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cnc-post .body { padding: 14px 16px; }
.cnc-post h3 { margin: 0 0 6px; font-size: 1.05rem; }
.cnc-post .date { color: var(--cnc-muted); font-size: .82rem; }

/* home latest recipes */
.cnc-home-recipes { margin: 40px 0 24px; }
.cnc-sec-head { display: flex; align-items: baseline; justify-content: space-between; }
.cnc-sec-head .cnc-sec-title { font-size: 1.3rem; margin: 0; }
.cnc-more { font-size: .9rem; font-weight: 600; }
a.cnc-post { display: block; color: var(--cnc-fg); transition: transform .15s ease, box-shadow .15s ease; }
a.cnc-post:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(120, 90, 40, .12); }
a.cnc-post h3 { color: var(--cnc-fg); }
a.cnc-post:hover h3 { color: var(--cnc-accent); }
.cnc-excerpt { font-size: .88rem; color: var(--cnc-muted); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cnc-no-img { height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, #f6efe4, #eef4ee); font-size: 2.2rem; }

/* video embed */
.cnc-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 16px 0; border-radius: var(--cnc-radius); overflow: hidden; }
.cnc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 非 16:9 视频（详情页）：容器按真实比例限高居中，iframe 盒子与画面比例一致 → 无黑边；
   两侧留白为页面底色。9:16 竖屏仅当视频源播放器真支持竖屏（抖音等）时效果最佳。 */
.cnc-video--4-3,
.cnc-video--9-16 {
	padding-bottom: 0; height: auto;
	max-height: min(70vh, 540px);
	width: 100%; margin-left: auto; margin-right: auto;
}
.cnc-video--4-3 { aspect-ratio: 4 / 3; max-width: calc(min(70vh, 540px) * 4 / 3); }
.cnc-video--9-16 { aspect-ratio: 9 / 16; max-width: calc(min(70vh, 540px) * 9 / 16); }

/* 博客列表（博文/视频）：卡片固定等高，视频播放器填充剩余空间 */
.cnc-blog-grid .cnc-post { display: flex; flex-direction: column; height: 300px; }
.cnc-blog-grid .cnc-post .body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* 视频区填满剩余高度，但 iframe 自身锁定 16:9 居中：
   播放器画面比例与 iframe 一致 → 无黑边；剩余空间露出卡片底色而非播放器黑。
   宽度取「容器宽」与「容器高×16/9」较小者（cqh 容器查询单位），任何列宽下都不溢出。 */
.cnc-blog-grid .cnc-video { flex: 1; min-height: 0; margin: 8px 0 0; padding-bottom: 0; height: auto; display: flex; container-type: size; }
/* 列表页统一 16:9 居中，中和详情页的比例类属性 */
.cnc-blog-grid .cnc-video--4-3,
.cnc-blog-grid .cnc-video--9-16 { aspect-ratio: auto; max-height: none; max-width: none; margin-left: 0; margin-right: 0; }
.cnc-blog-grid .cnc-video iframe { position: static; inset: auto; height: auto; margin: auto; width: 100%; width: min(100%, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; }
/* 卡片内容跨卡片对齐：标题固定 2 行、日期固定 1 行、摘要填满到卡片最后一行，超出省略号 */
.cnc-blog-grid .cnc-post h3 { height: 3em; margin: 0 0 6px; line-height: 1.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cnc-blog-grid .cnc-post .date { height: 1.2em; margin: 0 0 6px; line-height: 1.2em; overflow: hidden; }
.cnc-top-badge { color: var(--cnc-accent); font-weight: 600; }
.cnc-blog-grid .cnc-post .cnc-excerpt { flex: 1; min-height: 0; margin: 0; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
/* 有封面图：摘要区约剩 2 行；无封面图：正文从顶部开始，摘要可填约 9 行 */
.cnc-blog-grid .cnc-post.has-thumb .cnc-excerpt { -webkit-line-clamp: 2; }
.cnc-blog-grid .cnc-post.no-thumb .cnc-excerpt { -webkit-line-clamp: 9; }

/* footer */
.site-footer { color: var(--cnc-muted); text-align: center; padding: 34px 0; font-size: .85rem; }

.notice { padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.notice-err { background: #fdecec; color: #a33; border: 1px solid #f3c1c1; }
.notice-ok { background: #eef8ef; color: var(--cnc-accent-2); border: 1px solid #bfe3c4; }

.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: cnc-spin .8s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes cnc-spin { to { transform: rotate(360deg); } }