/*
 Theme Name: Twenty Twenty-One Child
 Theme URI: https://yourwebsite.com
 Description: Child theme for Twenty Twenty-One
 Author: Your Name
 Author URI: https://yourwebsite.com
 Template: twentytwentyone
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Import parent theme styles */
@import url("../twentytwentyone/style.css");

/* TYPE */

@font-face {
	font-family: 'CustomFont';
	src: url('fonts/PPNeueMachina-InktrapRegular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, a, li, * {
	font-family: 'CustomFont', sans-serif !important;
}

/* GENERAL */

body, .menu-button-container, .primary-menu-container {
	background: white !important;
}

/* Set html, body, and wrapper to full height */
html, body {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Ensure the content area grows to take available space */
html, body {
	height: 100%;
	margin: 0;
}

#page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content {
	flex: 1;
}



/* Footer styles */
footer {

	position: relative;
}

.no-scroll {
	overflow: hidden;
	height: 100vh;
}

#masthead {
	padding: 20px;
	min-width: 100vw;
}

#colophon {
	margin-top: 0px !important;
	width: 100vw !important;
	max-width: 100vw !important;
	padding: 20px;
}

#colophon p {
	margin: 0px !important;
}

.post-type-archive-product #primary, .single-product #primary, .woocommerce-checkout #primary {
	max-width: 100vw !important;
	padding: 20px;
}

.entry-header {
	display: none !important;	
}

.type-page {
	margin-top: 80px !important;
}

#main {
	padding-top: 0px !important;
	margin: 0px !important;
}

.masonry-item a {
	text-transform: none !important;
	vertical-align: baseline !important;
	text-underline-offset: 0px !important;
	text-decoration: none !important;
}

/* MASONRY GRID */

.masonry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	padding: 0px 20px;
	margin-bottom: 0px !important;
}

.masonry-item {
	display: inline-table;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	min-height: 200px; /* Adjust as needed */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease-in-out;
	cursor: pointer !important;
}

.masonry-item:hover, .portfolio-item:hover, .products .product:hover {
	transform: translateY(-5px);
}

.masonry-item img {
	width: 100%;
	height: auto; /* Keeps original aspect ratio */
	display: block;
	object-fit: contain;
	min-height: 150px; /* Placeholder height */
	background-color: #f0f0f0; /* Light grey placeholder */
}

.masonry-content, .portfolio-text {
	padding: 15px;
	text-align: left;
}

.masonry-title, #page a.masonry-title .portfolio-title {
	font-size: 1.2rem;
	margin-bottom: 5px;
	line-height: 1.4 !important;
	text-decoration: none !important;
}

.masonry-date, .portfolio-subtitle {
	font-size: 0.9rem;
	color: #777;
}

.site .button:focus, button:focus, input[type=submit]:focus, input[type=reset]:focus, .wp-block-search .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus, .wp-block-file a.wp-block-file__button:focus {
	outline: none !important;
}

.site input {
	padding: 5px !important;
	margin-bottom: 10px !important;
	border: 1px solid black !important;
	border-radius: 5px !important;
}



/* Placeholder div */
.masonry-item .placeholder {
	width: 100%;
	padding-top: 56.25%; /* Maintain a 16:9 aspect ratio */
	background-color: #f0f0f0; /* Light grey placeholder */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}


.site-title, .site-title a {
	text-decoration: none !important;

}

#page .disc {
	margin-bottom: 0px !important;
	font-size: 10pt !important;
}

@media (min-width: 1024px) {
	.masonry-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.masonry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.masonry-grid { grid-template-columns: 1fr; }
}

/* PORTFOLIO */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
	gap: 16px;
	padding: 0px 20px;
	justify-content: center;
	margin-bottom: 0px !important;
}

.portfolio-item, .products .product {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	background: white;
	transition: transform 0.2s ease-in-out;
}

.portfolio-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.portfolio-item img {
	width: 100%;
	aspect-ratio: 1 / 1; /* Ensures square images */
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
	
}


/* Responsive Design */
@media (max-width: 768px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.modal {
		padding: 20px !important;
	}
	.modal-content {
		margin: 0px !important;
		padding: 20px !important;
		width: calc(100vw - 40px) !important;
		max-height: calc(100vh - 40px) !important;
	}
}

@media (max-width: 480px) {
	.portfolio-grid {
		grid-template-columns: 1fr;
	}
}

/* Modal Styling */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0 !important;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	overflow: auto;
	margin-top: 0px !important;
	padding: 40px;
	
}

.modal-content {
	margin: auto !important;
	background: white;
	padding: 40px;
	width: calc(100vw - 80px);
	margin: auto;
	max-width: 800px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	border-radius: 24px;
	position: relative;
}

.modal-content p, .modal-content h2 {
	margin-bottom: 20px !important;
}

.modal-content img {
	max-width: 100% !important;
	margin-bottom: 30px !important;
	border-radius: 12px !important;
	height: unset !important;
}

.wp-block-image img {
	border-radius: 12px !important;
}

.modal-content iframe {
	width: 100% !important;
	margin-top: 30px !important;
	margin-bottom: 30px !important;
}

.spotify-embed {
	margin-top: 20px !important;
}

.close-modal {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	cursor: pointer;
}

.modal-head h2 {
	margin-bottom: 0px !important;
}

/* WOO */

.woocommerce-products-header, .woocommerce-ordering, .woocommerce-tabs {
	display: none !important;
}

.woocommerce-result-count {
	margin-bottom: 20px !important;
}

.woocommerce-loop-product__title, .products .price, .added_to_cart {
	padding: 0px 20px !important;
}

.added_to_cart {
	font-size: 10pt !important;
	margin: 0px 0px 20px 0px !important;
}

/* CSS for the image placeholder */
.portfolio-item img {
	display: block; /* Ensures the image doesn't have any space below it */
	width: 100%;
	height: 100%;
	background-color: #f0f0f0 !important; /* Light grey background for placeholder */
	object-fit: cover; /* Ensures the image covers the container, adjusting its aspect ratio */
	transition: opacity 0.3s ease; /* Fade in effect when the image is loaded */
	//opacity: 0; /* Make image invisible initially */
}

/* Add fade-in effect when image is loaded */
.portfolio-item img.loaded {
	opacity: 1;
}



.product .button {
	margin: 20px;
	text-decoration: underline !important;
	padding: 0px !important;
	font-size: 10pt !important;
	color: black !important;
	text-align: left !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	width: calc (100% - 40px) !-moz-appearance: ;
}

.ppc-button-wrapper {
	margin-top: 10px !important;
}

.short-description-container {
	max-height: 12em; /* Adjust based on line height */
	overflow: hidden;
	position: relative;
	transition: max-height 0.3s ease-in-out;
}

.short-description-container.expanded {
	max-height: none;
}

.show-more-btn {
	display: block;
	cursor: pointer;
	background: transparent !important;
	border: none;
	font-weight: bold;
	text-align: left;
	padding: 10px 0;
	font-size: 10pt;
	text-decoration: underline !important;
	color: black !important;
	margin-top: 10px !important;
}

.woocommerce-notices-wrapper {
	margin: 20px 0px !important;
}

button, a.button {
	display: block;
	cursor: pointer;
	background: transparent !important;
	border: none;
	font-weight: bold;
	text-align: left;
	padding: 10px 0;
	font-size: 10pt;
	text-decoration: underline !important;
	color: black !important;
	margin-top: 10px !important;
}

.woocommerce-message {
	border: none !important;
	border-radius: 12px !important;
}

.show-more-btn:hover {
	text-decoration: underline;
}

.woocommerce ul.products.columns-4 li.product {
	width: 100% !important;
	margin: 0px !important;
}

.products .product a {
	min-width: 100% !important;
	max-width: 100% !important;
}

 {
	margin-top: 20px !important;
}

.site .single-product .product .price {
	padding: 0px !important;
}

/* Default grid (Desktop) */
ul.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
	gap: 20px; /* Adjust gap between columns */
}

.cart {
	margin-bottom: 50px !important;
}

.products::before {
	content: ''; /* Empty content if you don't need it */
	position: absolute !important; /* Absolute positioning */
	width: 0; /* Ensure it doesn’t take up space */
	height: 0; /* Ensure it doesn’t take up space */
	z-index: -1; /* Ensure it's behind the product item */
}

/* Tablet grid (3 columns) */
@media (max-width: 1024px) {
	ul.products.columns-4 {
		grid-template-columns: repeat(3, 1fr); /* 3 columns on tablets */
	}
}

/* Mobile grid (2 columns) */
@media (max-width: 768px) {
	ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
	}
}

/* Extra small mobile screens (1 column) */
@media (max-width: 600px) {
	ul.products.columns-4 {
		grid-template-columns: 1fr; /* 1 column for very small screens */
	}
}