/*
	(c) SAINT ANGELA CHOIR. ALL RIGHTS RESERVED.
	YOU MAY NOT USE, COPY, OR REDISTRIBUTE THIS FILE WITHOUT AUTHORISED PERMISSION.
*/

:root
{
	--agape-key-animation: cubic-bezier(0.3, 0.8, 0, 1);
	--agape-animation: 0.4s var(--agape-key-animation);
	--agape-icons: "SF Symbols";
}

#header
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

	[data-row], [data-row*="middle"]
	{
		transition: 
			0.15s background-color, 
			0.05s backdrop-filter,
			0.05s -webkit-backdrop-filter;
	}
}
#header:not(.scrolled)
{
	[data-row]
	{
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	[data-row*="middle"]
	{
		background-color: transparent;
	}
}

#footer
{
    display: grid;
    gap: 20px;
    padding: 30px;

    .supported-by
    {
    	.wp-block-group
    	{
    		flex-wrap: wrap;
    	}
    	img
    	{
    		background: #fcc2ff;
    		min-width: 80px;
    		min-height: 80px;
    		height: 80px;
    	}
    }

    .wp-block-social-links
    {
    	svg
    	{
    		width: 35px;
    		height: 35px;
    	}
    }
}

.wp-block-buttons:has(.next, .prev)
{
	position: relative;
	margin: 0;
}
.wp-block-buttons:not(.navigation):has(.next, .prev)
{
	margin: 50px 0;
}

.wp-block-button.next > a,
.wp-block-button.prev > a
{
	position: absolute;
    display: flex;
	gap: 0.5ch;
	background: transparent;
	color: #f8d569;
	font-size: 1.05em;
	font-weight: bold;
	padding: 0;
	width: auto;    
	max-width: 50vw;
	line-height: 1.2;
	z-index: 5;
}
.wp-block-buttons.navigation .wp-block-button.next > a,
.wp-block-buttons.navigation .wp-block-button.prev > a
{
	top: 25px;
}
.wp-block-button.next > a:hover,
.wp-block-button.prev > a:hover
{
	filter: brightness(0.8);
}
.wp-block-button.next > a:active,
.wp-block-button.prev > a:active
{
	filter: brightness(0.65);
}
.wp-block-button.next > a
{
	right: 0;
	text-align: right;
}
.wp-block-button.prev > a
{
	left: 0;
	text-align: left;
    flex-direction: row-reverse;
}
.wp-block-button.next > a::after
{
	content: "\ef4a";
	font-family: var(--agape-icons);
	font-weight: bold;
}
.wp-block-button.prev > a::after
{
	content: "\ef38";
	font-family: var(--agape-icons);
	font-weight: bold;
}

body:not(.amp) .coblocks-animate
{
	animation-timing-function: var(--agape-key-animation);
	animation-duration: 0.4s;
}

.wp-block-heading
{
	line-height: 1.15em;
}

body.home
{
	.banner
	{
		position: relative;

		h1, h3
		{
		    filter: drop-shadow(4px 4px 0 #464186);
			max-width: 800px	
		}
	}
	.banner::before
	{
		content: "";
        display: block;
        position: absolute;
        top: -185px;
        left: -25vw;
        right: -25vw;
        bottom: 0;
        background: url(https://saicf.saintangelachoir.com/wp-content/uploads/2025/05/Background-Banner-Homepage-3.webp);
        background-position: center;
        background-repeat: no-repeat;        
        background-size: auto 100%;
        z-index: -1;
	}
	.banner::after
	{
		content: "";
        display: block;
        position: absolute;
        top: -185px;
        left: -50vw;
        right: -50vw;
        bottom: 0;
        background-image: linear-gradient(transparent, var(--theme-palette-color-8));
        z-index: -1;
	}

	.conclusion
	{
		max-width: 700px;
	}


	.teaser
	{
		position: relative;
        margin-block-end: 0;

		video
		{        
	        display: block;
	        margin: 0 auto;
			max-width: 800px;
		}
	}
	.teaser::before
	{
		content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -50vw;
        right: -50vw;
        bottom: 0;
        opacity: 0.7;
        background: url(https://saicf.saintangelachoir.com/wp-content/uploads/2025/04/Background-Teaser.png);
        background-position: center;
        background-repeat: no-repeat;        
        background-size: min(100%, 2500px) auto;
        z-index: -1;
	}

	.gallery
	{
		.swiper-wrapper
		{
			transition: 0.8s var(--agape-key-animation) transform !important;
		}
		img
		{
	        display: block;
	        margin: 0 auto;
	        width: min(var(--theme-block-width), 900px) !important;
	        height: 100% !important;
		}
		.nav-button__next, 
		.nav-button__prev
		{
			background-color: var(--theme-palette-color-2);
			width: 50px;
			height: 50px;
			padding: 0;
			display: grid;
			justify-content: center;
            align-items: center;

			svg
			{
				display: none;
			}
		}
		.nav-button__next::after
		{
			content: "\ef4a";
			color: var(--theme-palette-color-8);
			font-family: var(--agape-icons);
			font-weight: bold;
		}
		.nav-button__prev::after
		{
			content: "\ef38";
			color: var(--theme-palette-color-8);
			font-family: var(--agape-icons);
			font-weight: bold;
		}
	}
	.teaser::after
	{
		content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -50vw;
        right: -50vw;
        bottom: 0;
        background-image: linear-gradient(var(--theme-palette-color-8), transparent, #464186);
        z-index: -1;
	}

	.competitions
	{
		display: grid;
		background: #f8d569;
		cursor: pointer;
		user-select: none;
		transition: var(--agape-animation) filter;

		* { margin: 0 }

		h5
		{
			color: #1c2873;
			display: grid;
            grid-auto-flow: column;
            grid-auto-columns: auto max-content;
            width: 100%;
            padding: 10px 15px;
		}
		h5::after
		{
			content: "\ef4a";
			font-family: var(--agape-icons);
			font-style: normal;            
			font-size: 0.85em;
            width: 1ch;
		}
		figure
		{
			pointer-events: none;
		}
	}
	.competitions:hover
	{
		filter: brightness(0.8);
	}
	.competitions:active
	{
		filter: brightness(0.7);
	}

	.posts
	{
        position: relative;
        padding: 0 0 50px;
        margin-bottom: calc(var(--theme-content-vertical-spacing) * -1);
	}
	.posts::after
	{
		content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -50vw;
        right: -50vw;
        bottom: 0;
        background: #464186;
        z-index: -1;
	}
}


body.page:not(.home)
{
	.banner
	{
		position: relative;
        padding: 150px 0 50px;
        text-align: center;
        margin-block-end: 0;
        margin-bottom: 100px;

		h1, h3
		{
		    filter: drop-shadow(4px 4px 0 #46418650);
			max-width: 800px	
		}
	}
	.banner::before
	{
		content: "";
        display: block;
        position: absolute;
        top: calc(var(--theme-content-vertical-spacing) * -1);
        left: -50vw;
        right: -50vw;
        bottom: -150px;
        background: url(https://saicf.saintangelachoir.com/wp-content/uploads/2025/05/Background-Banner-Homepage-2.webp);
        background-position: center;
        background-repeat: no-repeat;        
        background-size: cover;
        animation: 1s var(--agape-key-animation) agape-bannerIn;
        z-index: -1;
	}
	.banner::after
	{
		content: "";
        display: block;
        position: absolute;
        top: calc(var(--theme-content-vertical-spacing) * -1);
        left: -50vw;
        right: -50vw;
        bottom: -150px;
        background-image: linear-gradient(transparent, var(--theme-palette-color-8));
        animation: 1s var(--agape-key-animation) agape-bannerOverlayIn;
        z-index: -1;
	}
	.banner:has(img) 
	{
        margin-bottom: 175px;

		figure
		{
			all: unset;
	        position: absolute;
	        top: calc(var(--theme-content-vertical-spacing) * -1);
	        left: -50vw;
	        right: -50vw;
	        bottom: -150px;
	        z-index: -2;

			img
			{
	            display: block;
	            margin: 0 auto;
	            width: 100vw;
	            height: 100%;
	            object-fit: cover;
	            object-position: center;
	            filter: brightness(0.55);
	            animation: 1s var(--agape-key-animation) agape-bannerIn;
			}
		}
	}
	.banner:has(img)::before
	{
		display: none;
	}
	.banner:has(img)::after
	{
        background-image: linear-gradient(transparent 25%, var(--theme-palette-color-8));
        animation: 1s var(--agape-key-animation) agape-bannerOverlayIn;
	}

	.map
	{
		height: 300px;
	}

	.schedule
	{    
		display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 200px max-content;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding-right: 50vw;
        width: calc(100% + 50vw);
        margin-right: -50vw;
        scrollbar-width: none;
        scroll-padding-right: 50px;

		.date
		{
			position: sticky;
			left: 0;
			background: #f8d569;
			color: #1c2873;
            padding: 12px 25px 12px 15px;
            z-index: 1;
		}

		.activity
		{
            position: relative;
            background: linear-gradient(90deg, #ffe287, #f7d772);
            color: #1c2873;
            padding: 12px 15px 12px 25px;
            display: flex;
            align-items: center;
            max-width: 200px;
		}
		.activity:before 
		{
            content: "";
            position: absolute;
            left: 0;
            display: block;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-right: 15px solid #f7d772;
            rotate: 180deg;
		}
	}
	.wp-block-group:has(.schedule) > .swipe
	{
		display: none;
	}

	@media screen and (max-width: 1280px)
	{
		.schedule
		{
			grid-auto-columns: 105px max-content;

			.date
			{
			    align-items: center;
				font-size: 0.625em;
				text-align: center;

				> .wp-block-group
				{
					display: grid;
				}
			}
		}
	}

	@media screen and (max-width: 1150px)
	{
		.wp-block-group:has(.schedule) > .swipe
		{
			display: block;
		}
	}

	.dateactivity
	{
		gap: 15px;
		.date
		{
			display: grid;
            grid-auto-columns: 4.15em 3em;
			grid-template-areas: 
				"day x"
				"day month"
				"day year";
			color: #f8d569;
			line-height: 1;            
			align-items: end;
			text-transform: uppercase;

			p:nth-child(1) 
			{ 
				grid-area: day;
				font-size: 3em;
                font-weight: bold;
                text-align: right;
                height: 0.9em;
                margin-right: 0.15em;
			}
			p:nth-child(2) 
			{ 
				grid-area: month;
                font-weight: bold;
			}
			p:nth-child(3) 
			{ 
				grid-area: year;
                font-weight: bold;
			}
		}

		.activity
		{
            font-size: 1.2em;
            line-height: 1.2em;
            font-weight: 700;
		}
	}

	@media screen and (max-width: 780px)
	{
		.wp-block-columns:has(.dateactivity)
		{
			gap: 50px;
		}

		.dateactivity
		{
			.date
			{
				grid-template-areas: 
					"day"
					"month"
					"year";
					font-size: 0.9em;
				text-align: center;

				p:nth-child(1) 
				{ 
					text-align: inherit;
					margin-bottom: 0.15em;
	                margin-right: 0;
				}
			}
		}
	}

	.profile
	{
		width: 320px;
		background: transparent;
        padding: 35px 20px;
        transition: 0.15s background;
        cursor: pointer;

		.desc
		{
			font-size: 0.9em;
            margin: 1em 0;
		}

		img
		{
			-webkit-user-drag: none;
			user-select: none;
		}
	}

	.profile:hover
	{
		background: #ffffff10;
	}

	.profile:active
	{
		background: #ffffff20;
	}

	.biography
	{
	    display: grid;
	    grid-auto-flow: column;
	    gap: 50px;
	    text-align: justify;
	    margin-top: 50px;

	    img
	    {
		    display: block;
		    margin: 0 auto;
		    border-radius: 100%;
	    }
	}

	@media screen and (max-width: 800px)
	{
		.biography
		{
		    grid-auto-flow: row;
		    gap: 10px;
		}
	}

	.forms
	{
		display: grid;
		background: #f8d569;
		cursor: pointer;
		user-select: none;
		transition: var(--agape-animation) filter;

		* { margin: 0 }

		h5
		{
			color: #1c2873;
			display: grid;
            grid-auto-flow: column;
            grid-auto-columns: auto max-content;
            width: 100%;
            padding: 10px 15px;
		}
		h5::after
		{
			content: "\ef4a";
			font-family: var(--agape-icons);
			font-style: normal;            
			font-size: 0.85em;
            width: 1ch;
		}
		figure
		{
			pointer-events: none;
		}
	}
	.forms:hover
	{
		filter: brightness(0.8);
	}
	.forms:active
	{
		filter: brightness(0.7);
	}
}

body.search
{
	.page-title
	{
		margin-top: 50px;
	}
}


 /*  ---------------------- Library of assets.agapedimas.com ------------------ */
.expander
{
	display: grid;
    margin-block-end: 10px;

	> .header
	{
		all: unset;
        display: grid;
        grid-template-areas:
        	"title content arrow";
        grid-auto-columns: auto max-content max-content;
        width: inherit;
        line-height: 1.2em;
        min-height: 35px;
        padding: 15px 20px;
        gap: 0;
        background: #464186;        
        align-items: center;
        user-select: none;        
        box-sizing: border-box;
        z-index: 1;

        .title
        {
        	grid-area: title;
        	font-weight: 700;
        }
        .description
        {
        	grid-area: description;
        }
        > *:not(.title, .description)
        {
        	margin: 0 20px;
        	grid-area: content;
        }
	}
	> .header:has(.description)
	{
        grid-template-areas:
        	"title content arrow"
        	"description content arrow";
	}
	> .header::after
	{
        grid-area: arrow;
        display: grid;
        content: "\ef60";
        font-family: var(--agape-icons);
        font-weight: bold;
        align-self: center;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        transition: 0.15s background;
	}
	> .header:hover::after
	{
        background: #625eab;
	}
	> .header:active::after
	{
        background: #7b76c8;
	}

	.content
	{
        all: unset;
        box-sizing: border-box;
        width: inherit;
        background: #625eab;
        font-size: 0.85em;
        animation: 0.5s var(--agape-key-animation) agape-expanderIn;
        display: grid;
        padding: 15px 20px;

        .header
        {
			font-weight: bold;
			font-style: italic;
            font-size: 0.85em;
            margin-bottom: 5px;
        }

        ul, ol
        {
        	padding-inline-start: 20px;

        	li
        	{
        		margin: 10px 0;
        	}
        }
	}
	.content:not(:nth-child(2))
	{
		border-top: 1px solid #464186;
	}
}
.expander:not(.opened)
{
	.header::after
	{
        content: "\ef44";
	}
	.content
	{
		display: none;
	}
}

body figure table
{
	border-width: 0 !important;

	thead, tbody
	{
		border: inherit !important;
	}

	thead th
	{
		font-weight: bold;
	}

	th, td
	{
		border-color: #ffffff50 !important;
		border-width: 2px !important;
	}
}

@keyframes agape-expanderIn
{
	0% 
	{
		transform: translateY(-80px);
		opacity: 0; 
	}
}
@keyframes agape-bannerIn
{
	0% 
	{
		transform: scale(1.1);
		opacity: 0; 
	}
}
@keyframes agape-bannerOverlayIn
{
	0% 
	{
		transform: scale(1.15);
	}
}
@font-face 
{
	font-family: "SF Symbols";
	font-display: swap;
	src: 
		url("https://assets.agapedimas.com/fonts/SFProDisplay/symbols.ttf") format("truetype"), 
		url("https://assets.agapedimas.com/fonts/SFProDisplay/symbols.woff") format("woff");
}