/* ==========================================================================
   VBA - Contact Page Styles (css/contact.css)
   Matching code.html, DESIGN.md, screen.png & index.html typography
   ========================================================================== */

/* Font Family Fallbacks matching Home Page / Index.html */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #fff8f5;
    color: #1e1b18;
}

h1, h2, h3, h4, h5, h6, .font-display, .font-headline-lg, .font-headline-md, .font-headline-sm {
    font-family: 'Outfit', sans-serif;
}

/* Material Symbols Icon Configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Input Focus Styling */
.form-input-focus:focus {
    outline: none;
    border-color: #34302c;
    box-shadow: 0 0 0 4px rgba(189, 96, 38, 0.15);
}

/* Hero Radial Pattern */
.hero-pattern {
    background-image: radial-gradient(#d3c4b9 0.6px, transparent 0.6px);
    background-size: 24px 24px;
}

/* Ambient Card Soft Shadow */
.ambient-card-shadow {
    box-shadow: 0px 12px 32px rgba(93, 64, 36, 0.08);
}

/* Scroll Reveal Animation */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Contact Cards Hover Transition */
.contact-info-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 16px 36px rgba(93, 64, 36, 0.12);
}