/*
 * Generic "More Menu" Component
 * -----------------------------
 * This CSS styles a dropdown menu that appears when hovering over a trigger element.
 *
 * Features:
 * - Supports a small list of sub-items, links, or even custom content like images.
 * - Smooth animations for opening/closing and icon rotation.
 * - Styled arrow indicator and shadow for visual polish.
 * - Optional viewport-aware "open upward" placement (see the mm_smart/mm_up
 *   section below) so a trigger near the bottom of the screen doesn't get
 *   clipped.
 *
 * Limitations:
 * - Does NOT scroll: dropdown height is constrained to visible space.
 *   Avoid including too many items or large content blocks.
 *
 * Loading: add 'css/more_menu.css' to $GLOBALS['HEADER_STYLESHEETS'] (and, if
 * the page uses js/more_menu.js's dynamic loading or smart positioning,
 * 'js/more_menu.js' to $GLOBALS['HEADER_JAVASCRIPTS']) before
 * include('page_header.php'). page_header.php outputs HEADER_STYLESHEETS
 * before it buffers page_style.css and the active theme's style.css, so
 * this file's rules always load early enough for a theme's more_menu color
 * overrides (see themes/dark/style.css, themes/waves/style.css) to still win.
 *
 * See Also:
 * - ../js/more_menu.js
 * - ../page_dropdown_more_menu.php
 */



/* === Main title area that reveals the dropdown === */
div.more_menu_title {
	display: inline-block;
	transition: all .5s cubic-bezier(0,.72,.21,1);
}


/* === The hidden dropdown container that appears on hover ===
   Reveal is purely by transform (scaleX unfurl), NOT opacity or translateY:
   the box sits over whatever content is behind the trigger (a word, a dense
   table row, tree-line connectors, ...), so any transparency mid-animation
   lets that content show through and read as an off colour, and a Y-slide
   visibly separates the arrow from the box for a moment in some browsers
   when the box is anchored close to its trigger. Opacity is pinned to 1
   throughout - closed-state hiding is done by "visibility: hidden" instead,
   which fully hides the box regardless of its opacity. (This used to be a
   per-page override on dictionary_type_of_tree.php and
   list_of_thai_syllables.php; promoted here as the component's own default
   since every user of it has the same "opaque box over real content" shape.) */
div.more_menu_content {

	position: absolute;
	z-index: 2; /* feedback icons use z-index: 1 for background effect */

	visibility: hidden;
	opacity: 1;
	height: 0;


	-webkit-transform: scaleX(0);
	-khtml-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);

	/* Quick close (an opaque box would otherwise visibly linger after
	   mouseout, long enough to show two open menus if the pointer jumps
	   straight to another trigger), graceful open - a transition applies at
	   the duration of the state being transitioned TO, so this base
	   (non-hover) duration governs the close and the :hover rule below
	   governs the open. */
	transition: all 0s cubic-bezier(0,.72,.21,1);

	color: white;

}

/* === When hovering over the title, show the dropdown === */
.more_menu_title:hover .more_menu_content {

	visibility: visible;
	height: auto;

	-webkit-transform: scaleX(1);
	-khtml-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);

	transition-duration: .35s;

}

/* === Rotating icon effect for triple dot (menu button) === */
.more_menu_title .triple_dot {
	transform: rotate(0deg);
	width:1.2em;
	height:1.2em;
	transition: all .75s cubic-bezier(0,.72,.21,1);
}


/* === The icon on the left which rotates when the menu is hovered (originally a triple dot, but can be changed) --- */
.more_menu_title:hover .triple_dot {
	transform: rotate(-90deg);
}

/* === Container for the actual menu content / items (inside dropdown) ===
   No opacity toggle here either (see .more_menu_content above) - closed-state
   hiding comes from height:0 plus inheriting visibility:hidden from the
   parent .more_menu_content; opacity is pinned to 1 so nothing fades. */
.more_menu_list_container {
	opacity: 1;
	height: 0;

	transition: all 0s cubic-bezier(0,.72,.21,1);

	background-color: #4a3041;
	border-radius: 2px;

	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 5px 6px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 5px 6px rgba(0,0,0,0.5);
	box-shadow: 0 3px 6px rgba(0,0,0,0.5), 0 5px 6px rgba(0,0,0,0.5);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20);
	-ms-filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=true,ShadowOpacity=0.20);
	margin: 10px;
	margin-top:0;
}

/* === Show menu dropdown content / items when hovering on title === */
.more_menu_title:hover .more_menu_list_container {
	visibility: visible;
	height: auto;
	transition-duration: .35s;
}


/* === Arrow tip that appears above the dropdown ===
   opacity pinned to 1 (see .more_menu_content above) and transition:none -
   the arrow's visibility is INHERITED from .more_menu_content, but without
   transition:none the arrow's own "transition:all" would animate that
   inherited visibility change independently of the box, leaving it lingering
   after the box has already closed (or, opening, lagging a beat behind it). */
.more_menu_content:before {
	display: block;
	opacity: 1;
	position: relative;
	content: '';
	width: 0;
	height: 0;
	left: 1.5em;
	border-top: none;
	border-bottom: 1.1em solid #4a3041;
	border-left: .8em solid transparent;
	border-right: .8em solid transparent;
	border-top:0;
	margin-top:-.0.1em;

	transition: none;
}


/* === Smart up/down positioning (opt-in) ===
   A trigger's own JS (see updateSmartMenuPositions() in more_menu.js) adds
   class "mm_smart" to opt a .more_menu_title into viewport-aware placement,
   and toggles "mm_up" on it when the trigger sits in the lower half of the
   viewport, so a low trigger's dropdown opens upward instead of getting
   clipped off-screen. The rules below only take effect on an element that
   already carries "mm_up" - a plain .more_menu_title (no "mm_smart"/"mm_up")
   is completely unaffected and keeps the default below-the-trigger placement.
   First built for dictionary_type_of_tree.php's word-preview popups;
   generalized here so any more_menu can opt in. The reveal method (opacity
   pinned to 1, scaleX-only transform, arrow transition:none) is already the
   component's default above, so it carries over unchanged - only the actual
   positioning needs flipping here. */
.more_menu_title.mm_up {
	position: relative;
}
.more_menu_title.mm_up .more_menu_content {
	/* Anchor the popup ABOVE the trigger; keep height:auto so a close doesn't
	   collapse height->0 and briefly overflow downward ("pop below" the
	   trigger). column-reverse moves the box above the arrow (the arrow is
	   the content's :before, normally first/top in the down case). */
	top: auto;
	bottom: 100%;
	left: 0;
	height: auto;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
}
.more_menu_title.mm_up .more_menu_list_container {
	height: auto;
	/* The base box uses margin:10px with margin-top:0 so it hugs the arrow
	   above it. Reversed, the arrow sits below, so flip the zero margin to
	   the bottom so it still hugs the arrow. */
	margin-top: 10px;
	margin-bottom: 0;
}
.more_menu_title.mm_up .more_menu_content:before {
	/* Same in-flow base arrow, just rotated to point DOWN (keeps the theme
	   color). */
	transform: rotate(180deg);
}


/* === Unordered list inside dropdown menu (when it uses a list and not other content) === */
ul.more_menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	border: none;
	overflow: hidden;
	background-color: #4a3041;
	border-radius: 2px;
	transition: all .5s cubic-bezier(0,.72,.21,1);
}


/* === Individual more_menu items (the <li>; visual styling lives on the <a>
   below so it's not duplicated on both) === */
.more_menu li {
	width: 100%;
	border-radius: 2px;
	transition: all .5s cubic-bezier(0,.72,.21,1);
}


/* === Make sure that there is no bottom border from the last menu item === */
.more_menu li:last-child {
	border-bottom: none;
}


/* === Links inside menu items === */
.more_menu li a {
	display: block;
	width: 100%;
	background-color: #4a3041;
	color: white;
	text-decoration: none;
	text-align: left;
	padding: 0.5em;
	border-radius: 2px;
	transition: all .5s cubic-bezier(0,.72,.21,1);
}


/* === Hover effect for menu links === */
.more_menu li a:hover {
	display: block;
	width: 100%;
	color: #fa4616;
}