/**
 * Margin Override Utilities
 * 
 * Custom utility classes for granular margin control in WordPress FSE blocks.
 * Use these classes in the "Additional CSS class(es)" field in the block editor.
 * 
 * Theme: Ollie CFP
 * File: assets/styles/spacing-margin-overrides.css
 * Last Updated: 2025-01-14
 * 
 * Usage Examples:
 * - .m-0 = Remove all margins
 * - .mt-2 = Add 2rem top margin
 * - .mx-auto = Center horizontally with auto margins
 * - .m-custom-sm = Add 0.5rem margin all sides
 * 
 * Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6 (rem units)
 * Special: auto (for horizontal centering)
 */

/* ============================================
   ALL SIDES MARGIN
   ============================================ */

.m-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-05 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.m-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.m-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.m-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.m-25 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.m-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.m-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.m-6 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.m-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ============================================
   TOP MARGIN
   ============================================ */

.mt-0 { margin-top: 0 !important; }
.mt-05 { margin-top: 0.5rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-15 { margin-top: 1.5rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-25 { margin-top: 2.5rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mt-5 { margin-top: 5rem !important; }
.mt-6 { margin-top: 6rem !important; }
.mt-auto { margin-top: auto !important; }

/* ============================================
   RIGHT MARGIN
   ============================================ */

.mr-0 { margin-right: 0 !important; }
.mr-05 { margin-right: 0.5rem !important; }
.mr-1 { margin-right: 1rem !important; }
.mr-15 { margin-right: 1.5rem !important; }
.mr-2 { margin-right: 2rem !important; }
.mr-25 { margin-right: 2.5rem !important; }
.mr-3 { margin-right: 3rem !important; }
.mr-4 { margin-right: 4rem !important; }
.mr-5 { margin-right: 5rem !important; }
.mr-6 { margin-right: 6rem !important; }
.mr-auto { margin-right: auto !important; }

/* ============================================
   BOTTOM MARGIN
   ============================================ */

.mb-0 { margin-bottom: 0 !important; }
.mb-05 { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-15 { margin-bottom: 1.5rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-25 { margin-bottom: 2.5rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 4rem !important; }
.mb-5 { margin-bottom: 5rem !important; }
.mb-6 { margin-bottom: 6rem !important; }
.mb-auto { margin-bottom: auto !important; }

/* ============================================
   LEFT MARGIN
   ============================================ */

.ml-0 { margin-left: 0 !important; }
.ml-05 { margin-left: 0.5rem !important; }
.ml-1 { margin-left: 1rem !important; }
.ml-15 { margin-left: 1.5rem !important; }
.ml-2 { margin-left: 2rem !important; }
.ml-25 { margin-left: 2.5rem !important; }
.ml-3 { margin-left: 3rem !important; }
.ml-4 { margin-left: 4rem !important; }
.ml-5 { margin-left: 5rem !important; }
.ml-6 { margin-left: 6rem !important; }
.ml-auto { margin-left: auto !important; }

/* ============================================
   HORIZONTAL MARGIN (Left + Right)
   ============================================ */

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-05 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-1 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-15 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-2 { margin-left: 2rem !important; margin-right: 2rem !important; }
.mx-25 { margin-left: 2.5rem !important; margin-right: 2.5rem !important; }
.mx-3 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-4 { margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-5 { margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-6 { margin-left: 6rem !important; margin-right: 6rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* ============================================
   VERTICAL MARGIN (Top + Bottom)
   ============================================ */

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-05 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-15 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-25 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-6 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ============================================
   NEGATIVE MARGINS
   Useful for overlapping elements or pulling content
   ============================================ */

.mt-n1 { margin-top: -1rem !important; }
.mt-n2 { margin-top: -2rem !important; }
.mt-n3 { margin-top: -3rem !important; }
.mt-n4 { margin-top: -4rem !important; }

.mb-n1 { margin-bottom: -1rem !important; }
.mb-n2 { margin-bottom: -2rem !important; }
.mb-n3 { margin-bottom: -3rem !important; }
.mb-n4 { margin-bottom: -4rem !important; }

.ml-n1 { margin-left: -1rem !important; }
.ml-n2 { margin-left: -2rem !important; }
.ml-n3 { margin-left: -3rem !important; }

.mr-n1 { margin-right: -1rem !important; }
.mr-n2 { margin-right: -2rem !important; }
.mr-n3 { margin-right: -3rem !important; }
.mr-n4 { margin-right: -4rem !important; }
.mt-5px { margin-top: 5px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-15px { margin-top: 15px !important; }
.mt-25px { margin-top: 25px !important; }
.mt-50px { margin-top: 50px !important; }
.mt-75px { margin-top: 75px !important; }
.mt-100px { margin-top: 100px !important; }

.mr-5px { margin-right: 5px !important; }
.mr-10px { margin-right: 10px !important; }
.mr-15px { margin-right: 15px !important; }
.mr-25px { margin-right: 25px !important; }
.mr-50px { margin-right: 50px !important; }
.mr-75px { margin-right: 75px !important; }
.mr-100px { margin-right: 100px !important; }

.mb-5px { margin-bottom: 5px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-15px { margin-bottom: 15px !important; }
.mb-25px { margin-bottom: 25px !important; }
.mb-50px { margin-bottom: 50px !important; }
.mb-75px { margin-bottom: 75px !important; }
.mb-100px { margin-bottom: 100px !important; }

.ml-5px { margin-left: 5px !important; }
.ml-10px { margin-left: 10px !important; }
.ml-15px { margin-left: 15px !important; }
.ml-25px { margin-left: 25px !important; }
.ml-50px { margin-left: 50px !important; }
.ml-75px { margin-left: 75px !important; }
.ml-100px { margin-left: 100px !important; }

.mt-n5px { margin-top: -5px !important; }
.mt-n10px { margin-top: -10px !important; }
.mt-n15px { margin-top: -15px !important; }
.mt-n25px { margin-top: -25px !important; }
.mt-n50px { margin-top: -50px !important; }
.mt-n75px { margin-top: -75px !important; }
.mt-n100px { margin-top: -100px !important; }

.mr-n5px { margin-right: -5px !important; }
.mr-n10px { margin-right: -10px !important; }
.mr-n15px { margin-right: -15px !important; }
.mr-n25px { margin-right: -25px !important; }
.mr-n50px { margin-right: -50px !important; }
.mr-n75px { margin-right: -75px !important; }
.mr-n100px { margin-right: -100px !important; }

.mb-n5px { margin-bottom: -5px !important; }
.mb-n10px { margin-bottom: -10px !important; }
.mb-n15px { margin-bottom: -15px !important; }
.mb-n25px { margin-bottom: -25px !important; }
.mb-n50px { margin-bottom: -50px !important; }
.mb-n75px { margin-bottom: -75px !important; }
.mb-n100px { margin-bottom: -100px !important; }

.ml-n5px { margin-left: -5px !important; }
.ml-n10px { margin-left: -10px !important; }
.ml-n15px { margin-left: -15px !important; }
.ml-n25px { margin-left: -25px !important; }
.ml-n50px { margin-left: -50px !important; }
.ml-n75px { margin-left: -75px !important; }
.ml-n100px { margin-left: -100px !important; }

/* Fine-grain single-side margin utilities (rem-based, 1rem = 16px) */

.mt-5r { margin-top: 0.3125rem !important; }
.mt-10r { margin-top: 0.625rem !important; }
.mt-15r { margin-top: 0.9375rem !important; }
.mt-25r { margin-top: 1.5625rem !important; }
.mt-50r { margin-top: 3.125rem !important; }
.mt-75r { margin-top: 4.6875rem !important; }
.mt-100r { margin-top: 6.25rem !important; }

.mr-5r { margin-right: 0.3125rem !important; }
.mr-10r { margin-right: 0.625rem !important; }
.mr-15r { margin-right: 0.9375rem !important; }
.mr-25r { margin-right: 1.5625rem !important; }
.mr-50r { margin-right: 3.125rem !important; }
.mr-75r { margin-right: 4.6875rem !important; }
.mr-100r { margin-right: 6.25rem !important; }

.mb-5r { margin-bottom: 0.3125rem !important; }
.mb-10r { margin-bottom: 0.625rem !important; }
.mb-15r { margin-bottom: 0.9375rem !important; }
.mb-25r { margin-bottom: 1.5625rem !important; }
.mb-50r { margin-bottom: 3.125rem !important; }
.mb-75r { margin-bottom: 4.6875rem !important; }
.mb-100r { margin-bottom: 6.25rem !important; }

.ml-5r { margin-left: 0.3125rem !important; }
.ml-10r { margin-left: 0.625rem !important; }
.ml-15r { margin-left: 0.9375rem !important; }
.ml-25r { margin-left: 1.5625rem !important; }
.ml-50r { margin-left: 3.125rem !important; }
.ml-75r { margin-left: 4.6875rem !important; }
.ml-100r { margin-left: 6.25rem !important; }

.mt-n5r { margin-top: -0.3125rem !important; }
.mt-n10r { margin-top: -0.625rem !important; }
.mt-n15r { margin-top: -0.9375rem !important; }
.mt-n25r { margin-top: -1.5625rem !important; }
.mt-n50r { margin-top: -3.125rem !important; }
.mt-n75r { margin-top: -4.6875rem !important; }
.mt-n100r { margin-top: -6.25rem !important; }

.mr-n5r { margin-right: -0.3125rem !important; }
.mr-n10r { margin-right: -0.625rem !important; }
.mr-n15r { margin-right: -0.9375rem !important; }
.mr-n25r { margin-right: -1.5625rem !important; }
.mr-n50r { margin-right: -3.125rem !important; }
.mr-n75r { margin-right: -4.6875rem !important; }
.mr-n100r { margin-right: -6.25rem !important; }

.mb-n5r { margin-bottom: -0.3125rem !important; }
.mb-n10r { margin-bottom: -0.625rem !important; }
.mb-n15r { margin-bottom: -0.9375rem !important; }
.mb-n25r { margin-bottom: -1.5625rem !important; }
.mb-n50r { margin-bottom: -3.125rem !important; }
.mb-n75r { margin-bottom: -4.6875rem !important; }
.mb-n100r { margin-bottom: -6.25rem !important; }

.ml-n5r { margin-left: -0.3125rem !important; }
.ml-n10r { margin-left: -0.625rem !important; }
.ml-n15r { margin-left: -0.9375rem !important; }
.ml-n25r { margin-left: -1.5625rem !important; }
.ml-n50r { margin-left: -3.125rem !important; }
.ml-n75r { margin-left: -4.6875rem !important; }
.ml-n100r { margin-left: -6.25rem !important; }

/* Percent-based single-side margin utilities */

.mt-5p { margin-top: 5% !important; }
.mt-10p { margin-top: 10% !important; }
.mt-15p { margin-top: 15% !important; }
.mt-25p { margin-top: 25% !important; }
.mt-50p { margin-top: 50% !important; }
.mt-75p { margin-top: 75% !important; }
.mt-100p { margin-top: 100% !important; }

.mr-5p { margin-right: 5% !important; }
.mr-10p { margin-right: 10% !important; }
.mr-15p { margin-right: 15% !important; }
.mr-25p { margin-right: 25% !important; }
.mr-50p { margin-right: 50% !important; }
.mr-75p { margin-right: 75% !important; }
.mr-100p { margin-right: 100% !important; }

.mb-5p { margin-bottom: 5% !important; }
.mb-10p { margin-bottom: 10% !important; }
.mb-15p { margin-bottom: 15% !important; }
.mb-25p { margin-bottom: 25% !important; }
.mb-50p { margin-bottom: 50% !important; }
.mb-75p { margin-bottom: 75% !important; }
.mb-100p { margin-bottom: 100% !important; }

.ml-5p { margin-left: 5% !important; }
.ml-10p { margin-left: 10% !important; }
.ml-15p { margin-left: 15% !important; }
.ml-25p { margin-left: 25% !important; }
.ml-50p { margin-left: 50% !important; }
.ml-75p { margin-left: 75% !important; }
.ml-100p { margin-left: 100% !important; }

.mt-n5p { margin-top: -5% !important; }
.mt-n10p { margin-top: -10% !important; }
.mt-n15p { margin-top: -15% !important; }
.mt-n25p { margin-top: -25% !important; }
.mt-n50p { margin-top: -50% !important; }
.mt-n75p { margin-top: -75% !important; }
.mt-n100p { margin-top: -100% !important; }

.mr-n5p { margin-right: -5% !important; }
.mr-n10p { margin-right: -10% !important; }
.mr-n15p { margin-right: -15% !important; }
.mr-n25p { margin-right: -25% !important; }
.mr-n50p { margin-right: -50% !important; }
.mr-n75p { margin-right: -75% !important; }
.mr-n100p { margin-right: -100% !important; }

.mb-n5p { margin-bottom: -5% !important; }
.mb-n10p { margin-bottom: -10% !important; }
.mb-n15p { margin-bottom: -15% !important; }
.mb-n25p { margin-bottom: -25% !important; }
.mb-n50p { margin-bottom: -50% !important; }
.mb-n75p { margin-bottom: -75% !important; }
.mb-n100p { margin-bottom: -100% !important; }

.ml-n5p { margin-left: -5% !important; }
.ml-n10p { margin-left: -10% !important; }
.ml-n15p { margin-left: -15% !important; }
.ml-n25p { margin-left: -25% !important; }
.ml-n50p { margin-left: -50% !important; }
.ml-n75p { margin-left: -75% !important; }
.ml-n100p { margin-left: -100% !important; }

/* ============================================
   RESPONSIVE MARGIN OVERRIDES
   Mobile-first approach with tablet and desktop breakpoints
   ============================================ */

/* Tablet (768px and up) */
@media (min-width: 768px) {
	.m-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.m-md-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.m-md-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
	.m-md-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.m-md-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
	.m-md-auto { margin-top: auto !important; margin-bottom: auto !important; }
	
	.mt-md-0 { margin-top: 0 !important; }
	.mt-md-2 { margin-top: 2rem !important; }
	.mt-md-3 { margin-top: 3rem !important; }
	.mt-md-4 { margin-top: 4rem !important; }
	
	.mb-md-0 { margin-bottom: 0 !important; }
	.mb-md-2 { margin-bottom: 2rem !important; }
	.mb-md-3 { margin-bottom: 3rem !important; }
	.mb-md-4 { margin-bottom: 4rem !important; }
	
	.mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-md-2 { margin-left: 2rem !important; margin-right: 2rem !important; }
	.mx-md-3 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-md-4 { margin-left: 4rem !important; margin-right: 4rem !important; }
	.mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
	
	.my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-md-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
	.my-md-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-md-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
	.m-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.m-lg-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.m-lg-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
	.m-lg-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.m-lg-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
	.m-lg-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
	.m-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }
	
	.mt-lg-0 { margin-top: 0 !important; }
	.mt-lg-3 { margin-top: 3rem !important; }
	.mt-lg-4 { margin-top: 4rem !important; }
	.mt-lg-5 { margin-top: 5rem !important; }
	
	.mb-lg-0 { margin-bottom: 0 !important; }
	.mb-lg-3 { margin-bottom: 3rem !important; }
	.mb-lg-4 { margin-bottom: 4rem !important; }
	.mb-lg-5 { margin-bottom: 5rem !important; }
	
	.ml-lg-0 { margin-left: 0 !important; }
	.ml-lg-1 { margin-left: 1rem !important; }
	.ml-lg-2 { margin-left: 2rem !important; }
	.ml-lg-3 { margin-left: 3rem !important; }
	.ml-lg-4 { margin-left: 4rem !important; }
	.ml-lg-5 { margin-left: 5rem !important; }
	
	.mr-lg-0 { margin-right: 0 !important; }
	.mr-lg-1 { margin-right: 1rem !important; }
	.mr-lg-2 { margin-right: 2rem !important; }
	.mr-lg-3 { margin-right: 3rem !important; }
	.mr-lg-4 { margin-right: 4rem !important; }
	.mr-lg-5 { margin-right: 5rem !important; }
	
	.ml-lg-n1 { margin-left: -1rem !important; }
	.ml-lg-n2 { margin-left: -2rem !important; }
	.ml-lg-n3 { margin-left: -3rem !important; }
	.ml-lg-n4 { margin-left: -4rem !important; }
	.ml-lg-n5 { margin-left: -5rem !important; }
	
	.mr-lg-n1 { margin-right: -1rem !important; }
	.mr-lg-n2 { margin-right: -2rem !important; }
	.mr-lg-n3 { margin-right: -3rem !important; }
	.mr-lg-n4 { margin-right: -4rem !important; }
	.mr-lg-n5 { margin-right: -5rem !important; }
	
	.mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-lg-3 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-lg-4 { margin-left: 4rem !important; margin-right: 4rem !important; }
	.mx-lg-5 { margin-left: 5rem !important; margin-right: 5rem !important; }
	.mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
	
	.my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-lg-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-lg-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
	.my-lg-5 { margin-top: 5rem !important; margin-bottom: 5rem !important; }
}

/* ============================================
   SEMANTIC MARGIN ALIASES
   Common use cases with descriptive names
   ============================================ */

.m-none { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-xs { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.m-sm { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.m-md { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.m-lg { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.m-xl { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.m-2xl { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.m-3xl { margin-top: 6rem !important; margin-bottom: 6rem !important; }

.mx-center { margin-left: auto !important; margin-right: auto !important; }
.my-section { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mb-card-gap { margin-bottom: 1.5rem !important; }
.mt-header { margin-top: 2rem !important; }
.mb-footer { margin-bottom: 2rem !important; }

/* ============================================
   UTILITY COMBINATIONS
   Common spacing patterns
   ============================================ */

.m-0-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-0-mb-2 { margin-top: 0 !important; margin-bottom: 2rem !important; }
.mt-2-mb-0 { margin-top: 2rem !important; margin-bottom: 0 !important; }

.m-force-left { margin-left: 0 !important; }
.m-force-right { margin-right: 0 !important; }
.m-force-top { margin-top: 0 !important; }
.m-force-bottom { margin-bottom: 0 !important; }

.m-force-top-left { margin-top: 0 !important; margin-left: 0 !important; }
.m-force-top-right { margin-top: 0 !important; margin-right: 0 !important; }
.m-force-bottom-left { margin-bottom: 0 !important; margin-left: 0 !important; }
.m-force-bottom-right { margin-bottom: 0 !important; margin-right: 0 !important; }