/* ═══════════════════════════════════════════════
 * RS KK Header Menu  v1.0.2
 *
 * States (applied to .rskkmenu):
 *   .rskkmenu--overlay  → mobile menu is open
 * ═══════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─── */
.rskkmenu {
	--rskkmenu-bg-default: #ffffff;
	--rskkmenu-bg-scrolled: #002691;
	--rskkmenu-bg-dropdown: #F5F5F5;
	--rskkmenu-text-default: #111111;
	--rskkmenu-text-scrolled: #ffffff;
	--rskkmenu-accent: #003EF9;
	--rskkmenu-submenu-text: #6C727E;
	--rskkmenu-height: 80px;
	--rskkmenu-padding-desktop: 80px;
	--rskkmenu-padding-mobile: 20px;
	--rskkmenu-logo-width-desktop: 142px;
	--rskkmenu-logo-height-desktop: 48px;
	--rskkmenu-logo-width-mobile: 118px;
	--rskkmenu-logo-height-mobile: 40px;
	--rskkmenu-font: "Noto Sans CJK TC", "Noto Sans TC", sans-serif;
	--rskkmenu-transition: 0.3s ease;
	--rskkmenu-dropdown-gap: 5px;
}


/* ═══════════════════════════════════════════════
 * Wrapper reset
 *
 * display:contents makes this wrapper invisible to
 * layout — it generates no box, so Elementor's
 * flex/grid containers won't treat it as an item
 * that competes for space. The CSS custom properties
 * and state classes still work because the DOM
 * element exists; only its box is removed.
 * ═══════════════════════════════════════════════ */

.rskkmenu {
	display: contents;
}


/* ═══════════════════════════════════════════════
 * Layout: bar + spacer
 * ═══════════════════════════════════════════════ */

.rskkmenu__bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--rskkmenu-height);
	background: var(--rskkmenu-bg-default);
	z-index: 99999;
	box-sizing: border-box;
	/* Show animation: gentle slide back in */
	transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* Scroll down → slide up out of view */
.rskkmenu--hidden .rskkmenu__bar {
	transform: translateY(-100%);
	/* Hide animation: accelerate away — 咻 */
	transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
}

/* Overlay open → force visible regardless of scroll state */
.rskkmenu--overlay .rskkmenu__bar {
	transform: translateY(0) !important;
}

/* Spacer must not be treated as flex item by Elementor */
.rskkmenu__spacer {
	display: block;
	height: var(--rskkmenu-height);
	width: 0;
	min-width: 0;
	flex: none;
	visibility: hidden;
}

.rskkmenu__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 clamp(var(--rskkmenu-padding-mobile), 5.5vw, var(--rskkmenu-padding-desktop));
	max-width: 100%;
	box-sizing: border-box;
}


/* Scrolled logo never shown (no scroll colour-swap) */
.rskkmenu__logo-img--scrolled,
.rskkmenu__logo-text--scrolled {
	display: none;
}


/* ═══════════════════════════════════════════════
 * Logo
 * ═══════════════════════════════════════════════ */

.rskkmenu__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none !important;
	color: inherit !important;
}

.rskkmenu__logo-img {
	width: var(--rskkmenu-logo-width-desktop);
	height: var(--rskkmenu-logo-height-desktop);
	object-fit: contain;
	object-position: left center;
}

.rskkmenu__logo-text {
	font-family: var(--rskkmenu-font);
	font-size: 20px;
	font-weight: 700;
	text-decoration: none !important;
}

.rskkmenu__logo-text--default {
	color: var(--rskkmenu-text-default);
}

.rskkmenu__logo-text--scrolled {
	color: var(--rskkmenu-text-scrolled);
}


/* ═══════════════════════════════════════════════
 * Desktop navigation
 * ═══════════════════════════════════════════════ */

.rskkmenu__desktop {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0;
}

.rskkmenu__nav--desktop {
	height: 100%;
}

.rskkmenu__nav--desktop .rskkmenu__menu {
	display: flex;
	align-items: center;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── Menu item stretches full header height
      so dropdown top: calc(100% + 5px) = header bottom + 5px ─── */
.rskkmenu__nav--desktop .rskkmenu__item {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rskkmenu__link,
.rskkmenu__link:visited {
	display: block;
	padding: 0 15px;
	color: var(--rskkmenu-text-default) !important;
	font-size: 16px;
	font-family: var(--rskkmenu-font);
	font-weight: 400;
	line-height: 25.6px;
	text-transform: capitalize;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.rskkmenu__link:hover,
.rskkmenu__link:focus-visible {
	color: var(--rskkmenu-accent) !important;
}



/* ─── Desktop sub-menu (dropdown on hover) ─── */

.rskkmenu__nav--desktop .rskkmenu__toggle {
	display: none;
}

.rskkmenu__nav--desktop .rskkmenu__submenu {
	display: none;
	position: absolute;
	top: calc(100% + var(--rskkmenu-dropdown-gap));
	left: 0;
	width: auto;
	margin: 0;
	padding: 15px;
	list-style: none;
	background: var(--rskkmenu-bg-dropdown);
	border: none;
	border-radius: 0;
	box-shadow: none;
	flex-direction: column;
	gap: 20px;
	z-index: 100000;
	white-space: nowrap;
}

.rskkmenu__nav--desktop .rskkmenu__item--has-children:hover > .rskkmenu__submenu {
	display: flex;
}

/* Bridge the 5px gap so hover doesn't break when moving mouse to dropdown */
.rskkmenu__nav--desktop .rskkmenu__submenu::before {
	content: '';
	position: absolute;
	top: calc(-1 * var(--rskkmenu-dropdown-gap));
	left: 0;
	width: 100%;
	height: var(--rskkmenu-dropdown-gap);
}

.rskkmenu__nav--desktop .rskkmenu__link--sub,
.rskkmenu__nav--desktop .rskkmenu__link--sub:visited {
	padding: 0;
	font-size: 16px;
	line-height: 25.6px;
	color: var(--rskkmenu-text-default) !important;
}

.rskkmenu__nav--desktop .rskkmenu__link--sub:hover,
.rskkmenu__nav--desktop .rskkmenu__link--sub:focus-visible {
	color: var(--rskkmenu-accent) !important;
}


/* ═══════════════════════════════════════════════
 * Language switcher
 * ═══════════════════════════════════════════════ */

/* Stretch to full header height so dropdown aligns to bar bottom */
.rskkmenu-lang {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}

/* ── Trigger ── */
.rskkmenu-lang__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 15px;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	color: var(--rskkmenu-text-default);
	font-size: 16px;
	font-family: var(--rskkmenu-font);
	font-weight: 400;
	line-height: 25.6px;
	text-transform: capitalize;
	transition: color 0.2s ease;
}

.rskkmenu-lang__trigger:hover,
.rskkmenu-lang__trigger:focus-visible,
.rskkmenu-lang__trigger[aria-expanded="true"] {
	color: var(--rskkmenu-accent);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.rskkmenu-lang__trigger:focus-visible {
	outline: 2px solid var(--rskkmenu-accent);
	outline-offset: 2px;
	border-radius: 4px !important;
}

.rskkmenu-lang__icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

/* Single-language mode: no dropdown, but hover still changes colour */
.rskkmenu-lang__trigger--static {
	cursor: default;
}

/* ── Dropdown ── */
.rskkmenu-lang__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + var(--rskkmenu-dropdown-gap));
	left: 0;
	width: auto;
	margin: 0;
	padding: 15px;
	list-style: none;
	background: var(--rskkmenu-bg-dropdown);
	border: none;
	border-radius: 0;
	box-shadow: none;
	flex-direction: column;
	gap: 20px;
	z-index: 100001;
	white-space: nowrap;
}

.rskkmenu-lang__dropdown[data-open="true"] {
	display: flex;
}

/* Bridge the 5px gap (same as nav dropdown) */
.rskkmenu-lang__dropdown::before {
	content: '';
	position: absolute;
	top: calc(-1 * var(--rskkmenu-dropdown-gap));
	left: 0;
	width: 100%;
	height: var(--rskkmenu-dropdown-gap);
}

.rskkmenu-lang__dropdown li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rskkmenu-lang__link,
.rskkmenu-lang__link:visited {
	display: block;
	padding: 0;
	color: var(--rskkmenu-text-default) !important;
	font-size: 16px;
	font-family: var(--rskkmenu-font);
	font-weight: 400;
	line-height: 25.6px;
	text-transform: capitalize;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.rskkmenu-lang__link:hover,
.rskkmenu-lang__link:focus-visible {
	color: var(--rskkmenu-accent) !important;
}

.rskkmenu-lang__link[aria-current="true"] {
	font-weight: 700;
}


/* ═══════════════════════════════════════════════
 * Hamburger button (mobile only)
 * ═══════════════════════════════════════════════ */

.rskkmenu__mobile-controls {
	display: none;
}

.rskkmenu__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	color: var(--rskkmenu-text-default);
	transition: color 0.2s ease;
}

.rskkmenu__hamburger:hover,
.rskkmenu__hamburger:focus-visible,
.rskkmenu__hamburger:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.rskkmenu__hamburger:focus-visible {
	outline: 2px solid var(--rskkmenu-accent);
	outline-offset: 2px;
	border-radius: 4px !important;
}

/* Icon toggle: show hamburger, hide close by default */
.rskkmenu__hamburger-close {
	display: none;
}

.rskkmenu--overlay .rskkmenu__hamburger-open {
	display: none;
}

.rskkmenu--overlay .rskkmenu__hamburger-close {
	display: block;
}


/* ═══════════════════════════════════════════════
 * Mobile overlay (full-screen)
 * ═══════════════════════════════════════════════ */

.rskkmenu__overlay {
	display: none;
	position: fixed;
	top: var(--rskkmenu-height);
	left: 0;
	width: 100%;
	height: calc(100vh - var(--rskkmenu-height));
	height: calc(100dvh - var(--rskkmenu-height));
	background: var(--rskkmenu-bg-default);
	z-index: 99998;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.rskkmenu--overlay .rskkmenu__overlay {
	display: block;
}

/* Lock body scroll when overlay is open */
body.rskkmenu-body-lock {
	overflow: hidden !important;
}

/* Force header visible + white when overlay is open */
.rskkmenu--overlay .rskkmenu__bar {
	transform: translateY(0) !important;
	background: var(--rskkmenu-bg-default) !important;
}

/* Overlay bar elements → dark text (header bar area) */
.rskkmenu--overlay .rskkmenu__bar .rskkmenu-lang__trigger,
.rskkmenu--overlay .rskkmenu__bar .rskkmenu-lang__label {
	color: var(--rskkmenu-text-default) !important;
}

/* Overlay hamburger X uses #6C727E per design */
.rskkmenu--overlay .rskkmenu__hamburger {
	color: var(--rskkmenu-submenu-text) !important;
}

/*
 * Overlay menu link colours.
 */
.rskkmenu--overlay .rskkmenu__nav--mobile .rskkmenu__link {
	color: var(--rskkmenu-text-default) !important;
}

.rskkmenu--overlay .rskkmenu__nav--mobile .rskkmenu__link--sub {
	color: var(--rskkmenu-submenu-text) !important;
}



/* ─── Overlay inner ─── */

.rskkmenu__overlay-inner {
	padding: 0 var(--rskkmenu-padding-mobile);
}


/* ─── Mobile menu items ─── */

.rskkmenu__nav--mobile .rskkmenu__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rskkmenu__nav--mobile .rskkmenu__item {
	border: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rskkmenu__nav--mobile .rskkmenu__link,
.rskkmenu__nav--mobile .rskkmenu__link:visited {
	display: block;
	padding: 18px 0;
	color: var(--rskkmenu-text-default) !important;
	font-size: 16px;
	font-family: var(--rskkmenu-font);
	font-weight: 400;
	line-height: 25.6px;
	text-transform: capitalize;
	text-decoration: none !important;
}

/* Parent item with children: use flexbox for link + toggle */
.rskkmenu__nav--mobile .rskkmenu__item--has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.rskkmenu__nav--mobile .rskkmenu__item--has-children > .rskkmenu__link {
	flex: 1;
}

/* ─── Toggle button (mobile accordion) ─── */
.rskkmenu__nav--mobile .rskkmenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	color: var(--rskkmenu-submenu-text);
	transition: transform 0.2s ease;
}

.rskkmenu__nav--mobile .rskkmenu__toggle:hover,
.rskkmenu__nav--mobile .rskkmenu__toggle:focus-visible,
.rskkmenu__nav--mobile .rskkmenu__toggle:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}

.rskkmenu__nav--mobile .rskkmenu__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* ─── Mobile sub-menu (accordion) ─── */
.rskkmenu__nav--mobile .rskkmenu__submenu {
	display: none;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rskkmenu__nav--mobile .rskkmenu__submenu[data-open="true"] {
	display: block;
}

.rskkmenu__nav--mobile .rskkmenu__link--sub,
.rskkmenu__nav--mobile .rskkmenu__link--sub:visited {
	display: block;
	padding: 12px 0;
	color: var(--rskkmenu-submenu-text) !important;
	font-size: 14px;
	font-family: var(--rskkmenu-font);
	font-weight: 400;
	line-height: 22.4px;
	text-transform: capitalize;
	text-decoration: none !important;
}


/* ═══════════════════════════════════════════════
 * Mobile breakpoint  (≤ 767px)
 * ═══════════════════════════════════════════════ */

@media (max-width: 767px) {

	.rskkmenu__inner {
		padding: 0 var(--rskkmenu-padding-mobile);
	}

	.rskkmenu__desktop {
		display: none !important;
	}

	.rskkmenu__mobile-controls {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.rskkmenu__logo-img {
		width: var(--rskkmenu-logo-width-mobile);
		height: var(--rskkmenu-logo-height-mobile);
	}

	/* Lang switcher inside mobile-controls: don't stretch height */
	.rskkmenu__mobile-controls .rskkmenu-lang {
		height: auto;
	}

	/* Lang dropdown on mobile: align to right edge, below bar */
	.rskkmenu__mobile-controls .rskkmenu-lang__dropdown {
		left: auto;
		right: 0;
	}
}

/* Desktop: hide mobile overlay nav */
@media (min-width: 768px) {

	.rskkmenu__overlay {
		display: none !important;
	}
}


/* ═══════════════════════════════════════════════
 * Blocksy theme resets
 *
 * Blocksy applies aggressive global styles to
 * <button> and <a> elements. Scope all resets
 * to the plugin wrapper to prevent leaking.
 * ═══════════════════════════════════════════════ */

.rskkmenu button,
.rskkmenu button:hover,
.rskkmenu button:focus,
.rskkmenu button:active,
.rskkmenu button:focus-visible {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	outline: none;
}

/* Restore focus-visible outline after blanket reset */
.rskkmenu button:focus-visible {
	outline: 2px solid var(--rskkmenu-accent) !important;
	outline-offset: 2px;
}

.rskkmenu a,
.rskkmenu a:hover,
.rskkmenu a:focus,
.rskkmenu a:active,
.rskkmenu a:visited {
	text-decoration: none !important;
}