/*
 * Steward invite/login portal override.
 * Loaded after Snikket app.css/invite.css; keep selectors concrete.
 */

html {
  background: #fcf9f4;
}

body {
  background-color: #fcf9f4;
  color: #423d37;
}

meta[name="theme-color"] {
  content: "#f2a67f";
}

a,
a:visited {
  color: #8a5326;
}

a:hover,
a:focus {
  color: #ec8f63;
  text-decoration-color: #f2a67f;
}

h1,
h2,
h3,
h4,
h5,
h6,
body#login .form-title {
  color: #332e28;
}

blockquote {
  border-left-color: #f2a67f;
}

div#topbar {
  background-color: #fcf9f4;
  color: #332e28;
  border-bottom: 0.0625rem solid #efe7db;
  box-shadow: 0 1px 2px rgba(74, 68, 60, 0.05), 0 10px 26px rgba(74, 68, 60, 0.08);
}

div#topbar > header {
  color: #332e28;
}

div#topbar > header > a span,
body#login h1 {
  background-image: url("../img/steward-logo.svg");
}

main,
#mwrap > main {
  color: #423d37;
}

div.form,
.box,
div.elevated,
main > div.box {
  background-color: #ffffff;
  color: #423d37;
  border-color: #efe7db;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(74, 68, 60, 0.05), 0 18px 44px rgba(74, 68, 60, 0.10);
}

.box > header {
  color: #332e28;
}

.box.primary,
.box.hint {
  border-color: #f2a67f;
  background-color: #fbe0c8;
  color: #423d37;
}

.box.accent,
.box.warning {
  border-color: #ec8f63;
  background-color: #fcf9f4;
  color: #423d37;
}

.box.alert {
  border-color: #c95e40;
  background-color: #fef1ed;
  color: #681f0b;
}

input,
select,
textarea {
  color: #332e28;
}

div.form.layout-expanded input[type="text"],
div.form.layout-expanded input[type="password"],
div.form.layout-expanded input[type="email"],
div.form.layout-expanded input[type="tel"],
div.form.layout-expanded textarea,
div.form.layout-expanded select {
  background-color: #fcf9f4;
  color: #332e28;
  border-bottom-color: #f2a67f;
}

div.form.layout-expanded input[type="radio"]:checked + label:before,
div.form.layout-expanded input[type="checkbox"]:checked + label:before {
  border-color: #ec8f63;
  background-color: #f2a67f;
}

div.form.layout-expanded .lwrap span {
  background: #fcf9f4;
  color: #6f665c;
  border-bottom-color: #f2a67f;
}

input[type="submit"],
button,
.button {
  border-radius: 999px;
}

input[type="submit"].primary,
button.primary,
.button.primary {
  background: linear-gradient(0deg, #ec8f63, #f2a67f);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 18px rgba(236, 143, 99, 0.28);
}

input[type="submit"].primary:hover,
input[type="submit"].primary:focus,
button.primary:hover,
button.primary:focus,
.button.primary:hover,
.button.primary:focus {
  background: linear-gradient(0deg, #f2a67f, #fbe0c8);
  color: #332e28;
}

input[type="submit"].primary:active,
button.primary:active,
.button.primary:active {
  background: #ec8f63;
  color: #ffffff;
}

input[type="submit"].primary.accent,
button.primary.accent,
.button.primary.accent,
input[type="submit"].secondary.accent,
button.secondary.accent,
.button.secondary.accent {
  background: linear-gradient(0deg, #ec8f63, #f2a67f);
  color: #ffffff;
}

input[type="submit"].primary.accent:hover,
input[type="submit"].primary.accent:focus,
button.primary.accent:hover,
button.primary.accent:focus,
.button.primary.accent:hover,
.button.primary.accent:focus,
input[type="submit"].secondary.accent:hover,
input[type="submit"].secondary.accent:focus,
button.secondary.accent:hover,
button.secondary.accent:focus,
.button.secondary.accent:hover,
.button.secondary.accent:focus {
  background: linear-gradient(0deg, #f2a67f, #fbe0c8);
  color: #332e28;
}

input[type="submit"].secondary,
button.secondary,
.button.secondary {
  background: #fcf9f4;
  color: #332e28;
  border: 0.0625rem solid #efe7db;
  box-shadow: none;
}

input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus,
button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
  background: #fbe0c8;
  color: #332e28;
}

input[type="submit"].tertiary,
input[type="submit"] .tertiary,
button.tertiary,
button .tertiary,
.button.tertiary,
.button .tertiary {
  color: #8a5326;
  text-decoration-color: #f2a67f;
}

input[type="submit"].tertiary:hover,
input[type="submit"] .tertiary:hover,
button.tertiary:hover,
button .tertiary:hover,
.button.tertiary:hover,
.button .tertiary:hover {
  background-color: #fbe0c8;
  border-color: #efe7db;
  color: #332e28;
}

#invite {
  background:
    radial-gradient(circle at top left, rgba(251, 224, 200, 0.55), transparent 32rem),
    #fcf9f4;
  background-attachment: fixed;
  background-size: cover;
}

div.powered-by {
  color: #6f665c;
}

div.powered-by > img {
  filter: sepia(0.4) saturate(0.8) hue-rotate(335deg);
}

.qr > img {
  background: #ffffff;
  border: 0.0625rem solid #efe7db;
  border-radius: 0.5rem;
}

div.modal {
  background: rgba(51, 46, 40, 0.58);
}

body > footer {
  background-color: #332e28;
  color: #fcf9f4;
}

body > footer a,
body > footer a:visited,
body > footer a:hover,
body > footer a:active,
body > footer a:focus {
  color: #fcf9f4;
  text-decoration-color: #f2a67f;
}

body > footer a:hover {
  text-decoration-color: #fbe0c8;
}

#topbar > div.admin-note,
.error,
.form-errors,
ul.errors {
  color: #8a2d2d;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #332e28;
    color: #fcf9f4;
  }

  a,
  a:visited {
    color: #f2a67f;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  body#login .form-title {
    color: #fcf9f4;
  }

  div#topbar,
  div.form,
  .box,
  div.elevated,
  main > div.box {
    background-color: #423d37;
    color: #fcf9f4;
    border-color: #6f665c;
  }

  div.form.layout-expanded input[type="text"],
  div.form.layout-expanded input[type="password"],
  div.form.layout-expanded input[type="email"],
  div.form.layout-expanded input[type="tel"],
  div.form.layout-expanded textarea,
  div.form.layout-expanded select,
  div.form.layout-expanded .lwrap span {
    background-color: #332e28;
    color: #fcf9f4;
    border-bottom-color: #f2a67f;
  }

  input[type="submit"].primary,
  button.primary,
  .button.primary {
    background: linear-gradient(0deg, #ec8f63, #f2a67f);
    color: #ffffff;
  }

  input[type="submit"].secondary,
  button.secondary,
  .button.secondary {
    background: #332e28;
    color: #fcf9f4;
    border-color: #6f665c;
  }

  #invite {
    background:
      radial-gradient(circle at top left, rgba(236, 143, 99, 0.22), transparent 32rem),
      #332e28;
  }
}