/**
 * Theme Name:     Twenty Twenty-Five Child
 * Author:         Anders
 * Template:       twentytwentyfive
 * Text Domain:	   twenty-twenty-five-child
 * Description:    Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
*/

/******************************************* GLOBAL *****************************************************************/
html {
  scroll-behavior: smooth;
}

body {
    min-width: 410px !important;
}

.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 20ch; }

.hide {
	display: none !important;
}

button {
	transition: all 0.3s ease;
}

button {
	opacity: 1;
}

/*strong*/
p > strong {
	font-weight: 500;
}

h1 > strong, h2 > strong, {
	font-weight: 700;
}

h3 > strong, h4 > strong, h5 > strong, h6 > strong {
	font-weight: 600;
}

/* class for reversing flex columns */
.col-reverse {
	flex-direction: row;
	/* (see media query) flex-direction: column-reverse; */
}

/************ Stripe quick payment logo ***************/
#wc-stripe-express-checkout-element {
display: block !important;
margin-bottom: 0px !important;
}

/* TEXT HYPHENATE */

.custom-hyphenate p, 
.custom-hyphenate h2, 
.custom-hyphenate {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* content-container-img for columns */
.content-container-img {
	height: auto !important;
	min-height: 400px;
	overflow: hidden !important;
	position: relative !important;
}

.content-container-img img {
	object-fit: cover !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
}

.om-container-img img {
	object-fit: cover !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
}

@media (min-width: 1100px){
	.om-container-img img {
		object-position: left !important;
	}
}

@media (min-width: 782px) {
		.om-container-img img {
		object-position: -240px center;
	}
}



/************************ product-category-section ******************************/

.product-category-section > div:hover {
	transition: all 0.1s ease;
	background-color: #E5E6CD;
	cursor: pointer;
}

.product-button-3-col {
	margin-top: auto !important;
}

.dp-flexbox {
	display: flex !important;
	flex-direction: column !important;
}

.dp-flexbox-column {
	display: flex !important;
	flex-direction: column;
	min-height: 475px;
	max-width: 345px;
	margin: auto;
}

@media (max-width: 782px) {
	.dp-flexbox-column {
		max-width: 525px !important;
		min-height: 255px !important;
	}
}
/************************** HERO **************************/
.dp-hero {
	margin-top: 80px !important;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.dp-hero img {
	bottom: 0;
	left: 0;

	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.dp-hero {
		margin-top: 50px !important;
		height: 50vh;
	}
}

/************************************* HOOK ****************************************/

@media (max-width: 768px) {
	.hook-section h2 {
		text-align: center !important;
		font-size: 1.15rem !important;
	}
}

/********************************* Content Product Css **************************************************/
div.woocommerce.columns-2 {
	background: #7E7B7C;
}

ul.products {
	margin: 0 auto !important;
	padding: 0 !important;
	display: flex;
	flex-direction: row !important;
	width: 100% !important;
}

a.product {
	margin: 0 !important;
	padding: 2rem 0 !important;
	flex: 1;
	transition: all 0.3s ease;
	background-color: #7E7B7C !important;
}

a.product:hover {
	cursor: pointer;
	background-color: #8C898A !important;
}

.dp-content-product-single-product {
	margin: 4rem auto !important;
	font-size: 1.2rem !important;
	color: white !important;
	font-weight: 500 !important;
	padding: 0 3rem !important;
	max-width: 500px;
}
.product-title {
	font-size: 2.4rem !important;
	margin-bottom: 1rem;
	line-height: 1.1;
}

.product-title span {
	margin-top: 10px !important;
	font-size: 1rem !important;
	font-weight: 400!important;
}

.product-malgruppe,
.product-tidspunkt,
.product-lokation,
.product-datoer,
.product-stock-quantity {
	font-size: 1.25rem;
}

.product-button {
	margin-top: 1.5rem;
	font-weight: 800 !important;
	color: black !important;
	display: flex;
	justify-content: center !important;
	padding: 1rem !important;
	width: auto !important;
	letter-spacing: 2px;
	background-color: #fbf9cd;
	transition: all 0.1s ease;
}



.product-button:hover {
	filter: brightness(0.85);
}


html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
    display: none !important;
}

.wc-block-product-gallery-large-image img {
    object-fit: cover !important;
	width: 100% !important;
}


/****** a styling ******/
a {
    text-decoration: none !important;
	transition: all 0.2s ease;
		outline: none !important
}

.text-link:hover {
	text-decoration: underline !important;
}

.contains-text-link a:hover {
	text-decoration: underline !important;
}

a.text-link:

a:focus, a:active, li:focus, li:active, button {
    outline: none !important;
}

/********************* WOOCOMMERCE MINI CART ***************************/

.dp-woocommerce-minicart svg{
	min-width: 2.8rem !important;
	min-height: 2.8rem !important;
}
@media (max-width: 768px) {
	.dp-woocommerce-minicart svg{
		min-width: 2.0rem !important;
		min-height: 2.0rem !important;
	}
}

.dp-woocommerce-minicart button {
	outline: none !important;
	border: none !important;
}


/**************** FJERN WOOCOMMERCE ORDER AGAIN OG STOCK********************/

p.order-again {
	display: none !important;
}

.stock.in-stock {
	display: none !important;
}


/**************** WOOCOMMERCE ORDER PRODUCT IMAGE********************/
.product-image-wrapper {
	max-height: 600px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	width: 100%;
	height: 100%;
}

/******************** WOOCOMMERCE CONTENT PRODUCT RESPONSIVE ******************/
..woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Breakpoint for mobil (skærme mindre end 768px) */
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr; /* Én kolonne på mobil */
    }
	
	.col-reverse {
	flex-direction: column-reverse;
	}
	
	
	/* change product container to flex col*/
	.woocommerce.columns-2 ul.products a.product{
		width: 100% !important;
	}
	.woocommerce ul.products{
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* smaller font size for product headings */
	.product-title {
	font-size: 2rem !important;
	}
	
	
}

@media (max-width: 1024px) {

	.dp-content-product-single-product {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

/************************ HEADER  *********************/

header {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: white;
	transition: all 0.1s ease;
	z-index: 10;
	padding: 1.25rem 0rem 0.75rem 0rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); /* Add a subtle box shadow */
}

header .main-logo, .main-logo img {margin: auto 0 0 0!important; transition: all 0.3s ease;}

.secondary-header-group img {margin: 0 !important; transition: all 0.3s ease;}

/* Smaller header when scrolled */
header.smaller {
	transition: all 0.3s ease;
	padding: 0.25rem 0rem 0.75rem 0rem;
}

header.smaller .main-logo img {
	width: 375px !important;
	transition: all 0.3s ease;
}

.secondary-header-group {
	position: static;
	width: 100%;
	background-color: white;
	z-index: 10;
	padding: 1rem 0rem 0.75rem 0rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); /* Add a subtle box shadow */
}

/********* kort til kontakt siden **************/
.contact-card {
	position: relative; 
	width: 450px;
	margin-top: 1rem; 
	height: 337px;  
	padding-bottom: 0; 
	margin-left: 0 !important;
}

@media (max-width: 1024px) {
	.contact-card {
		width: 350px;
		height: 350px;
	}
}

@media (max-width: 420px) {
	.contact-card {
		width: 220px;
		height: 220px;
	}
}
/****************************** NAVIGATION BURGER MENU *************************************/
#custom-burger-menu {
    position: relative;
}

.secondary-header-nav-row {
	margin-top: 0px !important;
}

@media (max-width: 768px) {

	.dp-align-button-center-mobile {
		justify-content: center !important;
	}
	.dp-align-group-center-mobile {
		margin-left: auto !important;
	}
}

#custom-burger-menu p {
	display: none !important;
}


#burger-menu-toggle {
    background: none;
    border: solid 2px #424242;
	border-radius: 100%;
    cursor: pointer;
	padding: 8px;
	display: flex;
}

#burger-menu-toggle svg {
    color: #303030;
	width: 42px;
	height: 42px;
}

.wc-block-mini-cart__button {
	padding-bottom: 0;
	margin-bottom: -5px;
}

@media (max-width: 768px) {
		#burger-menu-toggle svg {
		color: #303030;
		width: 24px;
		height: 24px;	
	}
}

/* Option 1: Subtle scale and fade */
#burger-menu-toggle:hover, #burger-menu-toggle:hover #burger-menu-toggle svg {
    opacity: 0.6;
	transform: scale(1.05) !important;
}

#burger-menu-toggle br {
	display: none;
}

.admin-bar #burger-menu-content {
	height: calc(100dvh - 32px);
    margin-top: 32px;
}

#burger-menu-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-width); /* Juster bredden efter behov */
    height: 100%;
    background: #45413699;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0; /* Start med at være usynlig */
    transform: translateX(100%); /* Start uden for skærmen */
    transition: all 0.3s ease; /* Animerer på alle egenskaber */
    pointer-events: none;
	backdrop-filter: blur(5px);
}
#burger-menu-content li a {
	color: white !important;
}

#burger-menu-content li a::after {
	background-color: white !important;
}

#burger-menu-content.burger-menu-open {
    visibility: visible;
    opacity: 1; /* Gør elementet synligt */
    transform: translateX(0); /* Flyt elementet ind på skærmen */
    pointer-events: auto; /* Tillad interaktion, når menuen er åben */
}


#burger-menu-content.burger-menu-open-animation {
	
}

#burger-menu-content .wc-block-components-button.wc-block-components-drawer__close svg {
	color: white;
}

.burger-menu-overlay {
    background-color: rgba(95, 95, 95, .2);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
	visibility: hidden !important;
    right: 0;
    top: 0;
    transition: opacity .3s;
    z-index: 999;
}

.burger-menu-overlay.burger-menu-overlay-visible {
	visibility: visible !important;
	opacity: 1;
}

@media (max-width: 768px) {
    #burger-menu-content {
        width: 100%; /* Fylder hele skærmen på mobil */
			
    }
	#burger-menu-content ul {
		margin-left: auto;
		margin-right: auto;
		/*width: 90%;*/
	}

}

/***** custom underline *****/
.dp-nav-ul {
	list-style: none !important;
}

.dp-nav-ul a {
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}

.dp-nav-ul a:hover {
    font-weight: 400 !important;
    text-decoration: none !important;
}
 
.dp-nav-ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.07em;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

.dp-nav-ul a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}


/***************** burger nav links font styling ******************/

.dp-nav-ul > li, .dp-nav-ul > div {
	margin: 1rem 0;
}

.dp-nav-ul > li > a, .dp-nav-ul > div > li > a{
	font-size: 1.5rem;
	font-weight: 500;
}

.dp-nav-ul li > a:hover {
	font-weight: 600 !Important;
}

/** submenu styling **/
.dp-submenu {
	margin: 0;
}
.dp-submenu li {
	font-size: 1.25rem !important;
	line-height: 1.6 !important;
}

.dp-submenu li a:hover {
	font-weight: 500 !Important;
}

/*********************** FOOTER ******************''*/

.dp-styling-copyright {
	font-size: 14px;
}


/*********************** ANIMATION ************************/
/* Hide the elements initially */
.dp-animation {
    opacity: 0;
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Class to trigger the animation */
.dp-animation.visible {
    opacity: 1;
    transform: translateY(0); /* Move up to original position */
}

/********************************  kategorisiderne ****************************/

		.subkategori-wrapper {
			background-color: #f2d1c7;
			min-height: 400px;
			display: flex;
			scroll-margin-top: 100px;
			margin-bottom: 3rem;
		}
		.subkategori-wrapper img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
		
		.subkategori-wrapper h2 {
			font-weight: 600;
			margin: 0px !important;
		}
		.subkategori-col-1 {
			flex: 2;
			overflow: hidden;
			position: relative;
		}
		
		.subkategori-col-1 img {
			position: absolute;
		}
		
		.subkategori-col-2 {
			padding: 3rem 4rem;
			flex: 3;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.sub-product-wrapper {
			display: flex;
			gap: 2rem;
			text-align: center;
		}
		.sub-product-wrapper-single {
			display: flex;
			flex-direction: column;
			flex: 1;
			text-align: left;
			justify-content: center;
		}
		.sub-product-wrapper-single {
			font-size: 1rem;
			font-weight: 600;
		}
		.sub-product-wrapper-single h3 {
			margin: 0 !important;
		}
		
/*		.sub-product-wrapper-single .product-button-2{
			margin-top: 1.5rem;
			font-weight: 800 !important;
			color: black !important;
			display: flex;
			justify-content: center !important;
			padding: 0.5rem !important;
			width: auto !important;
			letter-spacing: 2px;
			font-size: 0.9rem;
			background-color: #d9dac1;
		}
		.sub-product-wrapper-single .product-button-2:hover {
    		filter: brightness(0.84);
		}*/


/******************** scrool to adjustment *************************/
/* Default for larger screens */
#billedskole-boern,
#malehold-voksne,
#unge-workshop {
    scroll-margin-top: 15vh; /* 10% of the viewport height */
}


/**************** Fjern info i kurv sidenbaren om levering *******************/
.wc-block-components-totals-item__description {
	display: none !important
}

/******************* HOVER EFFFEKT PÅ NYHEDER SIDEN SE OPSLAGETS SIDE ***************************/
.dp-post-readmore:hover {
	text-decoration: underline !important;
}

/* For medium-sized screens (e.g., tablets) */
@media (max-width: 768px) {
    #billedskole-boern,
    #malehold-voksne,
    #unge-workshop {
        scroll-margin-top: 8vh; /* Adjust margin to 8% of the viewport height */
    }
}

/* For smaller screens (e.g., mobile devices) */
@media (max-width: 480px) {
    #billedskole-boern,
    #malehold-voksne,
    #unge-workshop {
        scroll-margin-top: 5vh; /* Adjust margin to 5% of the viewport height */
    }
}


@media (max-width: 1024px) {
	.subkategori-wrapper {
		flex-direction: column;
	}
	.subkategori-col-1 {
		max-height: 340px;
	}
	
	/* til produkt siderne*/
	.dp-product-columns > .wp-block-post-title {
		font-size: 3rem;
	}
	
	.dp-product-columns .dp-spacers{
		display: none;
	}
	
	.dp-product-columns-image {
		flex-basis: 50% !important;
	}
}
@media (max-width: 768px) {
	.sub-product-wrapper {
		flex-direction: column;
	}
	
	/* til produkt siderne*/
	.dp-product-columns-image {
		display: none;
	}
}