/*
 Theme Name:   GeneratePress TP
 Theme URI:    https://generatepress.com
 Description:  TP Wordpress Theme (a GeneratePress child theme)
 Author:       Tp Design
 Author URI:   https://tpdesign.it
 Template:     generatepress
 Version:      0.1
 Text Domain:  generatepress-tp
*/

html {
	scroll-behavior: smooth;
}

 /* Sovrascriviamo i preset di sistema di WordPress */
 /*
	* @media (max-width:767px){
	:root {

		--wp--preset--font-size--small: 0.875rem;
		--wp--preset--font-size--medium: 2rem;
		--wp--preset--font-size--large: 4.5rem;
		--wp--preset--font-size--x-large: 5rem;
	}
	}

* @media (min-width:768px max-width:1024px){
	:root {

		--wp--preset--font-size--small: 0.875rem;
		--wp--preset--font-size--medium: 2rem;
		--wp--preset--font-size--large: 4.5rem;
		--wp--preset--font-size--x-large: 5rem;
	}
}
  
*/

/*CUSTOM CSS*/

/* GeneratePress Site CSS */ 
.highlight-word mark.gb-highlight {
    background-image: linear-gradient(180deg,var(--accent-2) 0%,var(--accent-2) 100%);
    background-position: 0 86%;
    background-repeat: no-repeat;
    background-size: 100% 30%;
    padding-left: 0.1em;
    padding-right: 0.1em;
    margin-right: -0.1em;
    margin-left: -0.1em;
	  color:inherit;
}
.shadow {
	box-shadow: 0 3px 10px 5px rgba(0,0,0,0.05);
}

.main-navigation.toggled ul {
    background-color: var(--accent);
}
.one-container:is(.blog, .archive) .post:last-child {
    padding-bottom: 40px !important;
}

 /* End GeneratePress Site CSS */

/* doppia sottolineatura link */
a {
	text-decoration: underline double;
	color: var(--accent-2);
	text-underline-offset: .16em;
}

/* tipografia prodotti */
.type-prodotto h1 {
	font-size:4rem;
	text-wrap: balance;
}

.eyebrow-headline {
	text-wrap: balance;
}

@media (max-width: 768px) {
    .type-prodotto h1 {
        font-size: 2.5rem;
	}
}

/* --- L'ARENA GSAP --- */
.vs-arena {
  position: relative;
  height: 100vh; 
  width: 100%;
  overflow: hidden;
}

.vs-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  box-shadow: inset 0 0 3rem 6rem #ffffff; 
}

.bg-split {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 0;
}
.left-bg { 
  left: 0; 
  background: linear-gradient(to right, var(--cosmic-base) 0%, #ffffff 100%); 
}
.right-bg { 
  right: 0; 
  background: linear-gradient(to left, var(--optic-base) 0%, #ffffff 100%); 
}

.fighters-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.mascot {
  width: clamp(100px, 15vw, 160px); 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; 
}

.mascot img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.vs-badge {
  font-size: 4rem;
  font-weight: bold;
  font-family: 'Avenir Next', sans-serif;
  color: #333;
  text-align: center;
  min-width: 80px; 
}

.messages-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 600px;
  padding: 0 20px; 
  box-sizing: border-box; 
}

.msg {
  padding: 15px 25px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  opacity: 0; 
  width: 85%;
  max-width: 400px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  word-wrap: break-word;
}

.optic-msg { 
  align-self: flex-start; 
  border-bottom-left-radius: 0; 
  background: #333; 
  color: white; 
}
.cosmic-msg { 
  align-self: flex-end; 
  border-bottom-right-radius: 0; 
  background: white; 
  color: #000; 
}

@media (max-width: 768px) {
  .bg-split { 
    width: 100%; 
    height: 50%; 
  }
  .left-bg { 
    top: 0; 
    background: linear-gradient(to bottom, var(--optic-base) 0%, #ffffff 100%);
  }
  .right-bg { 
    bottom: 0; 
    top: auto; 
    background: linear-gradient(to top, var(--cosmic-base) 0%, #ffffff 100%);
  }
  
  .fighters-container {
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
    padding: 20px 0;
    box-sizing: border-box;
  }

  .mascot img {
    max-width: 120px;
  }

  .msg {
    width: 90%;
  }
}


/* Form */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    background-color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(112, 112, 112, .55);
    border-radius: 12px;
		width: 100%;
}
form .form-field--half p {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
form .form-field--half span.wpcf7-form-control-wrap {
    flex: 1 1 calc(50% - 10px);
		min-width: 250px;
}
form .wpcf7-acceptance .wpcf7-list-item {;
    margin: 0;
}

/* Sidebar related content */
.tp-related-section {
    margin-bottom: 2rem;
}
.related-items-list {
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}
.related-row {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    padding-bottom: 0.5rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--contrast); 
}
.related-row a {
    text-decoration: none;
    color: var(--accent-2);
	font-weight: 600;
}
.related-row a:hover {
    color: var(--contrast);
}
.related-row .gb-shape svg {
    color: var(--accent-2);
}
@media screen and (max-width: 768px) {
	#right-sidebar {
		margin-top: 50px;
	}
}