/* ---------------------------------
   CONTACT PAGE
--------------------------------- */

.contact-page {
    padding-bottom: 3.5rem;
}

.contact-header {
    margin-bottom: 2.5rem;
}


/* ---------------------------------
   MAIN LAYOUT
--------------------------------- */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.75fr) minmax(0, 1.4fr);
    gap: 3.5rem;
    align-items: center;

    width: min(900px, 100%);
    margin: 0 auto;
}


/* ---------------------------------
   CHARACTER ART
--------------------------------- */

.contact-character {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-art {
    display: block;

    width: 100%;
    max-width: 310px;
    height: auto;

    border-radius: 10px;
}


/* ---------------------------------
   CONTACT DETAILS
--------------------------------- */

.contact-content {
    min-width: 0;
}

.contact-list {
    margin: 0;
}

.contact-item {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;

    padding: 1.05rem 0;

    border-bottom: 1px solid #3c3c3c;
}

.contact-item:first-child {
    border-top: 1px solid #3c3c3c;
}


/* Labels */

.contact-item dt {
    font-family: 'Patrick Hand', cursive;
    font-size: 1.3rem;
    font-weight: 400;

    color: #f1f1f1;
}


/* Values */

.contact-item dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.75rem;

    min-width: 0;
    margin: 0;
}


/* Links */

.contact-item a {
    color: #df7373;

    font-weight: 600;
    text-decoration: none;

    overflow-wrap: anywhere;
}

.contact-item a .external-icon {
    display: inline-block;

    margin-left: 0.25rem;

    color: #8d8d8d;

    transition:
        transform 0.15s ease,
        color 0.15s ease;
}

.contact-item a:hover {
    color: #ff8b8b;
}

.contact-item a:hover .external-icon {
    color: #df7373;
    transform: translate(2px, -2px);
}


/* ---------------------------------
   COPY EMAIL BUTTON
--------------------------------- */

.copy-email {
    appearance: none;

    padding: 0.35rem 0.7rem;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;

    color: #c8c8c8;
    background: #242424;

    border: 1px solid #484848;
    border-radius: 6px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.copy-email:hover {
    color: #fff;
    background: #303030;
    border-color: #666;
}


/* ---------------------------------
   KO-FI / TIP AREA
--------------------------------- */

.tip-note {
    margin-top: 2.25rem;

    padding: 1.4rem 1.5rem;

    background: #181818;

    border: 1px solid #444;
    border-left: 4px solid #c83e3e;

    border-radius: 0 12px 12px 0;
}


/* Main Ko-fi text */

.tip-content > p:first-child {
    max-width: 32rem;

    margin: 0;

    color: #e5e5e5;

    font-size: 1rem;
    line-height: 1.7;
}


/* Ko-fi button */

.tip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    width: fit-content;

    margin-top: 1rem;

    padding: 0.7rem 1.05rem;

    color: #fff;
    background: #c83e3e;

    border-color: #e35a5a;
}

.tip-button:hover {
    color: #fff;
    background: #dd4c4c;
}

.tip-button .fa-heart {
    font-size: 0.95rem;
}


/* Thank-you text */

.tip-note .thank-you {
    margin: 0.8rem 0 0;

    font-family: 'Patrick Hand', cursive;
    font-size: 1.35rem;
    line-height: 1.15;

    color: #ef8b8b;
}


/* ---------------------------------
   RESPONSIVE
--------------------------------- */

@media (max-width: 760px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-art {
        max-width: 260px;
    }

    .contact-content {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .contact-page {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .contact-item {
        grid-template-columns: 1fr;

        gap: 0.3rem;

        padding: 0.9rem 0;
    }

    .contact-item dt {
        font-size: 1.15rem;
    }

    .tip-note {
        margin-top: 1.75rem;
        padding: 1.2rem;
    }

    .tip-button {
        width: 100%;
    }
}