/*
 * NN Frame — header/footer frame rules (ticket 03).
 *
 * Only behaviour and rules that must target things Elementor does not own
 * live here (the theme wrapper #masthead, the nav widget's rendered links,
 * the icon wrappers). Everything else is a kit global class attached to the
 * element, and every value reads the child theme's variables (--color-*,
 * --type-*), which stay the single source of truth.
 */

/* ---------------------------------------------------------------
 * 1. Sticky header + the small shrink on scroll.
 *    The add-on's sticky extension is paid, so this is CSS + a tiny script.
 *    The selector deliberately outranks the add-on's own "#masthead is
 *    relative" fix (its header-footer-elementor.css), which would otherwise
 *    stop the header from sticking.
 * --------------------------------------------------------------- */

body .ehf-header #masthead,
#masthead {
	position: sticky !important;
	top: 0 !important;
	z-index: 99 !important;
}

/* Logged-in editors see the WordPress admin bar; the frame sits under it. */
@media screen and (max-width: 782px) {
	body.admin-bar .ehf-header #masthead,
	body.admin-bar #masthead {
		top: 46px !important;
	}
}

@media screen and (min-width: 783px) {
	body.admin-bar .ehf-header #masthead,
	body.admin-bar #masthead {
		top: 32px !important;
	}
}

#masthead .nn-header-bar {
	transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#masthead.is-scrolled .nn-header-bar {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	background-color: rgba(244, 241, 234, 0.94);
	box-shadow: 0 1px 0 var(--color-border, #e8e1d6);
}

/* ---------------------------------------------------------------
 * 2. "EN | BM" text pair — no flags, no dropdown.
 *    Type values come from the child theme's label tier.
 * --------------------------------------------------------------- */

.nn-langpair {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: Manrope, sans-serif;
	font-size: var(--type-label-md-size, 12px);
	font-weight: var(--type-label-md-weight, 600);
	line-height: var(--type-label-md-leading, 1.2);
	letter-spacing: var(--type-label-md-tracking, 0.08em);
	text-transform: var(--type-label-md-transform, uppercase);
	white-space: nowrap;
}

.nn-lang {
	color: var(--color-text, #20201f);
	text-decoration: none;
	padding: 0.15rem 0.1rem;
	transition: opacity 0.15s ease;
}

.nn-lang:hover,
.nn-lang:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nn-lang.is-current {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nn-langpair__sep {
	color: var(--color-border-strong, #a79d91);
	font-weight: 400;
}

/* Inside the dark footer the pair turns ivory. */
.nn-langpair--footer .nn-lang,
.nn-langpair--footer .nn-langpair__sep {
	color: var(--color-on-primary, #f4f1ea);
}

/* ---------------------------------------------------------------
 * 3. Header bar: tracked uppercase nav (settings + CSS, per the ticket)
 *    and calm utility icons.
 * --------------------------------------------------------------- */

.nn-header-bar .hfe-nav-menu a.hfe-menu-item,
.nn-header-bar .hfe-nav-menu a.hfe-sub-menu-item {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.nn-header-bar .hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.nn-icon-slot .elementor-icon {
	width: 20px;
	height: 20px;
	font-size: 18px;
	border-width: 0;
	padding: 0;
	background: transparent;
	color: var(--color-text, #20201f);
}

.nn-icon-slot .elementor-icon:hover,
.nn-icon-slot .elementor-icon:focus {
	color: var(--color-text, #20201f);
	background: var(--color-surface-raised, #f4f1ea);
}

/* The bag's item count inherits a green line from WooCommerce; keep it on the
   site's own two colours instead, and park it as a small badge so the bag
   icon stays visible. */
.nn-icon-slot {
	position: relative;
}

.nn-icon-slot .hfe-cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0;
	font-size: 10px;
	line-height: 1;
	color: var(--color-on-primary, #f4f1ea);
	background-color: var(--color-text, #20201f);
	border: 1px solid var(--color-text, #20201f);
	border-radius: 999px;
}

/* The cart link itself picks up an off-palette colour; pin it to the text role. */
.nn-icon-slot .hfe-cart-container {
	color: var(--color-text, #20201f);
}

@media (max-width: 767px) {
	.nn-header-bar .nn-logo img {
		max-width: 110px;
	}
}

/* ---------------------------------------------------------------
 * 4. Footer: link colour on the dark surface (the theme's link colour
 *    would otherwise show through the inline links).
 * --------------------------------------------------------------- */

.nn-footer a {
	color: var(--color-on-primary, #f4f1ea);
	text-decoration: none;
}

.nn-footer a:hover,
.nn-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The two placeholder boxes of the newsletter block: the input takes the
   spare width, the button keeps its own size (they must sit on one line). */
.nn-field-row .nn-fake-input,
.nn-field-row .nn-fake-button {
	width: auto;
}

.nn-field-row .nn-fake-button {
	flex: 0 0 auto;
}

/* =========================================================================
   HOUSE FRAME - ticket 02 (header, menu, footer, language pair, entrances)
   Everything here is frame behaviour the builder does not own: the rendered
   nav widget, the search box the add-on injects, the mobile dropdown panel,
   and the press feedback on the links. Values read the child theme tokens.
   ========================================================================= */

/* --- 1. Malay labels step down one tier --------------------------------
   TranslatePress puts lang="ms-MY" on <html>. Malay words run longer than
   the English ones, so the small tracked uppercase labels drop one step of
   the type ladder (label-lg -> label-md -> label-sm) instead of clipping or
   colliding. Uppercase and tracking stay: the label still reads as a label. */
html[lang^="ms"] .label-lg {
	font-size: var(--type-label-md-size);
}

html[lang^="ms"] .label-md {
	font-size: var(--type-label-sm-size);
}

html[lang^="ms"] .label-sm {
	font-size: var(--type-overline-size);
	letter-spacing: var(--type-overline-tracking);
}

/* The header menu links carry their own size from the add-on's controls
   (the tier class sits on the widget, not on the link), so the step-down
   is repeated for them by hand. */
html[lang^="ms"] #masthead .hfe-nav-menu a.hfe-menu-item,
html[lang^="ms"] #masthead .hfe-nav-menu a.hfe-sub-menu-item {
	font-size: var(--type-label-sm-size);
}

/* Longer words wrap inside their box rather than being cut off. */
.label-lg,
.label-md,
.label-sm,
.overline {
	overflow-wrap: break-word;
}

/* The menu labels keep their one-line shape; the step-down above gives them
   the room they need. */
.nn-header-bar .hfe-nav-menu a.hfe-menu-item {
	white-space: nowrap;
}

/* --- 2. Search: a panel under the icon, not a box over the menu ---------
   The add-on grows its input to the left, on top of the nav and the
   language pair. Here the input becomes a quiet field that opens under the
   icon, so nothing in the bar is ever covered. */
#masthead .elementor-widget-hfe-search-button,
#masthead .hfe-search-button-wrapper {
	position: relative;
}

#masthead .hfe-search-icon-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	cursor: pointer;
	border-radius: 2px;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

#masthead .hfe-search-icon-toggle:hover,
#masthead .hfe-search-icon-toggle:focus-within {
	background-color: var(--color-sand);
}

#masthead .hfe-search-icon-toggle:active {
	opacity: 0.6;
}

#masthead .hfe-search-icon-toggle i.fa-search {
	position: static;
	width: auto;
	padding: 0;
	font-size: 16px;
	color: var(--color-text);
}

#masthead .hfe-search-form__input {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	left: auto;
	width: 0;
	height: 46px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background-color: var(--color-ivory);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--type-body-md-size);
	opacity: 0;
	visibility: hidden;
	z-index: 40;
	transition: width 0.18s ease, opacity 0.18s ease, padding 0.18s ease;
}

#masthead .hfe-search-button-wrapper.hfe-input-focus .hfe-search-form__input,
#masthead .hfe-search-form__input:focus {
	width: 280px;
	max-width: calc(100vw - 32px);
	padding: 0 14px;
	opacity: 1;
	visibility: visible;
	cursor: text;
	border-color: var(--color-text);
	outline: none;
	box-shadow: 0 12px 28px rgba(32, 32, 31, 0.1);
}

/* --- 3. The mobile dropdown panel -------------------------------------
   The add-on's panel is pure white with white link rows. Here it becomes
   the house surface: ivory panel, sand hairline between rows, charcoal
   labels, and the language pair sitting inside it as its last row. */
@media (max-width: 1024px) {
	#masthead .hfe-nav-menu nav.hfe-dropdown,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible {
		width: min(300px, calc(100vw - 24px));
		max-width: calc(100vw - 24px);
		padding: 0;
		background-color: var(--color-ivory);
		border: 1px solid var(--color-border);
		border-radius: 2px;
		box-shadow: 0 16px 32px rgba(32, 32, 31, 0.12);
		overflow: hidden;
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown ul.hfe-nav-menu,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible ul.hfe-nav-menu {
		display: block;
		width: 100%;
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown .menu-item,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible .menu-item {
		display: block;
		width: 100%;
		margin: 0;
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown .menu-item > a.hfe-menu-item,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible .menu-item > a.hfe-menu-item {
		display: block;
		padding: 14px 18px;
		background-color: transparent;
		border-bottom: 1px solid var(--color-border);
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown .menu-item:last-child > a.hfe-menu-item,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible .menu-item:last-child > a.hfe-menu-item {
		border-bottom: 0;
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown .menu-item > a.hfe-menu-item:hover,
	#masthead .hfe-nav-menu nav.hfe-dropdown .menu-item > a.hfe-menu-item:focus,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible .menu-item > a.hfe-menu-item:hover,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible .menu-item > a.hfe-menu-item:focus {
		background-color: var(--color-sand);
		text-decoration: none;
	}

	/* The language pair, moved into the panel by frame.js. */
	#masthead .nn-mobile-lang-row {
		display: flex;
		align-items: center;
		padding: 14px 18px;
		margin: 0;
		border-top: 1px solid var(--color-border);
		background-color: var(--color-ivory);
	}

	#masthead .nn-mobile-lang-row::marker,
	#masthead .nn-mobile-lang-row::before {
		content: none;
	}

	/* The toggle itself: a quiet square that picks up sand on hover, and
	   turns into the close mark while the panel is open. */
	#masthead .hfe-nav-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 2px;
		color: var(--color-text);
		transition: background-color 0.15s ease, opacity 0.15s ease;
	}

	#masthead .hfe-nav-menu__toggle:hover,
	#masthead .hfe-nav-menu__toggle:focus {
		background-color: var(--color-sand);
	}
}

/* --- 4. Press and focus feedback on everything clickable ---------------
   Hover is already carried by each part (underline on links, sand on the
   icons). Press pushes the same parts down a step, and keyboard focus gets
   a visible ring on both the light header and the dark footer. */
#masthead a,
#masthead .hfe-nav-menu__toggle,
#masthead .hfe-search-icon-toggle,
.nn-footer a,
.nn-footer button,
.nn-footer input[type="submit"] {
	transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

#masthead a:active,
#masthead .hfe-nav-menu__toggle:active,
.nn-footer a:active,
.nn-footer button:active,
.nn-footer input[type="submit"]:active {
	opacity: 0.55;
}

#masthead a:focus-visible,
#masthead .hfe-nav-menu__toggle:focus-visible,
#masthead .hfe-search-icon-toggle:focus-visible {
	outline: 2px solid var(--color-charcoal);
	outline-offset: 3px;
}

#masthead .hfe-nav-menu a.hfe-menu-item:hover,
#masthead .hfe-nav-menu a.hfe-menu-item:focus {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.nn-footer a:focus-visible {
	outline: 2px solid var(--color-ivory);
	outline-offset: 3px;
}

/* The brand mark is a link home: keep the type, lose the underline. */
#masthead .nn-slot h1 a {
	color: inherit;
	text-decoration: none;
}

#masthead .nn-slot h1 a:hover,
#masthead .nn-slot h1 a:focus {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

/* --- 5. The footer signup form ----------------------------------------
   MailPoet ships pure white fields and a pink button. On the dark footer
   the field becomes an ivory hairline box and the button the house label
   button; the copy above stays a placeholder until the client writes it. */
.nn-footer .mailpoet_form,
.nn-footer form.mailpoet_form {
	width: 100%;
	max-width: 32rem;
}

.nn-footer .mailpoet_text,
.nn-footer .mailpoet_textarea {
	width: 100% !important;
	padding: 0.85rem 1rem !important;
	border: 1px solid rgba(244, 241, 234, 0.45) !important;
	border-radius: 2px !important;
	background-color: transparent !important;
	color: var(--color-ivory) !important;
	font-family: var(--font-body) !important;
	font-size: var(--type-body-md-size) !important;
	line-height: var(--type-body-md-leading) !important;
	min-height: 48px;
}

.nn-footer .mailpoet_text::placeholder {
	color: rgba(244, 241, 234, 0.72);
	opacity: 1;
}

.nn-footer .mailpoet_text:focus {
	outline: 2px solid var(--color-ivory) !important;
	outline-offset: 2px;
}

.nn-footer .mailpoet_submit {
	width: 100% !important;
	padding: 0.95rem 1.6rem !important;
	border: 1px solid var(--color-ivory) !important;
	border-radius: 2px !important;
	background-color: var(--color-ivory) !important;
	color: var(--color-charcoal) !important;
	font-family: var(--font-body) !important;
	font-size: var(--type-label-md-size) !important;
	font-weight: var(--type-label-md-weight) !important;
	line-height: var(--type-label-md-leading) !important;
	letter-spacing: var(--type-label-md-tracking) !important;
	text-transform: uppercase !important;
	cursor: pointer;
}

.nn-footer .mailpoet_submit:hover,
.nn-footer .mailpoet_submit:focus {
	background-color: transparent !important;
	color: var(--color-ivory) !important;
}

/* MailPoet's own confirmation and error lines, on the dark surface. */
.nn-footer .mailpoet_message p,
.nn-footer .mailpoet_validate_success,
.nn-footer .mailpoet_validate_error,
.nn-footer .parsley-errors-list {
	color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: var(--type-body-sm-size);
	line-height: var(--type-body-sm-leading);
}

.nn-footer .mailpoet_error,
.nn-footer .parsley-errors-list {
	color: var(--color-ivory);
}

@media (min-width: 768px) {
	.nn-footer .mailpoet_submit {
		width: auto !important;
		min-width: 9rem;
	}
}

/* --- 6. Bag entrance -----------------------------------------------
   The add-on's cart is a bare number in a dark block, which reads as a
   counter, not as a bag. The frame adds the bag shape (a CSS mask, no extra
   markup) and keeps the number as the small badge beside it. */
#masthead .hfe-cart-container {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 6px;
	margin: -4px -6px;
	border-radius: 2px;
	color: var(--color-text);
	text-decoration: none;
}

#masthead .hfe-cart-container::before {
	content: "";
	width: 17px;
	height: 19px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 12.5H6.6L5.5 8z'/%3E%3Cpath d='M9 8V6.4a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1.1 12.5H6.6L5.5 8z'/%3E%3Cpath d='M9 8V6.4a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E") center / contain no-repeat;
}

#masthead .hfe-cart-container:hover,
#masthead .hfe-cart-container:focus {
	background-color: var(--color-sand);
	text-decoration: none;
}

#masthead .hfe-cart-container .hfe-cart-count.nn-bag-empty {
	display: none;
}

#masthead .hfe-cart-container .hfe-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	min-height: 18px;
	max-height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	line-height: 1;
	background-color: var(--color-text);
	color: var(--color-on-primary);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* --- 7. Phone: the menu panel opens under the whole header ----------
   On a phone the bar takes two rows (brand with the toggle, then the
   utilities), and the add-on hangs its panel straight under the toggle,
   which puts it behind the utilities row. The panel steps down past that
   row so its first entry is never covered. */
@media (max-width: 767px) {
	#masthead .hfe-nav-menu nav.hfe-dropdown,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible {
		/* Step the panel past the utilities row. A transform is used instead
		   of a margin because the closed panel still sits in the flow: a
		   margin there would stretch the header even while the menu is shut. */
		transform: translateY(46px);
	}
}

/* --- 8. Search field: a magnifier inside the open panel --------------
   The add-on's field carries no placeholder, so the frame draws the same
   magnifier inside the box to show it is a field, and gives the box a
   hairline and a shadow so it reads as a panel over the dark sections. */
#masthead .hfe-search-form__input,
#masthead .hfe-search-button-wrapper.hfe-input-focus .hfe-search-form__input,
#masthead .hfe-search-form__input:focus {
	padding-left: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320201F' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
}

#masthead .hfe-search-button-wrapper.hfe-input-focus .hfe-search-form__input,
#masthead .hfe-search-form__input:focus {
	border-color: var(--color-text);
	box-shadow: 0 12px 28px rgba(32, 32, 31, 0.18);
}

#masthead .hfe-search-form__input:not(:focus) {
	padding-left: 0;
	background-image: none;
}

/* --- 9. Tablet: the menu toggle sits with the utilities --------------
   Between phone and desktop the bar is one row: brand, then the add-on's
   toggle in the middle column, then the utilities. Pushing the toggle to
   the end of its column keeps it next to the search, account and bag
   instead of floating in the middle of the bar. */
@media (min-width: 768px) and (max-width: 1024px) {
	#masthead .nn-nav-slot {
		display: flex;
		justify-self: end;
		justify-content: flex-end;
		width: auto;
	}

	#masthead .hfe-nav-menu nav.hfe-dropdown,
	#masthead .hfe-nav-menu nav.hfe-dropdown-expandible {
		right: 0;
		left: auto;
	}
}

/* --- 10. Desktop menu: keep the five labels on one row ------------------
   The five labels fit the nav's shrink-to-fit width exactly, so a sub-pixel
   overflow pushed CONTACT onto a second row at desktop widths. The header
   column already has the room; the row is kept unbroken. */
@media (min-width: 1025px) {
	#masthead .hfe-nav-menu ul {
		flex-wrap: nowrap;
	}
}