/*
Theme Name: Ria-B.art
Theme URI:
Author: Helena Gwyn
Author URI:
Description: Blocktheme for Ria-B.art
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ria-b-art
Tags:
*/

/* editor */
.block-editor-iframe__html .wp-site-blocks>aside {
    display: none;
}

.block-editor-iframe__html body,
.editor-visual-editor {
    background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url('assets/images/background.jpg') !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* frontend */
body {
    background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url('assets/images/background.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
        background-size: auto 100vh;
    }
}

.wp-site-blocks {
    margin: 0;
    min-height: 100vh;
    height: 100%;
    display: flex;
}

.wp-site-blocks>* {
    margin: 0;
}

.wp-site-blocks header p a {
    filter: drop-shadow(0px 10px 15px #0000001a) drop-shadow(0px 4px 6px #0000001a);
}

.wp-site-blocks>aside {
    min-width: 300px;
    width: 300px;
    padding: 20px;
    height: calc(100vh - 40px);
    position: fixed;
    overflow-y: auto;
}

.wp-site-blocks>aside>section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-site-blocks>aside>section>div>header>div {
    margin-block-start: 0px;
}

.wp-site-blocks>aside>section>div>header>a {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 40px;
    text-decoration: none;
    margin-block-start: 0px;
    color: var(--wp--preset--color--brownred);
    z-index: 5;
}

.wp-site-blocks>aside nav {
    display: flex;
    flex-direction: column;
}

.wp-site-blocks>aside>header>a {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 40px;
    font-weight: 300;
    text-decoration: none;
    margin-block-start: 0px;
    color: var(--wp--preset--color--brownred);
}

.wp-site-blocks>aside footer {
    min-width: 280px;
    width: 280px;
    margin-block-start: 0px;
    padding: 10px;
}

.wp-site-blocks.resizing>aside {
    transition: none !important;
}

.wp-site-blocks>main {
    padding: 20px;
    width: 100vw;
}

.wp-site-blocks>main:not(.no-menu) {
    margin-left: 340px;
}

@media screen and (min-width: 720px) {
    .wp-site-blocks {
        flex-direction: row;
    }

    .wp-site-blocks>aside>header {
        display: none;
    }

    .wp-site-blocks>aside>section>div>header>a {
        display: none;
    }
}

@media screen and (max-width: 720px) {
    .wp-site-blocks {
        flex-direction: column;
    }

    .wp-site-blocks>aside {
        height: unset;
        width: calc(100vw - 40px);
        position: relative;
        padding: 10px 20px;
    }

    .wp-site-blocks>aside>section {
        width: 0;
        padding: 0;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url('assets/images/background.jpg');
        background-position: center;
        background-size: cover;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .wp-site-blocks>aside>header {
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 20px;
        width: calc(100vw);
        z-index: 1;
        background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url('assets/images/background.jpg');
        background-position: center;
        background-size: cover;
    }

    .wp-site-blocks.open>aside>header {
        visibility: hidden;
    }

    .wp-site-blocks.open>aside>section {
        width: calc(100vw);
        height: 100vh;
        padding: 20px;
    }

    .wp-site-blocks.open>aside footer {
        width: calc(100vw - 40px);
    }

    .wp-site-blocks>main {
        padding: 0px 10px;
        padding-top: 60px;
        margin-left: unset !important;
    }
}

/* Nav Contact */
#nav-contact {
    margin-top: 0px;
}

#nav-contact ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
    flex-wrap: wrap;
}

aside #nav-contact ul {
    margin-top: 30px;
}

#nav-contact ul li {
    padding: 10px 8px;
}

#nav-contact ul li a {
    text-decoration: none;
    font-size: 20px;
    color: var(--wp--preset--color--brownred);
}

#nav-contact ul li a:hover {
    color: var(--wp--preset--color--brownred-light) !important
}

#nav-contact li a::before {
    font-family: "Font Awesome 6 Free";
    text-shadow: 0px 10px 15px #0000001a, 0px 4px 6px #0000001a;
    vertical-align: middle;
}

main #nav-contact li {
    flex-basis: calc(50% - 20px);
    text-align: center;
}

main #nav-contact:has(li.instagram) li.facebook {
    order: 2;
}

main #nav-contact:has(li.instagram) li.telephone {
    order: 3;
}

main #nav-contact li.instagram {
    order: 4;
}

#nav-contact li.email a::before {
    content: "\f0e0";
}

#nav-contact li.telephone a::before {
    content: "\f095";
    font-weight: 900;
}

#nav-contact li.facebook a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f09a";
}

#nav-contact li.instagram a::before {
    font-family: "Font Awesome 6 Brands";
    content: "\f16d";
}

#nav-contact span {
    margin-left: 10px;
    font-size: 16px;
}

aside.wp-block-template-part #nav-contact a span {
    display: none;
}

@media screen and (max-width: 1200px) {
    main .wp-block-group #nav-contact ul {
        flex-direction: column;
    }
    main .wp-block-group #nav-contact ul li {
        padding: 5px 0px;
    }
}

/* Portfolio */
.wmis_articles {
    border-radius: 15px;
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

.wmis_articles img {
    border-radius: 15px;
}

.infinite-scroll-last, 
.infinite-scroll-error {
    display: none !important;
}

/* Ninja Forms */
.nf-form-fields-required {
    display: none;
}

:where(input[type=text], input[type=email], textarea).nf-element {
    padding: 15px;
    border-radius: 15px;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--brownred);
    font-family: var(--wp--preset--font-family--montserrat);
    border: 1px solid var(--wp--preset--color--brownred);
    background-color: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

:where(input[type=text], input[type=email], textarea).nf-element::placeholder {
    font-style: italic;
    color: var(--wp--preset--color--brownred-light);
}

.nf-error :where(input[type=text], input[type=email], textarea) {
    border: 1px solid #9f0712 !important;
}

.nf-form-content .nf-error-msg {
    padding: 22px 15px 10px 15px;
    color: #9f0712 !important;
    background-color: var(--wp--preset--color--white-light);
    border: 1px solid #9f0712;
    border-radius: 0 0 15px 15px;
    margin: -17px 0px 0px 0px !important;
}

.textarea-container .nf-error-msg {
    margin: -22px 0px 0px 0px !important;
}

.nf-error-field-errors {
    padding: 15px;
    border-radius: 15px;
    background-color: var(--wp--preset--color--white-light);
    border: 1px solid #9f0712;
    color: #9f0712 !important;
    text-align: center;
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

.nf-response-msg {
    padding: 15px;
    border-radius: 15px;
    background-color: var(--wp--preset--color--white-light);
    border: 1px solid var(--wp--preset--color--brownred);
    text-align: center;
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

input[type=submit].nf-element {
    margin: auto;
    display: block;
    cursor: pointer;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    border-radius: 9999px;
    font-size: inherit;
    color: var(--wp--preset--color--brownred);
    font-family: var(--wp--preset--font-family--playwrite-tz);
    border: 1px solid var(--wp--preset--color--brownred);
    background-color: var(--wp--preset--color--white-light);
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

input[type=submit].nf-element:hover {
    color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--brownred-light);
    background-color: var(--wp--preset--color--brownred-light);
}

.nf-form-hp {
    display: none;
}

/* Flickity */
.flickity-prev-next-button {
    box-shadow: var(--wp--preset--shadow--shadow-lg);
    background-color: var(--wp--preset--color--white-light);
    color: var(--wp--preset--color--brownred) !important;
}

.flickity-prev-next-button:hover {
    background-color: var(--wp--preset--color--brownred-light);
    color: white;
}

.flickity-prev-next-button:disabled {
    display: none;
}

.carousel.is-fullscreen {
    z-index: 2 !important;
    background-color: white !important;
    margin: 0px !important;
}

.carousel.is-fullscreen .flickity-prev-next-button:hover {
    background-color: var(--wp--preset--color--brownred-light);
    color: white !important;
}

.carousel.is-fullscreen .carousel-cell {
    height: 100%;
}

.flickity-fullscreen-button {
    color: var(--wp--preset--color--brownred) !important;
}

/* Portfolio: Single */
.single-post main section:last-child>div {
    padding-bottom: calc(var(--wp--preset--spacing--70) - 25px) !important;
}

.single-post .nf-after-form-content {
    padding-bottom: 25px;
}

/** Portfolio: Single - Flickity FullScreen **/
.single-post .carousel.is-fullscreen {
    max-width: unset !important;
    width: calc(100vw - 30px) !important;
    height: calc(100vh - 30px) !important;
    border-radius: 0px !important;
}

/** Portfolio: Single - Carousel **/
.single-post .carousel:not(.is-fullscreen) .flickity-prev-next-button {
    display: none;
}

.single-post .carousel {
    max-width: 600px;
    width: 100%px;
    aspect-ratio: 1;
    box-shadow: 0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;
    background-color: var(--wp--preset--color--white);
    border-radius: 15px;
    padding: 15px;
}

.single-post .carousel-cell {
    width: 100%;
    aspect-ratio: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
}

@media screen and (max-width: 720px) {
    .single-post main section.wp-block-group:first-child {
        padding: 0 10px !important;
    }
    .single-post main section.wp-block-group {
        margin-top: var(--wp--preset--spacing--60) !important;
        margin-bottom: var(--wp--preset--spacing--60) !important;
    }
}

/** Portfolio: Single - Carousel Navigation **/
.single-post .carousel-navigation {
    max-width: 600px;
    width: 100%;
    margin-top: 10px;
}

.single-post .carousel-navigation .flickity-viewport {
    height: 140px !important;
}

.single-post .carousel-navigation>div {
    height: 100px;
    margin-left: 60px;
    width: calc(100% - 120px) !important;
}

.single-post .carousel-navigation>div:has(.flickity-slider:empty) {
    display: none;
}

.single-post .carousel-navigation .flickity-prev-next-button {
    top: 60px !important;
}

.single-post .carousel-navigation .flickity-prev-next-button:hover {
    background-color: var(--wp--preset--color--brownred-light);
    color: white !important;
}

.single-post .carousel-navigation .flickity-prev-next-button.previous {
    left: -60px !important;
}

.single-post .carousel-navigation .flickity-prev-next-button.next {
    right: -60px !important;
}

.single-post .carousel-navigation .carousel-cell {
    background-color: var(--wp--preset--color--white);
    border-radius: 10px;
    height: 100px;
    width: 100px;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;
}

.single-post .carousel-navigation .carousel-cell>div {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/** Portfolio: Single - Materiaal/Verhaal **/
.single-post #materiaal {
    text-align: center;
    margin: auto;
}

.single-post #materiaal span {
    text-shadow: 0px 10px 15px #0000001a, 0px 4px 6px #0000001a;
}

.single-post :is(#materiaal, #verhaal) h2 {
    margin-bottom: 15px;
}


    .single-post main>section.wp-block-group:last-child {
        margin-bottom: 0px !important;
    }
    .single-post main>section.wp-block-group:last-child>div {
        padding-bottom: 0px !important;
    }


/* Start */
.home.page .portfolio-carousel .flickity-viewport {
    padding-bottom: 10px !important;
}

.home.page .portfolio-carousel a {
    box-shadow: 0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;
    border-radius: 15px;
    margin: 5px;
    height: 300px;
}

.home.page .portfolio-carousel a img {
    height: 300px;
    border-radius: 15px;
}

.home.page .naar-buiten-archive {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* Naar Buiten */
/** Naar Buiten: Archive **/
.naar-buiten-archive h2.wp-block-heading {
    display: none;
}

:is(.current, .past) .naar-buiten-archive h2.wp-block-heading {
    display: block;
}

.current .naar-buiten-archive h2.wp-block-heading::before {
    content: "Actueel";
}

.past .naar-buiten-archive h2.wp-block-heading::before {
    content: "Voorbij";
}

.naar-buiten-archive article {
    display: flex;
    flex-direction: row;
    padding: 0px !important;
}

@media screen and (max-width: 1020px) {
    .naar-buiten-archive article {
        flex-direction: column;
    }

    .naar-buiten-archive article aside {
        border-radius: 15px 15px 0 0 !important;
    }
}

.naar-buiten-archive article aside {
    border-radius: 15px 0 0 15px;
    background-size: cover;
    min-height: 200px;
    min-width: 40%;
    background-position: center;
}

.naar-buiten-archive article>div {
    padding: 15px;
}

.naar-buiten-archive article .subtitle {
    margin: 0px;
    text-align: center;
}

.naar-buiten-archive article .subtitle a {
    text-decoration: none;
    display: block;
}

.naar-buiten-archive :is(.wanneer, .locatie)::before {
    font-family: "Font Awesome 6 Free";
    padding-right: 10px;
    padding-left: 7.5px;
    width: 20px;
    display: inline-block;
    text-align: center;
}

.naar-buiten-archive header>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
}

.naar-buiten-archive :is(.wanneer, .locatie) {
    font-size: 15px;
    margin-left: 15px;
    text-align: center;
    padding: 5px 10px;
    font-style: italic;
}

.naar-buiten-archive .wanneer::before {
    content: "\f017";
    margin-left: -20px;
    font-style: normal;
}

.naar-buiten-archive .locatie::before {
    content: "\f3c5";
    font-weight: 900;
    margin-left: -20px;
    font-style: normal;
}

.naar-buiten-archive .description {
    margin: 0 15px;
    text-align: center;
}

.naar-buiten-archive .buttons {
    margin: 15px 15px 5px 15px;
    text-align: center;
}

.naar-buiten-archive .readmore {
    border: 1px solid rgb(156, 101, 94);
    color: var(--wp--preset--color--brownred);
    box-shadow: var(--wp--preset--shadow--shadow-lg);
    background-color: var(--wp--preset--color--white-light);
    font-family: var(--wp--preset--font-family--playwrite-tz);
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;
    border-radius: 999px;
    display: inline-block;
    margin-top: 10px;
}

.naar-buiten-archive .readmore:hover {
    border: 1px solid var(--wp--preset--color--brownred-light);
    color: var(--wp--preset--color--white);
    background-color: var(--wp--preset--color--brownred-light);
}

/** Naar Buiten: Single **/
.single-naar_buiten :is(.wanneer, .locatie)::before {
    font-family: "Font Awesome 6 Free";
    padding-right: 10px;
    padding-left: 7.5px;
    width: 20px;
    display: inline-block;
    text-align: center;
}

.single-naar_buiten #details {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 15px;
}

.single-naar_buiten :is(.wanneer, .locatie) {
    font-size: 15px;
    margin-left: 15px;
    text-align: center;
    padding: 5px 10px;
    font-style: italic;
}

.single-naar_buiten .wanneer::before {
    content: "\f017";
    margin-left: -20px;
    font-style: normal;
}

.single-naar_buiten .locatie::before {
    content: "\f3c5";
    font-weight: 900;
    margin-left: -20px;
    font-style: normal;
}

.single-naar_buiten .locatie a {
    cursor: pointer;
}

.single-naar_buiten .carousel:not(.is-fullscreen) {
    margin-left: var(--wp--preset--spacing--80) !important;
    margin-right: var(--wp--preset--spacing--80) !important;
}

@media screen and (max-width: 720px) {
    .single-naar_buiten .carousel:not(.is-fullscreen) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .single-naar_buiten section.wp-block-group:last-child {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.single-naar_buiten .carousel:not(.is-fullscreen) .flickity-viewport {
    height: 325px !important;
}

.single-naar_buiten .carousel .carousel-cell {
    height: 300px;
    border-radius: 15px;
    margin: 5px;
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

.single-naar_buiten .carousel.is-fullscreen .carousel-cell {
    height: 95vh;
    margin-top: 2.5vh;
}

.single-naar_buiten .carousel.is-fullscreen {
    padding: 0 10px;
}

.single-naar_buiten .carousel.is-fullscreen {
    width: calc(100vw - 20px) !important;
}

/* MailPoet */
:where(.mailpoet_text,.mailpoet_textarea,.mailpoet_select) {
    padding: 15px !important;
    border-radius: 15px;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--brownred);
    font-family: var(--wp--preset--font-family--montserrat);
    border: 1px solid var(--wp--preset--color--brownred);
    background-color: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

.mailpoet_submit  {
    margin: auto !important;
    display: block;
    cursor: pointer;
    padding: calc(0.667em + 2px) calc(1.333em + 2px) !important;
    border-radius: 9999px;
    font-size: inherit;
    color: var(--wp--preset--color--brownred);
    font-family: var(--wp--preset--font-family--playwrite-tz);
    border: 1px solid var(--wp--preset--color--brownred) !important;
    background-color: var(--wp--preset--color--white-light);
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

.mailpoet_submit:hover {
    color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--brownred-light) !important;
    background-color: var(--wp--preset--color--brownred-light);
}

.mailpoet_message p {
    padding: 15px;
    border-radius: 15px;
    background-color: var(--wp--preset--color--white-light);
    border: 1px solid var(--wp--preset--color--brownred);
    text-align: center;
    box-shadow: var(--wp--preset--shadow--shadow-lg);
}

:where(.mailpoet_text,.mailpoet_textarea)::placeholder {
    font-style: italic;
    color: var(--wp--preset--color--brownred-light);
}

div.mailpoet_form_html {
    margin-top: var(--wp--preset--spacing--30) !important;
}

.single-mailpoet_page .mailpoet_paragraph label {
    margin: 20px 0 10px 0 !important;
}

.single-mailpoet_page .mailpoet_paragraph fieldset {
    margin: 20px !important;
}