/* ═══════════════════════════════════════════════════════════
 * TaxClue — Mobile Gutter Alignment  (2026-08-20)
 * ═══════════════════════════════════════════════════════════
 * Single source of truth for the MOBILE horizontal gutter.
 * Every module shipped its own gutter (header 12px, home/persona 22-24px,
 * gold 20-24px, blog index 40px, au 18px, resource 18px, downloads 20px,
 * company 20px …) so header and page content never lined up on phones.
 *
 * This file is loaded LAST in main.php <head> (after every module stylesheet)
 * and uses !important so it also wins over header.php's in-body <style>.
 * One gutter — 16px — for the header inner + every content container, so all
 * left/right edges align in mobile view.
 *
 * To change the mobile gutter site-wide, edit the 16px values below only.
 * ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tc-hdr-inner,          /* header (logo ↔ actions row) */
  .container,             /* home, persona, calculators, compare, legal, generic */
  .gs-wrap,               /* gold service / calculators / compare / locations / downloads / city-service */
  .tbw,                   /* blog index body */
  .tbx-catnav-inner,      /* blog index sticky filter bar */
  .au-c,                  /* about / contact / reviews / glossary / legal (au scope) */
  .rc-wrap,               /* resource guides */
  .dlp-layout,            /* downloads detail */
  .cs-wrap,               /* company MCA search + detail */
  .cs-results {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
