/*
Theme Name: La Boba Child
Template: neve
Version: 1.0
*/

:root {
  --brand:#ff39b4;
  --brand-2:#ff77cd;
  --bg:#ffe3f1;
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.15);
  --max:1100px;
}

body { background: var(--bg); font-family: system-ui, sans-serif; }

/* ===== Nav Header ===== */
.lb-header {
  position: sticky; top: 0; z-index: 1100;
  background: linear-gradient(135deg, #ffb6e9, #ff39b4);
  box-shadow: 0 4px 20px rgba(255,57,180,0.45);
}
.lb-header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; }
.lb-logo a { font-size:1.5rem; font-weight:800; color:#fff; text-decoration:none; text-shadow:0 0 6px #fff,0 0 12px var(--brand); }
.lb-nav { display:flex; }
.lb-menu { list-style:none; margin:0; padding:0; display:flex; gap:1.6rem; }
.lb-menu li a {
  font-family: Georgia, serif;
  font-size:1.1rem;
  font-weight:600; /* lighter than before */
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 0 6px #fff,0 0 12px var(--brand);
  padding:8px 12px;
  border-radius:6px;
  transition:.25s;
}
.lb-menu li a:hover { background:rgba(255,255,255,.2); color:#ffe3f1; }

/* Hamburger */
.lb-nav-toggle { display:none; flex-direction:column; gap:5px; width:36px; height:28px; border:0; background:transparent; cursor:pointer; }
.lb-nav-toggle span { display:block; height:4px; width:100%; background:#fff; border-radius:2px; transition:.3s; }
.lb-nav-toggle.open span:nth-child(1){ transform:rotate(45deg) translate(6px,6px) }
.lb-nav-toggle.open span:nth-child(2){ opacity:0 }
.lb-nav-toggle.open span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px) }
@media(max-width:900px){
  .lb-nav-toggle{ display:flex; }
  .lb-nav{ position:fixed; top:70px; right:-100%; flex-direction:column; background:#2a0020; width:240px; height:calc(100% - 70px); padding:1.2rem; transition:.3s; }
  .lb-nav.open{ right:0; }
  .lb-menu{ flex-direction:column; gap:1rem; }
}

/* ===== Hero ===== */
.hero { position:relative; min-height:92vh; display:grid; place-items:end; color:#fff; }
.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-card { background:rgba(0,0,0,.45); backdrop-filter:blur(6px); border-radius:var(--radius); padding:20px; max-width:980px; margin:0 auto 6vh; text-align:center; box-shadow:var(--shadow); }
h1, h2 { font-weight:700; font-size:clamp(2.2rem,5vw,3.5rem); }

/* Status Badges */
.status-badges { display:flex; gap:.5rem; justify-content:center; margin:.5rem 0; }
.badge { padding:.5em 1em; border-radius:999px; font-weight:800; }
.badge-open { background:linear-gradient(135deg,#00e676,#00c853); color:#041a08; }
.badge-closed { background:linear-gradient(135deg,#ff8a80,#ff5252); color:#2b0000; }
.badge-delivery { background:linear-gradient(135deg,#ffd180,#ffab40); color:#2b1500; }

.boba-info { margin:.5rem auto; }
.cta-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:.6rem 0; }
.btn { display:inline-block; font-weight:800; border-radius:999px; padding:.8em 1.2em; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 0 16px rgba(255,57,180,.55); transition:.2s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 0 22px rgba(255,57,180,.7); }
.btn.light { background:#25D366; color:#052814; }

/* ===== Visit Section ===== */
.visit { background:#fff; padding:44px 18px; }
.visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:var(--max); margin:0 auto; }
@media(max-width:920px){ .visit-grid { grid-template-columns:1fr; } }
.map-shell { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:300px; }
.visit-card { background:radial-gradient(circle at 20% 10%, #ffe0f4, #ff39b4); padding:22px; border-radius:var(--radius); color:#2b0018; box-shadow:var(--shadow); }

/* Logo + title inline */
.lb-logo { display:flex; align-items:center; gap:.6rem; }
.lb-logo-img { width:52px; height:auto; }

/* ===== Sticky Socials ===== */
.sticky-socials {
  position:fixed; bottom:calc(env(safe-area-inset-bottom) + 20px); left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#ffe3f1,#ffcce4);
  border-radius:50px;
  padding:.6rem 1rem;
  display:flex; gap:1rem;
  z-index:9999;
  box-shadow:0 0 20px #ffc0cb, 0 0 26px rgba(255,57,180,.45);
  border:2px solid var(--brand);
  backdrop-filter:blur(6px);
  max-width:92vw;
  flex-wrap:wrap;
  contain:paint;
}
.sticky-socials a {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #ff9cf0 0%, #ff98ea 40%, #ffc0f3 68%, #ffe6f6 100%);
  border:2px solid #ffa6e8;
  box-shadow:0 0 16px rgba(255,122,230,.45), inset 0 0 12px rgba(255,122,230,.35), inset 0 10px 18px rgba(255,255,255,.9);
  transition: transform .2s, box-shadow .2s;
}
.sticky-socials a:hover {
  transform: scale(1.08);
  box-shadow:0 0 24px rgba(255,122,230,.7), 0 0 14px rgba(255,180,235,.7), inset 0 0 18px rgba(255,122,230,.45), inset 0 12px 20px rgba(255,255,255,.95);
}
.social-icon {
  width:28px; height:28px; display:block; background:#fff;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.icon-ig { -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg'); }
.icon-tk { -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/tiktok.svg'); }
.icon-fb { -webkit-mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); mask-image:url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg'); }

@media (max-width:560px){
  .sticky-socials{ flex-wrap:nowrap; gap:.65rem; padding:.5rem .75rem; max-width:94vw; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .sticky-socials::-webkit-scrollbar{display:none}
  .sticky-socials a{ flex:0 0 auto; width:42px; height:42px }
  .social-icon{ width:24px; height:24px }
}

/* ===== Rainfall Effect ===== */
.rainfall {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:-1;
}
.rainfall span {
  position:absolute;
  top:-10%;
  font-size:clamp(14px, 2vw, 22px);
  animation: drop linear infinite;
  opacity:.85;
  user-select:none;
}
@keyframes drop {
  0%   { transform: translateY(0) rotate(0deg);   opacity:.95; }
  100% { transform: translateY(120vh) rotate(360deg); opacity:0; }
}
/* ==== Peaceful Icon Sprinkles (Rainfall) ==== */
.rainfall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.rainfall span {
  position: absolute;
  top: -15%;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  animation: floatdown linear infinite;
  opacity: 0.7;
  user-select: none;
}
@keyframes floatdown {
  0%   { transform: translateY(0) rotate(0deg); opacity: .8; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}