/* Tari Electra - BULLETPROOF CSS - Maximum Specificity Override */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================
   PAGE-SHELL SPACING - BULLETPROOF
   ============================================ */

html body .page-shell,
body html .page-shell,
.page-shell.page-shell,
html body header nav.page-shell {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
}

@media (min-width: 768px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1024px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 3.5rem !important;
        padding-right: 3.5rem !important;
    }
}

@media (min-width: 1280px) {
    html body .page-shell,
    body html .page-shell,
    html body header nav.page-shell {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* ============================================
   SECTION SPACING - PROFESSIONAL & CONSISTENT
   ============================================ */

/* Base section rules - ensure no overflow and proper structure */
main > section,
section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Section padding class - DRAMATIC and VISIBLE spacing between sections */
.section-padding {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 640px) {
    .section-padding {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

@media (min-width: 1024px) {
    .section-padding {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }
}

@media (min-width: 1280px) {
    .section-padding {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* Force spacing between ALL sections */
main > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main > section + section {
    margin-top: 0 !important;
}

/* Ensure spacing BETWEEN sections - no margin collapse */
main > section + section {
    margin-top: 0 !important;
}

/* Last section bottom spacing */
main > section:last-child {
    padding-bottom: 5rem !important;
}

@media (min-width: 640px) {
    main > section:last-child {
        padding-bottom: 6rem !important;
    }
}

@media (min-width: 768px) {
    main > section:last-child {
        padding-bottom: 7rem !important;
    }
}

@media (min-width: 1024px) {
    main > section:last-child {
        padding-bottom: 8rem !important;
    }
}

@media (min-width: 1280px) {
    main > section:last-child {
        padding-bottom: 10rem !important;
    }
}

/* Hero sections - first section can have less bottom padding */
main > section:first-child.section-padding {
    padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
    main > section:first-child.section-padding {
        padding-bottom: 3.5rem !important;
    }
}

@media (min-width: 1024px) {
    main > section:first-child.section-padding {
        padding-bottom: 4rem !important;
    }
}

/* Additional spacing classes for fine-tuning */
.section-spacing-sm {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
    .section-spacing-sm {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

.section-spacing-lg {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

@media (min-width: 768px) {
    .section-spacing-lg {
        padding-top: 10rem !important;
        padding-bottom: 10rem !important;
    }
}

@media (min-width: 1024px) {
    .section-spacing-lg {
        padding-top: 12rem !important;
        padding-bottom: 12rem !important;
    }
}

/* ============================================
   COLOR THEME - GREEN FROM LOGO
   ============================================ */

:root {
    --color-primary: #a6ed0b;
    --color-primary-dark: #249424;
    --color-primary-light: #c2f07a;
    --color-accent: #ffa500;
}

/* ============================================
   OVERFLOW PROTECTION
   ============================================ */

html, body, main, section, div, header, footer {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in-on-scroll {
    animation: fadeIn 0.6s ease-out forwards;
}

.stagger-item {
    animation: fadeIn 0.6s ease-out forwards;
}

.scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

/* ============================================
   UTILITIES
   ============================================ */

.industrial-grid {
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ============================================
   ADMIN PANEL SPECIFIC
   ============================================ */

body.admin-page main,
body.admin-page .admin-content {
    padding: 2rem !important;
}

@media (min-width: 768px) {
    body.admin-page main,
    body.admin-page .admin-content {
        padding: 2.5rem !important;
    }
}

@media (min-width: 1024px) {
    body.admin-page main,
    body.admin-page .admin-content {
        padding: 3rem !important;
    }
}

/* Hide mobile menu on desktop */
@media (min-width: 768px) {
    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* Hide desktop nav on mobile */
@media (max-width: 767px) {
    .desktop-nav,
    .desktop-auth {
        display: none !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 639px) {
    .section-padding {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}