/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================
   Header
   ========================= */
#brx-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 72px;
    background: var(--white);

    .bricks-nav-menu {
        >.menu-item {
            >a {
                border-bottom: 1px solid transparent;
            }

            &:hover>a {
                color: var(--purple);
            }

        }

        .brx-submenu-toggle {
            &:hover>a {
                color: var(--purple);
            }

            &:hover button {
                color: var(--purple);
            }
        }
    }

    .logo-svg .black {
        fill: var(--black);
    }

    .logo-svg .yellow {
        fill: rgb(232, 173, 84);
    }
}

/* Only homepage */
.home {
    #brx-header {
        background-color: transparent;
        transition: all 0.3s ease;

        /* Default menu styles */
        .bricks-nav-menu {
            >.menu-item {
                &:hover>a {
                    border-color: var(--white);
                }

                .brx-submenu-toggle.icon-right,
                a {
                    color: var(--white);
                }
            }

            .sub-menu {
                .menu-item {
                    a {
                        color: var(--black);
                    }
                }
            }

            .brx-submenu-toggle {

                &:hover button {
                    color: var(--white);
                }
            }
        }

        .bricks-button.outline {
            --purple: var(--white);
			&:hover {
				background-color: var(--white);
				color:#731FE3;
			}
        }

        /* Scrolled state */
        &.scrolled {
            background-color: #ffffff;

            .bricks-button.outline {
                --purple: #731FE3;
							&:hover {
				background-color: var(--purple);
				color:var(--white);
			}
            }

            .bricks-nav-menu {
                >.menu-item {
                    &:hover>a {
                        border-color: var(--purple);
                        color: var(--purple);
                    }

                    .brx-submenu-toggle.icon-right {
                        color: var(--black);
                    }

                    a {
                        color: var(--black);
                    }
                }

                .brx-submenu-toggle {
                    &:hover>a {
                        color: var(--purple);
                    }

                    &:hover button {
                        color: var(--purple);
                    }
                }
            }

            .logo-svg .black {
                fill: var(--black);
            }

            .logo-svg .yellow {
                fill: rgb(232, 173, 84);
            }

            /* Mobile Menu */
            .bricks-mobile-menu-toggle {
                color: var(--black);
            }
        }

        /* Mobile Menu */
        .bricks-mobile-menu-toggle {
            color: var(--white);
        }

        .logo-svg .black,
        .logo-svg .yellow {
            fill: var(--white);
        }
    }



}


/*blog post page*/
.custom-blog {
    figure.image-wrapper img {
        background-color: var(----light-grey-i);
        border-radius: 28px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
    }

    .bricks-layout-item {
        align-self: stretch;
		margin-bottom:64px;
			&:nth-child(3n+1) {
				.bricks-layout-inner {
					border-left: none;
					padding-left:0;
				}
			}


        .bricks-layout-inner {
            border-left: 2px solid #EBE5F3;
            padding-left: 24px;
        }
    }

    .content-wrapper {
        display: block;

        h6 {
            display: inline-block;
        }

        div.dynamic {
            display: inline-block;
        }
    }
}

@media (max-width:767px) {
	.custom-blog .bricks-layout-item .bricks-layout-inner {
		border:none;
		padding-left:0;
	}
	.metro-grid .bricks-layout-wrapper {
		display:block !important;
		        height: 100% !important;
		li:not(:last-child) {
			margin-bottom:24px;
		}
	}
}

.metro-grid {
    .bricks-layout-wrapper {
        display: grid;
        gap: 24px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 650px;

        .bricks-layout-item:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }

        .bricks-layout-item:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
        }

        .bricks-layout-item:nth-child(3) {
            grid-column: 2;
            grid-row: 2;
        }

        .bricks-layout-item {
            overflow: hidden;
            margin-bottom: 0;

            .bricks-layout-inner {
                height: 100%;
                border-radius: 28px;
                padding-left: 0;

                img {
                    height: 100%;
                    object-fit: cover;
                }
            }

            .content-wrapper {
                position: absolute;
                display: flex;
                padding: 30px;
                align-content: flex-end;
                flex-direction: row;

                &:after {
                    content: '';
                    background: #00000082;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                }

                .dynamic {
                    --black: #fff;
                }

                h3.dynamic {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    /* number of lines */
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    }
}

/* blog detail page */
.single-post {
	h1,h2,h3,h4,h5,h6 {
		margin-block:16px;
}
	.brxe-post-content a {
		    border-bottom: 1px solid var(--purple);
	}
	blockquote {

		background: #f0e8fa94;

	}
}
/*blog post page*/