/*
 * Theme Name: WordPress.org Main Block Theme, 2022
 * Theme URI: https://github.com/WordPress/wporg-main-2022
 * Author: WordPress.org
 * Author URI: https://wordpress.org/
 * Description: A block-based child theme for WordPress.org
 * Version: 1.0.0
 * License: GNU General Public License v2 or later
 * Text Domain: wporg
 * Template: wporg-parent-2021
 */

/*
 * Note: only add styles here in cases where you can't achieve the style with
 * templates or theme.json settings.
 */

/*
 * Override inline paddings with the spacing preset.
 */

[style*="padding-top:120px"] {
	padding-top: var(--wp--preset--spacing--80) !important;
}

[style*="padding-bottom:120px"] {
	padding-bottom: var(--wp--preset--spacing--80) !important;
}

[style*="padding-top:160px"] {
	padding-top: var(--wp--preset--spacing--90) !important;
}

[style*="padding-bottom:160px"] {
	padding-bottom: var(--wp--preset--spacing--90) !important;
}


/*
 * Spacing for small screens.
 */

@media (min-width: 960px) and (max-width: 1280px) {

	/* Pull the features list flush to the edge of the screen (only on mid-sized screens). */
	#features .is-style-features {
		margin-left: calc(-1 * var(--wp--preset--spacing--50));
	}
}

@media (max-width: 1199px) {

	/* Once we start touching content, add in some side padding. */
	.entry-content.entry-content > .alignwide,
	.entry-content.entry-content > .alignfull {
		padding-left: var(--wp--preset--spacing--60) !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}

	/* Ensure nested full-alignment items are still full-width */
	.entry-content.entry-content > .alignfull .alignfull {
		margin-left: calc(var(--wp--preset--spacing--60) * -1) !important;
		margin-right: calc(var(--wp--preset--spacing--60) * -1) !important;
	}

	/* Adjust spacing & font size of feature list items */
	#features .is-style-features > li {
		padding-left: var(--wp--preset--spacing--30);
		padding-right: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 1000px) {

	/* Remove the spacing next to "Powerful and empowering" to prevent crunched text. */
	#benefits h2 {
		margin-right: 0 !important;
	}
}

@media (max-width: 959px) {

	/* Flip this section to a column early, otherwise the list items are cut off. */
	#features .wp-block-columns {
		flex-wrap: wrap !important;
	}

	#features .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 781px) {

	/* Update the columns gap when it switches to single-column */
	#benefits .is-layout-flex,
	#learning .is-layout-flex,
	#resources .is-layout-flex {
		gap: 40px;
	}

	#download-hosting,
	#features {
		padding: 0 !important;
	}

	#download-hosting .wp-block-columns > .wp-block-column:first-child {
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
	}

	#download-hosting .wp-block-columns > .wp-block-column .wp-block-group,
	#features .wp-block-columns > .wp-block-column:last-child {
		padding-left: var(--wp--preset--spacing--60) !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}

	#features .wp-block-columns > .wp-block-column:first-child {
		padding-right: 0 !important;
	}
}

@media (max-width: 599px) {
	#editor {
		min-height: 0 !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	#editor .wp-block-cover__inner-container .wp-block-group > * {
		max-width: 22rem !important;
	}

	.wp-block-buttons .wp-block-button,
	.wp-block-buttons .wp-block-button .wp-block-button__link {
		width: 100% !important;
	}
}

/*
 * Download modal
 */

.components-modal__screen-overlay {
	position: fixed;
	z-index: 251; /* global header z-index + 1 */
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(30, 30, 30, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.components-modal__frame {
	background: var(--wp--preset--color--white);
	max-width: 568px;
}

.components-modal__header,
.wporg__download-modal-sub-header,
.wporg__download-modal-content {
	padding: 41px 46px;
}

.components-modal__header,
.wporg__download-modal-sub-header {
	background: var(--wp--preset--color--blueberry-1);
	color: var(--wp--preset--color--white);
}

.components-modal__header {
	display: flex;
}

.components-modal__header-heading-container {
	flex: 1;
}

.components-modal__header-heading {
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: var(--wp--custom--heading--level-2--typography--line-height);
	margin: 0 0 0.5em;
}

.components-modal__header .components-button {
	--components-modal__close-button-size: 40px;
	--components-modal__close-button-position: calc(var(--components-modal__close-button-size) / -2);
	width: var(--components-modal__close-button-size);
	height: var(--components-modal__close-button-size);
	margin-right: var(--components-modal__close-button-position);
	margin-top: var(--components-modal__close-button-position);
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.components-modal__header .components-button svg {
	fill: var(--wp--preset--color--white);
}

.components-modal__header .components-button .components-tooltip {
	color: var(--wp--preset--color--white);
}

.wporg__download-modal .components-modal__header {
	padding-bottom: 0;
}

.wporg__download-modal-sub-header {
	margin: 0;
	padding-top: 0;
}

.wporg__download-modal-content p:first-child {
	margin-top: 0;
}

.wporg__download-modal-content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}