/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.donate-page {
    background: var(--color-surface);
    color: var(--color-black);
    font-family: var(--font-heading);
}

.donate-main {
    padding-top: var(--navbar-height);
    overflow: hidden;
}

.donate-hero {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr) minmax(18rem, 0.36fr);
    gap: clamp(var(--space-8), 5vw, var(--space-14));
    align-items: end;
    min-height: calc(100vh - var(--navbar-height));
    padding-top: clamp(var(--space-14), 11vh, var(--space-17));
    padding-bottom: clamp(var(--space-10), 8vh, var(--space-14));
    background: var(--color-surface);
}

.donate-kicker,
.donate-section-label {
    margin: var(--space-0) var(--space-0) var(--space-4);
    color: var(--color-primary-dark);
    font-size: clamp(var(--text-sm), 1.1vw, var(--text-lg));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: uppercase;
}

.donate-hero h1 {
    max-width: 11ch;
    margin: var(--space-0);
    color: var(--color-primary-dark);
    font-size: clamp(4rem, 10.4vw, 11rem);
    font-weight: var(--font-weight-black);
    line-height: 0.84;
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.donate-hero-copy > p:last-child {
    max-width: 52ch;
    margin: clamp(var(--space-6), 3.2vw, var(--space-10)) var(--space-0) var(--space-0);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: clamp(var(--text-base), 1.45vw, var(--text-xl));
    font-weight: var(--font-weight-semibold);
    line-height: 1.32;
}

.donate-hero-note {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-top: var(--border-width-md) solid var(--color-primary-dark);
    border-bottom: var(--border-width-md) solid var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.donate-hero-note span {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    text-transform: uppercase;
}

.donate-hero-note strong {
    font-size: clamp(var(--text-xl), 2.2vw, var(--text-2xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
}

.donate-account {
    color: var(--color-current);
}

.donate-account-red {
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.donate-account-light {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.donate-account-inner {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 0.94fr) minmax(19rem, 0.58fr);
    gap: clamp(var(--space-8), 7vw, var(--space-16));
    align-items: center;
    min-height: calc(100vh - var(--navbar-height));
    padding-top: clamp(var(--space-12), 9vh, var(--space-16));
    padding-bottom: clamp(var(--space-12), 9vh, var(--space-16));
}

.donate-account-light .donate-account-inner {
    direction: rtl;
}

.donate-account-light .donate-info,
.donate-account-light .donate-qr {
    direction: ltr;
}

.donate-info h2 {
    max-width: 12ch;
    margin: var(--space-0) var(--space-0) clamp(var(--space-7), 4vw, var(--space-11));
    color: var(--color-current);
    font-size: clamp(3.25rem, 7.2vw, 8rem);
    font-weight: var(--font-weight-black);
    line-height: 0.86;
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.donate-account-red .donate-section-label {
    color: var(--color-surface);
}

.donate-details {
    display: grid;
    gap: var(--space-3);
    max-width: 44rem;
    margin: var(--space-0);
}

.donate-info,
.donate-details,
.donate-detail {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.donate-detail {
    display: grid;
    grid-template-columns: minmax(8.5rem, 0.38fr) minmax(var(--space-0), 1fr);
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4) var(--space-0);
    border-top: var(--border-width-md) solid currentColor;
}

.donate-detail:last-child {
    border-bottom: var(--border-width-md) solid currentColor;
}

.donate-detail dt,
.donate-detail dd {
    margin: var(--space-0);
    color: var(--color-current);
    font-size: clamp(var(--text-base), 1.35vw, var(--text-xl));
    line-height: var(--line-height-tight);
}

.donate-detail dt {
    font-weight: var(--font-weight-black);
}

.donate-detail dd {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
}

.donate-account-number dd {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.donate-account-number span {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
}

.donate-copy-button,
.donate-copy-button + a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    min-height: 2.625rem;
    padding: 0.66rem 1rem;
    border: var(--border-width-md) solid currentColor;
    border-radius: var(--radius-sm);
    background: var(--color-transparent);
    color: var(--color-current);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color var(--transition-fast) var(--easing-standard),
        color var(--transition-fast) var(--easing-standard),
        transform var(--transition-fast) var(--easing-standard);
}

.donate-copy-button {
    cursor: copy;
}

.donate-copy-button:hover,
.donate-copy-button:focus-visible,
.donate-copy-button + a:hover,
.donate-copy-button + a:focus-visible {
    transform: translate3d(0, -0.12rem, 0);
}

.donate-account-red .donate-copy-button:hover,
.donate-account-red .donate-copy-button:focus-visible,
.donate-account-red .donate-copy-button + a:hover,
.donate-account-red .donate-copy-button + a:focus-visible {
    background: var(--color-surface);
    color: var(--color-primary-dark);
}

.donate-account-light .donate-copy-button:hover,
.donate-account-light .donate-copy-button:focus-visible,
.donate-account-light .donate-copy-button + a:hover,
.donate-account-light .donate-copy-button + a:focus-visible {
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.donate-message {
    max-width: 43rem;
    margin: clamp(var(--space-6), 3vw, var(--space-9)) var(--space-0) var(--space-0);
    color: var(--color-current);
    font-family: var(--font-body);
    font-size: clamp(var(--text-base), 1.25vw, var(--text-lg));
    font-weight: var(--font-weight-semibold);
    line-height: 1.38;
}

.donate-message strong {
    font-weight: var(--font-weight-black);
}

.donate-qr {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-self: center;
    width: min(100%, var(--qr-frame-width, 32rem));
    padding: clamp(var(--space-4), 2.2vw, var(--space-6));
    border: var(--border-width-md) solid currentColor;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    margin: var(--space-0);
}

.donate-qr img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(68vh, 42rem);
    margin: auto;
    object-fit: contain;
}

.donate-account-light .donate-qr {
    background: var(--color-white);
}

.donate-qr figcaption {
    max-width: 31rem;
    margin: var(--space-0);
    color: var(--color-current);
    font-size: clamp(var(--text-sm), 1.1vw, var(--text-base));
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

@media (max-width: 980px) {
    .donate-main {
        padding-top: var(--navbar-height-mobile);
    }

    .donate-hero,
    .donate-account-inner {
        min-height: auto;
    }

    .donate-hero {
        grid-template-columns: 1fr;
        padding-top: var(--space-14);
    }

    .donate-hero h1 {
        max-width: 12ch;
        font-size: clamp(3.5rem, 14vw, 8rem);
    }

    .donate-hero-note {
        max-width: 32rem;
    }

    .donate-account-inner,
    .donate-account-light .donate-account-inner {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .donate-info h2 {
        max-width: 13ch;
        font-size: clamp(3rem, 11vw, 6rem);
    }

    .donate-qr img {
        max-height: none;
    }
}

@media (max-width: 620px) {
    .donate-hero {
        padding-top: var(--space-11);
        padding-bottom: var(--space-10);
    }

    .donate-kicker,
    .donate-section-label {
        font-size: var(--text-sm);
    }

    .donate-hero h1 {
        font-size: clamp(3rem, 15vw, 4.75rem);
    }

    .donate-hero-copy > p:last-child {
        font-size: var(--text-base);
    }

    .donate-hero-note {
        padding: var(--space-5) var(--space-0);
    }

    .donate-account-inner {
        padding-top: var(--space-10);
        padding-bottom: var(--space-11);
    }

    .donate-info h2 {
        font-size: clamp(2.5rem, 13vw, 4.25rem);
    }

    .donate-detail {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-0);
    }

    .donate-account-number dd {
        align-items: stretch;
    }

    .donate-copy-button,
    .donate-copy-button + a {
        width: 100%;
        min-height: 3rem;
    }

    .donate-qr img {
        max-width: 100%;
        min-width: var(--space-0);
    }

    .donate-qr {
        width: 100%;
    }
}