/* Header
-------------------------------------------------------------------------*/
header {
	position: absolute;
	margin: 0 auto;
	width: 100%;
	z-index: 999;
}

/* Header: Outer Layout */
header .wp-block-group.alignwide.is-content-justification-space-between {
	align-items: flex-start;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Header: Logo */
header .wp-block-site-logo {
	position: relative;
	z-index: 2;
	padding: 10px 0;
	opacity: 1;
	transition: opacity .5s ease;
}

header .wp-block-site-logo img {
	width: min(245px, 100%);
}

/* Header: Navigation Bar */
header .wp-block-group.menu-row-group {
	display: flex;
	align-items: center;
	gap: 35px;
	margin-top: 5px;
	padding:0px 20px!important;
	background: var(--color-white);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 1px rgba(47, 47, 47, 0.04);
	position: relative;
	/* Animate the radius flip when .dropdown-active is added so the
	   row's bottom corners stay in sync with the panel sliding down.
	   Same easing/duration as the panel itself. */
	transition: border-radius 300ms cubic-bezier(0, 0.094, 0.205, 0.983);
}
header.dropdown-active .wp-block-group.menu-row-group { border-radius: var(--radius-sm) var(--radius-sm) 0 0!important; }

header .wp-block-navigation__container { gap: 1.6rem; }

/* Header: Navigation Links */
header .wp-block-navigation-item__content {
	padding: 15px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-text-primary);
	text-decoration: none !important;
}

header .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item__content:focus {
	color: var(--color-text-brand-orange);
	background-size: 100% 100%;
}

header .wp-block-navigation-item__content:active,
header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--color-text-brand-orange);
	background-size: 100% 100%;
}

/* Header: Contact / Utility Pill */
header .right-items{ text-align: right; position: relative; }
header .wp-block-group.menu-row-group .header-buttons-row {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 6px 8px;
	background: var(--color-orange-100);
	border-radius: var(--radius-xs);
	/* position: relative; */
    z-index: 1;
}

header .wp-block-group.menu-row-group .header-buttons-row figure {
	flex-basis: 25px!important;
	display: inline-flex;
}

/* header .wp-block-group.menu-row-group > .wp-block-group.is-nowrap figure::before{
	content: '';
    position: absolute;
    background: var(--color-white);
    width: 25px;
    height: 15px;
    border-radius: 4px;
    z-index: 0;
} */

header .wp-block-group.menu-row-group .header-buttons-row figure:hover{
	/* background: var(--color-white); */
}

header .wp-block-group.menu-row-group .header-buttons-row .wp-block-image {
	margin: 0;
}

header .wp-block-group.menu-row-group .header-buttons-row img {
	display: block;
	width: 14px;
	height: auto;
	object-fit: contain!important;
	transition: .3s;
}

header .wp-block-group.menu-row-group .header-buttons-row img:hover {
	transform: scale(1.1);
	transition: .3s;
}

header .wp-block-group.menu-row-group .header-buttons-row * + * {
	position: relative;
}

header .wp-block-group.menu-row-group .header-buttons-row * + *::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 50%;
	width: 1px;
	height: 26px;
	background: rgba(255, 155, 0, 0.35);
	transform: translateY(-50%);
}

header .wp-block-group.menu-row-group .header-buttons-row figure:nth-child(3)::before {
	display: none;
}

/* Header menu underline */
ul.main-parent-menu{
	position: relative; /* anchor for the absolutely-positioned underline */
	gap: 32px;
}

ul.main-parent-menu > #under_line{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 25px;
	height: 6px;
	width: 100px;
	background-color: var(--color-text-brand-orange);
	border-radius: 5px 5px 0 0;
	transition: left 0.3s ease, width 0.3s ease;
	opacity: 0;
}

ul.main-parent-menu:hover > #under_line{
	opacity: 1;
}

header .inner-wrap {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}


/* Scroll-responsive header */
header .inner-wrap {
    transition: transform 0.4s ease, opacity 0.4s ease;
}
header.header-hidden .inner-wrap {
    transform: translateY(calc(-100% - 60px));
    opacity: 0;
    pointer-events: none;
}

header.header-up .wp-block-site-logo{ opacity: 0; }

/*hamburger starts*/
.hamburger {
    padding:0px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: .3s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    line-height: 1;
    margin: 0;
    overflow: visible; 
    background: transparent!important;
    outline: none;
    width: auto;
    border: none;
    position: absolute;
    right: auto;
	left: 15px;
    top: -44px;
	z-index: 99;
    display: none;
    margin-top: 6px!important;
}
.hamburger-label{
    color: var(--color-black);
    font-size: 0px;
}

.hamburger-box {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    opacity: 1;
    transition: .3s;
    transform: translateY(-1px);
}

.hamburger-box .top,
.hamburger-box .middle,
.hamburger-box .bottom{
    width: 25px;
    position: absolute;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    left: 10px;
}

.hamburger-box .top{
    display: block;
    top: 2px;
}

.hamburger-box .middle{
    top: 10px;
    width: 25px;
}

.hamburger-box .bottom{
    top: 18px;
    width: 25px;
}
.hamburger-box  img{ }

.activated .hamburger-box .top{transform: rotatez(45deg) translate(13px,0px);}
.activated .hamburger-box .middle{ opacity:0; transform: translate(0px,-1px) rotatez(0deg);}
.activated .hamburger-box .bottom{ transform: rotatez(-45deg) translate(7px,-3px); left:10px; }
.activated .hamburger-box .bottom{ right:auto; width:25px; }
/*hamburger ends*/



/* Header: Submenu (Mega Menu)
-------------------------------------------------------------------------*/

/* Container that holds all panels. Sits under the nav row,
   anchored to .menu-row-group (position: relative). The JS moves
   .megamenu-wrap inside .menu-row-group so it positions correctly. */
header .megamenu-wrap {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 998;
	pointer-events: none;
}

header .megamenu-wrap > .wp-block-group {
	max-width: none;
	padding: 0;
}

/* Single mega-menu panel. Hidden by default, shown when
   JS adds .is-open to a panel (click trigger) or to the wrap.

   Closed state starts 8px above its final position with opacity 0
   and visibility: hidden; the .is-open state lands at translateY(0)
   with opacity 1 and visibility: visible. The 300ms cubic-bezier
   matches the easing used across the rest of the page (curriculum
   cards, tab cross-fade). height is intentionally NOT in the
   transition list — it can't animate from/to `auto` reliably. */
header .dropdown-menu {
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	transform: translateY(0px);
	width: 100%;
	background: var(--color-white);
	border-radius: 0  0 var(--radius-sm)  var(--radius-sm);
	box-shadow: 0 24px 60px -20px rgba(47, 47, 47, 0.18),
	            0 4px 14px -4px rgba(47, 47, 47, 0.08);
	padding: 0px !important;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity   300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		transform 300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		max-height 300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		visibility 0s linear 300ms;
	border-top: 1px solid var(--color-border-accent-orange);
	margin-top: 0px;
}

/* Open state (added by JS on click) */
header .dropdown-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity   300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		transform 300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		max-height 300ms cubic-bezier(0, 0.094, 0.205, 0.983),
		visibility 0s linear 0s;

}

/* Inner layout: list on the left, featured image on the right */
header .dropdown-wrapper {
	display: flex !important;
	align-items: flex-start;
	gap: 0px;
	border-radius: 0 0 var(--radius-sm) 0;
	overflow: hidden;
}

/* The link list column */
header .dropdown-menu--list {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 25px 20px !important;
	list-style: none;
	display: grid;
	grid-template-columns: 44% 51%;
	gap: 14px 9px;
}

header .dropdown-menu--list ul{ 
	padding: 0; 
	list-style: none; 
	margin-top: 0!important; 
	display: flex;
    flex-direction: column;
    gap: 15px 0;
}

/* Each list item: a real-looking link row */
header .dropdown-menu--list li {
	margin: 0;
	padding: 0;
}

header .dropdown-menu--list li a{
	display: inline-block;
	font-size: var(--text-xs);
	text-decoration: none !important;
	font-weight: 500;
	background-position: 0px 0px;
	padding-bottom: 2px;
}


/* Featured image column on the right */
header .dropdown-ftrd-img {
	flex: 0 0 250px;
	max-width: 250px;
	margin: 0 !important;
	overflow: hidden;
	align-self: stretch;
}

header .dropdown-ftrd-img img {
	display: block;
	width: 100%;
	height: 100%;
	height: 230px;
	object-fit: cover;
}

/* When the wrap is open, allow pointer events on the visible panel */
header .megamenu-wrap.is-open {
	pointer-events: auto;
}

/* Reduced motion: keep the visibility flip (so the panel still hides
   correctly and stays out of the tab order) but drop the transform
   so users who opt out of motion get an instant open with a short
   opacity fade only. */
@media (prefers-reduced-motion: reduce) {
	header .dropdown-menu,
	header .dropdown-menu.is-open,
	header .wp-block-group.menu-row-group,
	header.dropdown-active .wp-block-group.menu-row-group {
		transform: none;
		transition:
			opacity   150ms linear,
			visibility 0s linear;
	}
}


/* Responsive
-------------------------------------------------------------------------*/
@media (max-width: 991px) {

	/*Header
	----------------------------------*/
	header { top: 24px;  }
	.admin-bar header{ top: 52px; }
	header .wp-block-site-logo{  margin-top: -40px; margin-left: 20px; }
	header .wp-block-site-logo img{ width: min(180px, 100%);}
	.hamburger { display: block; left: 20px;}
	header .wp-block-site-logo{ margin-left: 35px;}

	header .menu-row-group{ border-radius: 0!important; }
	header .wp-block-group.alignwide.is-content-justification-space-between { flex-direction: column; align-items: stretch; gap: 1rem; }
	header .wp-block-site-logo { align-self: flex-start; }
	header .wp-block-group.menu-row-group { width: 100%; justify-content: space-between; display: block; }
	header .wp-block-navigation__container { gap: 1rem; }

	header .main-parent-menu{ display: block; }
	ul.main-parent-menu > #under_line{ display: none;}

	header .wp-block-navigation-item__content{ padding: 10px 0;}

	header .wp-block-group.menu-row-group > .wp-block-group.header-buttons-row{ display: inline-flex; position: absolute!important; bottom: 20px; right: 15px;}
	header .dropdown-ftrd-img{ display: none;}
	.header-search.active{ width: 310%;}
	header .dropdown-menu--list{ display: block;}
	header .dropdown-menu--list ul{ gap: 0px 0; }
	header .dropdown-menu--list li{ padding: 5px 0;}

	header .wp-block-group.menu-row-group { 
		padding: 100px 25px 45px 25px !important; 
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		min-height: 0;
		opacity: 0;
		pointer-events: none;
		transition: .3s ease-in-out;
		transform: translateY(-15px);
	}
	header .menu_toggle.activated + .wp-block-group.menu-row-group{
		min-height: 345px;
		max-height: 900px;
		opacity: 1;
		pointer-events: auto;
		transition: .3s ease-in-out;
		transform: translateY(0px);
	}
	header .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; justify-content: center; }
	header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }


	/* Mega menu (mobile): right-aligned chevron on trigger + inline accordion panel */
	header .main-parent-menu .has-mega > .wp-block-navigation-item__content {
		position: relative;
		display: inline-block;
		width: 100%;
		padding-right: 28px;
	}
	header .main-parent-menu .has-mega > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		right: 4px;
		top: 50%;
		width: 14px;
		height: 8px;
		transform: translateY(-50%);
		background-image: url("/wp-content/uploads/2026/06/adown.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transition: transform 250ms cubic-bezier(0, 0.094, 0.205, 0.983);
	}
	header .main-parent-menu .has-mega.is-open > .wp-block-navigation-item__content::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* On mobile, panels are relocated under their parent <li>; the now-empty wrap is hidden */
	header .megamenu-wrap {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		pointer-events: auto;
		display: none;
	}

	/* Inline accordion: smooth open/close via JS-measured max-height.
	   We measure each panel's natural scrollHeight lazily (on the first click,
	   not on init — see JS comment) and store it as --mega-h. The CSS animates
	   max-height between 0 and var(--mega-h), giving a smooth roll-up/roll-down
	   in BOTH directions in every browser. The 1500px fallback covers the rare
	   case where measurement hasn't run yet. Easing is the Material standard
	   (cubic-bezier(0.4, 0, 0.2, 1)) for a natural ease-in-out feel. */
	header .dropdown-menu {
		position: static;
		transform: none;
		width: 100%;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border-top: 0;
		border-radius: 0;
		padding: 0 !important;
		margin: 0;
		transition:
			max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
			padding 300ms cubic-bezier(0, 0.094, 0.205, 0.983);
	}
	header .dropdown-menu.is-open {
		max-height: var(--mega-h, 1500px);
		padding: 6px 0 14px 0 !important;
	}
	header .dropdown-menu.is-open .dropdown-menu--list {
		display: block;
		padding: 0 0 0 14px !important;
		border-left: 2px solid var(--color-orange-100);
		margin: 4px 0 0 6px !important;
		grid-template-columns: none;
	}
	header .dropdown-menu.is-open .dropdown-menu--list li {
		padding: 6px 0;
	}


}

@media (max-width: 860px) {


	
}

@media (max-width: 680px) {

	/* Header component
	-----------------------------------*/
	/* header .wp-block-site-logo{ padding: 15px 0; } */
		.hamburger { left: 5px;}
	header .inner-wrap{ padding-left: 20px !important; padding-right: 20px !important;}

}