/*
 Theme Name:   Next Step
 Theme URI:    https://nsis.com.au/
 Description:  Next Step Theme
 Author:       Resonate
 Author URI:   https://www.resonate.com.au/
 Template:     Divi
 Version:      1.1.0
*/

/* Import parent theme styles */
@import url("/wp-content/themes/Divi/style.css");

:root {
	
  /* Menu Colours */
  --menu-color: #151515;
  --menu-hover-color: #f24e00;
  --font-family-body: 'Inter', sans-serif;
	
  /* Font families */
  --font-family-primary: Inter, sans-serif;
	
  /* Content Gap Default */
  --content-gap: clamp(20px, 1.9vw + 13px, 40px);
  --content-gap-reduced: clamp(20px, 0.38vw + 19px, 24px);
  --blog-sidebar-blogs: clamp(20px, 3vw, 40px);

  /* Global Padding */
  --global-padding: clamp(20px, 1.9vw + 13px, 40px);
	
  /* Global Widths */
  --global-width: 1400px;
  --global-thin-width: 1120px;
  --global-large-width: 1680px;
	
  /* Section padding for large wide elements */
  --section-large-wide-padding-left-right: clamp(20px, 11.43vw - 25px, 140px);
  --section-large-wide-padding-top-bottom: clamp(20px, 4.29vw + 3px, 65px);
	
  /* Spacing between contents */
  --section-top-bottom-spacing: clamp(20px, 3.81vw + 5px, 60px);
	
  /* Colors */
  --color-text-primary: #151515;
  --color-text-focus: #F24E00;

  /* H1 */
  --font-size-h1: clamp(38px, 3.39vw + 25px, 50px);
  --font-weight-h1: 600;
  --line-height-h1: 110%;

  /* H1 Subtitle */
  --font-size-h1-subtitle: clamp(36px, 3.81vw + 21px, 50px);
  --font-weight-h1-subtitle: 400;
  --line-height-h1-subtitle: 110%;

  /* H2 */
  --font-size-h2: clamp(28px, 1.71vw + 21px, 34px);
  --font-weight-h2: 600;
  --line-height-h2: 120%;

  /* H2 Subtitle */
  --font-size-h2-subtitle: clamp(28px, 1.71vw + 21px, 34px);
  --font-weight-h2-subtitle: 400;
  --line-height-h2-subtitle: clamp(34px, 2.29vw + 25px, 42px);

  /* H3 */
  --font-size-h3: clamp(18px, 0.57vw + 16px, 20px);
  --font-weight-h3: 600;
  --line-height-h3: 140%;

  /* Paragraph */
  --font-size-p: clamp(15px, 0.29vw + 14px, 16px);
  --font-weight-p: 400;
  --line-height-p: 180%;
	
  /* Pill */
  --font-size-pill: clamp(11px, 0.29vw + 10px, 12px);
  --font-weight-pill: 400;
  --line-height-pill: 180%;

  /* Paragraph Focus */
  --font-size-p-focus: clamp(18px, 0.57vw + 16px, 20px);
  --font-weight-p-focus: 600;
  --line-height-p-focus: 140%;
}

/* Adjustments to navigation menu */

header {
	padding-left: var(--global-padding);
	padding-right: var(--global-padding);
	
	.container.et_menu_container {
		width: 100%;
		max-width: var(--global-thin-width);
	}
	
	#logo {
		max-width: 220px !important;
		width: 100% !important;
		height: auto !important;
	}
	
	#top-menu {
			display: flex;
			@media (max-width: 980px) {
				display: none;
			}

			flex-direction: row;
			gap: clamp(10px, 3vw, 40px);

			li {
				padding: 0;
				margin: 0;
			}

			ul.sub-menu {
			  padding-top: 0px;
			  padding-bottom: 0px;
			}

			ul.sub-menu li, ul.sub-menu li a {
			  width: 100%;
			}
	}

#top-menu a {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-p);
  line-height: var(--line-height-p);
  color: var(--menu-color);
  font-family: var(--font-family-body);
  transform: none;
}

/* Hover state for all menu links */
#top-menu a:hover,
#top-menu li li a:hover,
#top-menu .sub-menu a:hover {
  color: var(--menu-hover-color);
}

/* Top-level current page */
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a {
  color: var(--menu-hover-color);
}

/* Top-level current parent/ancestor, e.g. Services when on a child/current section */
#top-menu > li.current-menu-parent > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current_page_parent > a,
#top-menu > li.current_page_ancestor > a {
  color: var(--menu-hover-color);
}

/* Reset dropdown children so active parent colour does not bleed into all items */
#top-menu li.current-menu-parent .sub-menu li > a,
#top-menu li.current-menu-ancestor .sub-menu li > a,
#top-menu li.current_page_parent .sub-menu li > a,
#top-menu li.current_page_ancestor .sub-menu li > a {
  color: var(--menu-color);
}

/* Active dropdown or nested dropdown item */
#top-menu .sub-menu li.current-menu-item > a,
#top-menu .sub-menu li.current_page_item > a,
#top-menu .sub-menu li.current-menu-parent > a,
#top-menu .sub-menu li.current-menu-ancestor > a,
#top-menu .sub-menu li.current_page_parent > a,
#top-menu .sub-menu li.current_page_ancestor > a {
  color: var(--menu-hover-color);
}

/* Do not show hash/section dropdown links as active */
#top-menu .sub-menu li.current-menu-item > a[href*="#"],
#top-menu .sub-menu li.current_page_item > a[href*="#"],
#top-menu .sub-menu li.current-menu-parent > a[href*="#"],
#top-menu .sub-menu li.current-menu-ancestor > a[href*="#"],
#top-menu .sub-menu li.current_page_parent > a[href*="#"],
#top-menu .sub-menu li.current_page_ancestor > a[href*="#"] {
  color: var(--menu-color);
}

/* Dropdown children still hover orange */
#top-menu li.current-menu-parent .sub-menu li > a:hover,
#top-menu li.current-menu-ancestor .sub-menu li > a:hover,
#top-menu li.current_page_parent .sub-menu li > a:hover,
#top-menu li.current_page_ancestor .sub-menu li > a:hover,
#top-menu .sub-menu li > a:hover,
#top-menu .sub-menu li > a[href*="#"]:hover {
  color: var(--menu-hover-color);
}


	
	.et_mobile_menu {
		--offset: clamp(20px, 1.9vw + 13px, 40px);
		left: calc(-1 * var(--offset));
		width: calc(100% + (var(--offset) * 2));
		padding: 0;
		
		li ul, li ul li {
			padding-left: 0px;
			margin-left: 0px;
		}
		
		li a {
			padding-left: var(--global-padding);
			padding-right: var(--global-padding);
		}
	}
}