/* EMTI Releases – Minimal Styles (v1.4.0, brand-consistent, 1360px corridor)  */

/* =========================
   Variablen / Farben / Breite
   ========================= */
:root{
  /* Brandfarben (Styleguide) */
  --emti-accent:#C94E1A;
  --emti-accent-hover:#AD3E12;
  --emti-surface:#f7f7f8;
  --emti-border:#eceef1;
  --emti-card-border:#e8eaee;

  /* Layoutkorridor */
  --site-max: 1360px;                         /* gewünschte Maxbreite */
  --site-sidepad: clamp(16px, 5vw, 72px);     /* seitliche Innenabstände (~5%) */
}

/* =========================
   Links
   ========================= */
html body a{
  color:var(--emti-accent) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
html body a:hover{ color:var(--emti-accent-hover) !important; }

/* =========================
   Buttons (einheitlich, mobil-sicher)
   ========================= */
.emti-btn,
.emti-cta{
  background:var(--emti-accent) !important;
  border:1px solid var(--emti-accent) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important; /* iOS/Safari */
  font-weight:700;
  text-decoration:none !important;
  border-radius:12px;
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.emti-btn:hover,
.emti-cta:hover{
  background:var(--emti-accent-hover) !important;
  border-color:var(--emti-accent-hover) !important;
  color:#fff !important;
}
.emti-btn:focus-visible,
.emti-cta:focus-visible{
  outline:2px solid var(--emti-accent);
  outline-offset:2px;
}

/* =========================
   Hero (mit Bild, zentriert)
   ========================= */
.emti-hero{
  position:relative;
  padding:78px 20px;
  min-height:55vh;
  border-bottom:1px solid var(--emti-border);
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
    url('https://emtimusic.com/wp-content/uploads/2025/10/EMTI_Sketch_Warm_S1_2560x1440.webp')
      50% 35%/cover no-repeat;
  padding-left:var(--site-sidepad);
  padding-right:var(--site-sidepad);
}
@media (min-width:1100px){ .emti-hero{ background-attachment:fixed } }
@media (max-width:768px){
  .emti-hero{
    padding:48px 16px;
    min-height:42vh;
    background-position:50% 30%;
    background-attachment:scroll;
  }
}
.emti-hero-inner{
  max-width:min(92vw, var(--site-max));
  margin:0 auto;
  text-align:center;
}
.emti-site{font-size:2.4rem;margin:0}
.emti-claim{font-size:1.2rem;margin:.6rem 0 1rem}

/* =========================
   Cards / Current Release
   ========================= */
.emti-card{
  border:1px solid var(--emti-card-border);
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.emti-current{padding:26px 16px}
.emti-current-wrap{
  max-width:min(92vw, var(--site-max));
  margin:0 auto;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:18px;
  align-items:start;
  padding-left:var(--site-sidepad);
  padding-right:var(--site-sidepad);
}
.emti-current-cover{width:100%;height:auto;border-radius:12px}
.emti-excerpt{margin:.2rem 0 .6rem}
@media (max-width:800px){ .emti-current-wrap{grid-template-columns:1fr} }

/* =========================
   AI-Notiz
   ========================= */
.emti-ai{font-size:.95rem;opacity:.9;margin-top:.5rem}

/* =========================
   Footer (helle Zeile)
   ========================= */
.emti-footer{
  margin-top:24px;
  padding:18px 16px;
  border-top:1px solid var(--emti-border);
  background:var(--emti-surface);
}
.emti-footer-inner{
  max-width:min(92vw, var(--site-max));
  margin:0 auto;
  text-align:center;
  font-size:.95rem;
  color:#6b7280;
  padding-left:var(--site-sidepad);
  padding-right:var(--site-sidepad);
}
.emti-footer-inner a{
  color:var(--emti-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* =========================
   Video Wrapper (ohne seitliches Padding; verhindert Ratio-Störung)
   ========================= */
.video-wrap{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  max-width:min(92vw, var(--site-max));
  margin:0 auto 22px;
  border-radius:14px;
}
.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:14px;
}

/* =========================
   Quicknav unter dem Hero
   ========================= */
.emti-quicknav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:12px auto 24px;
  max-width:min(92vw, var(--site-max));
  padding-left:var(--site-sidepad);
  padding-right:var(--site-sidepad);
}
.emti-quicknav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--emti-accent);
  background:transparent;
  color:var(--emti-accent) !important; /* sichtbar ohne Hover */
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
}
.emti-quicknav a:hover{
  background:var(--emti-accent);
  color:#fff !important;
  border-color:var(--emti-accent-hover);
}

/* Extra Abstand vor dem YouTube-Button */
/* Desktop / große Screens:
   horizontaler Abstand vor dem YouTube-Button durch ein Flex-Item */
.emti-quicknav .emti-nav-sep{
  display:inline-block;
  width:24px;
  height:1px;
}

/* Smartphone:
   2x2 Grid für die ersten vier Buttons,
   dann vertikaler Abstand und YouTube-Button vollbreit zentriert */
@media (max-width:600px){
  .emti-quicknav{
    justify-content:center;
    max-width:360px;              /* hält das Grid schön kompakt zentriert */
    margin-left:auto;
    margin-right:auto;
  }

  /* alle "normalen" Buttons: halbe Breite */
  .emti-quicknav a.emti-btn{
    flex:0 0 calc(50% - 10px);    /* zwei Spalten nebeneinander */
  }

  /* Spacer trennt intern (Label) vs extern (YouTube) als eigene Zeile
     und schafft extra vertikale Luft */
  .emti-quicknav .emti-nav-sep{
    flex:0 0 100%;
    width:100%;
    height:16px;                  /* vertikaler Abstand vorm YouTube-Button */
  }

  /* YouTube-Button: ganze Breite eigene Zeile */
  .emti-quicknav .emti-btn-yt{
    flex:0 0 100%;
  }
}

/* =========================
   Globaler Content-Korridor
   ========================= */
.entry-content,
.emti-hero-inner,
.emti-current-wrap,
.emti-single-inner,
.emti-footer-inner,
.home-faq{
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--site-sidepad);
  padding-right:var(--site-sidepad);
}

/* =========================
   OceanWP Container härter überschreiben
   (stellt sicher, dass der Korridor 1360px greifen kann)
   ========================= */
@media (min-width:1200px){
  .container,
  #main .container,
  #content-wrap .container{
    width: min(92vw, var(--site-max)) !important;
    max-width:100% !important;
  }
}

/* =========================
   Gutenberg alignfull „zähmen“
   ========================= */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull{
  width:100%;
  max-width:min(92vw, var(--site-max)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--site-sidepad) !important;
  padding-right:var(--site-sidepad) !important;
}

/* ==== Einheitliche Content-Breite 1360 px für Text/Blocks (PC & Tablet) ==== */

/* Harte Klammer für die wichtigsten Wrapper von OceanWP */
#content-wrap,
.content-wrap,
.site-content,
.content-area,
.site-main,
#main,
#main .container,
.site-content .container{
  width: min(92vw, var(--site-max)) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Alle direkten Blöcke innerhalb des Inhalts auf den Korridor begrenzen */
.entry-content > *:not(.alignfull){
  max-width: min(92vw, var(--site-max));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-sidepad);
  padding-right: var(--site-sidepad);
}

/* Häufige Gutenberg-Blöcke zusätzlich absichern */
.entry-content .wp-block-group:not(.alignfull),
.entry-content .wp-block-columns:not(.alignfull),
.entry-content .wp-block-column,
.entry-content .wp-block-heading,
.entry-content .wp-block-paragraph,
.entry-content .wp-block-buttons,
.entry-content .wp-block-image:not(.alignfull),
.entry-content .wp-block-embed:not(.alignfull){
  max-width: min(92vw, var(--site-max));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--site-sidepad);
  padding-right: var(--site-sidepad);
}

/* „alignwide“ nicht randlos, sondern ebenfalls in den Korridor holen */
.entry-content .alignwide{
  max-width: min(92vw, var(--site-max));
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-sidepad);
  padding-right: var(--site-sidepad);
}

/* „alignfull“ Fallback */
.entry-content .alignfull{
  width: 100%;
  max-width: min(92vw, var(--site-max));
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-sidepad);
  padding-right: var(--site-sidepad);
}

/* Nur die Footer-AI-Notiz stehen lassen – die im Current-Release ausblenden */
.emti-current .emti-ai { 
  display: none !important; 
}

/* (optional) Credits im Current-Release belassen und lesbar halten */
.emti-current .emti-credits{
  opacity: .85;
  font-size: .9rem;
  margin-top: .35rem;
}

/* Desktop: Plugin-Footerzeile größer (12pt ≈ 16px) */
@media (min-width: 1024px){
  .emti-footer .emti-footer-inner{
    font-size: 12pt !important;   /* entspricht ca. 16px */
    line-height: 1.3;
  }
  .emti-footer .emti-footer-inner a{
    font-size: inherit !important; /* Links gleich groß wie Text */
  }
}

/* Hinweistext (AI-Notice) unverändert klein lassen – nur zur Sicherheit */
.emti-ai-wrap .emti-ai{
  font-size: .95rem;
}

/* Video-Hinweis */
.emti-video-hint{
  max-width: var(--site-max);
  margin: 6px auto 16px;
  padding-left: var(--site-sidepad);
  padding-right: var(--site-sidepad);
  font-size: clamp(.95rem, .85rem + .30vw, 1.12rem);
  line-height: 1.5;
  color: #6b7280;
}

/* =========================
   Extras: Divider + Highlight + Intro-Logo + FAQ
   ========================= */
.emti-divider{
  border:0; height:1px; margin:28px 0 10px;
  background:linear-gradient(90deg, transparent, var(--emti-border), transparent);
}
.emti-divider-label{
  margin:6px 0 14px; font-weight:600; color:#4b5563; letter-spacing:.2px; text-align:center;
}
.emti-cover-link img{
  width:100%; max-width:420px; height:auto; border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease;
}
.emti-cover-link:hover img{
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.intro-logo{ display:block; margin:8px auto 16px; width:200px; }
.home-faq{ max-width:1100px; margin:8px auto 24px; }
.home-faq details{ margin:8px 0; padding:10px 12px; border:1px solid var(--emti-border); border-radius:10px; background:#fff }
.home-faq summary{ cursor:pointer; font-weight:600 }



/* Mobile-Layout für die Quicknav */
@media (max-width:600px){

  /* Quicknav bleibt Flex-Container */
  .emti-quicknav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    /* wir nutzen den vorhandenen horizontalen Innenabstand
       aus var(--site-sidepad); kein zusätzliches max-width erzwingen */
    gap:10px; /* horizontale + vertikale Lücke zwischen Items */
  }

  /* alle regulären Buttons (Music, Videos, About, Label):
     Genau 2 Spalten pro Reihe.
     calc(50% - 5px) = volle Breite links/rechts bündig plus die 10px gap dazwischen */
  .emti-quicknav a.emti-btn{
    flex:0 0 calc(50% - 5px);
  }

  /* Zeilenumbruch + vertikaler Abstand vor YouTube */
  .emti-quicknav .emti-nav-sep{
    flex:0 0 100%;
    height:0;         /* kein sichtbarer Block, dient nur als Break */
  }

  /* YouTube-Button: volle Breite unter den beiden Spalten,
     bündig mit deren Außenkanten */
  .emti-quicknav .emti-btn-yt{
    flex:0 0 100%;
  }
}

/* Desktop / größer als 600px:
   kleine Lücke vor dem YouTube-Button als optische Trennung */
@media (min-width:601px){
  .emti-quicknav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

  /* Trenner wird hier einfach ein horizontaler Abstand */
  .emti-quicknav .emti-nav-sep{
    display:inline-block;
    width:24px;
    height:1px;
    flex:0 0 auto;
  }

  /* Desktop: Buttons normal nebeneinander, nix erzwingen */
  .emti-quicknav a.emti-btn{
    flex:0 0 auto;
  }

  .emti-quicknav .emti-btn-yt{
    flex:0 0 auto;
  }
}

@media (max-width:600px){
  .emti-quicknav .emti-btn-yt{
    justify-content:center;
    text-align:center;
  }
}

@media (min-width:601px){
  .emti-quicknav .emti-btn-yt{
    justify-content:center;
    text-align:center;
  }
}

/* Tanzende Noten im Footer */
.emti-footer-inner .emti-notes{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  margin:0 4px;
}

.emti-footer-inner .emti-note{
  display:inline-block;
  line-height:1;
  animation:emti-note-bounce 1.2s infinite ease-in-out;
  transform-origin:bottom center;
  font-size:1em; /* Basisgröße */
}

/* zeitliche Staffelung für leichten "Tanz"-Versatz */
.emti-footer-inner .emti-note.n2{
  animation-delay:0.15s;
}
.emti-footer-inner .emti-note.n3{
  animation-delay:0.3s;
}

/* Keyframes: leicht hochspringen + größer werden */
@keyframes emti-note-bounce{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-2px) scale(1.25);
  }
}