/*
 * HHM shared pill navigation (25 Sept 2026, Boss T's site-wide "pill" brief, colour revision).
 * ONE component for every menu / tab bar on the site: header menu + drop-downs, mobile (burger) menu,
 * Firm / Agent dashboard tabs, My Account menu, account menus. Change the tokens below and every menu follows.
 * Look: white fill, dark text, a coloured outline with a soft glow. The outline colour rotates in order through the
 * front-page set - green (Buy), blue (Rent), gold (Explore Malaysia), purple (Resources) - by position in each menu.
 * The selected pill keeps its own colour but is clearly different: thicker outline + a light tint of that colour inside.
 * Visual only: no link, label or behaviour is changed. Any NEW menu: give items class="hhm-pill" (+ .is-active);
 * force a colour with .hhm-pill--green / --blue / --gold / --purple.
 */
:root {
	--hhm-pill-ink: #0f1727;
	--hhm-pill-bg: #ffffff;
	--hhm-pill-pad: 8px 18px;
	--hhm-pill-size: 14px;

	--hhm-green: #45b783;  --hhm-green-tint: #e5f6ee;  --hhm-green-glow: rgba(69, 183, 131, .30);
	--hhm-blue: #4f8ff7;   --hhm-blue-tint: #e7f0fe;   --hhm-blue-glow: rgba(79, 143, 247, .30);
	--hhm-gold: #e8b93a;   --hhm-gold-tint: #fdf3d3;   --hhm-gold-glow: rgba(232, 185, 58, .34);
	--hhm-purple: #a97bff; --hhm-purple-tint: #f0e8ff; --hhm-purple-glow: rgba(169, 123, 255, .30);
}

/* ---- colour rotation (order: green, blue, gold, purple). The header/burger <ul> starts with a hidden 'Sign In' item, so their first real item is child 2. ---- */
.hhm-pill--green,
.header-navbar__menu .menu > .menu-item:nth-child(4n+2),
.header-navbar__burger .menu > .menu-item:nth-child(4n+2),
.hhm-dash-topbar__item:nth-child(4n+1),
.woocommerce-MyAccount-navigation ul li:nth-child(4n+1),
.hp-menu--tabbed .hp-menu__item:nth-child(4n+1),
.hp-menu--user-account .hp-menu__item:nth-child(4n+1) { --c: var(--hhm-green); --t: var(--hhm-green-tint); --g: var(--hhm-green-glow); }
.hhm-pill--blue,
.header-navbar__menu .menu > .menu-item:nth-child(4n+3),
.header-navbar__burger .menu > .menu-item:nth-child(4n+3),
.hhm-dash-topbar__item:nth-child(4n+2),
.woocommerce-MyAccount-navigation ul li:nth-child(4n+2),
.hp-menu--tabbed .hp-menu__item:nth-child(4n+2),
.hp-menu--user-account .hp-menu__item:nth-child(4n+2) { --c: var(--hhm-blue); --t: var(--hhm-blue-tint); --g: var(--hhm-blue-glow); }
.hhm-pill--gold,
.hhm-pill,
.header-navbar__menu .menu > .menu-item:nth-child(4n+4),
.header-navbar__burger .menu > .menu-item:nth-child(4n+4),
.hhm-dash-topbar__item:nth-child(4n+3),
.woocommerce-MyAccount-navigation ul li:nth-child(4n+3),
.hp-menu--tabbed .hp-menu__item:nth-child(4n+3),
.hp-menu--user-account .hp-menu__item:nth-child(4n+3) { --c: var(--hhm-gold); --t: var(--hhm-gold-tint); --g: var(--hhm-gold-glow); }
.hhm-pill--purple,
.header-navbar__menu .menu > .menu-item:nth-child(4n+5),
.header-navbar__burger .menu > .menu-item:nth-child(4n+5),
.hhm-dash-topbar__item:nth-child(4n+4),
.woocommerce-MyAccount-navigation ul li:nth-child(4n+4),
.hp-menu--tabbed .hp-menu__item:nth-child(4n+4),
.hp-menu--user-account .hp-menu__item:nth-child(4n+4) { --c: var(--hhm-purple); --t: var(--hhm-purple-tint); --g: var(--hhm-purple-glow); }

/* the colour variables live on the <li> for menus; the link/pill inherits them */
.header-navbar__menu .menu > .menu-item > a,
.header-navbar__burger .menu > .menu-item > a,
.woocommerce-MyAccount-navigation ul li a { --c: inherit; }

/* ---- base pill: white fill, dark text, coloured outline + soft glow ---- */
.hhm-pill,
.header-navbar__menu .menu > .menu-item > a,
.header-navbar__burger .menu > .menu-item > a,
.hhm-dash-topbar__item,
.woocommerce-MyAccount-navigation ul li a,
.hp-menu--tabbed .hp-menu__item,
.hp-menu--user-account .hp-menu__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: var(--hhm-pill-pad);
	border: 1.5px solid var(--c, var(--hhm-gold));
	border-radius: 999px;
	background: var(--hhm-pill-bg);
	color: var(--hhm-pill-ink);
	box-shadow: 0 0 9px var(--g, var(--hhm-gold-glow));
	font-family: Poppins, sans-serif;
	font-size: var(--hhm-pill-size);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow .15s ease, background-color .15s ease;
}

/* ---- hover: glow strengthens, light tint ---- */
.hhm-pill:hover,
.header-navbar__menu .menu > .menu-item > a:hover,
.header-navbar__burger .menu > .menu-item > a:hover,
.hhm-dash-topbar__item:hover,
.woocommerce-MyAccount-navigation ul li a:hover,
.hp-menu--tabbed .hp-menu__item:hover,
.hp-menu--user-account .hp-menu__item:hover {
	background: var(--t, var(--hhm-gold-tint));
	color: var(--hhm-pill-ink);
	box-shadow: 0 0 14px var(--g, var(--hhm-gold-glow));
}

/* ---- keyboard focus: clear ring in the pill's own colour ---- */
.hhm-pill:focus-visible,
.header-navbar__menu .menu > .menu-item > a:focus-visible,
.header-navbar__burger .menu > .menu-item > a:focus-visible,
.hhm-dash-topbar__item:focus-visible,
.woocommerce-MyAccount-navigation ul li a:focus-visible,
.hp-menu--tabbed .hp-menu__item:focus-visible,
.hp-menu--user-account .hp-menu__item:focus-visible {
	outline: 3px solid var(--c, var(--hhm-gold));
	outline-offset: 2px;
}

/* ---- selected / current: thicker outline (drawn inside, so nothing shifts) + light tint of its own colour ---- */
.hhm-pill.is-active,
.header-navbar__menu .menu > .menu-item.current-menu-item > a,
.header-navbar__menu .menu > .menu-item.current-menu-ancestor > a,
.header-navbar__burger .menu > .menu-item.current-menu-item > a,
.header-navbar__burger .menu > .menu-item.current-menu-ancestor > a,
.hhm-dash-topbar__item.is-active,
.woocommerce-MyAccount-navigation ul li.is-active a,
.hp-menu--tabbed .hp-menu__item.hp-menu__item--current,
.hp-menu--user-account .hp-menu__item.hp-menu__item--current {
	background: var(--t, var(--hhm-gold-tint));
	color: var(--hhm-pill-ink);
	box-shadow: inset 0 0 0 2px var(--c, var(--hhm-gold)), 0 0 14px var(--g, var(--hhm-gold-glow));
}

/* ---- header (desktop): pills in a row; drop-down arrow sits INSIDE the pill ---- */
.header-navbar__menu .menu {
	display: flex;
	align-items: center;
	gap: 8px;
}
.header-navbar__menu .menu > .menu-item {
	position: relative;
	padding: 0;
	margin: 0;
}
.header-navbar__menu .menu > .menu-item > a {
	margin: 0;
	border-top-width: 1.5px;
}
.header-navbar__menu .menu > .menu-item::before,
.header-navbar__menu .menu > .menu-item > a::before {
	display: none;
}
.header-navbar__menu .menu > .menu-item-has-children > a { padding-right: 34px; }
.header-navbar__menu .menu > .menu-item-has-children::after {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 12px;
	color: var(--c, var(--hhm-gold));
	pointer-events: none;
}

/* drop-down card: entries are pills on hover */
.header-navbar__menu .sub-menu {
	padding: 8px;
	border: 1px solid rgba(15, 23, 39, .12);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(15, 23, 39, .12);
}
.header-navbar__menu .sub-menu .menu-item > a {
	display: block;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hhm-pill-ink);
}
.header-navbar__menu .sub-menu .menu-item:nth-child(4n+1) { --c: var(--hhm-green); --t: var(--hhm-green-tint); }
.header-navbar__menu .sub-menu .menu-item:nth-child(4n+2) { --c: var(--hhm-blue); --t: var(--hhm-blue-tint); }
.header-navbar__menu .sub-menu .menu-item:nth-child(4n+3) { --c: var(--hhm-gold); --t: var(--hhm-gold-tint); }
.header-navbar__menu .sub-menu .menu-item:nth-child(4n+4) { --c: var(--hhm-purple); --t: var(--hhm-purple-tint); }
.header-navbar__menu .sub-menu .menu-item > a:hover,
.header-navbar__menu .sub-menu .menu-item > a:focus-visible {
	background: var(--t, var(--hhm-gold-tint));
	color: var(--hhm-pill-ink);
	box-shadow: inset 0 0 0 1.5px var(--c, var(--hhm-gold));
	outline: none;
}

/* ---- mobile (burger) menu: stacked, easy-to-tap pills; arrow inside the pill ---- */
.header-navbar__burger .menu > .menu-item {
	position: relative;
	margin: 0 0 12px;
	padding: 0;
}
.header-navbar__burger .menu > .menu-item > a {
	display: flex;
	width: 100%;
	max-width: 320px;
	padding: 11px 20px;
	font-size: 16px;
}
.header-navbar__burger .menu > .menu-item-has-children > a { padding-right: 44px; }
.header-navbar__burger .menu > .menu-item-has-children::after {
	position: absolute;
	right: calc(100% - 300px);
	top: 22px;
	transform: translateY(-50%);
	color: var(--c, var(--hhm-gold));
	pointer-events: none;
}
.header-navbar__burger .sub-menu {
	margin: 8px 0 0 12px;
	padding: 0;
	border: 0;
	box-shadow: none;
}
.header-navbar__burger .sub-menu .menu-item > a {
	display: block;
	max-width: 296px;
	margin: 0 0 8px;
	padding: 9px 18px;
	border: 1.5px solid var(--hhm-pill-ink);
	border-radius: 999px;
	background: var(--hhm-pill-bg);
	font-size: 14px;
	font-weight: 500;
	color: var(--hhm-pill-ink);
}
.header-navbar__burger .sub-menu .menu-item:nth-child(4n+1) > a { border-color: var(--hhm-green); box-shadow: 0 0 8px var(--hhm-green-glow); }
.header-navbar__burger .sub-menu .menu-item:nth-child(4n+2) > a { border-color: var(--hhm-blue); box-shadow: 0 0 8px var(--hhm-blue-glow); }
.header-navbar__burger .sub-menu .menu-item:nth-child(4n+3) > a { border-color: var(--hhm-gold); box-shadow: 0 0 8px var(--hhm-gold-glow); }
.header-navbar__burger .sub-menu .menu-item:nth-child(4n+4) > a { border-color: var(--hhm-purple); box-shadow: 0 0 8px var(--hhm-purple-glow); }

/* ---- Firm / Agent dashboard tabs ---- */
.hhm-dash-topbar {
	gap: 10px;
	padding: 12px 6px;
	background: transparent;
	border: 0;
}
.hhm-dash-topbar__item .dashicons { width: 18px; height: 18px; font-size: 18px; }
.hhm-dash-topbar__item.is-active .dashicons { color: var(--hhm-pill-ink); }

/* phones: ONE horizontally scrolling pill row (the only deliberate sideways scroll) */
@media (max-width: 780px) {
	.hhm-dash-tabgroup--rail { flex-direction: column; gap: 0; }
	.hhm-dash-topbar {
		position: sticky;
		top: 0;
		flex-direction: row;
		flex-wrap: nowrap;
		width: auto;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 12px 8px;
		margin: 0 0 14px;
		background: var(--hhm-pill-bg);
		border-bottom: 1px solid rgba(15, 23, 39, .1);
	}
	.hhm-dash-topbar::-webkit-scrollbar { display: none; }
	.hhm-dash-topbar__item { flex: 0 0 auto; width: auto; flex-direction: row; padding: 8px 14px; font-size: 13px; }
	.hhm-dash-topbar__label { font-size: 13px; max-width: none; white-space: nowrap; }
}

/* ---- second-level status pills inside dashboard panels: same tokens ---- */
.hhm-dash-pill { border-color: var(--hhm-gold); font-weight: 600; background: var(--hhm-pill-bg); color: var(--hhm-pill-ink); }
.hhm-dash-pill:hover { background: var(--hhm-gold-tint); }
.hhm-dash-pill.is-active { background: var(--hhm-gold-tint); border-color: var(--hhm-gold); box-shadow: inset 0 0 0 1.5px var(--hhm-gold); color: var(--hhm-pill-ink); }

/* ---- My Account (shop account) menu ---- */
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-MyAccount-navigation ul li::before { display: none; content: none; }

@media (prefers-reduced-motion: reduce) {
	.hhm-pill, .header-navbar__menu .menu > .menu-item > a, .hhm-dash-topbar__item { transition: none; }
}