@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.plans main {
	@include break-medium {
		padding-top: 24px;
	}
	// a formatted-header instance used within main (not as section header)
	.plans__formatted-header {
		&.is-domain-upsell {
			margin-top: 30px;
			display: flex;
			justify-content: center;

			.formatted-header__title,
			.formatted-header__subtitle {
				max-width: $break-medium;
			}

			.formatted-header__title {
				font-size: 2rem;
			}
		}
	}
}

body.is-section-plans {
	.layout:not(.has-no-sidebar):not(.is-global-sidebar-visible) .layout__content {
		@media (min-width: $break-small) {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
		@media (min-width: $break-medium) {
			padding-left: calc(var(--sidebar-width-max) + 1px) !important;
			padding-right: 0 !important;
		}
		@media (max-width: $break-medium) {
			.navigation-header {
				padding-left: max(calc(50% - 612px), 32px);
				padding-right: max(calc(50% - 612px), 32px);
			}
			.section-nav__panel {
				padding: 0 max(calc(50% - 612px), 32px);
			}
			.main {
				padding: 17px max(calc(50% - 612px), 32px);
			}
		}
		@media (max-width: $break-mobile) {
			.navigation-header {
				padding-left: max(calc(50% - 612px), 15px);
				padding-right: max(calc(50% - 612px), 15px);
			}
			.section-nav__panel {
				padding: 0 max(calc(50% - 612px), 15px);
			}
			.main {
				padding: 17px max(calc(50% - 612px), 15px);
			}
		}
	}

	.layout:not(.has-no-sidebar):not(.has-no-masterbar):not(.is-global-sidebar-visible) .layout__content {
		@media (min-width: $break-small) {
			padding-top: 79px !important;
		}
	}
}
body.is-section-plans.is-domain-plan-package-flow {
	background: var(--color-body-background);

	.layout__content {
		padding-top: 0 !important;
		padding-left: 0 !important;
	}

	.plans__has-sidebar {
		.section-nav {
			display: none;
		}
	}

	.plans__header {
		display: block;
		overflow: auto;

		.formatted-header__title,
		.formatted-header__subtitle {
			max-width: unset;
		}

		h1 {
			font-family: $brand-serif;
			font-size: $font-headline-small;
		}

		p {
			font-size: $font-body;
			color: var(--color-text-subtle);
			text-align: center;
			padding: 0 10px;
			margin-bottom: 0;
			&:last-child {
				margin-bottom: 1.5em;
			}
			button {
				font-size: $font-body;
				text-decoration: underline;
				cursor: pointer;
			}
		}
	}

	@include break-small {
		.plans__header {
			h1 {
				font-size: $font-headline-medium;
			}
			p {
				padding: 0 80px;
			}
		}
	}
}
