/*
	Theme Name: Themebase
	Theme URI: 
	Author:  Veronika Udod
	Author URI: 
	Version: 2.0
	Description: 
	Tags: 
	Licence: GPL v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: ecoffset.it
*/

/* MAIN SETTINGS */

:root {
  --accent: #ff3333;
  --white: #f0f0f0;
  --black: #000000;
  --lightlightgrey: #e5e5e5;
  --lightgrey: #cccccc;
  --grey: #737373;
  --blue: #0089c0;
  --green: #0bb47b;
  --yellow: #fbe600;
}

body {
  width: 100%;
  margin: 0;
  transition: 0.5s;
  background: var(--lightlightgrey);
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

/* HOMEPAGE COMING SOON */
body.home,
body.home html {
  height: 100vh;
  overflow: hidden;
}

body.home .site-header,
body.home footer {
  display: none;
}

@font-face {
  font-family: "TINY5x3";
  src: url("/wp-content/themes/themebase/inc/assets/fonts/TINY5x3GX.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("/wp-content/themes/themebase/inc/assets/fonts/HelveticaNowDisplay.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display Bold";
  src: url("/wp-content/themes/themebase/inc/assets/fonts/HelveticaNowDisplayBold.otf")
    format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: "TINY5x3";
  line-height: 0.8;
  font-feature-settings: "ss03" 1;
}

h1 {
  font-size: 160px;
}

h2 {
  font-size: 80px;
  line-height: 60px;
}

h3 {
  font-size: 60px;
  line-height: 42px;
}

h4 {
  font-size: 32px;
  font-weight: 140;
}

h5 {
  font-size: 26px;
}

h6 {
  font-size: 22px;
  font-family: "Helvetica Now Display Bold", sans-serif;
}

p,
p *,
.elementor-widget-text-editor,
.elementor-widget-text-editor * {
  font-size: 18px;
  font-family: "Helvetica Now Display", sans-serif !important;
  margin-bottom: 0;
  line-height: 1.5;
}

button {
  font-size: 16px;
  line-height: 22px;
}

.max-w-1360 {
  max-width: 1360px;
  margin: auto;
}

.position-relative {
  position: relative;
}

/* MAIN SETTINGS MOBILE */
@media only screen and (max-width: 768px) {
  body.home,
  body.home html {
    height: auto;
    overflow: auto;
  }
}

/* NAVBAR */
header.site-header {
  position: fixed;
  z-index: 99;
  width: 100%;
  background: transparent;
}

/* Container generale per header */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0px;
  max-width: 1360px;
  margin: auto;
  box-sizing: border-box;
}

/* Menu a sinistra */
.nav-left {
  flex: 1;
}

/* Menu a destra */
.nav-right {
  flex: 1;
}

/* Contenitore del logo, centrato */
.logo-container {
  text-align: center;
  flex: 0 0 auto;
}

/* Logo come testo */
.logo-link {
  font-family: "TINY5x3", monospace;
  font-size: 50px;
  font-weight: 140;
  color: var(--lightlightgrey);
  text-decoration: none;
  letter-spacing: 2px;
  white-space: nowrap;
  transition: 0.3s;
}

.logo-link:hover {
  opacity: 0.8;
}

/* Menu principale */
.main-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu ul {
  display: flex;
  gap: 50px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.nav-left .main-menu {
  justify-content: flex-start;
}

.nav-right .main-menu {
  justify-content: flex-end;
}

.main-menu li a {
  position: relative;
  text-decoration: none;
  color: var(--black);
  text-transform: capitalize;
  font-family: "Helvetica Now Display Bold", sans-serif;
  font-size: 16px;
  transition: 0.3s;
  display: inline-block;
}

.main-menu li a:hover {
  opacity: 0.6;
}

/* NAVBAR MOBILE */
@media only screen and (max-width: 768px) {
  .header-container {
    flex-direction: column;
    padding: 16px 20px;
    gap: 12px;
  }

  .logo-container {
    display: none;
  }

  .nav-left,
  .nav-right {
    width: 100%;
  }

  .nav-left .main-menu,
  .nav-right .main-menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }
}

/*********CONTACT US************/
/*.contact-us-form .form-control {
    padding: 20px;
    border-radius: 0;
	color: var(--white);
	text-transform: uppercase;
 	resize: none;
	background-color: #333333;
	border: 0;
}

.contact-us-form .form-control::placeholder {
	color: var(--grey);
	text-transform: uppercase;
}

.contact-us-form .btn-submit .form-control {
   	background: transparent;
	border: 1px solid var(--green);
	color: var(--white);
}

.contact-us-form p{
	margin-bottom: 24px;
}

.contact-us-form .wpcf7-acceptance input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    min-height: 14px;
    border: 1px solid var(--white);
    display: inline-block;
    position: relative;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.contact-us-form .wpcf7-acceptance span{
    color: var(--grey);
	font-size: 14px;
}

.contact-us-form .wpcf7-acceptance input[type="checkbox"]:checked {
    background-color: var(--white);
}*/

/* FOOTER */
.site-footer {
  background: var(--black);
  padding-top: 100px;
  padding-bottom: 50px;
}

.footer-content {
  max-width: 1360px;
  margin: 0 auto;
  text-align: center;
}

.footer-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-date,
.footer-subtitle {
  color: var(--accent);
  font-size: 30px;
  font-weight: 140;
  margin: 0;
  line-height: 0.8;
}

.footer-title {
  color: var(--white);
  font-weight: 140;
  margin: 0;
  line-height: 0.8;
}

.footer-links {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-links a {
  font-family: "Helvetica Now Display Bold", sans-serif !important;
  font-size: 16px;
  color: var(--lightgrey);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-separator {
  font-family: "Helvetica Now Display Bold", sans-serif !important;
  font-size: 16px;
  color: var(--lightgrey);
  line-height: 1;
}