/* ITWP 1100 - Web Project 3
   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: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

nav a {
    text-decoration: none;
    padding: 10px 14px;
    border: 1px solid #80b5ea;
    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: #fbfbfb;
    border: 1px solid #cfe3f5;
    border-radius: 10px;
    padding: 18px;
    margin: 22px 0;
}

.form-row { margin-bottom: 16px; }
label { display: block; font-weight: bold; margin-bottom: 6px; }

input[type="text"], input[type="email"], select, textarea {
    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 { background: #004b87; }

.inline-output { margin-top: 12px; font-weight: bold; }
.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; }
.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; }

/* Project 3 FAQ section */
#faq-section {
    border-top: 3px solid #0076b6;
    margin-top: 28px;
    padding-top: 22px;
}

#faq-section > p {
    max-width: 900px;
}

#faq {
    margin: 20px 0;
    padding: 0;
    max-width: 900px;
}

#faq dt {
    background: url("images/plus.png") left center / 22px 22px no-repeat;
    color: #0b5ea8;
    font-size: 1.08rem;
    font-weight: bold;
    cursor: pointer;
    margin: 12px 0 6px;
    padding: 8px 0 8px 36px;
    user-select: none;
}

#faq dt.open {
    background-image: url("images/minus.png");
}

#faq dd {
    display: none;
    margin: 0 0 12px 36px;
    padding: 10px 14px;
    border-left: 4px solid #80b5ea;
    background: #f7fbff;
}

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; }
}