/* Indigo Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: #3949ab;
  --primary-hover: #303f9f;
  --primary-focus: rgba(57, 73, 171, 0.125);
  --primary-inverse: #FFF;
  --muted-color: hsl(205deg, 10%, 40%);
}

/* Cyan Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #00acc1;
    --primary-hover: #00bcd4;
    --primary-focus: rgba(0, 172, 193, 0.25);
    --primary-inverse: #FFF;
    --muted-color: hsl(205deg, 10%, 60%);
  }
}

/* Cyan Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #00acc1;
  --primary-hover: #00bcd4;
  --primary-focus: rgba(0, 172, 193, 0.25);
  --primary-inverse: #FFF;
  --muted-color: hsl(205deg, 10%, 60%);
}

/* Indigo/Cyan (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

/* nav */

body > nav:nth-child(1) {
  box-shadow: var(--card-box-shadow);
  background-color: var(--background-color);
  /* top: 0;
  position: fixed;
  z-index: 999; */
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--spacing);
}

img {
  border-radius: var(--border-radius);
}

nav img {
  border-radius: 14px;
}

@media (max-width: 768px) {
  body > nav:nth-child(1) > ul:nth-child(2) > li > a > span {
    display: none;
  }
}

@media (max-width: 768px) {
  body > footer > nav > ul > li > small > span {
    display: none;
  }
}

/* main */

body > footer, body > header, body > main {
  padding-bottom: 0;
  padding-top: 0;
}

body > footer, body > header, body > nav {
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

/* button */
[role="button"] {
  --background-color: transparent;
  --color: var(--primary);
}

[role="button"]:hover,
[role="button"]:active,
[role="button"]:focus {
  --background-color: transparent;
  --color: var(--primary-hover);
}

/* iframe */
object {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  display: block;
  margin-bottom: 2rem;
}

object > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* svg feather */
ul > li > a > svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none !important;
}

/* timeline */

main > article > footer > ul.timeline {
  border-left: 2px var(--muted-color) solid;
}
main > article > footer > ul.timeline ul {
  border-left: 2px var(--muted-color) dotted;
}
main > article > footer > ul.timeline li {
  list-style-type: disclosure-closed;
}
main > article > footer > ul.timeline li::marker {
  font-size: 1.25rem;
  color: var(--muted-color);
}

/* time */
article > time::before {
  display: block;
  width: 1rem;
  height: 1rem;
  float: left;
  background-image: var(--icon-date);
  background-position: center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  margin: 0.25rem 0.25rem 0 0;
}

/* table */

table tbody tr:nth-child(odd) {
  background-color: var(--table-row-stripped-background-color);
}

/* definition list */

dt {
  margin-top: var(--typography-spacing-vertical);
  font-weight: bolder;
}

/* footer */
main > article > footer > details > summary {
  font-weight: bolder;
}
main > article > footer > details > ul > li {
  list-style: none;
  text-indent: calc(-1 * var(--spacing));
  font-size: 20px;
}

/* headerlink */
a.headerlink {
  color: var(--background-color);
  font-weight: 100;
  margin-left: 0.5rem;
  text-decoration: none;
}

a.headerlink:hover,
a.headerlink:active,
a.headerlink:focus {
  color: var(--muted-color);
}

h2[id],
h3[id] {
  padding-top: 4rem;
  margin-top: calc(-1 * 4rem);
}

/* toc */
div.toc {
  display: block;
  margin-bottom: var(--spacing);
  padding-bottom: calc(var(--spacing) * 0.5);
  border-bottom: var(--border-width) solid var(--accordion-border-color);
}
div.toc span.toctitle {
  color: var(--accordion-close-summary-color);
  line-height: 1rem;
  list-style-type: none;
  cursor: pointer;
  transition: color var(--transition);
}
div.toc span.toctitle::-webkit-details-marker {
  display: none;
}
div.toc span.toctitle::marker {
  display: none;
}
div.toc span.toctitle::-moz-list-bullet {
  list-style-type: none;
}
div.toc span.toctitle::after {
  display: block;
  width: 1rem;
  height: 1rem;
  float: right;
  transform: rotate(-90deg);
  background-image: var(--icon-chevron);
  background-position: center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  transition: transform var(--transition);
}
div.toc span.toctitle:focus {
  outline: none;
  color: var(--accordion-active-summary-color);
}
div.toc span.toctitle ~ * {
  margin-top: calc(var(--spacing) * 0.5);
}
div.toc span.toctitle ~ * ~ * {
  margin-top: 0;
}
div.toc > span.toctitle {
  margin-bottom: calc(var(--spacing) * 0.25);
}
div.toc > span.toctitle:not(:focus) {
  color: var(--accordion-open-summary-color);
}
div.toc > span.toctitle::after {
  transform: rotate(0);
}

/* figure */

@media (min-width: 992px) {
  figure {
    float: right;
    padding: 0 0.2rem;
    display: contents;
  }
}

/* leaflet */

#osmmap {
  height: 350px;
  margin-bottom: var(--typography-spacing-vertical);
}

.leaflet-marker-icon {
  border-color: transparent;
}

.leaflet-control a {
  padding: 0;
  border: 0;
  border-radius: unset;
}