Browser Zoom Breaking Layout Fix

/* Wrong — fixed pixel sizes prevent zoom scaling */
body {
    font-size: 16px;
}

.container {
    width: 1200px;
}

h1 {
    font-size: 32px;
}

/* Right — use rem for font sizes */
body {
    font-size: 100%; /* Browser default, typically 16px */
}

.container {
    max-width: 75rem; /* ~1200px at default zoom */
    width: 100%;
}

h1 {
    font-size: 2rem; /* 32px at default zoom */
}

/* Wrong — fixed widths cause horizontal scroll */
.hero {
    width: 1200px;
    overflow: hidden;
}

/* Right — fluid layout prevents overflow */
.hero {
    max-width: 100%;
    overflow: hidden;
}

/* Use viewport-relative units for large elements */
.full-width-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Ensure images do not overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Wrong — buttons shrink at high zoom */
.button {
    padding: 4px 8px;
    font-size: 14px;
}

/* Right — buttons remain usable at high zoom */
.button {
    padding: 0.5em 1em;
    font-size: 1rem;
    min-height: 44px; /* Touch target minimum */
    min-width: 44px;
}

/* Right — design for zoom from the start */
/* Set breakpoints based on rem, not px */
@media (max-width: 48rem) { /* ~768px */
    .sidebar {
        display: none;
    }
}

/* Test: Ctrl+ or Cmd+ to zoom to 200% */
/* Check:
   - All text is readable without horizontal scroll
   - Navigation is still usable
   - Forms are functional
   - Buttons are tappable
   - No overlapping content
*/

/* Wrong — fixed sidebar overlaps content at high zoom */
.sidebar {
    position: fixed;
    width: 250px;
    height: 100vh;
}

/* Right — convert to static on small viewports or high zoom */
.sidebar {
    position: fixed;
    width: 15.625rem;
    height: 100vh;
}

@media (max-width: 60rem) {
    .sidebar {
        position: static;
        width: 100%;
        height: auto;
    }
}

/* For sticky headers, ensure they have enough space */
.sticky-header {
    position: sticky;
    top: 0;
    min-height: 3rem;
    z-index: 100;
}