/*
Theme Name: Bơ Lười Bakery
Theme URI: https://www.facebook.com/boluoibakery
Description: Theme con của Twenty Twenty-Five cho Bơ Lười Bakery. Dựng bằng khối Gutenberg miễn phí, sửa chữ, ảnh, nút ngay trong trình soạn thảo.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boluoi
*/

/* =========================================================================
   Phần lớn màu, chữ, khoảng cách nằm trong theme.json.
   Tệp này chỉ chứa những gì khối Gutenberg chưa làm được:
   khung ảnh mềm, thẻ bánh, đầu trang dính, nút liên hệ nổi trên điện thoại.
   Các lớp bắt đầu bằng "bl-" được gắn ở Khối > Nâng cao > Lớp CSS bổ sung.
   ========================================================================= */

:root {
	--bl-forest: var(--wp--preset--color--accent-1);
	--bl-butter: var(--wp--preset--color--accent-2);
	--bl-cream: var(--wp--preset--color--accent-3);
	--bl-beige: var(--wp--preset--color--accent-4);
	--bl-sage: var(--wp--preset--color--accent-5);
	--bl-choco: var(--wp--preset--color--accent-6);
	--bl-radius: 22px;
	--bl-shadow: 0 1px 0 rgba(6, 75, 42, .06), 0 18px 40px -28px rgba(6, 75, 42, .35);
}

html { scroll-padding-top: 96px; }

/* Các khối toàn chiều rộng nằm sát nhau, không chừa dải trống giữa các phần */
.wp-site-blocks > * { margin-block-start: 0; }
.bl-main > .alignfull,
.bl-main .wp-block-post-content > .alignfull,
.bl-main article > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.bl-main .wp-block-post-content > .alignfull:first-child { margin-top: 0; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { height: auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--bl-choco);
	outline-offset: 3px;
	border-radius: 6px;
}

.screen-reader-text:focus { z-index: 100000; }

/* ---------- Đầu trang ---------- */
.bl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(6, 75, 42, .1);
}
.admin-bar .bl-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .bl-header { top: 0; } }

.bl-header .bl-logo { margin: 0; flex-shrink: 0; }
.bl-header .bl-logo img { width: 156px; display: block; }
.bl-header .bl-nav { flex: 1; justify-content: flex-end; }
.bl-header .bl-nav .wp-block-navigation-item__content { padding: .45em .2em; border-radius: 999px; text-decoration: none; }
.bl-header .bl-nav .wp-block-navigation-item__content:hover { color: var(--bl-choco); }
.bl-header .bl-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.bl-header .bl-header-cta .wp-block-button__link { padding: .6em 1.2em; font-size: .95rem; }

@media (min-width: 1024px) {
	.bl-header .bl-nav .wp-block-navigation__container { flex-wrap: nowrap; }
}
@media (max-width: 1080px) {
	.bl-header .bl-header-cta { display: none; }
}
@media (max-width: 600px) {
	.bl-header .bl-logo img { width: 124px; }
}

/* Màn hình vừa (máy tính bảng): 6 mục không đủ chỗ, chuyển sang nút menu sớm hơn mặc định 600px */
@media (min-width: 600px) and (max-width: 1023px) {
	.bl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bl-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Menu điện thoại (khối Điều hướng tự tạo nút mở/đóng) */
.bl-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.bl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.bl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}
.bl-nav .wp-block-navigation__responsive-container-open,
.bl-nav .wp-block-navigation__responsive-container-close {
	width: 48px; height: 48px; justify-content: center; align-items: center;
	border-radius: 50%; background: var(--bl-cream);
}
.bl-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px clamp(16px, 5vw, 32px);
}
.bl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .4rem; font-size: 1.375rem; font-weight: 700;
}

/* ---------- Khung ảnh mềm (hình bơ) ---------- */
.bl-blob img,
.bl-blob.bl-placeholder {
	border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%;
}
.bl-soft img { border-radius: var(--bl-radius); }

/* Ô chờ ảnh: khi chưa có ảnh thật */
.bl-placeholder {
	aspect-ratio: 4 / 5;
	display: grid; place-items: center; text-align: center;
	padding: 2rem;
	background: var(--bl-cream) url("assets/images/cho-anh-banh.svg") center / cover no-repeat;
	border: 2px dashed var(--bl-sage);
	color: var(--bl-forest);
	font-weight: 600;
	border-radius: var(--bl-radius);
}

/* ---------- Khối nội dung ---------- */
.bl-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.bl-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.6; max-width: 36em; }
.bl-muted { color: #4D5C52; }
.bl-maxw { max-width: 40em; }

.bl-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.bl-facts li { position: relative; padding-left: 1.9rem; }
.bl-facts li::before {
	content: ""; position: absolute; left: 0; top: .32em;
	width: 1.1rem; height: 1.3rem;
	background: var(--bl-sage);
	border-radius: 50% 50% 48% 48% / 58% 58% 42% 42%;
	box-shadow: inset 0 -5px 0 -2px var(--bl-choco);
}

.bl-panel {
	border-radius: var(--bl-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.bl-panel > :first-child { margin-top: 0; }
.bl-outline { border: 1.5px solid var(--bl-beige); background: #fff; }

/* Nhãn cảnh báo nội dung chưa duyệt / còn thiếu */
.bl-notice {
	border-left: 4px solid var(--bl-butter);
	background: var(--bl-cream);
	padding: .9rem 1.1rem;
	border-radius: 0 12px 12px 0;
	font-size: var(--wp--preset--font-size--small);
}
.bl-notice > * { margin: 0; }
mark.bl-todo {
	background: var(--bl-butter);
	color: var(--bl-choco);
	padding: .05em .4em;
	border-radius: 6px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- Chọn theo mood ---------- */
.bl-moods { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.bl-mood {
	background: #fff;
	border: 1.5px solid var(--bl-beige);
	border-radius: var(--bl-radius);
	padding: 1.25rem 1.25rem 1.1rem;
	transition: border-color .2s, transform .2s;
	position: relative;
}
.bl-mood:hover { border-color: var(--bl-forest); transform: translateY(-2px); }
.bl-mood h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.bl-mood p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.bl-mood h3 a { text-decoration: none; }
.bl-mood h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bl-mood .bl-mood-dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 0 .75rem; }

/* ---------- Thẻ bánh (Query Loop) ---------- */
.bl-card {
	height: 100%;
	background: #fff;
	border-radius: var(--bl-radius);
	border: 1.5px solid var(--bl-beige);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .2s, box-shadow .2s;
}
.bl-card:hover { border-color: var(--bl-sage); box-shadow: var(--bl-shadow); }
.bl-card-media {
	aspect-ratio: 4 / 3;
	background: var(--bl-cream) url("assets/images/cho-anh-banh.svg") center / cover no-repeat;
	margin: 0 !important;
}
.bl-card-media .wp-block-post-featured-image { height: 100%; margin: 0; }
.bl-product-media { aspect-ratio: 1 / 1; border-radius: var(--bl-radius); overflow: hidden; }
.bl-card-media .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.bl-card-body { padding: 1.1rem 1.2rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.bl-card-body > * { margin: 0 !important; }
.bl-card .wp-block-post-title { font-size: 1.2rem; }
.bl-card .wp-block-post-excerpt__excerpt { margin: 0; font-size: var(--wp--preset--font-size--small); }
.bl-card .wp-block-post-excerpt__more-text { display: none; }
.bl-card .bl-card-actions { margin-top: auto !important; padding-top: .4rem; gap: .5rem 1rem; align-items: center; }
.bl-card .wp-block-read-more {
	display: inline-flex; align-items: center; min-height: 42px; padding: .4em 1.1em;
	border-radius: 999px; background: var(--bl-forest); color: var(--bl-cream);
	font-weight: 700; font-size: .92rem; text-decoration: none;
}
.bl-card .wp-block-read-more:hover { background: var(--bl-choco); color: var(--bl-cream); }
.bl-card .bl-ask-link { margin: 0; }
.bl-card .bl-ask-link a { display: inline-flex; align-items: center; min-height: 42px; font-weight: 700; font-size: .92rem; }
.wp-block-post-terms a { display: inline-block; padding: .3em 0; }

.bl-specs { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; font-size: var(--wp--preset--font-size--small); }
.bl-specs > * { margin: 0 !important; }
.bl-specs .bl-spec-label { color: #5B6A60; font-weight: 600; }
.bl-specs .bl-spec-value { font-weight: 600; }
.bl-specs-lg { font-size: var(--wp--preset--font-size--medium); gap: .6rem 1.4rem; }
.bl-specs-lg .bl-spec-label,
.bl-specs-lg .bl-spec-value { padding-bottom: .6rem; border-bottom: 1px dashed var(--bl-beige); }

/* Nút nhỏ và nút viền */
.bl-btn-sm .wp-block-button__link { padding: .55em 1.1em; font-size: .92rem; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--bl-forest);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--bl-forest); color: var(--bl-cream); border-color: var(--bl-forest); }

/* Bộ lọc (các nút dẫn tới trang phân loại) */
.bl-filter .wp-block-button__link {
	background: #fff; color: var(--bl-forest);
	border: 1.5px solid var(--bl-beige);
	padding: .5em 1.05em; font-size: .92rem; font-weight: 600;
}
.bl-filter .wp-block-button__link:hover,
.bl-filter .wp-block-button__link[aria-current="page"] { background: var(--bl-forest); color: var(--bl-cream); border-color: var(--bl-forest); }

/* ---------- Bài viết ---------- */
.bl-post-card { height: 100%; }
.bl-post-card .wp-block-post-featured-image { margin: 0 0 1rem; }
.bl-post-card .wp-block-post-featured-image img { border-radius: var(--bl-radius); aspect-ratio: 3 / 2; object-fit: cover; }
.bl-post-card .bl-post-media { aspect-ratio: 3 / 2; border-radius: var(--bl-radius); background: var(--bl-cream) url("assets/images/cho-anh-banh.svg") center / cover no-repeat; overflow: hidden; margin-bottom: 1rem; }
.bl-post-card .bl-post-media .wp-block-post-featured-image { margin: 0; height: 100%; }
.bl-post-card .bl-post-media .wp-block-post-featured-image img { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
.bl-post-card .wp-block-post-title { font-size: 1.25rem; margin: .35rem 0; }
.bl-post-card .wp-block-post-excerpt { font-size: var(--wp--preset--font-size--small); }

.wp-block-query-pagination { gap: .5rem; font-weight: 600; }
.wp-block-search__input { border-radius: 999px; border: 1.5px solid var(--bl-beige); padding: .7em 1.1em; background: #fff; }
.wp-block-search__button { border-radius: 999px; }

/* ---------- Câu hỏi thường gặp ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 700; color: var(--bl-forest); list-style: none; padding-right: 2rem; position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; line-height: 1; transition: transform .2s;
}
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: .6rem; }

/* ---------- Các bước đặt bánh ---------- */
.bl-steps { counter-reset: blstep; }
.bl-steps > .wp-block-column { counter-increment: blstep; position: relative; padding-top: 3.25rem; }
.bl-steps > .wp-block-column::before {
	content: counter(blstep);
	position: absolute; top: 0; left: 0;
	width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
	border-radius: 50%; background: var(--bl-forest); color: var(--bl-cream); font-weight: 700;
}

/* ---------- Biểu mẫu soạn tin đặt bánh ---------- */
.bl-form { display: grid; gap: 1rem; }
.bl-form *, .bl-form *::before, .bl-form *::after, .bl-result textarea { box-sizing: border-box; }
.bl-form .bl-field, .bl-form .bl-row > * { min-width: 0; }
.bl-form .bl-field { display: grid; gap: .35rem; }
.bl-form label, .bl-form legend { font-weight: 700; color: var(--bl-forest); }
.bl-form .bl-req { color: var(--bl-choco); }
.bl-form input, .bl-form select, .bl-form textarea {
	font: inherit; color: inherit; width: 100%;
	padding: .75em .95em; min-height: 48px;
	border: 1.5px solid var(--bl-beige); border-radius: 14px; background: #fff;
}
.bl-form input:focus, .bl-form select:focus, .bl-form textarea:focus { outline: none; border-color: var(--bl-forest); box-shadow: 0 0 0 3px rgba(6, 75, 42, .15); }
.bl-form [aria-invalid="true"] { border-color: #A3342B; }
.bl-form .bl-err { color: #A3342B; font-size: .9rem; font-weight: 600; margin: 0; }
.bl-form fieldset { border: 0; padding: 0; margin: 0; }
.bl-form .bl-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.bl-form .bl-choices label { font-weight: 600; color: inherit; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1.5px solid var(--bl-beige); border-radius: 999px; background: #fff; cursor: pointer; }
.bl-form .bl-choices input { width: auto; min-height: 0; accent-color: var(--bl-forest); }
.bl-form .bl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bl-form button {
	font: inherit; font-weight: 700; cursor: pointer;
	background: var(--bl-forest); color: var(--bl-cream);
	border: 0; border-radius: 999px; padding: .85em 1.6em; justify-self: start;
}
.bl-form button:hover { background: var(--bl-choco); }
.bl-result { margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--bl-radius); background: var(--bl-cream); }
.bl-result[hidden] { display: none; }
.bl-result textarea { width: 100%; min-height: 9rem; font: inherit; padding: .8rem; border-radius: 12px; border: 1.5px solid var(--bl-beige); background: #fff; }
.bl-result .bl-result-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.bl-result .bl-result-links a { font-weight: 700; padding: .55em 1.1em; border-radius: 999px; background: var(--bl-forest); color: var(--bl-cream); text-decoration: none; }
@media (max-width: 600px) { .bl-form .bl-row { grid-template-columns: 1fr; } }

/* ---------- Chân trang ---------- */
.bl-footer a { color: var(--bl-cream); }
.bl-footer a:hover { color: var(--bl-butter); }
.bl-footer .bl-footer-logo img { width: 190px; }
.bl-footer .wp-block-separator { color: rgba(255, 244, 199, .2); border-color: rgba(255, 244, 199, .2); }
.bl-footer .bl-footer-links { list-style: none; padding: 0; }
.bl-footer .bl-footer-links a { text-decoration: none; }
.bl-footer .bl-footer-links a:hover { text-decoration: underline; }
.bl-footer mark.bl-todo { background: var(--bl-butter); color: var(--bl-forest); }
.bl-footer .wp-block-social-links .wp-social-link { background: var(--bl-cream) !important; color: var(--bl-forest) !important; }

/* Nút liên hệ nổi: chỉ hiện trên điện thoại */
.bl-fab { display: none; }
@media (max-width: 781px) {
	.bl-fab {
		display: block; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; margin: 0 !important;
	}
	.bl-fab .wp-block-button__link { box-shadow: 0 10px 24px -8px rgba(6, 75, 42, .55); padding: .8em 1.3em; }
	.bl-footer { padding-bottom: 88px !important; }
	body:has(#bl-order-form) .bl-fab { display: none; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 781px) {
	.bl-hero-cols .bl-blob,
	.bl-hero-cols .wp-block-image { max-width: 260px; margin-inline: auto; }
	.bl-section { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}