/* ITWP 1100 - Web Project 2
   Theme: Detroit Lions Fan Site
*/

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  line-height: 1.6;
  color: #111;
  background: #f4f7fb;
}

.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
}

header {
  padding: 20px 20px 10px;
  border-bottom: 3px solid #0076b6;
  background: linear-gradient(to right, #ffffff, #eef6fb);
}

header h1 {
  margin: 0 0 16px;
  color: #004b87;
}

header img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

nav a {
  text-decoration: none;
  padding: 10px 14px;
  border: 1px solid #0b5ea8;
  border-radius: 8px;
  color: #0b5ea8;
  font-weight: bold;
  background: #fff;
}

nav a:hover,
nav a:focus,
nav a.active {
  background: #0b5ea8;
  color: #fff;
}

main {
  padding: 24px 20px 10px;
}

h2, h3 {
  color: #004b87;
}

figure {
  margin: 18px 0;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

figcaption {
  margin-top: 8px;
  font-style: italic;
}

.panel {
  background: #f8fbff;
  border: 1px solid #cfe3f5;
  border-radius: 10px;
  padding: 18px;
  margin: 22px 0;
}

.form-intro {
  background: #edf7ff;
  border-left: 5px solid #0076b6;
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.welcome-message {
  font-weight: bold;
  color: #004b87;
  margin: 10px 0 18px;
}

form {
  margin-top: 10px;
}

.form-row {
  margin-bottom: 16px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}

input,
select,
textarea,
button {
  font: inherit;
}

input[type="text"],
input[type="email"],
textarea,
select {
  width: 100%;
  max-width: 700px;
  padding: 10px 12px;
  border: 1px solid #888;
  border-radius: 6px;
  background: #fff;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

button,
input[type="submit"],
input[type="button"] {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #0076b6;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  background: #004b87;
}

.inline-output {
  margin-top: 12px;
  font-weight: bold;
}

.error-text {
  display: block;
  color: #b00020;
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 0.95rem;
}

.input-error {
  border-color: #b00020 !important;
  background: #fff6f7;
}

.success-box,
.error-box {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
}

.success-box {
  background: #edfbea;
  border: 1px solid #73a85f;
}

.error-box {
  background: #fff5f5;
  border: 1px solid #d36a6a;
}

footer {
  padding: 18px 20px 28px;
  border-top: 1px solid #ddd;
  margin-top: 24px;
  font-size: 0.96rem;
}

footer p {
  margin: 8px 0;
}

.validation-link {
  display: inline-block;
  margin-top: 8px;
}

@media (max-width: 700px) {
  header,
  main,
  footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  nav ul {
    flex-direction: column;
  }

  nav a {
    display: block;
  }
}