/*
Theme Name: Jam2Gather
Theme URI: https://jam2gather.com
Author: Jam2Gather Team
Description: Intimate live music jamming session booking platform
Version: 1.1.6
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: jam2gather
*/

/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  --bg: #F9F4EE;
  --surface: #FFFFFF;
  --surface2: #F3EDE4;
  --border: rgba(0,0,0,0.08);
  --saffron: #F4822A;
  --rose: #E8536A;
  --teal: #2A9D8F;
  --indigo: #264653;
  --mustard: #E9C46A;
  --lavender: #C9B8E8;
  --text: #1A1A2E;
  --muted: #222;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 64px;
  --sidebar-w: 240px;
  --radius: 14px;
  --radius-lg: 20px;
}

/* ── RESET ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:"DM Sans", sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased; }
body h1,body h2,body h3,body h4,body h5,body h6{
  font-family:'Playfair Display', serif;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { display:block; max-width:100%; }
input, select, textarea { font-family:inherit; }

/* ── CONTAINER ─────────────────────────────────── */
.jam-container { width:100%; min-height:100vh; background:#FFF; position:relative; }

/* ── SHARED UTILITIES ──────────────────────────── */
.font-serif { font-family:'Playfair Display',serif; }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; }
.reveal.in { opacity:1; transform:none; }

#jam-toast {
  position:fixed; bottom:90px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--indigo); color:#fff;
  padding:10px 22px; border-radius:40px;
  font-size:0.82rem; font-weight:600; opacity:0;
  transition:all .3s; z-index:9999;
  white-space:nowrap; pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
}
#jam-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#jam-toast.success { background:var(--teal); }
#jam-toast.error { background:var(--rose); }

.section-divider { height:8px; background:var(--surface2); }
.row-header {     color: #222;
    text-align: center;
    font-family: Literata;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; }
.row-title { 
     /* font-family: 'Playfair Display', serif; */
    font-size: 24px;
    font-weight: 700;
    color: #222;
    }
/* .row-title span { 
  color:var(--saffron); 
  font-style:normal;
 } */
.row-seeall { font-size:0.75rem; font-weight:600; color:var(--teal); }

.cards-scroll { display:flex; gap:12px; overflow-x:auto; 
  /* padding:0 16px 4px;  */
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cards-scroll::-webkit-scrollbar { display:none; }

.tag-unp { background:var(--teal); }
.tag-bol { background:var(--rose); }
.tag-rag { background:var(--saffron); }
.tag-suf { background:var(--lavender); color:var(--indigo) !important; }

.loading-spinner { display:flex; align-items:center; justify-content:center; padding:40px 0; width:100%; }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--saffron); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.detail-label { font-size:0.7rem; font-weight:700; color:var(--muted); letter-spacing:0.5px; margin-bottom:6px; display:block; }
.detail-input { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 14px; font-family:"DM Sans", sans-serif; font-size:0.9rem; color:var(--text); outline:none; transition:border-color .2s; }
.detail-input:focus { border-color:var(--saffron); }
.detail-input::placeholder { color:var(--muted); }
.detail-input-wrap { margin-bottom:12px; }

/* ── DESKTOP NAVIGATION (hidden on mobile) ──────── */
.desktop-nav { display: none; }

/* ══════════════════════════════════════════════════
   DESKTOP  ≥ 768px
══════════════════════════════════════════════════ */
@media (min-width:768px) {
  /* Core Container reset */
  .jam-container { display: block; max-width: 100%; margin: 0 auto; }
  main { padding-top: 80px !important;         
    max-width: 1240px;
        margin: 0 auto;
      }

  /* Top Header fixes for Desktop */
  .top-header {
    display: block !important; 
    max-width: 100% !important; 
    left: 0 !important; 
    transform: none !important; 
  }
  .header-row1 {
    max-width: 1240px; 
    margin: 0 auto; 
    padding-left: 40px; 
    padding-right: 40px; 
  }
  .desktop-nav { display: flex; gap: 16px; align-items: center; color: #000; }
  .dnav-item {
    /* color: rgba(255,255,255,0.65); */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .dnav-item:hover, .dnav-item.active { 
    color: #FF3C00; fill: #FF3C00;
    background: #FDF3EC;
    border-radius: 50px;
  }
  .dnav-item{
    padding: 6px 14px;
  }
  /* Hide Bottom Nav on Desktop */
  .bottom-nav { display: none !important; }

  /* Hero & Main Content Layouts */
  .hero-banner-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
  
  .cards-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; 
    /* padding: 0 40px 40px !important; */
    max-width: 1240px; 
    margin: 0 auto;
    /* overflow: visible; */
  }
  .ev-card, .ev-card-lg { height: 358px !important; }
  .section-divider { display: none; }

  /* Community & Who We Are */
  /* .wwa-section, .community-section, .enquiry-section { padding-left: 40px; padding-right: 40px; } */
  .wwa-body,  .community-sub, .community-bullet-list, .community-city-grid { max-width: 1240px; margin: 0 auto 20px; }
  .community-section .community-title {
    margin: 0 auto 4px;
  }
  
  /* Fix Testimonials scrolling for desktop */
  /* .testi-track {
    display: grid; grid-template-columns: repeat(3, 1fr); 
    gap: 24px; max-width: 1200px; margin: 0 auto; transform: none !important;
  } */
  /* .testi-slide { width: 100%; padding: 0; }
  .testi-dots { display: none; } */

  /* Event Detail Desktop Fixes */
  .ev-header {
    max-width: 100% !important; left: 0 !important; transform: none !important;
    padding-left: max(40px, calc(50vw - 400px)); 
    padding-right: max(40px, calc(50vw - 400px));
  }
  .ev-hero { height: 440px; }
  .ev-body { max-width: 800px; margin: 0 auto; padding: 40px 0 120px; }
  .ev-sticky-footer {
    max-width: 100% !important; left: 0 !important; transform: none !important;
    padding-left: max(40px, calc(50vw - 400px)); 
    padding-right: max(40px, calc(50vw - 400px));
  }

  /* Booking Flow Desktop Fixes */
  .ticket-header { max-width: 100% !important; padding: 20px 40px; justify-content: center; left: 0 !important; transform: none !important; }
  .stepper-row { justify-content: center; }
  .ticket-body { max-width: 800px; margin: 0 auto; padding: 40px 0 180px; }
  .ticket-sticky-footer {
    max-width: 100% !important; left: 0 !important; transform: none !important;
    padding-left: max(40px, calc(50vw - 400px)); 
    padding-right: max(40px, calc(50vw - 400px));
  }

  /* Profile Desktop Fixes */
  .page-header {
    max-width: 100% !important; left: 0 !important; transform: none !important;
    padding-left: max(40px, calc(50vw - 400px)); 
    padding-right: max(40px, calc(50vw - 400px));
  }
  .profile-wrap { max-width: 800px; margin: 0 auto; padding: 100px 0 40px; }

  /* Fix City Tabs */
  .cat-tabs-wrap { 
    /* top: 0; 
    z-index: 400;  */
    padding: 30px 40px; display: flex; justify-content: center; }
  .cat-tabs { gap: 40px; }

  /* Sign In Page Desktop Layout */
  .signin-page {
    display: flex !important; flex-direction: row; align-items: center; justify-content: center;
    min-height: 100vh; 
    /* padding: 40px;  */
    gap: 40px; background: var(--bg);
  }
  .signin-hero { display: block; width: 50%; max-width: 500px; height: 600px; border-radius: 24px; margin: 0; }
  .signin-content { width: 50%; max-width: 440px; padding: 0; }
}

@media (min-width:1100px) {
  .cards-scroll { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 768px) {
  .globalfooter {
    margin-bottom: 54px;
  }
}


.j2g-footer{
    background: #F0F0F0;
    padding: 0px 0px 26px;
    border-top: 1px solid #DFDFDF;
}

.j2g-footer-inner{
  max-width:1240px;
  margin:0 auto;
  text-align:center;
}

/* logo */
.j2g-footer-logo{
  /* margin-bottom:22px; */
}

.j2g-footer-logo img{
  width:152px;
  max-width:100%;
  height:auto;
  margin: 0 auto;
}

/* description */
.j2g-footer-desc{
    /* max-width: 980px; */
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: normal;
    color: #222222;
    opacity: 0.8;
    text-align: center;
    font-weight: 400;
}

/* social icons */
.j2g-footer-social{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.j2g-social-icon{
  width:49px;
  height:49px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  /* box-shadow:0 3px 10px rgba(0,0,0,.08); */
  transition:transform .2s ease;
}

.j2g-social-icon:hover{
  transform:translateY(-2px);
}

.j2g-social-icon img{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* links */
.j2g-footer-links{
  border-top:1px solid #D5D5D5;
  padding-top:22px;
  display:flex;
  justify-content:center;
  gap:42px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.j2g-footer-links a{
    text-decoration: none;
    color: #222;
    opacity: 0.8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    transition: color .2s ease;
}

.j2g-footer-links a:hover{
  color:#FF5B1F;
}

/* copyright */
.j2g-footer-copy{
    font-size: 12px;
    color: #222;
    margin: 0;
    opacity: 0.8;
    text-align: center;
    font-weight: 400;
}

/* MOBILE */
@media(max-width:768px){

  .j2g-footer{
    padding:34px 18px 72px;
  }

  .j2g-footer-logo img{
    width:150px;
  }

  .j2g-footer-desc{
    font-size:15px;
    line-height:1.7;
    margin-bottom:24px;
  }

  .j2g-footer-social{
    gap:12px;
    margin-bottom:28px;
  }

  .j2g-social-icon{
    width:48px;
    height:48px;
  }

  .j2g-social-icon img{
    width:24px;
    height:24px;
  }

  .j2g-footer-links{
    gap:20px;
    flex-direction:column;
  }

  .j2g-footer-links a{
    font-size:12px;
  }

  .j2g-footer-copy{
    font-size:12px;
  }
}