/*
 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);

  /* Global Padding */
  --global-padding: clamp(20px, 1.9vw + 13px, 40px);
	
  /* Global Widths */
  --global-width: 1400px;
  --global-thin-width: 1120px;
	
  /* 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%;

  /* 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;
			}
		}

	
	#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;
	}

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

	/* But do not show hash/section links as active */
	#top-menu li.current-menu-item > a[href*="#"],
	#top-menu li.current_page_item > a[href*="#"] {
	  color: var(--menu-color);
	}

	/* Hash/section links still hover orange */
	#top-menu li.current-menu-item > a[href*="#"]:hover,
	#top-menu li.current_page_item > a[href*="#"]:hover {
	  color: var(--menu-hover-color);
	}
	
	/* Hover state for top-level, dropdown, and nested dropdown links */
	#top-menu a:hover,
	#top-menu li li a:hover,
	#top-menu .sub-menu a:hover {
	  color: var(--menu-hover-color);
	}

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

	/* Current parent/ancestor item, e.g. top-level item when child page is active */
	#top-menu > li.current-menu-parent > a,
	#top-menu > li.current-menu-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:not(.current-menu-item) > a,
	#top-menu li.current-menu-ancestor .sub-menu li:not(.current-menu-item) > a {
	  color: var(--menu-color);
	}

	/* But still allow dropdown children to hover orange */
	#top-menu li.current-menu-parent .sub-menu li > a:hover,
	#top-menu li.current-menu-ancestor .sub-menu li > a:hover {
	  color: var(--menu-hover-color);
	}

	/* Active dropdown or nested dropdown item */
	#top-menu .sub-menu li.current-menu-item > a,
	#top-menu .sub-menu li.current-menu-parent > a,
	#top-menu .sub-menu li.current-menu-ancestor > a {
	  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 a {
			padding-left: var(--global-padding);
			padding-right: var(--global-padding);
		}
	}
}