/*!
Theme Name: Próximo Ferry 2018
Author: Crisina Torres (design) and Jan Willem Nienhuis (development)
Description: This is Próximo Ferry's WordPress theme
Version: 1.0.0
Text Domain: proximoferry
Tags: custom-menu, featured-images, translation-ready
*/

/*
  Colors:
  #005db1 Medium blue - Body background.
  #092289 Dark blue - Text.
  #103073 Dark blue - Backgrounds.
  #75c2e7 Light blue - Backgrounds.
  #92d2ed Light blue - Hover backgrounds.
  #94aec5 Light blue / Grey - Lines & borders.
  #949494 Grey - Lines & borders.
*/

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
html {
  box-sizing       : border-box;
  background-color : white;
  background-image : url(/images/background-top-no-gradient.png);
}

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing : inherit;
}

a, a:visited {
  color           : #092289;
  text-decoration : none;
}

a:hover {
  color           : #75c2e7;
  text-decoration : underline;
}

h1 {
  font-size : 1.5em;
  color     : #092289;
}

h2 {
  color : #092289;
}

.content-area h1:first-child {
  /*
    The first header should not have a top margin. It might even be better
    to remove top margin from all elements, anywhere, and only have bottom
    margin, like in bootstrap 4. We'll look into that when it becomes messy.
  */
  margin-top : 0;
}

.page-header {
  height : 100px;
}

.page-body {
  margin-top       : 25px;
  margin-left      : 0; /* Undo margin-left: 80 in website.css */
  max-width        : 800px;
  background-color : white;
}

.content-area {
  padding-left  : 15px;
  padding-right : 15px;
}

@media (min-width : 731px) and (max-width : 800px) {
  /* Make the content-area fluid in this area, with room for a fixed-width sidebar. */
  .content-area {
    float         : left;
    margin-bottom : 15px;
    margin-right  : -315px; /* Trick to make a 300px gutter (plus 15px padding for self) for the sidebar. */
    padding-right : 315px;
    width         : 100%; /* Make the content flexible (from 730 - 800) */
  }
}

@media (min-width : 801px) {
  /* Fixed-width content-area on larger screens. */
  .content-area {
    float : left;
    width : 500px;
  }
}

.widget-title {

}

.widget_categories ul {
  margin-left  : 0;
  padding-left : 0;
  list-style   : none;
}

/* Move the main-nav to the right, as a whole, instead of only the ul's in it. */
.main-nav {
  float : right;
}

/* Float the language nav (in the ul) and the main WP nav, so that they stick together.  */
.main-nav > ul,
.main-nav .menu-global-menu-container {
  float : left;
}

.main-nav .current-menu-item,
.main-nav .item.current {
  background-color : #00a1d4;
}

/*
  On small screens, the main nav is hidden behind a button (.menu-activator).
  When clicked, the menu items are full screen width and vertically stacked.
  The menu is shown on top of the page.

  @see phone.css
*/
@media (max-width : 480px) {
  .main-nav,
  .main-nav ul,
  .main-nav .menu-global-menu-container {
    float : none; /* Make these root items screen wide again. */
  }

  /* Initially hide the main WP nav (the items in the language nav are already handled in phone.css). */
  .main-nav .menu-global-menu-container {
    display : none;
  }

  /* Show the list of menu items when the menu button has been clicked (and the corresponding checkbox has been checked). */
  .main-nav .menu-activator-state:checked ~ .menu-global-menu-container,
  .main-nav .menu-activator-state:checked ~ .menu-global-menu-container ul {
    display : block;
  }
}

/*
  Post summary. Used as list item for each post on the category pages.
*/
.summary {
  display       : block;
  overflow      : hidden;
  margin-bottom : 2em;
  color         : inherit;
}

a.summary:visited {
  color : unset;
}

a.summary:hover {
  color : #06e;
}

.summary__description {
  float        : right;
  width        : 100%; /* Make it grow with the screen width. */
  margin-left  : -160px; /* Create a gutter for the image. */
  padding-left : 160px;
}

.summary__image {
  float  : left;
  width  : 145px;
  height : auto;
}

.summary__image img {
  width : 145px;
}

.summary__title {
  margin-top : 0;
  font-size  : 1.2em;
}

/*
  Paging navigation (prev/next page).
*/
.paging-navigation:after {
  content : "";
  display : table;
  clear   : both;
}

.paging-navigation ul {
  margin-left  : 0;
  padding-left : 0;
  list-style   : none;
}

.paging-navigation .older {
  float : left;
}

.paging-navigation .newer {
  float : right;
}

.paging-navigation .readmore-link {
  color : #b3b3b3;
}

/*
  Ads.

  These styles are for the HTML that is outputted by the InlineAd plugin. Maybe
  this is the wrong place, as this is the theme stylesheet. On the other hand:
  styling is theme-dependent, so it still makes sense.
*/
.content-area .ad a {
  position        : relative;
  display         : block;
  color           : #fff;
  text-decoration : none;
}

.content-area .ad-type-startpagePopup td {
  text-align : center;
}

.content-area .ad-type-startpagePopup img {
  width  : 100%;
  height : auto;
}

@media screen and (min-width : 731px) {
  /* Only show the inline ads in the mobile (versions) that don't show ads in the sidebar. */
  .content-area .ad-type-timetable {
    display : none;
  }
}

.content-area .ad-type-timetable td {
  background-color : #6d90ac;
}

.content-area .ad-type-timetable a {
  display         : block;
  padding         : 7px 0 7px 20px; /* The padding of the normal timetable td's. For ads, we set the padding on the anchor, so that we can animate it better (td's don't slide very well). */
  text-decoration : none;
  color           : #000000;
  line-height     : 1.1em;
}

.content-area .ad-type-timetable.ad-has-image a {
  height  : 50px;
  padding : 0;
}

.content-area .ad-type-timetable.ad-has-image a span {
  display : none;
}

.content-area .ad-type-timetable .title {
  display     : block;
  font-weight : bold;
}

.content-area .ad-type-timetable .description {
  display   : block;
  font-size : 11px;
}

.content-area .ad-type-timetable .ad-footer {
  display   : block;
  color     : white;
  font-size : 11px;
}

/*
  Sidebar
*/
.home .sidebar .ad:first-child,
.archive .sidebar .ad:first-child {
  /*
    If the first item of the sidebar is an ad image (or in fact: if it's
    something without a textual header), align the ad with the page's content,
    instead of with its header (ie. 'latest articles'). This looks more logical,
    less crowded at the top of the page.
    Only do this on the listing pages (like home, category etc.). On
   */
  margin-top : 37px;
}

/*
# Utilities
*/
.text-muted {
  color : #949494;
}

/*--------------------------------------------------------------
# Images / Media
--------------------------------------------------------------*/
img {
  /* Make sure images are scaled correctly. */
  height    : auto;
  /* Adhere to container width. */
  max-width : 100%;
}

figure {
  /* Extra wide images within figure tags don't overflow the content area. */
  margin : 1em 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width : 100%;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display : none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display : block;
}

/*--------------------------------------------------------------
# Classes rendered in the HTML by Wordpress.
# See https://codex.wordpress.org/CSS
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display      : inline;
  float        : left;
  margin-right : 1.5em;
}

.alignright {
  display     : inline;
  float       : right;
  margin-left : 1.5em;
}

.aligncenter {
  clear        : both;
  display      : block;
  margin-left  : auto;
  margin-right : auto;
}

/*--------------------------------------------------------------
# Classes rendered in the HTML by Wordpress.
# See https://codex.wordpress.org/CSS
# Captions
--------------------------------------------------------------*/
.wp-caption {
  margin-bottom : 1.5em;
  max-width     : 100%;
}

.wp-caption img[class*="wp-image-"] {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
}

.wp-caption .wp-caption-text {
  margin : 0.8075em 0;
}

.wp-caption-text {
  text-align : center;
}

/*--------------------------------------------------------------
# Classes rendered in the HTML by Wordpress.
# See https://codex.wordpress.org/CSS
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  border    : 0;
  clip      : rect(1px, 1px, 1px, 1px);
  clip-path : inset(50%);
  height    : 1px;
  margin    : -1px;
  overflow  : hidden;
  padding   : 0;
  position  : absolute !important;
  width     : 1px;
  word-wrap : normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.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;
  clip-path        : none;
  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. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline : 0;
}