/* ============================================================
 *  Site-wide custom CSS — loaded by every page via _head.php.
 *
 *  Tailwind handles 99% of styling via utility classes. Use this file ONLY
 *  for cross-cutting tweaks that don't fit the utility model: overriding
 *  Tailwind defaults at specific breakpoints, polyfills, font-size scaling,
 *  page-shell layout adjustments, etc.
 *
 *  Apache serves this file directly (it exists, so .htaccess skips the
 *  front-controller rewrite). No build step.
 * ============================================================ */

/* Hide [x-cloak] elements until Alpine has initialized. */
[x-cloak] { display: none !important; }

/* ---- Mobile (≤640px) ------------------------------------------------------ */
@media (max-width: 640px) {

    /* Slightly larger base font on phones. All Tailwind rem-based utilities
       (text-base, p-4, etc.) scale with this. Bump to 18px or 19px if you
       want more; drop to 16.5px to soften. */
    html { font-size: 17.5px; }

    /* Tighter horizontal gutters on phones. Higher selector specificity
       than Tailwind's px-* utility, so this wins without !important.
       Adjust to change mobile page padding across the whole site. */
    body > div.mx-auto,
    main#pjax-main {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    /* Card padding scales down on phones — content uses more of the screen.
       !important needed because Tailwind CDN injects its utility CSS at
       runtime via JS, which can land AFTER this stylesheet in the source
       order. Equal-specificity collisions otherwise tip Tailwind's way.
       md:* variants still take effect at ≥768px. */
    .p-5 { padding: 0.75rem !important; }     /* 12px (was 20px) */
    .p-6 { padding: 0.875rem !important; }    /* 14px (was 24px) */
    .p-7 { padding: 1rem !important; }        /* 16px (was 28px) */
}