/*! FILE: welcome.scss */
@use 'sass:map';
@use 'sass:math';

//
// Welcome admin page styles.
//
// @package    Zooey
// @copyright  WebMan Design, Oliver Juhas
//
// @since    1.0.0
// @version  2.0.1
//

@import '_tools/_index';
@import '_setup/_index';

$theme : zooey;

$svg_shape_main    : '<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fbce2f" d="m0 96 30 5c30 6 90 16 150 6 60-11 120-43 180-27s120 80 180 96 120-16 180-16 120 32 180 59c60 26 120 48 180 37s120-53 180-69 120-6 150 0l30 5V0H0Z"/></svg>';
$svg_shape_feature : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 560"><path fill="#fbce2f" d="M0 300s66 100 144 100c82 0 97-60 156-60s158 220 256 220 91-179 144-214 100 13 100 13V0H0v300Z"/></svg>';

html {
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

// Container:

	.appearance_page_#{$theme}-welcome {

		// Typography
		--welcome_font_size: 16px;
		@include media( map.get( $breakpoint, 'l' ) ) {
			--welcome_font_size: 17px;
		}
		@include media( map.get( $breakpoint, 'xxl' ) ) {
			--welcome_font_size: 18px;
		}

		// Spacing
		--welcome_width: 750px;
		@include media( map.get( $breakpoint, 'xl' ) ) {
			--welcome_width: 1000px;
		}
		--welcome_width_content: 600px;
		--welcome_gap: var(--welcome_font_size);
		--welcome_padding_medium: 1rem;
		--welcome_padding_large: 1.5rem;
		@include media( map.get( $breakpoint, 'm' ) ) {
			--welcome_padding_medium: 2rem;
			--welcome_padding_large: 3rem;
		}
		@include media( map.get( $breakpoint, 'xxl' ) ) {
			--welcome_padding_medium: 3rem;
			--welcome_padding_large: 4.5rem;
		}
		--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:    #222;
		--welcome_color_heading: #111;
		--welcome_color_text_alt:    #eee;
		--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_shape_main ) }');
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: 100% 360px;
	}

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

		@include media( map.get( $breakpoint, 'l' ) ) {
			margin-inline: var(--welcome_padding_medium);
		}

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

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

			&:last-child {
				margin-block-end: 0;
			}
		}

		h1, h2, h3 {
			font-size: 1.5em;
			font-weight: 700;
			line-height: 1 + $ratio_min;
			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;
		}

		abbr[title],
		dfn[title] {
			text-decoration: underline dashed;
			text-underline-offset: .2em;
			text-decoration-thickness: 1px;
			cursor: help;
		}

		hr {
			width: 100%;
			max-width: none;
			margin: 0;
			color: inherit; // This is needed to override WP styles.
			border: 0;
			border-block-start: 2px solid color-mix( in srgb, currentColor 50%, transparent );

			&:last-child {
				margin-block-end: 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);
		}

		.welcome__image::before {
			filter: invert(1);
		}
	}

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

		h2, h3,
		a {
			color: inherit;
		}
	}

	%bg_shaded {
		background: color-mix( in srgb, currentColor 7%, transparent );
	}

// 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 media( map.get( $breakpoint, 'xxl' ) ) {
				font-size: 1.5em;
			}
		}

		&__link {

			&--changelog {
				font-size: 13px;
				font-weight: 400;
				text-decoration-thickness: 1px;
				text-underline-offset: .2em;
			}
		}

		&__buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
		}

		&__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 media( map.get( $breakpoint, 'l' ) ) {
				max-width: calc( 50% - var(--welcome_gap) );
			}
		}

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

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

			h2 &,
			h3 & {
				margin-inline-end: .15em;
				margin-block-end: 0;
				font-size: 1.5em;
				color: inherit;
			}
		}

		&__image {
			position: relative;
			isolation: isolate;
			margin: 0 0 ( $ratio + em );
			min-height: 4em;
			border-radius: var(--welcome_border_radius);

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background-image:
					url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTIxNiA0NEg0MGExMiAxMiAwIDAgMC0xMiAxMnYxNDRhMTIgMTIgMCAwIDAgMTIgMTJoNjRhNCA0IDAgMCAwIDMuNzktMi43NEwxMjMuMjEgMTYzbDM4LjI4LTE1LjMxYTQgNCAwIDAgMCAyLjIyLTIuMjJMMTc5IDEwNy4yMWw0Ni4yNC0xNS40MkE0IDQgMCAwIDAgMjI4IDg4VjU2YTEyIDEyIDAgMCAwLTEyLTEybS05Ny40OSAxMTIuMjlhNCA0IDAgMCAwLTIuMyAyLjQ1TDEwMS4xMiAyMDRINDBhNCA0IDAgMCAxLTQtNHYtMjkuNjZsNTMuMTctNTMuMTdhNCA0IDAgMCAxIDUuNjYgMGwzNC43MSAzNC43MVpNMjIwIDg1LjEybC00NS4yNiAxNS4wOWE0IDQgMCAwIDAtMi40NSAyLjNsLTE1LjM3IDM4LjQxbC0xOS4zIDcuNzNsLTM3LjEzLTM3LjE0YTEyIDEyIDAgMCAwLTE3IDBMMzYgMTU5VjU2YTQgNCAwIDAgMSA0LTRoMTc2YTQgNCAwIDAgMSA0IDRabTYuMzQgMzMuMzdhNCA0IDAgMCAwLTMuNi0uNTVsLTIzLjgxIDcuOTNhNCA0IDAgMCAwLTIuNDQgMi4zMWwtMTUgMzcuMzZsLTM3LjM2IDE1YTQgNCAwIDAgMC0yLjMxIDIuNDRsLTcuOTMgMjMuODFhNCA0IDAgMCAwIC41NSAzLjZhNCA0IDAgMCAwIDMuMjQgMS42NkgyMTZhMTIgMTIgMCAwIDAgMTItMTJ2LTc4LjMyYTQgNCAwIDAgMC0xLjY2LTMuMjRNMjIwIDIwMGE0IDQgMCAwIDEtNCA0aC03Mi43Mmw1LjU5LTE2Ljc4bDM3LjIzLTE0Ljg5YTQgNCAwIDAgMCAyLjIzLTIuMjNsMTQuODktMzcuMjNsMTYuNzgtNS41OVoiLz48L3N2Zz4='),
					url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTE0OC4yNCAxMzkuNzZhNiA2IDAgMCAwLTguNDggMEwxMjAgMTU5LjUxTDk2LjQ5IDEzNmwxOS43NS0xOS43NmE2IDYgMCAwIDAtOC40OC04LjQ4TDg4IDEyNy41MWwtMTkuNzYtMTkuNzVhNiA2IDAgMCAwLTguNDggOC40OGw3Ljc1IDcuNzZsLTI0LjcyIDI0LjczYTMwIDMwIDAgMCAwIDAgNDIuNDJsNi43OCA2Ljc5bC0yOS44MSAyOS44MmE2IDYgMCAxIDAgOC40OCA4LjQ4bDI5LjgyLTI5LjgxbDYuNzkgNi43OGEzMCAzMCAwIDAgMCA0Mi40MiAwTDEzMiAxODguNDlsNy43NiA3Ljc1YTYgNiAwIDAgMCA4LjQ4LTguNDhMMTI4LjQ5IDE2OGwxOS43NS0xOS43NmE2IDYgMCAwIDAgMC04LjQ4bS00OS40NSA2NWExOCAxOCAwIDAgMS0yNS40NiAwbC0yMi4wNi0yMi4wOWExOCAxOCAwIDAgMSAwLTI1LjQ2TDc2IDEzMi40OUwxMjMuNTEgMTgwWm0xMzcuNDUtMTg1YTYgNiAwIDAgMC04LjQ4IDBsLTI5LjgyIDI5LjgxbC02Ljc5LTYuNzhhMzAgMzAgMCAwIDAtNDIuNDIgMEwxMjQgNjcuNTFsLTcuNzYtNy43NWE2IDYgMCAwIDAtOC40OCA4LjQ4bDgwIDgwYTYgNiAwIDAgMCA4LjQ4LTguNDhsLTcuNzUtNy43NmwyNC43Mi0yNC43M2EzMCAzMCAwIDAgMCAwLTQyLjQybC02Ljc4LTYuNzlsMjkuODEtMjkuODJhNiA2IDAgMCAwIDAtOC40OG0tMzEuNTEgNzlMMTgwIDEyMy41MUwxMzIuNDkgNzZsMjQuNzItMjQuNzNhMTggMTggMCAwIDEgMjUuNDYgMGwyMi4wNiAyMi4wNmExOCAxOCAwIDAgMSAwIDI1LjQ2WiIvPjwvc3ZnPg==');
				background-repeat: no-repeat;
				background-position: 0 0, 4.5em 1em;
				background-size: 4em 4em, 2em 2em;
				z-index: -1;
			}

			p + & {
				margin-block-start: $ratio + em;
			}

			a {
				display: inline-block;
				border-radius: inherit;
			}

			img {
				max-width: 100%;
				border-radius: inherit;
				box-shadow: 0 ( $ratio_min + em ) ( $ratio + em ) 0 rgba( #000, .2 );
				vertical-align: top;
			}
		}

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

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

			a {
				color: inherit;
			}
		}

		&__badge {
			@extend %bg_dark;
			display: inline-block;
			padding: .15em .5em;
			margin-inline-end: .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: var(--welcome_padding_large) 0;
		border-radius: var(--welcome_border_radius);

		> * {
			flex: 1 1 100%;
		}

		&--child {

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

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

		&--features,
		&--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) );
				padding: var(--welcome_padding_medium);
			}
		}

		&--features {

			.welcome__column {
				background-image: url('data:image/svg+xml;utf8,#{ _url_encode( $svg_shape_feature ) }');
				background-repeat: no-repeat;
				background-position: 50% 0;
				background-size: contain;
			}

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

			.button.button-hero {
				padding: 1em;
				font-weight: 500;
				line-height: 1.25;
				white-space: normal;
				background: var(--welcome_color_accent);
				color: var(--welcome_color_accent_text);
				border-color: rgba( #000, .1 );
			}
		}

		&--guide {

			.welcome__column {
				border-block-start: 1em solid var(--welcome_color_bg_dark);
			}

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

			ul {
				margin-block: math.div( 1em, .9 );
				font-size: .9em;
				list-style: circle inside;
			}

			li {
				margin: 0;
			}
		}

		&--a11y {
			@extend %bg_dark;

			hr {
				margin-block-start: var(--welcome_gap);
			}
		}

		&--demo {
			@extend %bg_dark;

			.welcome__image {
				margin-block-start: 0;
				margin-block-end: var(--welcome_gap);
			}
		}

			&--starter-content {
				@extend %bg_shaded;
				position: relative;
				padding: var(--welcome_padding_medium);
				margin-block-start: 1em;
				border: 2px solid rgba( #fff, .3 );
				border-radius: var(--welcome_border_radius);

				.button {

					&,
					&:active,
					&:hover,
					&:focus {
						color: inherit;
						border-color: currentColor;
					}
				}
			}

		&--update,
		&--promo {
			@extend %bg_accent;
		}

		&--changelog {
			@extend %bg_shaded;
			display: block;
			border: 1px solid color-mix( in srgb, currentColor 20%, transparent );

			summary {
				padding: 1em var(--welcome_padding_medium);
				font-family:
					ui-monospace,
					'Cascadia Code',
					'Source Code Pro',
					Menlo,
					Consolas,
					'DejaVu Sans Mono',
					monospace;
				cursor: pointer;
			}

			h2 {
				padding: .5em var(--welcome_padding_medium);
				margin-block: 0;
				font-size: 1.25em;
			}

			pre {
				box-sizing: border-box;
				width: 100%;
				padding: var(--welcome_padding_medium);
				margin: 0;
				font-size: 14px;
				line-height: 1.4;
				white-space: pre-wrap;
				tab-size: 2;
				background: #3858e9; // --wp-admin-theme-color
				color: #fff;
				border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
				box-shadow: inset 0 .5em 2em #0009;
				overflow-y: auto;
			}

				.welcome__changelog--old {
					max-height: max( 50vh, 20em );
				}
		}
	}

	.welcome__header {

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

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

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

// Notice:

	.theme-welcome-notice {
		padding: 17.5vh 2em 10vh;
		font-size: 1.5em;
		text-align: center;
		background-color: #fff;
		background-image: url('data:image/svg+xml;utf8,#{ _url_encode( $svg_shape_main ) }');
		background-repeat: no-repeat;
		background-position: 50% -6vh;
		background-size: contain;
		color: #111;
		border: 1px solid rgba( #000, .2 );
		box-shadow: 0 ( $ratio_min + em ) ( $ratio + em ) 0 rgba( #000, .2 );

		h2 {
			margin: 0 0 1em;
			font-size: 1.5em;

			strong {
				font-weight: 700;
			}
		}

		p {
			font-size: inherit;
		}

		br:not(.linebreak) {
			display: none;
		}

		.dashicons {
			width: 1em;
			height: 1em;
			font-size: 1em;
		}
	}
