/* 
    Global Responsive Styles for Fluid Typography and Scaling 
*/

/* Scale images, videos, iframes automatically to never exceed their container */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Fluid Typography */
html {
    font-size: clamp(14px, 1.5vw + 10px, 16px);
}

h1, .h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
}

h2, .h2 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

h3, .h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem) !important;
}

h4, .h4 {
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
}

h5, .h5 {
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
}

p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
}

/* Prevent horizontal scrolling on mobile due to overflowing content */
body {
    overflow-x: hidden;
    width: 100%;
}

/* Base input sizes for better touch targets on mobile */
input, select, textarea, button {
    font-size: clamp(16px, 1.5vw, 1rem); /* 16px minimum prevents iOS zoom on focus */
}