/* JIJI DOES MY BRAIDS - Full Fixed & Mobile-Perfect CSS */
/* Just copy-paste this entire thing and overwrite your old CSS file */

:root{
  --cream: #FAF6F2;
  --coffee: #8B5E3C;
  --coffee-dark: #70462B;
  --text: #000000;
  --card: #fff;
}

*{box-sizing:border-box}
body{margin:0;font-family:'Source Sans 3',system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:var(--cream)}

/* top nav */
.topnav{display:flex;justify-content:space-between;align-items:center;padding:18px 4%;border-bottom:1px solid rgba(0,0,0,0.03);background:transparent;position:sticky;top:0;z-index:40}
.brand{font-family:'Playfair Display',serif;font-weight:600;letter-spacing:0.6px;color:var(--text);font-size:20px}
.topnav .links a{margin-left:18px;text-decoration:none;color:var(--text);font-weight:600}

/* hero */
.hero{position:relative;height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.6) saturate(0.9)}
.hero-copy{position:relative;z-index:2;text-align:center;color:#fff;max-width:920px;padding:20px}
.hero-copy h1{font-family:'Playfair Display',serif;font-size:48px;margin:0 0 8px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.4)}
.subtitle{margin:0 0 18px;color:#fff}

/* buttons */
.btn{display:inline-block;padding:12px 20px;text-decoration:none;border:0;font-weight:700;background:transparent;color:var(--text);cursor:pointer;border-radius:0}
.btn-brown{background:var(--coffee);color:#fff}
.btn-outline{border:2px solid var(--coffee);padding:10px 18px;color:var(--coffee)}

/* main cards */
.main{max-width:980px;margin:30px auto;padding:0 20px}
.card{background:var(--card);padding:28px;margin-bottom:20px;border:1px solid rgba(0,0,0,0.04)}

/* TABS - Fixed & Mobile Ready */
.tabs-container{
  position: relative;
  overflow: hidden;
  margin-top: 18px;
}

.tab-panel{
  opacity: 0;
  max-height: 0;
  transform: translateX(20px);
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease;
  overflow: hidden;
  pointer-events: none;
  padding: 0;
}

.tab-panel.active{
  opacity: 1;
  max-height: 1400px;           /* plenty of room for form + table */
  transform: translateX(0);
  pointer-events: auto;
  padding: 20px 0;
}

/* tables */
.price-table{width:100%;border-collapse:collapse;border:1px solid rgba(0,0,0,0.06);margin:20px auto}
.price-table th,.price-table td{border-bottom:1px solid rgba(0,0,0,0.04);padding:12px 10px;text-align:left}
.price-table th{background:transparent;color:var(--coffee);font-weight:700}

/* Appointment Form */
.appointment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 50px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px;
}

.appointment-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #3d2b1f;
}

.appointment-form input,
.appointment-form select,
.appointment-form textarea {
  width: 100%;
  padding: 14px;
  border: 1.5px solid #b67a43;
  border-radius: 6px;
  font-size: 16px;               /* prevents iOS zoom */
  background-color: #fff;
}

.appointment-form textarea {
  resize: none;
  height: 100px;
}

.appointment-form button {
  grid-column: span 2;
  background-color: #8a5b2f;
  color: #fff;
  border: none;
  padding: 16px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.appointment-form button:hover {
  background-color: #6c4425;
}

.deposit-note {
  grid-column: span 2;
  text-align: center;
  font-weight: 600;
  color: #8a5b2f;
  margin-top: 20px;
  font-size: 15px;
}

/* Tab buttons */
.tab-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.tab-btn {
  background:#fff;
  color:#000;
  border:2px solid #b67a43;
  border-radius:6px;
  padding:10px 20px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
}

.tab-btn:hover,
.tab-btn.active {
  background:#b67a43;
  color:#fff;
}

/* gallery + others */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns on phone */
  gap: 20px;
  margin: 30px auto;
  padding: 0 15px;
  max-width: 1000px;
}

@media (min-width: 680px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);   /* 3 columns on tablet/desktop → perfect 6-photo layout */
    gap: 24px;
  }
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;              /* perfect squares */
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid #b67a43;
  box-shadow: 0 8px 20px rgba(139,94,60,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(139,94,60,0.35);
}
.site-footer{background:transparent;padding:30px 4%;text-align:center;border-top:1px solid rgba(0,0,0,0.03)}

/* RESPONSIVE FIXES - This is the only @media block you need now */
@media (max-width: 900px) {
  .hero{height:380px}
  .hero-copy h1{font-size:36px}

  /* Force tabs to behave perfectly on mobile */
  .tab-panel {
    transform: none !important;
  }
  .tab-panel:not(.active) {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  .tab-panel.active {
    max-height: 1600px !important;
    opacity: 1 !important;
    padding: 24px 0 !important;
    pointer-events: auto !important;
  }

  /* Stack form fields vertically + bigger tap targets */
  .appointment-form {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 15px !important;
  }
  .appointment-form button,
  .deposit-note {
    grid-column: 1 / -1 !important;
  }

  .price-table th,
  .price-table td {
    padding: 12px 8px;
    font-size: 15px;
  }
}