/*
Theme Name: Gieles Productions
Theme URI: https://www.gielesproductions.nl
Author: Fred van der Ende
Description: Blauw-wit fotografiethema voor fotografie en 112-fotografie, met weblog. Eenvoudig te beheren via het WordPress-dashboard.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: gieles
*/

:root{--n0:#030d26;--n1:#061a45;--n2:#0a2459;--b:#1f5bd1;--lb:#6ea0ff;--wit:#fff;--tekst:#1b2a4a;--lijn:#cfdcf5}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--n0);color:#fff;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:3.5px;text-transform:uppercase;font-weight:600;color:var(--lb)}
h1,h2,h3{letter-spacing:-.5px;line-height:1.1}
.screen-reader-text{position:absolute;left:-9999px}

/* topbalk */
.top{background:var(--n1);border-bottom:1px solid #12306e;font-size:13px}
.top .wrap{padding:9px 24px;display:flex;gap:14px;align-items:center}
.top b{color:var(--lb);letter-spacing:2.5px;font-size:12px}
.top i{width:7px;height:7px;border-radius:50%;background:var(--lb);display:inline-block;margin-right:8px;animation:puls 1.4s infinite}
.top span{opacity:.85;padding-left:14px;border-left:1px solid #26468f}
@keyframes puls{50%{opacity:.25}}

/* header */
.site-header{background:rgba(6,26,69,.94);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40;border-bottom:1px solid #12306e}
body.admin-bar .site-header{top:32px}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.logo b{display:block;font-size:17px;font-weight:800;letter-spacing:-.5px}
.logo small{font-size:11px;letter-spacing:3px;color:var(--lb);font-weight:600}
.logo img{max-height:48px;width:auto}
.main-nav ul{list-style:none;display:flex;gap:26px;font-size:14px}
.main-nav a{opacity:.9;padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.main-nav a:hover,.main-nav .current-menu-item a{border-color:var(--lb);opacity:1}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--b);color:#fff;font-weight:700;font-size:14px;padding:13px 22px;transition:.2s;border:1px solid var(--b);cursor:pointer;font-family:inherit}
.btn:hover{background:#2c6cf0;transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,91,209,.5)}
.btn.o{background:transparent;border-color:#3a5ba8}
.btn.o:hover{background:rgba(255,255,255,.08)}
.btn svg{width:16px;height:16px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

/* hero */
.hero{position:relative;min-height:600px;overflow:hidden;background:linear-gradient(180deg,#071c4e 0%,#05163f 55%,#030d26 100%)}
.hero .stad{position:absolute;inset:0;width:100%;height:100%}
.glow{position:absolute;left:50%;top:10%;width:70vw;height:50vw;transform:translateX(-30%);border-radius:50%;background:radial-gradient(circle,rgba(31,91,209,.45),transparent 65%);animation:adem 4s ease-in-out infinite}
@keyframes adem{50%{opacity:.55;transform:translateX(-30%) scale(1.08)}}
.hero .wrap{position:relative;z-index:2;padding-top:130px;padding-bottom:110px}
.hero h1{font-size:clamp(38px,5.4vw,60px);margin:18px 0;font-weight:800}
.hero p{max-width:460px;opacity:.9;margin-bottom:28px}
.hero .eyebrow::before{content:"";display:inline-block;width:26px;height:1px;background:var(--lb);vertical-align:middle;margin-right:12px}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.info{position:absolute;right:24px;bottom:40px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #2c4c96;background:rgba(6,26,69,.72);backdrop-filter:blur(6px);width:min(540px,calc(100% - 48px))}
.info div{padding:14px 18px;border-right:1px solid #2c4c96;font-size:13px}
.info div:last-child{border:0}
.info b{display:block;color:var(--lb);font-size:13px;margin-bottom:2px}

/* secties */
section.s{padding:90px 0}
.kop{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px}
.kop h2{font-size:clamp(26px,3vw,34px);margin-top:10px;font-weight:800}
.kop p{max-width:340px;font-size:14px;opacity:.85}
.donker{background:var(--n0)}
.licht{background:#fff;color:var(--tekst)}
.licht .eyebrow{color:var(--b)}
.licht .kop h2{color:var(--n1)}
.licht .kop p{color:#4a5b7e;opacity:1}
.mid{background:var(--n2)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.link{display:inline-block;margin-top:30px;font-size:13px;font-weight:700;color:var(--lb);border-bottom:1px solid var(--lb);padding-bottom:2px}

/* 112 kaarten */
.inzet{position:relative;aspect-ratio:1/.95;border:1px solid #26468f;overflow:hidden;background:linear-gradient(160deg,#1a4fc0,#0a2459 55%,#061a45);transition:.35s;display:block}
.inzet svg.v{position:absolute;inset:0;width:100%;height:100%}
.inzet .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s}
.inzet:hover .foto{transform:scale(1.06)}
.inzet::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(3,13,38,.92))}
.inzet:hover{transform:translateY(-6px);border-color:var(--lb);box-shadow:0 18px 40px rgba(31,91,209,.45)}
.inzet .t{position:absolute;left:22px;right:70px;bottom:20px;z-index:2}
.inzet .t small{display:block;font:12px monospace;letter-spacing:3px;opacity:.8;margin-bottom:6px}
.inzet .t b{font-size:16px;letter-spacing:.5px;text-transform:uppercase;line-height:1.2;display:block}
.inzet .pijl{position:absolute;right:20px;bottom:18px;width:34px;height:34px;border:1px solid #4a6fc0;display:grid;place-items:center;z-index:2;background:rgba(6,26,69,.6)}
.inzet .pijl svg{width:14px;height:14px}

/* fotografie */
.fk{border:1px solid var(--lijn);padding:28px;transition:.3s;background:#fff}
.fk:hover{border-color:var(--b);box-shadow:0 14px 30px rgba(31,91,209,.18);transform:translateY(-4px)}
.fk .ic{width:44px;height:44px;border:1px solid var(--lijn);display:grid;place-items:center;color:var(--b);margin-bottom:48px}
.fk .ic svg{width:22px;height:22px}
.fk h3{font-size:16px;color:var(--n1);margin-bottom:8px}
.fk p{font-size:14px;color:#4a5b7e}

/* blog kaarten */
.bk{background:var(--n1);border:1px solid #1d3b80;transition:.3s;display:block;position:relative}
.bk:hover{transform:translateY(-5px);border-color:var(--lb)}
.bk .pic{height:130px;position:relative;overflow:hidden;background:linear-gradient(120deg,#0e3a96,#0a2459)}
.bk .pic img{width:100%;height:100%;object-fit:cover}
.bk .in{padding:20px 20px 30px}
.bk .in .eyebrow{font-size:11px;letter-spacing:2.5px}
.bk h3{font-size:15px;margin:10px 0 8px}
.bk p{font-size:13.5px;opacity:.8}
.bk .a{position:absolute;right:18px;bottom:14px;opacity:.5;font-size:16px}

/* over + cta */
.over{padding:80px 0;background:#fff;color:var(--tekst)}
.over .wrap{max-width:900px;padding-left:96px}
.over .eyebrow{color:var(--b)}
.over h2{font-size:26px;margin:12px 0;color:var(--n1);font-weight:800}
.over p{max-width:560px;font-size:14.5px;color:#4a5b7e}
.cta{background:linear-gradient(180deg,#05163f,#030d26);padding:80px 0}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,3vw,32px);margin:12px 0;font-weight:800}
.cta p{max-width:400px;font-size:14px;opacity:.85}
.cta .r{font-size:13px;opacity:.95}

/* footer */
.site-footer{background:var(--n0);border-top:1px solid #12306e;font-size:13px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;padding-bottom:30px;align-items:center}
.site-footer ul{list-style:none;display:flex;gap:22px}

/* binnenpagina's, blog, artikel */
.page-hero{background:linear-gradient(180deg,#071c4e,#05163f);padding:70px 0 50px;border-bottom:1px solid #12306e}
.page-hero h1{font-size:clamp(30px,4.5vw,48px);font-weight:800;margin-top:10px}
.page-hero p{opacity:.85;max-width:600px;margin-top:12px}
.archief{padding:60px 0 90px;background:var(--n0)}
.archief .grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pager{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.pager a,.pager span{border:1px solid #26468f;padding:8px 14px;font-size:14px}
.pager .current{background:var(--b);border-color:var(--b)}
.artikel{background:#fff;color:var(--tekst);padding:60px 0 90px}
.artikel .wrap{max-width:780px}
.artikel .uitgelicht{margin-bottom:34px}
.artikel .uitgelicht img{width:100%}
.artikel .inhoud{font-size:17px;line-height:1.75}
.artikel .inhoud p{margin-bottom:1.2em}
.artikel .inhoud h2,.artikel .inhoud h3{color:var(--n1);margin:1.6em 0 .6em}
.artikel .inhoud a{color:var(--b);text-decoration:underline}
.artikel .inhoud img{margin:1.4em 0}
.artikel .inhoud .wp-block-gallery{gap:10px}
.artikel .meta{color:#6b7a9c;font-size:13px;margin-bottom:24px}
.fout{padding:140px 0;text-align:center;background:var(--n0)}
.fout h1{font-size:90px;color:var(--lb)}

/* animatie */
.ont{opacity:0;transform:translateY(26px);transition:.9s}
.ont.z{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ont{opacity:1;transform:none}.glow,.top i{animation:none}}

@media(max-width:900px){
.main-nav{display:none}
.main-nav.open{display:block;position:absolute;top:78px;left:0;right:0;background:var(--n1);padding:16px 24px}
.main-nav.open ul{flex-direction:column;gap:14px}
.menu-toggle{display:block}.header-btn{display:none}
.grid3,.archief .grid4{grid-template-columns:1fr}
.kop{flex-direction:column;align-items:flex-start}
.info{position:relative;right:auto;bottom:auto;margin:0 24px 30px}
.hero .wrap{padding-top:80px;padding-bottom:40px}
.over .wrap{padding-left:24px}
}