/* Color Palette from logo:
   Dark Grey: #363636 (approx, use eyedropper for exact match if needed)
   Orange/Yellow Gradient: Starts around #FF9800 (orange) and goes to #FFD700 (gold/yellow) - we'll use a representative orange for text/accents.
*/

:root {
    --primary-orange: #FF9800; /* A vibrant orange from the logo */
    --dark-grey: #363636; /* Dark grey from the logo text */
    --text-color: #444; /* Slightly lighter than dark-grey for main text */
    --background-color: #f8f8f8; /* Off-white for a softer look */
    --white: #ffffff;

    /* Base font size for rem units - 1rem = 16px by default */
    font-size: 16px;
}

/* Base Styles */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Header */
.main-header {
    background: linear-gradient(to right, var(--primary-orange), #FFD700); /* Gradient from logo */
    padding: 1.25rem; /* 20px */
    text-align: center;
    box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.2); /* 2px 5px */
}

.logo-container {
    max-width: 18.75rem; /* 300px - Adjust as needed for logo size */
    margin: 0 auto;
}

.logo {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures no extra space below image */
}

/* .site-title {
    color: var(--white);
    font-size: 1.8rem;
    margin-top: 0.625rem; /* 10px */
/* } */

/* Main Content */
.main-content {
    padding: 1.25rem; /* 20px */
    max-width: 60rem; /* 960px - Max width for desktop content */
    margin: 1.25rem auto; /* 20px auto */
    background-color: var(--white);
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0 0.625rem rgba(0,0,0,0.1); /* 10px */
}

.section-title {
    color: var(--primary-orange);
    text-align: center;
    margin-bottom: 1.875rem; /* 30px */
    font-size: 2rem;
    margin-top: 0; /* Remove default margin-top from h2 */
}

.contact-info {
    display: flex;
    flex-direction: column; /* Always stack items vertically */
    gap: 1.25rem; /* 20px between items */
    align-items: center; /* Center items horizontally within the column */
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    font-size: 1.1rem;
    text-align: left; /* Ensure text alignment within item */
    width: fit-content; /* Make the item only as wide as its content */
    margin: 0 auto; /* Center the individual item if width is fit-content */
}

.info-item .icon {
    font-size: 1.5rem; /* Larger icons */
    color: var(--primary-orange);
    flex-shrink: 0; /* Prevent icon from shrinking on small screens */
}

.contact-link, .contact-text {
    color: var(--dark-grey);
    text-decoration: none;
    transition: color 0.3s ease;
    word-break: break-word; /* Ensure long text breaks to new line */
}

.contact-link:hover {
    color: var(--primary-orange);
}

/* Footer */
.main-footer {
    text-align: center;
    padding: 1.25rem; /* 20px */
    background-color: var(--dark-grey);
    color: var(--white);
    margin-top: 2.5rem; /* 40px */
    font-size: 0.9rem;
}

/* Responsive Design - Media Queries for Scaling */

/* Tablets and larger screens - mainly adjust sizes, not layout direction */
@media (min-width: 768px) {
    .main-header {
        padding: 1.875rem; /* 30px */
    }

    .logo-container {
        max-width: 25rem; /* 400px - Slightly larger logo on tablets */
    }

    /* .site-title {
        font-size: 2.5rem;
    } */

    .main-content {
        padding: 2.5rem; /* 40px */
    }

    .section-title {
        font-size: 2.5rem;
    }

    .info-item {
        font-size: 1.2rem;
    }
}

/* Desktops and larger screens - mainly adjust sizes, not layout direction */
@media (min-width: 1024px) {
    .main-header {
        padding: 2.5rem; /* 40px */
    }

    .logo-container {
        max-width: 31.25rem; /* 500px - Larger logo on desktops */
    }

    /* .site-title {
        font-size: 3rem;
    } */

    .main-content {
        padding: 3.125rem; /* 50px */
        max-width: 68.75rem; /* 1100px - Even wider content area */
    }

    .section-title {
        font-size: 3rem;
    }

    .info-item {
        font-size: 1.3rem;
    }
}