/* ==========================================================
   HEADER LAYOUT #1

   Desktop:
   Logo left / header links right
   Full-width main navigation underneath

   Mobile:
   Logo in header
   Main Menu label left / hamburger right
   Navigation expands below
   Header utility links appear inside expanded navigation
   ========================================================== */


/* Variables */

:root {

	/* Header */
	--header-bg: #ffffff;
	--header-color: #222222;

	/* Header Row */
	--header-row-padding-top: 25px;
	--header-row-padding-bottom: 25px;

	/* Logo */
	--logo-max-width: 300px;
	--mobile-logo-max-width: 220px;

	/* Desktop Header Links */
	--header-links-font-size: 16px;
	--header-links-line-height: 1.2;
	--header-links-font-weight: var(--font-weight-regular);

	--header-links-bg: transparent;
	--header-links-color: #333;

	--header-links-hover-bg: #333;
	--header-links-hover-color: #ffffff;

	--header-links-border-color: #333;
	--header-links-border-radius: 50px;

	--header-links-padding-x: 30px;
	--header-links-padding-y: 10px;

	--header-links-spacing: 30px;
	
	/* Desktop Header Search */
	--header-search-font-size: 16px;
	--header-search-font-weight: var(--font-weight-regular);

	--header-search-bg: transparent;
	--header-search-color: #222222;

	--header-search-border-color: transparent;
	--header-search-border-radius: 0;

	--header-search-padding-x: 0;
	--header-search-padding-y: 10px;

	--header-search-icon-size: 24px;

	/* Main Navigation */
	--nav-font-family: var(--font-body);
	--nav-font-weight: var(--font-weight-medium);
	--nav-font-size: 20px;
	--nav-line-height: 1.2;

	--nav-link-color: #fff;
	--nav-link-bg: transparent;

	--nav-link-hover-color: #ffffff;
	--nav-link-hover-bg: #3da674;

	--nav-link-active-color: #ffffff;
	--nav-link-active-bg: transparent;

	/* Navigation Spacing */
	--nav-gap: 0;

	--nav-link-padding-y: 20px;
	--nav-link-padding-x: 40px;

	/* Desktop Dropdowns */
	--dropdown-bg: #3da674;
	--dropdown-border-color: #3da674;
	
	--dropdown-width: 250px;

	--dropdown-font-family: var(--nav-font-family);
	--dropdown-font-weight: var(--font-weight-light);
	--dropdown-font-size: 16px;

	--dropdown-link-color: #fff;
	--dropdown-link-bg: transparent;

	--dropdown-link-hover-color: #ffffff;
	--dropdown-link-hover-bg: transparent;

	/* Mobile Navigation */
	--mobile-nav-bg: transparent;

	--mobile-menu-label-color: #fff;

	--mobile-link-bg: transparent;
	--mobile-link-color: #fff;

	--mobile-link-hover-bg: #3da674;
	--mobile-link-hover-color: #ffffff;

	/* Mobile Dropdowns */
	--mobile-dropdown-bg: #3da674;
	--mobile-dropdown-color: #fff;

	--mobile-dropdown-hover-bg: #3da674;
	--mobile-dropdown-hover-color: #fff;

	/* Mobile Header Links */
	--mobile-header-links-font-size: 16px;
	--mobile-header-links-font-weight: var(--font-weight-light);

	--mobile-header-links-bg: transparent;
	--mobile-header-links-color: #fff;

	--mobile-header-links-border-color: transparent;
	--mobile-header-links-border-radius: 0;

	--mobile-header-links-padding-y: 5px;
	--mobile-header-links-padding-x: 15px;

	/* Hamburger */
	--mobile-toggle-color: #fff;
}


/* Header */
.header { padding-top: var(--header-padding-top); padding-bottom: var(--header-padding-bottom); background-color: var(--header-bg); color: var(--header-color); }
.header .row { margin-top: 0; margin-bottom: 0; padding-top: var(--header-row-padding-top); padding-bottom: var(--header-row-padding-bottom); }

/* Logo */
.site-logo { display: block; width: 100%; max-width: var(--logo-max-width); }
.site-logo img { display: block; width: 100%; height: auto; }

/* Main Navigation */
.main-nav { width: 100%; margin: 0; padding: 0; background: #238C5A; background: linear-gradient(90deg, rgba(35, 140, 90, 1) 0%, rgba(39, 156, 100, 1) 50%, rgba(35, 140, 90, 1) 100%); font-family: var(--nav-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); line-height: var(--nav-line-height); }
.main-nav .navbar-nav { margin: 0; padding: 0; list-style: none; }
.main-nav .nav-item { position: relative; margin: 0; padding: 0; }

/* Navigation Links */
.main-nav .nav-link { background-color: var(--nav-link-bg); color: var(--nav-link-color); font-family: var(--nav-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.main-nav .nav-link:hover,
.main-nav .nav-link:focus { background-color: var(--nav-link-hover-bg); color: var(--nav-link-hover-color); }

/* Current Page */
.main-nav .current-menu-item > .nav-link,
.main-nav .current-menu-parent > .nav-link,
.main-nav .current-menu-ancestor > .nav-link { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); }

/* Dropdown Menus */
.main-nav .dropdown-menu { margin: 0; padding: 0; background-color: var(--dropdown-bg); border: 1px solid var(--dropdown-border-color); border-radius: 0; }
.main-nav .dropdown-menu li { margin: 0; padding: 0; }
.main-nav .dropdown-item { display: block; width: 100%; padding: 12px 18px; background-color: var(--dropdown-link-bg); color: var(--dropdown-link-color); font-family: var(--dropdown-font-family); font-size: var(--dropdown-font-size); font-weight: var(--dropdown-font-weight); text-decoration: none; white-space: normal; transition: background-color 0.2s ease, color 0.2s ease; }
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus { background-color: var(--dropdown-link-hover-bg); color: var(--dropdown-link-hover-color); }

/* Mobile Menu Label */
.main-nav .navbar-brand { margin: 0; color: var(--mobile-menu-label-color); font-family: var(--nav-font-family); font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); }

/* Hamburger */
.main-nav .navbar-toggler { padding: 10px; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; }
.main-nav .navbar-toggler:hover,
.main-nav .navbar-toggler:focus { background-color: transparent; box-shadow: none; outline: none; }

.navbar-toggler-icon-custom { position: relative; display: block; width: 28px; height: 2px; background-color: var(--mobile-toggle-color); }
.navbar-toggler-icon-custom::before,
.navbar-toggler-icon-custom::after { content: ""; position: absolute; left: 0; width: 28px; height: 2px; background-color: var(--mobile-toggle-color); }
.navbar-toggler-icon-custom::before { top: -8px; }
.navbar-toggler-icon-custom::after { top: 8px; }

/* Search SVG (Shared basic SVG styling) */
.nav-search-icon { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop, 992px+  */
@media (min-width: 992px) {

	/* Desktop Header Content */
	.header-content { text-align: right; }
	.header-content .header-links { display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
	.header-content .header-links > li { margin: 0; padding: 0; }
	.header-content .header-links > li.menu-item-95 > a { background: #d29703 !important; border: 1px solid #d29703 !important; color: #fff !important; }
	.header-content .header-links > li.menu-item-95 > a:hover { color: #fff !important; }
	
	/* Spacing between header menu items */
	.header-content .header-links > li + li { margin-left: var(--header-links-spacing); }

	/* Regular Header Links */
	.header-content .header-links > li:not(.header-search) > a { display: block; padding: var(--header-links-padding-y) var(--header-links-padding-x); background-color: var(--header-links-bg); color: var(--header-links-color); border: 1px solid var(--header-links-border-color); border-radius: var(--header-links-border-radius); font-size: var(--header-links-font-size); font-weight: var(--header-links-font-weight); line-height: var(--header-links-line-height); text-decoration: none; white-space: nowrap; }
	.header-content .header-links > li:not(.header-search) > a:hover,
	.header-content .header-links > li:not(.header-search) > a:focus { background-color: var(--header-links-hover-bg); color: var(--header-links-hover-color); border-color: var(--header-links-border-color); text-decoration: none; }

	/* Desktop Header Search */
	.header-content .header-search .nav-search { display: flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; padding: var(--header-search-padding-y) var(--header-search-padding-x); background-color: var(--header-search-bg); color: var(--header-search-color); border: 1px solid var(--header-search-border-color); border-radius: var(--header-search-border-radius); font-size: var(--header-search-font-size); font-weight: var(--header-search-font-weight); text-decoration: none; }

	/* No search hover color change */
	.header-content .header-search .nav-search:hover,
	.header-content .header-search .nav-search:focus { background-color: var(--header-search-bg); color: var(--header-search-color); border-color: var(--header-search-border-color); text-decoration: none; }

	.header-content .header-search .nav-search-icon { width: var(--header-search-icon-size); height: var(--header-search-icon-size); }

	/* Desktop Main Navigation */
	.main-nav .navbar-collapse { display: flex !important; align-items: center; justify-content: center; }

	/* Menu is centered as a group. */
	.main-nav .navbar-nav { display: flex; align-items: center; justify-content: center; width: auto; margin: 0; padding: 0; gap: var(--nav-gap); }

	/* Top-level items size naturally. */
	.main-nav .navbar-nav > .nav-item { flex: 0 0 auto; width: auto; }

	/* Root-level links. Prevent multi-word labels from wrapping. */
	.main-nav .navbar-nav > .nav-item > .nav-link { display: block; width: auto; padding: var(--nav-link-padding-y) var(--nav-link-padding-x); white-space: nowrap; }

	/* Remove Bootstrap dropdown carets */
	.main-nav .dropdown-toggle::after,
	.main-nav .nav-link.dropdown-toggle::after,
	.main-nav .dropdown > a::after { display: none !important; content: none !important; margin: 0 !important; border: 0 !important; }

	/* Hide mobile submenu buttons */
	.main-nav .dropdown-toggle-button { display: none !important; }

	/* Desktop Dropdowns */
	.main-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; width: var(--dropdown-width); min-width: var(--dropdown-width); z-index: 1000; }
	.main-nav .dropdown:hover > .dropdown-menu,
	.main-nav .dropdown:focus-within > .dropdown-menu { display: block; }

	/* Nested Dropdown */
	.main-nav .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; }
}

/* Mobile/Tablet, Below 992px */
@media (max-width: 991.98px) {

	/* Header */
	.header { padding-top: var(--mobile-header-padding-top); padding-bottom: var(--mobile-header-padding-bottom); }
	
	/* Logo */
	.site-logo { width: auto; max-width: var(--mobile-logo-max-width); margin: 0 auto; }
	.site-logo img { width: auto; height: auto; max-width: 100%; margin: 0 auto; }

	/* Navigation Bar */
	.main-nav { width: 100%; margin: 0; padding: 20px 0; background-color: var(--mobile-nav-bg); }
	.main-nav > .container { align-items: center; }

	/* Main Collapse */
	.main-nav .navbar-collapse { flex-basis: 100%; width: 100%; margin-top: 10px; padding: 0; background-color: var(--mobile-nav-bg); }

	/* When open, stack everything vertically: main menu followed by mobile header content. */
	.main-nav .navbar-collapse.show,
	.main-nav .navbar-collapse.collapsing { flex-direction: column; align-items: stretch; }

	/* Main Menu */
	.main-nav .navbar-nav { display: block; width: 100%; margin: 0; padding: 0; }
	.main-nav .nav-item { position: relative; display: block; width: 100%; margin: 0 0 5px; padding: 0; }

	/* Root-Level Mobile Links */
	.main-nav .navbar-nav > .nav-item > .nav-link { display: block; width: 100%; padding: 12px 50px 12px 15px; background-color: var(--mobile-link-bg); color: var(--mobile-link-color); text-align: left; text-decoration: none; }

	/* Mobile Hover: Link + Arrow act as one visual item */
	.main-nav .navbar-nav > .nav-item:has(> .nav-link:hover) > .nav-link,
	.main-nav .navbar-nav > .nav-item:has(> .dropdown-toggle-button:hover) > .nav-link,
	.main-nav .navbar-nav > .nav-item:focus-within > .nav-link { background-color: var(--mobile-link-hover-bg); color: var(--mobile-link-hover-color); }

	.main-nav .navbar-nav > .nav-item:has(> .nav-link:hover) > .dropdown-toggle-button,
	.main-nav .navbar-nav > .nav-item:has(> .dropdown-toggle-button:hover) > .dropdown-toggle-button,
	.main-nav .navbar-nav > .nav-item:focus-within > .dropdown-toggle-button { color: var(--mobile-link-hover-color); }

	/* Current Page */
	.main-nav .navbar-nav > .current-menu-item > .nav-link,
	.main-nav .navbar-nav > .current-menu-parent > .nav-link,
	.main-nav .navbar-nav > .current-menu-ancestor > .nav-link { background-color: var(--mobile-link-hover-bg); color: var(--mobile-link-hover-color); }

	.main-nav .navbar-nav > .current-menu-item > .dropdown-toggle-button,
	.main-nav .navbar-nav > .current-menu-parent > .dropdown-toggle-button,
	.main-nav .navbar-nav > .current-menu-ancestor > .dropdown-toggle-button { color: var(--mobile-link-hover-color); }

	/* Remove Bootstrap caret */
	.main-nav .dropdown-toggle::after { display: none !important; }

	/* Mobile Submenu Button */
	.main-nav .dropdown-toggle-button { display: flex; position: absolute; top: 0; right: 0; align-items: center; justify-content: center; width: 50px; height: 48px; padding: 0; background-color: transparent; border: 0; color: var(--mobile-link-color); z-index: 2; cursor: pointer; transition: color 0.2s ease; }
	.main-nav .dropdown-toggle-button:hover,
	.main-nav .dropdown-toggle-button:focus { background-color: transparent; }

	/* Submenu Arrow */
	.main-nav .dropdown-toggle-button::before { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }

	/* Rotate Arrow When Open */
	.main-nav .nav-item:has(> .dropdown-menu.is-open) > .dropdown-toggle-button::before { transform: rotate(225deg); }

	/* Mobile Dropdowns */
	.main-nav .dropdown-menu { display: none; position: static; width: 100%; margin: 0; padding: 5px 0; background-color: var(--mobile-dropdown-bg); border: 0; border-radius: 0; transform: none !important; }
	.main-nav .dropdown-menu.is-open { display: block; }

	/* Dropdown Links */
	.main-nav .dropdown-menu .dropdown-item { display: block; width: 100%; padding: 10px 15px 10px 30px; background-color: var(--mobile-dropdown-bg); color: var(--mobile-dropdown-color); text-align: left; text-decoration: none; }
	.main-nav .dropdown-menu .dropdown-item:hover,
	.main-nav .dropdown-menu .dropdown-item:focus { background-color: var(--mobile-dropdown-hover-bg); color: var(--mobile-dropdown-hover-color); }

	/* Mobile Header Content */
	.mobile-header-content { display: block !important; flex: 0 0 100%; width: 100%; margin: 0; padding: 0; }
	.mobile-header-content .mobile-header-links { display: block; width: 100%; margin: 0; padding: 0; list-style: none; }
	.mobile-header-content .mobile-header-links > li { display: block; width: 100%; margin: 0 0 5px; padding: 0; }

	/* Mobile Header Links */
	.mobile-header-content .mobile-header-links > li > a { display: block; width: 100%; padding: var(--mobile-header-links-padding-y) var(--mobile-header-links-padding-x); background-color: var(--mobile-header-links-bg); color: var(--mobile-header-links-color); border: 1px solid var(--mobile-header-links-border-color); border-radius: var(--mobile-header-links-border-radius); font-size: var(--mobile-header-links-font-size); font-weight: var(--mobile-header-links-font-weight); text-align: left; text-decoration: none; }
	.mobile-header-content .mobile-header-links > li > a:hover,
	.mobile-header-content .mobile-header-links > li > a:focus { background-color: var(--mobile-header-links-bg); color: var(--mobile-header-links-color); border-color: var(--mobile-header-links-border-color); text-decoration: none; }

	/* Mobile Search Icon */
	.mobile-header-content .mobile-header-search .nav-search { display: flex; align-items: center; justify-content: flex-start; }
	.mobile-header-content .mobile-header-search .nav-search-icon { width: var(--header-search-icon-size); height: var(--header-search-icon-size); }
}