/*
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: 2.1.2
*/

: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 */

#page-container #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: 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 .1s 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;
    align-items: flex-end;
    column-gap: 1em;
    row-gap: 0.4em;

    & h3 {
        padding: 0;
    }
}

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

.weekly-items {
    border-width: 2px 0 1px;
    border-style: solid;
    padding: 1.4em 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.4em;
}

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

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

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

    & a {
        color: inherit;
    }
}

.donators {
    display: flex;
    flex-direction: column;
    column-gap: .5em;
    border-top: 2px solid;
}

.donator {
    display: flex;
    column-gap: 0.5em;
    border-bottom: 1px solid rgb(0,0,0,.35);
    padding: .35em 0;
}

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

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

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

span.currency {
    font-size: 0.9em;
    margin-right: 0.2em;
    opacity: .6;
}

.account-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;
    column-gap: 1.5em;
    row-gap: .75em;
    padding-top: .8em;

    & h4 {
        width: 100%;
        padding-top: 0.3em;
        font-size: calc(var(--h5) * .9);
        display: none;
    }
}

.account-item {
    flex-grow: 1;
}

.account-item.qris-item {
    display: flex;
    gap: .75em;

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

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

@media (max-width: 1121px) {

    .account-item.qris-item {
        justify-content: space-between;
    }

    .qris-yma {
        order: 2;
    }
}

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

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

.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;
    }
}