/* public_html/assets/css/style.css */

/*
    This file is for custom CSS overrides or specific styles
    that are not easily handled by Tailwind CSS classes.
    Most of the styling will be directly in the HTML using Tailwind.
*/

/*
    Root CSS Variables:
    These define a color palette for easy consistency and potential future theming.
    They are based on the colors from Asset 28.png: #1b3a2e, #d5af34, #f2f2f2
*/


:root {
    --color-primary: #1b3a2e; /* Dark Green - Primary brand color */
    --color-secondary: #d5af34; /* Gold/Yellow - Accent color */
    --color-background-light: #f2f2f2; /* Light Gray/Off-white - Background color */
    --color-text-dark: #333333; /* Dark text color (can be adjusted if needed) */
    --color-text-light: #f9fafb; /* Light text color, for dark backgrounds */

    /* Pattern Variables (Ensure images are uploaded to public_html/assets/images/patterns/) */
    --pattern-dark-green: url('../images/patterns/Artwork 12.png');
    --pattern-gold: url('../images/patterns/Artwork 10.png');
}

/*
    Custom Font Definitions: Arial Fonts
    These @font-face rules load the Arial font files you provided.
    Ensure these .ttf files are placed in 'public_html/assets/fonts/'
    relative to your CSS file.
*/
@font-face {
    font-family: 'Arial Regular SCA'; /* Using a unique name to avoid conflicts with system Arial */
    src: url('../fonts/arial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Ensures text remains visible during font loading */
}

@font-face {
    font-family: 'Arial Bold SCA'; /* Using a unique name */
    src: url('../fonts/arialbd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arial Narrow Italic SCA'; /* Using a unique name */
    src: url('../fonts/ARIALNI.TTF') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


/*
    Base Body Styling:
    Now uses 'Arial Regular SCA' as the primary font.
    Uses flexbox to push the footer to the bottom of the page
    even when content is sparse.
*/
body {
    font-family: 'Arial Regular SCA', Arial, sans-serif; /* Fallback to generic Arial, then sans-serif */
    color: var(--color-text-dark);
    background-color: var(--color-background-light); /* Apply the new background color */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures body takes at least the full viewport height */
}

/*
    Heading Font Styling:
    Applies 'Arial Bold SCA' for headings for a distinct look.
*/
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial Bold SCA', Arial, sans-serif; /* Fallback to generic Arial, then sans-serif */
}

/* Custom Animations */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-down { animation: fadeInDown 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }

/* Animation Delay Utilities */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-800 { animation-delay: 0.8s; }

/* Full Height for Hero Section */
.h-screen {
    height: 100vh;
}

/* Ensures main content pushes footer down */
main {
    flex-grow: 1;
}