/* ============================================
   SPACING & ALIGNMENT FIXES
   RTE Maharashtra Homepage
   ============================================ */

/* ===================================
   1. CONSISTENT SPACING SYSTEM
   =================================== */

/* Override inconsistent spacing with proper 8px grid system */
:root {
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
}

/* ===================================
   2. CONTAINER ALIGNMENT FIXES
   =================================== */

/* Fix main container alignment */
.container-custom {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
    .container-custom {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .container-custom {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
}

/* ===================================
   3. HEADER ALIGNMENT FIXES
   =================================== */

/* Fix header padding consistency */
.header-optimized {
    padding-top: 0;
    padding-bottom: 0;
}

.header-container {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.header-content {
    height: 64px;
    /* Consistent height */
}

@media (max-width: 640px) {
    .header-content {
        height: 56px;
    }

    .header-container {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
}

/* Fix logo alignment */
.header-logo-link {
    gap: var(--spacing-3);
}

/* Fix nav spacing */
.header-nav {
    gap: var(--spacing-6);
}

@media (min-width: 1024px) {
    .header-nav {
        gap: var(--spacing-8);
    }
}

/* ===================================
   4. TOP BAR ALIGNMENT
   =================================== */

.top-bar {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.top-bar-content {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
    .top-bar-content {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

/* ===================================
   5. NEWS TICKER ALIGNMENT
   =================================== */

.bg-orange-50.border-b.border-orange-200 {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

/* ===================================
   6. MAIN CONTENT SPACING
   =================================== */

/* Fix main content padding */
main.container-custom {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

@media (min-width: 768px) {
    main.container-custom {
        padding-top: var(--spacing-10);
        padding-bottom: var(--spacing-10);
    }
}

/* Fix grid gap */
main.container-custom.grid {
    gap: var(--spacing-8);
}

@media (min-width: 1024px) {
    main.container-custom.grid {
        gap: var(--spacing-10);
    }
}

/* ===================================
   7. SECTION SPACING FIXES
   =================================== */

/* Consistent section spacing */
/* section {
    margin-bottom: 0;
} */

/* Space between sections in left column */
/* .lg\:col-span-8>section {
    margin-bottom: 0;
} */

/* .lg\:col-span-8 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
} */

/* Space between sections in right sidebar */
.lg\:col-span-4 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

/* ===================================
   8. HERO SECTION ALIGNMENT
   =================================== */

.hero-illustration {
    padding: var(--spacing-8);
    border-radius: var(--spacing-3);
}

@media (min-width: 640px) {
    .hero-illustration {
        padding: var(--spacing-12);
    }
}

/* Fix hero content max-width */
.hero-illustration .relative.z-10 {
    max-width: 100%;
}

@media (min-width: 768px) {
    .hero-illustration .relative.z-10 {
        max-width: 42rem;
        /* 672px */
    }
}

/* Fix hero heading spacing */
.hero-illustration h1 {
    margin-bottom: var(--spacing-6);
    line-height: 1.2;
}

.hero-illustration p {
    margin-bottom: var(--spacing-8);
}

/* Fix hero button spacing */
.hero-illustration .flex.flex-wrap {
    gap: var(--spacing-4);
}

/* ===================================
   9. DISCLAIMER BOX ALIGNMENT
   =================================== */

.bg-yellow-50.p-4,
.bg-yellow-50.p-5 {
    padding: var(--spacing-5);
    border-radius: var(--spacing-3);
}

@media (min-width: 640px) {

    .bg-yellow-50.p-4,
    .bg-yellow-50.p-5 {
        padding: var(--spacing-6);
    }
}

/* Fix disclaimer spacing */
.bg-yellow-50 .space-y-3>*+* {
    margin-top: var(--spacing-4);
}

/* ===================================
   10. DASHBOARD SECTION ALIGNMENT
   =================================== */

/* Fix dashboard header padding */
/* .glass-card>div:first-child {
    padding: var(--spacing-5);
} */

/* Fix dashboard content padding */
/* .glass-card>div:last-child {
    padding: var(--spacing-5);
} */

/* Fix dashboard grid spacing */
.dashboard-stat-card {
    padding: var(--spacing-4);
}

.grid.grid-cols-2.md\:grid-cols-3.gap-3 {
    gap: var(--spacing-3);
}

@media (min-width: 768px) {
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 {
        gap: var(--spacing-4);
    }
}

/* ===================================
   11. IMPORTANT DATES ALIGNMENT
   =================================== */

/* Fix date cards grid */
.grid.grid-cols-1.md\:grid-cols-2.gap-4 {
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2.gap-4 {
        gap: var(--spacing-5);
    }
}

/* Fix date card padding */
.bg-white.rounded-xl.p-4 {
    padding: var(--spacing-4);
}

/* ===================================
   12. PROCESS STEPS ALIGNMENT
   =================================== */

/* Fix steps grid */
.grid.grid-cols-1.md\:grid-cols-3.gap-4 {
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-3.gap-4 {
        gap: var(--spacing-5);
    }
}

/* Fix step card padding */
.relative.bg-white.p-5 {
    padding: var(--spacing-5);
}

/* ===================================
   13. DOCUMENTS SECTION ALIGNMENT
   =================================== */

/* Fix documents grid */
.grid.md\:grid-cols-2.gap-6 {
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .grid.md\:grid-cols-2.gap-6 {
        gap: var(--spacing-8);
    }
}

/* Fix document box padding */
.bg-blue-50\/50.p-5,
.bg-orange-50\/50.p-5 {
    padding: var(--spacing-5);
    border-radius: var(--spacing-3);
}

/* ===================================
   14. SCHOOL LIST ALIGNMENT
   =================================== */

/* Fix school list grid */
.grid.grid-cols-2.md\:grid-cols-3.gap-3 {
    gap: var(--spacing-3);
}

@media (min-width: 768px) {
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 {
        gap: var(--spacing-4);
    }
}

/* ===================================
   15. LOTTERY LOGIC ALIGNMENT
   =================================== */

/* Fix lottery grid */
.grid.grid-cols-1.md\:grid-cols-3.gap-5 {
    gap: var(--spacing-5);
}

@media (min-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-3.gap-5 {
        gap: var(--spacing-6);
    }
}

/* ===================================
   16. FAQ SECTION ALIGNMENT
   =================================== */

/* Fix FAQ spacing */
.space-y-3>*+* {
    margin-top: var(--spacing-3);
}

/* Fix FAQ padding */
details summary {
    padding: var(--spacing-4);
}

details>div {
    padding: var(--spacing-4);
    padding-top: 0;
}

/* ===================================
   17. SIDEBAR ALIGNMENT FIXES
   =================================== */

/* Fix sidebar card padding */
.glass-card.rounded-xl {
    overflow: hidden;
}

.glass-card>div {
    padding: var(--spacing-4);
}

/* Fix quick links spacing */
.space-y-2>*+* {
    margin-top: var(--spacing-2);
}

/* Fix quick link padding */
.quick-link,
.no-underline.group.flex.items-center.gap-3.p-3 {
    padding: var(--spacing-3);
    gap: var(--spacing-3);
}

/* ===================================
   18. NEWS SECTION ALIGNMENT
   =================================== */

/* Fix news cards spacing */
.space-y-2\.5>*+* {
    margin-top: var(--spacing-3);
}

/* Fix news card padding */
.news-card {
    padding: var(--spacing-3);
}

/* ===================================
   19. GR SECTION ALIGNMENT
   =================================== */

/* Fix GR items spacing */
.space-y-2>*+* {
    margin-top: var(--spacing-2);
}

/* Fix GR item padding */
.block.p-3 {
    padding: var(--spacing-3);
}

/* ===================================
   20. FOOTER ALIGNMENT
   =================================== */

footer {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}

footer .container-custom {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
    footer .container-custom {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
}

/* Fix footer grid */
footer .grid {
    gap: var(--spacing-8);
}

/* Fix footer sections spacing */
footer ul {
    margin-top: var(--spacing-4);
}

footer ul.space-y-2>*+* {
    margin-top: var(--spacing-2);
}

/* ===================================
   21. MOBILE SPECIFIC FIXES
   =================================== */

@media (max-width: 640px) {

    /* Reduce spacing on mobile */
    main.container-custom {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }

    /* .lg\:col-span-8 {
        gap: var(--spacing-6);
    } */

    .lg\:col-span-4 {
        gap: var(--spacing-5);
    }

    /* Fix hero padding on mobile */
    .hero-illustration {
        padding: var(--spacing-6);
    }

    /* Fix section padding on mobile */
    .glass-card>div {
        padding: var(--spacing-4);
    }
}

/* ===================================
   22. CARD INTERNAL SPACING
   =================================== */

/* Fix icon and text spacing in cards */
.flex.items-center.gap-2 {
    gap: var(--spacing-2);
}

.flex.items-center.gap-3 {
    gap: var(--spacing-3);
}

.flex.items-start.gap-2 {
    gap: var(--spacing-2);
}

.flex.items-start.gap-3 {
    gap: var(--spacing-3);
}

/* ===================================
   23. BUTTON SPACING
   =================================== */

/* Fix button padding */
.header-cta-btn {
    padding: var(--spacing-2) var(--spacing-4);
}

/* Fix hero buttons */
.hero-illustration a {
    padding: var(--spacing-4) var(--spacing-8);
}

/* ===================================
   24. BADGE SPACING
   =================================== */

/* Fix badge padding */
.badge,
span[class*="rounded-full"][class*="px-"] {
    padding: var(--spacing-1) var(--spacing-3);
}

/* ===================================
   25. LIST SPACING
   =================================== */

/* Fix list item spacing */
ul.space-y-2>li+li {
    margin-top: var(--spacing-2);
}

ul.space-y-1>li+li {
    margin-top: var(--spacing-1);
}

/* ===================================
   26. BORDER RADIUS CONSISTENCY
   =================================== */

/* Consistent border radius */
.rounded-xl {
    border-radius: var(--spacing-3);
}

.rounded-lg {
    border-radius: var(--spacing-2);
}

.rounded-full {
    border-radius: 9999px;
}

/* ===================================
   27. ICON SIZING CONSISTENCY
   =================================== */

/* Consistent icon containers */
.w-10.h-10 {
    width: 2.5rem;
    height: 2.5rem;
}

.w-12.h-12 {
    width: 3rem;
    height: 3rem;
}

.w-8.h-8 {
    width: 2rem;
    height: 2rem;
}

.w-9.h-9 {
    width: 2.25rem;
    height: 2.25rem;
}

/* ===================================
   28. TEXT SPACING
   =================================== */

/* Fix heading margins */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h2 {
    margin-bottom: var(--spacing-4);
}

h3 {
    margin-bottom: var(--spacing-3);
}

/* Fix paragraph spacing */
p {
    margin-top: 0;
}

p+p {
    margin-top: var(--spacing-4);
}

/* ===================================
   29. ALIGNMENT UTILITIES
   =================================== */

/* Ensure proper vertical alignment */
.flex.items-center {
    align-items: center;
}

.flex.items-start {
    align-items: flex-start;
}

.flex.items-end {
    align-items: flex-end;
}

/* Ensure proper horizontal alignment */
.flex.justify-between {
    justify-content: space-between;
}

.flex.justify-center {
    justify-content: center;
}

.flex.justify-start {
    justify-content: flex-start;
}

/* ===================================
   30. OVERFLOW FIXES
   =================================== */

/* Prevent horizontal overflow */
body {
    overflow-x: hidden;
}

.container-custom {
    overflow-x: hidden;
}

/* Fix overflow in cards */
.glass-card,
.dashboard-stat-card,
.news-card {
    overflow: hidden;
}

/* ===================================
   31. RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    main.container-custom {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }

    .lg\:col-span-8 {
        gap: var(--spacing-6);
    }
}

/* Large desktop adjustments */
@media (min-width: 1280px) {
    .container-custom {
        padding-left: var(--spacing-10);
        padding-right: var(--spacing-10);
    }

    main.container-custom.grid {
        gap: var(--spacing-12);
    }
}

/* ===================================
   32. SECTION HEADER CONSISTENCY
   =================================== */

/* All section headers should have same padding */
.bg-gradient-to-r.from-blue-900.to-blue-800,
.bg-gradient-to-r.from-purple-900.to-purple-800,
.bg-gradient-to-r.from-green-600.to-green-700 {
    padding: var(--spacing-5);
}

/* Section header text spacing */
.bg-gradient-to-r h2,
.bg-gradient-to-r h3 {
    margin-bottom: var(--spacing-1);
}

.bg-gradient-to-r p {
    margin-top: var(--spacing-1);
    margin-bottom: 0;
}

/* ===================================
   33. MOBILE MENU SPACING
   =================================== */

.header-mobile-menu-content {
    padding: var(--spacing-4);
    gap: var(--spacing-2);
}

.header-mobile-link {
    padding: var(--spacing-3) var(--spacing-4);
}

.header-mobile-cta {
    margin-top: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
}

/* ===================================
   34. FINE-TUNING SPECIFIC ELEMENTS
   =================================== */

/* Fix Majhi Ladki Bahin button */
.border-2.border-pink-200.bg-pink-50 {
    padding: var(--spacing-4);
}

/* Fix Application Status CTA */
.rounded-xl.p-6.text-white {
    padding: var(--spacing-6);
}

/* Fix helpline info */
.glass-card .p-3.space-y-2 {
    padding: var(--spacing-3);
}

/* ===================================
   35. RESET CONFLICTING MARGINS
   =================================== */

/* Remove default margins that cause misalignment */
* {
    margin: 0;
    padding: 0;
}

/* Restore necessary margins */
body {
    margin: 0;
    padding: 0;
}

/* ===================================
   END OF SPACING FIXES
   =================================== */