/*
Theme Name:         Petite Therapy Theme
Theme URI:          https://www.petitetherapy.co.uk
Description:        FSE capable theme created for Petite Therapy.
Template:           twentytwentyfive
Version:            2.3.2
Author:             Jack Tiddy <jack@jacktiddy.net>
Author URI:         https://www.jacktiddy.net/
Text Domain:        petite-therapy
Requires PHP:       8.2
Requires at least:  6.6
*/

/* Outline with theme colour */
*:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-600);
}

.wp-site-blocks {
	/* Hide overflowing shapes */
	overflow: hidden;

	/* Prevent gap after footer if page is too small */
	display: flex;
	flex-direction: column;

	min-height: 100vh;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

/* Prevent gap after footer if page is too small */
.wp-site-blocks > .wp-block-group {
	flex: 1;
}

/* Prevent gap between header, content, and footer */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Block Classes */

.z-index-10 {
	z-index: 10;
}

.petite-overflow-hidden {
	overflow: hidden;
}

img.petite-media-blur,
.petite-media-blur img {
	filter: blur(3px) !important;
	transform-origin: center;
	transform: scale(1.01);
}

.petite-heading-shadow {
	filter: drop-shadow(4px 4px 4px #0008);
}

.petite-align-center {
	display: flex;
	align-items: center;
}

.petite-display-flex {
	display: flex;
}

/* Block Fixes */

/* Outlined button same height as filled */
.is-style-outline.petite-inner-border-2px > a {
	margin: -2px 0;
}

/* Fix quote author alignment */
.wp-block-quote.has-text-align-left.is-style-large:where(:not(.is-style-plain)) cite {
	text-align: left;
}

/* Larger mobile nav font */
@media (max-width: 1024px) {
	.wp-block-navigation {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}
}

/* Lighter submenu bg on desktop */
@media (min-width: 1024px) {
	.wp-block-navigation .has-primary-200-background-color {
		background-color: var(--wp--preset--color--primary-050) !important;
	}
}

/* Animate buttons */
.wp-block-button > a, 
.petite-button-menu li > a {
	transition: filter 100ms ease, transform 100ms ease;
	transform-origin: center;
}

.wp-block-button:hover > a,
.wp-block-button > a:focus-visible,
.petite-button-menu li:hover > a, 
.petite-button-menu li > a:focus-visible {
	filter: brightness(110%) hue-rotate(-5deg) saturate(85%) contrast(105%);
	transform: scale(105%);
}

/* Fix Twentig bottom shape width snapping on mobile */
@media (max-width: 767px) {
	[class*="tw-top-shape"]::before, [class*="tw-bottom-shape"]::after {
		mask-size: cover;
	}
}

/* Ninja Form Styles */
.nf-form-cont {
	font-size: 1rem;
	margin-top: 0;
}

.nf-field-label {
	font-family: var(--wp--preset--font-family--merriweather);
}

.nf-error-msg, .ninja-forms-req-symbol {
	color: #d00;
	font-weight: bolder;
}

.nf-field-element:has(> input:not([type="button"], [type="submit"])),
.nf-field-element:has(> textarea) {
	border-image: linear-gradient(to left, var(--wp--preset--color--primary-300) 0%, var(--wp--preset--color--primary-500) 50%, var(--wp--preset--color--primary-700) 100%) 1;
	border-bottom: 2px solid;
}

.nf-field-element > input:not([type="button"], [type="submit"]),
.nf-field-element > textarea {
	background-color: #fff4;

	border: 1px solid #8884;
	border-radius: 0.5rem 0.5rem 0 0;
	padding: 0.5rem;
}

.nf-form-cont button,
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"] {
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--merriweather);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

@keyframes petite-button-bg-offset-in {
	0% { background-position: 0% 0%; }
	100% { background-position: 50% 0%; }
}

@keyframes petite-button-bg-offset-out {
	0% { background-position: 50% 0%; }
	100% { background-position: 0% 0%; }
}

.nf-form-cont input[type="submit"] {
	background: linear-gradient(to right, var(--wp--preset--color--primary-700) 0%, var(--wp--preset--color--primary-500) 100%);
	transition: filter 100ms ease, transform 100ms ease;
	transform-origin: center;

	color: var(--wp--preset--color--primary-050);
	font-weight: 700;
	text-shadow: color-mix(in srgb, var(--wp--preset--color--primary-950) 50%, transparent) 0px 0px 0.75rem, 
				 color-mix(in srgb, var(--wp--preset--color--primary-950) 12.5%, transparent) 2px 0px 3px, 
				 color-mix(in srgb, var(--wp--preset--color--primary-950) 12.5%, transparent) -2px 0px 3px, 
				 color-mix(in srgb, var(--wp--preset--color--primary-950) 12.5%, transparent) 0px 2px 3px, 
				 color-mix(in srgb, var(--wp--preset--color--primary-950) 12.5%, transparent) 0px -2px 3px;

	border: none;
	border-radius: 100px;
}

.nf-form-cont input[type="submit"]:not(:disabled):hover,
.nf-form-cont input[type="submit"]:not(:disabled):focus-visible {
	filter: brightness(110%) hue-rotate(-5deg) saturate(85%) contrast(105%);
	transform: scale(105%);
}

.nf-field:has(input:disabled) {
	filter: saturate(25%) brightness(75%);
}

.nf-form-cont button,
.nf-form-cont input[type="button"] {
	background-color: #fff4;
	font-weight: regular;
	border: 2px solid var(--wp--preset--color--primary-300);
	border-radius: 100px;
}

.nf-form-cont button:hover,
.nf-form-cont input[type="button"]:hover {
	backdrop-filter: brightness(102%);
	border-color: var(--wp--preset--color--primary-400);
}