/*
	Global Provisional styling
	- Provisional  CSSspecific for view port are defined in the "views/[view port]" theme CSS
*/

/* BEGINNING OF DARK THEME */
.provisional.dark-theme .gcweb-menu button[aria-haspopup=true],
.provisional.dark-theme #wb-srch button,
.provisional.dark-theme .srchbox button {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.provisional.dark-theme .gcweb-menu button[aria-haspopup=true]:focus, .provisional.dark-theme .gcweb-menu button[aria-haspopup=true]:hover,
.provisional.dark-theme #wb-srch button:focus, .provisional.dark-theme #wb-srch button:hover,
.provisional.dark-theme .srchbox button:focus, .provisional.dark-theme .srchbox button:hover {
  background-color: #000;
  color: #fff;
}
.provisional.dark-theme .gcweb-menu, .provisional.dark-theme #wb-bnr + .gcweb-menu, .provisional.dark-theme.home .gcweb-menu, .provisional.dark-theme #wb-bnr + hr {
  border-top-color: #000;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true] {
  background-color: #fff;
  border-color: #fff;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true] {
  color: #000;
}
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true]:focus,
.provisional.dark-theme.home .gcweb-menu button[aria-haspopup=true]:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.provisional.dark-theme #wb-info .landscape {
  background-color: #000;
  color: #fff;
}
/* END OF DARK THEME */

// Colours for the provisional alert styles
// TODO: Rename and migrate these into _variables.scss if the provisional alert styles become official in the future
$provisional-alert-danger-color: #d3080c;
$provisional-alert-warning-color: #ee7100;
$provisional-alert-info-color: #269abc;
$provisional-alert-success-color: #278400;

// Removes styling from the current WET4 Alert
%provisional-alert-first-child-before-disable {
	& {
		> {
			:first-child {
				&::before {
					color: inherit;
					content: none;
				}
			}
		}
	}
}

@mixin provisional-alert-type($color, $content) {
	border-color: $color;
	border-image: linear-gradient(to bottom, $color 16px, $color 16px, transparent 16px, transparent 48px, $color 48px, $color 48px) 1 100%;

	&::before {
		color: $color;
		content: $content;
	}
}

.provisional, .experimental {

	/* ------------
	 * Background color
	 *
	 */

	.bg-darker {
		background-color: #000;

		&.well.header-rwd h1 {
			border-bottom-color: #6f6f6f;
		}
	}

	// theme default color
	.bg-gctheme {
		background-color: #355688;

		&.well.header-rwd {
			background-color: #26374a;
		}
	}

	// PinkDay color
	.bg-pnkDy {
		background-color: #AD005F;

		&.well.header-rwd {
			background-color: #570030;
		}
	}

	/* ------------
	 * Background image for heading
	 *
	 */

	.bg-img-hdng {
		background-image: url("../assets/x-blue-line.png");
		background-position: right bottom;
		background-repeat: no-repeat;
		min-height: 60px;
		padding-bottom: 35px;
		padding-right: 80px;
	}

	/* ------------
	 * Utility
	 *
	 */

	.bg-cover, &.bg-cover {
		background-size: cover;
	}


	/* ------------
	 * Theme color
	 *
	 */

	/* Pink day - One day event in April
	 * (with a contrast conforming to Level AAA)
	 */
	&.pnkDy-theme {

		// Page header and Menu
		.gcweb-menu button[aria-haspopup=true],
		#wb-srch button,
		.srchbox button {
			background-color: #AD005F;
			border-color:#AD005F;
		}
		.gcweb-menu button[aria-haspopup=true]:focus, .gcweb-menu button[aria-haspopup=true]:hover,
		#wb-srch button:focus, #wb-srch button:hover,
		.srchbox button:focus, .srchbox button:hover {
			background-color: #570030;
			color: #fff;
		}
		.gcweb-menu,
		.home .gcweb-menu {
			border-top-color: #AD005F;
		}

		// Home page Menu
		.home .gcweb-menu {
			button[aria-haspopup=true] {
				background-color: #ffffff;
				border-color:#ffffff;
			}
			button[aria-haspopup=true] {
				color: #AD005F;
			}
			button[aria-haspopup=true]:focus,
			button[aria-haspopup=true]:hover {
				background-color: #AD005F;
				border-color:#AD005F;
				color: #ffffff;
			}
		}

		// Footer
		#wb-info .landscape {
			background-color: #AD005F;
		}
	}

	/* Dark theme
	 */
	&.dark-theme {

		// Page header and Menu
		.gcweb-menu button[aria-haspopup=true],
		#wb-srch button,
		.srchbox button {
			background-color: #000;
			border-color: #000;
			color: #fff;
		}
		.gcweb-menu button[aria-haspopup=true]:focus, .gcweb-menu button[aria-haspopup=true]:hover,
		#wb-srch button:focus, #wb-srch button:hover,
		.srchbox button:focus, .srchbox button:hover {
			background-color: #000;
			color: #fff;
		}
		.gcweb-menu,
		.home .gcweb-menu {
			border-top-color: #000;
		}

		// Home page Menu
		.home .gcweb-menu {
			button[aria-haspopup=true] {
				background-color: #fff;
				border-color:#fff;
			}
			button[aria-haspopup=true] {
				color: #000;
			}
			button[aria-haspopup=true]:focus,
			button[aria-haspopup=true]:hover {
				background-color: #000;
				border-color:#000;
				color: #fff;
			}
		}

		// Footer
		#wb-info .landscape {
			background-color: #000;
			color: #fff;
		}
	}

}


// Provisional CSS for the chat wizard
@import "src/plugins/chatwizard/base";

// Provisional theme and topic page styles

.provisional.profile {
	position: relative;
	overflow-x: hidden;
}

.provisional.profile .pagetag {
	max-width: 65ch;
}

.provisional.single-feature figcaption {
	margin-top: 5px;
	text-decoration: underline;
}

.provisional .thumbnail {
	border-color: #335075;
	border-width: 1px;
	padding: 0px;
}

.provisional.contributors {
	font-size: 16px;
	font-weight: 600;
}

.provisional.from {
	font-size: 17px;
	margin-top: 7px;
}

.provisional.contributors ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: -50px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}

.provisional.most-requested-bullets li {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
	padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
	font-size: 1.2em;
}

.provisional.list-bld {
	font-weight: 600;
}

.provisional.followus h2 {
	font-size: 1.1em;
	margin-top: 10px;
}

.provisional.followus {
	padding: 0;
}

.provisional.followus h2 {
	display: block;
}

.provisional.followus h2,
.provisional.followus ul {
	margin-left: 0;
}

.provisional.followus-vertical {
	line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
	background-color: transparent;
}

.provisional.followus-vertical a {
	text-decoration: none;
}

.provisional.followus-vertical ul {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	padding-inline-start: 1em;
	font-size: 16px;
	margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
	margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
	margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
	border: none;
	padding: 0px 5px;
}

.provisional.followus ul li a {
	border: none;
}

.provisional .social-lnk {
	position: relative;
	bottom:-18px;
	left:45px;
}

.provisional.followus-vertical li {
	display: block;
	background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram {
	display: block;
	height: 38px;
	width: 38px;
}
/* remove this section if you do not want the new icons */

.provisional.followus .facebook {
	background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
	background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
	background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
	background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
	background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* end of new social media icons */

@media screen and (min-width: 991px) {
	.provisional.contributors li {
		display: inline-block;
		margin-right: .7em;
	}
	.provisional.contributors li:first-child:before {
		content: none;
	}
	.provisional.contributors li:before {
		content: "\2022";
		margin-right: .7em;
	}
}

@media screen and (max-width: 1200px) {
	.provisional.contributors ul {
		margin-inline-start: -30px;
	}
}

@media screen and (max-width: 991px) {
	.provisional.most-requested-bullets li {
		font-size: 19px;
	}
	.provisional.contributors ul {
		margin-inline-start: 1.5em;
	}
}

// End of provisional theme and topic page styles
// Subway navigation 
.provisional.gc-subway {
		border-radius: 0px 6px 6px 0px;
		border-right: 4px solid #26374a;
		border-top: 4px solid #26374a;
		margin-top: 38px;
	}
	.provisional.gc-subway ul {
		clear: both;
		list-style: none;
		padding-left: .57em;
		padding-top: 10px;
		position: relative;
	}
	.provisional.gc-subway ul li {
		border-left: 4px solid #26374a;
		padding: 0px 20px 30px 1em;
	}
	.provisional.gc-subway ul li::first-line {
		line-height: 1 !important;
	}
	.provisional.gc-subway ul li :first-child::before {
		background-color: #fff;
		border: 3px solid #26374a;
		border-radius: 50%;
		content: "";
		height: 1.2em;
		left: .05em;
		position: absolute;
		-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
		transition: width .2s, height .2s, left .2s, margin-top .2s;
		width: 1.2em;
	}
	.provisional.gc-subway ul li.active > :first-child::before {
		background-color: #26374a;
	}
	.provisional.gc-subway ul li a[href]:hover::before,
	.provisional.gc-subway ul li a[href]:focus::before {
		height: 1.4em;
		left: -.05em;
		margin-top: -.1em;
		width: 1.4em;
	}
	.provisional.gc-subway ul li:last-child {
		border-bottom: 4px solid #26374a;
		border-bottom-left-radius: 6px;
		border-left: 4px solid #26374a;
	}
	.provisional.gc-subway ul li ul {
		margin-top: 20px;
		padding-left: .55em;
	}
	.provisional.gc-subway ul li ul li:last-child {
		border-bottom-width: 0px;
		padding-bottom: 0px;
	}
	.provisional.gc-subway ul li ul.noline li {
		-o-border-image: none;
		border-image: none;
		border-left: 4px solid transparent;
	}
	.provisional.gc-subway h1 {
		float: left;
	}
	.provisional.gc-subway h1,
	.provisional.gc-subway-section .gc-subway-h1 {
		background-color: #fff;
		border-bottom-width: 0px;
		color: #555;
		font-size: 1.3em;
		margin-right: 20px;
		margin-top: -19px;
		padding: 0px 20px 10px 0px;
	}
	@media screen and (min-width: 992px) {
		.provisional.gc-subway {
		border-right: 0;
		border-top: 0;
		display: none;
		margin-top: 25px;
		padding-left: 15px;
		}
		.provisional.gc-subway.no-blink {
		display: block;
		}
		.provisional.gc-subway .gc-subway-menu-nav {
		float: right;
		width: 33.33%;
		}
		.provisional.gc-subway ul li:last-child {
		border-bottom: 0;
		border-left: 4px solid transparent;
		}
		.provisional.gc-subway-section {
		padding-right: 15px;
		width: 66.66%;
		}
		.provisional.gc-subway-section .gc-subway-h1,
		.provisional.gc-subway-section h1 {
		margin-top: 0;
		}
		.provisional.gc-subway-section .gc-subway-h1 {
		font-family: Lato, sans-serif;
		font-weight: inherit;
		margin-bottom: 0;
		margin-right: 0;
		padding-bottom: 0 !important;
		padding-left: 0;
		}
		.wb-disable .provisional.gc-subway {
		display: block;
		}
	}
//end of subway navigation 
//subway index navigation
.provisional.gc-subway {
	border-radius: 0px 6px 6px 0px;
	border-right: 4px solid #26374a;
	border-top: 4px solid #26374a;
	margin-top: 38px;
}
.provisional.gc-subway ul {
	clear: both;
	list-style: none;
	padding-left: .57em;
	padding-top: 10px;
	position: relative;
}
.provisional.gc-subway ul li {
	border-left: 4px solid #26374a;
	padding: 0px 20px 30px 1em;
}
.provisional.gc-subway ul li::first-line {
	line-height: 1 !important;
}
.provisional.gc-subway ul li :first-child::before {
	background-color: #fff;
	border: 3px solid #26374a;
	border-radius: 50%;
	content: "";
	height: 1.2em;
	left: .05em;
	position: absolute;
	-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
	transition: width .2s, height .2s, left .2s, margin-top .2s;
	width: 1.2em;
}
.provisional.gc-subway ul li.active > :first-child::before {
	background-color: #26374a;
}
.provisional.gc-subway ul li a[href]:hover::before,
.provisional.gc-subway ul li a[href]:focus::before {
	height: 1.4em;
	left: -.05em;
	margin-top: -.1em;
	width: 1.4em;
}
.provisional.gc-subway ul li:last-child {
	border-bottom: 4px solid #26374a;
	border-bottom-left-radius: 6px;
	border-left: 4px solid #26374a;
}
.provisional.gc-subway ul li ul {
	margin-top: 20px;
	padding-left: .55em;
}
.provisional.gc-subway ul li ul li:last-child {
	border-bottom-width: 0px;
	padding-bottom: 0px;
}
.provisional.gc-subway ul li ul.noline li {
	-o-border-image: none;
	border-image: none;
	border-left: 4px solid transparent;
}
.provisional.gc-subway h1 {
	float: left;
}
.provisional.gc-subway h1,
.provisional.gc-subway-section .gc-subway-h1 {
	background-color: #fff;
	border-bottom-width: 0px;
	color: #555;
	font-size: 1.3em;
	margin-right: 20px;
	margin-top: -19px;
	padding: 0px 20px 10px 0px;
}
@media screen and (min-width: 992px) {
	.provisional.gc-subway {
		border-right: 0;
		border-top: 0;
		display: none;
		margin-top: 25px;
		padding-left: 15px;
	}
	.provisional.gc-subway.no-blink {
		display: block;
	}
	.provisional.gc-subway .gc-subway-menu-nav {
		float: right;
		width: 33.33%;
	}
	.provisional.gc-subway ul li:last-child {
		border-bottom: 0;
		border-left: 4px solid transparent;
	}
	.provisional.gc-subway-section {
		padding-right: 15px;
		width: 66.66%;
	}
	.provisional.gc-subway-section .gc-subway-h1,
	.provisional.gc-subway-section h1 {
		margin-top: 0;
	}
	.provisional.gc-subway-section .gc-subway-h1 {
		font-family: Lato, sans-serif;
		font-weight: inherit;
		margin-bottom: 0;
		margin-right: 0;
		padding-bottom: 0 !important;
		padding-left: 0;
	}
	.wb-disable .provisional.gc-subway {
		display: block;
	}
}
//End of subway