/**
 * @file    css/__common.css
 * @brief   Common stylesheet.
 *
 * @ingroup BLNG_CSS
 */

 /**
 * Table of Contents
 *
 * 1.0 - Colors
 *   1.1 - Color defines
 *   1.2 - Color appliance
 *     1.2.1 - Wrappers
 *     1.2.2 - Elements
 *     1.2.3 - Forms
 *     1.2.4 - Links
 *     1.2.5 - Accessibility
 * 2.0 - Fonts
 *   2.1 - Genericons
 *   2.2 - Dashicons
 * 3.0 - Main Containers
 *   3.1 - Body
 *   3.2 - Site
 *   3.3 - Site Content
 *     3.3.1 - General
 *     3.3.2 - Chunk
 *     3.3.3 - Main Image
 *     3.3.4 - Main Title
 *     3.3.5 - Info
 *     3.3.6 - Content
 *     3.3.7 - Media Queries
 */

/*===========================================================================*/
/* 1.0 Colors                                                                */
/*===========================================================================*/
/**
 * 1.1 - Color defines
 */
:root {
  --facebook: #3b5998;
  --google-plus: #dd4b39;
  --twitter: #1da1f2;
  --linkedin: #0077b5;
  --youtube: #cd201f;
  --blng-pe-brand-gold-1a: #ffcd00;
  --blng-pe-brand-gold-1b: #4c3d00;
  --blng-pe-brand-gold-1c: #b28f00;
  --blng-pe-brand-gold-1d: #ffd733;
  --blng-pe-brand-gold-1e: #ffe166;
  --blng-pe-brand-gold-1f: #ffeda5;
  --blng-pe-brand-gold-1g: #fffae5;
  --blng-pe-brand-gold-1h: #fffdf9;
  --blng-pe-brand-midnight-2a: #00313c;
  --blng-pe-brand-midnight-2b: #264f59;
  --blng-pe-brand-midnight-2c: #4c6e76;
  --blng-pe-brand-midnight-2d: #7f989d;
  --blng-pe-brand-midnight-2e: #a5b6ba;
  --blng-pe-brand-midnight-2f: #d8e0e1;
  --blng-pe-brand-midnight-2g: #ffffff;
  --blng-pe-azure-3a: #38cbda;
  --blng-pe-azure-3b: #103c41;
  --blng-pe-azure-3c: #24838d;
  --blng-pe-azure-3d: #5fd5e1;
  --blng-pe-azure-3e: #87dfe8;
  --blng-pe-azure-3f: #b9ecf2;
  --blng-pe-azure-3g: #ebf9fb;
  --blng-pe-green-4a: #009a44;
  --blng-pe-green-4b: #002e14;
  --blng-pe-green-4c: #00642c;
  --blng-pe-green-4d: #33ae69;
  --blng-pe-green-4e: #66c28e;
  --blng-pe-green-4f: #a5dbbd;
  --blng-pe-green-4g: #e5f4ec;
  --blng-pe-pumpkin-5a: #ff7f32;
  --blng-pe-pumpkin-5b: #4c260f;
  --blng-pe-pumpkin-5c: #a55220;
  --blng-pe-pumpkin-5d: #ff985b;
  --blng-pe-pumpkin-5e: #ffb284;
  --blng-pe-pumpkin-5f: #ffd2b7;
  --blng-pe-pumpkin-5g: #fff2ea;
  --blng-pe-lime-6a: #aadb1e;
  --blng-pe-lime-6b: #334109;
  --blng-pe-lime-6c: #6e8e13;
  --blng-pe-lime-6d: #bbe24b;
  --blng-pe-lime-6e: #cce978;
  --blng-pe-lime-6f: #e1f2b0;
  --blng-pe-lime-6g: #f6fbe8;
  --blng-pe-red-7a: #c10016;
  --blng-pe-red-7b: #390006;
  --blng-pe-red-7c: #7d000e;
  --blng-pe-red-7d: #cd3344;
  --blng-pe-red-7e: #d96673;
  --blng-pe-red-7f: #e9a5ad;
  --blng-pe-red-7g: #f8e5e7;
  --blng-pe-pink-8a: #d62598;
  --blng-pe-pink-8b: #400b2d;
  --blng-pe-pink-8c: #8b1862;
  --blng-pe-pink-8d: #de50ac;
  --blng-pe-pink-8e: #e67cc1;
  --blng-pe-pink-8f: #f0b2da;
  --blng-pe-pink-8g: #fae9f4;
  --blng-pe-cobalt-9a: #281e78;
  --blng-pe-cobalt-9b: #0c0924;
  --blng-pe-cobalt-9c: #1a134e;
  --blng-pe-cobalt-9d: #534b93;
  --blng-pe-cobalt-9e: #7e78ae;
  --blng-pe-cobalt-9f: #b3b0cf;
  --blng-pe-cobalt-9g: #e9e8f1;
  --blng-main-background: var(--blng-pe-brand-midnight-2g);
  --blng-articles-background: var(--blng-pe-azure-3g);
  --blng-border: var(--blng-pe-azure-3f);
}

/**
 * 1.2 - Color appliance
 */
/**
 * 1.2.1 - Wrappers
 */
fieldset {
  border-color: var(--blng-pe-brand-midnight-2d);
}

/**
 * 1.2.2 - Elements
 */
hr {
  background-color: var(--blng-pe-brand-midnight-2d);
}

table,
th,
td {
  border-color: var(--blng-pe-azure-3f);
}

thead td,
thead th {
  background-color: var(--blng-pe-azure-3c);
  color: var(--blng-pe-brand-midnight-2g);
}

th {
  background-color: var(--blng-pe-azure-3f);
  border-color: var(--blng-pe-brand-midnight-2g);
  color: var(--blng-pe-azure-3c);
}

th:last-child {
  border-right-color: var(--blng-pe-azure-3f);
}

tr:last-child th {
  border-bottom-color: var(--blng-pe-azure-3f);
}

/**
 * 1.2.3 - Forms
 */
select,
input,
textarea,
option,
.button {
  border-color: var(--blng-pe-azure-3f);
}

select:hover,
select:focus,
input:hover,
input:focus,
textarea:hover,
textarea:focus,
option:hover,
option:focus,
.button:hover,
.button:focus {
  box-shadow: 0 0 5px var(--blng-pe-brand-gold-1a);
  border-color: var(--blng-pe-brand-gold-1a);
}

: -moz-placeholder {
  color: var(--blng-pe-brand-midnight-2c);
}

::-webkit-input-placeholder {
  color: var(--blng-pe-brand-midnight-2c);
}

::-moz-placeholder {
  color: var(--blng-pe-brand-midnight-2c);
}

:-ms-input-placeholder {
  color: var(--blng-pe-brand-midnight-2c);
}

.post-password-form label {
  color: var(--blng-pe-brand-midnight-2b);
}

input[type='submit'],
input[type='button'],
.button {
  background-color: var(--blng-pe-brand-gold-1a);
}

input[type='submit']:hover,
input[type='submit']:focus,
input[type='button']:hover,
input[type='button']:focus,
.button:hover,
.button:focus {
  box-shadow: 0 0 5px var(--blng-pe-brand-gold-1a);
}

input[type='reset'] {
  background-color: var(--blng-pe-azure-3c);
}

input[type='reset']:hover,
input[type='reset']:focus {
  box-shadow: 0 0 5px var(--blng-pe-azure-3c);
}

/**
 * 1.2.4 - Links
 */
a {
  color: var(--blng-pe-azure-3c);
}

/**
 * 1.2.5 - Accessibility
 */
.site .skip-link {
  color: var(--blng-pe-azure-3c);
}

/*===========================================================================*/
/* 2.0 Fonts                                                                 */
/*===========================================================================*/
/**
 * 2.1 - Genericons
 */
.menu-item-has-children a:after,
.social-nav a:before,
.primary-nav .home a:before,
.dropdown-toggle:after,
.comment-reply-title small a:before{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Genericons";
  font-size: 1.71em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  vertical-align: top;
}

.social-nav a[href*="facebook.com"]:before {
  content: "\f204";
}

.social-nav a[href*="google.com"]:before{
  content: "\f206";
}

.social-nav a[href*="twitter.com"]:before{
  content: "\f202";
}

.social-nav a[href*="linkedin.com"]:before{
  content: "\f207";
}

.social-nav a[href*="youtube.com"]:before{
  content: "\f213";
}

/**
 * 2.2 - Dashicons
 */

/*===========================================================================*/
/* 3.0 Main Containers                                                       */
/*===========================================================================*/
/**
 * 3.1 - Body
 */
body {
  font-family: 'Open Sans', Helvetica Neue, Helvetica, Verdana sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  line-height: 1.5;
  color: var(--blng-pe-brand-midnight-2a);
  overflow-wrap: break-word;
}

body #wpstats {
  display: none;
}

@media screen and (max-width: 1023px) {
  body {
    font-size: 15px;
  }
}

/**
 * 3.2 - Site
 */
.site {
  margin: 0;
  height: auto;
  width: 100%;
  background-color: var(blng-main-background);
  overflow: visible;
}

/**
 * 3.3 - Site Content
 */
/**
 * 3.3.1 - General
 */
:root {
  --blng-content-padding-side: 40px;
  --blng-content-padding-block: 40px;
}

#blng-site-content {
  width: 100%;
  background-color: var(--blng-main-background);
}

#blng-site-content .main-content {
  width: 100%;
}

#blng-site-content .main-content *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#blng-site-content .main-content *::-webkit-scrollbar-thumb {
  background: var(--blng-pe-azure-3c);
  border-radius: 3px;
}

#blng-site-content .main-content *::-webkit-scrollbar-thumb:hover {
  background: var(--blng-pe-azure-3f);
}

@media screen and (max-width: 1023px) {
  :root {
   --blng-content-padding-side: 20px;
   --blng-content-padding-block: 15px;
  }
}

/**
 * 3.3.2 - Chunk
 */
.blng-chunk {
  line-height: 1.4;  font-size: 1.0em;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 15px;
}

.blng-chunk .blng-chunk-description {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.blng-chunk .blng-chunk-icon {
  display: inline-block;
  width: auto;
  font-size: 20px;
  font-weight: 400;
  padding-right: 10px;
  -webkit-font-smoothing: antialiased;
  color: var(--blng-pe-brand-midnight-2d);
  speak: none;
}

.blng-chunk .blng-chunk-icon.dashicons {
  font-family: 'Dashicons';
}

.blng-chunk .blng-chunk-text:after {
  content: ':';
  margin-left: 2px;
  margin-right: 5px;
}

.blng-chunk .blng-chunk-value {
  color: var(--blng-pe-brand-midnight-2c);
  font-weight: bold;
}

/**
 * 3.3.3 - Main Image
 */
#blng-site-content .main-content .blng-image {
  width: 100%;
  height: 22vw;
  min-height: 200px;
  overflow: hidden;
  align-items: center;
}

#blng-site-content .main-content .blng-image img {
  max-width: none;
  width: inherit;
}

/* Javascript disabled fallback */
.no-js #blng-site-content .main-content .blng-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/**
 * 3.3.4 - Main Title
 */
#blng-site-content .main-content .blng-title {
  padding: var(--blng-content-padding-block) var(--blng-content-padding-side);
  text-align: center;
  margin: 0 !important;
}

#blng-site-content .main-content .blng-title span.bold {
  font-weight: bold;
}

/**
 * 3.3.5 - Main Info
 */
#blng-site-content .main-content .blng-info {
  padding: var(--blng-content-padding-block) var(--blng-content-padding-side);
  padding-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-content: space-around;
  text-align: center;
}

/* Info chunk */
#blng-site-content .main-content .blng-info .blng-chunk {
  flex: 1 1 0px;
  min-width: 180px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-text:after {
  content: '';
  margin: 0;
}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-icon {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: 400 2.35em/1 dashicons;
  padding: 10px;
  border: 2px solid var(--blng-pe-azure-3c);
  border-radius: 50%;
  color: var(--blng-pe-azure-3c);

}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-text {
  margin: 5px 0;
  font-size: 0.87em;
  color: var(--blng-pe-azure-3c);
}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-value {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: normal;
}

#blng-site-content .main-content .blng-info .blng-chunk .blng-chunk-value a {
  text-decoration: underline;
}

/**
 * 3.3.6 - Content
 */
/* Description */
#blng-site-content .main-content .blng-description {
  padding: var(--blng-content-padding-block) var(--blng-content-padding-side);
}

#blng-site-content .main-content .blng-description > *:first-child {
  margin-top: 0;
}

#blng-site-content .main-content .no-info .blng-description {
  padding-top: 0;
}

/* Comments */
#blng-site-content .main-content #blng-comments {
  width: 100%;
  padding: var(--blng-content-padding-block) var(--blng-content-padding-side);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Author */
.author #blng-author-img {
  float: left;
  padding: 0 var(--blng-content-padding-side);
}

.author #blng-author-img img {
  border: 4px solid var(--blng-pe-azure-3c);
  border-radius: 50%;
}

.author h2#blng-author-post-count {
  margin: 0 !important;
  padding: var(--blng-content-padding-block) var(--blng-content-padding-side);
}

.author #blng-description {
  max-height: 200px;
  overflow: auto;
}

/**
 * 3.3.7 - Media Queries
 */
@media screen and (max-width: 1023px) {

}

@media screen and (max-width: 768px) {
  #blng-site-content .main-content .blng-info {
    background-color: var(--blng-pe-azure-3g);
  }

  #blng-site-content .main-content .blng-info .blng-chunk {
    flex-basis: 50%;
    min-width: 140px;
  }
}