/*
Theme Name: Munday
Theme URI:
Author: Matt Radford
Author URI: https://mattrad.uk
Description: A WordPress block theme for Abortion Support Network
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: munday
Tags:
*/

/* Button variations */
.wp-block-button {
	&.is-style-button-red {
		& :hover, & :focus {
			background: var(--wp--preset--color--custom-red);
			color: var(--wp--preset--color--custom-white);
		}
	}
	&.is-style-button-orange {
		& :hover, & :focus {
			background: var(--wp--preset--color--custom-orange);
			color: var(--wp--preset--color--custom-white);
		}
	}
}

/* Button default styling controlled via theme.json 'elements.button'.
   Keep only small presentational tweaks in CSS when necessary. */

.asn-header {
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"item1 item2"
		"item3 item3";
	gap: 1rem;
	align-items: center;

	> :nth-child(1) {
		grid-area: item1;
	}

	> :nth-child(2) {
		grid-area: item2;
	}

	> :nth-child(3) {
		grid-area: item3;
		justify-content: center;
	}
	.wp-block-buttons {
		width: 100%;
		display: flex;
		gap: 0.5rem;

		@media (max-width: 599px) {
			justify-content: space-between;
			flex-wrap: nowrap;

			.wp-block-button {
				flex: 0 0 calc(50% - 0.25rem);
				max-width: calc(50% - 0.25rem);
				min-width: 0;
			}

			.wp-block-button__link {
				display: inline-flex;
				justify-content: center;
				width: 100%;
			}
		}
	}
}

@media (min-width: 600px) {
	.asn-header {
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "item1 item2 item3";
	}

	.asn-header > :nth-child(2),
	.asn-header > :nth-child(3) {
		justify-self: end;
	}
}

@media (min-width: 600px) {
	nav {
		.wp-block-navigation__responsive-container-content > ul {
			width: 100%;

			a {
				&:hover, &:focus {
					text-decoration: underline;
				}
			}
		}
	}
}

.front-page-cta {
	.wp-block-buttons {
		justify-content: end;
		align-items: center;
		flex-direction: column;
	}
}