/* ========================================================
   Contact_us.css
   Page-specific styles for Contact_us.aspx.
   Depends on Home.css being loaded first.

   .cr-info-box/.cr-icon/.cr-info-content aren't defined anywhere
   in Home.css (they were only ever in the old shop-style.css),
   so they're recreated here in the gold theme rather than left
   unstyled.
   ======================================================== */

/* === BREADCRUMB === */
.contact-breadcrumb {
    width: 100%;
    padding: 28px 0;
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--light-gold) 100%);
}

.contact-breadcrumb-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

    .contact-breadcrumb-title h2 {
        margin: 0;
        font-family: 'Manrope', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--black);
    }

    .contact-breadcrumb-title span {
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 500;
        color: var(--black);
    }

        .contact-breadcrumb-title span a {
            color: var(--black);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

/* === CONTACT INFO CARDS === */
.cr-info-box {
    height: 100%;
    padding: var(--spacing-lg);
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all var(--transition-base);
}

    .cr-info-box:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-5px);
        border-color: var(--primary-gold);
    }

    .cr-info-box .cr-icon i {
        font-size: 32px;
        color: var(--primary-gold);
        margin-bottom: var(--spacing-sm);
    }

    .cr-info-box .cr-info-content h4.heading {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-sm);
    }

    .cr-info-box .cr-info-content p {
        margin-bottom: 6px;
    }

        .cr-info-box .cr-info-content p:last-child {
            margin-bottom: 0;
        }

        .cr-info-box .cr-info-content p a {
            color: var(--medium-gray);
            font-size: 14px;
            transition: color var(--transition-base);
        }

            .cr-info-box .cr-info-content p a:hover {
                color: var(--primary-gold);
            }

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .contact-breadcrumb-title h2 {
        font-size: 18px;
    }
}