/* As a means for reducing the amount of styles that get overridden,
    margins and paddings for elements are set in the elements file,
    rather than set to -0- in a reset.
*/
/* Box sizing rules */
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,300i");
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Set core body defaults */
body {
  margin: 0;
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Anchor elements without a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Removes the weird gap that exists on images */
img {
  vertical-align: middle;
}

/* Responsive images, unless a width has been specified */
img:not([width]) {
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove indent */
blockquote {
  margin-left: 0;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fonts */
/* COLORS */
/* TYPOGRAPHY */
/* BREAKPOINTS */
body {
  color: #eef6ff;
  background: #4e4e4e;
}

ul {
  padding-left: 40px;
}

p {
  word-spacing: .05em;
}

[hidden] {
  display: none !important;
}

article > * + *:not(li),
.e-content > * + *:not(li) {
  margin-top: 1em;
}

html {
  font-family: Georgia, serif;
  font-weight: 400;
  font-display: optional;
}

body {
  font-size: 1rem;
}

@media screen and (min-width: 60rem) {
  body {
    font-size: 1.125rem;
  }
}

a, a:visited {
  color: #b4b4b4;
}

a:hover, a:active, a:focus {
  color: #eef6ff;
}

sup {
  font-size: .75rem;
}

.direct-link {
  padding: 0 1.25rem;
}

.direct-link, .direct-link:visited {
  color: transparent;
}

:hover > .direct-link,
:focus > .direct-link {
  color: #b4b4b4;
}

.direct-link:hover, .direct-link:active, .direct-link:focus {
  color: #eef6ff;
}

/* Post Tags */
[rel="tag"] {
  display: inline-block;
  font-family: Georgia, serif;
  font-size: .625rem;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: .5em;
  padding: 0 .5em;
  line-height: 2em;
  background-color: #90253c;
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: .25em;
}

[rel="tag"] + [rel="tag"] {
  margin-left: .5em;
}

[rel="tag"], [rel="tag"]:visited {
  color: #b4b4b4;
}

[rel="tag"]:hover {
  border: 1px solid #b4b4b4;
  background-color: #b4b4b4;
  color: #90253c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", Verdana, Helvetica, Arial, sans-serif;
  letter-spacing: -0.03125em;
}

h2,
h2:first-child,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin-top: 1.5rem;
}

h1 {
  font-variant: small-caps;
  font-size: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1.5rem;
  display: flex;
}

p {
  font-weight: 300;
  letter-spacing: .0625rem;
}

blockquote {
  border-left: ridge 15px rgba(238, 246, 255, 0.5);
  border-top: ridge 7.5px rgba(238, 246, 255, 0.5);
  background-color: rgba(180, 180, 180, 0.3);
  padding: 1em;
}

.content li:not(:first-child) {
  margin-top: .5em;
}

/* Base Layout */
.o-base-layout {
  display: grid;
  gap: 1.25rem;
}

@media only screen and (min-width: 28.125rem) {
  .o-base-layout {
    grid-template-columns: 1.25rem minmax(min-content, 150px) repeat(6, minman(300px, 1fr)) 1.25rem;
    grid-template-areas: ". nav main main main main main main ." ". nav footer footer footer footer footer footer .";
  }
}

nav {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}

.landing main {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(6, 1fr);
}

.landing h1 {
  grid-column: span 6;
}

/* Article Page */
.article article {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr) repeat(2, 1fr);
  grid-template-rows: max-content 1fr max-content;
}

.article h1,
.article .content,
.article article > nav {
  grid-column: span 4;
}

.article .meta {
  grid-column: 5 / span 2;
  grid-row: 2;
}

.visible-medium {
  display: none;
}

@media screen and (min-width: 28.125rem) {
  .visible-medium {
    display: inline;
  }
}

.c-card {
  grid-column: span 2;
  gap: 1rem;
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  border: solid 1px #b4b4b4;
  padding: 10px;
}

.c-card h2 {
  margin: 0;
}

.c-card p {
  margin: 0;
}

/* Site Navigation */
.c-site-nav {
  display: grid;
  grid-template-rows: max-content 1fr;
  font-family: "Montserrat", Verdana, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

.c-site-nav em {
  font-style: normal;
}

.c-site-nav ul {
  padding-left: 0;
}

.c-site-nav li {
  list-style: none;
}

figure {
  margin-bottom: 2em;
  text-align: center;
}

figure img {
  display: block;
}

figcaption {
  font-size: smaller;
  font-style: italic;
  margin-top: .5rem;
}

footer {
  padding-bottom: 1.5em;
}

footer small {
  text-align: center;
}

footer a {
  font-size: .833rem;
  padding: 0 1em;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  justify-content: center;
}

footer ul li {
  list-style-type: none;
  margin-left: -0.25rem;
}

footer ul li:before {
  /* https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ */
  /* add zero-width space trigging VoiceOver to announce the list items #accessibility */
  content: "\200B";
}

footer li {
  display: inline-block;
}

footer li:before {
  margin-left: -.3125rem;
}

footer li + li a {
  border-left: solid 1px #b4b4b4;
}

footer .p-name {
  margin-right: 1em;
}

/* Contact Form  -- Currently not in use */
input,
textarea,
button {
  padding: 0.625rem;
  font-size: 1rem;
  font-family: "Montserrat", Verdana, Helvetica, Arial, sans-serif;
}

input,
textarea {
  border: 1px solid black;
  margin-top: 0;
  margin-bottom: 1em;
  width: 100%;
}

button {
  border: 1px solid #b4b4b4;
  background-color: #b4b4b4;
  color: #90253c;
  cursor: pointer;
}

.fields {
  display: grid;
  padding: 0 0.625rem;
}

.fields li {
  list-style-type: none;
}

.field__buttons {
  display: flex;
  justify-content: center;
}

.meta,
.meta date {
  font-family: "Montserrat", Verdana, Helvetica, Arial, sans-serif;
  font-size: .875em;
}

.meta ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-top: 1rem;
}

.meta ul li {
  list-style-type: none;
  margin-left: -0.25rem;
}

.meta ul li:before {
  /* https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/ */
  /* add zero-width space trigging VoiceOver to announce the list items #accessibility */
  content: "\200B";
}

.meta li {
  margin-right: .625rem;
}

.u-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/*
=================
Syntax Highlihting
=================
*/
/**
 * atom-dark theme for `prism.js`
 * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
 * @author Joe Gibson (@gibsjose)
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #c5c8c6;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: "Source Code Pro", Monaco, Menlo, Courier, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #1d1f21;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7C7C7C;
}

.token.punctuation {
  color: #c5c8c6;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.keyword,
.token.tag {
  color: #96CBFE;
}

.token.class-name {
  color: #FFFFB6;
  text-decoration: underline;
}

.token.boolean,
.token.constant {
  color: #99CC99;
}

.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.number {
  color: #FF73FD;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #A8FF60;
}

.token.variable {
  color: #C6C5FE;
}

.token.operator {
  color: #EDEDED;
}

.token.entity {
  color: #FFFFB6;
  /* text-decoration: underline; */
}

.token.url {
  color: #96CBFE;
}

.language-css .token.string,
.style .token.string {
  color: #87C38A;
}

.token.atrule,
.token.attr-value {
  color: #F9EE98;
}

.token.function {
  color: #DAD085;
}

.token.regex {
  color: #E9C062;
}

.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

:not(pre) > code,
pre {
  font-size: .875em;
}

:not(pre) > code {
  background-color: #b4b4b4;
  color: #4e4e4e;
  padding: 1px 4px;
  border-radius: 3px;
}

pre {
  margin: 1.5em 0;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
}

pre * {
  margin: 0;
}

pre code {
  overflow-wrap: break-word;
}

/* REMINDER:  Use more n + n selectors. reduce bloat
created by undoing something with :first/last-child */
/*
================
TODO
================

Handle direct-link adding large space after
Ex: heading http://localhost:8080/posts/new-approach-new-site/
*/

/*# sourceMappingURL=enhanced.css.map */