/* Color scheme. 
Red - b90707
Black - 030303
Maroon - 5c0605
Mid red - 930504 */

body {
  background-color: #030303;
  margin: 0;
  padding: 0;
}

/* Edge decoration layer */
.edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* behind main content and header accents */
}

.edge-layer .edge {
  position: absolute;
  width: clamp(120px, 18vw, 220px);
  height: auto;
  opacity: 0.55; /* subtle */
  filter: saturate(120%);
}

/* Positions and rotations */
.edge-layer .e1 {
  /* top-left */
  top: 0px;
  left: 0px;
  transform: rotate(90deg);
}

.edge-layer .e2 {
  /* top-right, rotated */
  top: 0px;
  right: 0px;
  transform: rotate(180deg);
}

.edge-layer .e3 {
  /* bottom-left, rotated */
  bottom: -80%;
  right: 0px;
  transform: rotate(270deg);
}

.edge-layer .e4 {
  /* bottom-right, flipped */
  bottom: 28px;
  right: 20px;
  transform: rotate(180deg);
}

.edge-layer .e5 {
  /* mid-left */
  bottom: 50px;
  left: 0px;
  transform: rotate(90deg);
}

.edge-layer .e6 {
  /* mid-right */
  top: 62%;
  right: 0px;
  transform: rotate(270deg);
}

h1 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  margin: 0;
  line-height: 1;
}

.great-vibes {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
  margin-bottom: -20px;
}

.header {
  text-align: center;
  font-size: 2em;
  padding: 50px;
}

.text,
.form {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  padding-top: 10px;
  z-index: 1; /* ensure over decorative edges */
  position: relative; /* ensures background anchors to this element */
  background-image: url("./images/edge-one.png"), url("./images/edge-two.png");
  background-repeat: no-repeat;
  background-position: bottom left, top right; /* or bottom left, etc. */
  background-size: 100px 100px; /* adjust as needed */
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.urgent {
  letter-spacing: 0.08em;
}

.date-badge {
  display: inline-block;
  margin: 18px auto 8px;
  padding: 10px 18px;
  background-color: #b90707;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  border-radius: 4px;
}

.website {
  margin: 10px 0 0;
}

.website a {
  color: #ffffff;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
}

.website a:hover {
  text-decoration: underline;
}

.text-image {
  max-height: min(65vh, 65vw);
  min-width: min(35vh, 65vw);
  height: auto;
  width: auto;
  margin: 0 auto;
  display: block;
}

.chevrons {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  letter-spacing: 8px;
  font-size: 28px;
}

.chevrons span {
  display: inline-block;
  transform: scale(1.6);
}

.chevrons-top-left {
  top: 16px;
  left: 16px;
}

.chevrons-right {
  right: 18px;
  bottom: 30px;
  transform: rotate(90deg);
}

.form .left-corner {
  border-bottom-color: #5c060587;
}

.form .right-corner {
  border-top-color: #93050487;
}

.red {
  color: #b90707;
}

.white {
  color: white;
}

.form h3 {
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0.8rem;
}

.form-group {
  margin-bottom: 0.5rem;
}

.form-group label {
  display: block;
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.form {
  display: flex;
  flex-direction: column;
  /* Allow children to stretch full width; container will center inner content */
  align-items: stretch;
  padding: auto;
  padding-top: 100px;
  margin: 0;
  position: relative;
  z-index: 1; /* ensure over decorative edges */
}

#signupForm {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.5rem;
  border: 3px solid #5c0605;
  border-radius: 5px;
  background-color: #030303;
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #b90707;
}

.form-group input::placeholder {
  color: #666;
}

.form-group select option {
  background-color: #030303;
  color: white;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background-color: #b90707;
  color: white;
  border: none;
  border-radius: 5px;
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 1rem;
}

.submit-btn:hover {
  background-color: #930504;
}

.submit-btn:active {
  background-color: #5c0605;
}

/* Constrain the form content and make it responsive */
.sign-up {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px; /* small side padding on mobile */
  box-sizing: border-box;
}

/* Responsive Google Form iframe */
.google-form-iframe {
  width: 100%;
  max-width: 100%;
  height: 1261px; /* base height provided */
  border: 0;
  background: #030303;
  box-shadow: 0 0 0 3px #5c0605; /* subtle frame echoing theme */
  border-radius: 6px;
}

@media (min-width: 720px) {
  .google-form-iframe {
    height: 1200px; /* slight adjustment for wider layout */
  }
}

@media (min-width: 1024px) {
  .google-form-iframe {
    height: 1150px; /* tune as needed if internal scrolling shows */
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .date-badge {
    padding: 8px 14px;
    font-size: 0.95rem;
  }

  .chevrons-top-left {
    top: 10px;
    left: 10px;
  }

  .chevrons-right {
    right: 10px;
    bottom: 20px;
  }
  .chevrons {
    font-size: 24px;
    letter-spacing: 7px;
  }
}

@media (min-width: 768px) {
  .text,
  .form {
    background-size: 200px 200px; /* adjust as needed */
  }

  .chevrons {
    font-size: 100px;
  }

  #signupForm {
    width: 100%;
  }

  /* No fixed min-width on fields; container above handles max sizing */
}

/* Inline status messages for form submission */
.status {
  margin-top: 0.75rem;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  min-height: 1.2em; /* reserve space to avoid layout shift */
}

.status--info {
  color: #dddddd;
}

.status--success {
  color: #4caf50; /* green */
}

.status--error {
  color: #ff6b6b; /* soft red */
}