/*
Theme Name: De Brugkrant Block Theme
Theme URI: https://debrugkrant.nl
Author: Gerard van Enk
Author URI: https://millionpieces.nl
Description: Custom Block Theme for debrugkrant.nl
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: debrug-theme
*/

/* colors */
:root {
    --debrug-color-category-kunst-en-cultuur-in-oost: #877272;
    --debrug-color-category-de-jas: #714c46;
    --debrug-color-category-buurten-in-de-brouwerij: #a38049;
    --debrug-color-category-de-veranderende-stad: #6f728c;
    --debrug-color-category-de-weg-kwijt: #908250;
    --debrug-color-category-jan-geeft-sterren: #86625D;
    --debrug-color-category-column: #356C7C;
    --debrug-color-category-ingezonden: #6E8CAA;
    --debrug-color-category-amsterdam-750: #D90012;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-inline-size: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

:not([class]) {

    h1&,
    h2&,
    h3&,
    h4&,
    h5&,
    h6& {
        margin-block: 0.75em;
        line-height: 1.25;
        text-wrap: balance;
        letter-spacing: -0.05ch;
    }

    p&,
    ol&,
    ul& {
        margin-block: 1em;
    }

    ol&,
    ul& {
        padding-inline-start: 1.5em;
        list-style: revert;
    }

    li& {
        margin-block: 0.5em;
    }
}

:is(h1, h2, h3, h4, h5, h6) a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        color: var(--wp--preset--color--debrug-green) !important;
    }
}

/* Buttons */
.tribe-button.submit.events-community-submit {
    background-color: var(--wp--preset--color--default) !important;
    border: none;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.wp-block-button__link,
.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-events-c-search__button,
.tribe-button.submit.events-community-submit,
input[type='submit'].mailpoet_submit {
    box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);

    &:active,
    &:hover {
        background-color: var(--wp--preset--color--debrug-green) !important;
        transition: all 350ms ease;

    }

    &:active {
        box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
        transform: scale(0.98);
    }
}

/* Top Banners*/

div:has(> .banner-friends) {
    overflow-x: scroll;

    @media screen and (min-width: 780px) {
        overflow-x: initial;
    }
}

.banner-friends {
    /* display: none; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250vw;
}

@media screen and (min-width: 780px) {
    .banner-friends {
        display: flex;
        justify-content: space-around;

    }
}

/* Navigation */
.debrug-header {
    & nav {
        gap: 1rem;
        overflow-x: hidden;

        @media screen and (min-width: 780px) {
            gap: 2rem;
            overflow-x: visible;
        }
    }


    & .wp-block-navigation-item__content {
        text-decoration-line: underline;
        text-decoration-color: transparent;
        transition: text-decoration 350ms ease, color 350ms ease;

        &:hover {
            color: var(--wp--preset--color--debrug-green);
            text-decoration-color: var(--wp--preset--color--debrug-green) !important;
        }
    }

    & .is-menu-open.has-modal-open {
        padding: var(--wp--preset--spacing--50) !important;

        & .wp-block-navigation-item__content {
            text-transform: none;
            font-size: 1.2rem;
            font-weight: 500;
            border-bottom: 1px solid var(--wp--preset--color--debrug-green);
        }


        & .wp-block-navigation__responsive-container-content {
            padding-block-start: 0;

            & .wp-block-navigation__submenu-container {
                padding-block-start: 0;
            }
        }
    }

    & .wp-block-search__button {
        margin-left: 0;
    }

    & .wp-block-navigation-submenu {

        .wp-block-navigation-submenu {
            padding-inline: 0.2rem;
            padding-block: 0.5rem;
        }


        @media screen and (max-width: 779px) {
            .wp-block-navigation-submenu {
                padding-inline: 0.2rem;
                padding-block: 0;
                margin-block-start: 0.8rem !important;
            }

            & ul {
                gap: 1rem !important;
                margin-block-start: 0.5rem !important;
                padding-inline: 1rem 0 !important;
            }
        }

        & ul li a {
            padding: 0 !important;

            @media screen and (min-width: 780px) {
                padding: 0.2rem 0.5rem !important;
            }

        }
    }
}

/* mobile search */
.debrug-mobile-search {
    display: block;
    margin: 0;

    @media screen and (min-width: 780px) {
        display: none;
    }
}

.debrug-menu-container {
    display: flex;
    justify-content: space-between;

    @media screen and (min-width: 780px) {
        display: block;
    }

    & .is-menu-open.has-modal-open .debrug-desktop-search {
        display: none;
    }
}

/* header */
.debrug-header-meta {
    display: none !important;

    @media screen and (min-width: 780px) {
        display: flex !important;
    }
}

.debrug-header .wp-block-image {
    width: 75%;

    @media screen and (min-width: 780px) {
        width: auto;
    }
}

main {
    padding-inline: var(--wp--preset--spacing--30);

    & hr {
        @media screen and (max-width: 779px) {
            width: 95%;
            margin-inline: auto;
        }
    }

}

/* Sidebar */

.debrug-home-main-sidebar {
    padding-inline-start: 0 !important;

    @media screen and (min-width: 780px) {
        padding-inline-start: var(--wp--preset--spacing--50) !important;
    }

    hr {
        width: 95%;
        margin-inline: auto;
    }
}

.tribe-events-widget-events-list__header-title {
    font-size: var(--wp--preset--font-size--medium) !important;
    font-variant: all-small-caps;
    font-weight: 600 !important;

    @media screen and (max-width: 779px) {
        text-align: center;
    }
}

.banner-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Main content */
.debrug-home-main-content {
    padding-inline: var(--wp--preset--spacing--30);

    @media screen and (min-width: 1000px) {
        padding-inline-start: 0;
        padding-inline-end: var(--wp--preset--spacing--50);
    }
}

.debrug-home-archive-content {
    padding-inline: var(--wp--preset--spacing--30);

    @media screen and (min-width: 1000px) {
        padding-inline: 0;
    }
}

/* Posts */
.wp-block-post-terms a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        color: var(--wp--preset--color--debrug-green);
    }
}

/* Category*/
.debrug-category-description {
    p {
        margin: 0.5rem;
    }
}

body.category h1.wp-block-query-title {
    color: var(--wp--preset--color--debrug-green);
}

/* Agenda */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
    padding-block-start: 0 !important;
}

.tribe-events .tribe-events-c-search__button,
.tribe-events button.tribe-events-c-search__button {
    background-color: var(--wp--preset--color--default) !important;
}

.tribe-events-widget-events-list__event-header h3 {
    font-size: 1.1rem;
}

.tribe-block__venue {
    border-inline-style: none;
    max-width: 100%;

    .tribe-block__venue__meta .tribe-block__venue__name h3 {
        font-size: 1.1rem;
        font-weight: 500;
    }

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

        &.tribe-block__venue--has-map .tribe-block__venue__meta {
            width: 40% !important;
        }

        &.tribe-block__venue--has-map .tribe-block__venue__map {
            width: 60% !important;
        }
    }
}

.debrug-event-meta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--wp--preset--spacing--20);
    padding-bottom: var(--wp--preset--spacing--20);
    font-style: normal;
    font-weight: 600;
    border-block: 1px solid var(--wp--preset--color--debrug-green);
    margin-block-end: var(--wp--preset--spacing--40);
    text-transform: lowercase;
    font-size: 1rem !important;

    a {
        text-decoration: none;

        &:hover {
            text-decoration: underline;
            color: var(--wp--preset--color--debrug-green);
        }
    }
}

.single-tribe_events .tribe-blocks-editor .tribe-events-schedule {
    margin: 0;
}

.tribe-events-schedule__date,
.tribe-events-schedule__time {
    font-weight: 600;
    font-size: 1rem !important;
}

.tribe-events-event-image {
    display: flex;
    justify-content: center;

    img {
        object-fit: contain;
        height: auto;
    }
}

.tribe-block.tec-block__single-event {
    margin-block-start: 0 !important;
}

/* Nieuwsbrief */
.debrug-nieuwsbrief-date {
    display: flex;
    flex-wrap: wrap;
}

.debrug-nieuwsbrief-date label {
    width: 100%;
}

.mailpoet_paragraph label {
    font-weight: 900;
}

.debrug-nieuwsbrief-date select,
form.mailpoet-manage-subscription .mailpoet_select {
    margin: 0 5px 0 0 !important;
    flex: 1;
}

form.mailpoet-manage-subscription .mailpoet_text_label,
form.mailpoet-manage-subscription .mailpoet_select_label,
form.mailpoet-manage-subscription .mailpoet_segment_label {
    display: block;
    font-weight: bold;
}

form.mailpoet-manage-subscription .mailpoet_text {
    width: 100%;
    padding: 10px;
}

form.mailpoet-manage-subscription div.mailpoet_paragraph:nth-of-type(4) {
    display: flex;
    flex-wrap: wrap;
}

form.mailpoet-manage-subscription div.mailpoet_paragraph:nth-of-type(4) label {
    width: 100%;
}

form.mailpoet-manage-subscription div.mailpoet_paragraph:nth-of-type(4) select {
    flex: 1;
    padding: 10px;
    margin: 0 5px 0 0 !important;
}

form.mailpoet-manage-subscription input[title="Postcode"] {
    width: 40%;
}

form.mailpoet-manage-subscription .mailpoet_paragraph {
    margin-bottom: 20px
}