/* =================================================================
   PROFESSIONAL SPACING SYSTEM
   Balanced spacing for all elements and devices
   Based on 8px grid system (rem units)
================================================================= */

/* =================================================================
   1. SECTION SPACING - Comfortable & Not Overwhelming
================================================================= */

/* Base section padding - NOT TOO LARGE */
section {
    padding: 3.5rem 0; /* 56px - Comfortable */
}

/* Larger sections on bigger screens */
@media (min-width: 768px) {
    section {
        padding: 4.5rem 0; /* 72px */
    }
}

@media (min-width: 992px) {
    section {
        padding: 5rem 0; /* 80px */
    }
}

/* Extra large screens - slightly more spacious */
@media (min-width: 1920px) {
    section {
        padding: 6rem 0; /* 96px */
    }
}

/* Compact sections (for dense content) */
.section-compact {
    padding: 2.5rem 0; /* 40px */
}

@media (min-width: 768px) {
    .section-compact {
        padding: 3rem 0; /* 48px */
    }
}

/* =================================================================
   2. HERO SECTION SIZING - Balanced Heights
================================================================= */

.hero-section,
#hero-new {
    min-height: 500px; /* Reasonable minimum */
    height: auto;
    padding: 4rem 1rem;
}

@media (min-width: 768px) {
    .hero-section,
    #hero-new {
        min-height: 600px;
        padding: 5rem 1.5rem;
    }
}

@media (min-width: 992px) {
    .hero-section,
    #hero-new {
        min-height: 650px;
        padding: 6rem 2rem;
    }
}

/* Full viewport hero only on very large screens */
@media (min-width: 1400px) {
    .hero-section.hero-fullscreen,
    #hero-new.hero-fullscreen {
        min-height: 750px;
        max-height: 85vh; /* Cap at 85vh to avoid too much space */
    }
}

/* =================================================================
   3. CONTAINER SIZING - Professional Widths
================================================================= */

.container {
    width: 100%;
    padding-right: 1rem; /* 16px */
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
        padding-right: 1.25rem; /* 20px */
        padding-left: 1.25rem;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1280px; /* Not too wide */
    }
}

/* Extra wide screens - cap width for readability */
@media (min-width: 1920px) {
    .container {
        max-width: 1440px; /* Optimal max width */
    }
}

/* Narrow container for text-heavy content */
.container-narrow {
    max-width: 900px;
}

/* =================================================================
   4. CARD & COMPONENT SPACING
================================================================= */

.card {
    padding: 1.25rem; /* 20px */
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .card {
        padding: 1.5rem; /* 24px */
    }
}

@media (min-width: 992px) {
    .card {
        padding: 1.75rem; /* 28px */
    }
}

/* Card image spacing */
.card-image-wrapper {
    margin-bottom: 1rem;
}

.card-content {
    padding: 1rem 1.25rem;
}

@media (min-width: 768px) {
    .card-content {
        padding: 1.25rem 1.5rem;
    }
}

/* =================================================================
   5. GRID & COLUMN SPACING
================================================================= */

.row {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row > * {
    padding-right: 0.75rem; /* 12px */
    padding-left: 0.75rem;
}

@media (min-width: 768px) {
    .row {
        margin-right: -1rem;
        margin-left: -1rem;
    }
    
    .row > * {
        padding-right: 1rem; /* 16px */
        padding-left: 1rem;
    }
}

/* Compact row spacing */
.row-compact {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.row-compact > * {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Wide row spacing */
.row-wide {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
}

.row-wide > * {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

/* =================================================================
   6. BUTTON SIZING - Comfortable Touch Targets
================================================================= */

.btn {
    padding: 0.625rem 1.5rem; /* 10px 24px */
    min-height: 42px; /* Good touch target */
}

.btn-sm {
    padding: 0.5rem 1rem; /* 8px 16px */
    min-height: 36px;
}

.btn-lg {
    padding: 0.875rem 2rem; /* 14px 32px */
    min-height: 50px;
}

/* Mobile optimization */
@media (max-width: 767.98px) {
    .btn {
        padding: 0.75rem 1.25rem;
        min-height: 44px; /* iOS recommended */
    }
}

/* =================================================================
   7. FORM ELEMENT SPACING
================================================================= */

.form-group,
.mb-form {
    margin-bottom: 1.25rem; /* 20px */
}

label {
    margin-bottom: 0.5rem;
}

input,
textarea,
select {
    padding: 0.75rem 1rem; /* 12px 16px */
}

@media (max-width: 767.98px) {
    input,
    textarea,
    select {
        padding: 0.875rem 1rem; /* Slightly more for mobile */
    }
}

/* =================================================================
   8. NAVBAR & HEADER SIZING
================================================================= */

.header {
    height: 70px; /* Comfortable height */
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .header {
        height: 75px;
        padding: 0 1.5rem;
    }
}

@media (min-width: 992px) {
    .header {
        height: 80px;
        padding: 0 2rem;
    }
}

/* Logo sizing - preserve aspect ratio */
.logo img,
.logo__image {
    height: auto !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 220 / 121; /* Natural aspect ratio of WM_logo_transparent_cleaned@2x.png */
}

/* Specific max-width constraints instead of max-height to preserve aspect ratio */
.logo img {
    max-width: 130px;
}

@media (min-width: 768px) {
    .logo img {
        max-width: 150px;
    }
}

/* =================================================================
   9. FOOTER SPACING
================================================================= */

.footer {
    padding: 3rem 0 1.5rem;
}

@media (min-width: 768px) {
    .footer {
        padding: 4rem 0 2rem;
    }
}

@media (min-width: 992px) {
    .footer {
        padding: 5rem 0 2.5rem;
    }
}

.footer-bottom {
    padding: 1.25rem 0;
    margin-top: 2rem;
}

/* =================================================================
   10. MODAL & POPUP SIZING
================================================================= */

.modal-content {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .modal-content {
        padding: 2rem;
    }
}

.modal-dialog {
    margin: 1rem;
    max-width: calc(100% - 2rem);
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

@media (min-width: 992px) {
    .modal-dialog {
        max-width: 700px;
    }
}

/* =================================================================
   11. UTILITY SPACING CLASSES
================================================================= */

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.5rem !important; } /* 8px */
.m-2 { margin: 1rem !important; }   /* 16px */
.m-3 { margin: 1.5rem !important; } /* 24px */
.m-4 { margin: 2rem !important; }   /* 32px */
.m-5 { margin: 3rem !important; }   /* 48px */

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* =================================================================
   12. GAP UTILITIES (for Flexbox & Grid)
================================================================= */

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.5rem !important; }
.gap-2 { gap: 1rem !important; }
.gap-3 { gap: 1.5rem !important; }
.gap-4 { gap: 2rem !important; }
.gap-5 { gap: 3rem !important; }

/* =================================================================
   13. RESPONSIVE SPACING ADJUSTMENTS
================================================================= */

/* Mobile - tighter spacing */
@media (max-width: 575.98px) {
    .container {
        padding-right: 0.875rem;
        padding-left: 0.875rem;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* Tablets - balanced */
@media (min-width: 768px) and (max-width: 991.98px) {
    section {
        padding: 4rem 0;
    }
}

/* Large desktops - more breathing room */
@media (min-width: 1920px) {
    .card {
        padding: 2rem;
    }
    
    .row {
        margin-right: -1.25rem;
        margin-left: -1.25rem;
    }
    
    .row > * {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

/* =================================================================
   14. DARK MODE SPACING (if needed)
================================================================= */
/* Dark mode typically uses same spacing */
/* Add any specific dark mode spacing adjustments here if needed */