/*
 * mnx-sticky-nav.css  —  Reusable Sticky Navigation Component
 *
 * Description:
 *   Sticky nav with smooth logo transition, transparent mode, mobile hamburger,
 *   and full-viewport section utility. No external dependencies.
 *
 * Public classes:
 *   .mnx-navbar               <nav> element
 *   .mnx-navbar__logo         Logo wrapper
 *   .mnx-navbar__links        Desktop nav <ul>
 *   .mnx-navbar__hamburger    Mobile toggle button
 *   .mnx-navbar__mobile-menu  Mobile nav panel
 *   .mnx-fullscreen           Full-viewport section utility
 *   .mnx-bg-cover             background-size:cover helper
 *   .mnx-bg-overlay           Dark overlay (55%) for readability
 *   .mnx-bg-overlay--light    Lighter overlay (35%) for transparent-nav hero
 *
 * State classes (managed by mnx-sticky-nav.js):
 *   .is-sticky                Scrolled state — smaller nav
 *   .is-open                  Mobile menu open
 *   .is-transparent-mode      Set when data-transparent="true"
 *   .is-transparent-at-top    Transparent nav is at scroll-top
 *
 * CSS custom properties (override on :root or inline on <nav>):
 *   --mnx-nav-bg              Solid background colour
 *   --mnx-nav-full-height     Height at page top  (default 77px)
 *   --mnx-nav-sticky-height   Height when sticky  (default 60px)
 *   --mnx-nav-transition      Transition speed + easing
 *   --mnx-nav-z-index         Stacking order
 *   --mnx-nav-link-color      Link colour
 *   --mnx-nav-link-hover      Link hover colour
 *   --mnx-nav-height          [runtime, set by JS] current rendered height
 *   --mnx-nav-offset          [runtime, set by JS] 0px (transparent) or nav-height (opaque)
 *
 * Logo sizing:
 *   The component sets ONLY max-height on the logo <img>; it never overrides
 *   width or height. Set size freely via inline style on <img>:
 *     style="width: 160px; height: auto;"   <- width-driven, height auto
 *     style="height: 52px; width: auto;"    <- height-driven, width auto
 *   object-fit: contain ensures the image always scales proportionally within
 *   its box even when max-height clips the intrinsic height.
 *
 * Nav height from inline style:
 *   If you set  style="height: 300px;"  on <nav class="mnx-navbar">, that
 *   becomes the full (expanded) height. JS reads it on init and updates the
 *   --mnx-nav-full-height variable on the element. The sticky state always
 *   overrides with --mnx-nav-sticky-height via !important.
 *
 * Menu alignment:
 *   Default: links aligned to the right.
 *   Center:  add  data-nav-align="center"  to <nav>.
 *   See README.md § Menu Alignment for details.
 *
 * Transparent mode (disabled by default):
 *   1. Add  data-transparent="true"  to <nav>.
 *   2. Uncomment the TRANSPARENT MODE block below.
 */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {
	--mnx-nav-bg:              #000000;
	--mnx-nav-border-bottom:   transparent;

	/*
	 * --mnx-nav-full-height: the primary height control for the full (expanded)
	 * nav. This is also the default max-height for the logo image, so increasing
	 * this value makes both the nav taller AND allows a bigger logo.
	 * The nav itself is height:auto and grows to fit the logo up to this value.
	 */
	--mnx-nav-full-height:     77px;

	/*
	 * --mnx-nav-max-height: absolute ceiling. Prevents the nav from ever
	 * exceeding this even if --mnx-nav-full-height is set very large.
	 * Default: min(500px, 35vh).
	 */
	--mnx-nav-max-height:      min(500px, 35vh);
	--mnx-nav-sticky-height:   60px;
	--mnx-nav-transition:      0.3s ease;
	--mnx-nav-z-index:         1030;
	--mnx-nav-link-color:      #ffffff;
	--mnx-nav-link-hover:      #cccccc;
	--mnx-nav-font-size:       0.85rem;
	--mnx-nav-font-weight:     500;
	--mnx-nav-letter-spacing:  0.06em;
	/* Runtime — written by JS, do not set manually */
	--mnx-nav-height:          77px;
	--mnx-nav-offset:          77px;
	--mnx-nav-valign:          center;   /* set by JS from data-nav-valign */
	--mnx-nav-valign-sticky:   center;   /* set by JS from data-nav-valign-sticky */
}


/* ============================================================
   2. NAV BASE
   ============================================================ */

/*
 * height: auto — the nav grows to wrap the logo.
 * min-height uses --mnx-nav-full-height so there is always vertical space
 * equal to the intended full-height, making data-valign meaningful even
 * when the logo is smaller than the nav. The logo's max-height (below)
 * also uses --mnx-nav-full-height as its cap, keeping them in sync.
 * max-height (--mnx-nav-max-height) is the absolute safety ceiling.
 * An inline style="height: Npx" on <nav> pins a specific height.
 */
.mnx-navbar {
	position:         fixed;
	top:              0;
	left:             0;
	right:            0;
	z-index:          var(--mnx-nav-z-index);
	display:          flex;
	align-items:      var(--mnx-nav-valign, center);
	justify-content:  space-between;
	flex-wrap:        nowrap;
	height:           auto;
	min-height:       var(--mnx-nav-full-height, 77px);  /* ← drives valign space */
	max-height:       var(--mnx-nav-max-height);
	background-color: var(--mnx-nav-bg);
	border-bottom:    1px solid var(--mnx-nav-border-bottom);
	padding:          0.5rem 2rem;
	box-sizing:       border-box;
	transition:
		min-height       var(--mnx-nav-transition),
		max-height       var(--mnx-nav-transition),
		background-color var(--mnx-nav-transition),
		border-color     var(--mnx-nav-transition),
		box-shadow       var(--mnx-nav-transition);
}


/* ============================================================
   3. STICKY STATE
   !important overrides any inline style="height: Npx" on <nav>
   ============================================================ */

/*
 * All three height properties use !important so the sticky size is enforced
 * regardless of any inline style="height: Npx" set on the nav element.
 */
.mnx-navbar.is-sticky {
	height:      var(--mnx-nav-sticky-height) !important;
	min-height:  var(--mnx-nav-sticky-height) !important;
	max-height:  var(--mnx-nav-sticky-height) !important;
	box-shadow:  0 2px 12px rgba(0, 0, 0, 0.45);
	align-items: var(--mnx-nav-valign-sticky, center);
}


/* ============================================================
   4. TRANSPARENT MODE  ← DISABLED BY DEFAULT
   ============================================================
   To enable: uncomment the block below AND set
   data-transparent="true" on <nav class="mnx-navbar">.

.mnx-navbar.is-transparent-mode.is-transparent-at-top {
	background-color: transparent;
	box-shadow:       none;
}

   Optional gradient to keep links readable on bright images:

.mnx-navbar.is-transparent-mode.is-transparent-at-top {
	background-image: linear-gradient(
		to bottom, rgba(0,0,0,0.45) 0%, transparent 100%
	);
	background-color: transparent;
	box-shadow:       none;
}
   ============================================================ */


/* ============================================================
   5. LOGO
   ============================================================ */

.mnx-navbar__logo {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	position:    relative;
	z-index:     2;
}

.mnx-navbar__logo a {
	display:     inline-flex;
	align-items: center;
	line-height: 1;
}

/*
 * Logo max-height uses --mnx-nav-full-height (default 77px) as the cap,
 * NOT --mnx-nav-max-height. This gives a sensible default: without any
 * explicit logo size, the logo will be at most 77px tall, and the nav
 * grows to match. To allow a taller logo, raise --mnx-nav-full-height.
 *
 * object-fit: contain  scales the image to fit within its element box
 *                       while preserving the aspect ratio.
 * object-position: left center  prevents the image from being horizontally
 *   centred within its box when max-height clips a width-driven image.
 *   Example: width:360px on img → element box is 360px wide; if max-height
 *   clips the height the rendered image is ~330px wide inside a 360px box.
 *   Without this, the image appears to shift to the centre on transition.
 */
.mnx-navbar__logo img {
	max-height:      var(--mnx-nav-full-height, 77px);
	max-width:       100%;
	object-fit:      contain;
	object-position: left center;
	vertical-align:  middle;
	transition:      max-height var(--mnx-nav-transition);
}

.mnx-navbar.is-sticky .mnx-navbar__logo img {
	max-height: calc(var(--mnx-nav-sticky-height) - 1rem);
}


/* ============================================================
   6. DESKTOP NAV LINKS
   ============================================================ */

.mnx-navbar__links {
	display:     flex;
	align-items: center;
	list-style:  none;
	margin:      0 0 0 auto;  /* right-aligned by default */
	padding:     0;
}

.mnx-navbar__links li {
	position: relative;
}

.mnx-navbar__links a {
	display:         block;
	padding:         0.5rem 0.9rem;
	color:           var(--mnx-nav-link-color);
	font-size:       var(--mnx-nav-font-size);
	font-weight:     var(--mnx-nav-font-weight);
	letter-spacing:  var(--mnx-nav-letter-spacing);
	text-transform:  uppercase;
	text-decoration: none;
	white-space:     nowrap;
	transition:      color 0.2s ease;
}

.mnx-navbar__links a:hover,
.mnx-navbar__links a:focus {
	color:   var(--mnx-nav-link-hover);
	outline: none;
}

.mnx-navbar__links a[aria-current="page"] {
	color: var(--mnx-nav-link-hover);
}

/* Dropdown indicator */
.mnx-navbar__links .has-dropdown > a::after {
	content:        '';
	display:        inline-block;
	width:          0;
	height:         0;
	margin-left:    0.4em;
	vertical-align: middle;
	border-top:     0.32em solid currentColor;
	border-right:   0.32em solid transparent;
	border-left:    0.32em solid transparent;
	transition:     transform 0.2s ease;
}

.mnx-navbar__links .has-dropdown.is-open > a::after {
	transform: rotate(180deg);
}


/* ============================================================
   7. MENU ALIGNMENT
   Default is right-aligned (margin-left: auto above).
   data-nav-align="center" centres the links between logo and edge.
   ============================================================ */

.mnx-navbar[data-nav-align="center"] .mnx-navbar__links {
	position:  absolute;
	left:      50%;
	transform: translateX(-50%);
	margin:    0;  /* override the margin-left: auto */
}


/* ============================================================
   8. DESKTOP DROPDOWN MENUS
   ============================================================ */

.mnx-navbar__links .dropdown-menu {
	position:         absolute;
	top:              100%;
	left:             0;
	min-width:        10rem;
	list-style:       none;
	margin:           0;
	padding:          0.5rem 0;
	background-color: var(--mnx-nav-bg);
	box-shadow:       0 4px 12px rgba(0, 0, 0, 0.3);
	display:          none;
	z-index:          1;
}

.mnx-navbar__links .has-dropdown.is-open > .dropdown-menu {
	display: block;
}

.mnx-navbar__links .dropdown-menu a {
	padding:        0.45rem 1.25rem;
	font-size:      0.8rem;
	text-transform: none;
	letter-spacing: normal;
}

.mnx-navbar__links .dropdown-menu a:hover {
	background-color: rgba(255, 255, 255, 0.08);
}


/* ============================================================
   9. HAMBURGER BUTTON
   position: relative + z-index: 2 keeps it above the mobile
   panel within the nav's stacking context.
   ============================================================ */

.mnx-navbar__hamburger {
	display:         none;
	flex-direction:  column;
	justify-content: space-between;
	width:           28px;
	height:          20px;
	cursor:          pointer;
	background:      none;
	border:          none;
	padding:         0;
	flex-shrink:     0;
	position:        relative;
	z-index:         2;
}

.mnx-navbar__hamburger span {
	display:          block;
	width:            100%;
	height:           2px;
	background-color: var(--mnx-nav-link-color);
	border-radius:    2px;
	transform-origin: center;
	transition:
		transform  0.25s ease,
		opacity    0.2s  ease;
}

/* Animate bars → X when menu is open */
.mnx-navbar.is-open .mnx-navbar__hamburger span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.mnx-navbar.is-open .mnx-navbar__hamburger span:nth-child(2) {
	opacity:   0;
	transform: scaleX(0);
}
.mnx-navbar.is-open .mnx-navbar__hamburger span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}


/* ============================================================
   10. MOBILE MENU PANEL
   top: var(--mnx-nav-height) starts the panel BELOW the nav bar,
   so the hamburger/X button is never covered by the sliding panel.
   ============================================================ */

.mnx-navbar__mobile-menu {
	display:          block;
	position:         fixed;
	top:              var(--mnx-nav-height, var(--mnx-nav-full-height, 77px));
	left:             0;
	right:            0;
	bottom:           0;
	background-color: var(--mnx-nav-bg);
	z-index:          calc(var(--mnx-nav-z-index) - 1);
	overflow-y:       auto;
	padding:          1.5rem 2rem 2rem;
	box-sizing:       border-box;
	transform:        translateX(-100%);
	transition:       transform 0.3s ease;
}

.mnx-navbar.is-open .mnx-navbar__mobile-menu {
	transform: translateX(0);
}

.mnx-navbar__mobile-menu ul {
	list-style: none;
	margin:     0;
	padding:    0;
}

.mnx-navbar__mobile-menu li {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mnx-navbar__mobile-menu a {
	display:         block;
	padding:         1rem 0.25rem;
	color:           var(--mnx-nav-link-color);
	font-size:       1rem;
	font-weight:     500;
	text-decoration: none;
	transition:      color 0.2s ease;
}

.mnx-navbar__mobile-menu a:hover {
	color: var(--mnx-nav-link-hover);
}

.mnx-navbar__mobile-menu .dropdown-menu {
	list-style:  none;
	padding:     0 0 0.5rem 1rem;
	margin:      0;
	display:     none;
}

.mnx-navbar__mobile-menu .has-dropdown.is-open > .dropdown-menu {
	display: block;
}

.mnx-navbar__mobile-menu .dropdown-menu a {
	padding:   0.65rem 0.25rem;
	font-size: 0.9rem;
	color:     rgba(255, 255, 255, 0.75);
}


/* ============================================================
   11. RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1023px) {
	.mnx-navbar__hamburger { display: flex; }
	.mnx-navbar__links     { display: none; }
}

@media (min-width: 1024px) {
	.mnx-navbar__mobile-menu { display: none !important; }
}


/* ============================================================
   12. FULL-VIEWPORT SECTION UTILITY
   JS sets --mnx-nav-offset to:
     nav-height  → opaque nav  (section starts below nav)
     0px         → transparent (section fills full viewport)
   ============================================================ */

.mnx-fullscreen {
	min-height: calc(100vh - var(--mnx-nav-offset, 0px));
	margin-top: var(--mnx-nav-offset, 0px);
	box-sizing: border-box;
	position:   relative;
}


/* ============================================================
   13. BACKGROUND IMAGE HELPERS
   ============================================================ */

.mnx-bg-cover {
	background-size:     cover;
	background-position: center center;
	background-repeat:   no-repeat;
}

/* 55% dark overlay — use with opaque nav */
.mnx-bg-overlay::before {
	content:          '';
	position:         absolute;
	inset:            0;
	background-color: rgba(0, 0, 0, 0.55);
	z-index:          0;
	pointer-events:   none;
}

.mnx-bg-overlay > * {
	position: relative;
	z-index:  1;
}

/* 35% dark overlay — use with transparent nav / hero sections */
.mnx-bg-overlay--light::before {
	background-color: rgba(0, 0, 0, 0.35);
}