/* Variables
--------------------------------------------------------------- */
:root {
  /* Viewport width */
  --viewport-min-width: 320px;
  --viewport-max-width: 1440px;

  /* Header height */
  --header-height: 3.2rem;

  /* Colors */
  --brand-1: #145FB4;
  --brand-2: #FFE470;
  --brand-3: transparent;
  --brand-4: transparent;
  --brand-5: transparent;

  --black: #0f172a;
  --darker: #334155;
  --dark: #475569;
  --midtone: #94a3b8;
  --light: #cbd5e1;
  --lighter: #e2e8f0;
  --white: #FFF;

  --info: #3b82f6;
  --warning: #f97316;
  --success: #22c55e;
  --error: #aa2b2b;
  --highlight: #fef08a;
  --link: #3b82f6;

  /* Font faces */
  --font-primary: Inter, sans-serif;
  --font-secondary: verdana, sans-serif;

  /* Text max-width */
  --text-max-width: 40rem;

  /* Form element padding */
  --form-element-padding: 0.65rem;

  /* Fluid text sizes */
  --fluid-text-xs: var(--step--2);
  --fluid-text-sm: var(--step--1);
  --fluid-text-base: var(--step-0);
  --fluid-text-lg: var(--step-1);
  --fluid-text-xl: var(--step-2);
  --fluid-text-2xl: var(--step-3);
  --fluid-text-3xl: var(--step-4);

  /* Fluid space sizes (margins, padding, etc) */
  --fluid-space-3xs: var(--space-3xs);
  --fluid-space-2xs: var(--space-2xs);
  --fluid-space-xs: var(--space-xs);
  --fluid-space-sm: var(--space-s);
  --fluid-space-md: var(--space-m);
  --fluid-space-lg: var(--space-l);
  --fluid-space-xl: var(--space-xl);
  --fluid-space-2xl: var(--space-2xl);
  --fluid-space-3xl: var(--space-3xl);

  --gutters: var(--space-2xs-2xl);
}

/* Reset
  --------------------------------------------------------------- */
*,
::before,
::after {
  margin: 0;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--darker);
}

/* Layout
  --------------------------------------------------------------- */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

scrollable-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

main {
  /* Shift right by width of scrollbar if present */
  margin-right: calc(-1 * (100vw - 100%));
  padding-bottom: var(--fluid-space-3xl);
  flex: 1;
}

section,
.wrapper {
  width: clamp(var(--viewport-min-width), 100%, var(--viewport-max-width));
  padding-inline: var(--gutters);
  margin-inline: auto;
  flex-shrink: 0;
}

/* Fluid wrap – direct children won't shrink below their min-width, then wrap */
fluid-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--fluid-space-2xs);
}

/* Remember to set min-width on direct children of fluid-wrap */
fluid-wrap>* {
  flex-grow: 1;
  flex-shrink: 0;
  max-width: 100%;
}

/* Typography
  --------------------------------------------------------------- */
body,
input,
textarea,
select,
button,
p {
  font: var(--fluid-text-base)/1.4 var(--font-primary);
  color: var(--black);
  overflow-wrap: break-word;
}

p {
  margin-top: var(--fluid-space-sm);
  max-width: var(--text-max-width);
  hyphens: auto;
}

h1 {
  font: bold var(--fluid-text-3xl)/1.2 var(--font-primary);
  margin-top: var(--fluid-space-2xl);
  max-width: var(--text-max-width);
  overflow-wrap: break-word;
}

h2 {
  font: bold var(--fluid-text-2xl)/1.2 var(--font-primary);
  margin-top: var(--fluid-space-xl);
  max-width: var(--text-max-width);
  overflow-wrap: break-word;
}

h3 {
  font: bold var(--fluid-text-xl)/1.2 var(--font-primary);
  margin-top: var(--fluid-space-lg);
  max-width: var(--text-max-width);
  overflow-wrap: break-word;
}

h4 {
  font: bold var(--fluid-text-lg)/1.2 var(--font-primary);
  margin-top: var(--fluid-space-md);
  max-width: var(--text-max-width);
  overflow-wrap: break-word;
}

blockquote {
  margin-top: var(--fluid-space-md);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  border-left: 0.35rem solid var(--midtone);
  max-width: var(--text-max-width);
}

blockquote,
blockquote p {
  font-size: var(--fluid-text-lg);
  font-style: italic;
  color: var(--dark);
}

blockquote :first-child {
  margin-top: 0;
}

mark {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--highlight);
}

a,
a:visited {
  color: var(--link);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

code {
  font-size: var(--fluid-text-sm);
  background: #F4F2F0;
  color: var(--black);
  padding: 0.2rem 0.3rem;
  border-radius: 3px;
  white-space: break-spaces;
}

/* Lists
  --------------------------------------------------------------- */
ul,
ol {
  margin-top: var(--fluid-space-md);
  margin-left: var(--fluid-space-sm);
}

ul {
  padding-left: var(--fluid-space-xs);
  list-style: none;
}

ol {
  padding-left: 0;
}

ul li::before {
  position: absolute;
  left: calc(-1 * var(--fluid-space-xs) + .2rem);
  top: 1px;
  font-size: var(--fluid-text-sm);
  color: var(--dark);
  content: "⬥";
}

ul li {
  position: relative;
  font-size: var(--fluid-text-base);
  line-height: var(--fluid-text-lg);
  margin-top: var(--fluid-space-xs);
  padding-left: var(--fluid-space-2xs);
}

ol li::before {
  content: counter(step-counter);
  display: block;
  position: absolute;
  color: #fff;
  left: 0;
  line-height: var(--fluid-text-lg);
  width: var(--fluid-text-lg);
  border-radius: 50%;
  background-color: var(--darker);
  text-align: center;
  font-size: var(--fluid-text-xs);
}

ol li {
  list-style: none;
  counter-increment: step-counter;
  padding-left: var(--fluid-space-md);
  position: relative;
  line-height: var(--fluid-text-lg);
  margin-top: var(--fluid-space-xs);
}

/* Tables
  --------------------------------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: var(--fluid-space-md);
}

table td,
table th {
  border: 1px solid var(--lighter);
  padding: var(--fluid-space-2xs);
  text-align: left;
}

table th {
  font-weight: bold;
  font-size: var(--fluid-text-lg);
  color: var(--dark);
}

table tr:nth-child(even) {
  background: #f8f8ff;
}

/* Forms
  --------------------------------------------------------------- */
/* Forms default to display a column of fieldsets */
form {
  display: flex;
  flex-direction: column;
  margin-top: var(--fluid-space-md);
  gap: var(--fluid-space-2xs);
}

/* A fieldset should wrap every individual field or group of checkboxes/radios along with label and invalid-message */
form fieldset {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--fluid-space-2xs);
  padding: 0;
  border: 0;
}

/* Use labels for form fields and individual checkboxes/radios. Use legend for checkbox/radio main label */
form label:not(fieldset.radios label):not(fieldset.checkboxes label),
form legend {
  font-size: var(--fluid-text-sm);
  font-weight: bold;
  color: var(--darker);
  line-height: 1;
}

/* Styles for textareas, selects, and inputs */
form input,
form select,
form textarea {
  outline: none;
  margin-top: var(--fluid-space-3xs);
}

form input:disabled,
form select:disabled,
form textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--lighter);
}

form fieldset.invalid input:not(:focus),
form fieldset.invalid select:not(:focus),
form fieldset.invalid textarea:not(:focus) {
  outline: 1px solid var(--error);
  border: 1px solid var(--error);
  box-shadow: 0 0 1px 1px var(--error);
  color: var(--error);
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: 2px solid var(--link);
  box-shadow: 0 0 2px 1px var(--link);
}

form input:not([type]),
form input[type='text'],
form input[type='password'],
form input[type='email'],
form input[type='tel'],
form input[type='url'],
form select,
form textarea {
  width: 100%;
  font-size: var(--fluid-text-sm);
  color: var(--black);
  border: 1px solid var(--light);
  border-radius: 3px;
  padding: var(--form-element-padding);
}

select {
  display: block;
  width: 100%;
  font-size: var(--fluid-text-sm);
  padding: var(--form-element-padding);
  border: 1px solid var(--midtone);
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: var(--fluid-text-lg);
}

/* To display checkboxes/radios nicely, add checkboxes or radios class to the parent fieldset */
form fieldset.checkboxes,
form fieldset.radios {
  gap: var(--fluid-space-xs);
}

/* For checkboxes/radios, use a legend for the main label and a label for each item */
form fieldset.checkboxes legend,
form fieldset.radios legend {
  display: block;
  width: 100%;
  margin-bottom: var(--fluid-space-xs);
}

/* Unlike other form elements, use label to wrap the checkbox/radio element (see style.njk) */
form fieldset.checkboxes label,
form fieldset.radios label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  font-size: var(--fluid-text-sm);
  gap: var(--fluid-space-2xs);
}

/* Default display for checkboxes/radios is column add a row class to parent fieldset to display as row */
form fieldset.checkboxes.row,
form fieldset.radios.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--fluid-space-2xs);
}

form input[type='radio'],
form input[type='checkbox'] {
  border: 1px solid var(--midtone);
  border-radius: 3px;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: top;
  background: var(--white) no-repeat center center;
}

form input[type='radio'] {
  border-radius: 50%;
}

form input:where([type='checkbox'], [type='radio']):where(:active:not(:disabled), :focus) {
  outline: none;
}

form input:where([type='checkbox'], [type='radio']):disabled {
  background: var(--light);
  opacity: 0.4;
}

form input[type='checkbox']:checked {
  border-color: var(--black);
  background-color: var(--black);
  background-position: 40% 40%;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='white' d='M0,8 5,13 14,4 12,2 5,9 2,6z'/%3E%3C/svg%3E%0A");
}

form input[type='radio']:checked {
  background-color: var(--black);
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle fill='white' cx='5' cy='5' r='4'/%3E%3C/svg%3E%0A");
}

form input[type='search']:not(.unset input) {
  background-repeat: no-repeat;
  background-position: 8px 51%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="rgb(0, 0, 0)" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
  padding-left: 32px !important;
}

form input[type='range'] {
  padding: 0;
  border: none;
  appearance: auto;
  padding: 1rem;
  margin: 0.2rem;
  border-radius: 4px;
}

form select[multiple] {
  background-image: none !important;
}

form input[type='file'] {
  border: 0;
}

/* Form notes and invalid-messages can also be included within the fieldset */
form .form-note,
form z-invalid {
  font-size: var(--fluid-text-xs);
  margin-left: 2px;
  margin-top: var(--fluid-space-3xs);
  line-height: 1;
}

form .form-note {
  color: var(--dark);
}

form z-invalid {
  display: inline-block;
  color: var(--error);
}

/* Hide invalid-messages unless parent fieldset is invalid */
form fieldset:not(.invalid) z-invalid {
  display: none;
}

/* Buttons
  --------------------------------------------------------------- */
button,
a.button,
input[type='button'],
input[type='submit'] {
  cursor: pointer;
  border-radius: 3px;
  background-color: var(--darker);
  font-size: var(--fluid-text-base);
  color: var(--white);
  padding: .5rem 1rem;
  box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.2);
  margin-top: .5rem;
  text-decoration: inherit;
}

button[disabled],
a.button[disabled],
input[type='button'][disabled],
input[type='submit'][disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Other
  --------------------------------------------------------------- */
hr {
  border-top: 1px solid var(--lighter);
  margin: var(--fluid-space-xl) auto;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(2px) brightness(0.4) saturate(80%);
  transition: backdrop-filter 0.4s;
}

.modal-inner {
  background: var(--light);
  width: 40rem;
  max-width: 90%;
  padding: 1.2rem 5rem 2rem 5rem;
  border-radius: 3px;
  box-shadow: 2px 5px 16px var(--dark);
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.debug {
  border: 1px dashed green !important;
  outline: 1px dashed green !important;
}

.revert,
.revert *,
blockquote.revert *,
table.revert *,
table.revert :nth-child(even),
form.revert *,
form.revert input,
form input.revert,
ul.revert *,
ol.revert *,
section.revert *,
hr.revert *,
svg.revert *,
button.revert *,
button.revert *,
a.revert * {
  all: revert;
}

.fade-in,
z-invalid,
main {
  animation: fadein ease 800ms;
}

@keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}