/*
	Theme Name: MadameHiver
	Author:       Guillaume MAUGER
	Author URI:   https://gmauger.dev
	Description: Le theme pour Madamehiver.com
	Version: 1.0
*/

/*
MARK: CSS RESET
*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	line-height: 110%;
	background-color: var(--secondary);
	color: var(--text);
	font-family: 'Courier Prime';
}
/*fixing bar on mobile*/
#wpadminbar{
	position:fixed;
	top:0;
	left:0;
	width:100%;
}


/*
MARK: COLORS
*/
:root{
	--primary: #A74500;
	--secondary: #ECDED3;
	--text: #0d0d0d;
	--text-alt: #616161;
	--marge-laterale: calc(32px + 128 * ((100vw - 400px) / 1520));
}



/*
MARK: FONTS
*/

/*
TITLE
vampiro-one-regular - latin
*/
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Vampiro One';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/vampiro-one-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
SUB-TITLE
poiret-one-regular - latin
*/
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poiret-one-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
TEXT
courier-prime-regular - latin
*/
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/courier-prime-v11-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* courier-prime-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/courier-prime-v11-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* courier-prime-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/courier-prime-v11-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* courier-prime-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Courier Prime';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/courier-prime-v11-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

p{
	font-family: 'Courier Prime';
	line-height: 140%;
}

h1,h2,h3,h4{
	font-family: "Vampiro One";
	color: var(--primary);
	margin: 0;
	line-height: 140%;
}
h1{
	font-size: clamp(2rem, calc(4vw + 0.9rem), 4rem); /* 32 - 64px */
}
h2{
	font-size: clamp(1.625rem, calc(3vw + 0.9rem), 3rem); /* 26 - 48px */
}
h3{
	font-size: clamp(1.25rem, calc(2vw + 0.9rem), 2rem); /* 20 - 32px */
}
h4{
	font-size: clamp(1.125rem, calc(1vw + 0.9rem), 1.5rem); /* 18 - 24px */
}

.subtitle-h1,.subtitle-h2,.subtitle-h3,.subtitle-h4{
	font-family: "Poiret One";
	color: var(--text);
}
.subtitle-h1{
	font-size: clamp(1.625rem, calc(2vw + 0.9rem), 3rem); /* 26 - 48px */
}
.subtitle-h2{
	font-size: clamp(1.25rem, calc(1vw + 0.9rem), 2rem); /* 20 - 32px */
}
.subtitle-h3{
	font-size: clamp(1.125rem, calc(1vw + 0.9rem), 1.5rem); /* 18 - 24px */
}
.subtitle-h4{
	font-size: clamp(1rem, calc(1vw + 0.9rem), 1.25rem); /* 16 - 20px */
}


/* 
MARK: PAGE WRAPPER
ensure full page heigh even if empty
*/
#page-top{
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height,0));
}



/*
MARK: Header
*/
#pre-header{
	/* menu height */
	margin-top: 83px;
	position: relative;

	@media all and (min-width: 1000px) {
		#site-navigation{
			padding: 10px var(--marge-laterale);
			justify-content: center;
		}
	}
}
.site-header {
	display: flex;
	padding: 32px var(--marge-laterale) 64px var(--marge-laterale);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	
	h1{
		line-height: 100%;
	}

	.hero-image{
		border-radius: 20px;
		height: 300px;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
}


/*
MARK: MENU GENERALS
*/
.menu{
	li{
		a{
			text-decoration: none;
			color: var(--secondary);

			&:hover{
				color: var(--text);
			}
		}
	}
}


/*
MARK: MAIN MENU
*/
.main-navigation {
	z-index: 9999;
	position: fixed;
	top: var(--wp-admin--admin-bar--height,0);
	left: 0;
	width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
	background-color: var(--primary);

	.logo-container {
		img {
			height: 48px;
			width: auto;
		}

		@media all and (min-width: 1000px) {
			position: absolute;
			left: var(--marge-laterale);
		}
	}

	.menu-toggle {
		display: block;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0.5rem;
		position: relative;
		z-index: 1001;

		.hamburger-icon {
			display: block;
			width: 25px;
			height: 4px;
			background-color: var(--secondary);
			position: relative;
			transition: background 0.3s ease-in-out;
		}

		.hamburger-icon::before,
		.hamburger-icon::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 4px;
			background-color: var(--secondary);
			left: 0;
			transition: transform 0.3s ease-in-out;
		}
		.hamburger-icon::before {
			top: -8px;
		}
		.hamburger-icon::after {
			bottom: -8px;
		}

		@media all and (min-width: 1000px) {
			display: none;
		}
	}

	#primary-menu-container {
        position: fixed;
        top: var(--wp-admin--admin-bar--height,0);
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--wp-admin--admin-bar--height,0));
        background-color: var(--primary);
        z-index: 1000;
        display: flex;
		flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s 0.5s;
		padding: 16px;
		gap: 32px;

		.menu-title{
			color: var(--secondary);
		}

		>div{
			width: 100%;
			height: 100%;
			
			overflow-y: auto;
			overflow-x: hidden;

			ul{
				display: flex;
				flex-direction: column;
				list-style: none;
				gap: 1.5rem;
				width: 100%;
				margin-bottom: 32px;

				li{
					border-bottom: 1px solid var(--secondary);
					width: 100%;

					&.current_page_item{
						border-bottom: 1px solid var(--text);
					}
				}
			}

			a {
				font-family: 'Courier Prime';
				font-size: 1rem; /* 16 px */
				padding-top: 8px;
				padding-bottom: 8px;
				width: 100%;
				display: inline-block;
			}
		}

		@media all and (min-width: 1000px) {
			top:unset;
			left:unset;
			position: relative;
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
			transition: none;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: auto;
			height: auto;
			padding: 0 16px;
			/* marge + logo */
			margin-left: calc(var(--marge-laterale) + 100px);
			margin-right: var(--marge-laterale);
			background-color: unset;


			.menu-title{
				display: none;
			}
			>div{
				width: auto;
				height: auto;

				overflow-y: unset;
				overflow-x: unset;

				ul{
					flex-grow: 1;
					display: flex;
					flex-direction: row;
					border: none;
					justify-content: center;
					align-items: center;
					gap: 0.5rem;
					margin-bottom: 0;

					li{
						border: none;
						&.current_page_item{ 
							border:none;
							a{
								border-color: var(--secondary);
							}
						}
					}
				}

				a{

					border: 1px solid transparent;
					border-radius: 999px;

					display: flex;
					padding: 6px 12px;
					justify-content: center;
					align-items: center;

					&:hover{
						background-color: var(--secondary);
					}
				}
			}
		}
    }

	&.toggled {
		#primary-menu-container {
			opacity: 1;
			visibility: visible;
			transform: translateX(0);
			transition: transform 0.5s ease, opacity 0.5s ease;
		}

		/* Hamburger to X animation */
		.hamburger-icon::after {
			transform: rotate(-45deg) translate(5px, -6px);
		}
		.hamburger-icon {
			background: transparent;
		}
		.hamburger-icon::before {
			transform: rotate(45deg) translate(5px, 6px);
		}
	}
}

/*
lock scrolling
*/
body:has(.main-navigation.toggled){
	overflow: hidden;
}
    

/*
MARK: ROLLING BANNER
Plugin CPT 
*/
.rollingbanner{
	background-color: var(--text);
	color: var(--secondary);
	padding: 16px 0;
}


/*
MARK: INFO BANNER
Plugin CPT 
*/
.gmd-infobanner{
	padding: 16px;
	background-color: #E60000;
	color: #FFF;

	.swiper-button-next,
	.swiper-button-prev{
		color: #FFF;
		&:hover{
			color: #000;
		}
	}
}


/*
MARK: SITE CONTENT
*/
.site-content{
	margin: 0 var(--marge-laterale);
	/* ensure full page */
	flex-grow: 1;
}


/*
MARK: FOOTER
*/
.site-footer{
	background-color: var(--primary);
	color: var(--secondary);
	padding: 24px var(--marge-laterale);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	/* font-size: 1.25rem; */

	hr{
		width: 100%;
		border: 1px solid var(--secondary);
	}

	ul{
		list-style: none;
	}

	.copyright{
		text-align: center;

		span{
			text-wrap: nowrap;
		}
	}

	#footer-navigation{
		ul{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 8px;

			li{
				border: none;
				&.current_page_item{ 
					border:none;
					a{
						border-color: var(--secondary);
					}
				}
			}

			a{
				border: 1px solid transparent;
				border-radius: 999px;

				display: flex;
				padding: 6px 12px;
				justify-content: center;
				align-items: center;

				&:hover{
					background-color: var(--secondary);
				}
			}

			@media all and (min-width: 1000px) {
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
	}

	#socials{
		ul{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 16px;

			.instagram a,
			.facebook a{
				display: inline-block;
				position: relative;
				width: 48px;
				height: 48px;
				overflow: hidden;
				text-indent: 100%;
				white-space: nowrap;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
					display: block;
				}

				@media all and (min-width: 1000px) {
					width: 36px;
					height: 36px;
				}
			}

			.instagram a {
				&::before{
					background-image: url('assets/imgs/insta icon_s.svg');
				}
				&:hover::before{
					background-image: url('assets/imgs/insta icon.svg');
				}
			}
			.facebook a {
				&::before{
					background-image: url('assets/imgs/facebook icon_s.svg');
				}
				&:hover::before{
					background-image: url('assets/imgs/facebook icon.svg');
				}
			}
		}
	}
}


/*
MARK: FAQ
Plugin CPT 
*/
.gmd-faq-container{
	details{
		interpolate-size: allow-keywords;
		border: none;
		border-bottom: 2px solid var(--primary);
		border-radius: 0;

		summary{
			font-family: "Vampiro One";
			color: var(--text);
			margin: 0;
			line-height: 110%;
			font-size: clamp(1.25rem, calc(2vw + 0.9rem), 2rem); /* 20 - 32px */
			padding: 16px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;

			&::marker{
				display: none;
				content: '';
				list-style: none;
			}

			&::after{
				display: block;
				content: '';
				background-image: url('assets/imgs/Arrow Down.svg');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				width: 24px;
				height: 24px;
				transform: rotateZ(0deg);
			}
		}
		.faq-content{
			padding: 32px 64px 32px 32px;
		}
		&::details-content {
			block-size: 0;
			overflow: hidden;
			transition: content-visibility, block-size;
			transition-duration: 750ms;
			transition-behavior: allow-discrete;
		}
		&[open]{
			&::details-content {
				block-size: auto;
			}
			summary::after{
				transform: rotateZ(180deg);
			}
		}
	}

	.faq-category-title{
		border:none;
	}
}