/**
 * Main Stylesheet
 *
 * Author: James Crutchley
 * Version: 1.0
 * Date: 2025-04-11
 * Description: Contains base styles, layout structures, component styles (header, nav, cards, forms),
 * specific section styling, animations, and responsive media queries for the website.
 */

/* --- Base Styles --- */
/* Provides foundational styles and resets applied globally. */

body {
    display: block; /* Default display for body */
    position: relative; /* Establishes a positioning context, often default but good to be explicit if needed */
    min-height: 100vh; /* Ensures body takes at least the full viewport height */
    margin: 0; /* Removes default browser margin */
    padding: 0; /* Removes default browser padding */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    font-family: sans-serif; /* Sets a basic default font stack */
    line-height: 1.6; /* Sets a comfortable line spacing for readability */
    color: #ddd; /* Sets a light default text color, good for dark backgrounds */
    background-color: forestgreen; /* Fallback background color */
    background-image: url('/images/dike2.jpg'); /* Background image */
    background-repeat: no-repeat; /* Prevents the background image from tiling */
    background-position: bottom; /* Positions the background image at the bottom */
    background-size: cover; /* Scales the image to cover the entire background area */
    background-attachment: fixed; /* Fixes the background image relative to the viewport */
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Universal box-sizing reset: Ensures padding and border are included in the element's total width and height for more predictable sizing. */
}

img {
    display: block; /* Removes extra space below inline images */
    max-width: 100%; /* Ensures images scale down responsiveness without exceeding their container */
    height: auto; /* Maintains aspect ratio when width is adjusted */
    animation: fadeInScale 1.2s ease-in-out forwards; /* Applies a fade-in and scale animation on load */
}

a {
    color: white; /* Default link color */
    font-size: 1.2rem; /* Default link font size */
    text-decoration: none; /* Removes the default underline from links */
    transition: transform 0.3s; /* Smooth transition for transform properties (e.g., hover effects) */
}

a img {
    filter: invert(100%); /* Inverts the colors of images within links */
}

/* --- Header --- */
/* Styles for the main site header container. */

header {
    position: sticky; /* Makes the header stick to the top of the viewport when scrolling */
    top: 0; /* Positions the sticky header at the very top */
    z-index: 1000; /* Ensures the header stays above most other content */
    background-color: white; /* Sets a solid background color for the header */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}

/* --- Navigation --- */
/* Styles related to the main navigation bar, typically within the header. */

nav {
    display: block; /* Default display */
    font-size: 0.8rem; /* Base font size for the nav */
    color: #ddd; /* Default text color within the nav */
    background-color: #333; /* Dark background for the nav bar */
}

/* Container for navigation elements */
.nav-container {
    display: flex; /* Uses flexbox for layout */
    align-items: center; /* Vertically aligns items in the center */
    justify-content: space-between; /* Distributes space between items */
    max-width: 1000px; /* Sets a maximum width for the nav content */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 1rem 20px; /* Adds padding inside the nav container */
}

/* Logo image styling within the navigation */
.logo img {
    height: 50px; /* Sets a fixed height for the logo */
}

/* Main title/heading within the navigation */
nav h1 {
    flex: 1; /* Allows the title to take up available space */
    margin: 0; /* Resets margin */
    padding: 0 20px; /* Adds horizontal padding around the title */
    font-size: 1.5em; /* Sets the font size relative to the nav's font size */
    text-align: center; /* Centers the title text */
}

/* Navigation menu list */
.nav-menu {
    display: flex; /* Arranges menu items in a row by default */
    margin: 0; /* Resets margin */
    padding: 0; /* Resets padding */
    list-style: none; /* Removes default list bullets */
}

/* Individual navigation menu items */
.nav-menu li {
    margin-left: 2rem; /* Adds space to the left of each menu item (except the first) */
}

/* Navigation menu links */
.nav-menu a {
    color: white; /* Link color */
    font-size: 1.1rem; /* Link font size */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s ease; /* Smooth transition for color change on hover */
}

/* Hover effect for navigation links */
.nav-menu a:hover {
    color: #ddd; /* Slightly lighter color on hover */
}

/* Tagline text within the navigation */
.nav-tagline {
    font-size: 0.9rem; /* Smaller font size for the tagline */
    color: #ddd; /* Text color */
}

/* --- Mobile Navigation Menu Toggle --- */
/* Styles for the hamburger menu icon used on smaller screens. */

.mobile-menu-toggle {
    display: none; /* Hidden by default on larger screens */
    flex-direction: column; /* Stacks the bars vertically */
    justify-content: space-between; /* Distributes space between the bars */
    width: 30px; /* Width of the toggle icon */
    height: 21px; /* Height of the toggle icon */
    cursor: pointer; /* Changes cursor to indicate it's clickable */
    /* NOTE: Display is changed to 'flex' in media queries */
}

/* Individual bars of the hamburger icon */
.mobile-menu-toggle span {
    display: block; /* Makes each bar take full width */
    width: 100%; /* Full width */
    height: 3px; /* Height of each bar */
    background-color: white; /* Color of the bars */
    border-radius: 2px; /* Slightly rounded corners for the bars */
}

/* --- Reusable Styles --- */
/* Utility classes for common layout patterns and components. */

/* General purpose content container */
.container {
    display: flex; /* Uses flexbox for layout */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers children horizontally */
    max-width: 800px; /* Maximum width of the container */
    margin: 2rem auto; /* Adds vertical margin and centers horizontally */
    padding: 2rem; /* Inner padding */
    border-radius: 15px; /* Rounded corners */
    text-align: center; /* Centers text within the container */
    color: #ddd; /* Default text color */
    background-color: rgba(0, 0, 0, 0.312); /* Semi-transparent dark background */
    backdrop-filter: blur(1px); /* Applies a subtle blur effect to the background behind the element */
    -webkit-backdrop-filter: blur(2px); /* Safari support for backdrop-filter */
}

/* Card component styling */
.card {
    margin-bottom: 1.5rem; /* Space below the card */
    padding: 2rem; /* Inner padding */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    /* Note: Background/color might be inherited or set per instance */
}


/* --- Specific Sections & Elements --- */
/* Styles for unique elements identified by ID or specific classes. */

/* Container for centering vector images */
.vector-image {
    display: flex; /* Enables flex properties */
    align-items: center; /* Vertically center content (if container has height) */
    align-content: center; /* Aligns flex lines (if wrapping) */
    margin-right: auto; /* Pushes element left (part of centering block elements) */
    margin-left: auto; /* Pushes element right (part of centering block elements) */
}
#hero h2 {
    font-size: 4.6rem;
    font-style: Bold; 
    font-family: "Bodoni Moda", serif;
}
#hero h3 {
    font-style: italic;
    color: #ddd;
}
#hero p {
    font-size: 1.5rem;
    color: #ddd;
}
/* Element intended to be shown only on desktop */
#desktopOnly {
    display: none; /* Hidden by default */
    width: 18%; /* Specific width when shown */
    /* NOTE: Display is likely changed in media queries */
}

/* Specific styling for a vector logo */
#vector-logo {
    display: block; /* Ensures it takes block-level space */
    width: 500px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto 1em; /* Centers horizontally, adds bottom margin */
}

/* Styling for another specific vector image */
/* Consider renaming if this serves a different purpose than .vector-image class */
#vector-image {
    display: block; /* Block display */
    width: 75px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    margin-top: 1em; /* Top margin */
    margin-bottom: 12em; /* Large bottom margin */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    filter: sepia(100%) saturate(50%) hue-rotate(0deg); /* Applies a specific color filter */
}

/* Styling for the services section container */
.services-section {
    display: flex; /* Uses flexbox */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers children horizontally */
    max-width: 800px; /* Maximum width */
    margin: 2rem auto; /* Vertical margin, centers horizontally */
    padding: 2rem; /* Inner padding */
    border-radius: 15px; /* Rounded corners */
    font-size: 1.5rem; /* Base font size for the section */
    color: #ddd; /* Text color */
    text-align: start; /* Aligns text to the start (left for LTR languages) */
    background-color: rgba(0, 0, 0, 0.312); /* Semi-transparent background */
    backdrop-filter: blur(1px); /* Blur effect */
    -webkit-backdrop-filter: blur(2px); /* Safari support */
}

/* Heading within the services section */
.services-section h1 {
    margin-bottom: 1rem; /* Space below heading */
    font-size: 2.2rem; /* Font size */
}

/* List items within the services section */
.services-section li {
    margin-top: 2rem; /* Space above list items */
    font-size: 1.5rem; /* Font size */
    color: #ddd; /* Text color */
}

/* Heading styles specifically within the .container class */
.container h1 {
    margin-bottom: 1rem; /* Space below */
    font-size: 2.2rem; /* Font size */
}

.container h2 {
    font-family: "Bodoni Moda", serif; /* Specific serif font for H2 */
    font-size: 3.2rem; /* Large font size */
}

.container p {
    margin-top: 2rem; /* Space above paragraphs */
    margin-bottom: 1rem; /* Space below paragraphs */
    font-size: 1.1rem; /* Font size */
    color: #ddd; /* Text color */
    text-align: justify; /* Justifies text */
}

.container li {
    font-size: 1.5rem; /* List item font size */
    text-align: left; /* Aligns list item text to the left */
    /* align-content: start; /* Note: align-content applies to flex/grid containers, not individual list items directly. May not have the intended effect here. */
}

/* Styling for a specific page image */
#pageImage {
    display: block; /* Block display */
    width: 90%; /* Relative width */
    height: auto; /* Maintain aspect ratio */
    margin: 2rem auto; /* Vertical margin, centers horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Styling for images specifically within the #AboutUs section */
#AboutUs img {
    display: block; /* Inherited */
    width: auto; /* Inherited or default */
    height: auto; /* Inherited */
    margin: 2rem auto; /* Vertical margin, centers horizontally */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow */
}

/* --- Contact Section --- */
/* Styles for the contact form and its container. */

#contact {
    display: block; /* Default */
    max-width: 800px; /* Max width, similar to .container */
    margin: 2rem auto; /* Vertical margin, centers horizontally */
    padding: 2rem; /* Inner padding */
    border-radius: 15px; /* Rounded corners */
    color: #ddd; /* Text color */
    text-align: center; /* Center aligns text */
    background-color: rgba(0, 0, 0, 0.312); /* Semi-transparent background */
    backdrop-filter: blur(1px); /* Blur effect */
    -webkit-backdrop-filter: blur(2px); /* Safari support */
}

/* Heading within the contact section */
#contact h2 {
    margin-bottom: 1rem; /* Space below */
    font-size: 2.2rem; /* Font size */
    color: #ddd; /* Text color */
}

/* Contact form layout */
#contact form {
    display: flex; /* Uses flexbox */
    flex-direction: column; /* Stacks form elements vertically */
    gap: 1rem; /* Adds space between form elements */
    margin-top: 1rem; /* Space between section title and form */
}

/* Row container for side-by-side inputs */
#contact .input-row {
    display: flex; /* Uses flexbox */
    gap: 1rem; /* Space between inputs in the row */
    width: 100%; /* Takes full width */
}

/* Inputs within an input row take available space */
#contact .input-row input {
    flex: 1; /* Allows inputs to grow equally */
}

/* General styling for input fields and textareas */
#contact input,
#contact textarea {
    width: 100%; /* Full width */
    margin-bottom: 1rem; /* Space below each field */
    padding: 8px; /* Inner padding */
    border: none; /* Removes default border */
    background-color: white; /* White background for fields */
    border-bottom: 1px solid #ccc; /* Subtle bottom border */
    outline: none; /* Removes default focus outline */
    color: inherit; /* Inherits text color from #contact section (or browser default if not set) - adjust if black text is needed */
}

/* Submit button styling */
#submit {
    display: block; /* Block display */
    width: 150px; /* Fixed width */
    height: 35px; /* Fixed height */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    padding: 0; /* Reset padding */
    border: none; /* Remove default border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem; /* Font size */
    color: whitesmoke; /* Text color */
    background-color: #333; /* Dark background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow */
    cursor: pointer; /* Indicate clickable */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Submit button hover effect */
#submit:hover {
    background-color: #555; /* Darker background on hover */
}

/* --- Business Info/ID Section --- */
/* Styles for displaying business information, potentially in the footer or a dedicated section. */
/* Combining similar styles. Consider using only one class (.business-info) for consistency. */
.businessInfo,
.businessId {
    display: flex; /* Uses flexbox */
    align-items: center; /* Vertically aligns items */
    justify-content: space-evenly; /* Distributes items evenly with space around */
    margin-top: 1em; /* Space above the section */
    padding: 30px; /* Inner padding */
    color: white; /* Text color */
    background-color: #333; /* Dark background */
}

/* --- Footer --- */
/* Styles for the website footer. */

/* Styles applied to an element with class "footer" */
.footer {
    display: block; /* Default display */
    /* align-items: center; */ /* Only applies if display is flex/grid */
    margin-top: 1em; /* Space above */
    padding: 30px; /* Padding */
    color: white; /* Text color */
    text-align: center; /* Center aligns text */
    background-color: #333; /* Dark background */
}

/* Styles applied to the generic HTML <footer> element */
footer {
    padding: 2rem 20px; /* Padding */
    background-color: #f8f8f8; /* Light background color (overrides .footer background if both are applied to the same element) */
    /* NOTE: There might be conflicting styles if both `.footer` and `footer` are used on the same element. Clarify usage. */
}

/* Styles applied to an element with class "site-footer" */
.site-footer {
    text-align: center; /* Center aligns text */
}

/* Styles for paragraphs within the generic <footer> element */
footer p {
    margin-bottom: 0; /* Removes default bottom margin */
    color: #666; /* Dark gray text color */
    text-align: center; /* Center aligns text */
}


/* --- Animations --- */
/* Defines reusable keyframe animations. */

@keyframes fadeInScale {
    0% {
        opacity: 0; /* Start fully transparent */
        transform: scale(0.95); /* Start slightly smaller */
    }
    100% {
        opacity: 1; /* End fully opaque */
        transform: scale(1); /* End at normal size */
    }
}

/* --- Media Queries --- */
/* Responsive adjustments for different screen sizes. */
/* Using a mix of max-width (mobile-first adjustments) and min-width (desktop-up adjustments). */

/* --- Mobile Specific Styles (Smallest Screens) --- */

/* Styles for very small mobile screens (e.g., older iPhones portrait) */
@media screen and (max-width: 400px) {
    .logo {
        margin: 0.5em; /* Adjust logo margin */
    }
    nav h1, /* Combined selectors */
    .nav-h1 { /* Style for nav title */
        font-size: 0.6rem; /* Reduce title font size significantly */
    }
    .nav-tagline {
        font-size: 0.6rem; /* Reduce tagline font size */
        text-align: center; /* Center tagline text */
    }
    .nav-menu a {
        font-size: 0.4rem; /* Reduce menu link font size (Note: may be too small for usability) */
    }
}

/* Styles for typical small mobile screens (portrait) */
@media screen and (max-width: 480px) {
    /* Styles merged from duplicate query */
    nav h1 {
        font-size: 1em; /* Adjust nav title font size */
    }
    .nav-tagline {
        font-size: 0.7rem; /* Adjust tagline font size */
    }
     .nav-menu a {
        font-size: 0.8rem; /* Adjust menu link font size */
    }
    /* NOTE: These rules might override or be overridden by the max-width: 400px rules depending on CSS order. */
}

/* --- Tablet / Mobile Landscape Styles --- */

/* Styles applied up to 842px width (covers most tablets and mobile landscape) */
/* This breakpoint primarily introduces the mobile navigation toggle and stacked menu */
@media screen and (max-width: 842px) {
    /* Show and style the mobile menu toggle (hamburger icon) */
    .mobile-menu-toggle {
        display: flex; /* Show the toggle */
        flex-direction: column; /* Stack the bars */
        justify-content: space-around; /* Space out the bars */
        align-items: center; /* Center bars horizontally */
        width: 40px; /* Adjust width */
        height: 30px; /* Adjust height */
        padding: 0; /* Reset padding */
        background: none; /* Remove background */
        border: none; /* Remove border */
        cursor: pointer; /* Indicate clickable */
    }

    /* Position nav container relatively to anchor the absolute positioned menu */
    .nav-container {
        position: relative;
    }

    /* Style the navigation menu for mobile (hidden initially, shown via JS/class toggle) */
    .nav-menu {
        position: absolute; /* Position relative to .nav-container */
        z-index: 1001; /* Ensure menu is above the sticky header content */
        top: 100%; /* Position below the nav container */
        left: 0; /* Align to the left edge */
        display: flex; /* Use flex for alignment */
        flex-direction: column; /* Stack menu items vertically */
        width: 100%; /* Take full width */
        max-height: 0; /* Hidden by default (height collapses) */
        margin: 0; /* Reset margins */
        padding: 0; /* Reset paddings */
        overflow: hidden; /* Hide content when collapsed */
        background-color: #333; /* Match nav background */
        list-style: none; /* Remove list bullets */
        transition: max-height 0.3s ease; /* Smooth expand/collapse transition */
    }

    /* Style for the active/open mobile menu */
    .nav-menu.active {
        max-height: 600px; /* Set a max-height large enough to show all items */
    }

    /* Styling for individual list items in the mobile menu */
    .nav-menu li {
        margin: 0; /* Reset desktop margin */
        padding: 15px; /* Add padding for touch targets */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */
        text-align: center; /* Center text */
    }

    /* Styling for links within the mobile menu */
    .nav-menu a {
        display: block; /* Make link take full width */
        width: 100%; /* Full width */
        padding: 8px 0; /* Vertical padding */
        font-size: 0.9rem; /* Adjust font size */
        color: white; /* Ensure text color */
        text-decoration: none; /* Ensure no underline */
    }

    /* Adjust nav title font size */
    nav h1 {
        font-size: 1.2em;
    }

    /* Adjust tagline font size */
    .nav-tagline {
        font-size: 0.8rem;
    }
}


/* --- Tablet and Up Styles --- */

/* Styles applied from 768px width upwards (tablets in landscape, small desktops) */
@media screen and (min-width: 768px) {
    /* Adjust navigation container padding */
    .nav-container {
        padding: 1rem 30px;
    }

    /* Restore desktop navigation menu layout */
    .nav-menu {
        position: static; /* Remove absolute positioning */
        flex-direction: row; /* Display items in a row */
        width: auto; /* Automatic width */
        max-height: none; /* Remove height restriction */
        margin-top: 0; /* Reset margin */
        padding: 0; /* Reset padding */
        background-color: transparent; /* Remove mobile background */
        overflow: visible; /* Show content */
    }

    /* Restore desktop spacing for menu items */
     .nav-menu li {
         margin-left: 2rem; /* Restore left margin */
         padding: 0; /* Reset mobile padding */
         border: none; /* Remove mobile border */
     }

     /* Restore desktop link styles */
     .nav-menu a {
         display: inline; /* Default inline display */
         padding: 0; /* Reset padding */
         font-size: 1.1rem; /* Restore desktop font size */
     }

    /* Hide the mobile menu toggle on larger screens */
    .mobile-menu-toggle {
        display: none;
    }

    /* Arrange contact form input rows side-by-side */
    #contact .input-row {
        flex-direction: row;
    }

    /* Example styles assuming a #hero section exists - Adjust font sizes */
    #hero h1 { /* Assuming #hero exists */
        font-size: 2.5rem;
    }
    #hero p { /* Assuming #hero exists */
        font-size: 1.8rem;
    }

    /* Adjust width and padding for main content sections */
    /* Combine selectors for shared styles */
    #MainText, /* Assuming #MainText exists */
    #AboutUs,
    #contact {
        width: 90%; /* Wider width */
        padding: 3rem; /* Increased padding */
    }
}

/* Styles applied from 853px width upwards */
@media screen and (min-width: 853px) {
    .nav-container {
        max-width: 1000px; /* Ensure consistent max-width from base styles */
        margin: 0 auto; /* Center */
        padding: 1rem 10px; /* Adjust padding */
    }
    #logo { /* Assuming #logo is the container for logo img */
        padding-right: 1rem; /* Add padding to the right of the logo container */
    }
    .nav-title { /* Assuming .nav-title exists (might be nav h1?) */
        text-align: center; /* Center align title */
    }
    /* Other styles like #hero, #MainText are inherited from min-width: 768px unless overridden */
}

/* Styles applied from 936px width upwards */
@media screen and (min-width: 936px) {
    .nav-container {
        max-width: 1000px; /* Consistent max-width */
        margin: 0 auto; /* Center */
        padding: 1rem 5px; /* Further adjust padding */
    }
    .nav-title { /* Assuming .nav-title exists */
        margin-left: 10px; /* Add left margin */
        text-align: center; /* Ensure centered */
    }
    /* Other styles inherited from min-width: 853px */
}

/* --- Desktop Styles --- */

/* Styles applied from 1024px width upwards (standard desktops) */
@media screen and (min-width: 1024px) {
    .nav-container {
        max-width: 1200px; /* Increase max-width for wider desktops */
        margin: 0 auto; /* Center */
        padding: 1rem 10px; /* Adjust padding */
    }
    #hero { /* Assuming #hero exists */
        max-width: 800px; /* Set max-width for hero section */
        padding: 3rem; /* Padding */
    }
    #hero h1 {
        font-size: 3rem; /* Increase hero heading size */
    }
    #hero p {
        font-size: 2rem; /* Increase hero paragraph size */
    }

    /* Set fixed width for main content sections on desktop */
    #MainText, /* Assuming #MainText exists */
    #AboutUs,
    #contact {
        width: 800px; /* Fixed width */
        padding: 3rem; /* Padding */
    }

    /* Potentially show desktop-only elements if needed */
    #desktopOnly { display: block; } */ /* Example */
}