// layout/_main.sass

@use '../abstracts' as *
@use '../base' as *

// Main page wrapper: Centered flex
#page .container
  display: flex
  padding: 0
  justify-content: center
  align-items: flex-start
  padding-top: space('lg')

// Article content: Fixed width, no shrink
article
  width: 1140px
  flex-shrink: 0
  padding: 3rem
  margin: 0
  background-color: $bg-dark
  border: 1px solid $bg-darker

ul#leftnav
  width: 320px
  flex-shrink: 0
  list-style: none
  padding: 0
  margin: 0 space('xl') 0 0 // Right margin preserved (overrides the 0 for other sides)
  background-color: $bg-dark
  border: 1px solid $bg-darker

#leftnav li
  border-bottom: 1px solid color('border-light')

  &:last-child
    border-bottom: none

#leftnav a
  display: block
  padding: space('sm') space('md')  // Consistent spacing
  text-decoration: none
  color: $text-light  // Theme text

  &:hover, &:focus
    background-color: rgba($accent-light, 0.1)  // Green hover tint
    color: $accent-light  // Accent on hover
    border-radius: 4px

// Responsive: Stack on mobile (add to themes/ for media queries)
@media (max-width: 1280px)  // Your xl breakpoint
  #page .container
    flex-direction: column
    align-items: center

  article, #leftnav
    width: 100%
    max-width: 900px
    margin: space('md') 0

  #leftnav
    margin-right: 0