/**
 * Theme Name: Commerce Packaging Child Theme
 * Template: twentytwentyfive
 * Description: A child theme of the TwentyTwentyFive default WordPress theme to add Commerce Packaging's stylings
 * Author: Theo Grossberndt
 * Version: 1.0.0
 */

/* utility classes */
@media (max-width: 600px){
	.full-width-mobile {
		width: 100%;
	}

	.center-mobile {
		text-align: center;
		align-items: center !important;
		justify-content: center !important;
	}
}

body {
	--font-size-med-plus: calc(var(--wp--preset--font-size--medium) / 2 + var(--wp--preset--font-size--large) / 2);
	--cmplz_button_accept_background_color: var(--wp--preset--color--accent-1);
	--cmplz_button_accept_border_color: var(--wp--preset--color--accent-1);
	--cmplz_slider_active_color: var(--wp-preset--color--accent-1);
}

/* Default button stylings */
:root :where(.wp-block-button__link) {
	border-radius: 8px;
	line-height: normal;
	padding-inline: 2rem;
	padding-block: 0.75rem;

	@media (max-width: 600px){
		font-size: var(--font-size-med-plus);
		font-weight: 500;
	}
}

/* Default button hover styling */
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 90%, black);
}

/* Match <u> text decorations to <a> */
u {
	text-decoration-thickness: 1px;
}

/* Remove potential user stylsheet margins from media/text blocks */
.wp-block-media-text__content > :first-child {
	margin-block-start: 0;
}

.wp-block-media-text__content > :last-child {
	margin-block-end: 0;
}

/* Styling for the navigation bar underline */
a.wp-block-navigation-item__content {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

li.wp-block-navigation-item {
	padding-inline: 8px;
}

/* Underline nav items with the .current-menu-item class, or the .is-home-link nav item thats a decendent of an .is-home-page container (fixes Home not being underlined) */
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
body.home .wp-block-navigation-item.is-home-link .wp-block-navigation-item__content {
  text-decoration: underline;
}

/* Used, along with the next selector, for the navigation drawer background to provide click-to-exit */
	.header-nav::before {
		content: "";
		position: fixed;
		width: 100vw;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		transform: translateX(-100%);
		opacity: 0;
		z-index: 1;
	}

	.wp-block-navigation__responsive-container {
		max-width: 85vw;
	}
/**********************/

/* Slide in animation for the nav menu and fade in for the background darkener */
	@media (prefers-reduced-motion){
		.wp-block-navigation__responsive-container.is-menu-open,
		.header-nav::before {
			animation-duration: 0s;
			transition-duration: 0s;
		}
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		animation: slide-in 0.5s ease-out forwards;
	}

	html.has-modal-open .header-nav::before {
		transform: translateX(0%);
		opacity: 1;
		transition: opacity 0.5s ease-out;
	}

	@keyframes slide-in {
		0% { transform: translateX(-100%); }
		100% { transform: translateX(0%); }
	}
/**********************/

/* Home page hero bg animation stuff */
@media (prefers-reduced-motion){
	.bg-img-2, .bg-img-3 {
		display: none;
	}
}

@media not (prefers-reduced-motion){
	.bg-img-2, .bg-img-3 {
		position: absolute !important;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		animation-duration: 9s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	.bg-img-2 {
		animation-name: hero-2;
	}

	.bg-img-3 {
		animation-name: hero-3;
	}

	@keyframes hero-2 {
		from {opacity: 0;}
		23% {opacity: 0;}
		33% {opacity: 1;}
		90% {opacity: 1;}
		to {opacity: 0;}
	}

	@keyframes hero-3 {
		from {opacity: 0;}
		56% {opacity: 0;}
		66% {opacity: 1;}
		90% {opacity: 1;}
		to {opacity: 0;}
	}

}
/**********************/

/* Turns the link part of a button into a flexbox with justify-content: space-around
   This is a good place to start with icon buttons, although they may need more customization */
.icon-button > a {
	display: flex;
	justify-content: space-around;
	gap: 1rem;
}

.icon-button > a > span {
	padding-right: 0 !important;
}
/**********************/