/* Global styles for body, headings, etc. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Skip to Content Link for Accessibility */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--color-primary);
    color: var(--text-white);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    z-index: var(--z-tooltip);
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}

html {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base, 'Inter', 'Segoe UI', system-ui, sans-serif);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    background-color: var(--bg-lighter);
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Baseline */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-top: 0;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
    margin-bottom: var(--space-md);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-normal);  /* Normal weight - size provides readability for elderly users */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Full-width sections with centered content containers */
section {
    width: 100%;
    padding: var(--section-padding-y) 0;
    overflow-x: hidden; /* Prevent horizontal overflow in sections */
    opacity: 1; /* Always visible - no scroll animations for elderly users */
    transform: translateY(0);
    transition: none; /* No transitions for immediate response */
}

/* Class to trigger scroll animations - disabled for elderly users */
section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Global content centering within sections */
.content-container,
section > * {
    max-width: 1500px;  /* Increased from 1025px to 1500px for wider content */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Hero section - full-width background with centered content */
header.hero {
    width: 100%;
    max-width: none;
    padding: 0;
}

.hero-content {
    max-width: 1500px;  /* Increased from 1025px to 1500px for wider content */
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    section {
        padding: 60px 0;
    }

    .content-container,
    section > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-content {
        padding: 0 15px;
    }

    .navbar-content {
        padding: 10px 15px;
    }
}

/* Add other global styles if needed */


/* Ensure input fields are at least 16px to prevent mobile zoom */
input, select, textarea {
    font-size: 16px;  /* Prevent zoom-in on mobile */
}

/* Additional media query for smaller devices */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px;  /* Ensure minimum 16px on mobile */
    }
}

/* General form styling */
form {
    width: 100%;
    max-width: 100%; /* Ensure form takes full width on mobile */
    padding: 20px;
    box-sizing: border-box;
}

/* Input fields */
input, select, textarea {
    width: 100%; /* Ensure inputs take full width on mobile */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;  /* Set font-size to prevent zoom on mobile */
}

/* Button Styling */
button {
    width: 100%;
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--text-white);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

button:active {
    transform: translateY(0);
}

button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* CTA Button (consistent across site) */
.cta-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--text-white);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cta-button:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Global Focus Styles for Accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

/* Media Query: Ensure proper mobile responsiveness */
@media (max-width: 768px) {
    /* Ensure all sections have proper mobile padding */
    section {
        padding: var(--section-padding-y) 0;
    }

    /* Override content container for mobile */
    .content-container,
    section > * {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Contact section specific mobile fixes */
    #contact {
        padding: 40px 20px !important;
    }

    form {
        padding: 15px;
        margin: 0 auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    input, select, textarea {
        font-size: 16px;  /* Set minimum font-size to prevent zoom */
        box-sizing: border-box;
    }

    button {
        font-size: 16px; /* Ensure button has a proper size */
    }
}

@media (max-width: 480px) {
    /* Extra mobile safety for very small screens */
    section {
        padding: var(--section-padding-y) 0;
    }

    .content-container,
    section > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    #contact {
        padding: 30px 15px !important;
    }
}