/* Opheij Schilders & Decorateurs – nagebouwd naar het oude Enfold-ontwerp */

:root {
  --navy: #071b46;
  --gold: #cc9000;
  --gold-light: #edc568;
  --brown: #786635;
  --cream: #faf8f0;
  --cream-border: #f0dfb7;
  --teal: #65b0a3;
  --sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Arvo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--teal); }
body { margin: 0; font: 13px/1.65 var(--sans); color: var(--navy); }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: var(--navy); text-decoration: none; }
p { margin: .85em 0; }
h3 { font: 600 20px/1.1 var(--serif); color: var(--gold); margin: 0; }
button { font: inherit; cursor: pointer; }

.wrap { width: 1130px; max-width: 90%; margin: 0 auto; }
.container { max-width: 1130px; margin: 0 auto; padding: 0 50px; }

/* Kop */
.header {
  background: var(--gold-light) url(../img/achtergrond-header.jpg) top center no-repeat;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  position: relative;
  z-index: 10;
}
.header .container { display: flex; justify-content: space-between; height: 100px; }
.logo img { width: 254px; height: 94px; margin-top: 0; object-fit: contain; }
.menu { list-style: none; margin: 0 0 0 -13px; padding: 0; display: flex; }
.menu > li { position: relative; }
.menu > li > a {
  display: block; position: relative; padding: 0 13px; line-height: 100px;
  font-weight: 600; color: var(--brown);
}
.menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--navy); opacity: 0; transition: opacity .3s;
}
.menu > li.current > a, .menu > li > a:hover { color: var(--navy); }
.menu > li.current > a::after, .menu > li:hover > a::after { opacity: 1; }
.menu ul {
  list-style: none; margin: -1px 0 0; padding: 0; position: absolute; top: 100%; left: 0; width: 208px;
  background: var(--gold-light); border-top: 2px solid var(--navy);
  visibility: hidden; opacity: 0; transition: opacity .3s;
}
.menu li:hover > ul, .menu li:focus-within > ul { visibility: visible; opacity: 1; }
.menu ul a { display: block; padding: 8px 15px; font-size: 12px; line-height: 23px; color: var(--brown); }
.menu ul a:hover { color: var(--navy); background: #f0d07f; }
.burger { display: none; }

/* Inhoud */
.main { background: var(--cream) url(../img/achtergrond-nieuws.jpg) top center repeat-y; }
.section { border-top: 1px solid var(--cream-border); }
.section > .container { padding-top: 50px; padding-bottom: 50px; }

.special-heading { display: flex; align-items: center; padding-bottom: 10px; }
.special-heading .line { flex: 1; margin-left: 15px; border-top: 1px solid var(--navy); opacity: .15; }

.cols { display: flex; gap: 6%; }
.cols.half > div { width: 47%; }
.cols.fourth > div { width: 20.5%; }
.cols.two-third > div:first-child { width: 64.67%; }
.cols.two-third > div:last-child { width: 29.33%; }

.hr { position: relative; height: 1px; border-top: 1px solid var(--gold); margin: 20px 0 40px; }
.hr span {
  position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; margin-left: -5px;
  border: 2px solid var(--gold); border-radius: 50%; background: var(--cream);
}

/* Diavoorstelling */
.slideshow { position: relative; overflow: hidden; background: #ebebeb; }
.slideshow img { width: 100%; }
.slideshow img:not(:first-child) { position: absolute; inset: 0; }
.slideshow img { opacity: 0; transition: opacity 1s; }
.slideshow img.active { opacity: 1; }
.slideshow .arrow {
  position: absolute; top: 50%; margin-top: -50px; width: 35px; height: 100px; border: 0; padding: 0;
  background: rgba(0, 0, 0, .1); color: #fff; font-size: 34px; line-height: 100px; opacity: 0; transition: opacity .3s;
}
.slideshow:hover .arrow { opacity: 1; }
.slideshow .arrow:hover { background: rgba(0, 0, 0, .3); }
.slideshow .prev { left: 0; }
.slideshow .next { right: 0; }
.slideshow .dots { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 0; }
.slideshow .dots button {
  width: 14px; height: 14px; margin: 0 1px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6);
}
.slideshow .dots button.active { background: #fff; }

/* Galerij */
.gallery-big { display: block; padding: 7px; background: var(--cream); border: 1px solid var(--cream-border); margin-bottom: -1px; }
.gallery-big img { width: 100%; aspect-ratio: 650 / 525; object-fit: cover; transition: opacity .3s; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); }
.gallery-thumbs a { display: block; margin: 0 -1px -1px 0; }
.gallery-thumbs img {
  width: 100%; aspect-ratio: 117 / 95; object-fit: cover; padding: 7px;
  background: var(--cream); border: 1px solid var(--cream-border); transition: opacity .3s;
}
.gallery-thumbs a:hover img { opacity: .6; }

/* Masonry-tegels */
.masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ebebeb; grid-auto-flow: dense; }
.masonry > * {
  position: relative; display: block; overflow: hidden; aspect-ratio: 282 / 226;
  background: center / cover no-repeat;
}
.masonry > *::before { content: ""; position: absolute; inset: 0; background: rgba(250, 248, 240, 0); transition: background .4s; }
.masonry > a:hover::before { background: rgba(250, 248, 240, .3); }
.masonry .caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: var(--cream);
  font: 600 15px/1.3 var(--serif); color: var(--gold);
  transform: translateY(100%); transition: transform .4s;
}
.masonry > *:hover .caption { transform: none; }
.projects > [data-size="landscape"] { grid-column: span 2; aspect-ratio: 565 / 226; }
.projects > [data-size="portrait"] { grid-row: span 2; aspect-ratio: auto; }
.projects > .hidden { display: none; }

.sort {
  background: var(--cream); padding: 20px 40px; margin-bottom: 1px; text-align: center;
  border-top: 1px solid var(--cream-border);
}
.sort button { border: 0; background: none; padding: 0; color: #838da3; }
.sort button.active, .sort button:hover { color: var(--navy); }
.sort small { display: none; }
.sort span { margin: 0 6px; color: #838da3; }

/* Voettekst */
.footer { background: var(--navy); color: #fff; padding: 15px 0 30px; border-top: 1px solid var(--navy); }
.footer a { color: #fff; }
.footer .widget { margin: 30px 0; }
.footer h3 { font: 600 14.3px/1.1 var(--serif); color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 8px; }

.socket {
  background: var(--navy) url(../img/achtergrond-socket.jpg) top center repeat;
  border-top: 1px solid #444; color: #eee; font-size: 11px; padding: 15px 0;
}

/* Fotoviewer */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(11, 11, 11, .8);
  display: flex; align-items: center; justify-content: center;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.lightbox-overlay button {
  position: absolute; border: 0; background: none; color: #fff; opacity: .65; font-size: 60px; line-height: 1; padding: 10px 20px;
}
.lightbox-overlay button:hover { opacity: 1; }
.lb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0; top: 50%; transform: translateY(-50%); }
.lb-close { right: 0; top: 0; font-size: 40px !important; }

/* Mobiel */
@media (max-width: 767px) {
  .wrap { width: 100%; max-width: 100%; }
  .container { padding: 0 7.5%; }
  .header .container { height: 80px; justify-content: center; position: relative; }
  .logo img { width: 216px; height: 80px; }
  .burger {
    display: block; position: absolute; right: 7.5%; top: 0; width: 61px; height: 80px;
    border: 0; background: none; padding: 0 13px;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 35px; height: 3px; background: var(--brown); position: relative; content: "";
  }
  .burger span::before { position: absolute; top: -10px; }
  .burger span::after { position: absolute; top: 10px; }
  .main-nav {
    display: none; position: absolute; top: 81px; left: 0; right: 0;
    background: var(--gold-light) url(../img/achtergrond-header.jpg) top center;
    border-bottom: 2px solid var(--navy);
  }
  .main-nav.open { display: block; }
  .menu { display: block; margin: 0; padding: 10px 7.5%; }
  .menu > li > a { line-height: 44px; padding: 0; }
  .menu > li > a::after { display: none; }
  .menu ul { position: static; visibility: visible; opacity: 1; width: auto; border: 0; background: none; padding-left: 15px; }
  .menu ul a { padding: 4px 0; }
  .cols { display: block; }
  .cols > div { width: auto !important; }
  .main .cols.fourth > div + div { margin-top: 20px; }
  .main .cols.fourth img { width: 100%; }
  .masonry { grid-template-columns: repeat(2, 1fr); }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .cols.two-third > div + div { margin-top: 30px; }
}