/* Import your favorite fonts here */
/* https://fonts.google.com/specimen/Kanit */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');


/* Customize Pico's styles by overriding CSS variables */
/* Find the full list here: */
/* https://picocss.com/docs/css-variables */

:root {
  /* Set the Google Font (Kanit in the example) as the primary font by default with backups */
  --pico-font-family: "Kanit", system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
  "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol", "Noto Color Emoji";
  
  --pico-border-radius: 0.75rem;
}

/* For a custom color scheme, visit https://picocss.com/docs/version-picker */

/* Minimal customizations to look ok */

/* Make the footer stick to the bottom */
footer {
  margin-top: auto;
  opacity: 50%;
  text-align: center;
}

/* Arrange the content of every page in a column going down. Some of these styles are essential for the footer to work properly */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

/* Add some horizontal spacing to the navbar and give it a bg color */
nav {
  padding: 0 20px;
  background-color: var(--pico-card-border-color);
}

nav li [role=button] {
  border-radius: 25px;
  padding: 0.25em 0.6em;
}

/* Make the title of the site in the navbar bigger */
#nav-title {
  font-size: calc(var(--pico-font-size));
}

/* Change the size and bottom margin of the title on the homepage */
#site-title {
  font-size: calc(var(--pico-font-size) * 1.5);
  margin: calc(var(--pico-typography-spacing-vertical) * 1.5) 0;
}

/* Add margin, border, background, and rounding to the 3 links on the homepage */
 .homepage-link {
  margin: var(--pico-block-spacing-vertical) 0;
  padding: calc(var(--pico-block-spacing-horizontal) / 2) 0;
  text-align: center;
  background-color: var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  font-size: calc(var(--pico-font-size) * 1.5);
}

/* Style the border around the post summaries */
.homepage-content-container {
  border-color: var(--pico-card-border-color);
  border-width: 8px;
  border-style: solid;
  border-radius: calc(var(--pico-border-radius) + 0.25rem);
  padding: 0 var(--pico-block-spacing-vertical);
}

/* Change the spacing between the summary boxes and inside the summary boxes */
.summary {
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  margin: var(--pico-block-spacing-vertical) 0;
}
.summary-info {
  margin: 0 0;
}

/* This makes the "Next Page" and "Previous Page" anchor tags separated beneath each article */
#pagination-container {
  display: flex;
  justify-content: space-between;
}

/* Word count and date should have no spacing */
#article-info {
  margin-bottom: 1rem;
}

/* Give some space between the title and the navbar, but none between the title and the article info */
#article-title {
  font-size: calc(var(--pico-font-size) + 1rem);
  margin-top: var(--pico-typography-spacing-vertical);
  margin-bottom: 0;
}

/* Add some spacing between the search bar and the navbar */
#search {
  padding-top: 3rem;
}

/* Hide the "Clear Button" that comes with Pagefind */
.pagefind-ui__search-clear {
  display: none;
}

/* Round the corners of the search bar and fix the padding */
.pagefind-ui__search-input {
  padding-inline-start: 2.75rem;
  border-radius: 5rem !important;
}

.pagefind-ui__form {
  flex-direction: column;
  box-shadow: none !important;
}

.pagefind-ui__drawer {
  margin-top: var(--pico-block-spacing-vertical);
}

/* ---------------END DEFAULT STYLES--------------- */