/*
Theme Name: MB Creative Design
Theme URI: https://example.com/mb-creative-design
Author: MB
Author URI: https://example.com
Description: Tema WordPress vuoto e minimale per progetti personalizzati.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mb-creative-design
*/


/* Root*/

  :root {
    --vh-initial: 100vh; /* browser senza unità svh */
    --vh-full: 100vh;      /* sovrascritta in px da bundle.js → Viewport */
    --bottom-ui-js: 0px;   /* idem: parte di schermo coperta dalla barra in basso */
    --bottom-ui: calc(var(--bottom-ui-js) + env(safe-area-inset-bottom, 0px));
    --accent-color: #fac400;
    --black:#000;
    --text-on-dark: rgba(255,255,255,0.78);
    --text-body: clamp(1rem, 1.2vw, 1.1rem); /* testo dei contenuti: progetti e footer */
  }

  /* Altezze:
     --vh-initial = area visibile con le barre del browser espanse (svh), stabile
     --vh-full    = altezza degli hero: misurata in JS quando la pagina compare
                    (bundle.js → Viewport). 100lvh era troppo alto su iOS 26: conta anche
                    la barra dell'indirizzo in alto, che è opaca. Qui solo la riserva.
     --bottom-ui  = ingombro della barra in basso: titoli e frecce degli hero salgono
                    di questo, così stanno sopra la barra fluttuante (viewport-fit=cover).
     Da desktop tutte coincidono e l'ingombro è 0 → nessuna differenza. */
  @supports (height: 100svh) {
    :root {
      --vh-initial: 100svh;
      --vh-full: 100svh;
    }
  }

  html {
    background-color: #000;
  }

  /* iOS 26: dietro la barra fluttuante in basso Safari non disegna gli elementi fixed
     (menu, lightbox, sipario), ma la pagina. Con menu o lightbox aperti si scurisce la
     pagina stessa, così quella fascia resta scura come l'overlay. */
  [data-barba="container"],
  #footer {
    transition: filter 0.5s ease;
  }

  html.mb-menu-open [data-barba="container"],
  html.mb-menu-open #footer,
  html.mb-lightbox-open [data-barba="container"],
  html.mb-lightbox-open #footer {
    filter: brightness(0); /* nero pieno: con 0.1 le sezioni chiare restavano grigie */
  }

  /* Sfondo di riserva scuro con sipario, menu o lightbox aperti */
  html.mb-transition,
  html.mb-transition body {
    background-color: #000;
  }

  html.mb-menu-open,
  html.mb-menu-open body,
  html.mb-lightbox-open,
  html.mb-lightbox-open body {
    background-color: #06060e;
  }

  /* Scroll bloccato su touch (bundle.js → ScrollLock): transizioni, intro, menu, lightbox */
  html.mb-scroll-locked,
  html.mb-scroll-locked body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Lazy load (bundle.js → LazyImages): finché l'immagine non arriva resta invisibile
     sul fondo scuro del contenitore, poi compare con una dissolvenza */
  img.mb-lazy {
    opacity: 0;
  }

  /* TEST lazy load a sipario (?lazytest=1): coperta finché non si scopre dal basso */
  img.mb-curtain {
    clip-path: inset(100% 0 0 0);
  }

  .galleria-img-wrapper {
    background-color: #111;
  }



@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}





/* Body */
body {
  font-family: 'Satoshi', Helvetica, Arial, sans-serif;
  font-size: 1.25rem; /* 16px */
  line-height: 1.6;
  color: #333;
    font-weight:200;
  /* Nero: su iOS 26 Safari colora la barra in alto con lo sfondo del body (gli hero sono
     scuri). Le sezioni chiare che si appoggiavano al bianco del body ora lo hanno proprie
     (#founder, #creative in style-homepage.css). */
  background-color: #000;
    padding:0 !important;
    margin:0 !important;
}

.fullscreen-item {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--vh-initial); /* O usa 100vh se preferisci */
  z-index: 9999999999;
}



html, body {
  overscroll-behavior: none; /* per Android/Chrome */
  -webkit-overflow-scrolling: auto; /* disattiva scrolling fluido iOS */
}


body.noscroll {
  overflow: hidden;
}


.no-scroll{
    overflow:hidden !important;
}


/*Boxed Container e Sezioni*/

.boxed-container{
    max-width:1200px;
    margin:auto;
}

section{
    padding:60px 40px;
    position:relative;
    overflow: hidden;
}

@media screen and (max-width:991px){
    section {
        padding:60px 20px;
    }
}


/*Headings*/

h1 {
  font-size: clamp(3rem, 6vw, 5rem); /* ~48px–80px */
  font-weight: 400;
  margin-bottom: 0.5em;
margin-top:0;
    line-height: 1.2;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 3.75rem); /* ~40px–60px */
  margin-bottom: 0.5em;
    margin-top:0;
    line-height: 1.2;
}

h3 {
  font-size: clamp(2rem, 4vw, 3rem); /* ~32px–48px */
  margin-bottom: 0.5em;
    margin-top:0;
    line-height: 1.2;
}

h4 {
  font-size: clamp(1.5rem, 3vw, 2.25rem); /* ~24px–36px */
  margin-bottom: 0.5em;
    margin-top:0;
    line-height: 1.2;
}

h5 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* ~20px–28px */
  margin-bottom: 0.5em;
    margin-top:0;
    line-height: 1.2;
}

h6 {
  font-size: clamp(1rem, 2vw, 1.25rem); /* ~16px–20px */
  margin-bottom: 0.5em;
    margin-top:0;
    line-height: 1.2;
}

/* Paragrafi e Liste */
p {
  margin-bottom: 1em;
}

ul, ol {
  margin-left: 1.5rem;
  margin-bottom: 1em;
}

a {
  color: #0073e6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/*Menu Hamburger*/

/* Hamburger: due linee sottili, la seconda più corta e allineata a destra; al passaggio
   si allungano alla pari, a menu aperto diventano una X (rotazioni in bundle.js) */
#hamburger {
width: 28px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}

#lowbun, #topbun, #meat {
background: white;
height: 1.5px;
width: 100%;
margin: 0;
display: block;
border-radius: 2px;
transform-origin: center;
transition: background 0.2s ease;
}

#meat {
width: 60%;
transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.2s ease;
}

#lowbun {
display: none;
}

#menuToggle:hover #meat,
#menuToggle.open #meat {
width: 100%;
}

#menuToggle {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

    #menuToggle p{
        margin:0;
        padding:0;
        text-transform:uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.2em;
    }
    
    
@media screen and (max-width:768px){
    
        #menuToggle p{
display:none;
    }
    
    
}



/* Bottoni */

.primarybtn a {
background: var(--accent-color);
padding: 10px 20px;
color: black;
text-transform: uppercase;
letter-spacing: 0.03em;
    border-radius:0;
    text-decoration:none !important;
    margin-top:10px;
    display:table;
}

.primarybtn a:hover {
    background:#000;
    color:#fff;
    transition:0.2s;
}


.primarybtn {
background: var(--accent-color);
padding: 10px 20px;
color: black;
text-transform: uppercase;
letter-spacing: 0.03em;
    border-radius:0;
    text-decoration:none !important;
    margin-top:10px;
    display:table;
}

.primarybtn:hover {
    background:#000;
    color:#fff;
    transition:0.2s;
}


.secondarybtn {
background: transparent;
padding: 10px 20px;
color: black;
text-transform: uppercase;
letter-spacing: 0.03em;
    border-radius:0;
    text-decoration:none !important;
    margin-top:10px;
    border:2px solid black;
    display:table;
}

.secondarybtn:hover {
    background:#000;
    color:#fff;
    transition:0.2s;
}





/*Header*/



#mainHeader {
position: fixed;
top: env(safe-area-inset-top, 0px); /* con viewport-fit=cover non finisce sotto l'ora */
z-index:999999;
width: calc(100% - 80px);
height: 60px;
padding-left: 40px;
padding-right: 40px;
display: flex;
align-items: center;
color:white;
justify-content: space-between;
background:transparent;
transition: 0.2s background;
}

#mainHeader.solid{
background:white;
border-bottom:1px solid #eee;
}

#mainHeader.solid .st0 {
fill: black;
}

#mainHeader.solid .st1 {
fill: var(--accent-color);
}


#mainHeader.solid #topbun, #mainHeader.solid #meat, #mainHeader.solid #lowbun {
background:black;
}

#mainHeader.solid #menuToggle p{
color:black;
}


#logo #Layer_1 {
padding-top:10px;
height: 40px;

}



body.admin-bar #mainHeader {
  top: 32px; /* Altezza dell'admin bar su desktop */
}

@media screen and (max-width: 782px) {
  body.admin-bar #mainHeader {
    top: 46px; /* Altezza admin bar su mobile */
  }
}

@media screen and (max-width: 991px) {
  #mainHeader {
    padding-left: 15px;
    padding-right: 15px;
    width: calc(100% - 30px);
  }
}


/* Footer */

#footer {
  background: #000;
  color: rgba(255,255,255,0.55);
}

#footer .st1 {
  fill: var(--accent-color);
}

#footer .st0 {
  fill: #fff;
}

#footer-inner {
  padding: 60px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

#footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.4fr;
  gap: 60px;
  align-items: flex-start;
}

#footerlogo #Layer_1 {
  height: 36px;
  margin-bottom: 20px;
}

#footer-tagline {
  font-size: var(--text-body);
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

.footer-col-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fac400;
  margin-bottom: 16px;
}

#footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-nav-link {
  display: inline-block;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: 400;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: color 0.2s ease;
}

.footer-nav-link:last-child {
  border-bottom: none;
}

.footer-nav-link:hover {
  color: #fff;
  text-decoration: none;
}

#footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-email-link {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: 400;
  margin-bottom: 28px;
  transition: color 0.2s ease;
}

.footer-email-link:hover {
  color: #fac400;
  text-decoration: none;
}

.footer-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer-email-link:hover .footer-arrow {
  transform: translateX(4px);
}

#footer-social {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-social-link {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  padding: 4px 0;
}

.footer-social-link:hover {
  color: #fac400;
  text-decoration: none;
}

#footer-bottom {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

.footer-legal {
  flex: 1;
}

.footer-legal-links {
  display: flex;
  gap: 20px;
}

.footer-legal-links a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

@media (max-width: 991px) {
  #footer-inner {
    padding: 48px 20px 28px;
    gap: 40px;
  }

  #footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  #footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-legal {
    flex: unset;
  }
}





/* Testo su sfondi scuri */
#about p, #about li,
#online p, #online li,
#creative p, #creative li {
  color: var(--text-on-dark);
}

.transition-img-clone {
  transition: none;
  will-change: top, left, width, height, opacity;
  object-fit: cover;
}
.loader-title {
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
  color: white;
}







/* ================================================
   VISUALS — gallery lavori puntuali + lightbox
   (archivio Works #visuals, home #home-visuals)
   ================================================ */

section.mb-visuals {
  padding: 120px 40px;
  color: #fff;
  overflow: visible;
}

.mb-visuals-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}

.mb-visuals-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fac400;
}

.mb-visuals-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: #fac400;
  flex-shrink: 0;
}

.mb-visuals-title {
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  color: #fff;
}

.mb-visuals-grid {
  column-count: 3;
  column-gap: 16px;
}

.mb-visual {
  position: relative;
  display: block;
  margin: 0 0 16px;
  overflow: hidden;
  break-inside: avoid;
  background: #111;
  cursor: zoom-in;
}

.mb-visual img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mb-visual:hover img {
  transform: scale(1.04);
}

.mb-visual-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fac400;
  color: #000;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mb-visual:hover .mb-visual-zoom,
.mb-visual:focus-visible .mb-visual-zoom {
  opacity: 1;
  transform: scale(1);
}

/* Dopo il layout JS (bundle.js → VisualsGrid): colonne di uguale altezza; nelle colonne
   più corte le immagini crescono in proporzione (cover) così anche il fondo è pari */
.mb-visuals-grid.is-laid-out {
  column-count: auto;
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.mb-visuals-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mb-visuals-grid.is-laid-out .mb-visual {
  margin: 0;
  flex-shrink: 0;
  min-height: 0;
  aspect-ratio: var(--mb-ar, auto);
}

.mb-visuals-grid.is-laid-out .mb-visual img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Lightbox (appesa al body, fuori dal container Barba) */
.mb-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Sfondo sul viewport "grande" (copre anche sotto la barra fluttuante di Safari, iOS 26);
     il padding in basso tiene immagine e frecce nell'area visibile */
  height: 100vh;
  height: 100lvh;
  padding-bottom: calc(100lvh - 100svh);
  box-sizing: border-box;
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 14, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  touch-action: none;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mb-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.mb-lightbox-figure {
  position: relative;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  max-width: calc(100vw - 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mb-lightbox-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: #fac400;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  animation: mb-spin 0.8s linear infinite;
}

/* Il loader compare solo se il caricamento dura un attimo (niente lampi con la cache) */
.mb-lightbox.is-loading .mb-lightbox-loader {
  opacity: 1;
  transition-delay: 0.15s;
}

@keyframes mb-spin {
  to { transform: rotate(360deg); }
}

.mb-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 160px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.mb-lightbox-caption {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
  max-width: 640px;
}

.mb-lightbox-counter {
  position: absolute;
  top: 38px;
  left: 40px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
}

.mb-lightbox-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mb-lightbox-btn:hover,
.mb-lightbox-btn:focus-visible {
  border-color: #fac400;
  color: #fac400;
  outline: none;
}

.mb-lightbox-btn[hidden] {
  display: none;
}

.mb-lightbox-close { top: 24px; right: 40px; }
.mb-lightbox-prev  { left: 40px;  top: 50%; transform: translateY(-50%); }
.mb-lightbox-next  { right: 40px; top: 50%; transform: translateY(-50%); }

@media (max-width: 991px) {
  section.mb-visuals {
    padding: 80px 20px;
  }

  /* Una colonna come le card dei Works, stessi spazi (20px) */
  .mb-visuals-grid {
    column-count: 1;
  }

  .mb-visual {
    margin-bottom: 20px;
  }

  .mb-visuals-grid.is-laid-out,
  .mb-visuals-col {
    gap: 20px;
  }

  .mb-visual-zoom {
    display: none;
  }

  .mb-lightbox-figure {
    max-width: calc(100vw - 32px);
  }

  .mb-lightbox-img {
    max-height: calc(100dvh - 200px);
  }

  .mb-lightbox-counter { left: 20px; }
  .mb-lightbox-close   { right: 20px; }
  .mb-lightbox-prev,
  .mb-lightbox-next    { top: auto; bottom: 28px; bottom: calc(28px + 100lvh - 100svh); transform: none; }
  .mb-lightbox-prev    { left: calc(50% - 60px); }
  .mb-lightbox-next    { right: calc(50% - 60px); }
}