/* Main Domain Specific Styles */

/* Import is handled via link tag in HTML for better caching strategy on simple static sites, 
   but conceptually this extends shared/style.css */

.hero {
    position: relative;
    padding: var(--spacing-xl) 0;
    text-align: center;
    overflow: hidden;
    /* Hero Background Image Settings */
    /* Hero Background Image Settings */
    /* Light warm overlay instead of dark blue */
    background-image: linear-gradient(rgba(253, 251, 247, 0.85), rgba(253, 251, 247, 0.75)), url('assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Optional: Parallax effect */
    color: var(--color-text-main);
    /* Ensure text is readable */
}

/* Reverting text alignment to center for the background layout */
.hero-content {
    position: relative;
    z-index: 2;
    /* Sit on top of overlay */
    max-width: 800px;
    /* Limit width for readability */
    margin: 0 auto;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    font-weight: 800;
}



/* Remove separate image container styling as it's now background */
.hero-image {
    display: none;
}

/* Ensure gradient text still pops or adjust if needed on dark bg. 
   On dark overlay, the existing blue gradient might need brightening or be just white.
   Let's keep it but make sure it stands out. */
.gradient-text {
    background: linear-gradient(135deg, var(--color-gold-main) 0%, #a8a29e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto var(--spacing-md);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: var(--color-text-main);
    background: rgba(255, 255, 255, 0.05);
}

/* Background Glow Effect */
.hero-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(253, 251, 247, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* Grid Layouts */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-ps);
}

.section-header p {
    color: var(--color-text-muted);
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    background: var(--color-bg-card);
    padding: var(--spacing-lg);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    background: var(--color-bg-body);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    color: var(--color-text-main);
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-accent-main);
    box-shadow: 0 0 0 2px var(--color-accent-glow);
}

/* Footer */
.footer {
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-muted);
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: var(--spacing-md);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer .container {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}