/* ============================================================
   CONTACT PAGE
============================================================ */

.contact-page {
    position: relative;
    min-height: 100vh;
    padding: 180px 20px 120px;
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,248,235,0.50),
            rgba(245,239,228,0.68)
        ),
        url('../img/heaven-clouds.webp');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ============================================================
   ATMOSPHERIC OVERLAY
============================================================ */

.contact-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,220,140,0.18),
            transparent 40%
        ),
        radial-gradient(
            circle at left center,
            rgba(255,255,255,0.35),
            transparent 45%
        );

    pointer-events: none;
}

/* ============================================================
   CONTENT
============================================================ */

.contact-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   HEADING
============================================================ */

.contact-content h1 {
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    color: #4d3b2a;
    margin-bottom: 24px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(255,255,255,0.35);
}

/* ============================================================
   INTRO TEXT
============================================================ */

.contact-intro {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #5f5144;

    max-width: 680px;
    margin: 0 auto 50px;
}

/* ============================================================
   CONTACT CARD
============================================================ */

.contact-card {
    padding: 40px 30px;

    background: rgba(255,255,255,0.58);

    border: 1px solid rgba(255,255,255,0.72);

    border-radius: 22px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 10px 40px rgba(120,90,40,0.08);
}

/* ============================================================
   EMAIL LABEL
============================================================ */

.contact-email-label {
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #8a745c;

    margin-bottom: 16px;
}

/* ============================================================
   EMAIL LINK
============================================================ */

.contact-email {
    display: inline-block;

    font-size: 1.3rem;
    color: #5a4330;

    text-decoration: none;

    padding-bottom: 4px;

    border-bottom: 1px solid rgba(184,134,59,0.35);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.contact-email:hover {
    color: #b8863b;

    border-color: rgba(184,134,59,0.8);

    transform: translateY(-1px);
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .contact-page {
        padding-top: 140px;
    }

    .contact-card {
        padding: 32px 22px;
    }

    .contact-email {
        font-size: 1.05rem;
        word-break: break-word;
    }
}