/*
Theme Name: Elevate
Theme URI: https://weaver.coop
Author: Weaver Co-operative
Author URI: https://weaver.coop
Description: Base theme for Elevate websites
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
Text Domain: elevate
*/

:root {
	--stk-button-ghost-border-width: 2px;
}

@media (max-width: 768px) {
  :root {
    --wp--preset--border-radius--small:   30px;
    --wp--preset--border-radius--medium:  30px;
    --wp--preset--border-radius--large:   30px;
    --wp--preset--border-radius--x-large: 30px;
  }
}

@media screen and (max-width: 767px) {
	:root {
		--stk-column-margin: 1rem !important;	
	}
}

:is(.entry-content,.site-content) > .stk-block>.stk-content-align {
	width: calc(100% - (2 * var(--stk-column-margin))) !important;
	margin-left: var(--stk-column-margin);
	margin-right: var(--stk-column-margin);
}

:root {
	--sm-width: 480px;
	--md-width: 768px;
	--lg-width: 980px;
	--xl-width: 1200px;
	--2xl-width: 1600px;
	--3xl-width: 1920px;

	/* overriding stackable to use our own values from theme.json */
	--stk-block-background-padding: 0;
  --stk-block-default-width: 1202px;

  --stk-button-padding: 1.5rem 2rem;

  --stk-heading-color: var(--wp--preset--color--accent-2);
  --stk-heading-font-family: var(--wp--preset--font-family--outfit);

	--stk--preset--border-radius--small: var(--wp--preset--border-radius--small)!important;
	--stk--preset--border-radius--medium: var(--wp--preset--border-radius--medium)!important;
	--stk--preset--border-radius--large: var(--wp--preset--border-radius--large)!important;
	--stk--preset--border-radius--x-large: var(--wp--preset--border-radius--x-large)!important;
	--stk--preset--border-radius--xx-large: var(--wp--preset--border-radius--full)!important;
	--stk--preset--border-radius--full: var(--wp--preset--border-radius--full)!important;

	@media screen and (min-width: 980px) {
	  --stk-button-padding: 0.75rem 1rem;
	}

	@media screen and (min-width: 1600px) {
    --stk-button-padding: 1rem 2.25rem;
  }
}

.elevate-main-block-group {
	margin-top: 200px;

	@media screen and (min-width: 992px) {
		margin-top: 250px;
	}
}
.elevate-main-block-group:has(.entry-content > .elevate-hero-background-image) {
	margin-top: 0;
}

.hide-sm {

	@media screen and (min-width: 480px) {
		display: none !important;
		visibility: hidden !important;
	}
}

.hide-md {

	@media screen and (min-width: 768px) {
		display: none !important;
		visibility: hidden !important;
	}
}

.show-lg {
	display: none !important;
	visibility: hidden !important;

	@media screen and (min-width: 980px) {
		display: block !important;
		visibility: visible !important;
	}
}

.show-2xl {
	display: none !important;
	visibility: hidden !important;

	@media screen and (min-width: 1600px) {
		display: block !important;
		visibility: visible !important;
	}
}

/* Blocks */

.entry-content .stk-block.wp-block-stackable-columns, .stk-block.wp-block-stackable-columns, .stk-block-column__content>.wp-block-stackable-columns {
	margin: 0;
}

.elevate-circled-number {
	p {
		width: 86px;
		height: 86px;
	}
}

.elevate-checkmark-list {
	.stk-block-icon-list-item__content {
		align-items: flex-start !important;

		.stk--svg-wrapper {
			top: 15px;
		}
	}
}

/* Buttons */
/* see theme.json */
.wp-block-stackable-button {
	/* see --stk-button-padding under body */

	&.is-style-ghost {
		border: 0 none !important;

		a {
			background: transparent none !important;
			border-color: var(--wp--preset--color--accent-2);
			color: var(--wp--preset--color--accent-2);

			&:hover,
			&:focus,
			&:active {
				text-decoration: underline;
				border-color: var(--wp--preset--color--accent-2);
			}
		}
	}

	&.is-style-ghost .stk-button .stk-button__inner-text {

		@media screen and (max-width: 767px) {
			font-size: 20px !important;
		}
	}

	&.is-style-ghost.border-base .stk-button,
	&.is-style-ghost.border-base .stk-button:before {
		border: 2px solid var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--base);

		&:hover,
		&:focus,
		&:active {
			border: 2px solid var(--wp--preset--color--base);
		}
	}
}

.wp-block-navigation__responsive-container ul {

	@media screen and (max-width: 767px) {
		width: 100%;
	
		li:not(.stk-button) {
			margin: 0 auto 2rem;
			font-size: 1.5rem !important;
		}
	}
}

.wp-block-navigation__responsive-container li.stk-button {

	@media screen and (max-width: 767px) {
		font-size: 1.25rem !important;
		margin: 0 auto;

		a {
			padding: var(--stk-button-padding) !important;
			background-color: var(--stk-global-color-53234, #008c77) !important;
			border-radius: var(--wp--preset--border-radius--full) !important;
			color: var(--stk-button-text-color-hover,var(--stk-button-text-color)) !important;
		}
	}
}

/* Divider */
.stk-block.stk-block-divider hr.stk-block-divider__hr {
	width: 80vw;
}

/* Footer */
.site-footer {
	margin-top: 0 !important;

	.wp-block-navigation.is-vertical {
		width: 100%;
		align-items: center !important;

		@media screen and (min-width: 768px) {
			align-items: flex-start !important;
		}

		li {
			font-size: 25px !important;
			text-align: left;
		}
	}

	.elevate-footer-links p {

		@media screen and (max-width: 785px) {
			text-align: center !important;
		}
	}
}

/* Galleries */
.wp-block-gallery {
	@media screen and (max-width: 767px) {
		flex-direction: flex-column;

		figure {
			flex: 0 0 100%;
		}
	}
}

/* Header */
.site-header {
	position: fixed;
	top: 0;
	z-index: 500;
	width: 100vw;
	background: transparent;

	@media screen and (min-width: 980px) {
		top: 2rem;
	}
}

.elevate-header-logo,
.elevate-header-logo figure,
.elevate-header-logo img {
	max-height: 50px;
	min-width: 50px;

	@media screen and (min-width: 980px) {
		max-height: 85px;
		min-width: 80px;
	}
}

.elevate-header-title {
	max-width: 175px;
	a {
		text-decoration: none !important;
	}
}

.site-header .wp-block-navigation__container {
	gap: 3rem;
}

.elevate-header {
	width: calc(var(--wp--style--global--wide-size) + 4rem);
  max-width: 100vw;
	margin: 0 auto;
	padding: 1.25rem 2rem;
	background: white none;

	@media screen and (min-width: 980px) {
		padding: 0.75rem 2rem;
		border-radius: var(--wp--preset--border-radius--full);
	}

	.stk-block,
	.stk-block.stk-block-column.stk-column>.stk-column-wrapper {
		margin: 0;
		padding: 0;
	}

	.stk--svg-wrapper .stk--inner-svg svg {
		width: 18px !important;
		height: 18px !important;
	}

	.header-middle {
		padding: 0 1rem;

		@media screen and (min-width: 1920px) {
			padding: 0 2rem;
		}
	}

	.stk-button__inner-text {
		font-size: var(--stk--preset--font-size--large) !important;
		}
}

/* shouldn't be necessary but iPhone Safari wouldn't center button without this */
.elevate-header .wp-block-navigation .wp-block-navigation-item {
	justify-content: center;
	text-align: center;

	.wp-block-navigation-item,
	.wp-block-navigation-item__content,
	.wp-block-navigation-item__label {
		text-align: center;
	}
}

/* Pagination */
.wp-block-query-pagination-numbers {

	span,
	a {
		padding-right: 1rem;
	}
}

/* Social Snap */
.ss-inline-share-wrapper {
	margin: 0;
	padding: 3rem 0;
	background-color: var(--wp--preset--color--accent-3);
}