/*!
 Theme Name: Rubrum
 Theme URI:
 Author: Dev Team
 Author URI:
 Description: Rubrum is a blank canvas for your ideas and it makes the block editor your best brush.
 Requires at least: 6.6
 Tested up to: 7.0
 Requires PHP: 8.0
 Version: 7.0
 Text Domain: rubrum
*/


/** Add your custom styles here **/

.curve-top {
    position: relative;
    overflow: visible;
}
.curve-top::before {
    content: "";
    position: absolute;
    left: 0;
    top: -77.5px;
    width: 100%;
    height: 78.5px;
    background-color: var(--wp--preset--color--secondary);
    clip-path: ellipse(67.08% 300% at 50% 300%);
    z-index: 0;
}



@media (width >= 900px) {

	.wp-block-group:has(> .jena-hero) {
	    position: relative;
	    overflow: hidden;
	}

	.wp-block-group:has(> .jena-hero) > .jena-hero {
	    position: absolute !important;
	    inset: 0;
	    width: 100%;
	    height: 100%;
	    display: flex !important;
	    justify-content: space-between !important;
	    align-items: flex-end !important;
	    margin: 0 !important;
	    padding: 0 !important;
	    pointer-events: none;
	    z-index: 1;
	}

	/* Trash can */
	.jena-hero .trash-can {
	    width: clamp(200px, 20.5vw, 315px) !important;
	    margin: 0 0 -55px 3% !important;
	    flex: 0 0 auto;
	}

	/* Jena headshot */
	.jena-hero .jena-headshot {
	    width: clamp(250px, 23.5vw, 407px) !important;
	    margin: 0 2% -5px 0 !important;
	    flex: 0 0 auto;
	}

	/* Image sizing */
	.jena-hero img {
	    display: block;
	    width: 100% !important;
	    height: auto !important;
	}

	.wp-block-group:has(> .jena-hero) > h1,
	.wp-block-group:has(> .jena-hero) > h2,
	.wp-block-group:has(> .jena-hero) > .wp-block-buttons {
	    position: relative;
	    z-index: 2;
	}
}

@media (width < 900px) {
	.trash-can {
		display: none;
	}
	.jena-headshot {
	    padding-bottom: 40px;
	    margin-left: auto !important;
	    margin-right: auto !important;
	}
}

@media (width <= 500px) {
	.icontext-row2 {
	    flex-wrap: wrap-reverse;
	    justify-content: center;
	    text-align: center;
	}
	.icontext-row1 {
	    flex-wrap: wrap;
	    justify-content: center;
	    text-align: center;
	}
	.icontext-row1 div,
	.icontext-row2 div {
		align-items: center !important;
	}
}