/* Main Domain Specific Styles */

/* Tighter section padding — shared default (8rem) is too generous for this page */
.section {
    padding: 3.5rem 0;
}

/* 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 */
    background-image: url('assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: top center;
    background-attachment: scroll;
    /* Image stays at top and scrolls with page */
    background-repeat: no-repeat;
    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: #ffffff;
    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: 1.5rem;
}

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

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

/* Vision Section */
.vision-section {
    background-image: url('../shared/images/vision_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.vision-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.65);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vision-content h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
}

.vision-content p {
    font-size: 1.125rem;
    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: 2rem;
    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);
    }

    /* Smart header: fixed so it can appear mid-page on scroll-up */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }

    /* Hidden state — slides off screen upward */
    .header--hidden {
        transform: translateY(-100%);
    }

    /* Push main content below the fixed header */
    main {
        padding-top: 62px;
    }
}