/*
Theme Name: Al-Ittihad
Theme URI: https://al-ittihad.id
Description: Theme for Masjid Al-Ittihad
Author: Bindanaku
Author URI: https://bindanaku.com
Template: Divi
Version: 1.0.3
*/

:root {
    --h1: clamp(2.1773rem, 1.8025rem + 1.6657vw, 3.0518rem);
    --h2: clamp(1.8144rem, 1.5457rem + 1.1943vw, 2.4414rem);
    --h3: clamp(1.512rem, 1.3229rem + 0.8402vw, 1.9531rem);
    --h4: clamp(1.26rem, 1.1304rem + 0.5762vw, 1.5625rem);
    --h5: clamp(1.05rem, 0.9643rem + 0.381vw, 1.25rem);
    --h6: 1rem;
    --p: clamp(0.875rem, 0.8214rem + 0.2381vw, 1rem);

    --space-3xs: clamp(0.25rem, calc(0.22rem + 0.16vw), 0.38rem);
    --space-2xs: clamp(0.50rem, calc(0.44rem + 0.31vw), 0.75rem);
    --space-xs: clamp(0.75rem, calc(0.66rem + 0.47vw), 1.13rem);
    --space-s: clamp(1.00rem, calc(0.88rem + 0.63vw), 1.50rem);
    --space-m: clamp(1.50rem, calc(1.31rem + 0.94vw), 2.25rem);
    --space-l: clamp(2.00rem, calc(1.75rem + 1.25vw), 3.00rem);
    --space-xl: clamp(3.00rem, calc(2.63rem + 1.88vw), 4.50rem);
    --space-2xl: clamp(4.00rem, calc(3.50rem + 2.50vw), 6.00rem);
    --space-3xl: clamp(6.00rem, calc(5.25rem + 3.75vw), 9.00rem);

	--primary-color: var(--gcid-primary-color);
    --secondary-color: var(--gcid-secondary-color);
    --accent-color: var(--gcid-accent-color);
    --background-color: var(--gcid-background-color);
    --text-color: var(--gcid-text-color);
    --heading-color: var(--gcid-heading-color);
    --border-color: var(--gcid-border-color);

	 /* Typography */
    --body-text-color: var(--gcid-body-text-color);
    --heading-text-color: var(--gcid-heading-text-color);
    --link-color: var(--gcid-link-color);
    --link-hover-color: var(--gcid-link-hover-color);

    /* Button elements */
    --button-background: var(--gcid-button-background);
    --button-text: var(--gcid-button-text);
    --button-hover-background: var(--gcid-button-hover-background);

    /* Link colors */
    --color-link: var(--primary-color);
    --color-visited: var(--secondary-color);
    --color-hover: var(--primary-color);
	
}

/* Headings */

body h1 { font-size: var(--h1); }
body h2 { font-size: var(--h2); }
body h3 { font-size: var(--h3); }
body h4 { font-size: var(--h4); }
body h5 { font-size: var(--h5); }
body h5 { font-size: var(--h6); }

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading { margin-bottom: 1.25rem; }

*+h1.wp-block-heading,
*+h2.wp-block-heading,
*+h3.wp-block-heading,
*+h4.wp-block-heading,
*+h5.wp-block-heading,
*+h6.wp-block-heading { margin-top: 1.25rem; }

.et_pb_post_content h1,
.et_pb_post_content h2,
.et_pb_post_content h3,
.et_pb_post_content h4,
.et_pb_post_content h5,
.et_pb_post_content h6 { margin-bottom: 1.5rem; }

.et_pb_post_content *+h1,
.et_pb_post_content *+h2,
.et_pb_post_content *+h3,
.et_pb_post_content *+h4,
.et_pb_post_content *+h5,
.et_pb_post_content *+h6 { margin-top: 1.5rem; }

/* Navigation */

@scope (#menu-main-navigation) {

    & > li {
        margin-left: clamp(0.5rem, -1rem + 2.5vw, 1.5rem) !important;
    }

    & > li:first-child {
        margin-left: 0 !important;
    }

    .sub-menu {
        padding: 0 !important;
        width: auto !important;
    }

    .sub-menu > li {
        padding: 0 !important;
    }

    .sub-menu > li a {
        padding: .8em 1.2em !important;
    }

}

footer .et-menu .menu-item-has-children > a {
	padding-right: 0 !important;
}

footer .et-menu .menu-item-has-children .sub-menu,
footer .et-menu .menu-item-has-children > a::after {
	display: none;
}

/* Lists */

#left-area ol, .entry-content ol, .et-l--body ol, .et-l--footer ol, .et-l--header ol {
    line-height: inherit;
	list-style-position: outside;
	padding-left: 1.2em !important;
}

#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul {
    line-height: inherit;
}

/* Links */

a { 
	transition: all .2s ease;
}

a:hover {
	color: var(--gcid-primary-color);
	filter: saturate(1.5);
}

/* Images */

img[title] { 
    pointer-events: none;	/* Hide image titles on hover */
}


/*-----------------------------------------------------------*/
/* Weekly Summary 
/*-----------------------------------------------------------*/

.weekly-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 1em;
    row-gap: 0.75em;

    & > h4 {
        padding: 0;
		line-height: 1.3;
    }
}

.weekly-summary, .recent-donations {
	height: 100%;
	align-items: flex-start;
	align-content: flex-start;
}

div:has( > .weekly-summary, > .recent-donations) {
	height: 100%;
}

.weekly-range {
    font-size: calc(var(--h6) * .9);
    align-self: center;
}

.weekly-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: .5em;
    padding: 0;
    background: #fff;
    rule: 1px solid #ccc;
}

.weekly-item {
    padding: 1em;
    flex: 1;
}

.weekly-title {
    font-size: var(--h6);
    font-weight: bold;
}

.weekly-income .weekly-title { color: forestgreen; }
.weekly-expense .weekly-title { color: crimson; }

.weekly-amount {
    font-size: var(--h5);
}

.weekly-report-link {
    padding-top: .5em;

    & a {
        color: inherit;
    }
}

.recent-donations {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    container-name: donator;
    container-type: inline-size;
    row-gap: .15em;
}

.recent-donations h4 {
    line-height: 1.3;
}

.donators {
    display: flex;
    border: 1px solid #ccc;
    border-radius: .5em;
    flex-direction: column;
    height: 100%;
    rule: 1px solid rgb(from #ccc r g b / 50%);
    padding: 0 .75em;
	background: #fff;
}

.donator {
    display: flex;
    column-gap: 0.5em;
    flex: 1;
    align-items: flex-start;
	padding: .5em 0;

	@container (width <= 480px) {
		flex-wrap: wrap;
	}
}

.don-date {
    font-size: calc(var(--p) * .8);
    position: relative;
    top: 0.1em;
    min-width: 8ch;

	@container (width <= 480px) {
		flex-grow: 1;
	}
}

.don-name {
    flex-grow: 1;
    font-size: calc(var(--p) * .95);
	font-weight: 600;

	@container (width <= 480px) {
		order: 2;
		flex-grow: 1;
		width: 100%;
	}
}

.don-amount {
    font-size: calc(var(--p) * .95);

	@container (width <= 480px) {
		order: 1;
	}
}

span.currency {
    font-size: 0.8em;
    margin-right: 0.15em;
    opacity: .6;
}

.account-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
    padding-top: .8em;
    row-rule: 1px solid #ccc;
	column-gap: 1em;

	& h4 {
	    width: 100%;
	    padding: 0.3em 0 1em;
	    font-size: calc(var(--h5) * .9);
	    font-weight: 500;
	}
}

.account-item {
    flex-grow: 1;
    display: flex;
    gap: 1em;
    align-items: flex-start;
    flex-direction: row;
    padding: 1em 0;
}

.account-item.qris-item {
    & .account-name span {
        font-size: .6em;
        font-weight: normal;
        font-style: italic;
    }
}

.account-logo img {
    width: 4em;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    max-width: unset;
}

.qris-yma img {
    border: 1px solid;
    border-radius: .2em;
}

.account-name {
    font-size: calc(var(--h6) * 1.1);
    font-weight: bold;
    line-height: inherit;
}

.account-holder {
    font-size: calc(var(--h6) * .75);
    line-height: inherit;
}

.account-num {
    font-size: calc(var(--h6) * 1.25);
    font-weight: bold;

    & #copy-btn {
        position: relative;
        font-size: 0.65em;
        top: -0.2em;
        margin-left: .35em;
		display: none;
    }
}