/* TODO: Future considerations.
   - Reset all margin and padding for * to 0.
   - Use the <abbr> tag for abbreviations.
   - Support footnotes or asides for notes sections.
   - Serve fonts from the local server rather than Google's API.
   - Support a "display title" in an [extra] section to allow for <br> elements
     or other manual control over title display. */

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono');

:root {
  /* Fonts and Text Sizes */
  --default-serif-font: "Noto Serif", serif;
  --default-sans-font: "Noto Sans", sans-serif;
  --default-mono-font: "Noto Sans Mono", monospace;
  --default-font-size: 14px;
  --header-font-size: 2.0em;
  /* Not sure I like this as the default, but it keeps inline code blocks from
          overlapping. */
  --default-line-height: 1.5;

  /* Gruvbox Dark Colors */
  --background-color: #1d2021;
  --foreground-color: #ebdbb2;
  --link-color: #458588;
  --muted-color: #928374;
  --primary-accent-color: #b16286;
  --secondary-accent-color: #689d6a;
  --code-background-color: #282828;
  --inline-code-background-color: #3c3836;
}

.accent {
  color: var(--primary-accent-color);
}

/* Required for sticky footer. */
html,
body {
  height: 100%;
}

body {
  display: flex;
  /* Required for sticky footer. */
  flex-direction: column;
  /* Required for sticky footer. */
  margin: 0;
  line-height: var(--default-line-height);
  font-size: var(--default-font-size);
  font-family: var(--default-serif-font);
  background-color: var(--background-color);
  color: var(--foreground-color);
  border-top: 0.5em solid var(--primary-accent-color);
}

main {
  flex: 1 0 auto;
  /* Required for sticky footer. */
}

/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
        to be inside a <main> with no id. I have a strong feeling I've done
        something wrong here. */
#content {
  max-width: 48em;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1.4em;
  padding-left: 1.4em;
  padding-bottom: 1.4em;
}

header {
  overflow: hidden;
  /* FIXME: This WILL cut off titles that are too long! */
  margin-top: 1.4em;
  margin-bottom: 1.4em;
  margin-left: 1em;
  margin-right: 1em;
}

header>div.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header>h1 {
  text-align: center;
  font-size: var(--header-font-size);
  font-family: var(--default-sans-font);
  padding-top: 2.8rem;
  margin-top: 0;
  margin-bottom: 0.7rem;
}

header .post-meta {
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.9em;
  margin-bottom: 0;
}

.post-meta time {
  // TODO: This color doesn't look great in with a light color scheme...
  color: var(--muted-color);
}

h2,
h3,
h4,
h5,
h6 {
  padding-top: 1.2rem;
  margin-bottom: 0.2rem;
}


p {
  padding-top: 0.4em;
  margin-bottom: 1em;
}

blockquote {
  /* Default text uses serif, so use sans-serif to differentiate quoted text. */
  font-family: var(--default-sans-font);
  font-style: italic;
  /* Indent blockquotes, but align the start with where text in code begins. */
  margin: 0 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-left: 3px solid var(--secondary-accent-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

/* ---- Anchor links --------------------------------------------------------*/

/* Add a # to the left of a subheading when it references an internal link... */
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
  content: "#";
  display: inline-block;
  width: 1.2rem;
  margin-left: -1.2rem;
  opacity: 0;
}

/* ... but only display the internal anchor link when hovered over. */
:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before {
  opacity: 1;
}

/* When internal links are linked directly, display with the accent color. */
:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before {
  opacity: 1;
  color: var(--primary-accent-color);
}

/* ---- Media ---------------------------------------------------------------*/

img.logo {
  width: 64px;
  height: 64px;
}

img,
video {
  /* Media should fill the width of its container if possible. */
  width: 100%;
  height: auto;
}

figure {
  /* Don't add margins to figures. */
  margin: 0;
}

figcaption {
  /* De-emphasize figure captions. */
  font-size: 0.85rem;
  color: var(--muted-color);
}

/* ---- Code blocks ---------------------------------------------------------*/

pre {
  display: block;
  padding: 0.25rem 1.25rem;
  font-size: 85%;
  border-left: 0.25rem solid var(--primary-accent-color);
}

code {
  padding: 0 0.4rem;
  // background-color: #3c3836;
  background-color: var(--inline-code-background-color);
  /* Inline code blocks look less aggresive with a little rounding. */
  border-radius: 2px;
}

pre,
code {
  overflow: auto;
  font-family: var(--default-mono-font);
}

/* Without this the <code> tag gains a little padding that offsets text by like
        2 pixels. Let's *not* do that. */
pre>code {
  padding: 0;
  background-color: var(--code-background-color);
  // Code inside a pre block doesn't need rounded borders.
  border-radius: unset;
}

/* ---- Tables --------------------------------------------------------------*/

table {
  /* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile.
       display: flex;
       justify-content: center;
       */
  display: block;
  overflow-x: auto;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-collapse: collapse;
}

/* Headers in a row (column scoped) get a colored bottom border. */
th[scope="col"] {
  padding-top: 0.4em;
  border-bottom: 3px solid var(--secondary-accent-color);
}

/* Headers in a column (row scoped) get a colored right border. */
th[scope="row"] {
  border-right: 3px solid var(--secondary-accent-color);
}

td {
  text-align: center;
  border: 1px solid var(--muted-color);
}

th,
td {
  vertical-align: bottom;
  padding-left: 0.4em;
  padding-right: 0.4em;
  border: 1px solid var(--muted-color);
}

/* ---- Footer, nav, and copyright ------------------------------------------*/

footer {
  border-top: 0.5em solid var(--primary-accent-color);
  text-align: center;
  /* FIXME: Using the code background color could look awkward if a post ends
          in a code snippet. */
  background-color: var(--code-background-color);
  padding: 1.4em;
  flex-shrink: 0;
  /* Required for sticky footer. */
}

footer a {
  color: var(--secondary-accent-color);
}

/* Give footer nav links some breathing room. */
footer>nav>a {
  // margin: 0 1.4em;
  margin: 0 0.4em;
}

/* FIXME: This could probably go away with global margin/padding adjustments. */
footer p {
  padding-top: 0;
}

footer p,
footer a {
  font-family: var(--default-sans-font);
  /* It doesn't seem as though Google fonts support direct usage of OpenType
          features like 'c2sc' and 'smcp'.
     
          FIXME: It's not clear why numerals don't seem to obey this property. */
  font-variant-caps: all-small-caps;
}

/* ---- Media Queries ------------------------------------------------------ */

@media(min-width: 427px) {
  :root {
    --default-font-size: 16px
  }
}

@media(min-width: 470px) {
  :root {
    --default-font-size: 17px;
  }

  /* Above this size, increase the header margins. Smaller sizes benefit from
          extra breathing room in the title. */
  header {
    margin-left: 2.8em;
    margin-right: 2.8em;
  }

  header>div.logo {
    flex-direction: row;
  }

  img.logo {
    margin-right: 0.8em;
  }
}

@media(min-width: 625px) {
  :root {
    --default-font-size: 18px;
  }
}

@media(min-width: 802px) {
  :root {
    --default-font-size: 19px;
  }
}

@media(min-width: 1003px) {
  :root {
    --default-font-size: 20px;
  }
}

@media(min-width: 1225px) {
  :root {
    --default-font-size: 21px;
  }

  /* On larger devices, give the anchor link some more space. */
  :where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
    width: 1.8rem;
    margin-left: -1.8rem;
  }
}

@media(min-width: 1496px) {
  :root {
    --default-font-size: 22px;
  }
}