/* --------------------
   Variabili globali
   -------------------- */
:root {
  --bg-color: #535353;
  --gold: #c99a43;
  --white: #f6f0e6;
  --icon-link-size: 28px;
  --icon-inner-size: 28px;
  --vh: 1vh; /* aggiornato via JS */
}


/* --------------------
   Base / Reset
   -------------------- */
html {
  font-size: clamp(14px, 1.6vw, 18px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: stretch;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-color) url('../images/sfondo.png') center/cover no-repeat fixed;
  min-height: calc(var(--vh, 1vh) * 100);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --------------------
   Wrappers per scaling
   -------------------- */
#page-outer {
  width: 100%;
  /* Use min-height so the outer wrapper can grow when stacked (prevents
     a fixed 100vh that would create empty space at the bottom on mobile). */
  min-height: 100vh;
  overflow: visible;
  display: grid;
}

#scale-wrapper {
  width: 100%;
  transform-origin: top center;
  margin: 0 auto;
  position: relative;
}

/* Nascondi overflow solo quando lo scaling è attivo */
body.scaling-enabled {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

body.scaling-enabled #page-outer {
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

body.scaling-enabled .two-col {
  overflow: visible; /* permetti ai figli assoluti di non essere tagliati */
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
}


/* --------------------
   Layout principale (.two-col)
   -------------------- */
.two-col {
  display: flex;
  gap: 32px;
  max-width: 100%;
  height: 100%;
  margin: 32px auto;
  padding: 20px;
  align-items: flex-start;
}

.two-col .col {
  background: rgba(0, 0, 0, 0);
  padding: 16px;
  border-radius: 10px;
}

.two-col .left-col {
  flex: 1 1 50%;
}

.two-col .right-col {
  flex: 1 1 50%;
}

@media (min-width: 1400px) {
  .two-col {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .two-col {
    flex-direction: column;
    padding: 12px;
  }
}


/* --------------------
   Stacked layout (mobile/tablet)
   -------------------- */
.two-col.stacked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  max-width: 100%;
  margin: 0 auto;
}

.two-col.stacked .col {
  position: static;
  width: 100%;
  height: auto;
}

/* Reset forzato per elementi posizionati assolutamente */
.two-col.stacked #shortcut-left,
.two-col.stacked #subscribe,
.two-col.stacked #icon-nav,
.two-col.stacked #video-embed,
.two-col.stacked #logo-image,
.two-col.stacked #gallery,
.two-col.stacked #shortcut-explore,
.two-col.stacked #btn-nabba,
.two-col.stacked #btn-cv,
.two-col.stacked #btn-wots,
.two-col.stacked #btn-cv-wots,
.two-col.stacked #hero-title {
  margin-top: 0px !important;
  margin-right: auto !important;
  margin-bottom: 0px !important;
  margin-left: auto !important;
}

.two-col.stacked #col-left,
.two-col.stacked #col-right {
  position: static !important;
  left: auto !important;
  top: auto !important;
  padding-bottom: 50px !important;
  transform: none !important;
  width: 100% !important;
}

/* Gallery overrides when stacked */
.two-col.stacked #gallery {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 8px auto !important;
}

.two-col.stacked #gallery .gallery-track {
  position: relative !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
}

.two-col.stacked #gallery .gallery-slide {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
}

.two-col.stacked #gallery .gallery-track {
  position: relative;
  transform: none;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

/* --------------------
   Componenti e utilità
   -------------------- */
.col-title {
  color: var(--gold);
  margin: 0 0 8px 0;
  font-weight: 700;
}

.white {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 12px;
}

.placeholder {
  min-height: 160px;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
}

/* Pill buttons */
.pill {
  background: var(--gold);
  color: #111;
  position: static;
  border: 1;
  border-color: #000;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.pill.small {
  padding: 8px 14px;
}

/* Subscribe form */
.subscribe {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.email-input {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  min-width: none;
}

/* Shortcut / Icon list */
.shortcut-btn {
  background: transparent;
  border: 0;
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  display: inline-block;
}

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

/* Se vuoi che la freccia ruoti */
.shortcut-btn[aria-expanded="true"] .arrow {
    transform: rotate(90deg);
}

.icon-list {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 8px 0;
  margin: 8px 0;
  justify-content: center;
  align-items: center;
}

.icon-link {
  display: inline-flex;
  width: var(--icon-link-size);
  height: var(--icon-link-size);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.icon-placeholder {
  display: inline-block;
  width: var(--icon-inner-size);
  height: var(--icon-inner-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.icon-link:hover .icon-placeholder {
  background: var(--gold);
  color: #111;
  transform: translateY(-3px);
  transition: all 120ms ease;
}

.shortcut-list {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 10px;
}

.shortcut-list.show {
  display: flex;
}

.two-col.stacked .shortcut-list.show {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-bottom: 10px;
  justify-items: center;
}


/* --------------------
   Video preview
   -------------------- */
.video-preview {
  margin-top: 12px;
  position: static;
  width: 100%;
  height: 100%;
}

.video-preview .video-placeholder {
  color: rgba(255, 255, 255, 0.8);
  position: static;
  width: 100%;
  height: 100%;
}

.video-preview iframe {
  position: static;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

.video-responsive {
  position: static;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-responsive iframe {
  position: static;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


/* --------------------
   Gallery
   -------------------- */
.gallery {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 320px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 8px;
}

.gallery-track {
  display: flex;
  transition: transform 400ms ease;
}

.gallery-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.12);
}

.gallery-slide img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.gallery-btn {
  position: static;
  top: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--muted);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.gallery-btn.prev {
  left: 8px;
}

.gallery-btn.next {
  right: 8px;
}

.gallery-btn:focus {
  outline: 2px solid var(--gold);
}

@media (max-width: 480px) {
  .gallery {
    height: 220px;
  }
}


/* --------------------
   Overlay
   -------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  pointer-events: none;
}


/* --------------------
   Posizionamenti spostati dall'HTML
   -------------------- */
/* colonne */
#col-left {
  width: 50%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

#col-right {
  width: 50%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}

/* shortcut e subscribe */

#subscribe {
  position: static;
  left: 551px;
  top: 8px;
}

/* video */
#video-embed {
  position: relative;
}

/* logo */
#logo-image {
  width: 550px;
  height: auto;
}

/* header buttons (right column) */
#btn-nabba {
  position: static;
  left: 89px;
  top: 99px;
  min-width: 180px;
}

#btn-cv {
  position: static;
  left: 290px;
  top: 98px;
  min-width: 100px;
}

/* gallery */
#gallery {
  position: static;
  left: 165px;
  top: 233px;
  width: 200px;
  height: 200px;
}

#gallery .gallery-track {
  width: 200px;
  height: 200px;
  position: static;
  top: 110px;
  left: -71px;
}

/* explore shortcut (right column) */
#shortcut-explore {
  position: static;
  left: 87px;
  top: 540px;
  min-width: 200px;
}

/* lower buttons */
#btn-wots {
  position: static;
  left: 566px;
  top: 715px;
  min-width: 180px;
}

#btn-cv-wots {
  position: static;
  left: 451.01px;
  top: 716px;
  min-width: 100px;
}

/* hero title */
#hero-title {
  color: #c99a43;
  position: static;
  left: 591px;
  top: 768.008px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* Blog frame wrapper and iframe */
.blog-frame-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
}

.blog-frame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
}

/* Seleziona l'intera scrollbar */
.colonna::-webkit-scrollbar {
  width: 10px; /* Larghezza della barra di scorrimento verticale */
  height: 10px; /* Altezza della barra di scorrimento orizzontale */
  padding-left: 30px;
  background-color: transparent; /* Rimuove lo sfondo della scrollbar */
}

/* Rimuove i bordi e lo sfondo della traccia (la zona dietro la maniglia) */
.colonna::-webkit-scrollbar-track {
  background-color: transparent;
  border: none;
}

/* Stilizza la maniglia (thumb) - Cambia colore */
.colonna::-webkit-scrollbar-thumb {
  border-radius: 5px; /* Angoli arrotondati (opzionale) */
  background-color: var(--gold);
}

/* Rimuovi le freccine (buttons) */
.colonna::-webkit-scrollbar-button {
  display: none;
}