/* Christians site — responsive safety net.
 * Loaded AFTER the active theme so it can override layout-breaking rules.
 * Goal: guarantee no horizontal scroll / overflow on small screens and make
 * any remaining fixed-width elements fluid. */
html, body { overflow-x: hidden; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
input, select, textarea, button { max-width: 100%; }
pre, code, .code, blockquote { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }

@media (max-width: 768px) {
    .container { width: 100%; padding-left: 16px; padding-right: 16px; }
    .site-branding .site-tagline { display: none; }
    .header-search { width: 100%; }
    .quiz-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    h1, .page-header h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    .posts-grid { grid-template-columns: 1fr; }
    .content-area { grid-template-columns: 1fr; }
    .sidebar { margin-top: 24px; }
}

@media (max-width: 400px) {
    .container { padding-left: 12px; padding-right: 12px; }
}

/* ===== Mobile hardening for Tailwind-built pages (charts / hymns / hymn) =====
 * These pages are laid out with Tailwind utilities (preflight is disabled), so
 * they don't get the usual reset. The #1 cause of "content wider than the
 * viewport" on mobile is a flex/grid child that won't shrink below its content
 * width. Forcing min-width:0 lets them shrink (and truncate) instead of
 * stretching the row past the screen edge. */
@media (max-width: 640px) {
    .flex > *, .grid > * { min-width: 0; }
    h1, h2, h3, h4, h5, h6, p, span, a, li, td, th {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    main, section, .container, .grid, ol, ul, table { max-width: 100%; }
}