/*
Theme Name: Kleine Graafwerken Stegen
Theme URI: https://stegen.tpot-solutions.com/
Author: TPoT Solutions
Description: Reproductie van de bestaande website van Kleine Graafwerken Stegen.
Version: 1.0.0
Text Domain: stegen-replica
*/

:root{--accent:#f53123;--text:#222;--muted:#777;--page-width:920px;--line:#eee}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65}
a{color:#c47d46;text-decoration:underline}
a:hover{color:var(--accent)}
.site-header{min-height:60px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px 24px;gap:55px;position:relative;z-index:2}
.site-title{color:#111;text-decoration:none;font-size:25px;font-weight:700;line-height:1.2;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:25px}
.site-nav a{font-size:12px;font-weight:700;letter-spacing:.1px;text-decoration:none;color:#171717;white-space:nowrap;padding:10px 0 8px;border-bottom:3px solid transparent;text-transform:uppercase}
.site-nav a:hover,.site-nav a[aria-current=page],.site-nav .current-menu-item a{color:var(--accent);border-color:var(--accent)}
.hero{height:345px;background-position:center 47%;background-size:cover;background-repeat:no-repeat}
.site-main{max-width:var(--page-width);margin:0 auto;padding:30px 0 56px;min-height:360px}
h1,h2,h3{color:#171717;line-height:1.25;margin:0 0 20px}
h1{font-size:25px}h2{font-size:22px}h3{font-size:18px}
p{margin:0 0 22px;color:#747474}
.intro-heading{margin-bottom:28px}
.intro-heading h1{margin-bottom:0}
.page-home .site-main{padding-top:36px}
.home-strapline{font-size:21px;font-weight:700;color:#222;margin-top:0}
.home-values{margin-bottom:28px}
.cta-link{display:inline-block;background:var(--accent);border-radius:4px;padding:9px 14px;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.cta-link:hover{background:#d92518;color:#fff}
.service-list{margin:-5px 0 0;padding:0;list-style:none;color:#747474}
.service-list li{padding:1px 0}
.service-list li::first-letter{color:var(--accent)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:0 0 24px}
.gallery-item{display:block;height:195px;overflow:hidden;background:#f3f3f3}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.gallery-item:hover img{transform:scale(1.035)}
.gallery-pagination{display:flex;gap:12px;justify-content:center;margin:22px 0 0}
.gallery-pagination a,.gallery-pagination span{display:inline-flex;min-width:30px;height:30px;justify-content:center;align-items:center;text-decoration:none;color:#555;border:1px solid #ddd;border-radius:2px;font-size:13px}
.gallery-pagination .current,.gallery-pagination a:hover{background:var(--accent);border-color:var(--accent);color:white}
.contact-intro{margin-bottom:16px}
.contact-grid{display:grid;grid-template-columns:1.35fr .9fr .8fr;gap:14px;align-items:start}
.contact-form label{display:block;color:#777;margin:0 0 5px}
.contact-form input,.contact-form textarea{display:block;width:100%;border:1px solid #ccc;border-radius:0;background:#fff;padding:9px 10px;font:inherit;margin-bottom:15px;min-height:38px}
.contact-form textarea{height:84px;resize:vertical}
.contact-form button{background:var(--accent);color:#fff;border:0;border-radius:5px;padding:8px 14px;font:inherit;cursor:pointer}
.contact-form button:hover{background:#d92518}
.contact-photo{width:100%;height:260px;object-fit:cover;display:block}
.contact-details{font-size:14px;color:#777;line-height:1.7}
.contact-details strong{display:block;color:#777;margin-bottom:12px}
.contact-details p{margin:0 0 14px}
.contact-details a{color:#c47d46}
.facebook-link{display:inline-flex;margin-top:7px;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff!important;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:18px}
.map-frame{margin-top:18px;width:100%;height:260px;border:0;grid-column:2/4}
.form-notice{padding:10px 12px;background:#f1f8ed;color:#386b2f;border-left:3px solid #65a34e;margin:0 0 15px}
.site-footer{background:#fff;border-top:1px solid #fafafa;text-align:center;padding:24px 12px;color:#888;font-size:12px}
.site-footer p{margin:0;color:#888}
@media(max-width:1000px){.site-main{padding-left:24px;padding-right:24px}.site-header{gap:30px}.site-nav{gap:18px}}
@media(max-width:760px){.site-header{min-height:auto;padding:16px 18px 10px;display:block;text-align:center}.site-title{display:block;font-size:22px;margin:0 0 12px}.site-nav{justify-content:center;flex-wrap:wrap;gap:5px 17px}.site-nav a{font-size:11px;padding:5px 0}.hero{height:230px}.site-main{padding:26px 20px 42px}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}.gallery-item{height:160px}.contact-grid{grid-template-columns:1fr 1fr;gap:15px}.contact-form{grid-column:1/3}.contact-photo{height:220px}.contact-details{padding-left:4px}.map-frame{grid-column:1/3;height:240px}}
@media(max-width:460px){body{font-size:14px}.site-nav{gap:5px 12px}.site-nav a{font-size:10px}.hero{height:190px}.gallery-grid{grid-template-columns:1fr 1fr}.gallery-item{height:135px}.contact-grid{grid-template-columns:1fr}.contact-form,.map-frame{grid-column:1}.contact-photo{height:250px}.contact-details{padding-left:0}}