/* ═══ Daddy Daycare — gallery.html styles ═══ */
/* Created by Blast Media | lourensw@gmail.com */

:root{
  --main:#f69000;
  --main-light:#fdb44b;
  --main-pale:#fff3e0;
  --teal:#53b1b1;
  --teal-light:#a8d8d8;
  --teal-pale:#e8f5f5;
  --yellow:#f6c624;
  --dark:#11222c;
  --deep-teal:#1c5858;
  --rose:#fdb44b;
  --blush:#fff3e0;
  --sage:#53b1b1;
  --sage-light:#a8d8d8;
  --cream:#f9fbfb;
  --sand:#e8f0f0;
  --warm-dark:#11222c;
  --warm-mid:#1c5858;
  --warm-light:#3d7a7a;
  --accent:#f69000;
  --sky:#53b1b1;
  --sun:#f6c624;
  --white:#FFFFFF;
  --font-display:'Bubblegum Sans',cursive;
  --font-body:'DM Sans',sans-serif;
  --shadow:0 8px 40px rgba(17,34,44,0.10);
  --shadow-lg:0 20px 60px rgba(17,34,44,0.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--cream);color:var(--warm-dark);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* ── HEADER ── */
.site-header{width:100%;position:relative;overflow:hidden;}
.header-video-wrap{position:relative;width:100%;height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.header-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;background:#1a1a2e;}
.header-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.08) 0%,rgba(0,0,0,0.42) 100%);z-index:1;}
.logo-lockup{position:relative;z-index:2;text-align:center;}
.logo-text{font-family:var(--font-display);font-size:clamp(2.8rem,10vw,6rem);color:#ffffff;text-shadow:0 2px 24px rgba(0,0,0,0.5);line-height:1.05;}
.logo-sub{display:block;font-family:var(--font-body);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-top:10px;}
.header-wave{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0;z-index:3;}
.header-wave svg{display:block;width:100%;height:50px;}

/* ── NAV ── */
nav{background:var(--white);box-shadow:0 2px 20px rgba(44,36,22,0.07);position:sticky;top:0;z-index:200;}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 24px;}
.nav-link{padding:18px 28px;font-size:.9rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warm-mid);position:relative;transition:color .25s;}
.nav-link::after{content:'';position:absolute;bottom:0;left:28px;right:28px;height:3px;background:var(--accent);border-radius:3px 3px 0 0;transform:scaleX(0);transition:transform .25s;}
.nav-link:hover,.nav-link.active{color:var(--accent);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}

/* ── PAGE INTRO ── */
.page-intro{padding:70px 24px 48px;text-align:center;max-width:680px;margin:0 auto;}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.page-intro h1{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3rem);font-weight:900;color:var(--warm-dark);margin-bottom:16px;line-height:1.2;}
.page-intro p{color:var(--warm-mid);line-height:1.75;font-size:1.05rem;}

/* ── FILTER TABS ── */
.filter-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 24px 40px;}
.filter-btn{padding:10px 22px;border-radius:50px;border:2px solid var(--sand);background:var(--white);font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--warm-mid);cursor:pointer;transition:all .2s;}
.filter-btn:hover,.filter-btn.active{border-color:var(--accent);background:var(--accent);color:var(--white);}

/* ── MASONRY GALLERY ── */
.gallery-wrapper{max-width:1200px;margin:0 auto;padding:0.5em;}
.masonry{column-count:6;column-gap:0.5em;}

.masonry-item{margin-bottom:0.5em;}
.masonry-item:nth-child(3n+2){margin-top:32px;}
.masonry-item img,.masonry-item .ph{width:100%;display:block;border-radius:16px;transition:transform .4s ease;}
.masonry-item .ph{background:linear-gradient(135deg,var(--color-a),var(--color-b));display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;}
.masonry-item .ph-label{position:absolute;top:8px;left:8px;background:#ff0000;color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.05em;}
.masonry-item .overlay{display:none;}
.masonry-item:hover img,.masonry-item:hover .ph{transform:scale(1.04);}
.masonry-item.tall .ph{height:340px;}
.masonry-item.std .ph{height:220px;}
.masonry-item.short .ph{height:160px;}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all .4s;}
.lightbox.open{opacity:1;pointer-events:all;background:rgba(0,0,0,.92);}
.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;gap:16px;}
.lightbox-img-wrap{border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);transform:scale(.85);transition:transform .4s;flex-shrink:0;}
.lightbox.open .lightbox-img-wrap{transform:scale(1);}
.lightbox-ph{width:min(700px,80vw);height:min(480px,70vh);background:linear-gradient(135deg,var(--ph-a,var(--main-light)),var(--ph-b,var(--sun)));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:4rem;border-radius:16px;}
.lightbox-ph .lb-label{font-size:.85rem;font-family:'DM Sans',sans-serif;color:rgba(0,0,0,.5);font-weight:600;}
.lightbox-ph .ph-img-label{font-size:.75rem;background:#ff0000;color:#fff;padding:3px 10px;border-radius:4px;}
.lb-btn{width:52px;height:52px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);border-radius:50%;color:var(--white);font-size:1.4rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;backdrop-filter:blur(8px);}
.lb-btn:hover{background:rgba(255,255,255,.25);}
.lb-close{position:absolute;top:-20px;right:-20px;width:44px;height:44px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.2);border-radius:50%;color:var(--white);font-size:1.1rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.lb-close:hover{background:var(--accent);}
.lb-counter{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:.85rem;}

/* ── FOOTER ── */
footer{background:#1A1510;color:rgba(255,255,255,.6);padding:52px 24px;text-align:center;}
.footer-logo{font-family:var(--font-display);font-size:1.8rem;color:var(--white);margin-bottom:12px;}
.footer-links{display:flex;gap:24px;justify-content:center;margin:20px 0;flex-wrap:wrap;}
.footer-links a{font-family:var(--font-display);font-size:.95rem;color:rgba(255,255,255,.5);transition:color .2s;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem;}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.masonry-item{opacity:0;transform:translateY(20px);animation:fadeUp .5s forwards;}

@media(max-width:800px){.masonry{column-count:4;}}
@media(max-width:500px){
  .masonry{column-count:2;}
  .masonry-item:nth-child(3n+2){margin-top:0;}
  .nav-link{padding:14px 14px;font-size:.78rem;}
  .lightbox-content{gap:8px;}
}

/* ── HAMBURGER / MOBILE MENU ── */
.hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;width:48px;height:48px;border:none;background:var(--white);border-radius:50%;box-shadow:0 2px 16px rgba(44,36,22,.15);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.hamburger span{display:block;width:22px;height:3px;background:var(--accent);border-radius:3px;}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--white);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:32px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:var(--font-display);font-size:2.4rem;color:var(--warm-dark);transition:color .2s;}
.mobile-menu a:hover{color:var(--accent);}
.mobile-menu a svg{width:17px;height:17px;vertical-align:-3px;margin-right:5px;}
.m-close{position:absolute;top:24px;right:28px;font-size:2rem;background:none;border:none;cursor:pointer;color:var(--accent);}
@media(max-width:900px){
  .nav-inner{display:none;}
  .hamburger{display:flex;}
}





.blast-bar{
  margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:.78rem;color:rgba(255,255,255,.3);
}

.blast-trigger{background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;vertical-align:middle;transition:opacity .2s;}
.blast-trigger:hover{opacity:.75;}
.blast-trigger-logo{height:18px;width:auto;display:block;filter:none;opacity:.85;transition:opacity .2s;}
.blast-trigger:hover .blast-trigger-logo{opacity:1;}
.blast-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:20px;}
.blast-overlay.open{opacity:1;pointer-events:all;}
.blast-modal{background:#0D0D0D;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:48px;max-width:480px;width:100%;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);transform:translateY(24px) scale(.96);transition:transform .35s;}
.blast-overlay.open .blast-modal{transform:translateY(0) scale(1);}
.blast-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.blast-close:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.blast-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;}
.blast-modal-logo{height:32px;width:auto;display:block;margin-bottom:24px;filter:none;}
.blast-heading{font-family:'Bubblegum Sans',cursive;font-size:1.8rem;color:#fff;margin-bottom:8px;line-height:1.2;}
.blast-sub{font-size:.9rem;color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:28px;}
.blast-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.blast-field label{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.04em;}
.blast-field input,.blast-field textarea{padding:13px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:.95rem;color:#fff;transition:all .2s;width:100%;}
.blast-field input::placeholder,.blast-field textarea::placeholder{color:rgba(255,255,255,.2);}
.blast-field input:focus,.blast-field textarea:focus{outline:none;border-color:var(--accent);background:rgba(212,133,106,.08);box-shadow:0 0 0 3px rgba(212,133,106,.15);}
.blast-field textarea{min-height:110px;resize:vertical;}
.blast-submit{width:100%;padding:15px;border-radius:50px;border:none;background:linear-gradient(135deg,var(--accent),var(--sun));color:#fff;font-family:'Bubblegum Sans',cursive;font-size:1.05rem;cursor:pointer;transition:all .25s;margin-top:8px;box-shadow:0 8px 24px rgba(212,133,106,.35);}
.blast-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,133,106,.5);}
.blast-success{display:none;margin-top:14px;padding:14px 18px;background:rgba(139,175,139,.15);border:1px solid rgba(139,175,139,.3);border-radius:12px;color:var(--teal-light);font-size:.9rem;text-align:center;font-weight:600;}
.blast-success.show{display:block;}

/* ── LUCIDE ICON SIZING ── */
.ph-banner svg{width:12px;height:12px;vertical-align:-1px;margin-right:3px;}
/* ── WHATSAPP FLOATING BUTTON ── */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);transition:transform .2s,box-shadow .2s;text-decoration:none;}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(37,211,102,.55);}
.wa-float svg{width:30px;height:30px;}

/* ── FOOTER CONTACT BAR ── */
.footer-contact-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;font-size:.85rem;}
.footer-contact-bar a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;}
.footer-contact-bar a:hover{color:var(--accent);}
.footer-contact-bar span{color:rgba(255,255,255,.2);}