/*
Theme Name: Gaogiong
Theme URI: https://giongrice.vn/
Author: Gaogiong
Author URI: https://giongrice.vn/
Description: Theme WordPress chuyển đổi từ website Gióng - Gạo thuần thơm ngon cho mọi bữa cơm Việt. Hỗ trợ đầy đủ WooCommerce, Contact Form 7, menu tùy chỉnh, logo tùy chỉnh, hình ảnh đại diện, sidebar động và các định dạng bài viết.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gaogiong
Tags: e-commerce, blog, custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/* ==========================================================================
   Base styles (layout chính nằm trong assets/css/frontend.css)
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999px;
	position: absolute;
	top: -9999px;
}

.skip-link:focus {
	left: 6px;
	top: 7px;
	z-index: 99999;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text {
	text-align: center;
}

.gallery-caption {
	display: block;
}

.bypostauthor {
	display: block;
}

.sticky {
	display: block;
}

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

.alignwide {
	margin-left: -80px;
	margin-right: -80px;
	max-width: calc(100% + 160px);
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* ==========================================================================
   Recipe layout — "Món ngon mỗi ngày" (single recipe)
   Override scoped cho .recipe-details, giữ nguyên mọi style gốc khác.
   ========================================================================== */

.recipe-details .recipe-metas .item{
	min-width: 9.375rem;
}

.recipe-details .recipe-description .cont-wrap .cont{
	white-space: pre-line;
}

@media only screen and (max-width: 1199px){
	.recipe-details .recipe-description .cont-wrap{
		padding: 3rem;
		margin-right: 0;
		flex-basis: 100%;
		min-height: auto;
	}
	.recipe-details .recipe-description .img-wrap{
		flex-basis: 100%;
	}
}

@media only screen and (max-width: 991px){
	.recipe-details .recipe-description{
		margin-top: 3.5rem;
	}
	.recipe-details .recipe-description .flex-box{
		flex-direction: column;
	}
	.recipe-details .recipe-description .cont-wrap{
		padding: 2.5rem 2rem;
		margin-right: 0;
		width: 100%;
	}
	.recipe-details .recipe-description .img-wrap{
		flex-basis: auto;
		width: 100%;
		max-width: 40rem;
		margin: 0 auto;
		aspect-ratio: 1/1;
	}
}

@media only screen and (max-width: 767px){
	.recipe-details .recipe-metas{
		flex-wrap: wrap;
		gap: 1.5625rem 0;
	}
	.recipe-details .recipe-metas .item{
		flex: 0 0 50%;
	}
	.recipe-details .recipe-content .post-nav .flex-box{
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.recipe-details .recipe-content .recipe-share{
		flex-wrap: wrap;
	}
	.recipe-details .title-group{
		margin-top: 2.5rem;
	}
}

/* Section "Góc bếp" trên trang chi tiết món ngon */
.recipe-details + .related-recipes-sec{
	padding-top: 0;
}
.related-recipes-sec .recipe-item .post-thumb .img-wrap{
	aspect-ratio: 1/1;
	overflow: hidden;
}
.related-recipes-sec .recipe-item .post-thumb .img-wrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.related-recipes-sec .recipe-item:hover .post-thumb .img-wrap img{
	transform: scale(1.05);
}

/* ==========================================================================
   Menu icons (cấu hình trong Giao diện > Menu)
   ========================================================================== */

/* Top bar: icon cạnh text. Layout mặc định của top bar là flex-direction: column
   (icon trên, text dưới — xem frontend.css .header-nav-main > li > a). */
header#header #masthead .header-nav-main > li.has-icon-left > a > img.ux-menu-icon{
	width: 20px;
	height: 20px;
	flex: none;
	object-fit: contain;
}

/* Mobile sidebar: icon 32px theo CSS gốc */
#main-menu .sidebar-menu li > a > img.ux-sidebar-menu-icon{
	width: 32px;
	height: 32px;
	padding-right: 0;
	flex: none;
	object-fit: contain;
}

/* ==========================================================================
   Sticky header (desktop + mobile)
   ========================================================================== */

header#header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9999;
}
/* Khi có WP admin bar, dính dưới admin bar */
.admin-bar header#header{
	top: 32px;
}
@media screen and (max-width: 782px){
	.admin-bar header#header{
		top: 46px;
	}
}
/* Nền đặc cho header khi dính trên đầu, tránh nội dung lộ qua khi cuộn */
header#header .header-wrapper{
	background-color: #fff;
}
header#header .header-bg-color{
	background-color: #fff !important;
}

/* ==========================================================================
   Mobile menu: khóa scroll khi menu mở (tránh kéo header / trôi menu)
   ========================================================================== */

/* Khóa scroll dọc hiệu quả: cần đặt overflow hidden trên CẢ html lẫn body,
   vì html là scroll container chính (trước đây chỉ có body nên không ăn). */
html.mobile-menu-open,
body.mobile-menu-open{
	overflow: hidden !important;
	height: 100%;
}
/* Khi menu mở: header cố định trên đầu để không bị kéo mất khi scroll */
body.mobile-menu-open header#header{
	position: fixed !important;
	left: 0;
	right: 0;
	top: 0;
}
body.mobile-menu-open.admin-bar header#header{
	top: 32px;
}
@media screen and (max-width: 782px){
	body.mobile-menu-open.admin-bar header#header{
		top: 46px;
	}
}
/* Menu mobile nằm cố định đúng dưới header (kể cả khi có admin bar) */
#main-menu{
	position: fixed !important;
}
.admin-bar #main-menu{
	top: calc(var(--header-h, 0px) + 32px) !important;
}
@media screen and (max-width: 782px){
	.admin-bar #main-menu{
		top: calc(var(--header-h, 0px) + 46px) !important;
	}
}

/* ==========================================================================
   Loading trang — ảnh logo tùy chỉnh (thay thế SVG mặc định)
   ========================================================================== */

.load_home_page .loading-image{
	position: absolute;
	z-index: 100;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 60%;
	max-height: 40vh;
	width: auto;
	height: auto;
	object-fit: contain;
}
.load_home_page.complete .loading-image{
	transition-delay: 0.8s;
	opacity: 0;
}