/**
*  Publish Copenhagen theme, build on Foundation Theme by John Sundell
*  Copyright (c) Klaus Kneupner 2023
*  MIT license, see LICENSE file for details
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");

:root {
  --accent: #ea580c;
  --accent-light: #ff7e33;
  --filler: #e2e8f0;
  --background: #0f172a;
  --secondary: #94a3b8;
  --shadow: rgba(0, 0, 0, 0.4);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* GENERAL */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 112.5%;
}

body {
  font-family: Poppins, sans-serif;
  color: var(--filler);
  background-color: var(--background);
  line-height: 1.6;

  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--filler);
}

h2 {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
}

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

a:hover {
  color: var(--accent-light);
}

li {
  list-style: none;
}

img {
  margin-top: 0.75em;
  max-width: 100%;
  height: auto;
}

.img-small {
  width: 300px;
  max-width: 100%;
  margin: 1em auto;
}

.img-medium {
  width: 500px;
  max-width: 100%;
  margin: 1em auto;
}

.img-full {
  width: 100%;
  margin: 1em 0;
}

.img-std {
  width: 80%;
  max-width: 100%;
  margin: 1em auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

th {
  background-color: #111111;
  text-align: left;
  padding: 8px;
}

tr {
  border-bottom: 1px solid #2e2e2e;
}

tr:nth-child(even) {
  background-color: #070707;
}

td {
  padding: 8px;
}

/* The newest post, shown on the index rather than listed there. */
.featured-item {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(234, 88, 12, 0.25);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: 1.25em 1.5em;
  margin: 2em 0;
}

.featured-item__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25em;
}

.featured-item h2 {
  margin-top: 0;
  margin-bottom: 0.15em;
  font-size: 1.5rem;
}

.featured-item__date {
  font-size: 0.85rem;
  color: var(--secondary);
  margin-bottom: 0.75em;
}

.featured-item__more {
  display: inline-block;
  margin-top: 0.75em;
  font-weight: 600;
}

/* The `* { margin: 0 }` reset above strips paragraph spacing and nothing puts it
   back, so prose runs together. Scoped to article bodies: the cards and lists in
   the aside set their own spacing and should keep it. */
.content p {
  margin-bottom: 1em;
}

.content p:last-child {
  margin-bottom: 0;
}

/* Code blocks. Nothing styled `pre`/`code` before, so a fenced block rendered as
   bare monospace with no edges. */
pre {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(234, 88, 12, 0.25);
  border-radius: 10px;
  padding: 1em 1.25em;
  margin: 1.25em 0;
  overflow-x: auto;
  line-height: 1.5;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* Inline code only — a `code` inside `pre` inherits the block's own box. */
:not(pre) > code {
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

blockquote {
  background-color: #f7f7f7;
  box-shadow: rgba(94, 94, 94, 0.2) 0px 8px 24px;
  border: 1px solid rgba(234, 88, 12, 0.4);
  border-left: 10px solid var(--accent);
  padding: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  font-style: italic;
  text-align: center;
  color: #333;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em 0;
  width: 100%;
}

figcaption {
  align-self: center;
  width: 80%;
  font-size: 0.9em;
  font-style: italic;
  text-align: center;
  color: #999;
  margin-top: 0.5em;
  padding: 0.5em;
  background-color: #1a1a1a;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- */
/* Header */
header {
  background-color: #111;
  border-bottom: 1px solid rgba(123, 123, 123, 0.2);
  box-shadow: rgba(71, 71, 71, 0.2) 0px 8px 24px;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 10;
}

.header-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  padding-inline: 4em;
  padding-left: 45px;
}

.site-name {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 1em;
}

.site-name p {
  font-size: 3em;
  color: var(--accent);
  font-weight: bolder;
}

.site-name img {
  margin: 0;
  height: 50px;
  width: 50px;
}

.header-wrapper nav ul {
  display: flex;
  align-items: center;
  gap: 1.3em;
}

.header-wrapper nav ul li {
  margin: 0;
  list-style: none;
}

.header-wrapper nav ul li a {
  font-size: 1.125em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--filler);
  border-radius: 2px;
  background-color: #111;
  padding: 0.5em;
}

.header-wrapper nav ul li a.selected {
  background: rgb(234, 88, 12);
  background: linear-gradient(297deg,
      rgba(234, 88, 12, 1) 0%,
      rgba(255, 128, 0, 1) 100%);
  box-shadow: rgba(85, 85, 85, 0.2) 0px 8px 24px;
  border-radius: 2px;
  padding: 0.5em;
  color: white;
}

/* ---------------------------------------------------------------- */
/* INDEX WRAPPER */
.tag-wrapper,
.index-wrapper,
.section-wrapper,
.item-wrapper,
.page-wrapper {
  padding-top: 115px;
  padding-inline: 2rem;
  display: flex;
  justify-content: center;
  gap: 3rem;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.index-wrapper article,
.section-wrapper article,
.item-wrapper article,
.page-wrapper article {
  max-width: 850px;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Let a wide child overflow the 850px article without widening this flex
     item and shoving the aside. */
  min-width: 0;
}

.index-wrapper article p,
.section-wrapper article p {
  text-align: justify;
  text-justify: inter-cluster;
}

.content {
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}

.content li {
  margin-left: 1em;
  list-style: disc;
}

.content a {
  text-decoration: underline;
  color: var(--accent);
}

.content img,
.content img {
  border-radius: 10px;
  align-self: center;
  background-color: white;
}

.reading-time-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--secondary);
  margin-bottom: 2rem;
  font-weight: 500;
}

.reading-time-container .fa {
  color: var(--accent);
}

.content_logo {
  height: 100px;
  width: 100px;
}

.download-button img {
  box-shadow: rgba(104, 104, 104, 0.2) 0px 7px 29px 0px;
}

.download-button img {
  width: 15em;
}

/* ---------------------------------------------------------------- */
/* The tag list embedded in the index article. It shares the look of the
   standalone tags page but not `.tag-wrapper`'s page-level top padding, which
   only exists to clear the fixed header. */
.inline-tag-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 2em;
}

.tag-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-self: center;
}

.all-tags {
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.tag {
  background-color: var(--accent);
  border-radius: 4px;
  padding-inline: 0.5em;
}

.tag a {
  color: white;
  font-size: 14px;
}

/* ---------------------------------------------------------------- */
/* Site Nav*/
.side-content {
  top: 3em;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  gap: 1em;
}

.item-list,
.newsletter,
.toc-list,
.preview__article-details,
.user-feedback,
.contact-form {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(234, 88, 12, 0.2);
  box-shadow: 0 4px 20px var(--shadow);
  padding: 1.5rem;
  border-radius: 16px;
  transition: var(--transition);
}

.item-list:hover,
.newsletter:hover,
.toc-list:hover,
.contact-form:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  border-color: rgba(234, 88, 12, 0.4);
}

.item-list,
.newsletter,
.toc-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-align: center;
}

.aside-title {
  font-size: 23px;
  font-weight: bold;
  color: var(--accent);
}

.toc-list ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}

.toc-list ul li {
  padding: 0.25em;
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
  transition: background-color;
  transition-duration: 50ms;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin-left: 0;
}

.toc-list ul li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Level 2 items */
.toc-list ul li ul li {
  font-size: 12px;
  font-weight: lighter;
  background-color: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0.5em;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px;
  margin-left: 1.5em;
  margin-top: 0.25em;
  border-left: 3px solid var(--accent);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.toc-list ul li ul li:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Level 3 items */
.toc-list ul li ul li ul li {
  background-color: rgba(255, 255, 255, 0.1);
  margin-left: 2em;
  font-size: 11px;
  border-left: 2px solid rgba(234, 88, 12, 0.8);
}

.toc-list ul li ul li ul li:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.newsletter {
  padding-top: 0.25em;
}

.newsletter img {
  width: 100%;
  filter: brightness(0) invert(1);
  border-radius: 5px;
}

.newsletter a {
  background-color: var(--accent);
  color: white;
  width: 100%;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  border-radius: 5px;
}

.newsletter a:hover {
  background-color: rgba(234, 88, 12, 0.95);
}

.tag-list-title {
  font-size: 22px;
}

.preview__article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.tag-preview {
  border: 1px solid rgba(123, 123, 123, 0.1);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  background-color: var(--accent);
  padding-inline: 0.25em;
  border-radius: 4px;
  transition: scale;
  transition-duration: 50ms;
}

.tag-preview:hover {
  scale: 102%;
}

.tag-preview a {
  color: white;
  font-size: 14px;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--secondary);
}

.breadcrumbs a {
  color: var(--secondary);
  transition: var(--transition);
}

.breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: none;
}

.breadcrumb-home {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.breadcrumb-icon {
  height: 16px !important;
  width: 16px !important;
  margin: 0 !important;
}

.breadcrumb-separator {
  color: #475569;
  font-weight: 300;
}

/* ---------------------------------------------------------------- */

footer {
  margin-top: 2.25em;
  padding: 1em;
  background-color: #070707;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: var(--fillers);
}

footer div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}

footer .footer-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 2em;
}

.content_logo {
  width: 50px;
  height: 50px;
}

footer div nav {
  width: 100%;
  padding-inline: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125em;
  margin-bottom: 0.5em;
}

footer div nav ul {
  display: flex;
  justify-content: center;
  gap: 1em;
  width: 100%;
}

footer div nav ul img {
  height: 30px;
  width: 30px;
  filter: invert(96%) sepia(1%) saturate(44%) hue-rotate(354deg) brightness(118%) contrast(100%);
  margin: 0;
  transition: all;
  transition-duration: 0.25s;
}

footer div nav ul img:hover {
  transform: scale(105%);
}

footer div nav ul li {
  list-style-type: none;
  margin: 0;
}

footer div nav ul li a {
  display: flex;
  align-items: center;
  gap: 0.125em;
}

/* ---------------------------------------------------------------- */

.tagged-with__page {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tagged-with__page__wrapper {
  padding-top: 150px;
  display: flex;
  flex-direction: column;
  max-width: 700px;
  gap: 0.5em;
  padding-inline: 1em;
}

.tagged-with__page_header {
  display: flex;
  flex-direction: column-reverse;
}

.tagged-with__page_header a {
  text-decoration: underline;
}

.tagged-with__page_title {
  font-size: 25px;
}

.tagged-with__page__tag {
  background-color: var(--accent);
  padding-inline: 0.5em;
  margin-left: 0.25em;
  color: white;
  white-space: nowrap;
}

.tagged-with__page__previews {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  list-style-type: none;
}

.tagged-with__page__previews li div {
  list-style-type: none;
  background-color: #111;
  color: white;
  padding: 1em;
  border-radius: 10px;
}

.tagged-with__page__previews li div a {
  color: white;
  text-decoration: none;
  font-size: 23px;
  font-weight: bold;
}

/* ---------------------------------------------------------------- */

.user-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  margin-top: 1em;
  margin-bottom: 1em;
}

.user-feedback__header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.user-feedback img {
  width: 75px;
}

.user-feedback__header__titles {
  display: flex;
  flex-direction: column;
}

.user-feedback__title {
  font-size: 20px;
}

.user-feedback__subtitle {
  font-size: 12px;
  color: gray;
}

.user-feedback__description {
  max-width: 340px;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 15px;
}

.rating-factor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 340px;
  width: 100%;
}

.rating-factor__name {
  font-size: 13px;
  font-weight: bold;
  text-align: left;
}

.rating-factor__rating {
  display: flex;
  flex-direction: row-reverse;
}

.rating-factor__rating input {
  position: relative;
  width: 20px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  pointer-events: none;
  cursor: none;
}

.rating-factor__rating input::before {
  content: "\f005";
  position: absolute;
  font-size: 34px;
  font-family: fontAwesome;
  left: 4px;
  transition: 0.2s;
  color: rgba(255, 255, 255, 0.1);
}

.rating-factor__rating input:nth-child(2n + 1)::before {
  right: 4px;
  left: initial;
}

.rating-factor__rating input:checked~input::before,
.rating-factor__rating input:checked::before {
  color: #ea9c0c;
}

/* ---------------------------------------------------------------- */

.contact-form {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.contact-form__header h2 {
  margin: 0;
}

.contact-form__header p {
  text-align: left !important;
}

.contact-form p {
  font-weight: normal;
  font-size: 15px;
}

.contact-form__wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.contact-form__input-wrapper {
  border-bottom: 2px solid rgba(234, 88, 12, 0.8);
  padding-inline-start: 0.125em;
}

.contact-form__input-wrapper input,
.contact-form__input-wrapper textarea {
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: "Poppins";
  font-size: 16px;
  color: var(--filler);
}

.contact-form__input-wrapper input::placeholder,
.contact-form__input-wrapper textarea::placeholder {
  font-family: "Poppins";
  font-size: 16px;
}

.contact-form__input-wrapper textarea::-webkit-resizer {
  display: none;
}

.contact-form__submit-btn {
  padding: 0.5em;
  background-color: var(--accent);
  border-radius: 3px;
  outline: none;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: bold;
}

.contact-form__submit-btn:hover {
  cursor: pointer;
}

/* ---------------------------------------------------------------- */

@media only screen and (max-width: 1000px) {
  header {
    height: 130px;
  }

  .header-wrapper {
    flex-direction: column;
  }

  .header-wrapper nav ul li a {
    font-size: 12px;
  }

  .index-wrapper,
  .section-wrapper,
  .tagged-with__page__wrapper {
    padding-top: 150px;
    gap: 1em;
  }

  .index-wrapper,
  .section-wrapper {
    flex-direction: column-reverse;
  }

  .side-content {
    margin-bottom: 0;
  }

  .item-list,
  .newsletter {
    display: none;
  }

  .tag-wrapper .item-list {
    display: block;
  }

  /* Hiding .item-list on a phone is right for the aside, where it duplicates
     navigation — but the index carries its content list inside the article, and
     without it the front page is a heading and nothing else. bright.css dropped
     this hiding rule altogether. */
  .index-wrapper article .item-list {
    display: block;
  }
}

/* ---------------------------------------------------------------- */

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

  .section-wrapper article,
  .index-wrapper article {
    width: 100%;
  }

  .index-wrapper,
  .section-wrapper,
  .tagged-with__page__wrapper {
    padding-inline: 2em;
    padding-top: 100px;
  }

  .section-wrapper article img,
  .index-wrapper article img {
    width: 100%;
  }

  .download-button img {
    width: 150px !important;
  }

  header {
    height: 85px;
  }

  .header-wrapper {
    gap: 0.125em;
  }

  .header-wrapper nav ul {
    gap: 0.75em;
  }

  .header-wrapper nav ul li a {
    font-size: 12px;
  }

  .site-name {
    font-size: 0.5em;
    line-height: 1.15em;
  }

  .site-name img {
    width: 30px;
    height: 30px;
  }

  .side-content ul p {
    font-size: 10px;
  }

  .toc-list ul li ul li p {
    font-weight: normal;
    font-size: 9px;
  }

  h1 {
    font-size: 30px;
    line-height: 35px;
  }

  h2 {
    font-size: 23px;
  }

  p {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* The site name and the header height.

   This theme's header is `position: fixed` at a hard height, and every page
   wrapper carries a matching `padding-top` to clear it. That works for a
   one-word site name. "Black Book of Thoughts" is four, so from roughly 1300px
   down the name wraps and the header — unable to grow — spills its second line
   over the article beneath it.

   Going `sticky` keeps the header pinned to the top of the viewport while
   leaving it in the flow, so its real height always pushes the content down,
   whatever the name does at whatever width. The wrappers' `padding-top` then has
   nothing left to compensate for and goes back to ordinary spacing. */
header {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 100px;
}

.header-wrapper {
  min-height: inherit;
}

/* Scaled with the viewport so the name stays beside the nav for as long as it
   fits, rather than jumping to two lines at one breakpoint. */
.site-name p {
  font-size: clamp(1.35rem, 3vw, 3em);
}

.tag-wrapper,
.index-wrapper,
.section-wrapper,
.item-wrapper,
.page-wrapper,
.tagged-with__page__wrapper {
  padding-top: 2.5rem;
}

@media only screen and (max-width: 1000px) {
  header {
    min-height: 0;
  }

  .header-wrapper {
    padding: 0.75em 1.5rem;
    gap: 0.5em;
  }

  .site-name {
    /* A `line-height` in em resolves against .site-name's own font size, which
       is a third of the size of the text that inherits it — wrapped lines land
       on top of each other. Unitless keeps it proportional to each line. */
    line-height: 1.2;
    text-align: center;
  }

  .tag-wrapper,
  .index-wrapper,
  .section-wrapper,
  .item-wrapper,
  .page-wrapper,
  .tagged-with__page__wrapper {
    padding-top: 2rem;
  }

  /* The theme's responsive rules only ever named .index-wrapper and
     .section-wrapper, so item and page layouts kept their two-column shape on a
     phone and squeezed the article into half a screen. They stack plain
     `column` rather than `column-reverse`: on an article the aside is tags and
     a newsletter box, which belong after the text, not ahead of it. */
  .item-wrapper,
  .page-wrapper {
    flex-direction: column;
    gap: 1em;
  }

  .item-wrapper article,
  .page-wrapper article,
  .item-wrapper .side-content,
  .page-wrapper .side-content {
    max-width: 100%;
    width: 100%;
  }
}