/* CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Prevents iOS zoom on input focus */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

body {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}

input, button, textarea, select {
    font: inherit;
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Ensure all touch targets are at least 44px */
button, a, input, select, textarea {
    min-height: 44px;
}

p {
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: keep-all;
}

/* CSS Variables - Apple-inspired Clean Design */
:root {
    --primary: #1d1d1f;      /* Apple near-black for text */
    --secondary: #0071e3;    /* Apple blue for CTAs and links */
    --accent: #86868b;       /* Muted gray for secondary text */
    --gold: #b8860b;         /* DCF gold - use sparingly */
    --donate-red: #e53e3e;   /* Bright red for donate buttons */
    --donate-red-hover: #c53030; /* Darker red for donate hover */
    --background: #ffffff;   /* Pure white */
    --light-background: #f5f5f7; /* Apple light gray for sections */
    --border-light: rgba(0, 0, 0, 0.1);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Base Typography - Apple System Fonts */
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--primary);
    background-color: var(--background);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--primary);
    /* Ensure no hyphenation on headings */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Responsive Typography with proper scaling - reduced mobile sizes */
h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 2rem;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 600;
}

h3 {
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 600;
}

h4 {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 600;
}

p {
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

/* Mobile-first Responsive Foundation */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* Main content spacing for mobile */
main {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Tablet Breakpoint: 768px to 1023px */
@media (min-width: 768px) {
    body {
        font-size: 17px;
    }
    
    .container {
        padding: 0 2rem;
    }
    
    main {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Desktop Breakpoint: 1024px and up */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
    
    .container {
        padding: 0 3rem;
    }
    
    main {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Utility Classes for Mobile Optimization */
.text-center {
    text-align: center;
}

.hidden-mobile {
    display: none;
}

.visible-mobile {
    display: block;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }
    
    .visible-mobile {
        display: none;
    }
}

/* Ensure forms are mobile-friendly */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px; /* Prevent zoom */
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Buttons - Apple Style */
button,
.btn {
    min-height: 48px;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background-color: var(--secondary);
    color: var(--background);
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

button:hover,
.btn:hover {
    opacity: 0.8;
    transform: scale(0.98);
}

.btn-secondary {
    background-color: transparent;
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--background);
}

/* Donate Button Styles - Bright Red */
.btn-donate,
[href*="donate" i].btn-primary,
[href*="get-involved"].btn-primary:contains("Donate") {
    background-color: var(--donate-red) !important;
    color: var(--background) !important;
    border: none;
}

.btn-donate:hover,
[href*="donate" i].btn-primary:hover {
    background-color: var(--donate-red-hover) !important;
    opacity: 1;
    transform: translateY(-2px);
}

/* Footer Styles - Dark Theme */
footer {
    background: #1d1d1f;
    color: #ffffff;
    padding: 4rem 0 3rem;
    margin-top: 0;
    border-top: none;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-brand {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.footer-links {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    justify-content: flex-start;
    align-items: center;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.footer-links a:hover {
    color: #0071e3;
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
}

.footer-bottom p {
    margin-bottom: 0.5rem;
    color: #86868b;
    font-size: 0.9rem;
    font-weight: 300;
}

/* Footer Donate Button keeps red style */
footer .btn-donate {
    background: #e53e3e !important;
    color: #ffffff !important;
}

footer .btn-donate:hover {
    background: #c53030 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    /* Ensure no hyphenation on mobile */
    h1, h2, h3, h4, h5, h6 {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    
    /* Slightly smaller font sizes on mobile to prevent overflow */
    h1 {
        font-size: 1.85rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    /* Clean, compact mobile footer */
    footer {
        padding: 2.5rem 1.25rem;
        text-align: center;
    }
    
    .footer-content {
        padding: 0 1rem;
    }
    
    .footer-brand {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    
    .footer-links a {
        padding: 0.25rem 0;
        margin: 0;
        font-size: 0.95rem;
        display: block;
        width: auto;
    }
    
    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
}