@import "./vars.css";
@import "../../_shared/shared-components.css";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* ========= RESET & BASE ========= */
*, *::before, *::after {box-sizing: border-box;}
.emoji {
  font-family: 'apple color emoji', 'segoe ui emoji', 'noto color emoji', 'android emoji', emojisymbols, 'emojione mozilla', 'twemoji mozilla', 'segoe ui symbol';
  font-weight: 400;
}
html, body {
  max-width: 100vw;
  min-height: 100dvh;
  /* overflow: hidden; */
}
body {
  background-color: var(--bg1);
  background-image:var(--bg-gradient);
  background-attachment:fixed;
  color: var(--text1);
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  position: static;
  min-height: 100dvh;
}
header:has(#global-nav) {
  background-color: var(--bg1a4);
  backdrop-filter: blur(12px) brightness(1.1) saturate(80%);
  -webkit-backdrop-filter: blur(12px) brightness(1.1) saturate(80%);
  box-shadow: 0 -13px 24px 4px var(--bg2);
  position: sticky;
  top: 0;
  z-index: 100;
}
#global-nav.container {
  padding-right:0;
  padding-left:0;
}
.logo img {
  max-width: 30px;
  display: inline-block;
  vertical-align: text-bottom;
}
.logo span {display: inline-block;}
dialog:not([data-open="true"]):not([open]) {
  display: none !important;
}
::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.hero {
  padding: 8rem 0 4rem;
}
#global-footer {
  margin-top:2rem;
}

img {display:inline-block;max-width:100%;height:auto;}
a {color:inherit;text-decoration:none;}

a:hover { cursor: pointer; }
a[href]:not(.button),
a.link { color: var(--link);}

button {
  background-color: inherit;
  border: inherit;
  cursor: pointer!important;
  display: inline-flex!important;
  font: inherit;
  padding: inherit;

  flex-flow: row;
  align-items: center!important;
  gap: 0.4rem!important;
}
button.hover-label {border-radius: 1rem;padding: 6px 10px 6px 8px;;}
button.hover-label i {font-size: .9rem;display: block;}
button.hover-label span {opacity: 0;display: block;}
button.hover-label:hover span {opacity: 1;}
button.hover-label:hover {background-color: rgba(122,122,122,0.4);}
.button {
  background-color: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text1);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1em;

  text-decoration: none;
  padding: 10px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button.icon { padding: 12px; }
.button.wide {
  text-align: center;
  display: block;
  margin-top: 12px;
  width: -webkit-fill-available;
}
.button.primary {
  background-color: var(--bg-button1);
  background-image: var(--bg-button1-gradient);
  border: none;
  letter-spacing: 0.2px;
  color: white;
}
.button.primary:hover,
.button.primary.active {
  background-image: var(--bg-button1-focus);
}
.button.secondary {
  background-color: var(--bg-button2);
}
.button.secondary:hover,
.button.secondary.active {
  background-color: var(--bg-button2-focus);
}
.button.warning {
  background-color: var(--bg-button-warning);
}
.button.warning:hover,
.button.warning.active {
  background-color: var(--bg-button-warning-focus);
}
.button.shadow {box-shadow: 0 1px 12px -2px var(--bg1);}
.button[disabled] {
  background-color: var(--bg3) !important;
  background-image: none !important;
  border-style: dashed;
  border-width: 1px;
  cursor: not-allowed;
}
.button.primary[disabled] {
  border-width: 0;
  color: var(--text1);
}
blockquote {
  margin-right:0;
  margin-left:0;
}
.error { color: var(--text-warning); }

/* bootstrap cruft */
.container, .container-fluid {width:-webkit-fill-available;}
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.d-flex {display: flex;flex-flow: row;align-items: center;justify-content: flex-start;gap: 0.5rem;}
.d-flex-row { display: flex; flex-flow: row; gap: 4px; }
.d-flex-col { display: flex; flex-flow: column; gap: 4px; }
.m-0 {margin: 0;}

/* utility styles */
.hidden { display: none!important; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}

.container {
  margin: 0 auto;
  padding: 0 .75rem;
  max-width: 1120px;
}
.contain {
  margin:0 auto;
  max-width: var(--page-max-width);
}
.button > * + * { margin-left: 6px; /* spaces out icon and label */ }
.button i[class^='fa'] { line-height: 1em; }
.button.active i[class^='fa'] { font-weight: 900; }
.button.toggle:hover::after,
.button.toggle.active::after {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;

  border-radius: 10px;
  background-color: var(--interactive);
}
.button.toggle.active::after { background-color: var(--toggle-active); }
.button.toggle:hover *,
.button.toggle.active * {
  position: relative;
  z-index: 1;
}

.button-bar {
  background-color: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: stretch;
  padding: 6px;
  gap: 4px;
  flex-grow: 0;
  flex-shrink: 0;
}
.button-bar .button {
  border: unset;
  border-radius: 10px;
  padding: 4px;
  flex-grow: 2;
  margin-top: 0;
}
.button-bar .button.toggle { padding: 6px 12px; }
.button-bar .button.toggle:hover::after { inset: -2px 0; }
.button-bar .button.toggle.active::after { inset: -2px; }

.inline-buttons {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.inline-buttons > * { flex-grow: 2; }



::marker, ::-webkit-details-marker { display: none; }
summary { list-style: none; }
.accordion summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  list-style: none;
  padding: 12px 0;
}
.accordion summary::after {
  content: '\f107';
  display: inline-block;
  font-family: 'Font Awesome 7 Pro';
  font-weight: bold;
  float: right;
  transition: transform .3s;
  text-align: center;
  width: 1.25em;
}
.accordion:not([open]) summary::after { transform: rotate(-90deg) translate(0, 1px); }
.accordion p { margin-top: 0;}


#alert-message {
  background-color: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 32px;
  box-shadow: 0 0 100px 20px var(--shadow), 0 0 200px 40px var(--shadow);
  color: var(--text1);
  opacity: 1;
  padding: 20px 24px 24px;
  transition: all 300ms ease;

  position: fixed;
  inset: 40vh 0; /* fallback */
  inset: 40dvh 0;
  margin: 0 auto;
  max-width: 440px;
  z-index: 20;

  width: fit-content;
  height: fit-content;
}
#alert-message.center { padding: 24px 48px 30px; }
#alert-message.center * { text-align: center; }
#alert-message.fade-out { opacity: 0; }
#alert-message.success {
  border-color: green;
  color: #9fde8f;
  box-shadow: 0 0 100px 20px #00800063, 0 0 200px 40px #00800063;
}
#alert-message.warning {
  border-color: var(--border-warning);
  color: var(--text-warning);
}
#alert-message * {
  font-weight: normal;
  margin: 0;
}
#alert-message .button { margin-top: 12px; }
#alert-message.toast {
  background-color: transparent;
  background-image: linear-gradient(to bottom, var(--bg-toast-top), var(--bg-toast-bottom));
  backdrop-filter: blur(6px);
  border: none;
  box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.4), 0 3px 20px -2px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 12px 24px;
  transition: top ease 350ms;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  top: -60px;
}
#alert-message.toast.show {
  top: 16px;
}

.legal {padding: 3em var(--container-padding-x);}
.legal section:first-child {
  padding: 8rem 0 1rem;
}
.legal section:first-child h1 {
  font-size: 3.5rem;
  font-weight: lighter;
}