/**
Theme Name: Futs & Co
Author: Malik MONDESIR
Author URI: https://mondesirm.github.io/portfolio
Description: Thème enfant d'Astra pour le site de Futs & Co.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/** GLOBAL */
:root { --ac-time: .5s; interpolate-size: allow-keywords; }

/* @view-transition { navigation: auto; } */
/* @view-transition { navigation: auto; types: slide, forwards; } */
@keyframes marquee { 100% { transform: translate(-100%, 0); } }
@keyframes pulse-border { to { opacity: 0; transform: scale(1.5); } }
/* @keyframes to-left { to { opacity: 0; transform: translateX(-75px); } } */
/* @keyframes from-right { from { opacity: 0; transform: translateX(75px); } } */
::view-transition-group(root) { animation: none; }
/* ::view-transition-old(root) { animation: var(--ac-time) both to-left ease; } */
/* ::view-transition-new(root) { animation: var(--ac-time) both from-right ease; } */
@keyframes bg-scroll-up { 0% { background-position: var(--bg-position) var(--bg-position); } }
@keyframes bg-scroll-down { 100% { background-position: var(--bg-position) var(--bg-position); } }

/** HEADER */
.ast-header-sticked { box-shadow: 0 0 10px var(--ast-global-color-8); }

/* .site-title a,
.menu-text { text-shadow: -1px -1px #222, 1px -1px #222, -1px 1px #222, 1px 1px #222; } */

nav#primary-site-navigation-desktop { width: max-content; }

/** BUTTONS */
.menu-toggle:focus,
.menu-toggle:hover,
.menu-toggle.toggled {
  background: var(--ast-global-color-4) !important;

  * { fill: var(--ast-global-color-0) !important; }
}

/** TABS */
body.single-mapster-wp-location .uagb-tabs__panel {
  position: absolute;
  gap: 0px;
  z-index: 2;
  translate: 0 -15px;
  min-width: calc(50% - 6px);
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  padding-inline: 25px !important;

  @media (max-width: 767px) {
    min-width: 100%;
  }

  .uagb-tab {
    flex: 1;
    margin: 0 !important;
  }
}

/** FORMS */
.srfm-block {
  position: relative;

  .srfm-block-label { transition: var(--ac-time); }

  &:has(.srfm-input-common:placeholder-shown) .srfm-block-label {
    opacity: 0;
    translate: 0.8em 2.5em;
  }

  &:has(.srfm-input-common[type=tel]:placeholder-shown) .srfm-block-label {
    transform: translateX(2.6em);
  }
}

/** CUSTOM DESIGN */
h1, h2, h3, h4, h5, h6, .ac-balance { text-wrap-style: balance; }

#ast-scroll-top {
	transition: var(--ac-time) allow-discrete;

	&[style*="display: none"] { opacity: 0; }
}

.ac-hover {
  transition: var(--ac-time);

  &:hover {
    scale: .95;
    backdrop-filter: blur(3px);
  }
}

.ac-sticky {
  position: sticky;
  top: calc(20px + var(--ac-header-height));
}

.map-popup-footer-button,
.menu-toggle:not(.toggled),
.ast-custom-button,
.ast-outline-button,
.ac-pulse,
.uagb-infobox-cta-link {
	border-width: 2px !important;
	border-style: solid !important;
	text-transform: uppercase !important;
	transition: var(--ac-time) !important;
	font-family: 'DM Sans', sans-serif !important;

	&:not(:hover) {
		box-shadow: 4px 4px;
	}
}

.ac-pulse:hover {
	transition: var(--ac-time);
	background: var(--ast-global-color-3);

	* { fill: #DCA54A; }
}

/** MAPS */

.mapster-hover-popup,
.mapster-list-control {
  backdrop-filter: blur(2px) !important;
  background-color: #ffffffb3 !important;
}

/** VIEW TRANSITIONS */
.menu-item, .current-menu-item {
    position: relative;

    &::after {
        content: '';
        top: 0;
        height: 3px;
        background: #FFF;
        position: absolute;
        transition: var(--ac-time);
        view-transition-name: current-menu-item;

        @starting-style { width: 0; }
    }
}

.menu-item:hover::after,
.current-menu-item::after {
	width: 100%;
}

img[alt='fut bleu 60'] { view-transition-name: fut-bleu-60; }
img[alt='fut bleu 120'] { view-transition-name: fut-bleu-120; }
img[alt='fut bleu 208'] { view-transition-name: fut-bleu-208; }
img[alt='fut bleu 220'] { view-transition-name: fut-bleu-220; }
img[alt='fut noir'] { view-transition-name: fut-noir; }
img[alt='fut orange'] { view-transition-name: fut-orange; }

.sc-product-item img,
.wp-block-surecart-product-media {
	view-transition-name: product-image;
}

.wp-block-surecart-product-title {
	view-transition-name: product-title;
}

.wp-block-surecart-product-scratch-price,
.wp-block-surecart-product-selected-price-scratch-amount {
	view-transition-name: product-price-scratch;
}

.wp-block-surecart-product-list-price,
.wp-block-surecart-product-selected-price-amount {
	view-transition-name: product-price;
}

/** GLOBAL */
:root { --ac-time: .35s; }
*::-webkit-scrollbar { width: 5px; }
*::-webkit-scrollbar-thumb { border-radius: 5px; box-shadow: inset 0 0 5px var(--ast-global-color-1); }

@view-transition { navigation: auto; types: slide, forwards; }
@keyframes marquee { 100% { transform: translate(-100%, 0); } }
@keyframes pulse-border { to { opacity: 0; transform: scale(1.5); } }
@keyframes to-left { to { opacity: 0; transform: translateX(-75px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(75px); } }
::view-transition-old(root) { animation: var(--ac-time) both to-left ease; }
::view-transition-new(root) { animation: var(--ac-time) both from-right ease; }
@keyframes bg-scroll-up { 0% { background-position: var(--bg-position) var(--bg-position); } }
@keyframes bg-scroll-down { 100% { background-position: var(--bg-position) var(--bg-position); } }

/** HEADER */
/* .site-header { z-index: 1000 !important; } */
/* #primary, .widget { margin: 0 !important; } */
/* .ast-header-sticked { box-shadow: 0 0 10px var(--ast-global-color-1); } */
/* #masthead:has(+ #content .post-13) { width: 100%; position: absolute; } */
/* .site-header-section > *, .ast-site-identity { padding: 0 !important; } */
/* [data-section="sidebar-widgets-header-widget-1"] > :last-child { display: none; } */
/* .ast-off-canvas-active body.ast-main-header-nav-open { overflow: hidden !important; } */
/* .ast-header-sticked a:not(:hover) { text-shadow: 0 0 10px var(--ast-global-color-0); } */
/* #masthead .ast-container, .site-header-focus-item + .ast-breadcrumbs-wrapper { padding-inline: 15px; } */
/* [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill { height: auto; } */

/** BUTTONS */
/* .menu-toggle-close:focus { border: none !important; } */
/* .uagb-popup-builder__close { padding: 10px !important; } */
/* .menu-toggle:focus, .ast-menu-toggle:focus { outline: none !important; } */
.wp-block-button a, .ac-pulse * { transition: var(--ac-time) !important; }

/** ARCHIVES */
/* .display-grid, .ast-row {
	row-gap: 20px;
	column-gap: 20px;
	display: grid !important;
	grid-template-columns: auto auto auto;
} */

/* .display-grid > *, .ast-row > article { margin: 0 !important; } */
/* .ast-separate-container .ast-article-inner { background: none; } */
/* .ast-separate-container .ast-article-post:not(:hover) { box-shadow: none; } */
/* .ast-separate-container .ast-article-post { transition: .2s; border-radius: 6px; background-size: 100%; background-position: center; background-repeat: no-repeat; } */

/** SITEMAP */
/* .aioseo-html-sitemap { gap: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } */

/** DEBUG */
[contenteditable=true] { outline: 1px dashed var(--ast-global-color-1); }

#ac-dialog {
	padding: 0;
	max-width: 80vw;
	min-width: 500px;
	/* max-height: 80vh; */
	overflow: hidden;
	background: var(--ast-global-color-5);

	a *, button * { pointer-events: none; }
	> :not(ul, aside) { gap: 2em; padding: 1em; }
	.slider *, img { transition: var(--ac-time); }
	> header { top: 0; div { min-width: 120px; } input { width: 100%; } }

	> :is(header, footer, aside) {
		bottom: 0;
		display: flex;
		position: sticky;
		align-items: center;
		text-align-last: center;
		justify-content: space-between;
		color: var(--ast-global-color-3);
		background: var(--ast-global-color-4);
	}

	> aside {
		overflow-x: auto;
		justify-content: start;

		> * { background: initial; }
		> *:hover { background: #fff1; }
		/* > *:nth-child(n+3)::before { content: '\1f4c1'; } */
		/* > *:nth-child(n+3).active::before { content: '\1f4c2'; } */
		> *.active { background: var(--ast-global-color-0); color: var(--ast-global-color-4); }
	}

	> main {
		gap: 1em;
		display: grid;
		overflow: hidden;
		grid-template-columns: repeat(auto-fill, minmax(calc(var(--ac-cols, 5) * 24px), 1fr));

		> *:hover { background: #fff2; }
		> * { cursor: pointer; background: #fff1; }
	}

	.ui-autocomplete { max-height: 50%; overflow: hidden auto; }
	.ui-slider-handle {
		line-height: 1;
		counter-reset: ac-cols var(--ac-cols, 5);

		&::after { content: counter(ac-cols); }
	}
}

/** 404 */
/* .error-404 .page-title { font-size: 50px; } */
/* .ast-404-search { text-align: -webkit-center; } */

/** CONTAINERS */
#page .entry-content > .wp-block-uagb-container {
	transition: background-size var(--ac-time), transform var(--ac-time);

	&[style*=contain]:hover { transform: scale(.9); }

	&.uagb-position__sticky {
		transition: background-size var(--ac-time), transform var(--ac-time), box-shadow var(--ac-time) !important;
	}

	.ast-primary-sticky-header-active & .uagb-position__sticky--stuck {
		transform: translateY(calc(var(--ac-header-height)));
	}

	body:is(.search, .error404) #primary:not(&), &.uagb-is-root-container:last-child {
		padding-bottom: 187px;

		@media only screen and (max-width: 976px) {
			padding-bottom: 156px;
		}

		@media only screen and (max-width: 767px) {
			padding-bottom: 176px;
		}
	}
}

/** FORMS */
/* .uagb-forms-main-form {
	display: grid;
	column-gap: 5px;
	grid-template-areas: '. .' 'e e' 'p p' 't t';

	.uagb-forms-email-wrap { grid-area: e; }
	.uagb-forms-phone-wrap { grid-area: p; }
	.uagb-forms-textarea-wrap { grid-area: t; }
	.uagb-form-phone-country { width: 12ch !important; }

	@media (min-width: 480px) { grid-template-areas: '. .' 'e p' 't t'; }
} */

/** INSTAGRAM */
/* div:has(> .spectra-ig-feed__media-thumbnail:not([src*=instagram])) {
	background: #000000bf;
	img { visibility: hidden; }

	&::before {
		width: 100%;
		height: 100%;
		position: absolute;
		text-align: center;
		content: 'Diaporama';
		align-content: center;
	}
} */

/** LATEPOINT */
.latepoint-resources-items-w .resource-item {
    height: auto;
}

/** CUSTOM DESIGN */
h1, h2, h3, h4, h5, h6, .ac-balance { text-wrap: balance; }
.ac-clamp { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; line-clamp: var(--lines, 1); }

.ac-marquee {
	overflow: hidden;
	white-space: nowrap;

	> * {
		padding-left: 100%;
		display: inline-block;
		animation: marquee 30s linear infinite;
	}
}

.ac-pulse {
	cursor: pointer;

	&::before {
		z-index: 0;
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 15px 0;
		pointer-events: none;
		background: var(--ast-global-color-5);
		border: 2px solid var(--ast-global-color-0);
		animation: pulse-border 1.5s ease-out infinite;
	}

	&:hover {
		> span, &::before, path {
			fill: var(--ast-global-color-5);
			background: var(--ast-global-color-1);
			border-color: var(--ast-global-color-1);
		}
	}
}

#page .ac-loop-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ast-global-color-0);

	div:has(&) { z-index: 1; }
	&.first { top: -18px; left: -18px; position: absolute; }
	&.last { right: -18px; bottom: -18px; position: absolute; }
	&::after { top: 8px; left: 8px; content: ''; width: 16px; height: 16px; position: absolute; border-radius: 50%; background: var(--ast-global-color-1); }
}

.ac-loop .uagb-loop-post {
	&:nth-child(2n) .ac-loop-txt { border-left-width: 4px; border-bottom-width: 4px; }

	&:nth-child(2n - 1) {
		.ac-loop-row { flex-direction: row-reverse; }
		&:last-child .ac-loop-img { border-bottom-width: 0; }
		.ac-loop-img { border-right-width: 4px; border-bottom-width: 4px; }

		@media (max-width: 767px) {
			&:last-child .ac-loop-txt { border-bottom-width: 0; }
			.ac-loop-txt { border-right-width: 4px; border-bottom-width: 4px; }
		}
	}

	&:nth-last-child(1) * { border-bottom-width: 0; }
}

.ac-hover, .ac-zoom > *, .ac-toggle {
	background-size: auto 100% !important;
	&:hover { background-size: auto 120% !important; }
	&, &::before, * { transition: var(--ac-time) !important; }
}

.ac-zoom {
	> :hover .-shrink { scale: .5; }
	> :not(:hover) > * { translate: 0 100%; }
}

.ac-toggle {
	&:hover svg { opacity: 0; }
	.uagb-ifb-title { text-shadow: 0 0 10px #000; }
	&:not(:hover) p { color: transparent !important; }
	&:not(:hover)::before { background: none !important; }
    &:not(:hover) .wp-block-uagb-info-box { height: 100%; }

	svg {
		scale: 2;
		position: absolute;
		bottom: calc(50% - 50px);
	    animation: pulse-border 1.5s ease-out infinite alternate;
	}

	@media only screen and (max-width: 768px) {
		&:focus-within a:hover { pointer-events: none; }
	}
}

/** DYNAMIC CONTENT */
[data-ac-dynamic] { font-weight: bold; }
[data-ac-dynamic]:empty { display: none; }
:has(> [data-ac-dynamic]) { text-wrap: balance; }
h1:has([data-ac-dynamic]:not(:empty)) { font-size: min(4em, 8vw); }