/*
Theme Name: Özoglu — Het Werkboek
Theme URI: https://ozoglu.nl
Author: Studio (voor Halil Özoglu)
Author URI: https://ozoglu.nl
Description: Maatwerk WordPress-thema voor Halil Özoglu — schilder, timmerman & houtbewerker in Amsterdam-Noord. Handgemaakt "Werkboek"-ontwerp: kraftpapier, handgeschreven inkt, polaroids met plakband, stempels. Portfolio (Werk) en borrelplanken die klanten via WhatsApp, mail of telefoon kunnen bestellen — geen webshop-plugin nodig.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ozoglu
Tags: portfolio, business, custom-colors, custom-menu, featured-images
*/

:root{
  --kraft:#E7DEC9; --kraft-2:#DDD2B8; --card:#FBF7EC;
  --ink:#211C15; --ink-soft:#5b5142;
  --red:#B23A2E; --wood:#8A5230; --wood-2:#6e3f23; --navy:#22303a;
  --hand:"Caveat",cursive;
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--kraft);color:var(--ink);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:linear-gradient(rgba(33,28,21,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(33,28,21,.045) 1px,transparent 1px);
  background-size:28px 28px}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.hand{font-family:var(--hand)}
.kicker{font-family:var(--hand);font-size:26px;color:var(--red);display:inline-block;transform:rotate(-2deg)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:.98}
h2{font-size:clamp(34px,4.6vw,62px);margin-top:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:300;background:var(--ink);color:var(--kraft);padding:10px 16px}

/* hand-getekende cirkel */
.circle{position:relative;display:inline-block}
.circle svg{position:absolute;left:-10px;top:-8px;width:calc(100% + 22px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.circle svg path{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900}
.circle.in svg path{animation:draw 1.4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* knoppen */
.cta,.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;
  text-decoration:none;padding:13px 22px;border:2px solid var(--ink);border-radius:2px;color:var(--ink);background:transparent;cursor:pointer;transition:.18s}
.cta,.btn-dark{background:var(--ink);color:var(--kraft);box-shadow:4px 4px 0 var(--red)}
.cta:hover,.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red);color:var(--kraft)}
.btn-ghost:hover,.btn-paper:hover,.btn-line:hover{background:var(--red);border-color:var(--red);color:var(--kraft)}
.btn .ic,.cta .ic{display:inline-block;transition:transform .3s}
.btn:hover .ic,.cta:hover .ic{transform:translateX(3px)}
.tel{font-family:var(--hand);font-size:24px;color:var(--ink);text-decoration:none}
.tel:hover{color:var(--red)}

/* ===== INTRO — "Halil doet het": opbouwen & schilderen ===== */
.intro{position:fixed;inset:0;z-index:200;background:var(--kraft);overflow:hidden;will-change:transform;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(33,28,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(33,28,21,.05) 1px,transparent 1px);
  background-size:28px 28px}
.intro.done{display:none}
.intro-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:0 22px;text-align:center;transform:translateY(-5vh)}
.intro-kick{font-family:var(--hand);font-size:28px;color:var(--red);transform:rotate(-2deg)}
.intro-word{position:relative;font-family:var(--display);font-weight:800;text-transform:none;
  font-size:clamp(42px,8vw,104px);line-height:.95;color:var(--ink);max-width:13ch}
.intro-bar{width:min(300px,62vw);height:12px;border-radius:6px;background:rgba(33,28,21,.10);overflow:hidden;border:2px solid var(--ink)}
.intro-bar i{display:block;height:100%;width:0;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 9px),linear-gradient(90deg,var(--wood),#a96a3f)}
.intro-label{font-family:var(--hand);font-size:22px;color:var(--ink-soft)}
.intro-roller{position:absolute;left:-5%;right:-5%;bottom:0;height:60px;opacity:0;z-index:3;
  background:linear-gradient(180deg,#c14b3b,var(--red));box-shadow:0 -16px 36px -6px rgba(178,58,46,.5)}
.intro-roller::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 3px,transparent 3px 10px)}
.intro .tool{position:absolute;width:120px;height:120px;z-index:2}
.intro .hammer{left:-150px;top:-6px}
.intro .brush{right:-150px;top:24px}
.hammer-arm{transform-box:fill-box;transform-origin:52% 96%}
.brush-arm{transform-box:fill-box;transform-origin:50% 8%}
@media(max-width:760px){.intro .tool{display:none}.intro-stage{transform:translateY(-3vh)}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
@media (prefers-reduced-motion:no-preference){
  .intro-kick{opacity:0;animation:intro-fade .7s ease .2s forwards}
  .intro-word{clip-path:inset(0 100% -14% 0);animation:intro-paint 1.7s cubic-bezier(.5,.02,.2,1) .5s forwards}
  @keyframes intro-paint{to{clip-path:inset(0 0 -14% 0)}}
  .intro-bar i{animation:intro-build 2.6s cubic-bezier(.3,.1,.2,1) 1.1s forwards}
  @keyframes intro-build{to{width:100%}}
  .intro-label{opacity:0;animation:intro-fade .8s ease 1.6s forwards}
  @keyframes intro-fade{to{opacity:1}}
  .hammer-arm{animation:hammer-tap .82s ease-in-out .7s infinite}
  @keyframes hammer-tap{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(10deg)}64%{transform:rotate(3deg)}}
  .brush-arm{animation:brush-stroke 1.15s ease-in-out .7s infinite}
  @keyframes brush-stroke{0%,100%{transform:translateX(-12px) rotate(-9deg)}50%{transform:translateX(13px) rotate(9deg)}}
  .intro-roller{animation:intro-fade .4s ease 3.7s forwards}
  .intro{animation:intro-lift 1.2s cubic-bezier(.76,0,.24,1) 4.1s forwards}
  @keyframes intro-lift{to{transform:translateY(-100%)}}
}

/* ===== NAV ===== */
.site-nav{position:sticky;top:0;z-index:50;background:var(--kraft);border-bottom:2px solid var(--ink)}
.nav-inner{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px 32px;gap:20px}
.logo{font-family:var(--hand);font-size:32px;font-weight:700;text-decoration:none;color:var(--ink)}
.logo b{color:var(--red)}
.logo img{max-height:42px;width:auto}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;padding-bottom:2px;border-bottom:2px solid transparent;transition:.25s}
.nav-links a:hover,.nav-links .current-menu-item>a{border-color:var(--red);color:var(--red)}
.nav-cta{padding:11px 18px;font-size:14px}
.nav-right{display:flex;align-items:center;gap:18px}
.hamb{display:none;width:46px;height:42px;border:2px solid var(--ink);border-radius:3px;background:transparent;position:relative;cursor:pointer}
.hamb span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:.3s}
.hamb span:nth-child(1){top:14px}.hamb span:nth-child(2){bottom:14px}
.hamb.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.hamb.open span:nth-child(2){bottom:19px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--kraft);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 36px;
  opacity:0;pointer-events:none;transform:translateY(-10px);transition:.4s}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu ul{list-style:none}
.mobile-menu a{font-family:var(--display);font-weight:800;font-size:clamp(32px,9vw,56px);color:var(--ink);text-decoration:none;display:block;padding:6px 0}
.mobile-menu a:hover{color:var(--red)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* ===== HERO ===== */
.hero{position:relative;padding:64px 0 84px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(46px,7vw,100px);line-height:.95}
.hero .pen{font-family:var(--hand);font-weight:700;color:var(--red);font-size:1.05em;display:inline-block;transform:rotate(-3deg)}
.lede{max-width:440px;margin:26px 0 30px;font-size:18px;color:var(--ink-soft)}
.lede b{color:var(--ink)}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.stamp{display:inline-block;transform:rotate(-7deg);border:3px double var(--red);color:var(--red);border-radius:8px;padding:8px 16px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.1em;opacity:.9;text-align:center;line-height:1.2;margin-top:34px}
.stamp small{display:block;font-family:var(--hand);font-size:15px;letter-spacing:0}

/* polaroids */
.polaroid{position:absolute;background:#fffdf7;padding:12px 12px 0;box-shadow:0 18px 36px -18px rgba(33,28,21,.6);border:1px solid rgba(0,0,0,.05)}
.polaroid img{width:100%;object-fit:cover}
.polaroid figcaption{font-family:var(--hand);font-size:20px;text-align:center;padding:7px 4px 12px}
.tape{position:absolute;width:92px;height:28px;background:rgba(178,58,46,.20);border-left:1px dashed rgba(178,58,46,.4);border-right:1px dashed rgba(178,58,46,.4);top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg)}
.board{position:relative;height:520px}
.board .p1{width:260px;top:0;right:30px;transform:rotate(4deg);z-index:3}.board .p1 img{height:300px}
.board .p2{width:205px;bottom:6px;right:220px;transform:rotate(-6deg);z-index:2}.board .p2 img{height:235px}
.board .p3{width:165px;bottom:-12px;right:0;transform:rotate(8deg);z-index:4}.board .p3 img{height:145px}
.arrow{position:absolute;left:-30px;top:150px;font-family:var(--hand);color:var(--red);font-size:22px;transform:rotate(-12deg)}

/* materiaal-strip */
.strip{display:flex;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.strip div{flex:1;padding:15px 18px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.04em;border-right:2px solid var(--ink)}
.strip div:last-child{border-right:none}
.strip .s1{background:var(--navy);color:var(--kraft)}.strip .s2{background:var(--wood);color:var(--kraft)}
.strip .s3{background:var(--red);color:var(--kraft)}.strip .s4{background:var(--kraft-2)}

/* secties */
section{padding:80px 0}
.sec-head{margin-bottom:46px;max-width:680px}
.sec-head p{color:var(--ink-soft);margin-top:14px;font-size:17px}
.eyebrow{font-family:var(--hand);font-size:26px;color:var(--red);display:inline-block;transform:rotate(-2deg)}

/* DIENSTEN — index-kaarten */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:3px;padding:14px;position:relative;box-shadow:5px 5px 0 rgba(33,28,21,.12);transition:.2s;text-decoration:none;color:var(--ink);display:block}
.card:nth-child(odd){transform:rotate(-1deg)}.card:nth-child(even){transform:rotate(1deg)}
.card:hover{transform:translateY(-6px) rotate(0);box-shadow:8px 10px 0 rgba(178,58,46,.25)}
.card .num{position:absolute;top:-14px;left:-12px;background:var(--red);color:var(--kraft);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:15px;transform:rotate(-8deg)}
.card img{width:100%;height:150px;object-fit:cover;border-radius:2px}
.card h3{font-family:var(--display);font-weight:700;font-size:21px;margin:14px 0 6px}
.card p{font-size:14px;color:var(--ink-soft)}
.card .note{font-family:var(--hand);font-size:18px;color:var(--red);margin-top:8px}

/* PRIKBORD */
.pin{background:var(--kraft-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.pin-board{position:relative;height:560px;margin-top:30px}
.pin-board .polaroid{position:absolute}
.pp1{width:240px;left:2%;top:20px;transform:rotate(-5deg)}.pp1 img{height:280px}
.pp2{width:215px;left:24%;top:90px;transform:rotate(3deg)}.pp2 img{height:250px}
.pp3{width:250px;left:46%;top:10px;transform:rotate(-3deg)}.pp3 img{height:175px}
.pp4{width:200px;left:70%;top:80px;transform:rotate(6deg)}.pp4 img{height:240px}
.pp5{width:215px;left:30%;top:300px;transform:rotate(-2deg)}.pp5 img{height:160px}
.pp6{width:235px;left:55%;top:280px;transform:rotate(4deg)}.pp6 img{height:265px}
.pin .note{position:absolute;right:4%;top:330px;font-family:var(--hand);color:var(--red);font-size:26px;transform:rotate(-6deg)}

/* OVER */
.over{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.over p{font-size:18px;color:var(--ink-soft);margin-bottom:16px;max-width:50ch}
.over .u{position:relative;color:var(--ink);font-weight:600}
.over .u::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:7px;background:rgba(178,58,46,.3);z-index:-1}
.sign{font-family:var(--hand);font-size:40px;margin-top:18px}
.stamps{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.over .polaroid{position:relative;width:330px;margin:0 auto;transform:rotate(-3deg)}
.over .polaroid img{height:380px}

/* BORRELPLANKEN */
.shop{background:var(--card);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px}
.tagcard{background:var(--kraft);border:2px solid var(--ink);border-radius:3px 14px 3px 3px;padding:16px;position:relative;box-shadow:5px 5px 0 rgba(33,28,21,.12)}
.tagcard::before{content:"";position:absolute;top:14px;right:16px;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:var(--kraft-2)}
.tagcard img{width:100%;height:200px;object-fit:cover;border-radius:2px}
.tagcard h3{font-family:var(--display);font-weight:700;font-size:20px;margin:14px 0 4px}
.tagcard .price{font-family:var(--hand);font-size:34px;color:var(--red);line-height:1}
.order-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.order-actions .btn{font-size:13px;padding:9px 12px;box-shadow:none}
.order-actions .btn-dark{box-shadow:3px 3px 0 var(--red)}

/* CONTACT */
.contact{text-align:center}
.contact h2{font-size:clamp(40px,7vw,96px)}
.big-tel{font-family:var(--hand);font-size:clamp(40px,8vw,90px);color:var(--red);text-decoration:none;display:inline-block;transform:rotate(-2deg);margin:14px 0}
.contact .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:10px;align-items:center}

/* FOOTER */
.site-footer{border-top:2px solid var(--ink);margin-top:0}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;padding-top:40px;padding-bottom:40px}
.site-footer .logo{font-size:28px}
.foot-links{display:flex;gap:22px;font-size:14px;flex-wrap:wrap}
.foot-links a{color:var(--ink-soft);text-decoration:none}.foot-links a:hover{color:var(--red)}
.foot-note{font-family:var(--hand);font-size:20px;color:var(--ink-soft)}

/* ===== BINNENPAGINA'S / ARCHIEVEN ===== */
.page-hero{padding:64px 0 26px}
.page-hero h1{font-size:clamp(40px,6vw,86px)}
.page-hero p{max-width:50ch;margin-top:16px;color:var(--ink-soft);font-size:18px}
.page-body{padding:20px 0 90px}
.page-body .wrap{max-width:820px}
.entry-content{font-size:18px;color:var(--ink-soft)}
.entry-content h2{font-size:32px;margin:36px 0 14px;color:var(--ink)}
.entry-content h3{font-size:23px;margin:26px 0 10px;color:var(--ink)}
.entry-content p{margin-bottom:18px}.entry-content a{color:var(--red)}
.entry-content img{border-radius:2px;margin:22px 0;border:2px solid var(--ink)}
.entry-content ul,.entry-content ol{margin:0 0 18px 22px}
.over-img{background:#fffdf7;padding:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 36px -18px rgba(33,28,21,.5);transform:rotate(-1.5deg)}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:6px 0}
.work-item{display:block;text-decoration:none;color:var(--ink)}
.work-item .card{padding:12px}
.work-item .card-core{overflow:hidden;border-radius:2px}
.work-item .card-core img{width:100%;height:240px;object-fit:cover}
.work-item h3{font-family:var(--display);font-weight:700;font-size:20px;margin-top:14px}
.work-item .meta{font-family:var(--hand);font-size:18px;color:var(--red);margin-top:2px}

.plank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:6px 0}
.plank-card{background:var(--kraft);border:2px solid var(--ink);border-radius:3px 14px 3px 3px;padding:16px;box-shadow:5px 5px 0 rgba(33,28,21,.12)}
.plank-card .shell{padding:0;border:none;background:none;box-shadow:none}
.plank-card img{height:220px;width:100%;object-fit:cover;border-radius:2px}
.plank-body h3{font-family:var(--display);font-weight:700;font-size:20px;margin:14px 0 4px}
.plank-body .price{font-family:var(--hand);font-size:32px;color:var(--red)}
.plank-desc{color:var(--ink-soft);font-size:14px;margin-top:6px}

.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.shop-img .shell,.shell{background:#fffdf7;padding:12px;border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 36px -18px rgba(33,28,21,.5)}
.shop-img .shell img{height:440px;width:100%;object-fit:cover}
.price{font-family:var(--hand);font-size:40px;color:var(--red)}
.hero-tel{font-family:var(--hand);font-size:22px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red)}

.pagination,.nav-links.pagination{margin-top:40px}
.page-numbers{display:inline-block;padding:8px 14px;border:2px solid var(--ink);margin-right:6px;text-decoration:none;color:var(--ink);font-weight:600}
.page-numbers.current{background:var(--ink);color:var(--kraft)}

@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .hamb{display:block}
  .hero,.over,.shop-grid{grid-template-columns:1fr}
  .board{height:430px;margin-top:24px}
  .cards{grid-template-columns:1fr 1fr}
  .tags,.plank-grid,.work-grid{grid-template-columns:1fr}
  .pin-board{height:auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
  .pin-board .polaroid{position:static;transform:rotate(-2deg)}
  .pin .note{display:none}
  .strip{flex-wrap:wrap}.strip div{flex:1 0 50%}
}