/* WordPress additions to the original stylesheet. Keep the original style.css untouched. */

/* Keep the fixed header below the admin bar for logged-in users. */
.admin-bar header{top:32px}
@media screen and (max-width:782px){.admin-bar header{top:46px}}
@media screen and (max-width:600px){.admin-bar header{top:0}}

/* Extra article dialogs share the look of the original #article-dialog. */
.article-dialog{width:min(950px,95vw)}
.article-dialog>img{width:100%;height:auto}
.article-dialog>p{font-size:12px;color:#aaa;margin:15px 0 0}

/* Block editor output on text pages. */
.legal-page img{max-width:100%;height:auto}
.legal-page ul,.legal-page ol{color:#bbb}
.legal-page .wp-block-image{margin:25px 0}

/* Film uploaded to the site, played in the film dialog instead of the Instagram player. */
#player-area video{display:block;width:100%;max-height:70svh;background:#000}

/* Press photo in the framed, tilted style of the about image. */
.press-visual{display:block;width:calc(100% - 30px);max-width:400px;margin:0 0 42px 8px;padding:0;border:7px solid #d2c8b3;background:#d2c8b3;box-shadow:13px 15px 0 #171613;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.press-item+article .press-visual{transform:rotate(2deg)}
.press-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center top;filter:saturate(.45);transition:filter .5s}
.press-visual:hover,.press-item+article .press-visual:hover{transform:rotate(0)}
.press-visual:hover img{filter:saturate(1)}
@media(max-width:760px){.press-visual{margin-bottom:32px}}

/* The pricing section has less top padding than the others; this makes its menu link land at the same offset. */
#pakketten{scroll-margin-top:95px}
@media(max-width:1000px){#pakketten{scroll-margin-top:65px}}

.works-foot .works-foot-socials{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:14px}
.brand-link{display:inline-flex;align-items:center;gap:9px;color:var(--white);border-bottom:1px solid #777;padding:7px 0;transition:color .3s,border-color .3s}
.brand-link:hover{color:var(--gold);border-color:var(--gold)}
.brand-link .icon{width:21px;height:21px;color:var(--gold)}
@media(max-width:760px){.works-foot-lead{flex-basis:100%}}