/* v0.0.3 */

/* ==========================================================================
   Theme color variables
   ========================================================================== */

:root {
  --theme-primary-color: #990000;
  --theme-primary-text-color: #222;
  --theme-primary-background-color: #FFF;
  --theme-primary-accent-color: #515151;
  --theme-secondary-color: #EEE;
  --theme-secondary-text-color: #FFF;
  --theme-secondary-background-color: #990000;
  --theme-secondary-accent-color: #DDD;
  --theme-tertiary-color: #DDD;
  --theme-tertiary-text-color: #990000;
  --theme-tertiary-background-color: #FFF;
  --theme-tertiary-accent-color: #515151;
  --theme-highlight-text: #b3d4fc;
  color-scheme: light;
}

/* Dark Color Scheme (System Preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --theme-primary-color: #ff3333;
    --theme-primary-text-color: #FFF;
    --theme-primary-background-color: #222;
    --theme-primary-accent-color: #DDD;
    --theme-secondary-color: #111;
    --theme-secondary-text-color: #FFF;
    --theme-secondary-background-color: #5f1111;
    --theme-secondary-accent-color: #515151;
    --theme-tertiary-color: #DDD;
    --theme-tertiary-text-color: #FFF;
    --theme-tertiary-background-color: #222;
    --theme-tertiary-accent-color: #515151;
    --theme-highlight-text: #526377;
    color-scheme: dark;
  }
}

/* Fonts */
/* cyrillic-ext */
@font-face {
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PTSerifCaptionLatin.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  font-display: swap;
}
/* cyrillic */
@font-face {
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PTSerifCaptionCyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  font-display: swap;
}
/* latin-ext */
@font-face {
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PTSerifCaptionLatinExt.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
/* latin */
@font-face {
  font-family: 'PT Serif Caption';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/PTSerifCaptionLatin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: var(--theme-primary-text-color);
  background: var(--theme-primary-background-color);
  font-size: 1em;
  line-height: 1.4;
}

/*
  * Remove text-shadow in selection highlight:
  * https://twitter.com/miketaylr/status/12228805301
  *
  * Customize the background color to match your design.
  */

::-moz-selection {
  background: var(--theme-highlight-text);
  text-shadow: none;
}

::selection {
  background: var(--theme-highlight-text);
  text-shadow: none;
}

/*
  * A better looking default horizontal rule
  */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--theme-primary-accent-color);
  margin: 1em 0;
  padding: 0;
}

/*
  * Remove the gap between audio, canvas, iframes,
  * images, videos and the bottom of their containers:
  * https://github.com/h5bp/html5-boilerplate/issues/440
  */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
  * Remove default fieldset styles.
  */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
  * Allow only vertical resizing of textareas.
  */

textarea {
  resize: vertical;
}

/* ==========================================================================
  Author's custom styles
  ========================================================================== */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  color: var(--theme-primary-text-color);
  background: var(--theme-primary-background-color);
  font-family: 'PT Serif Caption', serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.siteheader {
  background: var(--theme-secondary-color);
  border-bottom: 0.5em solid var(--theme-secondary-accent-color);
  padding: 2em;
  display: flex;
  align-items: center;
  flex-flow: row wrap;
}

/* Look at the star, see how it doesn't shine so bright, it's not yellow */
.rawklogo {
  display: flex;
  justify-content: left;
  align-items: center;
  width: 25%;
  white-space: nowrap;
}

header h1 a {
  text-decoration: none;
}

.rawk {
  color: var(--theme-primary-accent-color);
  position: relative;
  top: -0.2em;
  left: 0.4em;
  letter-spacing: -0.1em;
  padding-right: 0.1em;
  z-index: 5;
  opacity: 0.8;
}

.star {
  color: var(--theme-primary-color);
  position: relative;
  top: 0.3em;
  left: -0.4em;
  letter-spacing: -0.1em;
  padding-right: 0.1em;
  z-index: 10;
  opacity: 0.8;
}

.therawkstar {
  position: relative;
  top: -1em;
  left: -2.5em;
  font-size: 0.8em;
  opacity: 0.2;
}

.point {
  position: absolute;
  top: -0.3em;
  left: -0.6em;
  border-right: 0.6em solid transparent;
  border-bottom: 1.4em solid var(--theme-primary-color);
  border-left: 0.6em solid transparent;
}
.therawkstar:before, .therawkstar:after {
  content: '';
  position: absolute;
  top: 0.9em;
  left: -2em;
  border-right: 2em solid transparent;
  border-bottom: 1.4em solid var(--theme-primary-color);
  border-left: 2em solid transparent;
  transform: rotate(-35deg);
}

.therawkstar:after {
  transform: rotate(35deg);
}
/* / THIS IS THE END (of the rawkstar) */

/* main menu and search bar */
#sitemenu,
#searchbar {
  width: 75%;
  padding:0;
}

#sitemenu ul, #searchbar div {
  display: flex;
  flex-flow: row wrap;
  justify-content:right;
  align-items: center;
  padding-inline-start: 0;
}

#sitemenu ul li {
  list-style: none;
  border-right: 0.1em solid var(--theme-secondary-accent-color);
  border-left: 0.1em solid var(--theme-secondary-accent-color);
  margin: 0.25em;
  line-height: 2em;
}

#sitemenu ul li a {
  background:
    linear-gradient(to bottom, var(--theme-secondary-background-color) 0%,
      var(--theme-secondary-background-color) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  color: var(--theme-tertiary-text-color);
  text-decoration: none;
  transition: background-size 0.2s;
  padding: 0.5em;
}

#sitemenu ul li a:hover,
#sitemenu ul li a.active,
.searchbarclose button:hover {
  background-size: 4px 50px;
  color: var(--theme-secondary-text-color);
}

#sitemenu ul li a:active {
  background-size: 4px 50px;
  color: var(--theme-tertiary-text-color);
  background: var(--theme-tertiary-background-color);
}

#sitemenu ul li a svg,
.searchbarclose button svg {
  fill: var(--theme-tertiary-text-color);
}

#sitemenu ul li a:hover svg,
#sitemenu ul li a:active svg,
.searchbarclose button:hover svg,
.searchbarclose button:active svg {
  fill: var(--theme-secondary-text-color);
}

#searchbar input {
  width: 100%;
  border: none;
  border-bottom: 0.25em solid var(--theme-secondary-background-color);
  color: var(--theme-primary-text-color);
  background: transparent;
  padding: 0.5em;
  font-size: 1.1em;
}

#searchbar button {
  width: 100%;
  border: none;
  padding: 0.5em;
  cursor: pointer;
}

#searchbar .searchbarbutton button {
  background: var(--theme-secondary-background-color);
}

#searchbar .searchbarclose button {
  background: var(--theme-tertiary-accent-color);
}

#searchbar button svg {
  fill: var(--theme-secondary-text-color);
}

#searchbar .searchbarinput {
  flex-grow: 0.5;
}

/* sub menu */
#submenu {
  width: 100%;
  grid-area: submenu;
}

#submenu ul {
  display: flex;
  flex-flow: row wrap;
  justify-content:center;
  align-items: center;
  padding-inline-start: 0;
}

#submenu ul li {
  list-style: none;
  border-right: 0.1em solid var(--theme-secondary-accent-color);
  border-left: 0.1em solid var(--theme-secondary-accent-color);
  margin: 0.25em;
  line-height: 2em;
}

#submenu ul li a {
  background:
    linear-gradient(to bottom, var(--theme-tertiary-accent-color) 0%,
      var(--theme-tertiary-accent-color) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  color: var(--theme-primary-text-color);
  text-decoration: none;
  transition: background-size 0.2s;
  padding: 0.5em;
}

#submenu ul li a:hover,
#submenu ul li a.active {
  background-size: 4px 50px;
  color: var(--theme-secondary-text-color);
}

#submenu ul li a:active {
  background-size: 4px 50px;
  color: var(--theme-secondary-text-color);
  background: var(--theme-tertiary-accent-color);
}

/* footer menu */
#sitefooter {
  background: var(--theme-secondary-background-color);
  color: var(--theme-secondary-text-color);
  border-top: 0.5em solid var(--theme-secondary-accent-color);
  margin-top: auto;
  padding: 0 1em;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row wrap;
}

#sitefooter ul {
  display: flex;
  flex-flow: row wrap;
  justify-content:center;
  align-items: center;
  padding-inline-start: 0;
}

#sitefooter ul li {
  list-style: none;
  line-height: 2em;
}

#sitefooter ul li:before {
  content: "|";
}

#sitefooter ul li:first-child,
#sitefooter ul li:first-child:before {
  content: "";
}

#sitefooter ul li a {
  color: var(--theme-secondary-text-color);
  text-decoration: none;
  padding: 0.5em;
}

#sitefooter ul li a:hover,
#sitefooter ul li a:active,
#sitefooter ul li a.active {
  background-size: 4px 50px;
  color: var(--theme-secondary-background-color);
  background: var(--theme-secondary-text-color);
}

.highlighter {
    background: #ffb7007e;
    padding: 0.2em;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
  * Extends the .visually-hidden class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
  * Hide visually and from screen readers, but maintain layout
  */

.invisible {
  visibility: hidden;
}

/*
  * Clearfix: contain floats
  *
  * The use of `table` rather than `block` is only necessary if using
  * `::before` to contain the top-margins of child elements.
  */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   Media Queries for Responsive Design
   ========================================================================== */

.sitecontent.home .features {
  grid-area: features;
}

.sitecontent.home .blog {
  grid-area: blog;
}

.sitecontent.home .reviews {
  grid-area: reviews;
}

.sitecontent.home .sidebar {
  grid-area: sidebar;
}

.sitecontent.home .minireviews {
  grid-area: minireviews;
}

.sitecontent.home .features,
.sitecontent.home .blog,
.sitecontent.home .reviews,
.sitecontent.home .sidebar,
.sitecontent.home .minireviews {
  border: 1px solid var(--tertiary-theme-background);
  padding: 0 1em;
  background: var(--secondary-theme-background);
}

.sitecontent.home {
  display: grid;
  grid-template-areas:
    'features features features features blog blog blog blog sidebar sidebar'
    'reviews reviews reviews reviews reviews reviews minireviews minireviews sidebar sidebar';
  grid-gap: 1em;
  padding: 1em;
}

.sitecontent.about,
.sitecontent.blog,
.sitecontent.contact,
.sitecontent.err404,
.sitecontent.features,
.sitecontent.podcasts,
.sitecontent.search {
  display: grid;
  grid-template-areas:
    'content content content content content content content content sidebar sidebar';
  grid-gap: 1em;
  padding: 1em;
}

.sitecontent.news,
.sitecontent.reviews {
  display: grid;
  grid-template-areas:
    'submenu submenu submenu submenu submenu submenu submenu submenu sidebar sidebar'
    'content content content content content content content content sidebar sidebar';
  grid-gap: 1em;
  padding: 1em;
}

.sitecontent .content {
  grid-area: content;
  border: 1px solid var(--tertiary-theme-background);
  padding: 0 1em;
  background: var(--secondary-theme-background);
}

.sitecontent .sidebar {
  grid-area: sidebar;
  border: 1px solid var(--tertiary-theme-background);
  padding: 0 1em;
  background: var(--secondary-theme-background);
}

@media all and (max-width: 992px) {

  .sitecontent.home {
    display: grid;
    grid-template-areas:
      'features features features features features features features sidebar sidebar sidebar'
      'blog blog blog blog blog blog blog sidebar sidebar sidebar'
      'reviews reviews reviews reviews minireviews minireviews  minireviews sidebar sidebar sidebar';
    grid-gap: 1em;
  }

  .sitecontent.about,
  .sitecontent.blog,
  .sitecontent.contact,
  .sitecontent.err404,
  .sitecontent.features,
  .sitecontent.podcasts,
  .sitecontent.search {
    display: grid;
    grid-template-areas:
      'content content content content content content content sidebar sidebar sidebar';
    grid-gap: 1em;
  }

  .sitecontent.news,
  .sitecontent.reviews {
    display: grid;
    grid-template-areas:
      'submenu submenu submenu submenu submenu submenu submenu sidebar sidebar sidebar'
      'content content content content content content content sidebar sidebar sidebar';
    grid-gap: 1em;
  }
}

@media all and (max-width: 768px) {

  /* home page */
  .sitecontent.home {
    display: grid;
    grid-template-areas:
      'features features features features features features sidebar sidebar sidebar sidebar'
      'blog blog blog blog blog blog sidebar sidebar sidebar sidebar'
      'reviews reviews reviews reviews reviews reviews sidebar sidebar sidebar sidebar'
      'minireviews minireviews minireviews minireviews minireviews minireviews sidebar sidebar sidebar sidebar';
    grid-gap: 1em;
  }

  .sitecontent.about,
  .sitecontent.blog,
  .sitecontent.contact,
  .sitecontent.err404,
  .sitecontent.features,
  .sitecontent.podcasts,
  .sitecontent.search {
    display: grid;
    grid-template-areas:
      'content content content content content content sidebar sidebar sidebar sidebar';
    grid-gap: 1em;
  }

  .sitecontent.news,
  .sitecontent.reviews {
    display: grid;
    grid-template-areas:
      'submenu submenu submenu submenu submenu submenu sidebar sidebar sidebar sidebar'
      'content content content content content content sidebar sidebar sidebar sidebar';
    grid-gap: 1em;
  }
  #sitemenu,
  #searchbar,
  #sitefooter {
    width: 100%;
  }
  #sitemenu ul,
  #searchbar div,
  #sitefooter ul {
    flex-flow: row wrap;
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

@media all and (max-width: 576px) {

  .sitecontent.home {
    display: grid;
    grid-template-areas:
      'features'
      'blog'
      'reviews'
      'minireviews'
      'sidebar';
    grid-gap: 1em;
  }

  .sitecontent.about,
  .sitecontent.blog,
  .sitecontent.contact,
  .sitecontent.err404,
  .sitecontent.features,
  .sitecontent.podcasts,
  .sitecontent.search {
    display: grid;
    grid-template-areas:
      'content'
      'sidebar';
    grid-gap: 1em;
  }

  .sitecontent.news,
  .sitecontent.reviews {
    display: grid;
    grid-template-areas:
      'submenu'
      'content'
      'sidebar';
    grid-gap: 1em;
  }

  .siteheader {
    padding: 1em;
  }
  .rawklogo {
    justify-content: center;
    width: 100%;
  }
  #sitemenu,
  #searchbar,
  #sitefooter {
    width: 100%;
  }
  #sitemenu ul,
  #searchbar div,
  #sitefooter ul {
    flex-flow: row wrap;
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================================
    Print styles.
    Inlined to avoid the additional HTTP request:
    https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */

@media print {

  *,
  *::before,
  *::after {
    background: var(--secondary-theme-color) !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
    * Don't show links that are fragment identifiers,
    * or use the `javascript:` pseudo protocol
    */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}