//
// Flavor Header
// --------------------------------------------------


// Graphic background
.page-header {
  background: none; // we'll use header handler for that
  border-bottom: none;
}

.page-header-bg {
  background: @page-header-bg;
  background-image: url('../img/page-header.svg');
  background-size: cover;
  
  @media screen and (min-width: @screen-md-min) {
    margin-bottom: @line-height-computed * 2;
  }
}


// Min-height the line on headless pages
.page-header-bg {
  min-height: @page-header-min-height;
}


// Item colors
.page-header {
  h1 {
    color: @page-header-color;
    font-weight: 400;
    text-shadow: 0px 1px 1px @page-header-bg;
  }
}


// Buttons
.page-header .btn-outline {
  &.btn-default {
    .misago-btn(
      @page-header-btn-default-color,
      @page-header-btn-default-bg,

      @page-header-btn-default-hover-color,
      @page-header-btn-default-hover-bg,

      @page-header-btn-default-active-color,
      @page-header-btn-default-active-bg
    );
  }

  &.btn-primary {
    .misago-btn(
      @page-header-btn-primary-color,
      @page-header-btn-primary-bg,

      @page-header-btn-primary-hover-color,
      @page-header-btn-primary-hover-bg,

      @page-header-btn-primary-active-color,
      @page-header-btn-primary-active-bg
    );
  }
}


// Stats
.header-stats {
  color: @page-header-text-color;
  text-shadow: 0px 1px 1px @page-header-bg;

  li {
    a, a:link, a:visited {
      color: @page-header-link-color;
    }

    a:hover, a:focus, a:active {
      color: @page-header-link-hover-color;
    }

    .user-status.user-banned, 
    .user-status.user-online, 
    .user-status.user-offline {
      .status-icon {
        color: @page-header-text-color;
      }
    }
    
    .item-title {
      color: @page-header-link-color !important;
    }
  }
}


// Go back
.page-header .go-back-sm {
  text-shadow: 0px 1px 1px @page-header-bg;
  
  &, &:link, &:visited {
    color: @page-header-text-color;
  }

  &:hover, &:focus, &:active {
    color: @page-header-link-hover-color;
  }
}


// Breadcrumbs
.page-header .breadcrumb {
  color: @page-header-text-color;
  text-shadow: 0px 1px 1px @page-header-bg;
  
  a, a:link, a:visited {
    color: @page-header-text-color;
  }

  a:hover, a:focus, a:active {
    color: @page-header-link-color;
  }

  li:before {
    color: @page-header-text-color;
    text-shadow: 0px 1px 1px @page-header-bg;
  }
}


// Header tabs
.page-header .page-tabs {
  background-color: @page-tabs-bg;
  margin-top: @line-height-computed * 1.66;

  li a {
    font-weight: bold;

    &, &:link, &:visited {
      background-color: @page-tabs-link-bg;
      border-radius: @border-radius-small @border-radius-small 0 0;

      color: @page-tabs-link-color;
    }

    &:hover, &:focus {
      background-color: @page-tabs-link-hover-bg;

      color: @page-tabs-link-hover-color;
  
      @media screen and (max-width: @screen-sm-max) {
        // sticky hover on touch devices is confusing, so don.t add it
        background-color: @page-tabs-link-bg;

        color: @page-tabs-link-color;
      }
    }
  }

  li.active a {
    &, &:link, &:active, &:visited, &:hover, &:focus {
      background-color: @page-tabs-link-active-bg;

      color: @page-tabs-link-active-color;
    }
  }
}