@import url('./styles.tokens.css');

/* Alternating section backgrounds with a CSS counter - only apply to sections within main */
/* Footer is excluded as it's outside main and has explicit background in styles.components.css */
main { counter-reset: section; }
main .section { counter-increment: section; }
main .section { background: var(--color-bg-1); }
main .section:nth-of-type(even) { background: var(--color-bg-2); }

/* Explicit modifiers override generic/background alternation */
main .section.section--dark { background: var(--color-bg-1); }
main .section.section--darker { background: var(--color-bg-2); }

/* Prevent unintended internal scrolling on sections */
.section { overflow: visible; max-width: 100%; }

/* Ensure header/footer content aligns to grid like hero */
.site-header .container, .site-footer .container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-left: var(--space-7); 
    padding-right: var(--space-7); 
}

/* Make habit cards perfectly square and responsive */
.habit-card { aspect-ratio: 1 / 1; height: auto; }

/* Mobile: Apply 4-column grid padding to all containers */
@media (max-width: 767px) {
    .site-header .container, .container { 
        padding-left: 32px; 
        padding-right: 32px; 
    }
    .nav-bar { margin-left: 0; margin-right: 0; }
}