/*
Theme Name: Smitsman Interieur en Timmerwerken
Theme URI: https://interieur-timmerwerken.nl
Author: Smitsman Interieur en Timmerwerken
Description: Maatwerkthema voor Smitsman Interieur en Timmerwerken: interieurtimmerwerk en meubels op maat, ontworpen, gemaakt en geplaatst op locatie bij de klant, plus werk in onderaanneming. De opmaak draait op Tailwind CSS v4 (browser-CDN); de tokens voor kleuren en maten staan in het @theme-blok in header.php.
Version: 3.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: smitsman
*/

html{line-height:normal;}

::selection{background:#E9DCC7;}

.no-js [data-reveal]{opacity:1;}

.sm-vergrendeld{overflow:hidden;}

.quote-item:not(.is-active){display:none;}

.project-card.is-hidden{display:none;}

.project-grid > .tile-a{grid-column:1 / span 8;}
.project-grid > .tile-b{grid-column:9 / span 4;}
.project-grid > .tile-c{grid-column:1 / span 4;}
.project-grid > .tile-d{grid-column:5 / span 8;}
.project-grid > .h-tall .shot{height:clamp(340px,36vw,560px);}
.project-grid > .h-low .shot{height:clamp(280px,29vw,440px);}

@media (max-width:1080px){
	.project-grid > .tile-a,
	.project-grid > .tile-b,
	.project-grid > .tile-c,
	.project-grid > .tile-d{grid-column:span 12;}
	.project-grid > .h-tall .shot,
	.project-grid > .h-low .shot{height:clamp(280px,58vw,480px);}
}

.filter-btn.is-active{border-color:#1A1613;background:#1A1613;color:#FAF8F5;}

.slider-dot{
	width:8px;height:8px;padding:0;border:0;border-radius:100px;
	background:#D6CBBB;cursor:pointer;
	transition:width .3s ease,background .3s ease;
}
.slider-dot:hover{background:#8B8075;}
.slider-dot.is-active{width:26px;background:#1A1613;}

.slider{scrollbar-width:none;-ms-overflow-style:none;}
.slider::-webkit-scrollbar{height:0;width:0;}
@media (hover:none){
	.slider{-webkit-overflow-scrolling:touch;}
}

.sm-lightbox{
	position:fixed;inset:0;z-index:200;box-sizing:border-box;
	width:100%;height:100%;max-width:100vw;max-height:100vh;
	padding:clamp(16px,3vw,40px);
	display:flex;flex-direction:column;overflow:hidden;
	background:rgba(23,19,15,.94);backdrop-filter:blur(10px);
	opacity:0;transition:opacity .34s ease;
}
.sm-lightbox.is-open{opacity:1;}

.sm-lightbox [hidden]{display:none;}

.sm-lightbox__balk{
	display:flex;align-items:center;justify-content:space-between;gap:18px;
	padding:20px 24px;flex:0 0 auto;
}
.sm-lightbox__teller{
	font-family:'Manrope',system-ui,sans-serif;font-size:13.5px;
	color:rgba(250,248,245,.7);
}
.sm-lightbox__knop{
	width:46px;height:46px;flex:0 0 auto;
	border:1px solid rgba(250,248,245,.34);border-radius:100px;
	background:rgba(23,19,15,.3);color:#FAF8F5;
	font-size:16px;line-height:1;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.sm-lightbox__knop:hover{border-color:#FAF8F5;background:rgba(250,248,245,.12);}
.sm-lightbox__knop:focus-visible{outline:2px solid #A9793F;outline-offset:3px;}

.sm-lightbox__paneel{position:relative;flex:1 1 auto;min-height:0;min-width:0;}
.sm-lightbox__figuur{
	position:absolute;inset:0;margin:0;padding:0 72px;box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
}
.sm-lightbox__foto{
	display:block;max-width:100%;max-height:100%;width:auto;height:auto;
	object-fit:contain;background:#241E19;
	transform:translateY(8px);opacity:0;
	transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .34s ease;
}
.sm-lightbox.is-open .sm-lightbox__foto{transform:none;opacity:1;}

.sm-lightbox__nav{
	position:absolute;inset:0;pointer-events:none;
	display:flex;align-items:center;justify-content:space-between;
	padding:0 clamp(12px,2.4vw,32px);z-index:1;
}
.sm-lightbox__nav .sm-lightbox__knop{pointer-events:auto;}

.sm-lightbox__bijschrift{
	flex:0 0 auto;padding:16px 24px 20px;text-align:center;
	font-family:'Manrope',system-ui,sans-serif;font-size:15px;line-height:1.6;
	color:rgba(250,248,245,.82);
}

@media (max-width:640px){
	.sm-lightbox__balk{padding:14px 16px;}
	.sm-lightbox__figuur{padding:0;}
	.sm-lightbox__bijschrift{font-size:14px;}
	.sm-lightbox__nav{
		position:static;inset:auto;justify-content:center;gap:18px;
		padding:12px 16px 24px;
	}
	.sm-lightbox__knop{width:40px;height:40px;font-size:15px;}
}

.sm-cf7 .wpcf7{margin:0;}
.sm-cf7 .wpcf7-form{
	border-top:1px solid #1A1613;padding-top:32px;
	display:flex;flex-direction:column;gap:28px;margin:0;
}
.sm-cf7 .wpcf7-form > p{margin:0;}
.sm-cf7 label{display:flex;flex-direction:column;gap:10px;width:100%;}
.sm-cf7 label > span:not(.wpcf7-form-control-wrap){font-size:13.5px;color:#8B8075;}
.sm-cf7 .wpcf7-form-control-wrap{display:block;width:100%;position:relative;}
.sm-cf7 input[type="text"],
.sm-cf7 input[type="email"],
.sm-cf7 input[type="tel"],
.sm-cf7 input[type="url"],
.sm-cf7 input[type="date"],
.sm-cf7 input[type="number"],
.sm-cf7 select{
	width:100%;border:none;border-bottom:1px solid #DFD5C7;background:none;
	padding:9px 0;font-size:17px;line-height:1.4;outline:none;border-radius:0;
	transition:border-color .25s ease;-webkit-appearance:none;appearance:none;
}
.sm-cf7 select{
	cursor:pointer;padding-right:24px;
	background-image:linear-gradient(45deg,transparent 50%,#6D655B 50%),linear-gradient(135deg,#6D655B 50%,transparent 50%);
	background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
	background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sm-cf7 textarea{
	width:100%;border:1px solid #DFD5C7;background:none;padding:16px;
	font-size:17px;line-height:1.62;outline:none;resize:vertical;border-radius:0;
	transition:border-color .25s ease;
}
.sm-cf7 input:focus,.sm-cf7 select:focus{border-bottom-color:#A9793F;}
.sm-cf7 textarea:focus{border-color:#A9793F;}
.sm-cf7 ::placeholder{color:#8B8075;opacity:1;}
.sm-cf7 input[type="submit"],
.sm-cf7 .wpcf7-submit{
	background:#1A1613;color:#FAF8F5;border:none;border-radius:100px;
	padding:16px 32px;font-size:15px;line-height:1;cursor:pointer;width:auto;
	transition:background .3s ease;-webkit-appearance:none;appearance:none;
}
.sm-cf7 input[type="submit"]:hover,
.sm-cf7 .wpcf7-submit:hover{background:#3B3026;}
.sm-cf7 .wpcf7-list-item{margin:0 18px 0 0;}
.sm-cf7 .wpcf7-acceptance .wpcf7-list-item-label{font-size:13.5px;color:#8B8075;line-height:1.6;}
.sm-cf7 .wpcf7-not-valid-tip{font-size:13px;color:#8A6A3E;margin-top:8px;}
.sm-cf7 .wpcf7-not-valid{border-color:#8A6A3E !important;}
.sm-cf7 .wpcf7-response-output{display:none;}
.sm-cf7 form.sent .wpcf7-response-output,
.sm-cf7 form.invalid .wpcf7-response-output,
.sm-cf7 form.failed .wpcf7-response-output,
.sm-cf7 form.aborted .wpcf7-response-output,
.sm-cf7 form.spam .wpcf7-response-output,
.sm-cf7 form.unaccepted .wpcf7-response-output,
.sm-cf7 form.payment-required .wpcf7-response-output{
	display:block;margin:0;border:none;border-left:2px solid #A9793F;border-radius:0;
	padding:10px 0 10px 16px;font-size:15px;line-height:1.6;color:#4A4239;
}
.sm-cf7 form.sent .wpcf7-response-output{border-left-color:#1A1613;color:#1A1613;}
.sm-cf7 form.invalid .wpcf7-response-output,
.sm-cf7 form.failed .wpcf7-response-output,
.sm-cf7 form.spam .wpcf7-response-output{border-left-color:#8A6A3E;}
.sm-cf7 .wpcf7-spinner{margin:0 0 0 14px;background-color:#D6CBBB;}
.sm-cf7 .screen-reader-response{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.sm-form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.sm-form__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.sm-form__note{font-size:13.5px;color:#8B8075;max-width:280px;line-height:1.6;}
.sm-error{border-left:2px solid #A9793F;padding:10px 0 10px 16px;font-size:15px;color:#4A4239;}

@media (max-width:640px){
	.sm-form__row{grid-template-columns:1fr;}
	.sm-form__foot{align-items:flex-start;flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*{transition:none !important;animation:none !important;}
	[data-reveal]{opacity:1;}
	.sm-lightbox__foto{transform:none;opacity:1;}
}

html{scroll-padding-top:100px;}

.blog-card.is-hidden{display:none;}

.sm-toc a{
	display:inline-block;border-bottom:1px solid #C9B99F;padding-bottom:2px;
	color:inherit;text-decoration:none;
	transition:border-color .3s ease,color .3s ease;
}
.sm-toc a:hover{border-bottom-color:#8A6A3E;color:#8A6A3E;}