@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');

    html {    
        /* Basic Variables */

            /* Colour Palette */
            --color-black:#1d1d1d;
            --color-black-50:#1d1d1d80;
            --color-taupe:#bcb3aa;
            --color-taupe-light:#e2e0de;
            --color-white:#ebebeb;
            --color-blue:#498387;
            --color-blue-light:#6fb9be;

            /* Colours */
            --color-background: var(--color-white);
            --color-text: var(--color-black);
            --color-link: var(--color-blue);
            --color-link-hover:var(--color-blue-light);
            --color-page-odd:var(--color-white);
            --color-page-even:var(--color-taupe-light);
            --background-button:var(--color-link);
            --background-button-hover:var(--color-link-hover);

            /* Font */
            --font-family-main: "Libre Franklin", sans-serif;
            --font-family-small: "Libre Franklin", sans-serif;
            --font-family-heading: "Cinzel", serif;
            --font-family-accent: "Cinzel", serif;

            /* Sizes */
            --font-size-h1: 1.8em;
            --font-size-main: 1.1em;
            --wrapper-margins: 0;
            --wrapper-width:clamp(600px, 80vw, 1200px);


        --color-table-odd:#ebebeb2c;
        --color-table-even:#bcb3aa2c;
        --color-bevel-border: #a1a1a1;
        --color-bevel-shadow:#c1bdbba3;
        --color-calendar-available-background:var(--color-taupe-light);
        --color-calendar-blocked-background:rgb(150, 150, 150);
        --color-calendar-frame:var(--color-black-50);


     /*   --border-radius-button:var(--border-radius-small);
        --border-radius-textfield:var(--border-radius-small);
        --background-textfield:var(--color-white);
        --background-textfield-placeholder:var(--color-white);
        --shadow-button:rgba(255, 255, 255, .4) 0 1px 0 0 inset;
        --shadow-button-text:0px 1px var(--color-link);
        --color-button-border:var(--color-link);

        /*todo
        --background-button:var(--color-link);
        --background-button-hover:var(--color-button-hover);*/


        /* Custom Variables */
        --font-family-dingbat: "Noto Sans Symbols 2", sans-serif;
        --heading-fleuron-left:"🙘";
        --heading-fleuron-right:"🙚";
        --list-bullet:"𐫱";

        --grid-columns:1fr repeat(2, calc(var(--wrapper-width)/2)) 1fr;
        --grid-column-full:1 / span 4;
        --grid-column-centered: 2 / span 2;

        --grid-content-columns:repeat(6, 1fr);
        --grid-content-column-full:1 / span 6;
        --grid-content-column-half-left:1 / span 3;
        --grid-content-column-half-right: 4 / span 3;
        --grid-content-column-twothird-left: 1 / span 4;
        --grid-content-column-onethird-left: 1 / span 2;
        --grid-content-column-onethird-right: 5 / span 2;
        --grid-content-column-twothird-right: 3 / span 4;

        --heading-line:linear-gradient(180deg, 
            rgba(0,0,0,0) calc(50% - 1px), 
            rgba(192,192,192,1) calc(50%), 
            rgba(0,0,0,0) calc(50% + 1px)
        );
        --bevel-radius:10px;
        --bevel-radius-end:calc(100% - var(--bevel-radius));
        --clip-path-bevel:  polygon(var(--bevel-radius) 0%, var(--bevel-radius-end) 0%, 
                            100% var(--bevel-radius), 100% var(--bevel-radius-end), 
                            var(--bevel-radius-end) 100%, var(--bevel-radius) 100%, 
                            0% var(--bevel-radius-end), 0% var(--bevel-radius));
        --filter-bevel:drop-shadow(0px 0px 10px var(--color-bevel-shadow));

        --background-contact:linear-gradient(to top,var(--color-black), rgba(29, 29, 29,90%) 1em,
                    var(--color-black) 16em) , url('../../assets/tile_taupe.svg');
    }

    html {
        scroll-padding-top:5em;
    }

    .dialog-off-canvas-main-canvas {
        height:100%;
    }

/* Positioning */   

    #wrapper {
        width:100vw;
        min-height:100vh;
    } 

    header {
        display:grid;
        grid-template-rows:1fr;
    }

    header #block-sueno-banner,
    header #block-sueno-branding {
        grid-row:2;
        grid-column:1;
    }

    header #block-sueno-mainnavigation {
        z-index:10;
    }

    #wrapper > main {
        flex-grow:1;
    }

    #wrapper .content {
        padding:0px;
    }


    /*todo*/
        .region.region-header #block-sueno-mainnavigation li {
            text-align:right;
        }

    footer nav ul {
        display:flex;
        list-style:none;
    }

    footer > .region.region-footer {
        grid-column:var(--grid-column-centered);
        display:flex;
    }

    .region.region-highlighted {
        position:relative;
    }

    .region.region-content {
        padding:0px var(--gutter-1);
    }

    .region.region-content:has(.view-frontpage) {
        padding:0px;
    }

    /* Desktop Only */

    @media only screen and (min-width:768px) {
        #wrapper {
            display:grid;
            grid-template-columns: var(--grid-columns);
            grid-auto-rows:min-content;
            grid-template-rows:repeat(2, min-content) 1fr min-content;
        }

        #wrapper > *,
        main .content,
        .region.region-pre-content,
        .region.region-content:has(.view-frontpage),
        *:has(> .view-frontpage) {
            display:grid;
            grid-template-columns:subgrid;
            grid-column:var(--grid-column-full);
        }

        header .region-header > .block,
        #wrapper > .region-highlighted > *,
        .region.region-pre-content > *,
        .region.region-content,
        footer > .region-footer .block {
            grid-column:var(--grid-column-centered);
        }

        header #block-sueno-mainnavigation,
        header #block-sueno-banner,
        header #block-sueno-branding {
            grid-column: var(--grid-column-full);
        }

        #wrapper > header {
            grid-template-rows:calc(var(--gutter-3) + var(--font-size-main)) 1fr;
        }

        #wrapper > main {
            grid-auto-rows:max-content;
        }
        
        header #block-sueno-banner,
        header #block-sueno-branding {
            grid-row:2;
        }

        .region.region-content {
            padding-left:0px;
            padding-right:0px;
        }

/*todo*/
        header #block-sueno-mainnavigation li {
            text-align:center;
            width:initial;
        }
        header #block-sueno-mainnavigation ul {
            width:100%;
        }

    }

    /* Big screen only */

    @media only screen and (min-width:1028px) {

    }


    /* Front Page */

        .view-frontpage > .view-content > .views-row h2 {
            order:-10;
        }

        .prijzen .block-block-content--text {
            order:-1;
        }

        /* Desktop Only */

        @media only screen and (min-width:768px) {
            .view-frontpage,
            .view-frontpage > .view-content,
            .view-frontpage > .view-content > .views-row {
                display:grid;
                grid-template-columns:subgrid;
                grid-column:var(--grid-column-full);
            }

            .view-frontpage article,
            .view-frontpage .dropbutton-wrapper {
                grid-row:1;
            }

            .view-frontpage article {
                grid-column:var(--grid-column-centered);
            }
            
            .view-frontpage .dropbutton-wrapper {
                grid-column:3;
                justify-self: end;
            }

            .view-frontpage > .view-content > .views-row article > div {
                display:grid;
                grid-template-columns:var(--grid-content-columns);
                column-gap:var(--gutter-3);
            }

            .view-frontpage > .view-content > .informatie.views-row article > div {
                grid-auto-rows: min-content!important;
            }
            .view-frontpage > .view-content > .locatie.views-row article > div {
                grid-template-rows:repeat(2, max-content) 1fr;
            }

            .view-frontpage > .view-content > .views-row article h2 {
                grid-row:1;
                grid-column:var(--grid-content-column-full);
            }

            .view-frontpage > .view-content > .views-row article > div > .body {
                grid-row:2;
                grid-column:var(--grid-content-column-full);
            }

            .view-frontpage > .view-content > .casita-sueno.views-row .block-block-content--text {
                grid-column:var(--grid-content-column-full);
            }
            
            .view-frontpage > .view-content > .informatie.views-row article > div > .body,
            .view-frontpage > .view-content > .informatie.views-row .block-block-content--list-block {
                grid-column: var(--grid-content-column-onethird-left);
            }

            .view-frontpage > .view-content > .contact.views-row article > div > .body,
            .view-frontpage > .view-content > .contact.views-row .block-views {
                grid-column:var(--grid-content-column-onethird-right);
            }

            .view-frontpage > .view-content > .casita-sueno.views-row .block-block-content--slideshow,
            .view-frontpage > .view-content > .informatie.views-row .block-block-content--slideshow,
            .view-frontpage > .view-content > .omgeving.views-row article > div > .body,
            .view-frontpage > .view-content > .omgeving.views-row .block-block-content--list,
            .view-frontpage > .view-content > .locatie.views-row #block-googlemaps,
            .view-frontpage > .view-content > .prijzen.views-row .block-block-content--text {
                grid-column:var(--grid-content-column-half-left);
            }

            .view-frontpage > .view-content > .casita-sueno.views-row article > div > .body,
            .view-frontpage > .view-content > .omgeving.views-row .block-block-content--slideshow,
            .view-frontpage > .view-content > .locatie.views-row .block-block-content--list,
            .view-frontpage > .view-content > .locatie.views-row article > div > .body,
            .view-frontpage > .view-content > .prijzen.views-row article > div > .body {
                grid-column:var(--grid-content-column-half-right);
            }

            .view-frontpage > .view-content > .informatie.views-row #block-slideshowinformatie,
            .view-frontpage > .view-content > .informatie.views-row #block-slideshowbijhetappartement {
                grid-column:var(--grid-content-column-twothird-right);
            }

            .view-frontpage > .view-content > .informatie.views-row article > div > .body,
            .view-frontpage > .view-content > .locatie.views-row article > div > .body,
            .view-frontpage > .view-content > .contact.views-row article > div > .body {
                grid-row:2;
            }
            
            .view-frontpage > .view-content > .informatie.views-row #block-beganegrond,
            .view-frontpage > .view-content > .locatie.views-row .block-block-content--list,
            .view-frontpage > .view-content > .contact.views-row .block-views {
                grid-row:3;
            }

            .view-frontpage > .view-content > .informatie.views-row #block-slideshowbijhetappartement {
                grid-row:5;
            }     

            .view-frontpage > .view-content > .informatie.views-row #block-1eetage {
                grid-row:4 / 6;
            }

            .view-frontpage > .view-content > .informatie.views-row #block-slideshowinformatie {
                grid-row:2 / 5;
                margin-bottom:var(--gutter-3);
            }

            .view-frontpage > .view-content > .omgeving.views-row .block-block-content--slideshow,
            .view-frontpage > .view-content > .locatie.views-row #block-googlemaps,
            .view-frontpage > .view-content > .contact.views-row .block-webform {
                grid-row:2 / span 2;
            }

            .view-frontpage > .view-content > .contact.views-row .block-webform {
                grid-column:var(--grid-content-column-twothird-left);
            }


        }

        /* Big screen only */

        @media only screen and (min-width:1028px) {

        }


/* Styles */

    header #block-sueno-mainnavigation,
    .view-frontpage .contact.views-row,
    #wrapper > footer {
        background-color:var(--color-black);
        color:var(--color-white);
    }

    .view-frontpage > .view-content > .contact.views-row h2 > span {
        background-color:var(--color-black);
    }


/* Elements */

    /* Table */

        .table.iconlist td {
            padding-top:0px;
        }

        .table.iconlist img {
            width:20px;
            height:auto;
            aspect-ratio:1/1;
        }

        .informatie.views-row .table.iconlist img {
            filter:invert(13%) saturate(6%) hue-rotate(157deg) brightness(97%) contrast(103%);
        }

        .contact.views-row .table.iconlist img {
            filter:invert(99%) sepia(0%) saturate(7403%) hue-rotate(187deg) brightness(109%) contrast(84%);
        }

        .contact.views-row .table.iconlist tr td:first-child {
            padding-bottom:2px;
        }

        .contact.views-row .table.iconlist tr:first-child img {
            width:18px;
        }


    /* Splide */

        .views-row .block-block-content--slideshow .splide {
            height:20em;
            max-height:60vh;
        }

        .splide .slide__content,
        .slide__content .litebox--image,
        .slide__content .media,
        .splide img {
            display:block;
            height:100%;
            width:100%;
            object-fit:cover;
        }

        .splide .splide__slider {
            height:100%;
        }

        .splide .slide__caption {
            position:absolute;
            top:var(--gutter-2);
            width:100%;
        }

        .splide .slide__caption .slide__title {
            margin:0 auto;
            display:block;
            width:max-content;
            font:var(--font-small);
            color:var(--color-white);
            background:rgb(0 0 0 / 44%);
            text-shadow:0px 0px 2px var(--color-black), 0px 0px 7px var(--color-black);
            padding:var(--gutter-1) var(--gutter-2);
            border-radius:var(--border-radius-small);
        }

        /* .field-credit,
        .slide__description {
            position:absolute;
            right:var(--gutter-2);
            font:var(--font-small);
            bottom:var(--gutter-1);
        }

        .field-credit a,
        .slide__description a {
            color:var(--color-white);
            text-shadow:0px 0px 2px var(--color-black), 0px 0px 7px var(--color-black);
        }*/ /*todo*/


    /* List Blocks */

        .block-block-content--list {
            display:grid;
            grid-template-columns: 16px 1fr;
            grid-template-rows:max-content 1fr;
            column-gap:var(--gutter-1);
        }

        .block-block-content--list div:has(.fontawesome-icons) {
            grid-column:1;
            grid-row:1;
        }

        .block-block-content--list div:has(h4) {
            grid-column:2;
            grid-row:1;
        }

        .block-block-content--list div:last-child {
            grid-column:1 / span 2;
        }

        .block-block-content--list h4 {
            margin:0px;
        }

        .block-block-content--list ul {
            list-style:none;
            margin-left:10px;
        }

        .block-block-content--list ul li {
            position:relative;
            margin-bottom:0.25em;
        }

        .block-block-content--list ul li::before {
            position:absolute;
            left:-1.2em;
            top:-0.1em;
            font-family: var(--font-family-dingbat);
            content: var(--list-bullet);
            line-height:1em;
        }
        

    /* Bevel */

        *:has(> .bevel),
        .views-row .block-block-content--slideshow:not(#block-slideshowinformatie) .splide {
            filter:var(--filter-bevel);
        }

        .views-row .block-block-content--slideshow:not(#block-slideshowinformatie) .splide .splide__slider, .bevel {
            display:block;
            position: relative;
            margin:0px;
            background:var(--color-bevel-border);
            clip-path: var(--clip-path-bevel);
        }

        .views-row .block-block-content--slideshow:not(#block-slideshowinformatie) .splide .splide__slider > *, .bevel > * {
            content: '';
            display: block;
            position: absolute;
            top:1px;
            left:1px;
            width: calc(100% - 2px)!important;
            height: calc(100% - 2px)!important; 
            z-index:-1;
            clip-path: var(--clip-path-bevel);
        }


/* Header */

    header #block-sueno-mainnavigation {
        position:fixed;
        top:0px;
    }

    #block-sueno-mainnavigation a {
        font-weight:bold;
        color:var(--color-white);
    }

    ul.menu a.is-active {
        color:inherit;
    }

    #block-sueno-banner,
    #block-sueno-branding {
        height:40vh;
    }

    header #block-sueno-branding {
        z-index:1;
        align-content:center;
        justify-items:center;
        pointer-events:none;
    }

    header #block-sueno-branding > a {
        pointer-events:initial;
        height:50%;
        aspect-ratio:1/1;
        width:auto;
        display:block;
    }

    #block-sueno-branding img {
        height:100%;
        width:100%;
        object-fit:scale-down;
    }

    /* Navigation */

    #block-sueno-mainnavigation .sf-accordion-toggle {
        float:right;
        padding:var(--gutter-1) var(--gutter-2);
    }

    #block-sueno-mainnavigation .sf-accordion-toggle a {
        display:flex;
        gap:var(--gutter-2);
    }

    #block-sueno-mainnavigation .sf-accordion-toggle a:after {
        content: "≡";
        /*
        font-size: 2em;
        position: absolute;
        right: 0.5em;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);*/
        speak: none; /*todo*/
    }


    /*todo */

    body.toolbar-fixed header #block-sueno-mainnavigation {
        top:var(--drupal-displace-offset-top);
    }


    /* Desktop Only */

    @media only screen and (min-width:768px) {
        header #block-sueno-mainnavigation ul {
            margin:0px;
            list-style:none;
            display:flex;
            gap:var(--gutter-1);
            padding:var(--gutter-1) 0px!important;
            justify-content:center;
            font-family:var(--font-family-accent);
        }

        header #block-sueno-mainnavigation li {
            cursor:pointer;
            color:var(--color-white);
            border-radius:var(--border-radius-small);
            font-weight:bold;
        }

        header #block-sueno-mainnavigation li a {
            color:inherit;
            display:block;
            width:100%;
            height:100%;
            padding:0.4em 1em;
        }

        header #block-sueno-mainnavigation li:hover {
            background-color:#588c93;
            color:white;
        }
    }

    /* todo*/

    #block-sueno-banner {
        height:40vh;
    }

    #block-sueno-banner .splide,
    #block-sueno-banner .splide__slider,
    #block-sueno-banner .splide__track,
    #block-sueno-banner .slide__content,
    #block-sueno-banner .slide__content .media {
        height: 100%;
        overflow:hidden;
    }.slide__media {
    height:100%;
    width:100%;
}

    #block-sueno-banner .slide__content img {
        height:100%;
        width:100%;
        object-fit: cover;
    }



    .region-highlighted > * {
        margin:1em 0;
    }


/* Footer */

    .region.region-footer {
        gap:var(--gutter-3);
        margin:var(--gutter-2) 0px;
        padding:0px var(--gutter-2);
        font:var(--font-small);
    }

    .region.region-footer nav ul {
        margin:0px;
        padding:calc(var(--gutter-1)*1.5) 0px;
    gap:var(--gutter-2);
    }

    .region.region-footer nav ul,
    .region.region-footer nav li,
    .region.region-footer nav svg {
        height:100%;
    }

    .region.region-footer nav ul li {
        align-content:center;
    }

    .region.region-footer nav a:has(.svg-inline--fa) {
        color:inherit;
    }

    .region.region-footer .block-block-content--footer {
        margin-left:auto;
    }
    
    .region.region-footer nav {
        flex-grow:1;
    }


    /* Desktop Only */

    @media only screen and (min-width:768px) {
        .region.region-footer {
            padding:0px;
        }
    }



/* Frontpage */

    .view-frontpage > .view-content > .views-row {
        --color-background:var(--color-page-odd);
        background-color:var(--color-background);
        padding:5em 0px 4em;
    }

    .view-frontpage > .view-content > .views-row:nth-child(even) {
        --color-background:var(--color-page-even);
    }

    .view-frontpage h2 {
        background: var(--heading-line);
        text-align:center;
    }

    .view-frontpage h2#overzicht {
        display:none;
    }

    /* Fleuron */

        .view-frontpage > .view-content > .views-row h2 span {
            padding:0px var(--gutter-2);
            background-color:var(--color-background);
        }

        .view-frontpage > .view-content > .views-row h2 span:before,
        .view-frontpage > .view-content > .views-row h2 span:after {
            font-weight:100;
        }

        .view-frontpage > .view-content > .views-row h2 span::before {
            font-family: var(--font-family-dingbat);
            content: var(--heading-fleuron-left);
            padding-right:var(--gutter-2);
        }

        .view-frontpage > .view-content > .views-row h2 span::after {
            font-family: var(--font-family-dingbat);
            content:var(--heading-fleuron-right);
            padding-left:var(--gutter-2);
        }


    /* Overzicht */

        .overzicht .table {
            display:grid;
            grid-template-columns:repeat(3, 1fr);
        }

        .overzicht .table thead,
        .overzicht .table tbody,
        .overzicht .table tr {
            display:grid;
            grid-template-columns:subgrid;
            grid-column:1 / span 3;
        }

        .overzicht td {
            text-align:center;
        }

        .overzicht .bevel,
        .overzicht .table img {
            aspect-ratio:4/3;
            width:100%;
            height:auto;
        }

        .overzicht .table img {
            object-fit:cover;
        }


    /* Contact */

        .view-frontpage .contact.views-row {
            background-color:var(--color-black)!important;
            background: var(--background-contact);
            background-size:400px;
        }


    /* Desktop Only */

    @media only screen and (min-width:768px) {
        .contact.views-row .block-webform form {
            margin-right:var(--gutter-4);
        }
    }


    /* Mobile Only */

    @media only screen and (max-width:768px) {
        .view-frontpage > .view-content > .views-row {
            position:relative;
            padding:3em var(--gutter-2) 2em var(--gutter-2);
        }

        .view-frontpage > .view-content > .views-row article > div {
            display:flex;
            flex-direction:column;
            gap:var(--gutter-2);
        }

        
/*mobile (todo)*/
#block-sueno-mainnavigation ul.sf-menu a {
    padding:0.7em 1em;
}

#block-sueno-mainnavigation ul.sf-menu {
    padding-bottom:var(--gutter-1);
}

.views-row .dropbutton-wrapper {
    position:absolute;
    width:fit-content;
    right:var(--gutter-2);
}

    }





            .locatie.views-row #block-googlemaps {
                width:100%;
                height:auto;
                aspect-ratio:4/3;
            }

            .locatie.views-row #block-googlemaps * {
                height:100%;
            }


.form-type-select.form-disabled {
    display:none!important;/*temp!!*/
} 







.informatie.views-row .body,
.informatie.views-row .block-block-content--list-block {
    margin-bottom:var(--gutter-2);
}


.region.region.region-pre-content {
    margin-top:var(--gutter-3);
}


.reviews.views-row .block-views > div {
    display:contents;
}


.reviews.views-row {
    display:flex;
    flex-direction: column;
}

.reviews.views-row .view-content {
    order:-1;
}


.reviews.views-row .block-views .views-row {
    padding:var(--gutter-3);
    background-color: var(--color-table-even);
}

.reviews.views-row .block-views .views-row {
    display:flex;
    flex-direction:column;
    gap:var(--gutter-1);
}

.reviews.views-row .block-views .views-row .views-field-created {
    font:var(--font-small);
}.view-reviews .pager .pager__item--first,
.view-reviews .pager .pager__item--last,
.view-reviews .pager .pager__item--ellipsis {
    display:none;
}


.views-element-container {
    display:contents;
}






.view-frontpage > .view-content > .contact.views-row .block-views {
  display:block;
}



/*todo*/


    @media only screen and (min-width:768px) {
        .reviews.views-row .view-reviews {
            grid-column:1 / span 6;
        }
    }

.reviews.views-row .splide__slider {
    margin:0 auto;
}.view-reviews .splide__toggle {
    display:none;
}


@media only screen and (max-width:768px) {
    /*mobile*/
    #superfish-main {
        display: none;  /*temp/todo*/
    }

    .reviews.views-row .view-reviews {
        margin-bottom:var(--gutter-2);
    }
}



.view-reviews .splide__list {
    display:flex;
}

.view-reviews .splide__slide {
    display:flex;
    flex-direction:column;
    gap:var(--gutter-1);
    background-color:var(--color-table-even);
    padding:var(--gutter-2);
    border-radius:var(--border-radius-small);
}

.reviews.views-row .splide__slider {
    width:calc(100% - 4em - 2*var(--gutter-3));
}

.view-reviews .splide__pagination {
    bottom:calc(-1*var(--gutter-4));
}


/* the */


/* Desktop Only */

@media only screen and (min-width:768px) {

    .informatie.views-row article>div {
        grid-template-rows: repeat(4, max-content) 1fr !important;
    }

}

@media (min-width: 768px) {
    #block-slideshowinformatie .splide {
        position: static;
        height: auto;
        max-height: initial;
    }


}