/* main.css – v4.0  – 13‑05‑2025  =====================================
   * DM Serif Display voor koppen, PT Serif voor normale tekst
====================================================================== */

/* -------------------------------------------------- */
/* 0. GOOGLE FONT                                     */
/* -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=PT+Serif&display=swap');


:root {
  --primary: #bd081c;
  --dark:    #343a40;
}

/* -------------------------------------------------- */
/* 1. RESETS & BASE                                   */
/* -------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { overflow-x:hidden; }
body {
  font-family: 'PT Serif', serif;
  line-height:1.5;
  color:var(--dark);
  background:#fff;
  padding-top:120px;
}
.section-gap { padding:3rem 0; }

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.container h1,
.container h2,
#post-title {
  font-family: 'DM Serif Display', serif !important;
}

/* -------------------------------------------------- */
/* 2. NAVBAR                                          */
/* -------------------------------------------------- */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 2rem;
  background:#fff;
  border-bottom:1px solid #f1f1f1;
  position:fixed; top:0; width:100%; z-index:1000;
  transition:padding .3s ease;
}
.navbar.shrink { padding:.2rem 2rem; }

.navbar-brand.logo img { width:clamp(50px,5vw,70px); height:auto; }

.navbar-toggler {
  display:none; background:none; border:none;
  font-size:1.8rem; cursor:pointer; padding:.5rem; z-index:1001;
}

.navbar-nav { display:flex; list-style:none; }
.navbar-nav .nav-item + .nav-item { margin-left:1.5rem; }
.navbar-nav .nav-link {
  display:inline-block; padding:.5rem .75rem;
  font-weight:600; color:var(--dark); text-decoration:none;
  border:1px solid transparent; border-radius:4px;
  transition:transform .2s, border .2s, color .2s;
}
.navbar-nav .nav-link:hover { color:var(--primary); transform:scale(1.1); border-color:#ccc; }

@media (max-width:768px) {
  .navbar-toggler { display:block; }
  .navbar-nav {
    flex-direction:column; position:absolute; top:100%; left:0; width:100%;
    background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .navbar-nav.show { max-height:300px; }
  .navbar-nav .nav-item + .nav-item { margin:0; border-top:1px solid #f1f1f1; }
}

/* -------------------------------------------------- */
/* 3. LAYOUT UTILITIES                                */
/* -------------------------------------------------- */
.container{max-width:1040px;margin:0 auto;padding:0 15px;}
.container-fluid{width:94%;margin:0 auto;padding:0 15px;}
.card-columns{column-count:3;column-gap:1rem;}

/* -------------------------------------------------- */
/* 4. CARDS & OVERLAYS                                */
/* -------------------------------------------------- */
.card{break-inside:avoid;margin-bottom:1rem;background:#fff;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;position:relative;}
.card-img,.card-img-top{width:100%;display:block;}
.card-body{padding:1rem;}
.card-title{margin-bottom:.5rem;}

.overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.card-pin:hover .overlay{opacity:.5;border:5px solid #f3f3f3;cursor:pointer;}
.card-pin:hover .card-title{color:#fff;margin-top:10px;text-align:center;font-size:1.2em;}

.card-pin::after{
  content:'➔';font-size:1rem;color:#fff;opacity:.8;
  position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.4);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;pointer-events:none;transition:opacity .2s;
}
.card-pin:hover::after{opacity:1;}

/* -------------------------------------------------- */
/* 5. HOME‑GALLERY                                    */
/* -------------------------------------------------- */
#home-gallery{display:flex;flex-direction:column;align-items:center;gap:2rem;}
#home-gallery .card-pin{width:100%;max-width:800px;aspect-ratio:297/210;cursor:pointer;position:relative;}
#home-gallery .card-img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease-out;}
#home-gallery .card-pin:hover .card-img{transform:scale(1.1);}
#home-gallery .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;background:rgba(0,0,0,.5);}
#home-gallery .card-pin:hover .overlay{opacity:0;border:none;}
#home-gallery .card-title{color:#fff;text-align:center;pointer-events:none;}

/* -------------------------------------------------- */
/* 6. MAKE‑UP GALLERY                                 */
/* -------------------------------------------------- */
#makeup-gallery .card-img{transition:transform .45s ease-out;}
#makeup-gallery .card-pin:hover .card-img{transform:scale(1.1);}

/* -------------------------------------------------- */
/* 7. MINI‑CAROUSEL                                   */
/* -------------------------------------------------- */
#mini-gallery .card-img{transition:transform .45s ease-out;}
#mini-gallery .card-pin:hover .card-img{transform:scale(1.1);}
#mini-gallery .overlay{opacity:0 !important;border:none !important;}

/* -------------------------------------------------- */
/* 8. ANIMATIONS                                      */
/* -------------------------------------------------- */
.card-pin{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;}
.card-pin.visible{opacity:1;transform:translateY(0);}

/* -------------------------------------------------- */
/* 9. FOOTER (ingekort)                               */
/* -------------------------------------------------- */
.footer{padding:2rem 0;background:#f8f9fa;border-top:1px solid #f1f1f1;text-align:left;}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer .social{display:flex;gap:1rem;}
.footer .social a{color:var(--dark);font-weight:600;}
.footer .social a:hover{color:var(--primary);}

@media(max-width:768px){
  .footer .container{flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1rem 0;}
  .footer .container>*{width:100%;}
  .footer .social{flex-direction:column;gap:.5rem;margin:0;}
  .footer .links,.footer .contact-info,.footer .social{margin-bottom:1rem;}
}

/* -------------------------------------------------- */
/* 10. RESPONSIVE EXTRA’S (gekort)                    */
/* -------------------------------------------------- */
@media(max-width:520px){
  .card-columns{column-count:2 !important;column-gap:1rem;}
  .card-columns .card{width:100%;margin-bottom:1rem;break-inside:avoid;}
}

/* -------------------------------------------------- */
/* 11. POST‑PAGINA SPECIFIEK                          */
/* -------------------------------------------------- */
#post-hero{border:none !important;box-shadow:none !important;border-radius:8px !important;margin:0 !important;padding:0 !important;}
#post-img{width:100%;max-width:600px;height:auto;display:block;margin:0 auto .25rem;align-self:center;border-radius:8px !important;cursor:pointer !important;}
#post-title{text-align:left !important;align-self:flex-start;margin-bottom:1rem;}
#post-desc{text-align:left;}

#tag-gallery{column-count:2;column-gap:4px;width:100%;margin:0 auto;display:block;}
#tag-gallery .card-pin{width:100%!important;margin:0 0 4px;break-inside:avoid;background:none!important;border:none!important;box-shadow:none!important;cursor:pointer!important;}
#tag-gallery .card-pin img{width:100%;height:auto;border-radius:8px;}
#tag-gallery .card-pin .overlay,#tag-gallery .card-pin::before,#tag-gallery .card-pin::after,#tag-gallery .card-caption{display:none!important;}
#post-hero.card-pin::after{content:none !important;}
#post-hero.card-pin:hover{cursor:default !important;}
#post-hero.card-pin .overlay{display:none !important;}

.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s;z-index:2000;}
.lightbox.show{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s;}
.lightbox-content{transform:scale(.94);transition:transform .35s ease;}
.lightbox.show .lightbox-content{transform:scale(1);}
.lightbox-content img{max-width:85vw;max-height:85vh;cursor:grab;transition:transform .35s ease,opacity .35s ease;opacity:0;}
.lightbox.show img{opacity:1;}
.lightbox.show img:active{cursor:grabbing;}

/* -------------------------------------------------- */
/* 12. HOVER UPGRADE PATCH – POINTER & SMOOTH (v4.0)  */
/* -------------------------------------------------- */
#home-gallery .card-pin,
#home-gallery .card-pin .overlay,
#makeup-gallery .card-pin,
#makeup-gallery .card-pin .overlay,
#mini-gallery .card-pin,
#mini-gallery .card-pin .overlay{
  cursor:pointer !important;
}

#home-gallery .card-img,
#makeup-gallery .card-img,
#mini-gallery .card-img{
  transition:transform .30s ease-out !important;
  will-change:transform;
}

#home-gallery .card-pin:hover .overlay,
#makeup-gallery .card-pin:hover .overlay,
#mini-gallery .card-pin:hover .overlay{opacity:0 !important;border:none !important;}
#home-gallery .card-pin:hover .card-title,
#makeup-gallery .card-pin:hover .card-title,
#mini-gallery .card-pin:hover .card-title{color:inherit !important;}
#home-gallery .card-pin:hover .card-img{transform:scale(1.1) !important;}
#makeup-gallery .card-pin:hover .card-img{transform:scale(1.2) !important;}
#mini-gallery .card-pin:hover .card-img{transform:scale(1.3) !important;}

#tag-gallery .card-pin,
#post-img{cursor:zoom-in !important;}

.container h1,
.container h2 {
  text-align:center!important;
  margin-left:0!important;
  margin-bottom: 1rem;
}

#post-text {
  margin-top: 2rem; /* of 3rem als je meer ruimte wilt */
}