// Responsive sidebars layout
//
// Positioning for a responsive layout.
//
// Define CSS classes to create a fluid grid layout with optional sidebars
// depending on whether blocks are placed in the left or right sidebars.
//
// This layout uses the Zen Grids plugin for Compass: http://zengrids.com
//
// @TODO: Refactor
//
// Style guide: layouts.sidebars

// We are going to create a fluid grid with 1, 3, or 5 columns and 20px gutters
// between columns (applied as 10px of left/right padding on each column).
$zen-columns: 1;
$zen-gutters: 20px;

// If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
//$zen-box-sizing: content-box;

// You can generate more efficient CSS if you manually apply the
// zen-grid-item-base mixin to all grid items from within a single ruleset.
$zen-auto-include-grid-item-base: false;
// $zen-auto-include-flow-item-base: false;

// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
@if $zen-switch-direction == false {

  // Center the page.
  //
  // For screen sizes larger than 1200px, prevent excessively long lines of text
  // by setting a max-width.
  .page,
  .region-bottom {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

  // Apply the shared properties of grid items in a single, efficient ruleset.
  .header,
  .main-content,
  .main-navigation,
  .region-sidebar-first,
  .region-sidebar-second,
  .footer {
    // See the note about $zen-auto-include-grid-item-base above.
    @include zen-grid-item-base();
  }

  // Containers for grid items and flow items.
  .header,
  .main,
  .footer {
    @include zen-grid-container();
  }

  // Navigation bar
  @media all and (min-width: 480px) {
    .main {
      // Move all the children of .main down to make room.
      padding-top: $nav-height;
      position: relative;
    }

    .main-navigation {
      // Move the navbar up inside .main's padding.
      position: absolute;
      top: 0;
      height: $nav-height;
      width: $zen-grid-width;
    }
  }

} // End of @if $zen-switch-direction == false

//
// Use 3 grid columns for smaller screens.
//
@media all and (min-width: 480px) and (max-width: 959px) {

  $zen-columns: 3 !global;

  //
  // The layout when there is only one sidebar, the left one.
  //
  .sidebar-first {
    // Span 2 columns, starting in 2nd column from left.
    .main-content {
      @include zen-grid-item(2, 2);
    }

    // Span 1 column, starting in 1st column from left.
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }
  }

  //
  // The layout when there is only one sidebar, the right one.
  //
  .sidebar-second {
    // Span 2 columns, starting in 1st column from left.
    .main-content {
      @include zen-grid-item(2, 1);
    }

    // Span 1 column, starting in 3rd column from left.
    .region-sidebar-second {
      @include zen-grid-item(1, 3);
    }
  }

  //
  // The layout when there are two sidebars.
  //
  .two-sidebars {
    // Span 2 columns, starting in 2nd column from left.
    .main-content {
      @include zen-grid-item(2, 2);
    }

    // Span 1 column, starting in 1st column from left.
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }

    // Start a new row and span all 3 columns.
    .region-sidebar-second {
      @include zen-grid-item(3, 1);
      @include zen-grid-container(grid-item); // Since we're making every block in this region be a grid item.
      @include zen-new-row();

      // Apply the shared properties of grid items in a single, efficient ruleset.
      .block {
        @include zen-grid-item-base();
      }

      // Span 1 column, starting in the 1st column from left.
      .block:nth-child(3n+1) {
        @include zen-grid-item(1, 1);
        @include zen-new-row();
      }

      // Span 1 column, starting in the 2nd column from left.
      .block:nth-child(3n+2) {
        @include zen-grid-item(1, 2);
      }

      // Span 1 column, starting in the 3rd column from left.
      .block:nth-child(3n) {
        @include zen-grid-item(1, 3);
      }
    }
  }
}

//
// Use 5 grid columns for larger screens.
//
@media all and (min-width: 960px) {

  $zen-columns: 5 !global;

  //
  // The layout when there is only one sidebar, the left one.
  //
  .sidebar-first {
    // Span 4 columns, starting in 2nd column from left.
    .main-content {
      @include zen-grid-item(4, 2);
    }

    // Span 1 column, starting in 1st column from left.
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }
  }

  //
  // The layout when there is only one sidebar, the right one.
  //
  .sidebar-second {
    // Span 4 columns, starting in 1st column from left.
    .main-content {
      @include zen-grid-item(4, 1);
    }

    // Span 1 column, starting in 5th column from left.
    .region-sidebar-second {
      @include zen-grid-item(1, 5);
    }
  }

  //
  // The layout when there are two sidebars.
  //
  .two-sidebars {
    // Span 3 columns, starting in 2nd column from left.
    .main-content {
      @include zen-grid-item(3, 2);
    }

    // Span 1 column, starting in 1st column from left.
    .region-sidebar-first {
      @include zen-grid-item(1, 1);
    }

    // Span 1 column, starting in 5th column from left.
    .region-sidebar-second {
      @include zen-grid-item(1, 5);
    }
  }
}

@media print {
  .main-navigation,
  .region-sidebar-first,
  .region-sidebar-second,
  .footer {
    display: none;
  }

  // Un-float the content.
  .sidebar-first,
  .sidebar-second,
  .two-sidebars {
    .main-content {
      float: none;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }
}
