/*
Theme Name:     Pharmacie de Grenus
Theme URI:      https://themeisle.com/themes/neve/
Template:       neve
Author:         Laurent Claudel
Description:    Neve Child Theme
Version:        1.1
Text Domain:    neve
*/


/* ===========================================
// == Theme breakpoints
// ===========================================
Media queries linked to those theme sizes are mobile first because the theme is mobile first
Some extra media queries are desktop first for conveniance
Desktop first also if it's just hiding on mobile
	$mobile-max-width           : 575px;
	$tablet-min-width           : 576px;
	$gutenberg-mobile-max-width : 781px;
	$gutenberg-desktop-min-width: 782px;
	$tablet-max-width           : 959px;
	$desktop-min-width          : 960px;

	Meow masonry 2 col at 800px and 1 col at 600px
// =========================================== */

/* ===========================================
// == Global
// =========================================== */
:root {
	--max-page-content_width: 1000px;
	--wp--preset--font-size--medium: 16px;
	--wp--preset--font-size--large: 28px;
	--btnfs: 16px;
	--primarybtnpadding: 5px 7px;
	--padding-h: 1.5em;
	--max-bloc-width: 1000px;
	@media screen and (min-width: 576px) {
		--btnfs: 20px;
	}
	@media screen and (min-width: 960px) {
		--wp--preset--font-size--medium: 20px;
		--wp--preset--font-size--large: 36px;
		--btnfs: 24px;
		--primarybtnpadding: 9px 11px;
	}
}
a:focus,
a:hover {
	color: var(--nv-primary-accent);
	opacity: 1;
}
h1 {
	background-color: var(--nv-primary-accent);
	color: var(--nv-secondary-accent);
	padding: var(--padding-h);
	text-align: center;
}
/* Boutons */
.wp-block-button.is-style-primary {
	display: flex;
	.wp-block-button__link {
		border-color: var(--nv-primary-accent) !important;
		position: relative;
		padding-right: 28px;
		@media screen and (min-width: 576px) {
			padding-right: 32px;
		}
		@media screen and (min-width: 960px) {
			padding-right: 40px;
		}
		&:after {
			content: "";
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 487.38564032085753 401'%3E%3Cpath d='M216.7906989374467,200.50003002535908L0,401L270.5949313749578,401L487.38564032085753,200.50003002535908L270.5949313749578,0L0,0L216.7906989374467,200.50003002535908Z' fill='black'/%3E%3C/svg%3E");
			mask-repeat: no-repeat;
			mask-size: contain;
			background-color: var(--nv-primary-accent);
			position: absolute;
			width: 18px;
			height: 15px;
			right: 6px;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none;
			@media screen and (min-width: 576px) {
				width: 22px;
				height: 18px;
			}
			@media screen and (min-width: 960px) {
				width: 29px;
				height: 24px;
			}
		}
	}
}

.pharma-p-32 {
	display: flow-root; /* So that blocks of text centered as a block and not line per line */
	text-align: center;
	text-wrap: balance;
	font-size: 20px;
	line-height: 1.4;
	max-width: var(--max-page-content_width);
	margin-left: auto !important;
	margin-right: auto !important;
	@media screen and (min-width: 576px) {
		font-size: 24px;
	}
	@media screen and (min-width: 960px) {
		font-size: 28px;
	}
}
.pharma-no-margin-p-32 .pharma-p-32 {
	margin-bottom: 0;
}
.pharma-link-no-deco a {
	--linkdeco: none !important;
}
.pharma-link-no-color a {
	color: inherit;
}
.pharma-float-left {
	float: none;
	margin-top: -30px;
	margin-bottom: -25px;
	img {
		display: block;
		margin: 0 auto;
		max-height: 140px;
		width: auto;
	}
	@media screen and (min-width: 782px) {
		float: left;
		margin-top: -162px;
		img {
			filter: brightness(0) saturate(100%) invert(100%);
		}
	}
	@media screen and (min-width: 960px) {
		margin-top: -168px;
	}
}
.pharma-group-no-p-margin p {
	margin-bottom: 0;
}
.pharma-plus {
	content: url("images/logo PLUS transparent 60.webp");
	border: none;
	display: block;
	width: 60px;
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.pharma-red {
	color: var(--nv-c-1);
}
.wp-element-caption {
	opacity: 1;
}

/* ===========================================
// == Pages
// =========================================== */
.page {
	h2:not(.pharma-post-style h2) {
		background-color: var(--nv-primary-accent);
		color: var(--nv-secondary-accent);
		padding: var(--padding-h);
		text-align: center;
	}
	h3:not(.pharma-post-style h3) {
		font-size: 22px;
		color: var(--nv-primary-accent);
		text-align: center;
		margin-bottom: 10px;
		@media screen and (min-width: 576px) {
			font-size: 26px;
		}
		@media screen and (min-width: 960px) {
			font-size: 30px;
		}
	}
}
.pharma-post-style {
	max-width: var(--max-page-content_width);
	margin: 0 auto;
}
.page .neve-breadcrumbs-wrapper {
	display: none;
}

/* ===========================================
// == Blog
// =========================================== */
.single .entry-content {
	a:focus,
	a:hover {
		filter: brightness(0.8);
	}
}

/* ===========================================
// == Top Menu
// =========================================== */
.header-top .container {
	@media screen and (max-width: 1150px) {
		font-size: 16px;
	}
}
/* Merge menus on tablet */
.header-main.hide-on-desktop {
	.row--wrapper {
		grid-template-columns: minmax(100px,1fr) auto 1fr;
	}
	.hfg-slot.center {
		.builder-item {
			padding: 0;
		}
	}
}
.pharma-menu {
	flex-direction: column;
	height: 100%;
	color: var(--nv-primary-accent) !important;
}
.pharma-menu-img {
	max-height: 25px;
	max-width: 25px;
	margin: auto 0;
	@media screen and (min-width: 576px) {
		max-height: 30px;
		max-width: 30px;
	}
}
.pharma-menu-text {
	text-align: center;
	margin-top: 5px;
	&:hover {
		text-decoration: underline;
	}
	@media screen and (max-width: 959px) {
		display: none;
	}
}
:where(.pharma-hour-wrap) {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 0;
}
.pharma-hour-left {
	text-align: right;
}
.pharma-hour-right {
	padding-left: 5px;
}
#secondary-menu-desktop-top {
	justify-content: space-around;
	align-items: center;
}
.home-mobile a {
	font-size: 20px;
	font-weight: bold;
	color: var(--nv-primary-accent);
}
@media screen and (max-width: 959px) {
	.menu-item:has(.pharma-hour-wrap) {
		display: none;
	}
}

/* ===========================================
// == Main menu
// =========================================== */
.header-main {
	.has-nav {
		margin: 15px 0;
	}
}
.header-top, .header-main {
	.row--wrapper {
		grid-template-columns: 0 auto 0;
	}
	.hfg-slot.center > .builder-item {
		width: 100%;
	}
}
.menu-menu-container,
.nav-menu-primary {
	/* Doesn't work in customizer for some reason */
	font-size: 1.3em;
	font-weight: 700;
	.primary-menu-ul {
		flex-wrap: nowrap;
		padding-left: 0;
	}
	.menu-item:not(.menu-mobile .menu-item) {
		margin: 0;
		padding: 0 10px;
		border-right: 3px solid var(--nv-primary-accent);
		display: flex;
		flex: 1 1 auto;
		justify-content: center;    /* For WP menu */
		&:last-of-type {
			border: none;
		}
		a {
			text-align: center;
			justify-content: center;    /* For shortcode home menu */
			&:hover {
				text-decoration: underline;
			}
		}
		@media screen and (max-width: 1150px) {
			padding: 0 7px;
		}
	}
	@media screen and (max-width: 1150px) {
		font-size: 1.1em;
	}
}
.hfg_header.site-header {
	box-shadow: none;
}
.navbar-toggle {
	color: var(--nv-primary-accent);
}
.header-menu-sidebar-bg br {
	display: none;
}
/* ===========================================
// == Home page menu
// =========================================== */
.home .header-main.hide-on-mobile {
	display: none;
}
.pharma-home-menu {
	margin: 0 !important;
	padding: 30px 0;
	background-color: var(--nv-primary-accent);
	.menu-item {
		color: var(--nv-secondary-accent);
		border-color: var(--nv-secondary-accent) !important;
		a {
			--linkdeco: none;
		}
	}
}

/* ===========================================
// == Accueil
// =========================================== */
.home h1.has-background {
	font-size: clamp(36px, 7.1vw, 68px);
	margin-top: 25px;
	margin-bottom: 30px;
	padding: 0.45em;
	@media screen and (min-width: 576px) {
		margin-top: 85px;
		margin-bottom: 50px;
	}
	@media screen and (min-width: 782px) {
		margin-top: 75px;
		margin-bottom: 100px;
	}
}
.pharma-home-h1-space {
	height: 100px;
}
@media screen and (max-width: 575px) {
	.wp-block-cover__image-background {
		margin-top: -25px !important;
	}
}
.pharma-home-button {
	--btnfs: 16px;
	--primarybtnpadding: 0px 8px;
	@media screen and (min-width: 960px) {
		--btnfs: 20px;
	}
	column-gap: 1em;
	row-gap: 20px;
	.wp-block-buttons {
		width: 100%;
		@media screen and (max-width: 782px) {
			max-width: 300px;
		}
	}
	.wp-block-button__link {
		min-height: 68px;
	}
}
.wp-block-button.pharma-button-red .wp-block-button__link {
	color: var(--nv-c-1);
	border-color: var(--nv-c-1) !important;
	&:after {
		background-color: var(--nv-c-1);
	}
}
.pharma-vaccin > .wp-block-tiptip-hyperlink-group-block {
	flex-basis: 200px;
	font-size: 20px;
	@media screen and (min-width: 960px) {
		flex-basis: 230px;
		font-size: 24px;
	}
	.wp-block-image {
		max-width: 150px;
		margin: auto;
	}
}
.pharma-vaccin-button {
	height: 4em;
}
.pharma-vaccin-text {
	padding: 0 1em;
	text-wrap: balance;
	color: initial !important;
}

/* ===========================================
// == Gallery Cosmetiques
// =========================================== */
.pharma-cosmetiques {
	--max-cosmetiques-width: var(--max-bloc-width);
	@media screen and (max-width: 800px) {
		--max-cosmetiques-width: calc( var(--max-bloc-width) / 3 * 2 );
	}
	@media screen and (max-width: 600px) {
		--max-cosmetiques-width: calc( var(--max-bloc-width) / 3 );
	}
	max-width: var(--max-cosmetiques-width);
	margin: 0 auto !important;
	.mgl-img-container {
		display: flex;
		img {
			max-width: 350px;
			margin: 0 auto;
		}
	}
}

/* ===========================================
// == Page vaccination
// =========================================== */
.pharma-float-left + .pharma-p-32 {
	margin-top: 50px;
}

/* ===========================================
// == Footer
// =========================================== */
.site-footer a {
	color: inherit;
	--linkdeco: underline;
}
.footer-bottom {
	display: none;
}
.pharma-footer {
	padding-left: 0;
	padding-right: 0;
	@media screen and (max-width: 575px) {
		.pharma-p-32 {
			font-size: 18px;
		}
	}
}
@media screen and (max-width: 330px) {
	.pharma-neg-margin {
		margin-left: -15px !important;
		margin-right: -15px !important;
	}
}

/* ===========================================
// == Contact form
// =========================================== */
.wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.wpcf7-form-control-wrap {
	display: inline-block;
	flex-basis: 100%;
	&:has(.half-width) {
		flex: 1;
	}
	.wpcf7-form-control:not(.wpcf7-acceptance) {
		width: 100%;
		border: none;
		background-color: #eee;
		color: #000;
	}
}
.wpcf7-spinner {
	margin-right: 0;
}
.wpcf7-list-item {
	margin: 0;
}
.pharma-send {
	flex: 1;
	align-items: center;
	.wpcf7-submit {
		flex: 1;
	}
}

/* ===========================================
// == Slider
// =========================================== */
.pharma-slider-wrap {
	display: flex;
	justify-content: center;
	margin: 10px -15px;
	@media screen and (min-width: 576px) {
		margin: 50px 0 20px 0;
	}
	@media screen and (min-width: 960px) {
		margin: 80px 0 50px 0;
	}
}
.pharma-slider-container {
	overflow: hidden;
	position: relative;
	max-width: var(--max-bloc-width);
}
.pharma-slider {
	display: flex;
	align-items: center;
	position: relative;
	transition: left 0.3s ease-in-out;
	flex-wrap: nowrap;
	gap: 0 !important;
	height: 100%;
	.wp-block-image {
		max-height: calc( var(--max-bloc-width) / 2 + 50px);
		width: 50%; /* Because 2 images width */
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		img {
			object-fit: contain;
			padding: 0 5px;
			transition: transform 0.3s ease-in-out;
			height: 100%;
		}
		.wp-element-caption {
			opacity: 0;
			width: 200%;
			text-align: center;
			line-height: 20px;
			transition: opacity 0.3s ease-in-out;
		}
	}
}
.pharma-slide-nav {
	flex-shrink: 0;
	flex-basis: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	img {
		cursor: pointer;
	}
	@media screen and (min-width: 576px) {
		flex-basis: 60px;
	}
	@media screen and (min-width: 782px) {
		flex-basis: 80px;
	}
}
.pharma-slide-prev {
	transform: rotate(-90deg);
}
.pharma-slide-next {
	transform: rotate(90deg);
}

/* ===========================================
// == Blog
// =========================================== */
.blog .entry-title a,
.blog .excerpt-wrap a {
	color: var(--nv-primary-accent);
	&:hover {
		text-decoration: underline;
	}
}

/* ===========================================
// == Pagination
// =========================================== */
ul.page-numbers {
	justify-content: center;
	a:hover {
		background-color: var(--nv-primary-accent);
		color: var(--nv-text-dark-bg);
	}
}