@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

h1,
h2,
h3 {
  text-wrap: balance;
}

.post-shadow {
  --color: #f6c959;
  --space: 10px;
  border: 4px solid black;
  box-shadow: var(--space) var(--space) 0 -4px var(--color),
    var(--space) var(--space) 0 0 black;
}

.button-shadow {
  border: 2px solid black;
  box-shadow: 4px 4px 0 0 black;
}
.advice-shadow {
  border: 2px solid black;
  box-shadow: 4px 4px 0 0 black;
}

.kg-card,
.prose iframe,
.prose video {
  @apply mb-4;
  @apply mx-auto;
}

.kg-card.kg-embed-card {
  @apply flex;
  @apply flex-col;
  @apply items-center;
}

.kg-bookmark-container {
  @apply border border-gray-200 rounded-md overflow-hidden;
  @apply flex flex-nowrap;
  @apply no-underline !important;
}

.kg-bookmark-content {
  @apply flex-initial w-2/3;
  @apply px-4 py-2;
}

.kg-bookmark-title {
  @apply font-semibold;
  @apply line-clamp-2;
}

.kg-bookmark-description {
  @apply mb-4;
  @apply line-clamp-4;
  @apply text-gray-800;
}

.kg-bookmark-metadata {
  @apply text-gray-500;
  @apply flex flex-row flex-nowrap items-center;
}
.kg-bookmark-metadata img {
  @apply w-4 h-4;
  @apply m-0 mr-2;
}

.kg-bookmark-thumbnail {
  @apply flex-initial w-1/3 ml-2;
  @apply overflow-hidden;
}
.kg-bookmark-thumbnail img {
  @apply w-full h-full m-0 object-cover;
}

.kg-width-wide img {
  max-width: 85vw;
}

.kg-width-full img {
  max-width: 100vw;
}

/* Subscription form */
form[data-members-form].loading {
  opacity: 0;
  transition-property: all;
  transition-duration: 0.5s;
}

form[data-members-form].success {
  @apply hidden;
}

article .published {
  color: var(--ghost-accent-color);
}

.cover-image {
  @apply overflow-hidden;
  @apply mb-10;

  @apply -mx-5 md:-mx-0 lg:-mx-0;
}
.cover-image img {
  @apply w-full;
  @apply object-contain;
  @apply object-center;
}

.prose a {
  color: var(--ghost-accent-color);
  @apply no-underline;
}
.prose strong a {
  @apply font-bold;
}

.prose img {
  @apply mx-auto;
}

.prose mark {
  background-color: #feffe3;
}

.prose code:before,
.prose code:after {
  content: none;
}

.prose blockquote p:first-of-type::before,
.prose blockquote p:last-of-type::after {
  content: none;
}

/* Pagination */

nav.pagination a {
  color: var(--ghost-accent-color);
}

.pagination .older-posts,
.pagination .newer-posts {
  @apply text-blue-500;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf")
    format("ttf");
  font-weight: 400;
  font-style: italic;
}