/* =========================
   Root & Base Styles
   ========================= */
:root {
  color-scheme: light dark;
}

html {
  font-size: 1.10em;
  line-height: 1.4;
  height: 100%;
}

body {
  margin: 0;
  /* font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; */
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  color: light-dark(#201d1e, #fff);
  background-color: light-dark(#fff, #201d1e);
}

/* =========================
   Typography & Links
   ========================= */
h1,
h2 {
  font-size: 1.4em;
  margin: 16px 0;
}

a {
  font-size: 1.10em;
  color: light-dark(#005a9c, #fff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

a:hover {
  color: light-dark(#024488, #fff);
}

/* =========================
   Navigation & Header
   ========================= */
nav.header {
  margin: 0 auto;
  background: #005a9c;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  padding-inline: 20px;
}

nav a,
nav a:hover {
  color: #fff;
}

/* =========================
   Main Layout
   ========================= */
.section {
  margin: 16px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 15vh;
}

@media only screen and (max-width: 450px) {
  .section {
    flex-direction: column;
  }
}

main {
  padding-inline: 8px;
  display: flex;
  justify-content: center;
}

output {
  padding-top: 8px;
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

output > p,
output > a,
output > h2 {
  font-size: 1.5em;
}

/* TABLE */

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}


/* =========================
   Footer & Aside
   ========================= */
footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  padding: 10px;
}

aside {
  padding-inline: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 1em;
}

aside > * {
  width: 100%;
}

/* =========================
   Details & Summary
   ========================= */
details {
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  font-size: 1.2em;
  max-width: 68ch;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

summary {
  cursor: pointer;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  max-width: 65ch;
}

aside > details > summary {
  background: #005a9c;
  color: #fff;
}

/* =========================
   Blockquotes & Code
   ========================= */
div:has(> blockquote) {
  color: light-dark(#222, #fff);
  background-color: light-dark(#ededed, #223a2c);
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
  font-size: 1.1em;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

blockquote + p {
  text-align: right;
}

code {
  border-radius: 3px;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  padding: 0 3px;
}

/* =========================
   Buttons
   ========================= */
.button {
  --button-bg: #342a21;
  --button-color: #ffffff;
  --button-hover-bg: #4b4b4a;
  --button-hover-color: #ffffff;
  --button-border-width: 3px;
  --button-border-style: solid;
  --button-border-color: var(--button-bg);
  --button-radius: 0.5em;

  display: inline-flex;
  align-items: center;
  gap: var(--button-gap, 0.5em);
  padding: var(--button-padding, 0.7em 1.2em);

  background: var(--button-bg);
  color: var(--button-color);

  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);

  text-decoration: none;
  font-weight: var(--button-font-weight, 700);
  font-size: var(--button-font-size, 1.5em);
  letter-spacing: 0.05ch;
  font-family: sans-serif;
  line-height: 1.1;
  cursor: pointer;
}

.button svg {
  height: var(--button-icon-size, 1.2cap);
  width: auto;
  flex: none;
}

.button:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-color);
}

.button:focus {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(--button-outline-offset, calc(var(--button-border-width) * 2));
}

.button:active {
  transform: scale(.95);
}

/* Button Variants */
.button[data-button-variant="primary"] {
  --button-bg: #005a9c;
  --button-color: #ffffff;
  --button-border-color: currentColor;
  --button-hover-bg: #043f6a;
  --button-hover-color: #d7e5d8;
  --button-outline-color: #150202;
  --button-font-size: 1em;
  margin: 2px;
}

.button[data-button-variant="main"] {
  --button-bg: #f9dc4a;
  --button-color: #342a21;
  --button-border-color: currentColor;
  --button-hover-bg: #f1d979;
  --button-hover-color: #342a21;
  --button-font-size: 2em;
}

.button[data-button-variant="positive"] {
  --button-bg: #2d936c;
  --button-border-color: #107350;
  --button-hover-bg: #359d75;
  --button-font-size: 1.2em;
  margin: 4px;
}

.button[data-button-variant="tagbutton"] {
  --button-bg: rgb(68, 91, 179);
  --button-border-color: #81b0dc;
  --button-hover-bg: #2d6ba2;
  --button-font-size: 1em;
  margin: 4px;
}

/* Button Radius Variant */
.button[data-button-radius="hard"] {
  --button-radius: 0;
}

/* =========================
   Clusters, Tags, Lists
   ========================= */
.cluster {
  margin: 0;
  padding-left: 0;
  --cluster-row-gap: 2px;
  list-style-type: none;
  display: flex;
  flex-direction: var(--cluster-direction, row);
  flex-wrap: var(--cluster-wrap, wrap);
  column-gap: var(--cluster-column-gap, var(--gutter, var(--space-s-m)));
  row-gap: var(--cluster-row-gap, var(--gutter, var(--space-s-m)));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

.tag {
  margin: 0;
  font-size: medium;
  margin-right: 2px;
}

.tagline {
  margin: 0;
}

.taglist {
  gap: 2px;
  max-width: 100%;
}

/* =========================
   Miscellaneous
   ========================= */
#package {
  text-align: center;
  margin-top: 24px;
  align-content: center;
  font-size: 12em;
  cursor: pointer;
  animation: bounce 3s ease;
  animation-iteration-count: 5;
}

:focus {
      outline: 2px solid #000; /* Black outline */
      outline-offset: 2px;
      box-shadow: 0 0 0 4px #fff; /* White box-shadow for contrast */
}

@keyframes bounce {
  70% { transform: translateY(0%); }
  80% { transform: translateY(-15%); }
  90% { transform: translateY(0%); }
  95% { transform: translateY(-7%); }
  97% { transform: translateY(0%); }
  99% { transform: translateY(-3%); }
  100% { transform: translateY(0); }
}

.fancy-url {
  background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom / 0 var(--bg-h);
  transition: background-size 350ms;
  padding-bottom: 2px;
  --bg-h: 2px;
  font-size: 1.7em;
}

.fancy-url:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}

.extended {
  min-height: 1000px;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: .85em 0;
  padding: 0;
}

/* =========================
   Accessibility Helpers
   ========================= */
.hidden,
[hidden] {
  display: none !important;
}

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}