/* Estilizações principais
==========================================*/
@import url(/css/common.css);

html {
  scroll-behavior: smooth;
  font-size: 18px;
}

body {
  --gold-theme-color: #ba9034;
  --main-theme-color: #D7B24C;
  --light-theme-color: yellow;

  margin: 0;
  padding: 0;
  min-height: 100vh;
  line-height: 150%;
  overflow: hidden;

  font-family: 'Open Sans', sans-serif;
/*
  background: rgb(194,194,194);
  background: radial-gradient(circle, rgba(194,194,194,1) 0%, rgba(161,166,166,1) 100%); */

}

div#raiz {
  width: 100vw;
  height: 100vh;

  background-image: url('./imagens/fundo.png');
  background-size: cover;

  display: flex;
  flex-flow: column nowrap;
  align-items: center;

  z-index: -1;
}

img {
  width: 100%;
}

.vis-hidden {
  display: none !important;
}

/* Estilizações HEADER */
#raiz > header {
  margin: 4rem 0 0;
  z-index: 1;
}

header > img {
  height: 100%;
  width: 30vw;
  object-fit: contain;
}
/* Estilizações MAIN */
#raiz > main {
  margin: auto 0;
  z-index: 2;
}

main#conteudo {
  width: 100%;
  height: auto;

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

div.apresentacao {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;

  max-width: 25%;
}

#mobile-hr {
  display: none;
  width: 75%;
  color: var(--main-theme-color);
  margin: 1.5rem 0;
}

img[alt="Notebook Professor Elton"] {
  width: 100%;
  margin-bottom: 1rem;
}

img[alt="Data e Horário"] {
  width: 100%;
  align-self: self-end;
}

img[alt="Linha Divisoria"] {
  width: 1px;
  height: 100%;
  margin: 0 2rem 0 1.5rem;
}

img[alt="Texto Formulario Inscricao"] {
  width: 320px;
  margin-bottom: 1.5rem;
}

/* Estilizações FORM */
form#formulario {
  margin: 0;
  padding: 1rem;
  position: relative;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: self-start;

  min-width: 25vw;

  background-color: #ececec;
  border: 1px solid transparent;
}

#formulario[data-ok=true] {
  border-color:limegreen;
}

#formulario[data-erro=true] {
  border-color:crimson;
}

#formulario > * {
  margin-bottom: .5rem;
}

form#formulario > span {
  display: block;
  font-size: .7rem;
}

div.caixa-input, div.caixa-input {
  border: 0;
  border-bottom: 2px solid var(--gold-theme-color);
}

div.caixa-select {
  padding: 0;
  width: 3.2rem;
  position: relative;
  display: flex;
  align-items: center;
}

div.caixa-select::after {
  position: absolute;
  right: 0;
  border-color: #000;
  border-right: 2px solid;
  border-bottom: 2px solid;
  content: '';
  transform: translate(-75%, -15%) scale(.7, .85) rotate(45deg);
  width: .6rem;
  aspect-ratio: 1;
  pointer-events: none;
}

div.caixa-select > select.campo-select {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--gold-theme-color);
  padding: 0;
  appearance: none;
  box-sizing: border-box;
  cursor: pointer;
}

div.caixa-select > select.campo-select > option:not([value=""]) {
  color: initial;
}

div.caixa-select > select.campo-select > option[value=""] {
  display: none;
}

div.caixa-select > label {
  position: absolute;
  pointer-events: none;
}

div.caixa-select > label[required]::after {
  left: .1rem;
}

div.caixa-select:not([data-valido="null"]) > label {
  display: none;
}

div.caixa-select[data-valido="null"] > select.campo-select {
  color: #8e8e8e;
}

div.caixa-input {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  position: relative;

  transition: border-color 200ms ease-out;
}

div.caixa-input[data-valido=null],
div.caixa-input[data-valido=true] {
  border-color: var(--gold-theme-color);
}

div.caixa-input[data-valido=false] {
  border-color: crimson;
}

div.caixa-input > ul {
  display: none;
}

div.caixa-input:focus-within > ul, div.caixa-input > ul:hover {
  display: initial;
}

#cidade-estado {
  display: flex;
  flex-flow: row wrap;
  column-gap: .5rem;
  width: 100%;
}

#cidade-estado > label {
  width: 100%;
  font-size: .7rem;
  line-height: 1.5;
}

#cidade-estado > .caixa-select {
  flex: 1;
}

#cidade-estado > .caixa-input {
  flex: 5;
}

#cidade-estado:has(.caixa-select[data-valido=null]) > .caixa-input {
  filter: grayscale(100%);
}

#formulario input {
  outline: none;
  border: 0;
}

.caixa-input > label,
.caixa-select > label {
  text-transform: uppercase;
  margin-right: 4px;
  white-space: nowrap;
}

input.campo-texto {
  padding: 0;
  width: 100%;
  border: 0 solid transparent;

  background-color: transparent;
  font-size: 0.9rem;
}

#formulario > input[name=enviar] {
  margin: .5rem 0 0;
  font-size: 1rem;
  padding: .3rem 0;
  width: 100%;

  background-color: var(--main-theme-color);
  border: 1px solid black
}

#formulario > input[name=enviar][disabled] {
  filter: grayscale(90%);
}

#form-minimizado {
  /* position: absolute; */
  color: lime;
  /* top: calc(50% - 15px);
  left: calc(100% - 310px); */

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 1.5rem;
}

/* Estilizações FOOTER */
#raiz > footer {
  margin: 0;
  z-index: 1;
  width: 100%;
}

footer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul.select-list {
  z-index: 10;
  position: absolute;
  list-style-type: none;

  margin: 0;
  padding: 0;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;

  background-color: #fff;
  top: 100%;
  left: 0;

  box-sizing: border-box;
  width: 100%;
  max-height: 144px;
  padding: .25rem .5rem;

  overflow-y: scroll;

  border: 1px solid var(--gold-theme-color);
  border-top: 2px solid var(--gold-theme-color);
}

ul.select-list > li {
  cursor: pointer;
  font-size: .8rem;
}

ul.select-list > li[selected] {
  background-color: #dedede;
}

ul.select-list > li:hover {
  background-color: #cecece;
}

@media screen and (max-width: 1000px) {
  header > img {
    transform: scale(2)
  }

  main#conteudo {
    flex-flow: column nowrap;
  }

  img[alt="Linha Divisoria"] {
    display: none;
  }

  main#conteudo > div.apresentacao:last-of-type {
    max-width: initial;
  }

  #mobile-hr {
    display: block;
  }

  footer {
    height: 128px;
  }
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
  main#conteudo {
    margin: 1.25rem 0;
  }

  img[alt="Texto Formulario Inscricao"] {
    margin-bottom: .75rem;
  }

  main#conteudo > div.apresentacao:first-of-type {
    max-width: 30%;
  }
}

@media screen and (max-width: 900px) {
  main#conteudo > div.apresentacao:first-of-type {
    max-width: 35%;
  }
}

@media screen and (max-width: 800px) {
  main#conteudo > div.apresentacao:first-of-type {
    max-width: 50%;
  }
}

@media screen and (max-width: 640px) {
  main#conteudo > div.apresentacao:first-of-type {
    max-width: 60%;
  }
}

@media screen and (max-width: 450px) {
  main#conteudo > div.apresentacao:first-of-type {
    max-width: 75%;
  }
}