/*
Theme Name: WE SMS Theme
Theme URI: https://www.wienenergie.at
Author: Michael Goldbeck
Description: The theme handling all necessary functions to enable the sms service of Wien Energie
Version: 1.0.2
Text Domain: we-sms
*/

/* Defining variables */
:root {
  --primary: #eb6626;
  --secondary: #000460;
  --tertiary: #005391;
  --font: #505558;
  --error: #db0033;
}

/*
 * Frontend
 */
body {
  background-color: #f7f8f8;
  margin: 0;
}

.site {
  color: var(--font);
  font-family: "Fira Sans", arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.site a {
  color: var(--secondary);
}

/*
 * Header
 */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.site-header {
  align-items: center;
  background-color: var(--primary);
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

.site-header .site-logo {
  max-width: 200px;
  min-width: 150px;
  width: 100%;
}

.site-header .description {
  color: white;
  font-size: 0.9em;
}

/*
 * Main content area
 */
.site-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
}

.page-title {
  color: var(--secondary);
  margin: 0;
  text-align: center;
}

.site-footer {
  margin-top: 5rem;
}

.site-footer ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.site-footer li {
  margin: 0 0.5rem 0 0.5rem;
}

.page-description {
  max-width: 500px;
  text-align: center;
}

/*
 * Forms
 */

form {
  display: flex;
  margin-top: 1em;
  max-width: 400px;
  width: 100%;
}

fieldset {
  background-color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 0 22px 45px #0000001c;
  display: flex;
  flex-direction: column;
  padding: 2em;
  width: 100%;
}

fieldset legend {
  background-color: var(--tertiary);
  border-radius: 5px;
  box-shadow: 0 22px 45px #0000001c;
  color: white;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5em 1.5em;
  width: auto;
}

.form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.5em 0;
}

.form-row label {
  font-size: 0.9em;
}

.response-button {
  align-content: center;
  border-radius: 0.25em;
  display: flex;
  font-size: 1em;
  justify-content: center;
  line-height: 1em;
  padding: 1em;
}

.response-button.accept {
  background-color: #eaeaea78;
}

.response-button.decline {
  background-color: #eaeaea78;
  margin-bottom: 1.5em;
}

.checkbox {
  align-items: center;
  display: flex;
  flex-direction: row;
  margin: 0.5em 0 1em 0;
}

.checkbox input[type="checkbox"] {
  margin-right: 0.5em;
}

input,
button {
  border-radius: 0.25em;
  font-size: 1em;
  line-height: 1em;
  padding: 0.5em 1em;
}

button {
  padding: 0.75em;
}

input:focus {
  outline: max(2px, 0.15em) solid #d6d6d6;
  outline-offset: max(2px, 0.15em);
}

input[type="text"],
input[type="tel"] {
  border: 0.15em solid var(--tertiary);
  box-sizing: border-box;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--tertiary);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--tertiary);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

button {
  background-color: var(--secondary);
  border: 0;
  color: white;
  cursor: pointer;
}

/*
 * Messages
 */

.message {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 22px 45px #0000001c;
  display: flex;
  margin-bottom: 2em;
  max-width: 400px;
  padding: 2em;
  text-align: center;
  width: 100%;
}

.message.error {
  border-bottom: 3px solid var(--error);
}

.message.info {
  border-bottom: 3px solid var(--secondary);
}