@charset "utf-8"; /* CSS Document */


.main-menu {
    display: flex;
    gap: 60px;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 400;
}



.dropnav, .dropnav ul, .dropnav li {
    list-style: none !important;
    padding: 0;
    margin: 0;
    text-decoration: none;
}


.dropnav {
    display: flex;
    align-items: center;
    height: auto;
    position: relative;
    margin-right: 50px;
    z-index: 9999;
}



/* make the list item a reference point */
.dropnav li {
    position: relative;
    list-style: none;
}



.dropnav li.parent {
	display: block;
	float: none;   /* use none due to the use of flexbox on the parent */
}



.dropnav li a.parentlink {
    display: flex;   /* changed from inline-block to flex */
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 20px;      /* adjusts text position in header */
    padding-bottom: 25px;    /* the gap between text and line */
    padding-left: 15px;
    padding-right: 40px;
    min-width: 100px;
    border-bottom: none !important;   
    transition: color 0.3s ease, font-weight 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    color: #ffffff;   /* ensure default color is white */
}


/* this is the adjustment of the gap between the parent text and the arrow */
.dropnav li.parent:has(ul) > a.parentlink {
    padding-right: 40px;   /* add a little extra right padding only to items with arrows so the arrow doesn't feel cramped against the next menu item */
}



/* only create an arrow after the text of parent links if the parent LI actually has a UL (dropdown), to allow remove :has(ul) */
.dropnav li.parent:has(ul) > a.parentlink::after {
    content: ''; 
    display: inline-block;
    position: absolute;    /* using absolute positioning lets the arrow sit in the padding without changing the width of the text itself */
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}



/* only rotate the arrow on hover if the arrow actually exists */
.dropnav li.parent:has(ul):hover > a.parentlink::after {
    border-top-color: #f40000;
    transform: translateY(-50%) rotate(-360deg);
}



/* show child menu on parent hover */
.dropnav li.parent:hover > ul.child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 55px !important;        /* this pulls the menu up to the 50px mark */
    margin-top: -2px !important;   /* tiny overlap to ensure the mouse never leaves the link */
    left: 0 !important;
    z-index: 1000;
}



.dropnav li a.parentlink span.down {
	float: left;
	display: block;
	padding: 0 36px 0 12px;
	height: 40px;
}



/* CHILD MENUS */

/* DROPDOWN CORE (the magic slide) */
.child, .flyout {
    position: absolute;
    background-color: #353b3f;
    padding: 15px;
    border-radius: 1rem;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
    
    /* animation properties */
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}



/* child slide down */
.child {
    top: 60px;   /* starts slightly lower */
    left: 0;
    transform: translateY(-10px);
}



/* flyout slide right */
.flyout {
    top: -15px;
    left: 100%;
    transform: translateX(-10px);
}



/* hover states */
.parent:hover > .child,
.child li:hover > .flyout {
    visibility: visible;
    opacity: 1;
    transform: translate(0);
    top: 60px;   /* snaps to header */
    pointer-events: auto;
}



.child li:hover > .flyout { top: -15px; }   /* corrects flyout verticality */



/* INTERNAL DROPDOWN ITEMS */
.child li {
    position: relative;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 0.5rem;
    margin-bottom: 50px;
}



/* dropdown menu child background box colour on hover, applied to lI not to A */
/* target the LI hover, but ensure it's specific enough to override the UL background */
.dropnav ul.child li:nth-child(1):hover { background-color: #32cd32 !important; }   /* light green */
.dropnav ul.child li:nth-child(2):hover { background-color: #f40000 !important; }   /* bright red */
.dropnav ul.child li:nth-child(3):hover { background-color: #0096ff !important; }   /* light / medium blue */
.dropnav ul.child li:nth-child(4):hover { background-color: #ff4B00 !important; }   /* orange */
.dropnav ul.child li:nth-child(5):hover { background-color: #fc0fc0 !important; }   /* shocking pink */
.dropnav ul.child li:nth-child(6):hover { background-color: #8a00c4 !important; }   /* neon purple */
.dropnav ul.child li:nth-child(7):hover { background-color: #6c7a86 !important; }   /* Chrysler silver */
.dropnav ul.child li:nth-child(8):hover { background-color: #0000ff !important; }   /* dark blue */



/* target the specific colors for the flyout items */
.dropnav .child .flyout li:nth-child(1):hover { background-color: #ff0044 !important; }   /* bright neon red */
.dropnav .child .flyout li:nth-child(2):hover { background-color: #4b82ff !important; }   /* medium blue */
.dropnav .child .flyout li:nth-child(3):hover { background-color: #ff69b4 !important; }   /* hot pink */
.dropnav .child .flyout li:nth-child(4):hover { background-color: #ffa500 !important; }   /* vibrant bright orange */
.dropnav .child .flyout li:nth-child(5):hover { background-color: #a073ff !important; }   /* light purple */
.dropnav .child .flyout li:nth-child(6):hover { background-color: #6c7a86 !important; }   /* Chrysler silver */



/* FLYOUT MENU-LEFT OVERRIDE */
.fly-left:hover > .flyout {
    left: auto !important;
    right: 100% !important;
    transform: translateX(0px) !important;}



.dropnav ul, .dropnav li {
    list-style: none;   /* removes the default bullet dots */
    padding: 0;
    margin: 0;
}



/* hide all nested menus by default */
.dropnav ul.child,
.dropnav ul.flyout {
	position: absolute;
	visibility: hidden;
	opacity: 0;
}




/* position the flyout to the right of the child menu */
.dropnav ul.child li:hover > ul.flyout {
    display: block !important;      /* show on hover */
	opacity: 1 !important;
	visibility: visible !important;
    top: -15px;          /* align with the top of the parent box (includes your padding adjustment) */
    left: 100% !important;      /* push it exactly to the right edge */
    background-color: #454c52;   /* inherit your existing styling */
    padding: 15px;
    border-radius: 1rem;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
    position: absolute !important;
    z-index: 10001;   /* ensure it stays above the primary dropdown */
}



/* ensure the parent list item is the anchor point */
.dropnav ul.child li,
.dropnav ul.flyout li {
	display: block !important;
    position: relative !important;   /* move them back from -9999px */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* visual tweak: ensure flyout links don't have unwanted indents */
.dropdown ul.child li a,
.dropnav ul.flyout li a {
	display: flex !important;
    visibility: visible !important;
    color: #ffffff !important;  /* ensure white text on your dark grey box */
    padding: 20px 15px !important;
    line-height: normal !important;
    text-indent: 0 !important;
    width: 100%;
}



/* remove the dots caused by hidden menus */
/* instead of just moving them to -9999px, we ensure they are hidden from view */
.dropnav ul:not(.active) {
    list-style: none !important;
}



/* position the flyout to the right of the child menu */
.dropnav .flyout {
    display: none;         /* hide by default */
    position: absolute;
    top: 0;               /* align with the top of the parent 'li' */
    left: 100%;           /* push it 100% to the right of the 'child' menu */
    z-index: 10001;
}



/* how the flyout when hovering over its parent li */
.dropnav li:hover > .flyout {
    display: block;
}



/* shared child styles */
.dropnav li:hover ul.child {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    background-color: #353b3f;
    padding: 15px;
    border-radius: 1rem;
    white-space: nowrap;
    height: auto;
    transition: background .5s ease;
    z-index: 1000;
    list-style: none;
}




.dropnav li:hover ul.child li {
	display: block;
	height: auto;   /* space between text in drop down menu */
	position: relative;
	float: none;
	width: 100%;
	margin-bottom: 8px;
}



.dropnav li:hover ul.child li a {
	display: flex;           /* enables flexbox layout */
    align-items: center;     /* centers text vertically */
    justify-content: left;    /* centers text horizontally */  
    padding: 0;              /* clear any default padding */
	text-decoration: none;
}



.dropnav li:hover ul li:hover ul,
.dropnav li:hover ul li:hover ul li:hover ul,
.dropnav li:hover ul li:hover ul li:hover ul li:hover ul,
.dropnav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
	left: 120px;
	top: -1px;
	/* background: #ffffff; switched off */
	padding: 3px;
	border: 0px solid #305CDE;
	white-space: nowrap;
	width: 120px;
	height: auto;
	z-index: 1000;
}



/* ensure the border-radius applies to the hover state */
.dropnav ul.child li:hover {
    border-radius: .5rem;
}


/* IMPORTANT: ensure the <a> inside doesn't have its own background blocking the LI */
.dropnav li:hover ul.child li a {
    background: transparent !important;
}



/* ensure the link doesn't have its own background that hides the LI color */
.dropnav ul.child li:hover > a {
    background-color: transparent !important;
}



.dropnav li ul.child li {
    transition: background-color 0.3s ease, transform 0.2s ease;
    background-color: transparent;   /* start transparent so it can fade in */
}



/* force the LI to show the color even if there is internal padding */
.dropnav .child li:hover {
    display: block !important;
    width: 100%;
	transition: background-color 0.3s ease;
}



/* optional: add a tiny "lift" effect on hover */
.dropnav .child li:hover {
    transform: translateX(3px);   /* moves the item slightly right on hover */
}



/* Prevents the last dropdown from falling off the screen edge */
.dropnav > li:last-child .child {
    left: auto !important;
    right: 0 !important;
}




/* FLYOUT MENU SETTINGS SECTION */


.flyout {
    padding-left: 5px;   /* creates a bridge for the mouse cursor */
}



/* ensure the flyout LI shows the color on hover */
.dropnav .child .flyout li:hover {
    border-radius: .5rem;
    transition: background-color 0.3s ease;
}



/* CRITICAL: make the link background transparent so the LI color shows through */
.dropnav .child .flyout li:hover > a {
    background-color: transparent !important;
    color: #ffffff !important; /* Keep text white */
}



/* position the flyout to the right of the current box */
.dropnav li ul.child li:hover > ul.flyout {
    left: 100%;          /* moves it exactly to the right edge of the month box */
    top: 0;              /* aligns the top of the flyout with the month */
    position: absolute;
    display: block;      /* makes it visible */
    background-color: #353b3f; 
    padding: 10px;
    border-radius: 1rem;
    margin-left: 0;    /* small gap between the boxes 5px, works best with 0 gap */
    height: auto;
    z-index: 1000;
}



/* ensure flyout links look the same as your dropdown links */
.dropnav li ul.child li ul.flyout li a {
    text-indent: 10px;   /* or preferred indent */
    justify-content: flex-start;
}



/* the sub-menu container */

.dropnav li ul.child li:hover > ul.flyout {
    left: 100%;           /* slight overlap 98% instead of 100% ensures the mouse never leaves a menu area */
    margin-left: 0px;
	top: -15px;          /* minor adjustment to align better with rounded corners, higher up to align with the parent box */
	position: absolute;
    display: block;
	margin-left: 0;
    background-color: #454c52;   /* subtle lift #454C52, medium slate #505961, muted silver #707B86  */
    padding: 15px;
	border: 1px solid #454c52;   /* subtle border to define the edge */
    border-radius: 1rem;
    list-style: none;
    box-shadow: 10px 10px 20px rgba(0,0,0,0.4);   /* adds depth, stronger shadow to pop against content */
	z-index: 10001;   /* 1 level higher than the child menu */
}



/* ensure the sub-links inherit your styling */
.dropnav li ul.child li ul.flyout li a {
    text-indent: 10px;
    justify-content: flex-start;
    height: 40px;
}



.dropnav li ul.child li ul.flyout.w-xxlarge li a.double-line {
    display: flex !important;
    flex-direction: column !important;    /* stacks the spans vertically */
    justify-content: center;   /* centers the stack vertically */
    align-items: flex-start;   /* aligns text to the left */
    height: auto !important;              /* overrides the fixed 40px height */
    min-height: 70px;          /* gives it enough room for two lines */
    padding: 10px 15px !important;  /* adds breathing room top/bottom and left */
    text-indent: 0;            /* reset indent to use padding instead */
    line-height: 1.2 !important;          /* keeps the two lines tight together */
    white-space: normal !important;       /* allows the text to actually wrap/stack */
}





/* specific targeting for the 'explore' flyout */
.dropnav li ul.child li:hover > ul.flyout {
    display: block;      /* show it on hover */
    position: absolute;
    left: 100%;          /* launch to the right of the 'child' menu */
    top: -15px;          /* matches your other flyout alignments */
    visibility: visible;   /* ensures it overrides any 'hidden' states */
    opacity: 1;
}





/* miscellaneous rules */

/* force remove all bullets from all levels of the menu */
.dropnav, .dropnav ul, .dropnav li, .dropnav li::before, .dropnav li::after {
    list-style: none !important;
    list-style-type: none !important;
    text-indent: 0 !important;
}



/* fix the "Grey Box" Arrow */
/* this ensures the arrow only shows if there is actually a submenu */
.dropnav li.parent > a.parentlink::after {
    border-top: 7px solid #212427;
}



/* adjust nav links when the header is shrunk */
header.scrolled .dropnav li a.parentlink {
    height: 60px;
    line-height: 40px;   /* adjusting the text centering */
}



/* adjust the dropdown top position so it still meets the bottom of the header */
header.scrolled .dropnav li.parent:hover > ul.child {
    top: 60px !important;
}



/* any flyout inside a .fly-left item will open to the left */
.dropnav ul.child li.fly-left:hover > ul.flyout {
    left: auto !important;
    right: 100% !important;
}



/* force the very last menu item's flyout to open to the left */
.dropnav > li:last-child ul.child li:hover > ul.flyout {
    left: auto;
    right: 100%;   /* opens to the left instead of the right */
	margin-right: 5px;   /* adds a tiny gap so it is not touching the parent box */
}



/* increase the gap between flyout items */
.dropnav .flyout li {
	border-top: none !important;   /* this IS the gap */
    background-clip: border-box !important;      /* this keeps the color INSIDE the box, not the gap */
}



/* force the gap using margin with 'Triple Specificity' */
/* this targets the list item specifically enough to break any height locks */
.dropnav ul li ul.flyout li {
    margin-top: 15px !important;    /* vertical gap size between flyout menu items */
    margin-bottom: 0px !important;
    display: block !important;       /* ensures it behaves like a stackable block */
    height: auto !important;          /* unlocks any 'Magic Slide' height constraints */
}



/* ensure the first item doesn't have a gap at the very top of the menu */
.dropnav ul li ul.flyout li:first-child {
    margin-top: 0 !important;
}



.dropnav .flyout li a {
    padding-top: 15px !important;   /* space above the text */
    padding-bottom: 50px !important;   /* space below the text */
}




/* remove the gap from the very last item so the padding looks even */
.dropnav .flyout li:last-child {
    margin-bottom: 0 !important;
}



/* force the gap between colored boxes in the CHILD menu */
.dropnav ul li ul.child li {
    margin-bottom: 15px !important;   /* vertical gap size between child menu items */
    display: block !important;
    height: auto !important;
}



/* remove the gap from the last item so the bottom padding stays even */
.dropnav ul li ul.child li:last-child {
    margin-bottom: 0 !important;
}



/* ensure the rounded corners stay intact */
.dropnav ul li ul.child li a {
    border-radius: 0.5rem !important;   /* matches the original design */
    background-clip: border-box !important;
}



/* specific targeting for the 'double-line' flyout link */
.dropnav ul.flyout li a.double-line {
    display: flex !important;
    flex-direction: column !important;   /* stacks the two spans */
    justify-content: center;           /* centers the stack vertically */
    align-items: flex-start;           /* aligns text to the left */
    /* UNLOCK THE HEIGHT */
    height: auto !important;           /* overrides the fixed height of 40px/50px */
    min-height: 70px;                  /* gives it enough room for two lines */
    padding: 12px 12px !important;     /* balanced internal spacing */
    
    /* FIX THE TEXT SPACING */
    line-height: 1.2 !important;       /* keeps the two lines tight together */
    white-space: normal !important;    /* CRITICAL: Allows the text to wrap/stack */
    text-indent: 0 !important;         /* removes any side-shunting from single-line rules */
}



/* optional: style the internal spans for better hierarchy */
.line-one {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 2px;
}




.line-two {
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;  /* increase this number to push lines further apart */
    opacity: 1;
}






/* DROPNAV MENU FONT SETTINGS */

.dropnav li a.parentlink {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #212427;
    font-weight: 400;
    text-decoration: none;
    padding-right: 45px;
}



.dropnav li:hover > a.parentlink {
    color: #f40000 !important;
    font-weight: 400 !important;   /* forces it to stay thin */
    text-shadow: 0.5px 0 0 #f40000;   /* simulated bold */
}



.child li a, 
.dropnav li:hover ul.child li a,
.dropnav li ul.child li ul.flyout li a {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #ffffff !important;
    font-weight: 400;
    background: transparent !important;   /* vital to show LI color */ 
}



.dropnav li:hover ul.child li {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    color: #ffffff !important;
    font-weight: 400;
    background: transparent !important;   /* vital to show LI color */
}



.dropnav li ul.child li ul.flyout li a {
    font-size: 18px;   /* slightly smaller text for sub-menus often looks better */
    font-family: 'Open Sans', sans-serif;
    color: #ffffff !important;
    font-weight: 400;
    background: transparent !important;   /* vital to show LI color */
}



.dropnav li:hover ul.child li a {
	height: 50px;            /* this defines the height of your green box */
    width: 100%;             /* ensures the coloured box fills the width of the dropdown */
    text-indent: 15px;          
}



/* optional: add a small indicator arrow to show a sub-menu exists */
.dropnav .child li:has(.flyout) > a::after {
    content: ' ▸';
    float: right;
    font-size: 1.3em;
}



.dropnav li.parent:hover > ul.child {
    top: 55px !important;   /* gap between bottom of parent menu text and the child dropnav on hover */
}



.dropnav li:hover > a.parentlink {
    color: #f40000 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    text-shadow: 0.5px 0 0 #f40000, -0.5px 0 0 #f40000;
}



.dropnav li.parent:has(ul) > a.parentlink::after {
    right: 15px !important;   /* distance from right edge of the link */
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-top-color: #212427;   /* #212427, default arrow color */
}



 /* handle the hover for the flyout items */
.dropnav ul.flyout li:hover {
    background: #65d076;   /* #65d076, or any color preferred for sub-levels */
    border-radius: .5rem;
}



.dropnav li.parent:hover > a.parentlink::after {
    border-top-color: #f40000 !important;   /* arrow turns red on hover */
    transform: translateY(-50%) rotate(-360deg) !important;
}



/* change arrow color and flip it up when hovering */
.dropnav li:hover > a.parentlink::after {
    border-top-color: #f40000;   /* matches the red hover color */
    transform: rotate(-360deg);    /* -180deg flips the arrow up */
}



.dropnav li.parent:has(ul) > a.parentlink::after {
    /* triangle settings */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #212427;   /* grey #212427 */
    transition: transform 0.7s ease, border-color 0.2s ease;
}



/* specific widths */
.child.w-xsmall, .flyout.w-xsmall  { width: 220px !important; }
.child.w-small, .flyout.w-small  { width: 270px !important; }
.child.w-medium, .flyout.w-medium  { width: 330px !important; }
.child.w-large, .flyout.w-large  { width: 360px !important; }
.child.w-xlarge, .flyout.w-xlarge  { width: 410px !important; }
.child.w-xxlarge, .flyout.w-xxlarge  { width: 520px !important; }
.child.w-xxxlarge, .flyout.w-xxxlarge  { width: 600px !important; }