/*
Theme Name: Rewind 80s
Theme URI: https://www.rewind80sband.com/
Author: Rewind 80s Band
Author URI: https://www.rewind80sband.com/
Description: Custom theme for Rewind 80s Band based on the new design prototype.
Version: 1.0
Text Domain: rewind80s
*/

/* All CSS from the template will be added below */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

    :root {
      --bg: #0a0a0f;
      --bg-elev: #111115;
      --bg-card: #18181f;
      --accent-pink: #ff2a6d;
      --accent-cyan: #05d9e8;
      --accent-purple: #b026ff;
      --accent-gold: #f7b32b;
      --text: #f5f5f7;
      --text-muted: #a1a1aa;
      --border: #27272a;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system_ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .font-display {
      font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    /* === Consistent Layout System ===
       Fixed max-width container for stability.
       All content blocks use .container for the same left/right edges.
       Hero background is full-bleed for visual impact, but content stays inside container.
    */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
    }

    @media (min-width: 768px) { .container { padding: 0 32px; } }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(10, 10, 15, 0.92);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
    }

    .logo {
      display: flex;
      align-items: center;
      height: 48px; /* match logo image height for stable nav alignment */
    }

    .nav-links {
      display: none;
      gap: 32px;
      font-size: 14px;
      font-weight: 500;
    }
    @media (min-width: 900px) {
      .nav-links { display: flex; }
    }

    .nav-links a {
      color: var(--text-muted);
      transition: color 0.2s ease;
    }
    .nav-links a:hover { color: var(--text); }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border: none;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--text);
      color: #0a0a0f;
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2); }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-outline:hover { background: var(--bg-card); border-color: #3f3f46; }

    .btn-neon {
      background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
      color: white;
      box-shadow: 0 0 20px rgba(255, 42, 109, 0.3);
    }

    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 28px;
      height: 22px;
      justify-content: center;
      cursor: pointer;
    }
    .hamburger span {
      display: block;
      height: 2px;
      background: var(--text);
      transition: 0.3s;
    }
    @media (min-width: 900px) {
      .hamburger { display: none; }
    }

    .section {
      padding: 80px 0;
    }
    @media (max-width: 768px) {
      .section { padding: 60px 0; }
    }

    .section-header {
      margin-bottom: 48px;
    }

    .eyebrow {
      font-size: 12px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--accent-pink);
      margin-bottom: 8px;
    }

    .section-title {
      font-size: 42px;
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -2.5px;
      margin: 0 0 12px;
    }
    @media (max-width: 768px) {
      .section-title { font-size: 32px; letter-spacing: -1.5px; }
    }

    .section-subtitle {
      font-size: 17px;
      color: var(--text-muted);
      max-width: 520px;
    }

    /* HERO */
    .hero {
      min-height: 100dvh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: 72px;
    }

    .hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 1;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      /* Main dark + neon gradient overlay */
      background: 
        linear-gradient(180deg, rgba(10,10,15,0.65) 0%, rgba(10,10,15,0.78) 100%),
        radial-gradient(circle at 30% 20%, rgba(255,42,109,0.15) 0%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(5,217,232,0.12) 0%, transparent 60%);
      /* Subtle retro scanline texture for 80s feel */
      background-image: 
        linear-gradient(180deg, rgba(10,10,15,0.65) 0%, rgba(10,10,15,0.78) 100%),
        radial-gradient(circle at 30% 20%, rgba(255,42,109,0.15) 0%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(5,217,232,0.12) 0%, transparent 60%),
        repeating-linear-gradient(
          to bottom,
          transparent 0%,
          transparent 4px,
          rgba(255,255,255,0.03) 4px,
          rgba(255,255,255,0.03) 5px
        );
    }

    .hero-content {
      position: relative;
      z-index: 3;
      max-width: 720px;
    }

    .hero-title {
      font-size: clamp(56px, 9vw, 92px);
      line-height: 0.92;
      font-weight: 800;
      letter-spacing: -5.5px;
      margin: 0 0 16px;
      text-shadow: 0 4px 20px rgba(0,0,0,0.6);
    }

    .hero-gradient {
      background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan), var(--accent-purple));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% 100%;
      animation: neon-flow 6s linear infinite;
    }

    @keyframes neon-flow {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    .hero-tagline {
      font-size: 22px;
      color: #e5e5e7;
      margin-bottom: 36px;
      max-width: 440px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .hero-stats {
      margin-top: 64px;
      display: flex;
      gap: 48px;
      flex-wrap: wrap;
    }

    .stat {
      display: flex;
      flex-direction: column;
    }
    .stat-number {
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
    }
    .stat-label {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* ARTISTS */
    .artists-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 20px;
    }

    .artist-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                  box-shadow 0.3s ease,
                  border-color 0.3s ease;
    }
    .artist-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      border-color: #3f3f46;
    }

    .artist-img {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }
    .artist-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }
    .artist-card:hover .artist-img img {
      transform: scale(1.08);
    }

    .artist-role {
      position: absolute;
      top: 14px;
      right: 14px;
      background: rgba(10,10,15,0.85);
      color: var(--accent-pink);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      padding: 3px 10px;
      border-radius: 9999px;
      border: 1px solid rgba(255,42,109,0.3);
    }

    .artist-info {
      padding: 18px 18px 20px;
    }

    .artist-name {
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .artist-instrument {
      font-size: 13px;
      color: var(--accent-cyan);
      font-weight: 500;
      margin-bottom: 10px;
    }

    .artist-bio {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.45;
    }

    /* NEXT GIG HIGHLIGHT */
    .next-gig {
      background: linear-gradient(135deg, #18181f 0%, #111115 100%);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 24px 20px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
    }
    @media (min-width: 900px) {
      .next-gig {
        grid-template-columns: 1.1fr 1fr;
        padding: 28px 28px;
      }
    }

    .gig-date {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .gig-date-box {
      background: var(--accent-pink);
      color: white;
      width: 78px;
      height: 78px;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .gig-date-box .day { font-size: 28px; font-weight: 800; }
    .gig-date-box .month { font-size: 11px; letter-spacing: 1.5px; margin-top: -2px; }

    .gig-venue {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .gig-location {
      color: var(--text-muted);
      font-size: 15px;
    }

    .gig-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin: 18px 0;
    }
    .gig-meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    /* GIGS LIST */
    .gigs-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .filter-btn {
      padding: 8px 18px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .filter-btn.active,
    .filter-btn:hover {
      background: var(--text);
      color: #0a0a0f;
      border-color: var(--text);
    }

    .gigs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 700px) {
      .gigs-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1100px) {
      .gigs-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .gig-row {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: all 0.2s ease;
    }
    .gig-row:hover {
      border-color: #3f3f46;
      transform: translateY(-2px);
    }

    .gig-row-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .gig-row-date {
      font-weight: 700;
      font-size: 15px;
      color: var(--accent-cyan);
      white-space: nowrap;
    }

    .gig-row-venue {
      font-weight: 700;
      font-size: 17px;
      line-height: 1.2;
    }

    .gig-row-location {
      color: var(--text-muted);
      font-size: 14px;
    }

    .gig-status {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 9999px;
      font-weight: 700;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .status-upcoming { background: rgba(5, 217, 232, 0.15); color: var(--accent-cyan); }
    .status-past { background: rgba(255,255,255,0.08); color: var(--text-muted); }

    .gig-actions {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }

    /* MEDIA */
    .media-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }

    .media-tab {
      padding: 12px 24px;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
      transition: all 0.2s ease;
    }
    .media-tab.active {
      border-bottom-color: var(--accent-pink);
      color: var(--text);
    }

    .photos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    @media (min-width: 700px) {
      .photos-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1100px) {
      .photos-grid { grid-template-columns: repeat(4, 1fr); }
    }

    .photo-item {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      cursor: pointer;
    }
    .photo-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .photo-item:hover img {
      transform: scale(1.07);
    }
    .photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
      padding: 14px;
      display: flex;
      align-items: flex-end;
      opacity: 0.9;
      transition: opacity 0.3s;
    }
    .photo-item:hover .photo-overlay { opacity: 1; }

    .videos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    @media (min-width: 700px) {
      .videos-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1100px) {
      .videos-grid { grid-template-columns: repeat(4, 1fr); }
    }

    .video-card {
      background: var(--bg-card);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .video-card:hover {
      transform: translateY(-4px);
      border-color: #3f3f46;
    }

    .video-thumb {
      position: relative;
      aspect-ratio: 16 / 9;
    }
    .video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .play-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      background: rgba(255,255,255,0.95);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0a0a0f;
      font-size: 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      transition: transform 0.2s ease;
    }
    .video-card:hover .play-btn {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .video-info {
      padding: 14px 16px;
    }
    .video-title {
      font-weight: 600;
      font-size: 14.5px;
      line-height: 1.3;
    }

    /* TESTIMONIALS */
    .testimonials {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 800px) {
      .testimonials { grid-template-columns: repeat(3, 1fr); }
    }

    .testimonial {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 24px;
    }

    .testimonial-text {
      font-size: 15px;
      line-height: 1.55;
      font-style: italic;
      margin-bottom: 20px;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testimonial-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-name {
      font-weight: 600;
      font-size: 14px;
    }
    .testimonial-role {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* CONNECT */
    .social-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .social-btn {
      flex: 1;
      min-width: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 24px;
      border-radius: 16px;
      font-weight: 600;
      font-size: 15px;
      border: 1px solid var(--border);
      transition: all 0.2s ease;
    }
    .social-btn:hover {
      background: var(--bg-card);
      border-color: #3f3f46;
    }

    .social-btn.instagram {
      background: linear-gradient(90deg, #ff2a6d, #b026ff);
      color: white;
      border: none;
    }

    /* LIGHTBOX & MODALS */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal.active { display: flex; }

    .lightbox-content {
      max-width: 1100px;
      width: 100%;
      position: relative;
    }
    .lightbox-content img {
      max-height: 82vh;
      width: auto;
      margin: 0 auto;
      display: block;
      border-radius: 12px;
    }

    .modal-close {
      position: absolute;
      top: -12px;
      right: -12px;
      background: #111;
      border: 1px solid var(--border);
      color: white;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      z-index: 10;
    }

    .video-modal iframe {
      width: 100%;
      max-width: 960px;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
    }

    .booking-modal {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 24px;
      width: 100%;
      max-width: 460px;
      padding: 32px;
    }

    /* FOOTER */
    footer {
      border-top: 1px solid var(--border);
      padding: 32px 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .retro-text {
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
    }