/*======================================
Theme Name: Divi child theme
Theme URI: https://ecampusontario.ca
Description: This is child theme.
Version: 1.0
Author: eCampusOntario
Author URI: https://ecampusontario.ca
Template: Divi
======================================*/

/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */

/* Load up all of the variants of the Frutiger LT Pro font family */
/*@import url('https://fonts.cdnfonts.com/css/frutiger-lt-pro');*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* 
===========================================
eCampusOntario Color Palette Variables
===========================================
*/

:root {
	/* Aubergine Color Family */
	--eco-color-aubergine: #1e1a34;
	--eco-color-aubergine-75: #41334b;
	--eco-color-aubergine-50: #867a84;
	--eco-color-aubergine-25: #bcbbc2;
	--eco-color-aubergine-10: #edeaea;
	--eco-color-aubergine-05: #f7f7f6;

	/* Steel Color Family */
	--eco-color-steel: #6ba4b8;
	--eco-color-steel-200: #205c69;
	--eco-color-steel-75: #a8bcc9;
	--eco-color-steel-50: #b5d1db;
	--eco-color-light-steel: #dae8ed;

	/* Grass Color Family */
	--eco-color-grass: #76881d;
	--eco-color-grass-200: #2c461b;
	--eco-color-grass-75: #9aa954;
	--eco-color-grass-50: #bac38e;
	--eco-color-grass-25: #dde1c6;
	--eco-color-grass-10: #f1f3e8;

	/* Tangerine Color Family */
	--eco-color-tangerine: #f1b434;
	--eco-color-tangerine-200: #b45304;
	--eco-color-tangerine-75: #f6c745;
	--eco-color-tangerine-50: #f8da99;
	--eco-color-light-tangerine: #fbe9c1;

	/* Base Colors */
	--eco-color-black: #000000;
	--eco-color-white: #ffffff;
	--eco-color-light-grey: #d9d9d9;

	/* Semantic Color Aliases for Common Usage */
	--eco-color-primary: var(--eco-color-aubergine);
	--eco-color-secondary: var(--eco-color-steel);
	--eco-color-accent: var(--eco-color-tangerine);
	--eco-color-success: var(--eco-color-grass);
	--eco-color-text: var(--eco-color-aubergine);
	--eco-color-text-light: var(--eco-color-aubergine-50);
	--eco-color-background: var(--eco-color-white);
	--eco-color-background-light: var(--eco-color-aubergine-05);
	--eco-color-border: var(--eco-color-aubergine-25);

	/* Common Design System Values */
	--eco-border-radius: 4px;
	--eco-border-radius-lg: 8px;
	--eco-transition: all 0.3s ease;
	--eco-spacing-xs: 4px;
	--eco-spacing-sm: 8px;
	--eco-spacing-md: 16px;
	--eco-spacing-lg: 24px;
	--eco-spacing-xl: 32px;
	--eco-header-height: 80px;
}

/* Apply font globally, but don’t override Font Awesome icon font on pseudo-elements */
body * {
	font-family: "Roboto", Helvetica, Arial, Lucida, sans-serif !important;
}
.et-pb-icon {
	font-family: "ETmodules" !important; /* Divi icon font */
}
/* Allow icon fonts to render correctly */
.fa,
.fab,
.fas,
.far,
.fal,
.fa-solid,
.fa-regular,
.fa::before,
.fas::before,
.far::before,
.fal::before,
.fa-solid::before,
.fa-regular::before {
	font-family: "Font Awesome 6 Free" !important;
}
.fas,
.fa-solid,
.fas::before,
.fa-solid::before {
	font-weight: 900 !important;
}
.far,
.fa-regular,
.far::before,
.fa-regular::before {
	font-weight: 400 !important;
}
.fab,
.fa-brands,
.fab::before,
.fa-brands::before {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}
.container.et_menu_container {
	width: 100%;
}
/* Mobile menu button icon: burger (default) -> close (when expanded) */
span.mobile_menu_bar:before {
	font-family: "ETmodules" !important; /* Divi icon font */
	content: "\61"; /* burger icon */
	color: var(--eco-color-aubergine);
	transition: color 160ms ease, transform 160ms ease;
}
span.mobile_menu_bar[aria-expanded="true"]:before,
span.mobile_menu_bar.is-open:before {
	content: "\4d"; /* close icon */
}
span.mobile_menu_bar:hover:before,
span.mobile_menu_bar:focus-visible:before {
	color: var(--eco-color-tangerine);
}
/* Keyboard focus ring for the mobile toggle */
span.mobile_menu_bar:focus-visible {
	outline: 2px solid var(--eco-color-steel-200);
	outline-offset: 2px;
	border-radius: 3px;
}
/* Larger hit area for keyboard users */
span.mobile_menu_bar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}
/* Skip link styles */
.skip-link {
	position: absolute;
	top: -1000px;
	left: 0;
	background: var(--eco-color-white);
	color: var(--eco-color-aubergine);
	padding: 8px 12px;
	z-index: 100000;
	border: 2px solid var(--eco-color-steel-200);
}
.skip-link:focus {
	top: 10px;
	background: var(--eco-color-tangerine);
}

/* Ensure skip target is visible below sticky header */
#main-content {
	scroll-margin-top: 80px; /* matches approx header height; adjust if needed */
}
#main-content:focus {
	outline: 0; /* avoid stray focus ring on the hidden marker */
}
body {
	font-weight: 360;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
}
em {
	font-style: italic;
}
strong,
b {
	font-weight: bold;
}
#et-top-navigation,
#ec-site-specific-nav {
	font-weight: bold;
}
/* 
===========================================
Navigation Padding Override
===========================================
*/

/* Ensure consistent bottom padding for #et-top-navigation across all screen sizes */
#et-top-navigation nav > ul > li > a {
	padding-bottom: 30px !important;
}

/* 
===========================================
Navigation Colors
===========================================
*/

/* Force all menu link text to aubergine across desktop, dropdowns, and mobile */
#et-top-navigation #top-menu a,
#et-top-navigation #top-menu a:link,
#et-top-navigation #top-menu a:visited,
#et-top-navigation #top-menu a:hover,
#et-top-navigation #top-menu a:focus,
#et-top-navigation #top-menu a:active,
#et-top-navigation .sub-menu a,
#et-top-navigation .sub-menu a:link,
#et-top-navigation .sub-menu a:visited,
#et-top-navigation .sub-menu a:hover,
#et-top-navigation .sub-menu a:focus,
#et-top-navigation .sub-menu a:active,
.et_mobile_menu a,
.et_mobile_menu a:link,
.et_mobile_menu a:visited,
.et_mobile_menu a:hover,
.et_mobile_menu a:focus,
.et_mobile_menu a:active,
#mobile_menu_slide a,
#mobile_menu_slide a:link,
#mobile_menu_slide a:visited,
#mobile_menu_slide a:hover,
#mobile_menu_slide a:focus,
#mobile_menu_slide a:active,
#ec-site-specific-nav a,
#ec-site-specific-nav a:link,
#ec-site-specific-nav a:visited,
#ec-site-specific-nav a:hover,
#ec-site-specific-nav a:focus,
#ec-site-specific-nav a:active {
	color: var(--eco-color-aubergine) !important;
}

/* 
===========================================
Navigation Hover Underline
===========================================
*/

/* Underline menu items on hover/focus across desktop, dropdowns, and mobile */
#et-top-navigation #top-menu a:hover,
#et-top-navigation #top-menu a:focus,
#et-top-navigation .sub-menu a:hover,
#et-top-navigation .sub-menu a:focus,
.et_mobile_menu a:hover,
.et_mobile_menu a:focus,
#mobile_menu_slide a:hover,
#mobile_menu_slide a:focus,
#ec-site-specific-nav a:hover,
#ec-site-specific-nav a:focus {
	text-decoration: underline !important;
	text-decoration-color: var(--eco-color-aubergine) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: auto;
}

/* 
===========================================
Remove Hover Opacity on Menu Items
===========================================
*/

/* Ensure full opacity on menu items and links in all states (desktop, dropdowns, mobile) */
#et-top-navigation #top-menu li,
#et-top-navigation .sub-menu li,
#et-top-navigation #top-menu a,
#et-top-navigation .sub-menu a,
.et_mobile_menu li,
.et_mobile_menu a,
#mobile_menu_slide li,
#mobile_menu_slide a,
#ec-site-specific-nav li,
#ec-site-specific-nav a {
	opacity: 1 !important;
}

#et-top-navigation #top-menu a:hover,
#et-top-navigation #top-menu a:focus,
#et-top-navigation #top-menu a:active,
#et-top-navigation .sub-menu a:hover,
#et-top-navigation .sub-menu a:focus,
#et-top-navigation .sub-menu a:active,
.et_mobile_menu a:hover,
.et_mobile_menu a:focus,
.et_mobile_menu a:active,
#mobile_menu_slide a:hover,
#mobile_menu_slide a:focus,
#mobile_menu_slide a:active,
#ec-site-specific-nav a:hover,
#ec-site-specific-nav a:focus,
#ec-site-specific-nav a:active {
	opacity: 1 !important;
}

/* 
===========================================
Dropdown Styling
===========================================
*/

/* Dropdown panel background */
#et-top-navigation .sub-menu,
#et-top-navigation #top-menu li ul {
	background-color: var(--eco-color-white) !important;
	border: none !important;
	box-shadow: 0 8px 20px rgba(30, 26, 52, 0.15);
	padding: 0 !important; /* flush edges like reference */
}

/* Submenu items default state */
#et-top-navigation .sub-menu a {
	background-color: transparent !important;
	color: var(--eco-color-aubergine) !important; /* static aubergine */
	display: block; /* ensure full-width hit area for background */
	border-bottom: 1px solid var(--eco-color-aubergine-10);
	padding: 14px 18px;
	margin: 0;
	transition: background-color 160ms ease, color 160ms ease,
		text-decoration-color 160ms ease;
}

/* Hover/focus: tangerine background with aubergine underlined text */
#et-top-navigation .sub-menu li:hover > a,
#et-top-navigation .sub-menu a:hover,
#et-top-navigation .sub-menu a:focus {
	background-color: var(--eco-color-tangerine) !important; /* #f1b434 */
	color: var(--eco-color-aubergine) !important; /* #1E1A34 */
	text-decoration: underline !important;
	text-decoration-color: var(--eco-color-aubergine) !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	border-bottom-color: transparent !important; /* remove divider on highlighted */
}

/* Active state mirrors hover highlight */
#et-top-navigation .sub-menu .current-menu-item > a,
#et-top-navigation .sub-menu .current_page_item > a,
#et-top-navigation .sub-menu .current_page_ancestor > a {
	background-color: var(--eco-color-tangerine) !important;
	color: var(--eco-color-aubergine) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--eco-color-aubergine) !important;
	border-bottom-color: transparent !important;
}

/* Remove divider on last item */
#et-top-navigation .sub-menu li:last-child > a {
	border-bottom: none !important;
}

/* Mirror hover background in mobile menus for consistency */
.et_mobile_menu li a:hover,
.et_mobile_menu li a:focus,
#mobile_menu_slide li a:hover,
#mobile_menu_slide li a:focus {
	background-color: var(--eco-color-tangerine) !important;
	color: var(--eco-color-aubergine) !important;
}

/* 
===========================================
Navigation Accessibility
===========================================
*/

/* Visible focus ring for keyboard users */
#et-top-navigation a:focus-visible,
#mobile_menu_slide a:focus-visible,
.et_mobile_menu a:focus-visible {
	outline: 2px solid var(--eco-color-steel-200);
	outline-offset: 2px;
}

/* Open submenus on keyboard focus and JS-opened state */
#top-menu > li:focus-within > ul.sub-menu,
#top-menu > li.is-open > ul.sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}
#top-menu li li {
	padding: 0px;
}
.nav li ul {
	width: auto;
}
/* 
===========================================
Logo Container Customization
===========================================
*/

/* Override Divi's logo container to display multiple logos */
.logo_container {
	display: flex !important;
	align-items: center !important;
	gap: 0px !important;
}
.et_menu_container {
	position: relative;
	overflow: visible !important;
}

/* eCampusOntario Brand Block (grid + wordmark on aubergine) */

.eco-grid-link {
	background: none;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.eco-grid-link:hover svg rect,
.eco-grid-link:focus-visible svg rect {
	fill: var(--eco-color-tangerine);
}

.eco-grid-link:focus-visible,
.ecampus-logo-link:focus-visible svg,
.site-logo-link:focus-visible img {
	outline: 2px solid var(--eco-color-tangerine);
	outline-offset: 3px;
	border-radius: 3px;
}
.ecampus-logo-link {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.eco-logo-svg {
    width: 115px;
    height: auto;
    display: block;
}

.ecampus-logo-link:hover .eco-logo-path,
.ecampus-logo-link:focus .eco-logo-path {
    fill: #f1b434;
}

/* Mega Menu Panel */
.eco-mega[hidden] {
	display: none !important;
}
.eco-mega {
	max-width: 45vw;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 9999;
	background: var(--eco-color-white);
	box-shadow: 0 8px 24px rgba(30, 26, 52, 0.18);
}
.eco-mega__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px;
}
.eco-mega-menu-list {
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	grid-auto-flow: column;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-mega-item {
	border-bottom: 1px solid var(--eco-color-aubergine-10);
}

.eco-mega-item:nth-child(4),
.eco-mega-item:nth-child(8) {
	border-bottom: none;
}

.eco-mega-link {
	color: var(--eco-color-aubergine);
	text-decoration: none;
	display: block;
	padding: 0px 6px 12px 6px;
	height: 100%;
	box-sizing: border-box;
}
.eco-mega-link:focus-visible {
	outline: 2px solid var(--eco-color-aubergine);
	outline-offset: 3px;
	border-radius: 3px;
}

.eco-mega-menu-list li a:hover,
.eco-mega-menu-list li a:focus-visible {
	text-decoration: none;
	text-underline-offset: 3px;
	background-color: var(--eco-color-tangerine);
}
.eco-mega-desc {
	display: block;
	color: var(--eco-color-aubergine-50);
	line-height: 1.45;
	font-size: clamp(14px, 1.2vw, 16px);
	text-decoration:none !important;
}
.eco-mega-item:hover .eco-mega-desc,
.eco-mega-link:focus-visible .eco-mega-desc,
.eco-mega-desc:hover,
.eco-mega-desc:focus-within {
	color: var(--eco-color-aubergine);
}
.eco-mega-link:focus-visible .eco-mega-title,
.eco-mega-link:hover .eco-mega-title {
  text-decoration: underline !important;
}

/* Mega menu item typography and divider */
.eco-mega-title {
	display: block;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 6px;
	font-size: clamp(16px, 1.6vw, 18px);
}
@media (max-width: 1360px) {
	.eco-mega {
		max-width: 60vw;
	}
}

@media (max-width: 980px) {
	.eco-mega {
		max-width: 80vw;
	}
	.eco-mega__inner {
		padding: 16px;
	}

}
@media (max-width: 600px) {
	.eco-mega-menu-list {
		grid-template-rows: auto;
		grid-auto-flow: row;
	}
	
	.eco-mega-item:nth-child(4) {
		border-bottom: 1px solid var(--eco-color-aubergine-10);
	}
	
	.eco-mega-item:nth-child(8) {
		border-bottom: none;
	}
	
	.eco-logo-svg {
		width: 100px;
	}
}

/* Site Logo Styling */
.site-logo-link {
	display: block;
	flex-shrink: 0;
	background-color: white;
	padding: clamp(6px, 1vw, 10px);
	border-radius: 4px;
}

#logo {
	height: clamp(30px, 4vw, 35px) !important;
	width: auto !important;
	max-width: 100% !important;
}
@media (max-width:1200) {	
	#logo {
		height: clamp(25px, 5vw, 30px) !important;
	}
}
.et_non_fixed_nav.et_fullwidth_nav.et_header_style_left .logo_container {
	padding-left: 0px !important;
	gap: 0px !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
	.logo_container {
		gap: 0px !important;
	}

	.ecampus-logo {
		height: clamp(25px, 4vw, 30px);
	}

	#logo {
		height: clamp(25px, 2.5vw, 30px) !important;
	}
}

@media (max-width: 980px) {
	#et-top-navigation .sub-menu {
		box-shadow: none !important;
	}

	.ecampus-logo {
		height: clamp(25px, 5vw, 30px);
	}

	/* Mobile menu polish: remove shadows, improve spacing, dividers, and states */
	#mobile_menu_slide,
	.et_mobile_menu {
		box-shadow: none !important;
		background: var(--eco-color-white) !important;
		border: none;
	}

	/* Remove item-level shadows and normalize spacing */
	.et_mobile_menu li,
	#mobile_menu_slide li {
		box-shadow: none !important;
		margin: 0;
	}

	.et_mobile_menu li a,
	#mobile_menu_slide li a {
		box-shadow: none !important;
		display: block;
		padding: 14px 20px;
		background: transparent !important;
		border-bottom: 1px solid var(--eco-color-aubergine-10);
	}

	/* No divider after the last item */
	.et_mobile_menu li:last-child > a,
	#mobile_menu_slide li:last-child > a {
		border-bottom: none;
	}

	/* Section headers (parents) with subtle band */
	.et_mobile_menu .menu-item-has-children > a,
	#mobile_menu_slide .menu-item-has-children > a {
		background: var(--eco-color-background-light) !important;
		font-weight: 700;
	}

	/* Indent sub-items */
	.et_mobile_menu .menu-item-has-children > ul > li > a,
	#mobile_menu_slide .menu-item-has-children > ul > li > a {
		padding-left: 32px;
	}

	/* Hover/focus-visible feedback on mobile */
	.et_mobile_menu li a:hover,
	#mobile_menu_slide li a:hover,
	.et_mobile_menu li a:focus-visible,
	#mobile_menu_slide li a:focus-visible {
		background-color: var(--eco-color-tangerine) !important;
		text-decoration: none !important;
	}


	.mobile_menu_bar {
		padding: 0;
		margin: 0;
	}

	#et-top-navigation {
		display: flex;
		align-items: center;
	}
	.et_header_style_left #et-top-navigation .mobile_menu_bar {
		padding-bottom: 30px !important;
	}
}
.et_header_style_left #et-top-navigation {
	max-width: 80% !important;
}
#main-footer {
	display: block !important;
}

/* Footer design */
#main-footer {
	background-color: var(--eco-color-aubergine) !important;
	color: var(--eco-color-white);
	padding: 24px 44px 20px;
}
#main-footer .container,
#main-footer .container .et_pb_row {
	width: 100% !important;
	max-width: 100% !important;
}
#main-footer p,
#main-footer a {
	color: var(--eco-color-white);
}
#main-footer a:hover,
#main-footer a:focus-visible {
	color: var(--eco-color-tangerine);
	text-decoration:underline;
}
#main-footer .eco-footer-row-hr hr {
	border: none;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
	margin: 16px 0 12px;
}
#main-footer nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 0;
	margin: 0;
}
#main-footer .eco-social-links {
	display: flex;
	gap: 14px;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}
#main-footer .eco-social-links li {
	display: flex;
}
#main-footer .eco-social-links a {
	color: var(--eco-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; /* a11y tap target */
	min-height: 44px; /* a11y tap target */
	border-radius: 6px; /* improve focus ring visibility */
}
#main-footer .eco-social-links a:hover,
#main-footer .eco-social-links a:focus-visible {
	color: var(--eco-color-tangerine);
	text-decoration: none;
}
/* Visible focus outline for social links */
#main-footer .eco-social-links a:focus-visible {
	outline: 2px solid var(--eco-color-tangerine);
	outline-offset: 2px;
}
/* Size all footer social icons to 20x20 */
#main-footer .eco-social-links i {
	font-size: 20px; /* FA icons */
	line-height: 1; /* prevent extra vertical space */
}
#main-footer .eco-social-links a svg {
	width: 20px !important; /* Bluesky inline SVG */
	height: 20px !important;
}

/* Ensure inline SVG (Bluesky) follows the same hover color behavior */
#main-footer .eco-social-links a svg path {
	fill: var(--eco-color-white);
	transition: fill 0.2s ease;
}
#main-footer .eco-social-links a:hover svg path,
#main-footer .eco-social-links a:focus-visible svg path {
	fill: var(--eco-color-tangerine);
}

@media (max-width: 768px) {
	#main-footer .ec-row {
		display: block;
	}
	#main-footer .eco-social-links {
		justify-content: flex-start;
		margin-top: 12px;
	}
}
/* Footer logos row */
/* Footer logos using Divi inner columns */
.eco-logos-row {
	display: flex;
	align-items: end;
}
.eco-logo-col {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 0px !important;
	padding: 1rem;
}
.eco-flex-column {
	flex-direction: column;
}
.eco-logo-col .wp-block-image {
	margin: 0; /* remove default figure margins */
	width: auto !important;
}

.eco-funded-by {
	margin-top: 0.5rem;
}
.eco-funded-by {
	margin-top: 0.5rem;
}
.eco-row-align-center {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.eco-logo-col img {
	width: auto !important;
	max-width: 100%;
}
@media (min-width: 981px) {
	.eco-row-align-center {
		flex-direction: row;
	}
	.eco-logo-col {
		padding: 0.5rem;
	}
}
#main-header,
#et-top-navigation
{
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
}
#main-header .container,
#et-top-navigation .container,
.et_menu_container {
    height: 80px !important;
}

.eco-brand {
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
	background: var(--eco-color-aubergine);
	height: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
}

.eco-logo-svg {
    height: 54px !important;
    width: 114px !important;
	padding: 0.5rem;
}
ul li,
ol li {
	margin-bottom: 0.625rem;
}

.et_header_style_left #et-top-navigation {
	padding-top: 33px;
}
#top-menu li {
  display: inline-block !important;
  font-size: 0.875rem !important; /* 14px */
  padding-right: 1.375rem !important; /* 22px */
}

@media (max-width: 1224px) {
  #top-menu li {
    font-size: 0.75rem !important; /* 12px */
    padding-right: 0.5rem !important;
  }
}

.et_mobile_menu {
	top: 80px;
}

@media (max-width: 1074px) {
  .et_header_style_left #et-top-navigation {
        padding-left: 120px !important;
  }
}

@media (max-width: 1024px) {
	#et_mobile_nav_menu {
		display: flex;
		align-items: center;
		height: 100%;
	}
	#top-menu {
		display: none !important;
	}
}