/*
Theme Name:   fayatak
Theme URI:    https://fayatak.de
Description:  Child-Theme für fayatak.de, basiert auf Twenty Twenty-Five
Author:       Ben Quint
Author URI:   https://benquint.com
Template:     twentytwentyfive
Version:      0.9.5
Text Domain:  fayatak
*/

/* === Reset: keine Lücken zwischen Sektionen === */
.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}
.wp-block-group.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body {
  overflow-x: hidden;
}

/* === Section Logo: side-by-side layout === */
.fayatak-section-logo .wp-block-image {
  margin: 0 !important;
  line-height: 0;
}
.fayatak-section-logo .wp-block-image img {
  display: block;
}
@media (max-width: 768px) {
  .fayatak-section-logo .wp-block-columns {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .fayatak-section-logo .wp-block-column {
    flex-basis: 100% !important;
    max-width: 320px;
  }
}

/* === Instagram link in logo section === */
.fayatak-insta-link a {
  display: inline-block;
  transition: transform 0.2s ease;
}
.fayatak-insta-link a:hover {
  transform: scale(1.15);
}
.fayatak-insta-link svg {
  width: 40px;
  height: 40px;
}
@media (min-width: 769px) {
  .fayatak-insta-link svg {
    width: 52px;
    height: 52px;
  }
}

/* === Sticky Header === */
header.wp-block-group {
  z-index: 999;
}

/* === Header Navigation spacing + hover === */
.wp-block-navigation .wp-block-navigation-item {
  margin-left: 0.5rem;
}
.wp-block-navigation a {
  text-decoration: none !important;
}
.wp-block-navigation a:hover {
  color: var(--wp--preset--color--purple) !important;
  text-decoration: none !important;
}

/* === DIY-Look Hilfsklasse === */
.is-style-rough {
  transform: rotate(-1deg);
  transition: transform 0.2s ease;
}
.is-style-rough:hover {
  transform: rotate(0deg) scale(1.03);
}

/* =============================================
   CAROUSEL
   ============================================= */

.fayatak-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Track: horizontal scrollable strip */
.fayatak-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: 1rem;
  padding: 0 var(--wp--preset--spacing--50, 1.5rem);
}
.fayatak-carousel__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Slides */
.fayatak-carousel__slide {
  flex: 0 0 80%;
  scroll-snap-align: center;
  border-radius: 8px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .fayatak-carousel__slide {
    flex: 0 0 55%;
  }
}
@media (min-width: 1200px) {
  .fayatak-carousel__slide {
    flex: 0 0 45%;
  }
}

/* Image slides */
.fayatak-carousel__slide--image {
  flex: 0 0 75%;
}
.fayatak-carousel__slide--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  display: block;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .fayatak-carousel__slide--image {
    flex: 0 0 40%;
  }
}
@media (min-width: 1200px) {
  .fayatak-carousel__slide--image {
    flex: 0 0 30%;
  }
}

/* Video 16:9 container */
.fayatak-carousel__video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #111;
  border-radius: 8px;
  overflow: hidden;
}
.fayatak-carousel__video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Captions */
.fayatak-carousel__caption {
  text-align: center;
  color: var(--wp--preset--color--white, #fff);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-weight: 700;
  margin: 0.75rem 0 0 0;
  letter-spacing: 0.05em;
}

/* Prev/Next buttons */
.fayatak-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  color: var(--wp--preset--color--mint, #07f4a3);
  border: none;
  font-size: 2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  backdrop-filter: blur(4px);
}
.fayatak-carousel__btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.1);
}
.fayatak-carousel__btn--prev {
  left: 0.75rem;
}
.fayatak-carousel__btn--next {
  right: 0.75rem;
}
@media (max-width: 600px) {
  .fayatak-carousel__btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.5rem;
  }
}

/* =============================================
   LINE-UP PAGE
   ============================================= */

.fayatak-lineup {
  background-color: var(--wp--preset--color--mint, #07f4a3);
  padding: var(--wp--preset--spacing--80, 4rem) var(--wp--preset--spacing--50, 1.5rem);
  position: relative;
  overflow: hidden;
}

/* Otter decoration: bottom-right background */
.fayatak-lineup::after {
  content: '';
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 280px;
  height: 280px;
  background: url('/wp-content/themes/fayatak-child/assets/images/Otter_NoBackground.png') no-repeat center / contain;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {
  .fayatak-lineup::after {
    width: 400px;
    height: 400px;
    right: -1rem;
    bottom: -1rem;
    opacity: 0.12;
  }
}

/* Page title */
.fayatak-lineup__title {
  text-align: center;
  font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--xx-large, 4rem);
  color: var(--wp--preset--color--black, #000);
  margin: 0 0 var(--wp--preset--spacing--70, 3rem) 0;
  letter-spacing: -0.02em;
}

/* Empty state */
.fayatak-lineup__empty {
  text-align: center;
  font-size: var(--wp--preset--font-size--large, 1.5rem);
  color: var(--wp--preset--color--black, #000);
  font-weight: 700;
}

/* 2-column grid */
.fayatak-lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--60, 2rem);
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (min-width: 600px) {
  .fayatak-lineup__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Artist card */
.artist-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

/* Featured image: square */
.artist-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.artist-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body */
.artist-card__body {
  padding: var(--wp--preset--spacing--50, 1.5rem);
}

/* Artist name */
.artist-card__name {
  font-family: var(--wp--preset--font-family--space-grotesk, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--wp--preset--color--black, #000);
  margin: 0 0 0.25rem 0;
}

/* Genre */
.artist-card__genre {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-weight: 700;
  color: var(--wp--preset--color--purple, #895be1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--wp--preset--spacing--40, 1rem) 0;
}

/* Bio */
.artist-card__bio {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--black, #000);
  text-align: justify;
  margin: 0 0 var(--wp--preset--spacing--40, 1rem) 0;
}

/* Meta fields (Best Gigs) */
.artist-card__meta {
  font-size: 0.8125rem;
  color: var(--wp--preset--color--black, #000);
  margin: 0 0 var(--wp--preset--spacing--40, 1rem) 0;
}
.artist-card__label {
  font-weight: 700;
}

/* Social links */
.artist-card__social {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.artist-card__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--wp--preset--color--black, #000);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.artist-card__social-link:hover {
  color: var(--wp--preset--color--purple, #895be1);
}
.artist-card__social-link svg {
  flex-shrink: 0;
}

/* Admin sortable placeholder */
.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f0f0f0 !important;
  border: 2px dashed #ccc !important;
  height: 40px;
}

/* =============================================
   WHO WE ARE PAGE
   ============================================= */

.who-we-are-section {
  position: relative;
  overflow: hidden;
}

/* Logo centered, capped width */
.who-we-are-section__logo {
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 768px) {
  .who-we-are-section__logo {
    max-width: 80%;
  }
}

/* Columns: remove border-left on mobile (stacked) */
@media (max-width: 781px) {
  .who-we-are-section__col-en {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: var(--wp--preset--spacing--50, 1.5rem);
    border-top: 2px solid var(--wp--preset--color--purple, #895be1);
  }
}

/* Otter decoration: positioned bottom-right, subtle */
.who-we-are-section__otter {
  position: absolute !important;
  right: 0;
  bottom: 0;
  width: 18%;
  max-width: 250px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  margin: 0 !important;
}
.who-we-are-section__otter img {
  display: block;
}
@media (max-width: 768px) {
  .who-we-are-section__otter {
    width: 25%;
    max-width: 120px;
    opacity: 0.2;
  }
}

/* Content above otter */
.who-we-are-section .wp-block-columns,
.who-we-are-section .wp-block-heading,
.who-we-are-section > .wp-block-image:not(.who-we-are-section__otter),
.who-we-are-section > p {
  position: relative;
  z-index: 1;
}

/* =============================================
   STICKY INSTAGRAM BUTTON
   ============================================= */

.fayatak-sticky-insta {
  position: fixed !important;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 50;
  transition: transform 0.2s ease;
}
.fayatak-sticky-insta:hover {
  transform: translateY(-50%) scale(1.1);
}
@media (max-width: 768px) {
  .fayatak-sticky-insta {
    top: auto;
    bottom: 24px;
    transform: none;
  }
  .fayatak-sticky-insta:hover {
    transform: scale(1.1);
  }
}

/* ============================================
   Fix: Edge-to-edge background sections
   ============================================
   Das has-global-padding auf .entry-content
   verhindert sonst, dass Background-Color-Sektionen
   bis zum Browser-Rand laufen.
   ============================================ */
body.page .entry-content.has-global-padding,
.wp-site-blocks > .entry-content.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =============================================
   JOIN US PAGE
   ============================================= */

.join-us-section {
  position: relative;
  overflow: hidden;
}

/* Otter decoration: top-right (plain img via wp:html) */
.join-us-section__otter {
  position: absolute;
  top: 24px;
  right: 0;
  width: 220px;
  max-width: 18%;
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .join-us-section__otter {
    width: 120px;
    max-width: 25%;
    opacity: 0.2;
    top: 16px;
  }
}

/* Content above otter */
.join-us-section > *:not(.join-us-section__otter) {
  position: relative;
  z-index: 2;
}

/* Pills for subgroups */
.join-us-pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.join-us-pill {
  display: inline-block;
  background: #895be1;
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .join-us-pill {
    font-size: 0.85rem;
    padding: 6px 14px;
  }
  .join-us-pills {
    gap: 8px;
  }
}

/* CF7 Form Styling on Mint Background */
.join-us-section .wpcf7 {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.join-us-section .wpcf7-form label {
  display: block;
  margin-bottom: 16px;
  color: #000000;
  font-weight: 600;
}

.join-us-section .wpcf7-form input[type="text"],
.join-us-section .wpcf7-form input[type="email"],
.join-us-section .wpcf7-form select,
.join-us-section .wpcf7-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #000000;
  border-radius: 6px;
  background: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  margin-top: 4px;
}

.join-us-section .wpcf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.join-us-section .wpcf7-form input[type="submit"] {
  background: #895be1;
  color: #ffffff;
  border: none;
  padding: 12px 32px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}

.join-us-section .wpcf7-form input[type="submit"]:hover {
  opacity: 0.85;
}

.join-us-section .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: normal;
  font-size: 0.9rem;
}

.join-us-section .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 4px;
}

/* =============================================
   WHO WE ARE — Headline row with Insta icon
   ============================================= */

.who-we-are-section__headline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.who-we-are-section__insta {
  display: inline-flex;
  color: #000000;
  transition: opacity 0.2s;
}

.who-we-are-section__insta:hover {
  opacity: 0.7;
}

.who-we-are-section__insta svg {
  display: block;
}

@media (max-width: 600px) {
  .who-we-are-section__insta svg {
    width: 36px;
    height: 36px;
  }
}

/* =============================================
   JOIN US — Stationary Insta icon
   ============================================= */

.join-us-section__insta-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

.join-us-section__insta {
  display: inline-flex;
  color: #000000;
  transition: opacity 0.2s;
}

.join-us-section__insta:hover {
  opacity: 0.7;
}

.join-us-section__insta svg {
  display: block;
}

@media (max-width: 600px) {
  .join-us-section__insta svg {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================ */

.legal-section {
    background: #ffffff;
}

.legal-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #000000;
}

.legal-section h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: #000000;
}

.legal-section p {
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #000000;
}

.legal-section a {
    color: #895be1;
    text-decoration: underline;
}

.legal-section a:hover {
    opacity: 0.8;
}

.legal-section .legal-meta {
    margin-top: 3rem;
    font-style: italic;
    color: #666666;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .legal-section h1 {
        font-size: 2rem;
    }
    .legal-section h2 {
        font-size: 1.2rem;
    }
}

/* ============================================
   Netzwerk Sektion
   ============================================ */

.netzwerk-section {
    position: relative;
    overflow: hidden;
}

.netzwerk-section__otter {
    position: absolute;
    top: 24px;
    left: 0;
    width: 220px;
    max-width: 18%;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
    height: auto;
    transform: scaleX(-1);
}

@media (max-width: 768px) {
    .netzwerk-section__otter {
        width: 120px;
        max-width: 25%;
        opacity: 0.2;
        top: 16px;
    }
}

.netzwerk-section > *:not(.netzwerk-section__otter) {
    position: relative;
    z-index: 2;
}

.netzwerk-section h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #000000;
}

.netzwerk-section h2:first-of-type {
    margin-top: 2rem;
}

.netzwerk-section p {
    margin: 0.4rem 0;
    line-height: 1.6;
}

.netzwerk-section a {
    color: #000000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}

.netzwerk-section a:hover {
    opacity: 0.65;
}