/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/twenty-twenty-four-child
Description: A child theme for Twenty Twenty-Four
Author: Jackson Guthrie
Author URI: https://example.com
Template: twentytwentyfour
Version: 1.0.0
*/

/* Color Guide 
var(--wp--preset--color--base):
*/

/***************** GENERAL SITE *****************/
:root {
	--color-base-rgb: 				245 250 252;
	--color-base-2-rgb: 			234 238 241;
	--color-contrast-rgb: 			11 11 9;
	--color-contrast-2-rgb: 		11 19 43;
	--color-contrast-3-rgb: 		50 49 38;
	--color-accent-rgb: 			36 123 160;
	--color-accent-2-rgb: 			136 160 170;
	--color-accent-3-rgb: 			201 46 29;
	--color-accent-4-rgb: 			149 31 15;
	--color-accent-5-rgb: 			54 208 255;
	--color-custom-gray-rgb: 		181 189 188;

	--color-base-shadow-rgb:		141 162 170;
	--color-base-2-shadow-rgb:		140 149 155;
	--color-contrast-2-shadow-rgb: 	0 3 10;
	--color-accent-shadow-rgb: 		13 70 94;
}

/* Remove outline when clicking with mouse */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}
/* Custom focus style for keyboard users */
a:focus-visible,
button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

.full-width {
	min-width: 100%;
}
/***************** END GENERAL SITE *****************/


/******************** BEGIN HEADER *********************/
/* Styles for the sticky header */
.site-header {
	--shadow-intensity: 0.2;
	box-shadow:
		0px 1.5px 1.5px rgba(var(--color-contrast-rgb) / var(--shadow-intensity)),
		0px 6px 6px -1px rgba(var(--color-contrast-rgb) / var(--shadow-intensity)),
		0px 15px 17px -2.5px rgba(var(--color-contrast-rgb) / var(--shadow-intensity))
		;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 999;
	background: rgba(0, 0, 0, .1) !important;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px); 

	transition: all 0.3s ease;

}
div.header-logo a img{
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .7));
}

.site-header .header-title {
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .7);

	transition: all 0.3s ease;
}

/* Adjust header position when admin bar is present */
.site-header.has-admin-bar {
	top: 32px;
}

/* Transitions for header elements */
.site-header img {
	transition: all 0.3s ease;
}
.site-header .logo-and-title {
	transition: all 0.3s ease;
}

/* Styles when the header is scrolled */
.site-header.is-scrolled {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	background: rgba(var(--color-contrast-rgb) / .3) !important;
}
.site-header:hover {
	background: rgba(var(--color-contrast-rgb) / .8) !important;
}
.site-header.is-scrolled .header-title {
	font-size: 1.5rem !important;
}
.site-header.is-scrolled img {
	width: 50px;
}
.site-header.is-scrolled .logo-and-title {
	gap: 0.5rem;
}

/*Styling for navigation menu links*/
ul.header-nav {
	gap: 2em;
}

ul.header-nav li a {
	font-size: 1.1em;
	padding: 0.5em 0em;
	border-radius: 5px;
	transition: all 0.3s ease;
	border: none;
}

ul.header-nav li a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--accent-5) !important;

}

/******************** END HEADER *********************/


/******************** FOOTER *********************/
footer {
	margin: 0;
	color: var(--wp--preset--color--base);
}

.footer-nav h4 {
	color: var(--wp--preset--color--accent-5);
}

.wp-block-site-tagline {
	color: var(--wp--preset--color--base) !important;
}

footer .copyright {
	color: var(--wp--preset--color--custom-gray) !important;
}
/******************** END FOOTER *********************/


/********************* BUTTONS *********************/
.is-button > a {
	padding: 0.3em 1.2em;
	border-radius: 7px;
	border: 2px solid transparent;
	
	text-decoration: none;
	text-align: center;
	font-family: "Monomaniac One", sans-serif;
	
	transition: background 0.3s ease, color 0.3s ease, border 0.1s ease;

}

.is-button.light-theme > a {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-2);
}

.is-button.dark-theme > a {
	background: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
}

.is-button.light-theme > a:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast-2);
	border: 2px solid var(--wp--preset--color--base);
}

.is-button.dark-theme > a:hover {
	color: var(--wp--preset--color--contrast-2);
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast-2);
}
/********************* END BUTTONS *********************/


/******************** IMAGES *********************/
/* Slanted mask for images */
.trapezoid-mask img {
	clip-path: polygon(
		0% 0%, 		/* top-left */
		100% 0%, 	/* top-right */
		100% 100%, 	/* bottom-right */
		20% 100%	/* bottom-left */
	);
}

/* Remove right padding from media-text block content with image on the right*/
.wp-block-media-text.has-media-on-the-right.no-right-padding .wp-block-media-text__content {
	padding-right: 0 !important;
}

table img.product-table-image {
	width: 50%;
	height: auto;
	margin: auto;
	display: block;
}

/******************** END IMAGES *********************/


/******************** TYPOGRAPHY *********************/
/* Drop shadow for text */
.has-drop-shadow {
	text-shadow: 2px 2px 5px rgb(var(--color-contrast-rgb));
}

/* Removes top margin on elements */
.no-top-margin {
	margin-top: 0;
}

/* Accent colors for headings */
h4 {
	color: var(--wp--preset--color--accent);
}

h5 {
	color: var(--wp--preset--color--accent-2);
}

/********************** END TYPOGRAPHY *********************/


.product-listing.dark-theme {
	background: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
	--shadow-intensity: 0.3;
	box-shadow: 
		1px 1px 1px rgba(var(--color-contrast-rgb) / var(--shadow-intensity)),
		4px 4px 8px -1px rgba(var(--color-contrast-rgb) / var(--shadow-intensity)),
		12px 12px 12px -2px rgba(var(--color-contrast-rgb) / var(--shadow-intensity))
	;
}

.product-listing {
	padding: 1.5em;
	border-radius: 20px;
}

.product-listing img {
	--shadow-intensity: 0.65;
	filter: 
		drop-shadow(1px 1px 1px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity)))
		drop-shadow(4px 4px 8px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity)))
		drop-shadow(8px 8px 10px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity)))
	;
}

.product-listing h4 {
	--shadow-intensity: 0.65;
	text-shadow:
		1px 1px 1px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity))
		4px 4px 8px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity))
		8px 8px 10px rgba(var(--color-contrast-2-shadow-rgb) / var(--shadow-intensity))
	;
}


.base-drop-shadow img {
	--shadow-intensity: 0.65;
	filter: 
		drop-shadow(1px 1px 1px rgba(var(--color-base-shadow-rgb) / var(--shadow-intensity)))
		drop-shadow(4px 4px 8px rgba(var(--color-base-shadow-rgb) / var(--shadow-intensity)))
		drop-shadow(8px 8px 10px rgba(var(--color-base-shadow-rgb) / var(--shadow-intensity)))
	;
}


/********************** CAROUSEL *********************/
.carousel {
	overflow: hidden;
	position: relative;
	background: var(--wp--preset--color--base-2);
}

.carousel-track {
	display: flex;
	transition: transform 0.6s ease;
}

.carousel-slide {
	min-width: 100%;
	flex-shrink: 0;
}

/* Dots */
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0px;
  min-width: 100%;
  text-align: center;
}

.carousel-dots button {
  width: 8px;
  height: 8px;
  margin: 5px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  min-width: 0px;
  min-height: 0px;
  padding: 0px;
}

.caorusel-dots.dark-theme button {
	background: rgba(var(--color-base-rgb) / 0.2);
}
.carousel-dots.dark-theme button.active{
  background: var(--wp--preset--color--base);
}

.carousel-dots.light-theme button {
	background: rgba(var(--color-contrast-rgb) / 0.2);
}

.carousel-dots.light-theme button.active {
	background: var(--wp--preset--color--contrast);
}

/********************** END CAROUSEL *********************/