/**
	* Header Styles
	*
	* This file contains styles for the site header, including:
	* 1. Header state when scrolled (class: bb-powerpack-header-scrolled)
	* 2. Mega menu dropdown styling
	*/

/* ==========================================================================
   SCROLLED HEADER STYLING
	==========================================================================
	These styles are applied to the header when:
	- User scrolls down the page
	- User hovers over the header when at top of page
	Class added: bb-powerpack-header-scrolled
*/

/* ==========================================================================
	BOOK NOW BUTTON STYLING
	==========================================================================
	Styles for the Book Now button in both desktop and mobile views
*/

/**
	* Desktop Book Now button hover styles
	* Changes color of button background, text, and border on hover
	* Added !important flags to ensure styles take precedence over any conflicting rules
	*/
	.bb-powerpack-header-scrolled .pp-button-wrap a.pp-button:hover {
		background-color: #215469;
		border-color: #215469 !important;
		color: white !important;
	}

	.bb-powerpack-header-scrolled .pp-button-wrap a.pp-button:hover * {
		color: white !important;
	}
	
	/**
		* Mobile Book Now button hover styles
		* Changes color of button background, text, and border on hover
		* Added !important flags to ensure styles take precedence over any conflicting rules
		*/
	.mobile-book-btn:hover {
		background-color: #215469;
		border-color: #215469 !important;
		color: white !important;
	}
	

/**
	* Main navigation text color
	* Changes the main menu links to black when header is in scrolled state
	*/
.bb-powerpack-header-scrolled
	.fl-row-content-wrap
	.fl-row-content
	.fl-module-menu
	.menu
	> li
	> a {
	color: #000; /* Black text for better visibility on white background */
}

.bb-powerpack-header-scrolled
	.fl-row-content-wrap
	.fl-row-content
	.fl-module-menu
	.menu
	> li
	> a:hover, .bb-powerpack-header-scrolled .fl-menu .sub-menu > li > a:hover {
	color: #215469 !important;
}

/**
	* Header interactive elements color
	* Changes color of buttons and submenu triggers to black in scrolled state
	*/
.bb-powerpack-header-scrolled
	.fl-row-content-wrap
	.fl-row-content
	a.pp-button
	*,
.bb-powerpack-header-scrolled .fl-row-content-wrap .fl-row-content a.pp-button,
.bb-powerpack-header-scrolled
	.fl-row-content-wrap
	.fl-row-content
	.menu
	> li
	> .fl-has-submenu-container
	> a {
	color: #000; /* Black text for all interactive elements in header */
}

/**
	* Mega menu submenu items hover state
	* Applies a subtle color change on hover for mega menu items when header is scrolled
	*/
.bb-powerpack-header-scrolled
	ul.fl-menu-horizontal
	li.mega-menu
	> ul.sub-menu
	> li
	> .fl-has-submenu-container
	a:hover {
	color: #424242; /* Darker gray on hover for subtle effect */
}

/**
	* Button styling in scrolled header
	* Applies border and styling to all buttons in the header when scrolled
	*/
.bb-powerpack-header-scrolled
	.fl-row-content-wrap
	.fl-row-content
	.pp-button-wrap
	a.pp-button {
	border-style: solid; /* Solid border type */
	border-width: 0; /* Reset default border width */
	background-clip: border-box; /* Ensures background stays within border */
	border-color: #000; /* Black border */
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-radius: 4px; /* Rounded corners */
}

/**
	* Header background in scrolled state
	* Changes specific row background to white when header is scrolled
	*/
.bb-powerpack-header-scrolled .fl-row > .fl-row-content-wrap {
	background-image: none; /* Removes any background image */
	background-color: #fff; /* Sets white background */
}

/**
	* Mobile menu toggle icon color
	* Changes hamburger menu icon to black in scrolled state for better visibility
	*/
.bb-powerpack-header-scrolled
	.fl-menu
	.fl-menu-mobile-toggle.hamburger
	.svg-container {
	color: #000; /* Black hamburger icon for contrast against white background */
}

/* ==========================================================================
   MEGA MENU STYLING
	==========================================================================
	Styles for the mega menu dropdown that appears on hover/focus
*/

/**
	* Mega menu container styling
	* Makes mega menu dropdown full width with borders and shadow for visual separation
	*/
.mega-menu > .sub-menu {
	width: 100%; /* Full width submenu */
	border-top: solid 2px #b4b4b4; /* Gray top border for visual separation */
	box-shadow: 0px 4px 10px 0px #5252521a; /* Subtle drop shadow for depth */
}