/* public/files/noid.css */
/* Minimal subset from global.css for noid.twig */

@charset "UTF-8";

/* Reset essentials */
html, body, div, span, h1, h2, h3, p, a, img, form, label, input, button, section {
  margin: 0; padding: 0; border: 0; background: transparent; font: inherit; vertical-align: baseline;
}
article, aside, footer, header, section { display: block; }
*, *::before, *::after { box-sizing: border-box; }

/* Base text */
body {
  background: #eaeaea;
  color: #333;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font: 400 16px/1.5 -apple-system,BlinkMacSystemFont,"avenir next",avenir,"helvetica neue",helvetica,ubuntu,roboto,noto,"segoe ui",arial,sans-serif;
}

/* Container block */
#container {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  padding: 40px 15px 0;
  background: #fafafa;
}
@media (min-width: 414px) { #container { padding: 50px 30px 0; } }
@media (min-width: 522px) { #container { border-radius: 12px; } }
@media (min-width: 600px) {
  #container {
    width: calc(100% - 80px);
    margin: 40px auto 0;
    padding: 50px;
    box-shadow: 0 0 20px rgba(0,0,0,.05), 0 20px 40px rgba(0,0,0,.05);
  }
}

/* Wallpaper overlay (kept for same look) */
.wallpaper { background: transparent top no-repeat; background-size: cover; display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.wallpaper__shroud { background: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

/* Blurred header bg element (hidden on many screens, keep to preserve structure) */
.header--blurred-wallpaper {
  background: rgba(53,53,53,.43) top no-repeat;
  background-size: cover;
  filter: blur(12px) brightness(36%) invert(.12);
  height: 100vh;
  left: -50vw;
  margin-left: 190px;
  position: absolute;
  top: -30px;
  width: 100vw;
  margin-top: -107px;
  display: none !important;
}

/* Logo block (hidden on small screens by media queries) */
.logo { display: block; visibility: hidden; height: 75px; margin: 0 auto 30px; position: relative; width: 320px; }
.logo__retina {
  background: transparent 50% no-repeat;
  height: 150px;
  left: 50%;
  margin: -75px 0 0 -320px;
  position: absolute;
  top: 50%;
  transform: scale(.5);
  width: 640px;
}

/* Wrapper to vertically center on tall screens */
@media (min-height: 752px) {
  .wrapper__form { min-height: calc(100vh - 254px); display: flex; align-items: center; }
}

/* Inputs and button */
input[type="text"] {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #111;
  height: 44px;
  padding: 8px 10px;
  width: 100%;
  max-width: 320px;
  margin: 8px 8px 8px 0;
}
button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  height: 44px;
  padding: 0 16px;
  background: #07f;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button:hover, button:focus { filter: brightness(105%); }

/* Footer + disclaimer */
.footer { min-height: 1px; margin-left: auto; margin-right: auto; }
.footer::after { content: ""; display: block; clear: both; }

.disclaimer {
  font-size: 14px;
  line-height: 14px;
  text-decoration: none;
  text-align: center;
  color: #666;
  margin: 20px auto;
}
@media (min-width: 600px) { .disclaimer { margin: 30px auto 0; } }
.disclaimer__link {
  font-size: 14px; line-height: 14px; text-decoration: none; text-align: center; color: #666;
  position: relative; display: inline-block;
}

/* Small responsive tweaks to match other pages */
@media (max-width: 460px) {
  body { padding-top: 0; }
  #logo { display: none; }
}
@media (max-height: 700px) {
  #logo { display: none; }
}
