/*
Theme Name:        Dancefloor Experience
Theme URI:         https://djnash.it
Author:            DJ Nash
Author URI:        https://djnash.it
Description:       Tema one-page dark per archivio dance music. Born to mix life. Responsive, mobile-first, compatibile con Gutenberg e ACF Pro.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       dancefloor-experience
Tags:              one-page, dark, music, dance, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, responsive-layout
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Design Tokens DJ Nash
   Tutti i valori del tema in un unico posto.
   Modifica qui per aggiornare l'intero sito.
============================================================ */
:root {
  /* Colori brand */
  --color-black:    #080808;
  --color-white:    #f0ede6;
  --color-acid:     #c8f500;   /* lime accent — colore principale */
  --color-magenta:  #ff2d6e;   /* secondo accent */
  --color-cyan:     #00d4ff;   /* terzo accent */
  --color-orange:   #ff6820;   /* SoundCloud / accenti caldi */

  /* Grigi strutturali */
  --color-grey:     #141414;
  --color-grey-2:   #222222;
  --color-grey-3:   #2a2a2a;
  --color-muted:    #999999;
  --color-gricia:   #bbbbbb;
  --color-faint:    #333333;
/* TNN --color-muted:    #666666; */
	
  /* Tipografia */
  --font-display:   'Bebas Neue', sans-serif;
  --font-mono:      'Space Mono', monospace;
  --font-body:      'DM Sans', sans-serif;

  /* Spaziatura fluida */
  --pad:            clamp(16px, 5vw, 40px);
  --pad-section:    clamp(48px, 8vw, 80px);

  /* Layout */
  --nav-h:          60px;
  --max-w:          1440px;
  --content-w:      860px;

  /* Animazioni */
  --tr:             .25s cubic-bezier(.4, 0, .2, 1);
  --tr-slow:        .4s cubic-bezier(.77, 0, .18, 1);

  /* Border radius */
  --radius:         2px;
}

/* ============================================================
   RESET MINIMAL
============================================================ */
*,
*::before,
*::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative; /* Aiuta a contenere gli elementi absolute */
}
body {
  background:   var(--color-black);
  color:        var(--color-white);
  font-family:  var(--font-body);
  font-size:    clamp(13px, 2.2vw, 15px);
  line-height:  1.65;
  overflow-x:   hidden;
  min-height:   100vh;
  max-width: 100%;
  overflow-x: hidden;
  position: relative; /* Aiuta a contenere gli elementi absolute */
}

/* grain noise overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

img,
picture,
video,
canvas,
svg {
  display:   block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

nav.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
/* ============================================================
   LAYOUT HELPERS
============================================================ */
.container {
  width:         100%;
  max-width:     var(--max-w);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--pad);
  padding-right: var(--pad);
}

.container--narrow {
  max-width: var(--content-w);
}

section {
  padding-top:    var(--pad-section);
  padding-bottom: var(--pad-section);
  border-bottom:  1px solid var(--color-grey-2);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   TIPOGRAFIA GLOBALE
============================================================ */
.f-display {
  font-family:    var(--font-display);
  letter-spacing: .03em;
  line-height:    .92;
}

.f-mono {
  font-family:    var(--font-mono);
  letter-spacing: .08em;
}

.tag-label {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding:        4px 10px;
  background-color: rgba(100, 100, 100, 0.40);
  border:         1px solid currentColor;
  margin-bottom:  14px;
}

.section-title {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 8vw, 64px);
  letter-spacing: .03em;
  line-height:    .92;
  margin-bottom:  8px;
}

.section-sub {
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .15em;
  color:          var(--color-acid);
  margin-bottom:  clamp(24px, 4vw, 40px);
}

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  letter-spacing: .02em;
  line-height:    1;
}

h1 { font-size: clamp(32px, 8vw, 70px); }
h2 { font-size: clamp(28px, 7vw, 56px); }
h3 { font-size: clamp(24px, 5vw, 36px); }
h4 { font-size: clamp(18px, 3vw, 24px); }
h5 { font-size: clamp(15px, 2.5vw, 18px); font-family: var(--font-mono); }
h6 { font-size: 13px; font-family: var(--font-mono); color: var(--color-muted); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   BOTTONI GLOBALI
============================================================ */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-family:    var(--font-mono);
  font-size:      10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding:        clamp(10px, 2vw, 13px) clamp(16px, 3.5vw, 26px);
  border:         1px solid var(--color-acid);
  color:          var(--color-black);
  background:     var(--color-acid);
  transition:     all var(--tr);
  white-space:    nowrap;
  cursor:         pointer;
}

.btn:hover,
.btn:focus-visible {
  background: transparent;
  color:      var(--color-acid);
  outline:    none;
}

.btn--ghost {
  background:   transparent;
  color:        var(--color-white);
  border-color: var(--color-faint);
}

.btn--ghost:hover {
  border-color: var(--color-white);
  color:        var(--color-white);
  background:   transparent;
}

.btn--magenta {
  background:   var(--color-magenta);
  border-color: var(--color-magenta);
  color:        var(--color-white);
}

.btn--magenta:hover {
  background: transparent;
  color:      var(--color-magenta);
}

/* ============================================================
   FORM ELEMENTS GLOBALI
============================================================ */
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.form-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--color-gricia);
}

.form-input,
.form-textarea,
.form-select {
  background:  #0e0e0e;
  border:      1px solid var(--color-grey-3);
  color:       var(--color-white);
  font-family: var(--font-body);
  font-size:   13px;
  padding:     10px 12px;
  outline:     none;
  transition:  border-color var(--tr);
  width:       100%;
  -webkit-appearance: none;
  appearance:  none;
  border-radius: 0;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-acid);
}

.form-textarea {
  min-height: 88px;
  resize:     vertical;
}

.form-select option {
  background: var(--color-black);
}

.form-row-2 {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
  margin-bottom:         12px;
}

/* ============================================================
   BADGE
============================================================ */
.badge {
  font-family:    var(--font-mono);
  font-size:      7px;
  padding:        2px 6px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space:    nowrap;
}

.badge--green {
  background:   rgba(200, 245, 0, .12);
  border:       1px solid rgba(200, 245, 0, .3);
  color:        var(--color-acid);
}

.badge--red {
  background:   rgba(255, 45, 110, .12);
  border:       1px solid rgba(255, 45, 110, .3);
  color:        var(--color-magenta);
}

.badge--blue {
  background:   rgba(0, 212, 255, .12);
  border:       1px solid rgba(0, 212, 255, .3);
  color:        var(--color-cyan);
}

/* ============================================================
   ACCESSIBILITÀ — skip link
============================================================ */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       var(--pad);
  z-index:    99999;
  padding:    10px 20px;
  background: var(--color-acid);
  color:      var(--color-black);
  font-family:    var(--font-mono);
  font-size:  11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 0;
}

/* ============================================================
   WORDPRESS ALIGNMENT CLASSES
============================================================ */
.alignleft  { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
/* .aligncenter {
  display:     block;
  margin-left: auto; margin-right: auto;
  margin-bottom: 1em;
} */
.aligncenter, 
img.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1em;
    clear: both;
}
.wp-content img,
.entry-content img {
    max-width: 100% !important; /* Forza l'immagine a non superare il contenitore */
    height: auto !important;    /* Mantiene le proporzioni corrette */
    margin: 20px auto;          /* Centra l'immagine con margine sopra/sotto */
    display: block;             /* Necessario per il corretto funzionamento di max-width e margin:auto */
}
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide  { width: calc(100% + 2 * var(--pad)); margin-left: calc(-1 * var(--pad)); }
/* img.alignnone {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
} */
figcaption {
    display: block;
    text-align: center;      /* Centra il testo orizzontalmente */
    font-style: italic;      /* Imposta il testo in corsivo */
    margin-top: -20px;         /* Opzionale: aggiunge un po' di spazio dall'immagine */
    color: var(--color-muted); /* Opzionale: usa il colore tenue definito nel tuo tema */
}
figure, 
.wp-block-image {
    display: block !important;
    width: auto !important;       /* Permette al contenitore di restringersi all'immagine */
    max-width: 100% !important;   /* Impedisce di uscire dai bordi su mobile */
    margin-left: auto !important;  /* Centra il blocco orizzontalmente */
    margin-right: auto !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    text-align: center;           /* Centra l'immagine e la didascalia internamente */
}

figure img, 
.wp-block-image img {
    display: inline-block !important; /* Permette a text-align:center di funzionare */
    max-width: 100% !important;
    height: auto !important;
}
iframe {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%; /* Evita che l'iframe esca dai bordi su mobile */
}
/* ============================================================
   GUTENBERG BLOCK EDITOR — classi generate automaticamente
============================================================ */
.has-acid-color        { color: var(--color-acid) !important; }
.has-magenta-color     { color: var(--color-magenta) !important; }
.has-cyan-color        { color: var(--color-cyan) !important; }
.has-black-color       { color: var(--color-black) !important; }
.has-white-warm-color  { color: var(--color-white) !important; }
.has-muted-color       { color: var(--color-muted) !important; }

.has-acid-background-color        { background-color: var(--color-acid) !important; }
.has-magenta-background-color     { background-color: var(--color-magenta) !important; }
.has-cyan-background-color        { background-color: var(--color-cyan) !important; }
.has-black-background-color       { background-color: var(--color-black) !important; }

/* ============================================================
   SCROLLBAR PERSONALIZZATA (desktop)
============================================================ */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--color-black); }
::-webkit-scrollbar-thumb { background: var(--color-grey-3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ============================================================
   FOCUS VISIBLE — accessibilità tastiera
============================================================ */
:focus-visible {
  outline:        2px solid var(--color-acid);
  outline-offset: 2px;
}

/* ============================================================
   SELEZIONE TESTO
============================================================ */
::selection {
  background: var(--color-acid);
  color:      var(--color-black);
}

/* ============================================================
   PRINT
============================================================ */
@media print {
  body { background: white; color: black; }
  #navbar, #totop, .nav-drawer { display: none; }
}

/* ============================================================
   MOTION REDUCE
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       .01ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:      .01ms !important;
    scroll-behavior:          auto !important;
  }
}

/* Gli stili specifici per ogni sezione vengono applicati tramite JavaScript nel customizer preview */

/* ── inizio Social Network Header ─────────────────────────── */
.header-social-wrapper {
    display: inline-flex;
    align-items: center;
}

.header-social-icons {
    list-style: none;
    margin:  0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-social-icons li {
    margin:  0;
    padding: 0;
}

.header-social-icons a {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            36px;
    height:           36px;
    border-radius:    50%;
    color:            #333333;
    font-size:        18px;
    text-decoration:  none;
    background-color: transparent;
    transition:       color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.header-social-icons a:hover,
.header-social-icons a:focus {
    color:            #0073aa;
    background-color: rgba(0, 0, 0, 0.06);
    transform:        translateY(-2px);
    outline:          none;
}
/* ── fine Social Network Header ─────────────────────────── */
main#main-content {
    padding-top: var(--nav-h);
}