/* Start custom CSS *//* Font Awesome 5 (bundled with Elementor) */
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-solid-900.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-regular-400.woff2) format("woff2")}
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2) format("woff2")}
/* Concept A+ – neutral accent: edit Elementor variables cd-accent-sand / cd-accent-taupe */
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:#FFFBF4}
.elementor-990 h1 em,.elementor-990 h2 em,.elementor-990 h3 em{font-style:normal;color:var(--cd-accent-taupe,#8C7B63)}
.elementor-990 .cda-display em,.elementor-990 .cda-h2 em{color:var(--cd-accent-sand,#D9CBB3)}
.elementor-990 ::selection{background:var(--cd-accent-sand,#D9CBB3);color:#000}
.elementor-990 input,.elementor-990 select{color-scheme:dark}
.elementor-990 form input:not([type=button]):not([type=submit]){border-width:0 0 1px 0;border-style:solid;border-color:rgba(255,251,244,.3);border-radius:0;background:transparent;color:#FFFBF4;padding:0}
.elementor-990 form input:not([type=button]):not([type=submit]):focus,.elementor-990 form select:focus{border-color:var(--cd-accent-sand,#D9CBB3);outline:none}
.elementor-990 input::placeholder{color:rgba(255,251,244,.4)}
.elementor-990 select option{background:#111;color:#FFFBF4}
.admin-bar .elementor-990 header{top:calc(32px + 1rem)}
/* Instagram feed (Smash Balloon [instagram-feed feed=2]) in Concept A style */
.elementor-990 #sb_instagram{padding:0!important;width:100%}
.elementor-990 #sb_instagram .sb_instagram_header{display:none}
.elementor-990 #sb_instagram #sbi_images{gap:1rem!important;padding:0!important}
.elementor-990 #sb_instagram .sbi_item{padding:0!important}
.elementor-990 #sb_instagram .sbi_photo_wrap{border-radius:1.25rem;overflow:hidden;background:#F0F0F0}
.elementor-990 #sb_instagram .sbi_photo{border-radius:1.25rem;overflow:hidden;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.elementor-990 #sb_instagram .sbi_item:hover .sbi_photo{transform:scale(1.04)}
.elementor-990 #sb_instagram #sbi_load .sbi_load_btn,.elementor-990 #sb_instagram .sbi_follow_btn a{background:#000!important;color:#FFFBF4!important;border-radius:999px!important;font-family:Raleway,sans-serif;font-weight:700;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;padding:1rem 1.8rem!important}
@media(max-width:767px){.elementor-990 #sb_instagram #sbi_images{gap:.6rem!important}.elementor-990 #sb_instagram .sbi_photo_wrap,.elementor-990 #sb_instagram .sbi_photo{border-radius:1rem}}
/* Header between tablet and wide desktop: compact (no wordmark, icon-only question button) */
@media (min-width:1025px) and (max-width:1500px){
body header nav{gap:1.5rem!important}
body header a[href="https://casadelmolino.nl/"] > span{display:none!important}
body header a[href^="mailto:"]{padding-right:.3rem!important}
body header a[href^="mailto:"] > span:last-child{display:none!important}
}
/* Header: larger at the top of the page, shrinks to the compact capsule while scrolling (scroll-driven; unsupported browsers keep the compact header) */
:root{--cd-hdr-top:0px}
.admin-bar{--cd-hdr-top:32px}
@media (max-width:782px){.admin-bar{--cd-hdr-top:46px}}
@supports (animation-timeline: scroll()){
@media (min-width:768px){
body header{animation:cd-hdr linear both;animation-timeline:scroll(root);animation-range:0 180px}
body header img{animation:cd-hdr-logo linear both;animation-timeline:scroll(root);animation-range:0 180px}
body header a[href="https://casadelmolino.nl/"] > span{animation:cd-hdr-word linear both;animation-timeline:scroll(root);animation-range:0 180px}
@keyframes cd-hdr{from{top:calc(var(--cd-hdr-top) + 1.75rem);left:2.75rem;right:2.75rem;padding:1.05rem 1.1rem 1.05rem 1.5rem;background-color:rgba(28,20,10,.38);box-shadow:0 18px 50px rgba(0,0,0,.08)}to{top:calc(var(--cd-hdr-top) + 1rem);left:1.25rem;right:1.25rem;padding:.5rem .55rem .5rem 1rem;background-color:rgba(28,20,10,.6);box-shadow:0 10px 30px rgba(0,0,0,.14)}}
@keyframes cd-hdr-logo{from{width:3.6rem;height:3.6rem}to{width:2.6rem;height:2.6rem}}
@keyframes cd-hdr-word{from{font-size:1.1rem}to{font-size:.95rem}}
}
@media (max-width:767px){
body header{animation:cd-hdr-m linear both;animation-timeline:scroll(root);animation-range:0 140px}
body header img{animation:cd-hdr-logo-m linear both;animation-timeline:scroll(root);animation-range:0 140px}
@keyframes cd-hdr-m{from{top:calc(var(--cd-hdr-top) + 1rem);left:1rem;right:1rem;padding:.7rem .6rem .7rem 1rem;background-color:rgba(28,20,10,.38)}to{top:calc(var(--cd-hdr-top) + .75rem);left:.75rem;right:.75rem;padding:.4rem .45rem .4rem .75rem;background-color:rgba(28,20,10,.6)}}
@keyframes cd-hdr-logo-m{from{width:3.25rem;height:3.25rem}to{width:2.75rem;height:2.75rem}}
}
}
/* Links inside paragraphs/headings (nav, footer menu, text links) keep their own colour on hover; the kit otherwise turns every hovered link black */
.elementor .e-paragraph-link-base:hover,.elementor .e-paragraph-link-base:focus-visible,.elementor .e-heading-link-base:hover,.elementor .e-heading-link-base:focus-visible{color:inherit}/* End custom CSS */