/* 
Theme Name: Adimer - Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child Theme
Author: Adimer Srl
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
:root {
    --bg: #fafafa;
    --primary: #739600;
    --secondary: #452325;
    --hover: #4A6100;
    --shade: #e0ded8;
    --text: #110909;
}
  */

.admin-bar header {
  margin-top: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar header {
    margin-top: 46px;
  }
}

/* !---------
! SETUP 
! ---------*/
:root {
  /* scala 1-2: padding interni/gap ravvicinati */
  --space-1: clamp(
    0.5rem,
    0.33vw + 0.424rem,
    0.75rem
  ); /* mobile 8px → desktop 12px */
  --space-2: clamp(
    0.75rem,
    0.33vw + 0.674rem,
    1rem
  ); /* mobile 12px → desktop 16px */

  /* scala 3-4: padding di card/bottoni */
  --space-3: clamp(
    1rem,
    0.65vw + 0.847rem,
    1.5rem
  ); /* mobile 16px → desktop 24px */
  --space-4: clamp(
    1.5rem,
    0.65vw + 1.347rem,
    2rem
  ); /* mobile 24px → desktop 32px */

  /* scala 5-6: padding di sezioni/blocchi */
  --space-5: clamp(
    2rem,
    1.31vw + 1.694rem,
    3rem
  ); /* mobile 32px → desktop 48px */
  --space-6: clamp(
    3rem,
    1.31vw + 2.694rem,
    4rem
  ); /* mobile 48px → desktop 64px */

  /* scala 7: spaziatura tra sezioni principali */
  --space-7: clamp(4rem, 2.61vw + 3.3875rem, 6rem);

  --fs-h1: clamp(2.5rem, 1.73rem + 3.27vw, 5rem);
  --fs-h2: clamp(2.18rem, 1.51rem + 2.84vw, 4.35rem);
  --fs-h3: clamp(1.89rem, 1.31rem + 2.48vw, 3.79rem);
  --fs-h4: clamp(1.65rem, 1.14rem + 2.15vw, 3.3rem);
  --fs-h5: clamp(1.44rem, 1rem + 1.88vw, 2.87rem);
  --fs-body: clamp(1rem, 0.962rem + 0.163vw, 1.125rem);
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
body {
  font-family: "century-gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.2 !important;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.1 !important;
}
h4,
h5,
h6 {
  font-size: var(--fs-h4);
  line-height: 1.3;
}
h5,
h6 {
  font-size: var(--fs-h5);
}

p,
a {
  font-size: var(--fs-body);
  line-height: 1.4;
}
.exalted {
  font-size: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
}
.miniature {
  font-size: 13px;
  text-transform: uppercase;
}

*:focus-visible {
  outline-color: var(--secondary);
}
.e-con-inner {
  max-width: calc(var(--content-width) - 5vw) !important;
}
header .site-brand {
  z-index: 99999999999 !important;
}
.site-brand a {
  display: flex !important;
}
header .site-brand svg {
  width: 100% !important;
  max-width: 14vh !important;
  height: auto !important;
}
@media (min-width: 577px) {
  header:has(.burger a[aria-expanded="true"]) .invert {
    fill: var(--bg);
  }
}

/* ?---------
? Helpers
? ---------*/
[data-link="privacy-policy"] a {
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
}
::placeholder {
  color: #999 !important;
  font-family: "Questrial", Sans-serif !important;
  letter-spacing: 1% !important;
  opacity: 66% !important;
}
.accent {
  position: relative;
  margin-left: 26px !important;
}
.accent::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: -2px;
  left: -31px;
  width: 24px;
  height: 24px;
  border: 0.25rem solid var(--primary);
  transform: scale(0.5);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 40% 100%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #00000033 0%, #000000c9 100%);
}
.banner-cover {
  position: relative;
}
.banner-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #00000099;
}
.dotted:before {
  content: "";
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  top: 5px;
  right: 0;
  width: 14px;
  height: 14px;
  border: 0.15rem solid var(--text);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 40% 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #739600 0%, #452325 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1100px) {
  .koala-d-none {
    display: none !important;
  }
}
@media (min-width: 1100px) {
  .margin-r-special {
    margin-right: clamp(
      32.8px,
      32.8px + (200 - 32.8) * ((100vw - 992px) / (1600 - 992)),
      200px
    ) !important;
  }
}

/* ?---------
? Buttons
? ---------*/
.site-btn {
  background: linear-gradient(to right, #7a9a2e 0%, #4a6100 50%, #7a9a2e 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition:
    background-position 0.5s ease,
    transform 0.25s ease,
    box-shadow 0.2s ease;
}

.site-btn:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2);
}

.btn-label {
  white-space: nowrap;
}
/* ?---------
? Header
? ---------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition:
    background-position 0.5s ease,
    transform 0.35s ease;
}
.scrolled {
  background-color: var(--bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
/* BURGER */
@media (min-width: 769px) {
  .wrap-burger {
    display: none !important;
  }
}
.wrap-burger {
  z-index: 99999999999 !important;
}
.wrap-burger .burger-label-menu,
.wrap-burger .burger-label-chiudi {
  display: inline-block;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center;
}
.wrap-burger .burger-label-chiudi {
  position: absolute;
  opacity: 0;
  transform: rotateX(90deg);
}
.wrap-burger:has(.burger a[aria-expanded="true"]) .burger-label-menu {
  opacity: 0;
  transform: rotateX(-90deg);
}

.wrap-burger:has(.burger a[aria-expanded="true"]) .burger-label-chiudi {
  opacity: 1;
  transform: rotateX(0deg);
}
svg path:where(.line-1, .line-2, .line-3) {
  stroke: var(--text);
}
svg rect.rect-1 {
  stroke: var(--text);
}

.burger .line-1,
.burger .line-2,
.burger .line-3 {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.burger a[aria-expanded="true"] .line-1 {
  transform: translate(-5.75px, 22px) rotate(45deg);
}

.burger a[aria-expanded="true"] .line-2 {
  transform: translate(-5.75px, -20px) rotate(-45deg);
}

.burger a[aria-expanded="true"] .line-3 {
  opacity: 0;
  transform: scaleX(0.5);
}

/* MENU */

.e-n-menu-title a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
}

.e-n-menu-title a::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border: 0.15rem solid var(--primary);
  opacity: 0;
  transform: scale(0.5);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 40% 100%);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.e-n-menu-title a:hover::after,
.e-n-menu-title.e-current a::after {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 768px) {
  .e-n-menu-title a::after {
    top: 12px;
    right: 0;
    width: 20px;
    height: 20px;
  }
}
/* ?---------
? Bullet per carousel nativo di elementor
? ---------*/
.swiper-pagination {
  top: unset !important;
  bottom: -24px !important;
}
.swiper-pagination-bullet {
  display: inline-flex !important;
  width: 40px !important;
  height: 3px !important;
  background-color: #d9d9d9 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition:
    background-color 0.3s ease,
    width 0.3s ease !important;
}
.swiper-pagination-bullet-active {
  background-color: #1a1a1a !important;
  width: 60px !important;
}
/* ?---------
? Bullet per carousel custom gestiti in js il wrapper e nel builder
? ---------*/
.bullet-wrapper {
  display: flex;
  gap: 8px;
}

.bullet-custom {
  display: inline-flex;
  width: 40px;
  height: 3px;
  background-color: #d9d9d9;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    width 0.3s ease;
}

.bullet-custom.attivo {
  background-color: #1a1a1a;
  width: 60px;
}
.bullet-wrapper {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  opacity: 1;
}
.bullet-wrapper.transizione {
  opacity: 0;
  transform: scale(0.9);
}
.arrow-wrap {
  overflow: hidden;
}
.custom-arrow-prev,
.custom-arrow-next {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  opacity: 1;
}
.custom-arrow-prev.transizione,
.custom-arrow-next.transizione {
  opacity: 0;
  transform: translateY(60px) scale(0.85);
}
.custom-arrow-prev.disabled,
.custom-arrow-next.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
selector button {
  background-color: transparent;
}
selector button svg {
  width: 44px;
  height: 44px;
}
selector button svg rect,
selector button svg path {
  stroke: var(--shade);
}
/* ?---------
? MARQUEE LEFT RIGHT
? ---------*/
.marquee-track {
  animation: marquee-scroll 20s linear infinite;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee-left .marquee-track {
  animation-direction: normal;
}

.marquee-right .marquee-track {
  animation-direction: reverse;
}
/* ?---------
? Footer
? ---------*/
footer .site-brand svg .invert {
  fill: var(--bg);
}
footer .site-brand svg {
  width: 100% !important;
  max-width: 22vh !important;
  height: auto !important;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 1000000000;
  visibility: hidden;
}
.popup.is-visible {
  visibility: visible;
}

.popup__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup.is-visible .popup__overlay {
  opacity: 1;
}

.popup__panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 550px;
  background: #fff;
  z-index: 1;
  overflow-y: auto;
  padding: var(--space-3) !important;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

.popup.is-visible .popup__panel {
  transform: translateX(0); /* entra in scena */
}

.popup__prev:disabled,
.popup__next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}