@import url('admonitions.css');
@import url('fonts.css');

/* Miscellaneous custom styles */

article {
  /* --pico-box-shadow: none; */
  --pico-card-box-shadow: none;
}

a {
  --pico-text-decoration: none;
}

html, body {
  font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif;
}

body > header {
  text-align: center;
  margin-top: 2em;  
}

body > header h1 {
  font-size: 2.7rem;
}

body > header hgroup p {
  margin-top: 1em ;
}

body > header nav {
  margin-top: 3em;
  margin-bottom: 2em;
  border-top: 1px solid var(--pico-color);
  border-bottom: 1px solid var(--pico-color);
  justify-content: center;
}

body > footer {
  font-size: 0.8rem;
}

article {
  margin-bottom: calc(2.5 * var(--pico-typography-spacing-vertical));
  border-radius: 0;
  border-bottom: calc(1.5 * var(--pico-border-width)) solid #E9F2FC;
}

article > header,
article > footer {
  background-color: unset;
}

article > header {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

article > header > p.published {
  font-size: 0.8rem;
  /* color: var(--pico-color); */
  /* margin-top: 0.5em; */
}

section p:has(+ p.read-more) {
  margin-bottom: 0;
}

p.read-more > a::after {
  content: " »";
}

dl dt {
  margin-top: var(--pico-typography-spacing-vertical);
}

/* Image rows */

.image-row {
  display: flex;
  gap: 1rem;
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.image-row > *,
.image-row > .figure {
  flex: 1 1 0;
  min-width: 0;
}

.image-row img {
  width: 100%;
  height: auto;
  display: block;
}

/* Image row size classes — add to .. container:: image-row alongside the base class */
/* Height: constrains image height, crops with object-fit: cover */
.image-row.img-h50  img { height:  50px; object-fit: scale-down; }
.image-row.img-h100 img { height: 100px; object-fit: scale-down; }
.image-row.img-h150 img { height: 150px; object-fit: scale-down; }
.image-row.img-h200 img { height: 200px; object-fit: scale-down; }
.image-row.img-h250 img { height: 250px; object-fit: scale-down; }
.image-row.img-h300 img { height: 300px; object-fit: scale-down; }
.image-row.img-h350 img { height: 350px; object-fit: scale-down; }
.image-row.img-h400 img { height: 400px; object-fit: scale-down; }
.image-row.img-h450 img { height: 450px; object-fit: scale-down; }
.image-row.img-h500 img { height: 500px; object-fit: scale-down; }

/* Width: controls the max width of the row itself */
.image-row.img-w-narrow { max-width: 33%; }
.image-row.img-w-medium { max-width: 50%; }
.image-row.img-w-wide   { max-width: 75%; }

.image-row .figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-row .figure img {
  margin: auto;
}

.image-row .figure .caption {
  margin-top: 0.25rem;
  font-size: 0.9em;
  text-align: center;
}

/* Disabled: redundant with .image-row (all figures/image-refs are inside .image-row),
 * and harmful on the index page where <section> wraps the full article summary —
 * flex + gap caused double vertical spacing between paragraphs, and sized the
 * admonition to content-width instead of full width.
 * Note: article pages use <div class="section">, so this selector never matched there.
 *
 * article section {
 *   display: flex;
 *   flex-wrap: wrap;
 *   gap: 1rem;
 * }
 *
 * article section a.image-reference,
 * article section .figure {
 *   flex: 1 1 0;
 *   min-width: 0;
 * }
 *
 * article section a.image-reference img,
 * article section .figure img {
 *   width: 100%;
 *   height: auto;
 *   display: block;
 * }
 */

/* GLightbox */

/* Override Pico's prefers-reduced-motion rule that results in instantaneous GLightbox animations, which in turn results in visual flickers */
@media (prefers-reduced-motion: reduce) {
  .gfadeIn, .gfadeOut,
  .gzoomIn, .gzoomOut,
  .gslideInRight, .gslideOutLeft,
  .gslideInLeft, .gslideOutRight {
    animation-duration: .5s !important;
    animation-delay: 0s !important;
    transition-duration: .3s !important;
    transition-delay: 0s !important;
  }
}

.gclose {
  width: 50px !important;
  height: 50px !important;
}

.gclose svg {
  width: 40px !important;
}

/* Custom reST roles */

/* defined as role in the rst files */
.rst-texthighlight {
  background-color: #f0f0ac;
}

.rst-textred {
  color: #D93526;
}

/* Language toggle */

.lang-toggle {
  display: inline-flex;
  gap: 0.3em;
  align-items: center;
  font-size: 1.4em;
  line-height: 1;
  margin-top: 0.25em;
}

.lang-toggle .lang-current {
  opacity: 0.35;
  cursor: default;
}

.lang-toggle a {
  text-decoration: none;
  transition: transform 0.15s ease;
}

.lang-toggle a:hover {
  transform: scale(1.15);
}

/* Admonitions */

.admonition p:not(:first-child) {
  padding: 0;
  margin: var(--pico-typography-spacing-vertical) 0 0 0;
}

.admonition p.last {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

/* Hide admonitions on index page */
article section .admonition {
  display: none;
}

/* "To top" link */

p.to-top {
  text-align: right;
  margin-top: 2rem;
  font-size: 0.85rem;
  opacity: 0.5;
}

p.to-top:hover {
  opacity: 0.8;
}

/* Comment form */

.comment-form {
  --cf-scale: 0.8; /* Scale down the comment form to 80% to reduce its visual weight */
  --pico-form-element-spacing-vertical: calc(var(--cf-scale) / 2 * 0.75rem);
  --pico-form-element-spacing-horizontal: calc(var(--cf-scale) / 2 * 1rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pico-color);
  font-size: calc(var(--cf-scale) * 1em);
}

.comment-form h3 {
  font-size: calc(1 / var(--cf-scale) * 1em); /* 1/var needed here since Pico CSS sets a fixed rem size for H3 */
}

.comment-form span[aria-hidden] {
  color: var(--pico-color-red-500, #c0392b);
  margin-left: 0.2em;
}

.comment-form .cf-error {
  display: block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.6rem;
  background: var(--pico-color-red-100, #fde8e8);
  border-left: 3px solid var(--pico-color-red-500, #c0392b);
  color: var(--pico-color-red-700, #922b21);
  font-size: 0.9em;
  border-radius: 0 var(--pico-border-radius, 4px) var(--pico-border-radius, 4px) 0;
}


.comment-form input,
.comment-form textarea,
.comment-form button {
  font-size: inherit !important;
}

.comment-form input[aria-invalid],
.comment-form textarea[aria-invalid] {
  border-color: var(--pico-color-red-500, #c0392b);
}