/* Responsive nav from https://jsbin.com/wasarok/edit?html,css,output ... */
:where(menu, [role="menu"]),
:where(menu, [role="menu"]) > [role="menuitem"] {
  flex-direction: column;
  position: relative;
}

@media (min-width: 576px) {
  :where(menu, [role="menu"]),
  :where(menu, [role="menu"]) > [role="menuitem"] {
    flex-direction: row;
  }
}

[data-role="burger"] {
  opacity: 0.8;
  cursor: pointer;
  border-radius: 10%;
  box-sizing: border-box;
  background-color: transparent;
  height: 24px;
  width: 28px;
  padding: 0;
  margin: 0;
  border: 0 solid #e7edf2;
}

[data-role="burger"] > input[type="checkbox"] {
  height: 4px;
  width: 28px;
  border: none;
  background-color: #e7edf2;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px 0 #161724;
  position: relative;
  margin-inline: 0;
}

[data-role="burger"] > input[type="checkbox"]:checked {
  background-image: none;
  background-color: transparent;
}

[data-role="burger"] > input[type="checkbox"]::before, [data-role="burger"] > input[type="checkbox"]::after {
  height: 4px;
  width: 28px;
  border-radius: 2px;
  background-color: #e7edf2;
  position: absolute;
  content: "";
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px 0 #161724;
}

[data-role="burger"] > input[type="checkbox"]::before {
  top: -10px;
}

[data-role="burger"] > input[type="checkbox"]::after {
  top: 10px;
}

[data-role="burger"] > input[type="checkbox"]:checked::before {
  box-shadow: none;
  transform: rotate(45deg) translate(7px, 7px);
}

[data-role="burger"] > input[type="checkbox"]:checked::after {
  box-shadow: none;
  transform: rotate(-45deg) translate(7px, -7px);
}

/* adjust menu for toggling */
:where(menu, [role="menu"]) {
  position: relative; /* anchor for children */
  /* needed otherwise it grows to fit all its children */
  max-height: calc(var(--pico-line-height) * 1em + var(--pico-nav-element-spacing-vertical)*2);
}

/* hide entries within menu */
:where(menu, [role="menu"]) > [role="menuitem"] {
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  position: relative;
  background-color: var(--pico-card-background-color);
}

/* show hidden items when burger is checked :D */
:where(menu, [role="menu"]):has(> label > input[type="checkbox"]:checked) > [role="menuitem"] {
  visibility: visible;
  opacity: 1;
  z-index: 9999;
}

/* position the menu button */
:where(menu, [role="menu"]) > label {
  position: absolute;
  right: 0;
  top: var(--pico-nav-element-spacing-vertical);
  padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
}

@media (min-width: 576px) {
  /* hide menu button */
  :where(menu, nav[role="menu"]) > label {
    display: none;
  }

    /* show all elements */
  :where(menu, [role="menu"]) > [role="menuitem"] {
    visibility: visible;
    opacity: 1;
    display: flex;
    top: unset;
  }
}
/* ... Responsive nav */

/* Hero section */
.hero {
  text-align: center;
  padding: 4rem 0;
}
.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.hero h2, .features h2 {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--pico-muted-color);
  margin-bottom: 2rem;
}
body > main.homepage > .features > .grid article h3 {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

@font-face{
  font-family:Figtree;
  font-style:normal;
  font-display:swap;
  font-weight:700;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(/public/_assets/figtree-latin-700-normal-7SO3ENVH.woff2) format("woff2"),url(/public/_assets/figtree-latin-700-normal-Z452IEJK.woff) format("woff")
}

/* Footer... */
body > footer section:last-of-type {
  margin-block: calc(var(--pico-spacing) * 2);
  padding-top: calc(var(--pico-spacing) * 2);
  border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
  font-size: 12px;
}
/* ...Footer */

/* prevent scroll when dialog is open */
body:has(dialog[open]) {
  overflow: hidden;
}

dialog:not([open]) {
  /* display: grid; */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all var(--pico-transition) allow-discrete;
}

dialog[open] {
  /* display: grid; */
  visibility: visible;
  opacity: 1;
  transition: opacity var(--pico-transition);
  max-height: 100%;
  overflow-y: auto;
}

dialog article {
  max-width: 550px;
  max-height: unset;
  overflow: unset;
  transform: scale(0.5);
  transition: transform var(--pico-transition);
}

dialog[open] article {
  transform: scale(1);
}

.candidate-selector {
  --pico-background-color:var(--pico-form-element-background-color);
  --pico-border-color:var(--pico-form-element-border-color);
  --pico-color:var(--pico-form-element-color);
  --pico-box-shadow:none;
  border:var(--pico-border-width) solid var(--pico-border-color);
  border-radius:var(--pico-border-radius);
  outline:0;
  background-color:var(--pico-background-color);
  box-shadow:var(--pico-box-shadow);
  color:var(--pico-color);
  font-weight:var(--pico-font-weight);
  transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)
}

label + .dropdown {
  margin-top: calc(var(--pico-spacing) * .25);
}
label:not(:has(*)) { /* Childless label */
  margin-bottom: 0;
}
small button[role="search"] {
  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.75);
  --pico-font-size: 1.1em;
  font-size: var(--pico-font-size);
  margin-bottom: 0;
}
input[type=number] { /* Remove +/- arrows from numeric inputs in Firefox */
  -moz-appearance: textfield;
}
.display-none {
  display: none !important;
}
.candidate-card {
  display: flex;
  gap:var(--pico-grid-column-gap);
  justify-content:space-between;
  padding: calc(var(--pico-grid-row-gap) * .7) var(--pico-grid-column-gap);
  background-color: var(--pico-dropdown-background-color);
  border-bottom: 1px solid var(--pico-form-element-border-color);
}
.candidate-card:first-child {
  border-top-left-radius: var(--pico-border-radius);
  border-top-right-radius: var(--pico-border-radius);
}
.candidate-card:last-child:not(:first-child) {
  border-bottom-left-radius: var(--pico-border-radius);
  border-bottom-right-radius: var(--pico-border-radius);
}
.candidate-card, .candidate-card label {
  cursor: grab;
}
.candidate-card label:active, .candidate-card:active {
  cursor: grabbing;
}

/* PICO aria-invalid breaks intl-tel-input styling, this fixes it... */
.iti {
  margin-top: calc(var(--pico-spacing) * .25);
  margin-bottom: 0;
}
.iti:has(input[data-render="intl-tel-input"][aria-invalid]){
  margin-bottom: calc(var(--pico-spacing) * .25);
}
input[data-render="intl-tel-input"], input[data-render="intl-tel-input"][aria-invalid] {
  margin-bottom: 0;
  padding-inline-start: calc(0.5em * 11.75) !important;
}
/* ... this fixes it */

/* Use the error color on the label of a fieldset if there are any errors within the fieldset */
fieldset:has(*[aria-invalid="true"]) > label{
  color: var(--pico-del-color);
}
/* Form validation colors for the candidates widget */
fieldset:has(*[aria-invalid="true"]) .validation-border{
  border-color: var(--pico-form-element-invalid-border-color);
}
fieldset:has(*[aria-invalid="false"]) .validation-border{
  border-color: var(--pico-form-element-valid-border-color);
}

/* Make class grid items wide enough for the class widget */
.grid.classes {
  --grid-min-value: 15rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-value), 1fr));
  & *{
    align-self: start; /* Don't stretch vertically to fill the whole grid item space */
  }
}

/* Higlight added or edited class */
.highlight {
  animation-name: highlight-edit;
  animation-duration: 20s;
}
@keyframes highlight-edit {
  from {box-shadow:0 0 1em 0.5em var(--pico-primary-border)}
  to {var(--pico-card-box-shadow)}
}
.dropdown .highlight {
  animation: none;
}

/* Stretched links as in Bootstrap */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

.typed-cursor { font-weight:normal; font-family:Arial, Helvetica, sans-serif }

/* .in-space {
  transform:
    perspective(75em)
    rotateX(18deg)
    rotateZ(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
} */

@media (min-width: 1024px) {
  body > main.homepage > .features > .grid.price-tables {
    grid-template-columns: 1fr 1fr 1fr
  }
}
.price-table-features {
  padding-left: 1rem;
  & > li {
    padding-left: 0.5rem;
    &::marker {
      content: '✓';
      font-size: 1.2em;
    }
  }
}

.onboarding-tasks {
  & > li {
    padding-left: 0.5rem;
    &::marker {
      font-size: 1.2em;
      content: '👉';
    }
    &.completed::marker {
      content: '✅';
    }
  }
}

body > main.homepage > .features > hgroup {
  text-align: center;
}