/* Custom styles for Funpy Blog using Pico.css and TinyMCE compatibility */


@font-face {
  font-family: "NotePaper";
  src: url('../fonts/note-paper/NotePaper-regular.otf') format('opentype');
}
@font-face {
  font-family: "MetalMania";
  src: url('../fonts/metal-mania/MetalMania-Regular.ttf') format('truetype');
}

/* REQUIRES letter-spacing: .3rem; to be easily readable */
@font-face {
  font-family: "GreenFuz";
  src: url('../fonts/green-fuz/GreenFuz.otf') format('opentype');
}

@font-face {
  font-family: "Yatsurano Western";
  src: url('../fonts/yatsurano-western/gomarice_yatsurano_western.ttf') format('truetype');
}


/* keep */
@font-face {
  font-family: "AvQest";
  src: url('../fonts/avqest/AvQest.ttf') format('truetype');
}

/* Better with letter-spacing: 2px; */
@font-face {
  font-family: "Special Elite";
  src: url('../fonts/special-elite/SpecialElite.ttf') format('truetype');
}

/* keep */
@font-face {
  font-family: "Mystery Quest";
  src: url('../fonts/mystery-quest/MysteryQuest-Regular.ttf') format('truetype');
}






/* Ensure TinyMCE content fits Pico's look */
.tox .tox-edit-area__iframe {
  border-radius: 0.5rem;
}

.tox .tox-statusbar {
  background: var(--pico-background);
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-border-color);
}

.tox .tox-toolbar {
  background: var(--pico-background);
  border-bottom: 1px solid var(--pico-border-color);
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Article styling */
article {
  padding: 1.5rem 1rem;
  background: var(--pico-card-background);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Tags styling */
footer p {
  font-size: 0.9em;
  color: var(--pico-muted-color);
}


/* Container for main content */
main.container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 0;
}

.delete-btn {
  color: rgba(210, 0, 0, 1.0);
}

/* Pagination nav centering and button spacing */
#internal-pagination,
#public-pagination,
#editor-pagination {
  display: flex;
  justify-content: center;   /* center horizontally */
  gap: 1em;                /* even space between buttons */
  margin-bottom: 2em;
}

#internal-pagination button,
#public-pagination button,
#editor-pagination button {
  min-width: 3.0em;
  margin: 0;
  /* Optional: add more style to match your theme */
}



/* Add spacing before the response form to separate it visually from the post */
.response-form-separator {
  margin-top: 2.5em;
}


/* Make card boundaries visible in both light and dark mode */
.card {
  border: 1.5px solid #444 !important;        /* dark neutral border */
  box-shadow: none !important;                /* remove shadow for clarity */
  margin-bottom: 3em !important;            /* extra space between cards */
  padding: 3em 2em 1em 2em;
}
@media (max-width: 700px) {
  .card {
    margin-bottom: 3.5em !important;
  }
}