@use "../mixins/utilities";
@use "../variables-site/structure";

// Menu Toggles
.mobile-menu-toggle,
.desktop-menu-toggle,
.subpage-toggle {
	align-items: center;
	background-color: transparent;
	color: inherit;
	display: flex;
	padding: 0;

	&:hover,
	&:focus {
		background-color: transparent;
		color: inherit;
	}

	&:focus {
		outline-offset: 0;
	}
}

.mobile-menu-toggle,
.desktop-menu-toggle {
	svg {
		margin-right: #{0.25 * structure.$size__spacing-unit};
	}
}

.middle-header-contain .desktop-menu-toggle svg {
	margin-right: 0;
}

.site-header .mobile-menu-toggle,
.site-header .desktop-menu-toggle,
.site-header .subpage-toggle {
	&:hover {
		color: inherit;
	}
}

// Place mobile menu on far right.
.mobile-menu-toggle {
	margin-left: auto;
}

// Mobile CTA
.site-header .mb-cta {
	&,
	&:visited:not(:hover) {
		background: #d33;
		color: #fff;
	}

	font-size: 0.7em;
	margin-left: auto;
	padding: #{0.6 * structure.$size__spacing-unit} #{0.5 * structure.$size__spacing-unit};

	&,
	&:visited {
		background: #d33;
		color: #fff;
	}

	&:hover {
		background: var(--newspack-theme-color-text-main);
		color: #fff;
	}

	+ .mobile-menu-toggle {
		margin-left: #{0.5 * structure.$size__spacing-unit};

		span {
			display: inline-block;
			overflow: hidden;
			width: 0;
		}

		svg {
			height: 29px;
			width: 29px;
		}
	}
}

// Hide desktop menu toggle on smaller screens
.site-header .desktop-menu-toggle,
.subpage-toggle-contain {
	display: none;
	font-size: var(--newspack-theme-font-size-xs);
	font-weight: normal;
	line-height: 2;
	padding: #{0.125 * structure.$size__spacing-unit} 0;
}

.site-header .desktop-menu-toggle,
.h-ll .subpage-toggle-contain {
	margin: 0 #{1.25 * structure.$size__spacing-unit} 0 0;
}

.site-header .desktop-menu-toggle.dir-right {
	margin: 0 0 0 #{1.25 * structure.$size__spacing-unit};
}

.site-header #secondary-nav-contain + .desktop-menu-toggle.dir-right {
	margin: 0 0 0 auto;
}

.middle-header-contain .desktop-menu-toggle {
	margin: 0 structure.$size__spacing-unit 0 0;
	span {
		left: -99999em;
		position: absolute;
	}

	&.dir-right {
		margin: 0 0 0 #{0.75 * structure.$size__spacing-unit};
	}
}

@include utilities.media( tablet ) {
	// Header default height

	// Mobile Menu toggle
	.h-dh .site-header .mobile-menu-toggle,
	.h-dh.h-sub .site-header .mobile-menu-toggle,
	.h-dh .site-header .mb-cta {
		display: none;
	}

	// Desktop Menu toggle
	.h-dh .site-header .desktop-menu-toggle,
	.h-dh .subpage-toggle-contain {
		display: flex;
	}
}

@include utilities.media( narrowdesktop ) {
	// Header - short height

	// Mobile Menu toggle
	.h-sh .site-header .mobile-menu-toggle,
	.h-sh.h-sub .site-header .mobile-menu-toggle,
	.h-sh .site-header .mb-cta {
		display: none;
	}

	// Desktop Menu toggle
	.h-sh .site-header .desktop-menu-toggle,
	.h-sh.h-sub .subpage-toggle-contain {
		display: flex;
	}
}

// Simplified subpage header with mobile CTA visible.
.h-sub-cta.h-sub {
	.site-header .mb-cta {
		display: inline-block;
	}
	&.h-ll {
		.site-branding {
			margin-right: 0;
		}

		.mb-cta {
			margin-left: auto;
		}

		.middle-header-contain .header-search-contain {
			margin-left: 1.25rem;
		}
	}

	&.h-cl {
		@include utilities.media( tablet ) {
			.wrapper {
				position: relative;
			}
			.mb-cta {
				right: 2.25rem;
				position: absolute;
				z-index: 1;
			}

			&:not(.h-stk).single-featured-image-beside {
				.mb-cta {
					right: 2.25rem;
				}
			}
		}
	}
}

.mobile-sidebar,
.desktop-sidebar,
.subpage-sidebar {
	padding: structure.$size__spacing-unit;
	width: 90vw;

	> * {
		clear: both;
		margin-bottom: #{0.75 * structure.$size__spacing-unit};
	}

	nav,
	.widget:not(.widget_block) {
		font-size: var(--newspack-theme-font-size-sm);
	}

	.mobile-menu-toggle,
	.desktop-menu-toggle,
	.subpage-toggle {
		font-size: var(--newspack-theme-font-size-sm);
		float: right;
		margin: 0 0 structure.$size__spacing-unit;
		padding: 0;
	}

	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	nav a,
	.widget_nav_menu a {
		display: inline-block;
		margin: #{0.125 * structure.$size__spacing-unit} 0;
		padding: #{0.125 * structure.$size__spacing-unit} #{0.25 * structure.$size__spacing-unit};
	}

	a:hover {
		background: transparent;
		text-decoration: underline;
	}

	.social-links-menu li a {
		display: block;
	}

	.widget-title,
	.widgettitle {
		margin: 0 0 #{0.5 * structure.$size__spacing-unit};
	}
}

// Desktop Sidebar and Widget styles
.desktop-sidebar,
.subpage-sidebar {
	background-color: #fff;
	max-width: 400px;

	@include utilities.media( tablet ) {
		width: 50vw;
	}

	a,
	a:visited {
		color: var(--newspack-theme-color-text-main);
	}

	.widget {
		border-top: 1px solid var(--newspack-theme-color-border);
		font-size: 0.9em;
		margin-bottom: #{1.5 * structure.$size__spacing-unit};
		padding-top: #{1.5 * structure.$size__spacing-unit};

		&:last-child {
			margin-bottom: #{1.5 * structure.$size__spacing-unit};
		}

		&.widget_block {
			border-top: 0;
			margin-bottom: 32px;
			padding-top: 0;
		}
	}

	.widget-title,
	.widgettitle {
		font-size: var(--newspack-theme-font-size-md);
	}
}

.mobile-sidebar,
.subpage-sidebar {
	@include utilities.media( tablet ) {
		width: 33vw;
	}

	ul ul {
		margin-left: structure.$size__spacing-unit;
	}

	// Styles specific to menus moved from the header
	nav.secondary-menu a,
	.nav1 .main-menu > li > a {
		padding-left: 0;
		padding-right: 0;
	}

	nav + nav,
	nav + .widget,
	.widget + .widget {
		border-top: 1px solid var(--newspack-theme-color-against-primary);
	}

	nav + nav {
		padding-top: #{0.75 * structure.$size__spacing-unit};
	}

	nav + .widget,
	.widget + .widget {
		padding-top: structure.$size__spacing-unit;
	}

	nav + .widget_block,
	.widget + .widget_block {
		border-top: 0;
		padding-top: 0;
	}

	.submenu-expand {
		display: none;
	}

	.nav3 {
		li {
			display: inline-block;
			margin-right: #{0.5 * structure.$size__spacing-unit};
		}

		a {
			padding: #{0.125 * structure.$size__spacing-unit} #{0.5 * structure.$size__spacing-unit};
		}
	}

	.widget {
		font-size: 1em;

		&:last-child {
			margin-bottom: #{1.5 * structure.$size__spacing-unit};
		}
	}

	.widget-title,
	.widgettitle {
		font-size: 1.1em;
	}
}

// Mobile Sidebar and Menu styles
.mobile-sidebar {
	background-color: var(--newspack-theme-color-primary);
	color: var(--newspack-theme-color-against-primary);

	a,
	.nav1 .sub-menu > li > a,
	.nav3 a {
		color: var(--newspack-theme-color-against-primary);
	}

	a:hover,
	a:visited,
	.widget a:hover {
		color: inherit;
	}
}

// "Full Menu" Sidebar styles
.subpage-sidebar {
	.nav1 .sub-menu > li > a,
	.nav1 .sub-menu > li > a:visited {
		color: var(--newspack-theme-color-text-main);
	}

	nav + nav,
	nav + .widget,
	.widget + .widget {
		border-color: var(--newspack-theme-color-border);
	}
}

.h-sb.h-sh .subpage-sidebar {
	.nav1 ul.main-menu > li > a {
		color: var(--newspack-theme-color-text-main);
	}
}

#desktop-sidebar-fallback,
#mobile-sidebar-fallback,
#subpage-sidebar-fallback {
	bottom: 0;
	overflow: auto;
	position: fixed;
	top: 0;
	z-index: 999999;

	> * {
		visibility: hidden;
	}
}

// Fallback - open from the left
#desktop-sidebar-fallback,
#subpage-sidebar-fallback {
	left: -100%;
	transition: left 0.2s;
}

.desktop-menu-opened #desktop-sidebar-fallback,
.subpage-menu-opened #subpage-sidebar-fallback {
	left: 0;
}

// Fallback - open from the right
#mobile-sidebar-fallback,
#desktop-sidebar-fallback.dir-right {
	left: auto;
	right: -100%;
	transition: right 0.2s;
}

.desktop-menu-opened #desktop-sidebar-fallback.dir-right,
.mobile-menu-opened #mobile-sidebar-fallback {
	right: 0;
}

.mobile-menu-opened #mobile-sidebar-fallback,
.desktop-menu-opened #desktop-sidebar-fallback,
.subpage-menu-opened #subpage-sidebar-fallback {
	> * {
		visibility: visible;
	}
}

.overlay-mask {
	background-color: rgba(0, 0, 0, 0.5);
	content: "";
	inset: 0;
	position: fixed;
	z-index: 999998;
}
