/*
Theme Name: Mirai-Framework
Theme URI: -
Author: Fabio Fais - Rachele Pisoni
Author URI: https://miraiagency.it
Description: Mirai Studio's Offical Theme
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mirai-framework
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



/* ! Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --color10: hsl(31, 80%, 10%);
  --color30: hsl(31, 80%, 30%);
  --color90: hsla(31, 80%, 90%, 0);
  --color100: hsl(0, 0%, 100%);
  --accent: #121826;
  --ff: "Manrope", sans-serif;
  --ff2: "Plus Jakarta Sans", sans-serif;
  --p: 1rem/1.5em var(--ff);
  --h1: 600 3rem/1.2em var(--ff2);
  --h2: 600 2rem/1.2em var(--ff2);
  --spacing1: 4px;
  --spacing2: 8px;
  --spacing3: 16px;
  --spacing4: 20px;
  --spacing5: 40px;
  --spacing6: 80px;
  --spacing7: 160px;
}

/* Global Styles */
html {
  scroll-behavior: smooth;
}
body {
  text-wrap: balance;
  font: var(--p);
  background: var(--color90);
  color: var(--color10);
}
h1 {
  font: var(--h1);
}
h2 {
  font: var(--h2);
  margin: var(--spacing2) 0;
}
p {
  margin: var(--spacing2) 0;
}
a {
  color: var(--color10);
  text-decoration: none;
}
a:hover {
  color: var(--color30);
}
.btn,
button {
  all: unset;
  display: inline-block;
  margin: var(--spacing2) 0;
  background: var(--color100);
  padding: var(--spacing2) var(--spacing3);
  color: var(--color10);
  border-radius: var(--spacing2);
  border-bottom: solid var(--spacing1) #9747FF;
  font: var(--p);
  cursor: pointer;
}
.btn:hover,
button:hover {
  background: linear-gradient(180deg, var(--color100), var(--color90));
  transition: 0.3s ease-in-out;
}
img {
  width: 100%;
}

/* Utility Classes */
section {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}
.center {
  text-align: center;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing4);
  flex-wrap: wrap;
}
.flex > * {
  flex: 1;
  min-width: 400px;
}
.reverse {
  flex-direction: row-reverse;
}
.padding1 {
  padding: var(--spacing1) 0;
}
.padding2 {
  padding: var(--spacing2) 0;
}
.padding3 {
  padding: var(--spacing3) 0;
}
.padding4 {
  padding: var(--spacing4) 0;
}
.padding5 {
  padding: var(--spacing5) 0;
}
.padding6 {
  padding: var(--spacing6) 0;
}
.padding7 {
  padding: var(--spacing7) 0;
}
.margin1 {
  margin: var(--spacing1) auto;
}
.margin2 {
  margin: var(--spacing2) auto;
}
.margin3 {
  margin: var(--spacing3) auto;
}
.margin4 {
  margin: var(--spacing4) auto;
}
.margin5 {
  margin: var(--spacing5) auto;
}
.margin6 {
  margin: var(--spacing6) auto;
}
.margin7 {
  margin: var(--spacing7) auto;
}

/* header */
header {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: var(--spacing4) 0;
}

nav {
  display: flex;
  align-items: center;
  gap: var(--spacing5);
}
.ham {
  display: none;
  width: 20px;
}
@media (max-width: 800px) {
  .ham {
    display: block;
  }
  nav {
    display: none;
  }
  nav.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--spacing6);
    right: 0px;
    background: linear-gradient(135deg, #121826 0%, #1f2937 100%);
    padding: var(--spacing4);
    gap: var(--spacing4);
    border-radius: var(--spacing2);
  }
}
.logo {
  width: 100px;
}

/* main section */
.main-section {
  margin: var(--spacing7) auto var(--spacing6) auto;
  text-align: center;
  padding: var(--spacing6) 0;
  background: linear-gradient(135deg, #121826 0%, #1f2937 100%);
}
.main-section h2 {
  font: var(--h1);
}

/* footer */
footer {
  background: linear-gradient(135deg, #121826 0%, #1f2937 100%);
  padding: var(--spacing5) 0 var(--spacing6) 0;
}
.footer {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 600px) {
  .footer {
    flex-direction: column;
    gap: var(--spacing4);
  }
}
.footer-right,
.footer-left {
  display: flex;
  flex-direction: column;
}
.social-media-icons {
  display: flex;
  gap: var(--spacing4);
}
.social-media {
  width: 32px;
}

/* ! Grid System */
/*----------------------------------------------------------------------------------- */
.grid{display: flex; flex-wrap: wrap; max-width: 1650px; margin: 0 auto}
.grid--small{max-width: 900px}
.grid--center{justify-content: center;}
.grid--full{max-width: 100%}

.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 3%;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}


/* ! Helpers */
/*----------------------------------------------------------------------------------- */


.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}


.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}
.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color:#000}
.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}

.font-normal{font-weight: 400;}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desktop-none{display: none;}
}



/* ! Wordpress Styles */
/*----------------------------------------------------------------------------------- */

input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}

.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px; padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border:none;}
.form-search button{padding: 0;background:transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}


.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}

/* SAAS App Settings Styles */
/* Stili per la modale delle impostazioni */
.settings-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.settings-tab-content {
    display: none;
    padding: 20px 0;
}

.settings-tab-content.active {
    display: block;
}

.settings-content {
    min-height: 300px;
}

.settings-group {
    margin-bottom: 20px;
}

.settings-description {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.full-width {
    width: 100%;
}

.connection-pending {
    color: #ca8a04;
    font-style: italic;
    margin-left: 10px;
}

.connection-success {
    color: #16a34a;
    font-weight: bold;
    margin-left: 10px;
}

.connection-error {
    color: #dc2626;
    font-weight: bold;
    margin-left: 10px;
}

.n8n-guide {
    margin-top: 30px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #10A37F;
}

.n8n-guide h4 {
    margin-top: 0;
    color: #10A37F;
}

.n8n-guide ul {
    padding-left: 20px;
}

.settings-modal h3 {
    margin-bottom: 15px;
    color: #333;
}

.about-logo {
    text-align: center;
    margin: 30px 0;
}

/* Effetto hover viola per le icone social su mobile - override con alta specificità */
body .mobile-menu .header-social-icon:hover svg path,
body .navbar .header-social-icon:hover svg path,
body .header-social-icons .header-social-icon:hover svg path,
body #mobile-menu .header-social-icon:hover svg path,
body .mobile-menu-social .header-social-icon:hover svg path {
    stroke: var(--primary-color, #A159FF) !important;
}

@media (max-width: 768px) {
    body .header-social-icon:hover svg path,
    body .navbar .header-social-icon:hover svg path,
    body .header-social-icons .header-social-icon:hover svg path,
    body #mobile-menu .header-social-icon:hover svg path {
        stroke: var(--primary-color, #A159FF) !important;
    }
    
    /* Forzatura per sovrascrivere qualsiasi stile inline */
    .header-social-icon:hover svg path {
        stroke: var(--primary-color, #A159FF) !important;
    }
}