/* =====================================================================
 * menu-modern.css  —  Menu spacing / padding / size modernization
 * ---------------------------------------------------------------------
 * Scope:   Top navigation menu only (main + member layouts).
 * Rule:    SPACING / PADDING / SIZE ONLY. No layout changes — do not
 *          touch float / display / position / width of structural
 *          containers. Only padding, margin, gap, font-size,
 *          line-height, border-radius (cosmetic radius), letter-spacing.
 * Loaded:  after theme-modern.css so it refines the menu last.
 * Safety:  All selectors are scoped to .nav-pills (the top menu) so the
 *          scaffold breadcrumb (.nav[role="navigation"]) and data grids
 *          are NOT affected.
 * Rollback: remove this file + its <link> in main.gsp / member_main.gsp.
 * ===================================================================== */

/* =====================================================================
 * DESKTOP  (> 768px)
 * Mobile uses the off-canvas sidebar defined inline in main.gsp; keep
 * these desktop rules out of the mobile breakpoint.
 * ===================================================================== */
@media screen and (min-width: 769px) {

	/* ---------- Menu bar ---------- */
	.nav-pills.nav-menu,
	.nav-container .nav-pills {
		padding: 8px 12px !important;     /* compact bar height; horizontal kept */
	}

	/* Drop the oversized phantom bottom padding on the inner list */
	.nav-pills.nav-menu ul,
	.nav-container .nav-pills > ul {
		padding-bottom: 0 !important;     /* was 33px */
	}

	/* ---------- Top-level items ---------- */
	.nav-pills.nav-menu > li,
	.nav-container .nav-pills > li {
		margin-right: 4px !important;     /* was 0.5em — consistent gap */
		padding: 0 !important;            /* normalize 3px 0 / 0 conflict */
	}

	.nav-pills.nav-menu > li:last-child,
	.nav-container .nav-pills > li:last-child {
		margin-right: 0 !important;
	}

	.nav-pills.nav-menu > li > a,
	.nav-container .nav-pills > li > a {
		padding: 9px 14px !important;     /* reduced vertical for compact bar */
		border-radius: 8px !important;    /* unify 6px / 0.8em conflict */
		font-weight: 500 !important;
		letter-spacing: 0.01em !important;
		line-height: 1.4 !important;
	}

	/* ---------- Dropdown panel ---------- */
	.nav-pills.nav-menu .dropdown-menu,
	.nav-container .nav-pills .dropdown-menu {
		padding: 6px !important;          /* was 8px 0 */
		border-radius: 14px !important;   /* was 20px — softer, modern */
		min-width: 210px !important;      /* readable floor */
		max-width: 340px !important;      /* long names wrap instead of overflowing */
	}

	.nav-pills.nav-menu .dropdown-menu li,
	.nav-container .nav-pills .dropdown-menu li {
		width: 100% !important;           /* full row — prevent float side-by-side */
		float: none !important;           /* override any inherited float:left */
		display: block !important;        /* stack vertically, one per row */
		box-sizing: border-box !important;
		margin: 2px 0 !important;
	}

	.nav-pills.nav-menu .dropdown-menu li > a,
	.nav-container .nav-pills .dropdown-menu li > a {
		display: block !important;        /* fill the row so hover bg spans full width */
		padding: 8px 14px !important;     /* was 8px 15px */
		border-radius: 8px !important;    /* was 10px — match top items */
		line-height: 1.4 !important;
		/* Bug fix: bootstrap sets white-space:nowrap, so long names overflowed
		 * their 88% box and the hover background did not cover the text.
		 * Allow wrapping so the highlight always spans the whole item. */
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}

	/* Keep the bottom-rounded bar corners consistent with new radius */
	.nav-menu {
		border-bottom-left-radius: 16px !important;   /* was 20px */
		border-bottom-right-radius: 16px !important;
	}
}

/* =====================================================================
 * MOBILE  (<= 768px)  — off-canvas sidebar
 * The inline <style> in main.gsp sets these with !important, and this
 * file loads AFTER it, so equal-specificity + !important means these win.
 * Gentle tightening + radius consistency; no layout/width changes.
 * ===================================================================== */
@media screen and (max-width: 768px) {

	/* ---------- "Menu" section label ---------- */
	.nav-pills.nav-menu::before,
	#mainNavMenu::before {
		padding: 18px 16px 10px 16px !important;  /* was 20px 20px 12px */
	}

	/* ---------- Top-level items: rounded inset pills ---------- */
	.nav-pills.nav-menu > li > a,
	#mainNavMenu > li > a {
		margin: 3px 10px !important;      /* inset from edges -> pill look */
		padding: 12px 16px !important;    /* was 14px 20px */
		font-size: 14.5px !important;     /* was 15px */
		line-height: 1.4 !important;
		border-radius: 12px !important;   /* was 0 (square) */
		border-left: none !important;     /* drop the square left accent bar */
		/* Long names wrap cleanly; keep the arrow pinned to the right */
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		align-items: center !important;
	}

	/* ---------- Dropdown toggle arrow: fix corrupted glyph ----------
	 * Source main.gsp uses a mojibake character. Use a clean chevron via
	 * a CSS unicode escape so file encoding can never corrupt it again. */
	.nav-pills.nav-menu > li.dropdown > a::after,
	#mainNavMenu > li.dropdown > a::after {
		content: "\203A" !important;      /* > chevron */
		font-family: Arial, "Segoe UI", sans-serif !important;
		flex: 0 0 auto !important;        /* never shrink / wrap */
		margin-left: auto !important;     /* pin to the far right edge */
		padding-left: 10px !important;    /* gap from wrapping text */
		font-size: 20px !important;
		line-height: 1 !important;
	}

	/* Keep rotation crisp when the dropdown is open (points down) */
	.nav-pills.nav-menu > li.dropdown.open > a::after,
	#mainNavMenu > li.dropdown.open > a::after {
		transform: rotate(90deg) !important;
	}

	/* ---------- Dropdown panel & sub-items: rounded inset ---------- */
	.nav-pills.nav-menu .dropdown-menu,
	#mainNavMenu .dropdown-menu {
		padding: 4px 0 !important;        /* was 5px 0 */
		margin: 2px 10px 6px 10px !important;
		border-radius: 12px !important;
	}

	.nav-pills.nav-menu .dropdown-menu li a,
	#mainNavMenu .dropdown-menu li a {
		margin: 2px 8px !important;
		padding: 10px 14px 10px 26px !important;  /* was 12px 20px 12px 35px */
		font-size: 13.5px !important;             /* was 14px */
		line-height: 1.4 !important;
		border-radius: 10px !important;
		white-space: normal !important;
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
	}
}

/* Extra-small phones — keep proportions tight */
@media screen and (max-width: 480px) {
	.nav-pills.nav-menu > li > a,
	#mainNavMenu > li > a {
		margin: 3px 8px !important;
		padding: 11px 14px !important;
		font-size: 14px !important;
		border-radius: 10px !important;
	}

	.nav-pills.nav-menu .dropdown-menu li a,
	#mainNavMenu .dropdown-menu li a {
		padding: 10px 12px 10px 24px !important;
	}
}

/* ---------------------------------------------------------------------
 * Tame the dropdown sub-item hover "slide": main.gsp jumps padding-left
 * to 40px on hover, which looks janky against the tighter rounded pills.
 * Match its high-specificity selectors so the slide stays gentle.
 * ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	#grailsLogo_red .nav-pills.nav-menu .dropdown-menu li a:hover,
	body.max-theme .nav-pills.nav-menu .dropdown-menu li a:hover,
	body.max-theme #mainNavMenu .dropdown-menu li a:hover,
	#grailsLogo_blue .nav-pills.nav-menu .dropdown-menu li a:hover,
	body:not(.max-theme) .nav-pills.nav-menu .dropdown-menu li a:hover,
	body:not(.max-theme) #mainNavMenu .dropdown-menu li a:hover {
		padding-left: 30px !important;    /* base 26px -> gentle 4px slide */
	}
}