@charset 'utf-8';

// The settings file contains the Foundation base settings, like fonts,
// colors, margins and other components.
// @see: http://foundation.zurb.com/sites/docs/sass.html#the-settings-file
@import 'settings';

// The Headerphoto, with the background image.
.headerphoto {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    min-height: 20vh;
    max-height: 36vh;
}

.column, .columns{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.headertitle {
    text-align: center;
}

[type='search'] {
    box-shadow: none;
}

ul.pagination {

    background: #DDD;
    display: inline-block;

    a {
        padding: 0.6em 1em;
        text-decoration: none;
    }

    .active a {
        color: $light-gray;
        background: $black;
    }

}

h1 a, h2 a, h3 a {
    text-decoration: none;
}

p.meta {
    font-size: 90%;
    color: #666;
}

@include breakpoint(medium) {
    h1, h2{
        margin-bottom: 2rem;
    }

    img {
        margin: 0 auto 1rem;
        max-width: 80%;
        display: block;
    }
}

.no-js {
  @include breakpoint(small only) {
    .top-bar {
      display: none;
    }
  }

  @include breakpoint(medium) {
    .title-bar {
      display: none;
    }
  }
}

// Override the a inside .menu-text, for topbar navigation, where the 'homepage' has a link.
.menu > li {
    padding: 0;
    a {
        color: $primary-color;
        text-decoration: none;
    }
    &.active > a {
        color: $primary-color;
        background-color: inherit;
        border-bottom: 1px solid;
    }
}

// Style widgets using the classes for .widgetholder and .widget
.widgetholder {

    .widget {
        margin: 1.5em 0;
    }
}