/*
 * BNS HNF — Frontend Stylesheet
 */

/* =========================================================================
   CSS Custom Properties
   ========================================================================= */
:root {
	--bns-scrolled-bg:          #111111;
	--bns-height-default:       130px;
	--bns-height-scrolled:      62px;
	--bns-header-border-width:  0px;
	--bns-header-border-color:  #333333;
	--bns-menu-font-size:    56px;
	--bns-overlay-pad-top:    80px;
	--bns-overlay-pad-bottom: 80px;
	--bns-header-pad-top:     0px;
	--bns-header-pad-bottom:  0px;
	--bns-menu-color:      #ffffff;
	--bns-menu-hover:      #cccccc;
	--bns-overlay-opacity: 0.7;
	--bns-logo-max-width:  160px;
	--bns-accent:          #4a9eff;
	--bns-easing:          cubic-bezier(0.215, 0.61, 0.355, 1);
	--bns-duration:        0.4s;
}

/* =========================================================================
   Header
   z-index 10001 — sits above the overlay (9999) so the hamburger
   button remains visible and clickable while the overlay is open.
   ========================================================================= */
#bns-hnf-header {
	position:    fixed;
	top:         0;
	left:        0;
	right:       0;
	height:      var(--bns-height-default);
	background:  transparent;
	z-index:     10001;
	box-sizing:  border-box;
	overflow-x:  hidden;
	max-width:   100%;
	border-bottom: var(--bns-header-border-width) solid transparent;
	transition:
		height        var(--bns-duration) var(--bns-easing),
		background    var(--bns-duration) var(--bns-easing),
		transform     var(--bns-duration) var(--bns-easing),
		border-color  var(--bns-duration) var(--bns-easing);
}

#bns-hnf-header.bns-scrolled {
	height:             var(--bns-height-scrolled);
	background:         var(--bns-scrolled-bg);
	border-bottom-color: var(--bns-header-border-color);
}

#bns-hnf-header.bns-hidden {
	transform: translateY(-100%);
}

/* When overlay is open: force header transparent + full height so it
   acts as a see-through layer showing logo + MENU/close button.
   Also cancel any hidden state so the button is always reachable. */
body.bns-menu-open #bns-hnf-header {
	background: transparent !important;
	transform:  none !important;
	height:     var(--bns-height-default) !important;
}

/* Inner: logo left, hamburger right, both vertically centred */
.bns-hnf-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          100%;
	padding:         var(--bns-header-pad-top) clamp(16px, 4vw, 60px) var(--bns-header-pad-bottom);
	box-sizing:      border-box;
}

/* =========================================================================
   Logo
   ========================================================================= */
.bns-hnf-logo {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.bns-hnf-logo a {
	display:         flex;
	align-items:     center;
	text-decoration: none;
	line-height:     0;
}

.bns-hnf-logo img {
	display:          block;
	width:            100%;
	max-width:        min(var(--bns-logo-max-width), 40vw);
	height:           auto;
	max-height:       60%;
	object-fit:       contain;
	object-position:  left center;
	transition:
		opacity    var(--bns-duration) var(--bns-easing),
		max-height var(--bns-duration) var(--bns-easing);
}

#bns-hnf-header.bns-scrolled .bns-hnf-logo img {
	max-height: 55%;
}

.bns-logo-light { opacity: 1; }
.bns-logo-dark  { display: none; opacity: 0; }

#bns-hnf-header.bns-scrolled .bns-logo-light { opacity: 0; display: none; }
#bns-hnf-header.bns-scrolled .bns-logo-dark  { display: block; opacity: 1; }

.bns-hnf-logo a img:only-child { opacity: 1 !important; display: block !important; }

.bns-site-title {
	color:          #ffffff;
	font-size:      clamp(1rem, 2.5vw, 1.5rem);
	font-weight:    700;
	letter-spacing: 1px;
	white-space:    nowrap;
}

/* =========================================================================
   Right actions
   ========================================================================= */
.bns-hnf-actions {
	display:     flex;
	align-items: center;
	gap:         clamp(10px, 2vw, 24px);
	flex-shrink: 0;
}

/* =========================================================================
   Hamburger Button
   ========================================================================= */

/* Hard reset — defeats any WP / theme button styles */
#prk_hamburger,
#prk_hamburger:hover,
#prk_hamburger:focus,
#prk_hamburger:active {
	background:         transparent !important;
	background-color:   transparent !important;
	border:             none !important;
	box-shadow:         none !important;
	outline:            none !important;
	-webkit-appearance: none;
	appearance:         none;
}

#prk_hamburger {
	cursor:      pointer;
	padding:     8px 10px;
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-shrink: 0;
}

/* "MENU" text — always visible, never fades out */
.bns-hamburger-label {
	color:          #ffffff;
	font-family:    'Source Sans Pro', sans-serif;
	font-size:      clamp(0.7rem, 1.2vw, 0.875rem);
	font-weight:    600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height:    1;
	user-select:    none;
	transition:     color var(--bns-duration) var(--bns-easing);
}

/* Bars wrapper — fixed 20px height keeps X-animation math constant */
.bns-bars {
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	width:           28px;
	height:          20px;
	transition:      height    0.28s var(--bns-easing),
	                 transform 0.35s var(--bns-easing);
}

/* Individual bar */
.bns-bar {
	display:          block;
	width:            100%;
	height:           2px;
	background:       #ffffff;
	border-radius:    2px;
	flex-shrink:      0;
	position:         relative;
	overflow:         hidden;
	transform-origin: center center;
	transition:
		transform var(--bns-duration) var(--bns-easing),
		opacity   var(--bns-duration) var(--bns-easing);
}

/* Blue colour-slide pseudo-element on each bar */
.bns-bar::after {
	content:    '';
	position:   absolute;
	top:        0;
	height:     100%;
	width:      0;
	background: var(--bns-accent);
	transition: width 0.35s var(--bns-easing);
}
.bns-bar-1::after, .bns-bar-3::after { left: 0; right: auto; } /* slides from LEFT  */
.bns-bar-2::after                    { right: 0; left: auto;  } /* slides from RIGHT */

/* -----------------------------------------------------------------------
   Hover — only when NOT in any animation/open state
   --------------------------------------------------------------------- */
#prk_hamburger:not(.bns-collapsing):not(.bns-cross):not(.bns-uncrossing):hover .bns-hamburger-label {
	color: var(--bns-accent);
}
#prk_hamburger:not(.bns-collapsing):not(.bns-cross):not(.bns-uncrossing):hover .bns-bars {
	height: 12px; /* bars draw closer */
}
#prk_hamburger:not(.bns-collapsing):not(.bns-cross):not(.bns-uncrossing):hover .bns-bar::after {
	width: 100%;
}

/* -----------------------------------------------------------------------
   Hover on × — rotate the whole cross 90° to hint it's clickable
   --------------------------------------------------------------------- */
#prk_hamburger.bns-cross:hover .bns-bars {
	transform: rotate(90deg);
}

/* -----------------------------------------------------------------------
   Phase 1 — open: 3 bars merge to 1 line (bar 1 & 3 move to centre)
   Math: .bns-bars height=20px, bar height=2px, space-between gives
         bar-1 centre at y=1, bar-3 centre at y=19, container centre y=10.
         translateY(9px) / translateY(-9px) lands them on the centre bar.
   --------------------------------------------------------------------- */
#prk_hamburger.bns-collapsing .bns-bar-1 { transform: translateY(9px); }
#prk_hamburger.bns-collapsing .bns-bar-3 { transform: translateY(-9px); }

/* -----------------------------------------------------------------------
   Phase 2 — open: 1 line rotates to ×
   translateY stays the same from Phase 1 — only rotation is added.
   --------------------------------------------------------------------- */
#prk_hamburger.bns-cross .bns-bar-1 { transform: translateY(9px)  rotate(45deg);  }
#prk_hamburger.bns-cross .bns-bar-2 { opacity: 0; transform: scaleX(0);            }
#prk_hamburger.bns-cross .bns-bar-3 { transform: translateY(-9px) rotate(-45deg); }

/* Reset bar compression when cross so X-math is always based on 20px */
#prk_hamburger.bns-cross .bns-bars,
#prk_hamburger.bns-collapsing .bns-bars {
	height: 20px !important;
}

/* -----------------------------------------------------------------------
   Phase 1 — close: × unrotates back to 1 line (translateY kept, rotation removed)
   --------------------------------------------------------------------- */
#prk_hamburger.bns-uncrossing .bns-bar-1 { transform: translateY(9px);  }
#prk_hamburger.bns-uncrossing .bns-bar-2 { opacity: 1; transform: scaleX(1); }
#prk_hamburger.bns-uncrossing .bns-bar-3 { transform: translateY(-9px); }

/*
 * Phase 2 — close is implicit: when bns-uncrossing is removed by JS,
 * all bars return to transform:none via the default .bns-bar transition.
 */

/* =========================================================================
   Fullscreen Overlay  (display:flex — NOT table — so close button works)
   ========================================================================= */
#prk_hidden_menu {
	position:        fixed;
	top:             0;
	left:            0;
	right:           0;
	height:          0;
	z-index:         9999;
	max-width:       100%;
	box-sizing:      border-box;
	display:         flex;
	align-items:     center;
	justify-content: center;
	visibility:      hidden;
	opacity:         0;
	overflow:        hidden;
	transition:
		opacity    var(--bns-duration) var(--bns-easing),
		height     var(--bns-duration) var(--bns-easing),
		visibility var(--bns-duration) var(--bns-easing);
}

#prk_hidden_menu.bns-open {
	height:     100dvh;
	min-height: 100vh;
	visibility: visible;
	opacity:    1;
	overflow-y: auto;
}

/* Background image layer */
.bns-overlay-bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: top center;
	background-repeat:   no-repeat;
	background-color:    #1a1a1a;
	z-index:             0;
}

/* Dark tint */
.bns-overlay-tint {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, var(--bns-overlay-opacity));
	z-index:    1;
}

/* =========================================================================
   Overlay centred content
   ========================================================================= */
.bns-overlay-content {
	position:       relative;
	z-index:        5;
	text-align:     center;
	width:          100%;
	padding-top:    var(--bns-overlay-pad-top);
	padding-bottom: var(--bns-overlay-pad-bottom);
	padding-left:   clamp(20px, 8vw, 120px);
	padding-right:  clamp(20px, 8vw, 120px);
	box-sizing:     border-box;
}

/* =========================================================================
   Overlay Navigation — stagger-grow entrance
   ========================================================================= */
.bns-overlay-nav {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* Items invisible by default; animation fires once overlay gets .bns-open */
.bns-overlay-nav li {
	opacity:          0;
	transform:        scale(0.4);
	transform-origin: center center;
}

/*
 * Three-keyframe grow: start tiny → slight overshoot → settle at full size.
 * The overshoot (scale 1.06 at 65%) gives an organic, springy feel without
 * needing a physics library.
 */
@keyframes bns-item-enter {
	0%   { opacity: 0; transform: scale(0.4);    }
	65%  { opacity: 1; transform: scale(1.06);   }
	100% { opacity: 1; transform: scale(1);      }
}

#prk_hidden_menu.bns-open .bns-overlay-nav li {
	animation: bns-item-enter 0.75s var(--bns-easing) both;
}

/* Each item starts 140ms after the previous one */
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(1)  { animation-delay: 0.15s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(2)  { animation-delay: 0.29s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(3)  { animation-delay: 0.43s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(4)  { animation-delay: 0.57s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(5)  { animation-delay: 0.71s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(6)  { animation-delay: 0.85s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(7)  { animation-delay: 0.99s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(8)  { animation-delay: 1.13s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(9)  { animation-delay: 1.27s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(10) { animation-delay: 1.41s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(11) { animation-delay: 1.55s; }
#prk_hidden_menu.bns-open .bns-overlay-nav li:nth-child(12) { animation-delay: 1.69s; }

/* Menu item links */
.bns-overlay-nav a,
.bns-overlay-nav a.hook_anchor {
	display:                inline-block;
	color:                  var(--bns-menu-color);
	text-decoration:        none;
	text-transform:         uppercase;
	font-family:            'Source Sans Pro', sans-serif;
	font-size:              clamp(32px, 6vw, var(--bns-menu-font-size));
	font-weight:            300;
	letter-spacing:         clamp(3px, 0.5vw, 6px);
	-webkit-font-smoothing: antialiased;
	line-height:            1.2;
	transition:             color 0.25s var(--bns-easing),
	                        transform 0.25s var(--bns-easing);
}

/* Hover: colour turns blue, slight scale-up — no underline */
.bns-overlay-nav a:hover {
	color:     var(--bns-accent);
	transform: scale(1.06);
}

/* Active item */
.bns-overlay-nav .bns-active > a,
.bns-overlay-nav .current-menu-item > a { font-weight: 600; }

.bns-active-underline .bns-overlay-nav .bns-active > a::after,
.bns-active-underline .bns-overlay-nav .current-menu-item > a::after { width: 100%; }

.bns-active-color .bns-overlay-nav .bns-active > a,
.bns-active-color .bns-overlay-nav .current-menu-item > a { color: var(--bns-accent); }

/* hook_menu_label / hook_menu_main structure from the walker */
.hook_menu_label { display: inline-block; }
.hook_menu_main  { display: block; }

/* =========================================================================
   Language Switcher
   ========================================================================= */
.bns-lang-switcher {
	list-style:      none;
	margin:          clamp(20px, 4vh, 40px) 0 0;
	padding:         0;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             clamp(10px, 2vw, 20px);
}

.bns-lang-switcher a {
	color:           var(--bns-menu-color);
	text-decoration: none;
	font-family:     'Source Sans Pro', sans-serif;
	font-size:       clamp(0.7rem, 1.5vw, 0.875rem);
	letter-spacing:  2px;
	text-transform:  uppercase;
	opacity:         0.7;
	transition:      opacity var(--bns-duration) var(--bns-easing);
}
.bns-lang-switcher a:hover,
.bns-lang-switcher .current-lang a { opacity: 1; }

.bns-lang-switcher img { vertical-align: middle; margin-right: 6px; }

.bns-hnf-actions .bns-lang-switcher { margin: 0; flex-wrap: nowrap; }
.bns-hnf-actions .bns-lang-switcher a {
	color:     #ffffff;
	font-size: clamp(0.65rem, 1.2vw, 0.8rem);
}

/* =========================================================================
   Body scroll lock
   ========================================================================= */
body.bns-menu-open { overflow: hidden; }