/* FILE: welcome.scss */

//
// Welcome admin page styles.
//
// @package    Auberge
// @copyright  WebMan Design, Oliver Juhas
//
// @since    2.2.0
// @version  2.9.0
//

@import 'setup';
@import 'starter/tools/functions';
@import 'starter/setup/variables';
@import 'starter/tools/mixins';

$theme : auberge;

// Container:

	.appearance_page_#{$theme}-welcome {

		// Typography
		--welcome_font_size: 16px;
		@include responsive( map_get( $breakpoint, 'xxl' ) ) {
			--welcome_font_size: 18px;
		}

		// Spacing
		--welcome_width: 1000px;
		--welcome_width_content: 600px;
		--welcome_gap: var(--welcome_font_size);
		--welcome_padding_medium: 2em;
		--welcome_padding_large: 4em;
		@include responsive( map_get( $breakpoint, 'xxl' ) ) {
			--welcome_padding_medium: 3em;
			--welcome_padding_large: 6em;
		}
		--welcome_border_radius: 3px;
		--welcome_decoration_size: 12em;

		// Colors
		--welcome_color_bg_body: #f3f3f3;
		--welcome_color_bg_light: #fff;
		--welcome_color_bg_dark: #111;
		--welcome_color_accent: #fbce2f;
		--welcome_color_accent_text: #111;
		--welcome_color_text:    #666;
		--welcome_color_heading: #111;
		--welcome_color_text_alt:    #ccc;
		--welcome_color_heading_alt: #fff;
	}

	.appearance_page_#{$theme}-welcome {
		background-color: var(--welcome_color_bg_body);
		background-image: url('data:image/svg+xml;utf8,#{ _url_encode(
			'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fbce2f" fill-opacity="1" d="M0,96L30,101.3C60,107,120,117,180,106.7C240,96,300,64,360,80C420,96,480,160,540,176C600,192,660,160,720,160C780,160,840,192,900,218.7C960,245,1020,267,1080,256C1140,245,1200,203,1260,186.7C1320,171,1380,181,1410,186.7L1440,192L1440,0L1410,0C1380,0,1320,0,1260,0C1200,0,1140,0,1080,0C1020,0,960,0,900,0C840,0,780,0,720,0C660,0,600,0,540,0C480,0,420,0,360,0C300,0,240,0,180,0C120,0,60,0,30,0L0,0Z"></path></svg>'
		) }');
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: contain;
	}

	.welcome__container {
		box-sizing: border-box;
		margin: var(--welcome_padding_large) var(--welcome_padding_medium);
		font-size: var(--welcome_font_size);
		line-height: $golden;
		color: var(--welcome_color_text);

		*,
		*::before,
		*::after {
			box-sizing: inherit;
		}

		h1, h2, h3,
		p,
		nav {
			padding: 0;
			margin: 0 0 var(--welcome_gap);

			&:last-child {
				margin-bottom: 0;
			}

		}

		h1, h2, h3 {
			font-size: 1.5em;
			font-weight: 700;
			color: var(--welcome_color_heading);
		}

		h1 {
			font-size: 3em;
		}

		h2 {
			font-size: 2em;
		}

		p {
			max-width: var(--welcome_width_content);
			font-size: 1em;
		}

		strong {
			font-weight: 700;
		}

		hr {
			width: 100%;
			max-width: none;
			margin: var(--welcome_gap) 0;
			border: 0;
			border-top: 2px solid;

			&:last-child {
				margin-bottom: 0;
			}

		}

		.notice {
			display: none;
		}

	}

// Extenders:

	%bg_light {
		background: var(--welcome_color_bg_light);
	}

	%bg_dark {
		background: var(--welcome_color_bg_dark);
		color: var(--welcome_color_text_alt);

		h2, h3,
		a {
			color: var(--welcome_color_heading_alt);
		}

	}

	%bg_accent {
		background: var(--welcome_color_accent);
		color: var(--welcome_color_accent_text);

		h2, h3,
		a {
			color: inherit;
		}

	}

// Elements:

	.welcome__header,
	.welcome__section--colophon {

		p {
			max-width: none;
		}

	}

	.welcome {

		.welcome__container &__intro {
			max-width: 40em;
			font-size: 1.25em;
			color: var(--welcome_color_heading);

			@include responsive( map_get( $breakpoint, 'xxl' ) ) {
				font-size: 1.5em;
			}

		}

		&__nav {

			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 1em;
				padding: 0;
				margin: 0;
				list-style: none;
			}

			a::before {
				content: '↓ ';
			}

		}

		&__column {
			border-radius: var(--welcome_border_radius);

			@include responsive( map_get( $breakpoint, 'l' ) ) {
				max-width: calc( 50% - var(--welcome_gap) );
			}

		}

		&__icon {
			width: 1em;
			height: 1em;
			margin-bottom: var(--welcome_gap);
			font-size: 3em;
			color: var(--welcome_color_heading);

			.welcome__section > & {
				flex: 0;
				margin: 0;
			}

			h2 &,
			h3 & {
				margin-right: .15em;
				margin-bottom: 0;
				font-size: 1.5em;
				color: inherit;
			}

		}

		&__alert {
			background: var(--welcome_color_accent);
			color: var(--welcome_color_accent_text);
			border-radius: var(--welcome_border_radius);

			.welcome__container & {
				padding: 5%;
				margin: calc( 2 * var(--welcome_gap) ) 0;
			}

			a {
				color: inherit;
			}

		}

		&__badge {
			@extend %bg_dark;
			display: inline-block;
			padding: .15em .5em;
			margin-right: .25em;
			font-size: .8em;
			text-transform: uppercase;
			letter-spacing: .05em;
			color: var(--welcome_color_heading_alt);
			border-radius: var(--welcome_border_radius);

			&--top {
				margin: 0 0 .5em;
			}

		}

	}

// Sections:

	.welcome__section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--welcome_gap);
		max-width: var(--welcome_width);
		margin: 4em 0;
		border-radius: var(--welcome_border_radius);

		> * {
			flex: 1 1 100%;
		}

		&--child {

			& + & {
				margin-top: calc( 2 * var(--welcome_gap) );
			}

		}

		&--a11y,
		&--update,
		&--demo,
		&--promo {
			@extend %bg_light;
			padding: var(--welcome_padding_large);
		}

		&--features,
		&--guide {

			.welcome__column {
				padding: var(--welcome_padding_medium);
			}

		}

		&--features {
			gap: calc( 2 * var(--welcome_gap) );

			.welcome__column {
				@extend %bg_light;
			}

			.welcome__icon {
				font-size: 4em;
				-webkit-text-stroke: .05em var(--welcome_color_heading);
				        text-stroke: .05em var(--welcome_color_heading);
				color: var(--welcome_color_accent);
			}

		}

		&--guide {
			justify-content: flex-start;
			gap: calc( 2 * var(--welcome_gap) );
			max-width: none;

			.welcome__column {
				@extend %bg_light;
				max-width: calc( var(--welcome_width) / 2 - var(--welcome_gap) );
				border-top-right-radius: 6em;
			}

			.welcome__guide--wordpress {
				@extend %bg_dark;
			}

		}

		&--a11y {
			@extend %bg_dark;
		}

		&--update {
			padding-left: calc( var(--welcome_padding_large) - 1em );
			border-left: 1em solid var(--welcome_color_accent);
		}

		&--promo {
			@extend %bg_accent;
		}

	}

	.welcome__header {
		margin-bottom: 15vh;

		small {
			font-size: .5em;
			font-weight: 400;
		}

		.welcome__alert--tip {
			@extend %bg_light;
			margin-top: var(--welcome_gap);
		}

	}

	.welcome__footer {
		@extend %bg_dark;
		display: block;
		padding: var(--welcome_padding_large);
	}