// import normalize, stay at top
@import "normalize";

// Global Foundation Settings
@import "settings";

// Comment out this import if you are customizing you imports below
@import "foundation";

@import "planet-foundation-settings";

 
/* Body Configuration */
body {
	height: auto;
}
/* End Body Configuration */

// fixed is getting inserted into sticky articles somehow.
// Remove fixed styling for it
article.fixed {
  position: static;
}

/* Visual Editor Configuration */
body.mceContentBody {
}
/* End Visual Editor Configuration */

/* Page Container Configuration */
div#pf-page-container {
  background: none;
  margin-left: auto;
  margin-right: auto;
}
/* Page Container Configuration */

/* Pre Header Configuration */
div#pf-pre-header.row {
  padding-top: 20px;
  padding-bottom: 12px;

}
#pf-logo-column {
}
#pf-logo {
}
#pf-title-and-description-column {
}
.site-title {
}
.site-description {
}
/* End Pre-header Configuration */

/* Primary Menu Configuration */
.top-bar {
  height: #{$topbar-height};
  line-height: #{$topbar-height};
  @media #{$small-only} {
    height: rem-calc(40);
    line-height: rem-calc(40);
  }
}
#pf-topbar-container-column .top-bar .title-area {
  @media #{$small-only} {
    height: rem-calc(40);
    line-height: rem-calc(40);
  }
}
#pf-topbar-container-column .top-bar .toggle-topbar.menu-icon a {
  @media #{$small-only} {
    font-size: rem-calc(20);
    height: rem-calc(40);
    line-height: rem-calc(40);
  }
}

#pf-topbar-container-column .top-bar .toggle-topbar.menu-icon {
  @media #{$small-only} {
	margin-top:-20px;
  }
}

#pf-topbar-container-column .top-bar .title-area .name a {
    height: rem-calc(45);
    line-height: rem-calc(45);
	@media #{$small-only} {
		font-size: rem-calc(20);
		height: rem-calc(40);
		line-height: rem-calc(40);
	}
}
// Foundation should handle this but it is not working for some reason.  This forces
// the accordian to display at a slightly smaller size.
//.top-bar .toggle-topbar.menu-icon a::after {
//	content: '';
//	position: absolute;
//	display: block;
//	height: 0;
//	box-shadow: 0 0px 0 1px #fff, 0 6px 0 1px #fff, 0 12px 0 1px #fff;
//	width: 16px;
//	top: 35%;
//}

// This hopefully increases the area sensitive to touch screens
//.top-bar .toggle-topbar.menu-icon {
//	right: 0px;
//	padding-right: 15px;
//	padding-left: 50px;
//}


#pf-topbar-container-row {
   z-index:          1000;
   position: 	     relative;
   margin-bottom:    0;
   box-shadow:       0px 6px 6px #000000;
}
#pf-topbar-container-row li {
  text-transform: uppercase;
  font-weight: normal;
}

#pf-topbar-container-column {
  padding:0;
}
#pf-banner-container-column {
  z-index: 998;
  position: relative;
  padding: 0px;
}
/* End Primary Menu Configuration */

/* Slide Show Configuration */
#pf-slideshow-container-row {
  z-index: 998;
  position: relative;
}

#pf-banner-container-row img {
  z-index: 998;
  position: relative;
}

#pf-slideshow-container-column h2 {
  padding: 10px;
  opacity: .8;
//  background-color: #{$pf-color-purple};
  color: #fff;
  position: absolute;
}

/* End Slide Show Configuration */

/* Sidebar / Page Menu Configuration */
.right-off-canvas-menu,
.left-off-canvas-menu {
  background-color: #fff;
}
nav.tab-bar {
  height: 26px;
  line-height: 26px;
}
nav.tab-bar .right-small,
nav.tab-bar .left-small {
    height: 26px;
    line-height: 26px;
}
a.right-off-canvas-toggle span,
a.left-off-canvas-toggle span {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
a.right-off-canvas-toggle:hover span,
a.left-off-canvas-toggle:hover span {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

a.right-off-canvas-toggle,
a.left-off-canvas-toggle {
  background-image: url('../../img/sideways_accordian.png');
  background-repeat: no-repeat;
}
a.right-off-canvas-toggle {
  background-position: center top;
}
a.left-off-canvas-toggle {
  background-position: center top;
}
a.right-off-canvas-toggle:hover,
a.left-off-canvas-toggle:hover {
  background-image: url('../../img/sideways_accordian_hover.png');
  background-repeat: no-repeat;
}
a.right-off-canvas-toggle:hover {
  background-position: center top;
}
a.left-off-canvas-toggle:hover {
  background-position: center top;
}
// turn off normal accordian effect
a.left-off-canvas-toggle span:after,
a.right-off-canvas-toggle span:after {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* End Sidebar Configuration */


/* Main Content Area Configuration */
#pf-main-content-container-row {
}
#pf-main-content-container-column {
  padding:0;
}
.main-section {
//  padding-left: 15px;
//  padding-right: 15px;
}
/* End Main Content Area */

.small-0 {
  display: none;
  @media #{$large-up} {
    display: block;
  }
}

/* Panel Configuration */
//$x: adjust-color($pf-color-purple, $lightness: 65%);
.panel.callout {
//  background-color: #{$x};
//  border-color: #{$pf-color-purple};
//  padding: 40px;
}
.panel.callout p {
//  color: #{$pf-color-purple};
}
/* End Panel Configuration */


/* General Font Configuration */
h1 {
//  color: #{$pf-color-purple};
//  font-family: #{$pf-header-font-family};
  font-size: rem-calc(36);
  line-height: rem-calc(38);
  margin-bottom: 5px;
  @media #{$small-only} {
    font-size: rem-calc(28);
    line-height: rem-calc(30);
  }
}
h2,
h2 a {
  font-family: #{$pf-header-font-family};
  font-size: rem-calc(32);
  line-height: rem-calc(34);
  @media #{$small-only} {
    font-size: rem-calc(24);
    line-height: rem-calc(26);
  }
  margin:0;
  padding:0;
  margin-top: rem-calc(10);
  font-weight: 400;
}
h2.pf-edit-post {
	display: inline; 
}

hr {
  margin-top: 5px;
  margin-bottom: 10px;
}
em {
//  color: #{$pf-color-maroon};
  font-weight: 600;
  font-style: italic;
}
.row .pf-full-post header {
  margin-bottom: rem-calc(15);
}
/* End General Font Configuration */



ul {
  padding-left: 10px;
}


/* Orbit Configuration */
div.orbit-container {
}
/* End Orbit Configuration */


/* Archive Configuration */
.pf-archive-row {
  margin-top: 20px;
}
.pf-archive-column {
//  @include grid-column(12);
  @media only screen and (min-width: 600px) {
//    @include grid-column(6);
  }
   @media #{$large-up} {
//    @include grid-column(3);
  }
}
.pf-archive-row .wp-post-image {
  border: 1px solid #{$pf-img-border-color};  
}
.link-icon {
}
/* End Archive Configuration */

/* Footer Configuration */
#pf-footer {
//  background-color: #{$pf-color-purple};
  min-height: 50px;
}
#pf-footer ul.inline-list {
  margin-left:0;
  padding-top: 4px;
}
#pf-footer  ul.inline-list li {
  margin-left:0;
  margin-right:10px;
}
#pf-footer p {
}
#pf-footer h5 {
//  color:#fff;
  border-bottom: 1px solid #000;
  font-size: 1em;
  text-transform:uppercase;
}
#pf-footer .pf-email {
  margin-bottom:5px;
}
/* End Footer Configuration */

.pf-icon {
  margin-bottom: 10px;
}

#pf-front-page-stories {
  background-color: #fff;
  padding-top: 10px;
}

.pf-front-page-blog-image-container {
  position: relative;
  max-width: 300px;

}


/* Featured Trips and Stories Configuration */
#pf-front-page-trips h4 {
  color: #000;
}
#pf-front-page-trips {
  padding-top: 10px;
}
#pf-front-page-trips ul {
  background-color: #000;
  padding-top: 10px;
  padding-bottom: 10px;
}
#pf-front-page-trips {
  margin-bottom: 20px;
}
#pf-front-page-trips li {
  padding-bottom: 0;
}


#pf-front-page-stories ul {
  background-color: #000;
  padding-top: 10px;
  padding-bottom: 10px;
}
#pf-front-page-stories {
  margin-bottom: 20px;
}
#pf-front-page-stories li {
  padding-bottom: 0;
}
#pf-front-page-stories h4 {
  color: #000;
}
#pf-front-page-stories h4,
#pf-front-page-trips h4 {
  color: #{$pf-color-purple};
}

.pf-front-page-all {
  position: absolute;
  right: 20px;
  top: 15px;
  margin:0;
}

.pf-blog-header-0 {
  background-color: #{$pf-color-green};
}
.pf-blog-header-1 {
  background-color: #{$pf-color-purple};
}
.pf-blog-header-2 {
  background-color: #{$pf-color-orange};
}
.pf-blog-header-3 {
  background-color: #{$pf-color-brown};
}
/* End Featured Trips Configuration */


/* Excerpts Configuration */
.pf-excerpt h2 {
  font-size: 1.1em;
  margin-top: 0px;
  margin-bottom: 10px;
}
.pf-excerpt {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pf-excerpt-gallery-container {
  margin-bottom: 10px;
}
.pf-excerpt-gallery-container img.pf-excerpt-gallery-image {
	margin:5px;
}
.pf-excerpt-icon {
  float:left;
  margin-right: 10px;
}
.pf-excerpt-image-container {
  margin-bottom: 10px;
}
.pf-excerpt .entry-thumbnail {
  margin-bottom:10px;
}
@media #{$large-up} {
	.pf-excerpt-image-container img {
		width: 75%;
		height: auto;
	}
}
/* End Post Formats and Excerpts Configuration */

/* Add to Any Configuration */
.pf-add-to-any {
  margin-bottom: 10px;
}
/* End Add to Any Configuration */


/* Full Post Configuration - General */
.row .pf-full-post {
  margin-top: 15px;
}
.pf-full-post header {
  margin-bottom: 20px;
}
.pf-full-post h2 {
  margin-top: 10px;
  margin-bottom: 5px;
  display: inline;
}
.pf-full-post .post-edit-link {
  margin-left: 10px;
  font-size: .9em;
}
.pf-edit-post-link-container {
  display: inline;
}
/* End Full Post Configuration */

/* Full Gallery Post Configuration */
img.pf-full-gallery-image {
	margin-top:5px;
	margin-bottom:5px;
}
/* End Full Gallery Post Configuration */

/* Comment Respond Configuration */
.pf-comment-respond h3 {
  margin-top: 20px;
  margin-bottom: 5px;
  font-size: 1.1em;
  border-bottom: 1px solid #ddd;
}
/* End Comment Respond Configuration */

/* Clearing Lightbox Configuration */
.clearing-assembled  {
}
/* End Clearing Lightbox Configuration */

/* Author Configuration */
.row .pf-author-info {
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 15px;
  margin-bottom: 30px;
}
.pf-author-link-container {
  border: none;
  padding: 0;
  margin: 0;
}
.pf-author-description .vcard .fn {
  font-size: 1.6rem;
}
.pf-author-date-container {
  padding-top: 5px;
}
/* End Meta Configuration */

/* Static Page Configuration */
.row .pf-page {
  margin-top: 15px;
}
.row .pf-page header {
  margin-bottom:20px;
}
.pf-page h2 {
  margin-top: 10px;
  margin-bottom: 5px;
  display: inline;
}
.pf-page .post-edit-link {
  margin-left: 10px;
  font-size: .9em;
}
.pf-edit-post-link-container {
  display: inline;
}
/* End Static Page Configuration */

/* Widget Configuration */
h4.pf-widget-title {
  font-size: rem-calc(16);
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.widget p,
.widget a,
.widget span {
//  font-size: rem-calc(14);
}
.pf-left-sidebar .widget {
  margin-left: 10px;
  margin-right: 5px;
}
.pf-right-sidebar .widget {
  margin-left: 5px;
  margin-right: 10px;
}
.pf-left-sidebar {
//  height: 100%;
//  overflow-y: auto;
	margin-bottom:20px;
}
.pf-right-sidebar {
	margin-bottom:20px;
}
div.pf-primary,
div.pf-left {
  margin-top: 10px;
}

/* End Widget Configuration */

/* Search Page Configuration */
.search .pf-nothing-found-header {
  margin-top: rem-calc(15);
  margin-bottom: rem-calc(20);
  color: #{$pf-color-red};
}
.search .pf-nothing-found-text {
}
/* End Search Page Configuration */

/* Configuration of Captions for Figures */
figure.pf-figure {
}
figure figcaption {
  width: 100%;
  font-size: rem-calc(14);
  line-height: rem-calc(16);
  color: #fff;
  background-color: #000;
  padding: 3px 5px 3px 5px;
}
/* End Configuration of Captions */


/* Pagination Configuration */
.page-numbers { @include pagination; }

// customizing pagination for WordPress using Foundation mixins, this is not beautiful I know
.page-numbers li {
	span:hover a,
	span a:focus {
		background: $pagination-link-active-bg;
	}
	span.current {
		background: $pagination-link-current-background;
		padding: $pagination-link-pad;
		color: $pagination-link-current-font-color;
		font-weight: $pagination-link-current-font-weight;
		cursor: $pagination-link-current-cursor;
	}
}
/* End Pagination Configuration */

/* Comment Configuration */
ol.commentlist .comment {
	margin-left: 0;
	margin-top: 2em;
	list-style: none;

	.comment-author img {
		border-radius: 50%;
		float: left;
		margin: 0 1em 0 0;
	}
		.author-meta {
			display: inline-block;
		}
			cite.fn {
				@extend h4;
				margin-right: 0.5em;
			}
		section.comment {
			@include panel(white, 20px);
		}
			a.comment-reply-link {
				float: right;
				position: relative;
				bottom: 1em;
			}
}
ol.commentlist .comment article {
	ul {
		list-style-type: auto;
	}
	ol {
		list-style-type: auto;
	}
}
// hide comments are closed
.pf-no-comments {
	display:none;
}
/* End Comment Configuration */

// add some extra margin to ul
ul {
	margin-#{$default-float}: $list-side-margin;
}

// add some margin for embeds in post
figure {
	margin-bottom: $paragraph-margin-bottom;
}

// adjust search button on top-bar
input.prefix.button {
	line-height: 1;
}

// adjust search button on sidebar
#sidebar input.prefix.button {
	line-height: 0.7;
}

// Add Class for Images
img.alignright {
	float: right;
	margin: 0 0 18px 18px;
}
	
img.alignleft {
	float: left;
	margin: 0 18px 18px 0;
}

img.aligncenter {
	display: block;
	margin: 18px auto;
	}

// Add HTML5 Caption Class for Images
figure.figure {
	margin: 0 auto;
	display: table;
	figcaption {
		padding: 8px 10px;
		color: gray;
		margin-bottom: $paragraph-margin-bottom;
		display: table-caption;
		caption-side: bottom;
	}
}

figure.alignright.figure {
	float: right;
	margin: 0 0 18px 18px;
}

figure.alignleft.figure {
	float: left;
	margin: 0 18px 18px 0;
}

/* Flex Video Configuration */
@media #{$large-up} {
	.flex-video {
		width: 75%;
	}
}
/* End Flex Video Configuration */

/* Required WordPress Classes */
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}
.sticky {
//	border: 1px solid #373737;
}
// handle foundation sticky class conflict
#pf-topbar-container-row .sticky {
	border: none;
}
.main-section .sticky .entry-title {
	text-decoration: underline;
}
.bypostauthor {
	padding: 5px;
}
.gallery-caption {
	padding: 2px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

.pf-sidebar table#wp-calendar tr th,
.pf-sidebar table#wp-calendar tr td {
	padding: .5rem;
	font-size: .75rem;
}
/* End Required WordPress Classes */
