/**
 * Arka Cahaya Farm — layout styles.
 *
 * Purpose: Port of references/desain2/css/style.css §4 background rhythm, §6 navbar + mobile drawer,
 *          §16 footer and §17 responsive rules for those parts, plus the section classes applied to
 *          Elementor Containers by the starter content (PLAN.md §5.5).
 * Behavior: Section classes set Elementor's container CSS variables (--container-default-padding-*,
 *           --container-max-width, --widgets-spacing) instead of hard padding, so values edited in
 *           the Elementor panel still override them.
 * Dependencies: assets/css/base.css (tokens), Elementor container CSS (optional).
 * Consumers: Every frontend page (handle acfarm-layout).
 * Since: 0.1.0 Initial introduction; see CHANGELOG.md.
 */

/* --- Section rhythm (style.css L182–232) --- */
.acfarm_section,
.acfarm_section_sm,
.acfarm_section_hero,
.acfarm_section_page_hero {
	position: relative;
	--container-max-width: var(--acfarm_container_max);
	--container-default-padding-left: var(--acfarm_container_gutter);
	--container-default-padding-right: var(--acfarm_container_gutter);
	--acfarm_section_pad_top: 84px;
	--acfarm_section_pad_bottom: 84px;
	--container-default-padding-top: var(--acfarm_section_pad_top);
	--container-default-padding-bottom: var(--acfarm_section_pad_bottom);
}

.acfarm_section_sm {
	--acfarm_section_pad_top: 56px;
	--acfarm_section_pad_bottom: 56px;
}

.acfarm_section_hero {
	--acfarm_section_pad_top: 44px;
	--acfarm_section_pad_bottom: 76px;
	background: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(251, 247, 239, 0) 65%), var(--acfarm_color_cream);
}

.acfarm_section_page_hero {
	--acfarm_section_pad_top: 48px;
	--acfarm_section_pad_bottom: 54px;
	border-bottom: 1px solid var(--acfarm_color_line);
	background: linear-gradient(180deg, var(--acfarm_color_sand_light) 0%, var(--acfarm_color_cream) 100%);
}

/* Plain (non-Elementor) sections used by index.php, search.php, 404.php. */
.acfarm_section:not(.e-con),
.acfarm_section_sm:not(.e-con),
.acfarm_section_hero:not(.e-con),
.acfarm_section_page_hero:not(.e-con) {
	padding: var(--acfarm_section_pad_top) 0 var(--acfarm_section_pad_bottom);
}

.acfarm_bg_cream { background-color: var(--acfarm_color_cream); }
.acfarm_bg_paper { background-color: var(--acfarm_color_paper); }
.acfarm_bg_coffee { background-color: var(--acfarm_color_coffee); color: var(--acfarm_color_cream); }

.acfarm_bg_sand {
	background-color: var(--acfarm_color_sand_light);
	border-top: 1px solid var(--acfarm_color_line);
	border-bottom: 1px solid var(--acfarm_color_line);
}

/* Widget spacing inside one section (index.html L336 margin-top 40px, galeri-kandang.html L272 48px). */
.acfarm_gap_40 { --widgets-spacing: 40px; --widgets-spacing-row: 40px; }
.acfarm_gap_48 { --widgets-spacing: 48px; --widgets-spacing-row: 48px; }

/*
 * The Elementor Kit stylesheet (uploads/elementor/css/post-<kit>.css) loads after the theme and sets
 * ".e-con{--container-max-width:1140px}" and ".elementor-element{--widgets-spacing:20px}" with the same
 * specificity, which would shrink the design's 1180px container and its 40/48px section gaps. These
 * higher-specificity rules restore the design values; editors can still override per container from
 * the Elementor panel because those controls write --content-width / --gap on the element itself.
 */
body.acfarm_theme .e-con.acfarm_section,
body.acfarm_theme .e-con.acfarm_section_sm,
body.acfarm_theme .e-con.acfarm_section_hero,
body.acfarm_theme .e-con.acfarm_section_page_hero {
	--container-max-width: var(--acfarm_container_max);
}

body.acfarm_theme .e-con.acfarm_gap_40 { --widgets-spacing: 40px; --widgets-spacing-row: 40px; }
body.acfarm_theme .e-con.acfarm_gap_48 { --widgets-spacing: 48px; --widgets-spacing-row: 48px; }

/* --- 6. Navbar (style.css L384–506) --- */
.acfarm_site_header {
	position: relative;
	z-index: 1000;
	background-color: rgba(251, 247, 239, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--acfarm_color_line);
	transition: all 0.25s ease;
}

.acfarm_sticky_header .acfarm_site_header {
	position: sticky;
	top: 0;
}

.admin-bar.acfarm_sticky_header .acfarm_site_header { top: 32px; }

.acfarm_site_header.is_scrolled {
	background-color: rgba(255, 253, 249, 0.98);
	box-shadow: 0 4px 20px rgba(63, 36, 22, 0.06);
}

.acfarm_navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--acfarm_header_height);
	gap: 20px;
}

.acfarm_brand_link {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.acfarm_brand_logo {
	width: var(--acfarm_logo_size, 54px);
	height: var(--acfarm_logo_size, 54px);
	border-radius: 14px;
	object-fit: cover;
	background: #feeec3;
	border: 1.5px solid rgba(63, 36, 22, 0.15);
	box-shadow: 0 4px 10px rgba(63, 36, 22, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.acfarm_brand_link:hover .acfarm_brand_logo {
	transform: scale(1.04);
	box-shadow: 0 6px 14px rgba(63, 36, 22, 0.2);
}

.acfarm_brand_text {
	display: flex;
	flex-direction: column;
}

.acfarm_brand_title {
	font-family: var(--acfarm_font_serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--acfarm_color_coffee);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.acfarm_brand_tagline {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--acfarm_color_muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.acfarm_nav_menu {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
}

.acfarm_nav_menu a,
.acfarm_mobile_menu_list a {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--acfarm_color_ink_secondary);
	position: relative;
	padding: 6px 0;
	display: inline-block;
	white-space: nowrap;
}

.acfarm_nav_menu a:hover { color: var(--acfarm_color_blue); }

.acfarm_nav_menu .current-menu-item > a,
.acfarm_nav_menu .current_page_item > a {
	color: var(--acfarm_color_blue_dark);
}

.acfarm_nav_menu .current-menu-item > a::after,
.acfarm_nav_menu .current_page_item > a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--acfarm_color_blue);
	border-radius: 2px;
}

.acfarm_nav_actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.acfarm_hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--acfarm_color_coffee);
	font-size: 24px;
	line-height: 1;
}

.acfarm_hamburger .acfarm_icon svg { width: 26px; height: 26px; fill: currentColor; }
.acfarm_hamburger_icon_close { display: none; }
.acfarm_hamburger[aria-expanded="true"] .acfarm_hamburger_icon_open { display: none; }
.acfarm_hamburger[aria-expanded="true"] .acfarm_hamburger_icon_close { display: inline; }

/* --- Mobile drawer (style.css L508–548) --- */
.acfarm_mobile_nav {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: var(--acfarm_color_paper);
	border-bottom: 1px solid var(--acfarm_color_line);
	padding: 24px 20px;
	box-shadow: 0 16px 32px rgba(63, 36, 22, 0.1);
	z-index: 999;
}

.acfarm_mobile_nav[hidden] { display: none; }

.acfarm_mobile_menu_list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

.acfarm_mobile_menu_list a {
	font-size: 1.05rem;
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid var(--acfarm_color_line);
}

.acfarm_mobile_menu_list .current-menu-item > a,
.acfarm_mobile_menu_list .current_page_item > a {
	color: var(--acfarm_color_blue);
	font-weight: 700;
}

/* --- 16. Footer (style.css L1212–1322) --- */
.acfarm_site_footer {
	background-color: var(--acfarm_color_coffee);
	color: var(--acfarm_color_cream);
	padding: 72px 0 32px;
	border-top: 1px solid #4F3222;
}

.acfarm_footer_top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(239, 227, 209, 0.15);
}

.acfarm_footer_brand .acfarm_brand_logo {
	width: 62px;
	height: 62px;
	border-radius: 16px;
	object-fit: cover;
	background: #feeec3;
	border: 1.5px solid rgba(239, 227, 209, 0.35);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	margin-bottom: 16px;
}

.acfarm_footer_brand .acfarm_brand_title { color: #FFFFFF; }
.acfarm_footer_brand .acfarm_brand_tagline { color: var(--acfarm_color_sand); }

.acfarm_footer_brand p {
	color: rgba(251, 247, 239, 0.75);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-top: 14px;
	max-width: 320px;
}

.acfarm_footer_col h4 {
	color: #FFFFFF;
	font-size: 1.15rem;
	margin-bottom: 20px;
	position: relative;
	display: inline-block;
}

.acfarm_footer_col h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 24px;
	height: 2px;
	background-color: var(--acfarm_color_sand);
}

.acfarm_footer_links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.acfarm_footer_links a {
	color: rgba(251, 247, 239, 0.8);
	font-size: 0.9rem;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.acfarm_footer_links a:hover {
	color: #FFFFFF;
	transform: translateX(4px);
}

.acfarm_footer_contact_item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 14px;
	color: rgba(251, 247, 239, 0.8);
	font-size: 0.9rem;
}

.acfarm_footer_contact_item .acfarm_icon {
	color: var(--acfarm_color_sand);
	flex-shrink: 0;
	margin-top: 2px;
	width: 18px;
	text-align: center;
}

.acfarm_footer_contact_item .acfarm_icon svg { width: 16px; height: 16px; fill: currentColor; }
.acfarm_footer_contact_item a { color: var(--acfarm_color_sand); }

.acfarm_footer_bottom {
	padding-top: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.84rem;
	color: rgba(251, 247, 239, 0.6);
}

/* --- Generic entry / listing (non-Elementor fallbacks) --- */
.acfarm_entry { max-width: 820px; }
.acfarm_entry_title { margin-bottom: 24px; }
.acfarm_entry_content > * + * { margin-top: 1rem; }
.acfarm_entry_content ul { list-style: disc; padding-left: 1.4em; }
.acfarm_entry_content ol { list-style: decimal; padding-left: 1.4em; }
.acfarm_entry_content a { color: var(--acfarm_color_blue); text-decoration: underline; }

.acfarm_post_list {
	display: grid;
	gap: 20px;
}

.acfarm_post_card {
	background: var(--acfarm_color_paper);
	border: 1px solid var(--acfarm_color_line);
	border-radius: var(--acfarm_radius_card);
	padding: 24px;
	box-shadow: var(--acfarm_shadow_sm);
}

.acfarm_post_card_title { font-size: 1.35rem; margin-bottom: 8px; }
.acfarm_empty_state { text-align: center; color: var(--acfarm_color_muted); }

/* --- 17. Responsive (style.css L1324–1475) --- */
@media (max-width: 1050px) {
	.acfarm_footer_top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.acfarm_nav_menu { gap: 20px; }
}

@media (max-width: 820px) {
	:root { --acfarm_header_height: var(--acfarm_header_height_mobile); }

	/* Source hero is "section section-hero", so the mobile .section rule also applies to it. */
	.acfarm_section,
	.acfarm_section_hero {
		--acfarm_section_pad_top: 62px;
		--acfarm_section_pad_bottom: 62px;
	}

	.acfarm_section_sm {
		--acfarm_section_pad_top: 44px;
		--acfarm_section_pad_bottom: 44px;
	}

	.acfarm_nav_menu,
	.acfarm_nav_actions .acfarm_nav_cta { display: none; }

	.acfarm_hamburger { display: block; }

	.acfarm_footer_top {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.acfarm_footer_bottom {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 782px) {
	.admin-bar.acfarm_sticky_header .acfarm_site_header { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar.acfarm_sticky_header .acfarm_site_header { top: 0; }
}

@media (max-width: 560px) {
	:root { --acfarm_container_gutter: 15px; }
}