/* ==========================================================================
   Responsive CSS — Global Overrides
   ========================================================================== */

/*
 * Global responsive adjustments: typography scaling, container widths,
 * and print styles. Section-specific responsive rules live in main.css
 * and patterns.css.
 */

/* ==========================================================================
   Base: 0-767px (Mobile)
   ========================================================================== */

/* Typography scale — slightly smaller base for small screens */
html {
    font-size: 15px;
}

/* Container padding on small screens */
.container--wide {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Prevent long words from breaking layout on mobile */
body {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Global heading sizes — fluid scaling via clamp() (matches theme.json) */
/* No fixed overrides needed; clamp() handles all breakpoints */

/* Ensure images never overflow their containers on mobile */
img,
video,
iframe {
    max-width: 100%;
}

/* ==========================================================================
   Tablet (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    /* Heading sizes handled by theme.json clamp() — no overrides needed */
}

/* ==========================================================================
   Desktop (min-width: 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }

    .container--wide {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* ==========================================================================
   Large Desktop (min-width: 1440px)
   ========================================================================== */

@media (min-width: 1440px) {
    .container--wide {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    .site-header,
    .site-footer {
        display: none;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-size: 12pt;
    }

    .container--wide {
        max-width: 100%;
        padding: 0;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555555;
    }
}