/*
 * mod_my_navbar - เมนูแถบนอน
 *
 * Every setting arrives as a custom property on the module's own element, so
 * this one file dresses every copy of the module on a page and none of them
 * can tread on another. The only thing written per module is the media query
 * for the mobile breakpoint, because a media query cannot read a property.
 *
 * Desktop is the base here and the drawer is the override, which keeps the
 * bar working on a browser that never applies the query.
 */

.my-nav {
	--nav-bg: #ffffff;
	--nav-bg2: var(--nav-bg);
	--nav-link: #1f2937;
	--nav-hover: var(--nav-link);
	--nav-hover-bg: rgba(0, 0, 0, .06);
	--nav-active: var(--nav-hover);
	--nav-active-bg: var(--nav-hover-bg);
	--nav-line: #e5e7eb;
	--nav-drop-bg: #ffffff;
	--nav-drop-link: #1f2937;
	--nav-size: .98rem;
	--nav-weight: 600;
	--nav-pad-y: 12px;
	--nav-pad-x: 14px;
	--nav-gap: 4px;
	--nav-radius: 12px;
	--nav-rule-size: 2px;
	--nav-speed: 180ms;
	--nav-spacing: 0px;
	--nav-transform: none;
	--nav-icon-size: 1em;

	display: block;
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
	border-radius: var(--nav-radius);
	font-family: var(--nav-font, inherit);

	/*
	 * Module positions in the template are laid out with flex, and a flex item
	 * is sized by its content unless it is told otherwise. Without this the bar
	 * stops where the last menu item stops and the page shows through beside
	 * it, which reads as "the menu has a white background".
	 */
	width: 100%;
}

/*
 * Edge to edge, whatever container the module sits in. The negative margins
 * are the standard way out of a centred column: half the container's width
 * back, then half the window's width forward. The row inside stays lined up
 * with the rest of the page.
 */
.my-nav.is-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

.my-nav.is-full > .my-nav__bar {
	max-width: var(--nav-inner, 1200px);
	margin: 0 auto;
}

.my-nav.has-line { border: 1px solid var(--nav-line); }
.my-nav.has-shadow { box-shadow: 0 6px 18px rgba(6, 18, 35, .12); }

.my-nav.is-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

.my-nav__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 6px;
}

.my-nav__panel { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------- the row --- */

.my-nav__list,
.my-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.my-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--nav-gap);
}

.my-nav.align-center .my-nav__list { justify-content: center; }
.my-nav.align-right .my-nav__list { justify-content: flex-end; }
.my-nav.align-stretch .my-nav__list > .my-nav__item { flex: 1 1 0; }
.my-nav.align-stretch .my-nav__list > .my-nav__item > .my-nav__link { justify-content: center; }

.my-nav__item {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* ------------------------------------------------------------ the link --- */

.my-nav__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	width: 100%;
	padding: var(--nav-pad-y) var(--nav-pad-x);
	border-radius: var(--nav-radius);
	color: var(--nav-link);
	font-size: var(--nav-size);
	font-weight: var(--nav-weight);
	letter-spacing: var(--nav-spacing);
	text-transform: var(--nav-transform);
	text-decoration: none;
	line-height: 1.3;
	white-space: nowrap;
	transition:
		color var(--nav-speed) ease,
		background-color var(--nav-speed) ease,
		transform var(--nav-speed) ease,
		box-shadow var(--nav-speed) ease;
}

.my-nav.is-italic .my-nav__link { font-style: italic; }

.my-nav__link.is-plain { cursor: default; }
.my-nav__item.is-heading > .my-nav__link { opacity: .78; }

.my-nav__text { min-width: 0; }

/* An icon above its text needs the link to stack rather than sit in a row. */
.my-nav.icons-top .my-nav__link {
	flex-direction: column;
	gap: .25em;
	text-align: center;
	white-space: normal;
}

.my-nav__icon {
	flex: 0 0 auto;
	font-size: var(--nav-icon-size);
	color: var(--nav-icon, currentColor);
	transition: color var(--nav-speed) ease;
}

/* ----------------------------------------------------------- the state --- */

.my-nav__link:hover,
.my-nav__link:focus-visible { color: var(--nav-hover); }

.my-nav__link:hover .my-nav__icon,
.my-nav__link:focus-visible .my-nav__icon { color: var(--nav-icon-hover, var(--nav-hover)); }

.my-nav__item.is-active > .my-nav__link,
.my-nav__item.is-onpath > .my-nav__link {
	color: var(--nav-active);
	background: var(--nav-active-bg);
}

.my-nav__item.is-active > .my-nav__link .my-nav__icon,
.my-nav__item.is-onpath > .my-nav__link .my-nav__icon { color: var(--nav-icon-active, var(--nav-active)); }

.my-nav__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

/* -------------------------------------------------------- hover effect --- */

.my-nav.fx-fill .my-nav__link:hover,
.my-nav.fx-fill .my-nav__link:focus-visible { background: var(--nav-hover-bg); }

.my-nav.fx-pill .my-nav__link { border-radius: 999px; }
.my-nav.fx-pill .my-nav__link:hover,
.my-nav.fx-pill .my-nav__link:focus-visible { background: var(--nav-hover-bg); }
.my-nav.fx-pill .my-nav__item.is-active > .my-nav__link { border-radius: 999px; }

.my-nav.fx-grow .my-nav__link:hover,
.my-nav.fx-grow .my-nav__link:focus-visible { transform: scale(1.07); }

.my-nav.fx-lift .my-nav__link:hover,
.my-nav.fx-lift .my-nav__link:focus-visible {
	transform: translateY(-2px);
	background: var(--nav-hover-bg);
	box-shadow: 0 6px 14px rgba(6, 18, 35, .18);
}

.my-nav.fx-border .my-nav__link {
	border-bottom: var(--nav-rule-size) solid transparent;
	border-radius: var(--nav-radius) var(--nav-radius) 0 0;
}
.my-nav.fx-border .my-nav__link:hover,
.my-nav.fx-border .my-nav__link:focus-visible { border-bottom-color: var(--nav-hover); }
.my-nav.fx-border .my-nav__item.is-active > .my-nav__link { border-bottom-color: var(--nav-active); }

/*
 * A wash that grows out from the middle. It sits behind the text on its own
 * layer so the colour change and the wash can run together.
 */
.my-nav.fx-sweep .my-nav__link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--nav-hover-bg);
	transform: scaleX(0);
	transition: transform var(--nav-speed) ease;
}
.my-nav.fx-sweep .my-nav__link:hover::before,
.my-nav.fx-sweep .my-nav__link:focus-visible::before { transform: scaleX(1); }

/* ----------------------------------------------------------- underline --- */

/*
 * Drawn as a bar rather than text-decoration, so its colour and thickness can
 * be set and so it can grow into place instead of blinking on.
 */
.my-nav__link::after {
	content: '';
	position: absolute;
	left: var(--nav-pad-x);
	right: var(--nav-pad-x);
	bottom: calc(var(--nav-pad-y) * .45);
	height: var(--nav-rule-size);
	border-radius: 2px;
	background: var(--nav-rule, currentColor);
	transform: scaleX(0);
	transition: transform var(--nav-speed) ease;
}

.my-nav.under-none .my-nav__link::after,
.my-nav .my-nav__sub .my-nav__link::after { display: none; }

.my-nav.under-always .my-nav__list > .my-nav__item > .my-nav__link::after { transform: scaleX(1); }

.my-nav.under-hover .my-nav__list > .my-nav__item > .my-nav__link:hover::after,
.my-nav.under-hover .my-nav__list > .my-nav__item > .my-nav__link:focus-visible::after { transform: scaleX(1); }

.my-nav.under-active .my-nav__list > .my-nav__item.is-active > .my-nav__link::after,
.my-nav.under-active .my-nav__list > .my-nav__item.is-onpath > .my-nav__link::after { transform: scaleX(1); }

/* ------------------------------------------------------------ dropdown --- */

.my-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 220px;
	padding: 6px;
	background: var(--nav-drop-bg);
	color: var(--nav-drop-link);
	border-radius: var(--nav-radius);
	box-shadow: 0 14px 34px rgba(6, 18, 35, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity var(--nav-speed) ease,
		transform var(--nav-speed) ease,
		visibility var(--nav-speed) ease;
}

.my-nav__item:hover > .my-nav__sub,
.my-nav__item:focus-within > .my-nav__sub,
.my-nav__item.is-open > .my-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* A third level opens beside its parent rather than on top of it. */
.my-nav__sub .my-nav__sub {
	top: 0;
	left: 100%;
	transform: translateX(6px);
}
.my-nav__sub .my-nav__item:hover > .my-nav__sub,
.my-nav__sub .my-nav__item:focus-within > .my-nav__sub,
.my-nav__sub .my-nav__item.is-open > .my-nav__sub { transform: none; }

/* Near the right edge a submenu would run off the page; open it leftwards. */
.my-nav__item.opens-left > .my-nav__sub { left: auto; right: 0; }
.my-nav__sub .my-nav__item.opens-left > .my-nav__sub { left: auto; right: 100%; }

.my-nav__sub .my-nav__item { display: block; }

.my-nav__sub .my-nav__link {
	color: inherit;
	white-space: normal;
	border-radius: calc(var(--nav-radius) - 4px);
}

.my-nav__sub .my-nav__link:hover,
.my-nav__sub .my-nav__link:focus-visible {
	background: var(--nav-drop-hover-bg, var(--nav-hover-bg));
	color: var(--nav-drop-hover, var(--nav-hover));
	transform: none;
}

/*
 * A dropdown carries its own colours, and the bar's must not reach into it.
 * The rule that marks the page being read is .my-nav__item.is-active > .link,
 * which outweighs a plain .my-nav__sub .link - so on a white dropdown under a
 * coloured bar, the item the visitor is on turned white on white and vanished.
 * These carry the same weight plus one, so the dropdown always decides.
 */
.my-nav__sub .my-nav__item.is-active > .my-nav__link,
.my-nav__sub .my-nav__item.is-onpath > .my-nav__link {
	color: var(--nav-drop-active, var(--nav-drop-link));
	background: var(--nav-drop-active-bg, var(--nav-drop-hover-bg, var(--nav-hover-bg)));
}

.my-nav__sub .my-nav__item.is-active > .my-nav__link .my-nav__icon,
.my-nav__sub .my-nav__item.is-onpath > .my-nav__link .my-nav__icon {
	color: var(--nav-drop-icon, var(--nav-icon, currentColor));
}

.my-nav__sub .my-nav__link .my-nav__icon { color: var(--nav-drop-icon, var(--nav-icon, currentColor)); }

/* -------------------------------------------------------------- caret --- */

.my-nav__caret {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.my-nav__item.has-children > .my-nav__link { padding-right: calc(var(--nav-pad-x) + 18px); }
.my-nav.icons-top .my-nav__item.has-children > .my-nav__link { padding-right: var(--nav-pad-x); }

.my-nav__caret-mark {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform var(--nav-speed) ease;
}

.my-nav__item.is-open > .my-nav__caret .my-nav__caret-mark { transform: rotate(-135deg) translate(-1px, -1px); }
.my-nav__caret:focus-visible { outline: 2px solid currentColor; }

/* A child opens sideways, so its arrow should point that way too. */
.my-nav__sub .my-nav__caret-mark { transform: rotate(-45deg); }
.my-nav__sub .my-nav__item.is-open > .my-nav__caret .my-nav__caret-mark { transform: rotate(45deg); }

/* ------------------------------------------------- mobile bar and drawer --- */

/*
 * Hidden until the per-module media query turns them on, so a wide screen
 * never shows the drawer furniture.
 */
.my-nav__burger,
.my-nav__brand { display: none; }

.my-nav__brand {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--nav-pad-y) 4px;
	color: var(--nav-link);
	font-size: var(--nav-size);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.my-nav__burger {
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--nav-burger, var(--nav-link));
	cursor: pointer;
}

.my-nav__burger:hover { background: var(--nav-hover-bg); }
.my-nav__burger:focus-visible { outline: 2px solid currentColor; }

/* Three strokes: the middle one is the element, the other two its edges. */
.my-nav__burger-mark,
.my-nav__burger-mark::before,
.my-nav__burger-mark::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--nav-speed) ease, opacity var(--nav-speed) ease;
}

.my-nav__burger-mark { position: relative; }

.my-nav__burger-mark::before,
.my-nav__burger-mark::after {
	content: '';
	position: absolute;
	left: 0;
}

.my-nav__burger-mark::before { top: -7px; }
.my-nav__burger-mark::after { top: 7px; }

.my-nav.is-open .my-nav__burger-mark { background: transparent; }
.my-nav.is-open .my-nav__burger-mark::before { transform: translateY(7px) rotate(45deg); }
.my-nav.is-open .my-nav__burger-mark::after { transform: translateY(-7px) rotate(-45deg); }

.my-nav.is-open .my-nav__panel {
	width: 100%;
	padding: 4px 0 10px;
	background: var(--nav-drawer-bg, transparent);
	border-radius: 0 0 var(--nav-radius) var(--nav-radius);
}

.my-nav.is-open .my-nav__panel .my-nav__link { color: var(--nav-drawer-link, var(--nav-link)); }
.my-nav.is-open .my-nav__panel .my-nav__sub .my-nav__link { color: var(--nav-drawer-link, var(--nav-link)); }

/* On a narrow screen a row of stretched items would squash; let them wrap. */
@media (max-width: 640px) {
	.my-nav.align-stretch .my-nav__list > .my-nav__item { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.my-nav *,
	.my-nav *::before,
	.my-nav *::after { transition: none !important; }
	.my-nav__link:hover { transform: none !important; }
}