/* set base colours */
:root {
  --color_main: #108c5e;
  --color_contrast: #86971b;
  --color_highlight: #0000af;
  --color_visited: #9138c9;
  --color_hover: #ff0000;
  --color_highlight2: #ffffff;
  --color_text: #000000;
}

/* fonts */
@font-face {
  font-family: hp150;
  src: url(WebPlus_HP_150_re.woff);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: wakuwaku;
  src: url(mini-wakuwaku-maru.otf);
  font-weight: normal;
  font-style: normal;
}

/* pages share these styles */
body {
  font-size: 14px;
  /* background-color: var(--color_contrast); */
  color: var(--color_text);
  /* font-family: hp150; */
  /* font-smooth: antialiased; */
  -webkit-font-smoothing: antialiased;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#container {
  flex: 1;
  margin: 0.5em;
}
.title {
  font-size: 1.2em;
  text-align: center;
  font-weight: bold;
  /* color: var(--color_contrast); */
  /* background-color: var(--color_main); */
}
.title span {
  display: inline-block;
  vertical-align: middle;
}
#navmenu {
  position: fixed;
  top: 0;
  right: 0;
  margin-right: 0.5em;
}
.navmenu-item {
  margin: auto;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 0 0.5em 0.25em;
  /* background-color: var(--color_main); */
  cursor: pointer;
  color: var(--color_main);
}
.navmenu-item a {
  color: var(--color_main);
  text-decoration: underline;
}
.navmenu-item a:visited {
  color: var(--color_visited);
}
.navmenu-item a:hover {
  color: var(--color_hover);
}

.navmenu-item span a {
  margin: auto;
  padding-top: 8px;
}

.navmenu-label {
  vertical-align: middle;
  margin-left: 1em;
}

.header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1em;
}

.external-links {
  text-align: left;
  margin-bottom: 0.5em;
}

.external-links a {
  text-decoration: underline;
  margin-right: 1em;
}

.site-title {
  font-weight: bold;
  text-align: left;
}

.site-title a {
  text-decoration: underline;
}

input[type="checkbox"] {
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
}

.navmenu-link {
  vertical-align: middle;
  margin: 0.25em;
}

/* Pages that are NOT the home page */
#container:not([data-current-page="home"]) #content {
  column-count: 1 !important;
  max-width: 700px;
  /* margin: 0 auto; */
  column-gap: 0;
}

#container:not([data-current-page="home"]) .page_content p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#container[data-current-page="home"] #content > .page_content p:blank {
  display: none;
}

#container[data-current-page="home"] #content > .page_content:has(p:empty) {
  display: none !important;
}

/* Hide posts when their corresponding filter checkbox is unchecked */
#container:has(#filter-events:not(:checked))
  #content
  .page_container[data-tags*="event"] {
  display: none;
}

#container:has(#filter-notes:not(:checked))
  #content
  .page_container[data-tags*="notes"] {
  display: none;
}

#container:has(#filter-home:not(:checked))
  #content
  .page_container[data-tags*="home"] {
  display: none;
}

#content {
  color: var(--color_text);
  column-count: 4;
  column-gap: 16px;
}
#content .page_title a {
  color: var(--color_main);
  text-decoration: underline;
}
#content .page_title a:visited {
  color: var(--color_visited);
}
#content .page_title a:hover {
  color: var(--color_hover);
}

.page_container {
  width: 100%;
  margin-bottom: 16px;
  break-inside: avoid;
}

.page_tags a {
  text-decoration: underline;
}

img {
  width: 100%;
}

.subtitle {
  font-size: 4em;
  font-family: wakuwaku;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
}
.subtitle2 {
  font-size: 2em;
  font-family: wakuwaku;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: block;
  padding: 0.5em;
  /* border: 0.3em solid var(--color_main); */
  margin-top: 1em;
}
#page_menu {
  text-align: right;
}
.page_title {
  font-weight: bold;
  margin-top: 8px;
  margin-bottom: 8px;
}
.page_body {
  padding: 0.5em;
}

/* page headers */
.page_header {
  padding: 0.5em;
}
/* .page_date {
}
.page_time {
}
.page_author {
} */

/* links */
a {
  color: var(--color_main);
  text-decoration: none;
}
a:visited {
  color: var(--color_visited);
}
a:hover {
  color: var(--color_hover);
}

.page,
.page_content a {
  color: var(--color_text);
  text-decoration: underline;
}
.page,
.page_content a:visited {
  color: var(--color_visited);
}
.page a:hover,
.page_content a:hover {
  color: var(--color_highlight);
}

.page_content p {
  margin-top: 0;
  margin-bottom: 0;
}

.page_content {
  padding: 0.5em;
}

/* errors */
.error {
  text-align: center;
  /* background-color: var(--color_main); */
  color: var(--color_contrast);
}
.error span a {
  color: var(--color_highlight);
}
.error span a:hover {
  color: var(--color_hover);
}
.error span a:visited {
  color: var(--color_visited);
}

/* footer */
.footer {
  font-size: small;
  text-align: right;
  color: var(--color_text);
  padding: 0.5em;
}

.footer a {
  color: var(--color_text);
  text-decoration: underline;
}

.footer p {
  margin: 0;
}

/* code */
code {
  color: var(--color_highlight);
}

/* pre */
pre {
  white-space: pre-wrap;
}

/* input */
textarea {
  width: 100%;
  min-height: 15em;
}

/* buttons */
span.edit_button {
  text-align: right;
  color: var(--color_highlight2);
  border: 1px solid var(--color_contrast);
  padding: 2px 4px 2px 4px;
}
button,
span.button {
  /* restyle form buttons to look like text */
  align-items: normal;
  border: none;
  box-sizing: content-box;
  color: var(--color_contrast);
  background-color: var(--color_main);
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  appearance: none;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
span.edit_button a:link {
  color: var(--color_contrast);
}
span.edit_button a:visited {
  color: var(--color_visited);
}
span.edit_button:hover {
  background-color: var(--color_highlight);
}
span.edit_button a:hover {
  color: var(--color_highlight2);
}
button:hover {
  background-color: var(--color_highlight);
}

.mode span:hover {
  cursor: default;
}

#reading-mode-toggle + .navmenu-link {
  color: var(--color_text);
}

#night-mode-toggle + .navmenu-link {
  color: var(--color_highlight);
}

/* When reading mode is active, override all colors to black and white */
#container:has(#reading-mode-toggle:checked) {
  --color_main: #000000;
  --color_contrast: #000000;
  --color_highlight: #000000;
  --color_visited: #000000;
  --color_hover: #000000;
  --color_highlight2: #ffffff;
  --color_text: #000000;
}

#container:has(#reading-mode-toggle:checked) img {
  filter: grayscale(100%);
}

body:has(#night-mode-toggle:checked),
#container:has(#reading-mode-toggle:checked) div {
  background-color: #ffffff;
  color: #000000;
}

#container:has(#reading-mode-toggle:checked) .page_content {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

body:has(#night-mode-toggle:checked),
#container:has(#night-mode-toggle:checked) div {
  background-color: #222222 !important;
  --color_visited: #ffaa00;
  --color_highlight: #8686ff;
  --color_text: #ffffff;
  color: #ffffff;
}

#container:has(#night-mode-toggle:checked) .page_content {
  background-color: transparent !important;
  color: #ffffff;
}

#container:has(#night-mode-toggle:checked) .page_container span,
body:has(#night-mode-toggle:checked) .footer,
body:has(#night-mode-toggle:checked) .footer a,
#container:has(#night-mode-toggle:checked) .page_content a {
  color: #ffffff;
}

/* When both reading mode AND night mode are active */
#container:has(#reading-mode-toggle:checked):has(#night-mode-toggle:checked) {
  --color_visited: #ffffff;
}

#container:has(#reading-mode-toggle:checked):has(#night-mode-toggle:checked)
  .mode
  .navmenu-link,
#container:has(#reading-mode-toggle:checked):has(#night-mode-toggle:checked) a,
#container:has(#reading-mode-toggle:checked):has(#night-mode-toggle:checked)
  .page_content {
  color: #ffffff;
  border-color: #ffffff !important;
}

@media (max-width: 1200px) {
  #content {
    column-count: 3;
  }
}

@media (max-width: 1000px) {
  .header-wrapper {
    margin-bottom: 2em;
  }
}

@media (max-width: 900px) {
  #content {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  #content {
    column-count: 1;
  }
  .header-wrapper {
    margin-top: 3.5em;
    margin-bottom: 0;
    margin-left: 0.5em;
  }
  .navmenu-item {
    padding: 0;
  }
  #navmenu {
    font-size: small;
    margin-left: 1em;
    position: fixed;
    left: 0;
    top: 1em;
  }
  .navmenu-label {
    margin-left: 0;
    margin-right: 0.25em;
  }
  .navmenu-label:nth-of-type(2) {
    display: inline;
  }
  .navmenu-label:nth-of-type(2)::before {
    content: "";
    display: block;
  }
  .mode {
    margin-top: 0.25em;
  }
  .external-links {
    margin-bottom: 0.25em;
  }
}