/*
Theme Name: LB Fotografie Bilingual
Theme URI: https://www.lbfotografie.nl
Author: OpenAI for LB Fotografie
Description: Donker, tweetalig fotografieportfolio voor LB Fotografie. Geen betaalde pagebuilder nodig.
Version: 2.2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lbfotografie
*/

:root {
  --bg: #0d0d0f;
  --panel: #17171a;
  --text: #f7f5f1;
  --muted: #b9b5ad;
  --accent: #d8b26e;
  --line: rgba(255,255,255,.12);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}
a { color: inherit; }
img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(13,13,15,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: 76px; display: flex; align-items: center; gap: 24px;
}
.brand { text-decoration: none; font-size: 1.25rem; font-weight: 800; letter-spacing: .12em; }
.brand span { color: var(--accent); }
.nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.nav a { text-decoration: none; font-size: .94rem; color: var(--muted); }
.nav a:hover { color: var(--text); }
.lang-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 999px; padding: 8px 12px; cursor: pointer; font-weight: 700;
}
.menu-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--text); padding:8px 11px; }
.hero {
  min-height: 82vh;
  display: grid; place-items: end start;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.18)),
    var(--hero-image, linear-gradient(130deg,#222,#090909));
  background-size: cover; background-position: center;
}
.hero-content { padding: 110px 0 90px; max-width: 760px; }
.eyebrow { color: var(--accent); letter-spacing: .18em; text-transform: uppercase; font-size:.78rem; font-weight:800; }
h1,h2,h3 { line-height:1.1; margin-top:0; }
h1 { font-size: clamp(3rem, 8vw, 6.8rem); margin-bottom:22px; }
h2 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom:24px; }
h3 { font-size:1.35rem; }
.lead { font-size: clamp(1.05rem,2vw,1.3rem); color:#ece9e2; max-width:650px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button {
  display:inline-block; padding:13px 20px; border-radius:3px; text-decoration:none;
  background:var(--accent); color:#15120d; font-weight:800; border:1px solid var(--accent);
}
.button.secondary { background:transparent; color:var(--text); border-color:rgba(255,255,255,.45); }
section { padding: 92px 0; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-photo {
  min-height:520px; border:1px solid var(--line);
  background-size:cover; background-position:center;
}
.placeholder-photo {
  min-height:520px; border:1px solid var(--line);
  background: linear-gradient(145deg,#2b2b2f,#111);
  display:grid; place-items:center; color:var(--muted); text-align:center; padding:30px;
}
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card {
  background:var(--panel); border:1px solid var(--line); padding:28px;
  min-height:220px;
}
.card .number { color:var(--accent); font-weight:800; font-size:.82rem; letter-spacing:.15em; }
.portfolio-card {
  min-height:390px; position:relative; overflow:hidden; border:1px solid var(--line);
  background-size:cover; background-position:center;
}
.portfolio-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 25%,rgba(0,0,0,.88));
}
.portfolio-card .inside { position:absolute; z-index:2; left:24px; right:24px; bottom:22px; }
.price { color:var(--accent); font-size:1.4rem; font-weight:800; }
.band { background:#f0ece4; color:#171717; }
.band .muted { color:#555; }
.steps { counter-reset: step; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step { border-top:2px solid #9d7a3f; padding-top:20px; }
.quote { font-family:Georgia,serif; font-size:clamp(1.7rem,4vw,3rem); max-width:900px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-list { list-style:none; padding:0; }
.contact-list li { margin-bottom:12px; }
.site-footer { border-top:1px solid var(--line); padding:30px 0; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.footer-legal { display:flex; gap:16px; flex-wrap:wrap; }
.footer-legal a { color:var(--muted); text-decoration:none; }
.footer-legal a:hover { color:var(--text); text-decoration:underline; }
.notice {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111; border:1px solid var(--line); padding:10px 16px;
  opacity:0; pointer-events:none; transition:.2s; z-index:9999;
}
.notice.show { opacity:1; }
.wp-block-image img { border-radius:2px; }
.content-page { padding:80px 0; max-width:850px; }
@media (max-width: 900px) {
  .grid,.steps { grid-template-columns:1fr 1fr; }
  .split,.contact-grid { grid-template-columns:1fr; }
  .nav { display:none; position:absolute; top:76px; left:0; right:0; background:#111; padding:20px; flex-direction:column; align-items:flex-start; }
  .nav.open { display:flex; }
  .menu-toggle { display:block; }
  .lang-toggle { margin-left:0; }
}
@media (max-width: 600px) {
  .grid,.steps { grid-template-columns:1fr; }
  .container { width:min(var(--max),calc(100% - 28px)); }
  section { padding:68px 0; }
  .hero { min-height:74vh; }
}


/* Complete update 1.3 */
.portfolio-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.portfolio-filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 14px;border-radius:999px;cursor:pointer;font-weight:700}
.portfolio-filter:hover,.portfolio-filter.active{background:var(--accent);border-color:var(--accent);color:#15120d}
.portfolio-card[hidden]{display:none!important}
.portfolio-card{cursor:pointer;text-decoration:none}
.portfolio-card:focus-visible,.portfolio-filter:focus-visible,.lightbox-close:focus-visible,.lightbox-nav:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:10000;display:none;align-items:center;justify-content:center;padding:58px 70px}
.lightbox.open{display:flex}
.lightbox-image{max-width:100%;max-height:86vh;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.lightbox-caption{position:absolute;left:20px;right:20px;bottom:14px;text-align:center;color:#fff}
.lightbox-close,.lightbox-nav{position:absolute;background:rgba(15,15,15,.78);color:#fff;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.lightbox-close{top:16px;right:18px;border-radius:50%;width:44px;height:44px;font-size:25px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:46px;height:60px;font-size:30px}
.lightbox-prev{left:14px}.lightbox-next{right:14px}
.single-portfolio article img,.content-page article img{cursor:zoom-in}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.header-inner{min-height:68px}.nav{top:68px;max-height:calc(100vh - 68px);overflow:auto}.nav a{font-size:1rem;padding:8px 0}.hero-content{padding:90px 0 70px}.portfolio-card{min-height:330px}.footer-inner{justify-content:center;text-align:center}.lightbox{padding:52px 12px}.lightbox-nav{width:40px;height:52px}.lightbox-prev{left:4px}.lightbox-next{right:4px}}
@media(max-width:600px){h1{font-size:clamp(2.55rem,15vw,4.3rem)}h2{font-size:clamp(2rem,10vw,3rem)}.actions .button{width:100%;text-align:center}.portfolio-filters{gap:7px}.portfolio-filter{padding:8px 11px;font-size:.86rem}}


/* LB Fotografie 2.0 */
body.light-mode { --bg:#f7f5f1; --panel:#ffffff; --text:#17171a; --muted:#5f5c56; --line:rgba(0,0,0,.13); }
body.light-mode .site-header { background:rgba(247,245,241,.94); }
body.light-mode .band { background:#ece9e3; }
body.light-mode .hero { color:#fff; }
.theme-toggle,.portfolio-search {
  border:1px solid var(--line); background:transparent; color:var(--text); border-radius:999px;
}
.theme-toggle { padding:8px 11px; cursor:pointer; }
.portfolio-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:28px; }
.portfolio-search { min-width:min(320px,100%); padding:11px 15px; }
.portfolio-card { position:relative; overflow:hidden; }
.portfolio-card[hidden] { display:none !important; }
.favorite-button { position:absolute; top:12px; right:12px; z-index:3; width:40px; height:40px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.55); color:white; font-size:1.25rem; cursor:pointer; }
.favorite-button.active { background:var(--accent); color:#16120c; }
.watermark::after { content:'© LB Fotografie'; position:absolute; right:14px; bottom:12px; color:rgba(255,255,255,.7); font-size:.75rem; letter-spacing:.06em; text-shadow:0 1px 3px #000; pointer-events:none; }
.contact-form { display:grid; gap:14px; }
.contact-form label { display:grid; gap:6px; font-weight:700; }
.contact-form input,.contact-form textarea { width:100%; padding:12px 13px; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:4px; font:inherit; }
.contact-form textarea { min-height:150px; resize:vertical; }
.form-message { padding:12px 14px; border:1px solid var(--line); margin-bottom:18px; }
.social-links { display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.footer-inner { align-items:center; }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.content-page { min-height:60vh; padding:80px 0; }
.content-page article { max-width:850px; margin:0 auto; }
.content-page img { cursor:zoom-in; }
@media(max-width:900px){ .theme-toggle { margin-left:0; } .portfolio-toolbar { align-items:stretch; } .portfolio-search { min-width:100%; } }

/* 2.1 stability and map improvements */
.map-embed { margin-top: 28px; }
.map-embed h3 { margin-bottom: 12px; }
.map-embed iframe { display: block; border: 0; border-radius: 4px; background: var(--panel); }
.menu-toggle:focus-visible, .theme-toggle:focus-visible, .lang-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }


/* 2.1.5 equal portfolio tiles: no masonry gaps */
.single-portfolio .wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
}
.single-portfolio .wp-block-gallery.has-nested-images > figure.wp-block-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.single-portfolio .wp-block-gallery.has-nested-images > figure.wp-block-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}
@media (max-width: 900px) {
  .single-portfolio .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .single-portfolio .wp-block-gallery.has-nested-images {
    grid-template-columns: 1fr;
  }
}

/* 2.1.6 category cover image fallback */
.portfolio-card:not([style]){background:linear-gradient(145deg,#2b2b2f,#111);}




/* 2.2.1: FooGallery correct en volledig weergeven op portfolio-pagina's */
.single-portfolio article {
  max-width: none;
  width: 100%;
}

.single-portfolio .foogallery,
.single-portfolio .fg-gallery,
.single-portfolio .foogallery-container,
.single-portfolio [id^="foogallery-gallery-"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Laat FooGallery zelf afmetingen, verhoudingen en lightbox bepalen. */
.single-portfolio .foogallery img,
.single-portfolio .fg-gallery img,
.single-portfolio .foogallery-container img,
.single-portfolio [id^="foogallery-gallery-"] img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

/* Voorkom dat WordPress-galerijregels op FooGallery-onderdelen worden toegepast. */
.single-portfolio .foogallery figure,
.single-portfolio .fg-gallery figure,
.single-portfolio .foogallery-container figure,
.single-portfolio [id^="foogallery-gallery-"] figure {
  width: auto;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
}


/* 2.2.2: uitgelichte afbeelding nooit los boven FooGallery tonen */
.single-portfolio article > .post-thumbnail,
.single-portfolio article > .featured-image,
.single-portfolio article > img.wp-post-image,
.single-portfolio article > a > img.wp-post-image,
.single-portfolio article > figure:has(> img.wp-post-image) {
  display: none !important;
}