.jat-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	background: transparent;
	transition: background-color var(--jat-duration) var(--jat-ease),
		box-shadow var(--jat-duration) var(--jat-ease),
		padding var(--jat-duration) var(--jat-ease);
	padding: 24px 0;
}

.jat-header:not([data-transparent="1"]) {
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--jat-shadow-sm);
	padding: 14px 0;
}

.jat-header.is-scrolled {
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--jat-shadow-sm);
	padding: 14px 0;
}

.jat-header.is-scrolled .jat-menu a,
.jat-header:not([data-transparent="1"]) .jat-menu a { color: var(--jat-text, #222); }

.jat-header[data-transparent="1"]:not(.is-scrolled) .jat-menu a { color: #fff; }
.jat-header[data-transparent="1"]:not(.is-scrolled) .jat-btn-outline { color: #fff; border-color: rgba(255,255,255,0.7); }
.jat-header[data-transparent="1"]:not(.is-scrolled) .jat-logo-text { color: #fff; }

.jat-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.jat-logo-text {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.45rem;
	letter-spacing: -0.01em;
	color: var(--jat-primary, #163A24);
}
.jat-logo-text-light { color: #fff; }

.jat-menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 22px;
	align-items: center;
}
.jat-menu a {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-weight: 500;
	font-size: 0.94rem;
	padding: 4px 0;
}
.jat-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--jat-accent, #B58A3C);
	border-radius: 2px;
	transition: width var(--jat-duration) var(--jat-ease);
}
.jat-menu a:hover::after,
.jat-menu a:focus-visible::after { width: 100%; }

.jat-header-actions .jat-btn { padding: 0.62em 1.5em; }

.jat-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.jat-hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	color: var(--jat-primary, #163A24);
	border-radius: 2px;
	transition: transform var(--jat-duration) var(--jat-ease), opacity var(--jat-duration) var(--jat-ease);
}
.jat-header[data-transparent="1"]:not(.is-scrolled) .jat-hamburger span { background: #fff; }

.jat-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jat-hamburger.is-active span:nth-child(2) { opacity: 0; }
.jat-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.jat-mobile-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	padding: 16px 24px 24px;
	max-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: var(--jat-shadow-sm);
	transition: max-height var(--jat-duration) var(--jat-ease);
}
/* Scrolls internally instead of clipping once the menu has enough
   items to exceed the viewport height. */
.jat-mobile-menu.is-open { display: flex; max-height: calc(100vh - 80px); }
.jat-mobile-menu-list { display: flex; flex-direction: column; width: 100%; }
.jat-mobile-menu-list li { width: 100%; }
.jat-mobile-menu-list a {
	display: block;
	width: 100%;
	white-space: normal;
	padding: 13px 0;
	border-bottom: 1px solid #eee;
	color: var(--jat-text, #222);
	font-weight: 500;
}
.jat-mobile-menu .jat-btn { margin-top: 14px; text-align: center; }

/* Dropdown submenu (Join Network → Farmer / Vendor / Roastery) */
.jat-menu li.menu-item-has-children { position: relative; }
.jat-menu li.menu-item-has-children > a::before {
	content: "▾";
	display: inline-block;
	margin-left: 5px;
	font-size: 0.7em;
	vertical-align: middle;
	opacity: 0.7;
}
.jat-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 220px;
	background: #fff;
	border-radius: var(--jat-radius-sm);
	box-shadow: var(--jat-shadow-md);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--jat-duration) var(--jat-ease), transform var(--jat-duration) var(--jat-ease);
	z-index: 10;
}
.jat-menu li.menu-item-has-children:hover > .sub-menu,
.jat-menu li.menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.jat-menu .sub-menu li { width: 100%; }
.jat-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--jat-radius-sm);
	color: var(--jat-text, #222) !important;
	font-size: 0.88rem;
	white-space: nowrap;
}
.jat-menu .sub-menu a::after { display: none; }
.jat-menu .sub-menu a:hover { background: var(--jat-background, #F7F4EE); color: var(--jat-secondary, #6F4E37) !important; }

/* Mobile menu: flatten submenu as an indented list, always visible */
.jat-mobile-menu-list .sub-menu {
	padding-left: 16px;
	border-left: 2px solid var(--jat-accent, #B58A3C);
	margin: 4px 0 10px;
}
.jat-mobile-menu-list .sub-menu a { padding: 10px 0; font-size: 0.9rem; border-bottom: none; }