/**
 * 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
 */

@import "utilityClasses.css";

:where(.wp-site-blocks) > * {
  margin-block: 0;
}


/* Basic styling variables */
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);

	--content-gap-l: 6rem;
	--content-gap: 3rem;
	--content-gap-s: 1.5rem;

	--content-padding-block: 4rem;
	--content-padding-inline: 2.5rem;

	/* Mobile gutters */
	@media (max-width: 600px) {
		--content-gap-l: 2rem;
		--content-gap: 1rem;
		--content-gap-s: 0.5rem;

		--content-padding-block: 1.5rem;
		--content-padding-inline: 1rem;

		--wp--style--root--padding-right: var(--content-padding-inline);
		--wp--style--root--padding-left: var(--content-padding-inline);
	}
}

/* Fix for weird contact form bug with the response box sometimes showing with an empty message */
.wpcf7-response-output:empty {
	display: none;
}

/* 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;
}

/* Provides a click-to-exit target for the navigation drawer, which is fixed to 85vw */
.wp-block-navigation__responsive-container {
	max-width: 85vw;
}

.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;
}
/**********************/

/* 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 background fade transition */
@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;}
	}

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