/*
 * 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-navbar {
	--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;

	/*
	 * The bar's two colours, thinned by however much see-through was asked
	 * for. They are derived rather than set, so a colour picked by hand and a
	 * colour that came from a preset - which may be a var() of the theme's own
	 * - both thin the same way without anyone having to work out an rgba().
	 */
	--nav-alpha: 100%;
	--nav-bg-a: color-mix(in srgb, var(--nav-bg) var(--nav-alpha), transparent);
	--nav-bg2-a: color-mix(in srgb, var(--nav-bg2) var(--nav-alpha), transparent);

	display: block;
	box-sizing: border-box;

	/* The plain colour first, for a browser with no color-mix. */
	background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
	background: linear-gradient(180deg, var(--nav-bg-a), var(--nav-bg2-a));
	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.
 */
.my-navbar.is-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/*
 * The band spans the window while the row of items keeps to the same column as
 * the rest of the page - which is how the template draws its own bar, so the
 * two line up without either having to know about the other. --my-container is
 * the template's own measurement; the fallback is only for a page that has no
 * Gov template behind it.
 */
.my-navbar.is-full > .my-navbar__bar {
	max-width: var(--nav-inner, var(--my-container, 1200px));
	margin: 0 auto;
	padding-inline: 16px;
}

/* Right to the glass, for a bar meant to look like part of the window. */
.my-navbar.is-full.is-edge > .my-navbar__bar { max-width: none; }

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

/* ------------------------------------------------------------ the look --- */

/*
 * Four surfaces for the same bar. Each one only decides how the band and its
 * buttons are painted; the colours themselves still come from the preset and
 * from whatever was chosen by hand, so a look can be swapped without losing
 * the colour scheme.
 */

/* Flat - one solid colour, nothing on top of it. */
.my-navbar.look-flat {
	background: var(--nav-bg);
	background: var(--nav-bg-a);
}

/* Linear - the two colours run across the bar rather than down it. */
.my-navbar.look-linear {
	background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg2));
	background: linear-gradient(90deg, var(--nav-bg-a), var(--nav-bg2-a));
}

/*
 * Transparent - no band at all, just the buttons over whatever is behind.
 * The shadow and the border would both draw the band back in, so they go.
 */
.my-navbar.look-transparent,
.my-navbar.look-transparent.has-shadow {
	background: transparent;
	box-shadow: none;
}
.my-navbar.look-transparent.has-line { border-color: transparent; }

/*
 * 3D - a raised band with raised keys on it. The highlight along the top and
 * the dark line along the bottom are what read as thickness; the solid drop
 * shadow underneath is the side of the block rather than a blur, which is
 * what keeps the edge crisp instead of smudged.
 */
.my-navbar.look-3d {
	background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg2));
	background: linear-gradient(180deg, var(--nav-bg-a), var(--nav-bg2-a));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .38),
		inset 0 -2px 0 rgba(0, 0, 0, .2),
		0 4px 0 rgba(0, 0, 0, .18),
		0 10px 20px rgba(6, 18, 35, .22);
}

.my-navbar.look-3d .my-navbar__link {
	background: rgba(255, 255, 255, .1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .3),
		0 2px 0 rgba(0, 0, 0, .22);
}

.my-navbar.look-3d .my-navbar__link:hover,
.my-navbar.look-3d .my-navbar__link:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .42),
		0 4px 0 rgba(0, 0, 0, .24);
}

/* Pressed: the key drops onto the bar and the light goes under it. */
.my-navbar.look-3d .my-navbar__link:active {
	transform: translateY(2px);
	box-shadow:
		inset 0 2px 5px rgba(0, 0, 0, .34),
		0 0 0 rgba(0, 0, 0, 0);
}

.my-navbar.look-3d .my-navbar__item.is-active > .my-navbar__link,
.my-navbar.look-3d .my-navbar__item.is-onpath > .my-navbar__link {
	transform: translateY(2px);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}

/* Inside a dropdown the keys would fight the card, so they lie flat. */
.my-navbar.look-3d .my-navbar__sub .my-navbar__link {
	background: transparent;
	transform: none;
	box-shadow: none;
}

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

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

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

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

/*
 * The template this module belongs to dresses its own main menu with plain
 * element selectors - ".my-nav ul li > a" and friends - and the module sits
 * inside that very element when it is placed in the "menu" position. Those
 * rules therefore reach straight into this markup and outweigh a single class,
 * which is why every selector below is anchored on .my-navbar as well: two
 * classes beat one class and three elements, whatever order the files load in.
 *
 * The display values matter as much as the colours here. The template hides
 * its dropdowns with "display: none" and shows them on hover, so a submenu
 * that only sets opacity would never appear at all.
 */
.my-navbar .my-navbar__list,
.my-navbar .my-navbar__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.my-navbar .my-navbar__sub { display: block; }

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

.my-navbar.align-center .my-navbar__list { justify-content: center; }
.my-navbar.align-right .my-navbar__list { justify-content: flex-end; }
.my-navbar.align-stretch .my-navbar__list > .my-navbar__item { flex: 1 1 0; }

/*
 * Stretched items are wider than their text, and an arrow pinned to the right
 * edge of one then floats a long way from the label it belongs to. Centring
 * the pair and letting the arrow sit in the flow keeps them together.
 */
.my-navbar.align-stretch .my-navbar__list > .my-navbar__item { justify-content: center; }
.my-navbar.align-stretch .my-navbar__list > .my-navbar__item > .my-navbar__link { width: auto; }

.my-navbar.align-stretch .my-navbar__list > .my-navbar__item.has-children > .my-navbar__link {
	padding-right: var(--nav-pad-x);
}

.my-navbar.align-stretch .my-navbar__list > .my-navbar__item.has-children > .my-navbar__caret {
	position: static;
	transform: none;
	align-self: center;
}

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

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

.my-navbar .my-navbar__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-navbar.is-italic .my-navbar__link { font-style: italic; }

.my-navbar .my-navbar__link.is-plain { cursor: default; }
.my-navbar .my-navbar__item.is-heading > .my-navbar__link { opacity: .78; }

.my-navbar .my-navbar__text { min-width: 0; }

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

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

/*
 * A picture used in place of an icon. Its size is given in em so that it is
 * measured against the menu's own text, exactly as the drawn icons are: raise
 * the font size and the picture grows with it. "contain" keeps a badge or a
 * seal in proportion rather than squashing it into a square.
 */
.my-navbar .my-navbar__icon--img {
	width: var(--nav-icon-size);
	height: var(--nav-icon-size);
	object-fit: contain;
	vertical-align: middle;
}

/* An icon above its text is usually meant to be seen, so a picture earns more room. */
.my-navbar.icons-top .my-navbar__icon--img {
	width: calc(var(--nav-icon-size) * 1.6);
	height: calc(var(--nav-icon-size) * 1.6);
}

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

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

.my-navbar .my-navbar__link:hover .my-navbar__icon,
.my-navbar .my-navbar__link:focus-visible .my-navbar__icon { color: var(--nav-icon-hover, var(--nav-hover)); }

.my-navbar .my-navbar__item.is-active > .my-navbar__link,
.my-navbar .my-navbar__item.is-onpath > .my-navbar__link {
	color: var(--nav-active);
	background: var(--nav-active-bg);
}

.my-navbar .my-navbar__item.is-active > .my-navbar__link .my-navbar__icon,
.my-navbar .my-navbar__item.is-onpath > .my-navbar__link .my-navbar__icon { color: var(--nav-icon-active, var(--nav-active)); }

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

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

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

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

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

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

.my-navbar.fx-border .my-navbar__link {
	border-bottom: var(--nav-rule-size) solid transparent;
	border-radius: var(--nav-radius) var(--nav-radius) 0 0;
}
.my-navbar.fx-border .my-navbar__link:hover,
.my-navbar.fx-border .my-navbar__link:focus-visible { border-bottom-color: var(--nav-hover); }
.my-navbar.fx-border .my-navbar__item.is-active > .my-navbar__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-navbar.fx-sweep .my-navbar__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-navbar.fx-sweep .my-navbar__link:hover::before,
.my-navbar.fx-sweep .my-navbar__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-navbar .my-navbar__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-navbar.under-none .my-navbar__link::after,
.my-navbar .my-navbar__sub .my-navbar__link::after { display: none; }

.my-navbar.under-always .my-navbar__list > .my-navbar__item > .my-navbar__link::after { transform: scaleX(1); }

.my-navbar.under-hover .my-navbar__list > .my-navbar__item > .my-navbar__link:hover::after,
.my-navbar.under-hover .my-navbar__list > .my-navbar__item > .my-navbar__link:focus-visible::after { transform: scaleX(1); }

.my-navbar.under-active .my-navbar__list > .my-navbar__item.is-active > .my-navbar__link::after,
.my-navbar.under-active .my-navbar__list > .my-navbar__item.is-onpath > .my-navbar__link::after { transform: scaleX(1); }

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

/*
 * ความกว้างของกล่องเมนูย่อย
 *
 * An absolutely positioned box left at "width: auto" is shrink-to-fit, and the
 * width it fits into is its containing block - which here is the parent button,
 * a few characters wide. That is what was breaking Thai labels across two and
 * three lines: the box was never allowed to be wider than the word above it,
 * and min-width could only push it out to a fixed number.
 *
 * max-content asks for the width the longest item actually wants; the two
 * custom properties then hold it between a floor and a ceiling, so a menu of
 * short words still reads as a panel rather than a sliver, and one long entry
 * cannot run off the side of the screen.
 */
.my-navbar .my-navbar__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	width: max-content;
	min-width: var(--nav-drop-w, 220px);
	max-width: var(--nav-drop-max, min(90vw, 420px));
	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-navbar .my-navbar__item:hover > .my-navbar__sub,
.my-navbar .my-navbar__item:focus-within > .my-navbar__sub,
.my-navbar .my-navbar__item.is-open > .my-navbar__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

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

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

.my-navbar .my-navbar__sub .my-navbar__item { display: block; }

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

.my-navbar .my-navbar__sub .my-navbar__link:hover,
.my-navbar .my-navbar__sub .my-navbar__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-navbar__item.is-active > .link,
 * which outweighs a plain .my-navbar__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-navbar .my-navbar__sub .my-navbar__item.is-active > .my-navbar__link,
.my-navbar .my-navbar__sub .my-navbar__item.is-onpath > .my-navbar__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-navbar .my-navbar__sub .my-navbar__item.is-active > .my-navbar__link .my-navbar__icon,
.my-navbar .my-navbar__sub .my-navbar__item.is-onpath > .my-navbar__link .my-navbar__icon {
	color: var(--nav-drop-icon, var(--nav-icon, currentColor));
}

.my-navbar .my-navbar__sub .my-navbar__link .my-navbar__icon { color: var(--nav-drop-icon, var(--nav-icon, currentColor)); }

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

.my-navbar .my-navbar__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-navbar .my-navbar__item.has-children > .my-navbar__link { padding-right: calc(var(--nav-pad-x) + 18px); }
.my-navbar.icons-top .my-navbar__item.has-children > .my-navbar__link { padding-right: var(--nav-pad-x); }

.my-navbar .my-navbar__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-navbar .my-navbar__item.is-open > .my-navbar__caret .my-navbar__caret-mark { transform: rotate(-135deg) translate(-1px, -1px); }
.my-navbar .my-navbar__caret:focus-visible { outline: 2px solid currentColor; }

/* A child opens sideways, so its arrow should point that way too. */
.my-navbar .my-navbar__sub .my-navbar__caret-mark { transform: rotate(-45deg); }
.my-navbar .my-navbar__sub .my-navbar__item.is-open > .my-navbar__caret .my-navbar__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-navbar .my-navbar__burger,
.my-navbar .my-navbar__brand { display: none; }

.my-navbar .my-navbar__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-navbar .my-navbar__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-navbar .my-navbar__burger:hover { background: var(--nav-hover-bg); }
.my-navbar .my-navbar__burger:focus-visible { outline: 2px solid currentColor; }

/* Three strokes: the middle one is the element, the other two its edges. */
.my-navbar .my-navbar__burger-mark,
.my-navbar .my-navbar__burger-mark::before,
.my-navbar .my-navbar__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-navbar .my-navbar__burger-mark { position: relative; }

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

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

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

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

.my-navbar.is-open .my-navbar__panel .my-navbar__link { color: var(--nav-drawer-link, var(--nav-link)); }
.my-navbar.is-open .my-navbar__panel .my-navbar__sub .my-navbar__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-navbar.align-stretch .my-navbar__list > .my-navbar__item { flex: 1 1 auto; }
}

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