@import 'fonts/fonts.css';

* {
  box-sizing: border-box;
}

/* This allows me to easily set elements which only appear on js/nojs.
   When javascript loads, it sets <html> to the class js instead of nojs. */
html.no-js .js { display: none }
html.js .no-js { display: none }

/* Smooth scrolling. */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Colour Normalisation. */
:root {
  --white-ish: #fbfcfd;
  --black-ish: #080808;

  --my-orange: #f9ba7a;

  --orange-100: #ffedd5;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-700: #c2410c;
  --orange-900: #7c2d12;

  --blue-50: #f0f9ff;
  --blue-100: #e0f2fe;
  --blue-300: #7dd3fc;
  --blue-400: #38bdf8;
  --blue-700: #0369a1;
  --blue-900: #0c4a6e;

  --deep-blue-50:  #eff6ff;
  --deep-blue-100: #dbeafe;
  --deep-blue-600: #2563eb;
  --deep-blue-700: #1d4ed8;

  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;

  --neutral-50:  #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;
  --neutral-950: #09090b;

  --light-border: 1px solid rgba(0,0,0,0.1);
  --medium-border: 1px solid rgba(0,0,0,0.3);
}


/* Type Normalisation. */
:root {
  font-size: 16px;

  --type-ratio: 1.2;
  --font-size: 1rem;

  --f-size-4: calc(var(--font-size) * var(--type-ratio));
  --f-size-3: calc(var(--f-size-4) * var(--type-ratio));
  --f-size-2: calc(var(--f-size-3) * var(--type-ratio));
  --f-size-1: calc(var(--f-size-2) * var(--type-ratio));

  --f-size-small: calc(var(--font-size) / var(--type-ratio));
}

h1 { font-size: var(--f-size-1) }
h2 { font-size: var(--f-size-2) }
h3 { font-size: var(--f-size-3) }
h4, .headline { font-size: var(--f-size-4) }

h1, h2, h3, h4, .headline {
  line-height: 1.2;
}

a {
  color: var(--deep-blue-600);
  text-decoration-color: var(--deep-blue-600);
  transition: all 0.125s ease-in-out;
}

a:not(.rsms-link, .card) {
  border-radius: 4px;
  padding-inline: 0.15em;
  margin-inline: -0.15em;
}

p {
  font-size: var(--font-size);
  line-height: 1.5;
  margin-block: 12px;
}

small, .text-small, figcaption { font-size: var(--f-size-small) }

/* inline code */
:not(pre) > code:not([class]) {
  font-size: 1.75ex;
  padding-inline: 0.15em;
  margin-inline: -0.05em;
  background: var(--neutral-200);
  border-radius: 3px;
}

code *, pre *, kbd * {
  font-family: var(--fira);
}


*::selection {
  color: var(--neutral-700);
  background: var(--rose-100);
}

a:not(.card, .rsms-link):hover {
  color: var(--deep-blue-700);
  background: var(--deep-blue-50);
}

a:not(.card, .rsms-link)::selection {
  color: var(--deep-blue-700);
  text-decoration-color: var(--orange-300);
}


/* Core Components. */
html {
  background: var(--neutral-900);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  /* dvh deals with mobile browser chrome. */
  min-height: 100dvh;
  margin: 0;

  background: var(--neutral-50);
  color: var(--neutral-900);
}

header, main {
  --gutter: 15px;

  width: min(70ch, calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block: 2.2rem;
}

header {
  margin-top: 20px;
}

footer {
  margin: 20px;
  text-align: center;
  margin-top: auto;
}

.card {
  border-top: solid 1px var(--neutral-700);
  padding: 0 8px;

  text-decoration: none;
  color: black;

  transition: all 0.5s ease-in-out;
}

.card:hover .headline {
  text-decoration: underline;
}

.end-of {
  width: fit-content;
  margin-inline: auto;
  color: var(--neutral-400);
  font-style: italic;
  text-align: center;
}

#post-header h1 {
  /* font-size: var(--f-size-3); */
  margin-top: 30px;
}

.subtitle {
  color: var(--neutral-700);
  margin-top: 25px;
  margin-bottom: 15px;
}

.author {
  color: var(--neutral-700);
  margin-block: 0;
}

.date {
  word-break: keep-all;
  color: var(--neutral-400);
}

article {
  display: flex;
  flex-direction: column;
  row-gap: 1.4rem;
}

article > p {
  margin-block: 0;
  margin-inline: 10px;
  padding-right: 20px;
}

article > :is(h2, h3, h4) {
  margin-bottom: 0;
  margin-top: 0.4em;
}

@media (max-width: 540px) {
  article > p {
    margin-inline: 0;
  }
}


blockquote {
  font-style: italic
}

blockquote em {
  font-style: normal;
}

.rsms-link {
  color: var(--neutral-400);
  text-decoration: none;

  margin-left: -4px;
  padding: 3px 4px;
  border-radius: 4px;
}

.rsms-link:hover {
  color: var(--neutral-900);
  background: var(--neutral-200);
}


ul, li { line-height: 1.5; }

#toc a:hover {
  text-decoration: none;
  color: var(--neutral)
}

#toc a:hover::after {
  text-decoration: none;
  content: ' →';
}

#toc ul {
  list-style: none;
  padding-inline-start: 2ch;
}


hr {
  border: none;
  border-top: 1px solid var(--neutral-300);
  width: calc(100% - var(--gutter) * 2 - 15px);
  margin-left: 10px;
}

pre {
  border: 1px solid var(--neutral-900);
  padding: 6px 12px;
  overflow-x: auto;
}

pre * {
  background: var(--neutral-50);
}

pre + pre {
  margin-top: -15px;
}

/* Scroll padding allowance above anchor links */
:target {
  scroll-margin-top: 1.5rem;
}

.hljs-comment {
  color: var(--neutral-500);
}

.tip::before {
  content: '⚡ ';
}

[data-emoji]::before {
  content: attr(data-emoji) ' ';
}


[href^="#fn-"] {
  background: #eff6ff;
  color: #172554;
  border-radius: 4px;
  padding-inline: 2px;
  text-decoration: none;
  white-space: nowrap;
  counter-increment: footnotes 1;
  position: static;
}

[href^="#fn-"]::after {
  display: inline;
  position: relative;
  float: right;
  clear: right;
  content: counter(footnotes) '';
  left: 25px;
  background: #eff6ff;
  padding-inline: 6px;
  border-radius: 4px;
  color: #3b82f6;
  font-size: 0.8rem;
  margin-top: 0.2rem;
  margin-inline: 0.1rem;
  transition: all 0.125s ease-in-out;
}

a[href^="#fn-"]:is(:hover, :focus-visible),
a[href^="#fn-"]:is(:hover, :focus-visible)::after {
  background: #ffedd5;
  color: #431407;
}