/* Word Power - Global Styles with Mobile-First Responsive Design */

/* Base Styles */
body {
    padding: 0;
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif; */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Typography - Mobile First */
h1 {
    font-size: 1.5rem; /* 24px on mobile */
    margin-top: 0;
    line-height: 1.2;
}

h2 {
    font-size: 1.25rem; /* 20px on mobile */
    line-height: 1.3;
}

h3 {
    font-size: 1.125rem; /* 18px on mobile */
    line-height: 1.4;
}

/* Tablet and up */
@media (min-width: 640px) {
    h1 {
        font-size: 2rem; /* 32px */
    }
    h2 {
        font-size: 1.5rem; /* 24px */
    }
    h3 {
        font-size: 1.25rem; /* 20px */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    h1 {
        font-size: 2.5rem; /* 40px */
    }
    h2 {
        font-size: 2rem; /* 32px */
    }
    h3 {
        font-size: 1.5rem; /* 24px */
    }
}

p {
    color: rgb(107, 114, 128);
    font-size: 0.875rem; /* 14px on mobile */
    margin-bottom: 0.625rem; /* 10px */
    margin-top: 0.3125rem; /* 5px */
    line-height: 1.6;
}

@media (min-width: 640px) {
    p {
        font-size: 0.9375rem; /* 15px */
    }
}

/* Card Component */
.card {
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem; /* 16px on mobile */
    border: 1px solid lightgray;
    border-radius: 1rem; /* 16px */
}

@media (min-width: 640px) {
    .card {
        max-width: 620px;
        padding: 1.5rem; /* 24px */
    }
}

.card p:last-child {
    margin-bottom: 0;
}

/* Touch Targets - Minimum 44x44px for mobile */
button, 
a.btn, 
input[type="submit"], 
input[type="button"],
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Form Inputs - Mobile Friendly */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 0.75rem; /* 12px */
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        padding: 0.875rem; /* 14px */
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent Text Overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Container Padding - Mobile First */
.container {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem; /* 24px */
        padding-right: 1.5rem; /* 24px */
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem; /* 32px */
        padding-right: 2rem; /* 32px */
    }
}

/* Responsive Tables */
table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    table {
        display: table;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus States for Accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #004AAD;
    outline-offset: 2px;
}

/* Hide scrollbar on mobile but allow scrolling */
@media (max-width: 640px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
}