/* ============================================================
   Micromouse Senior Design Site — styled after ND web theme
   ============================================================ */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.6;
}

a { color: #002b5c; text-decoration: underline; }
a:hover { color: #c99700; }

/* ---------- Top utility bar ---------- */
.utility-bar {
    background: #002b5c;
    color: #fff;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}
.utility-bar a {
    color: #fff;
    text-decoration: none;
    margin-right: 1rem;
}
.utility-bar a:hover { color: #c99700; }

/* ---------- Header ---------- */
header.site-header {
    background: #fff;
    border-bottom: 4px solid #c99700;
    padding: 1.25rem 1.5rem;
}
header.site-header .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
header.site-header .nd-line {
    font-size: 0.85rem;
    color: #555;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
header.site-header .nd-line a { color: #555; text-decoration: none; }
header.site-header .nd-line a:hover { color: #002b5c; }
header.site-header .program-line {
    font-size: 1rem;
    font-weight: 600;
    color: #002b5c;
}
header.site-header .program-line a { color: #002b5c; text-decoration: none; }

/* ---------- Primary nav ---------- */
nav.primary {
    background: #002b5c;
    border-bottom: 1px solid #001a3a;
}
nav.primary ul {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
nav.primary li { margin: 0; }
nav.primary a {
    display: block;
    padding: 0.9rem 1.25rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
nav.primary a:hover {
    background: #001a3a;
    color: #fff;
}
nav.primary a.active {
    border-bottom-color: #c99700;
    background: #001a3a;
}

/* ---------- Page content wrapper ---------- */
main.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* ---------- Page titles ---------- */
h1.page-title {
    color: #002b5c;
    font-size: 2.5rem;
    margin: 0 0 0.25rem;
    font-weight: 700;
}
.tagline {
    font-size: 1.15rem;
    color: #555;
    margin: 0 0 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid #e6e6e6;
}

h2 {
    color: #002b5c;
    font-size: 1.75rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid #c99700;
    padding-left: 0.75rem;
}
h3 {
    color: #002b5c;
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

p { margin: 0 0 1rem; }

/* ---------- Image placeholders ---------- */
.placeholder {
    width: 100%;
    /*background: #f2f2f2;*/
    /*border: 2px dashed #c0c0c0;*/
    color: #888;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    border-radius: 4px;
    margin: 1rem 0;
}
.placeholder.small { aspect-ratio: 4/3; max-width: 320px; }
.placeholder.medium { aspect-ratio: 16/10; max-width: 640px; }
.placeholder.wide { aspect-ratio: 16/9; }
.placeholder.banner { aspect-ratio: 16/2; }
.placeholder.square { aspect-ratio: 1/1; max-width: 280px; }
.placeholder.portrait { aspect-ratio: 3/4; max-width: 240px; }

/* Replace placeholder with real image: <img class="figure" src="...">  */
img.figure {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
    display: block;
}

.figure-caption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

/* ---------- Team grid ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}
.team-card {
    text-align: center;
}
.team-card .placeholder.portrait {
    margin: 0 auto 0.75rem;
}
.team-card h3 {
    margin: 0.5rem 0 0.25rem;
    color: #002b5c;
}
.team-card .role {
    font-size: 0.95rem;
    color: #c99700;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}
.team-card p {
    font-size: 0.95rem;
    color: #444;
    text-align: center;
}

/* ---------- File / module sections ---------- */
.module {
    background: #f8f9fb;
    border-left: 4px solid #002b5c;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
}
.module h3 {
    margin-top: 0;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1.1rem;
    color: #002b5c;
}
.module h3 .file-ext { color: #c99700; }

/* ---------- Two-column figure row ---------- */
.figure-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.figure-row figure { margin: 0; }
.figure-row figcaption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
    font-style: italic;
}

/* ---------- Specs / list styling ---------- */
ul.spec-list {
    list-style: none;
    padding: 0;
}
ul.spec-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}
ul.spec-list li strong { color: #002b5c; }

/* ---------- Download button ---------- */
.download-btn {
    display: inline-block;
    background: #002b5c;
    color: #fff !important;
    padding: 0.85rem 1.75rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    transition: background 0.15s;
}
.download-btn:hover {
    background: #c99700;
    color: #fff !important;
}

/* ---------- Footer ---------- */
footer.site-footer {
    background: #002b5c;
    color: #cfd6e1;
    padding: 2.5rem 1.5rem;
    margin-top: 3rem;
    font-size: 0.9rem;
}
footer.site-footer .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
footer.site-footer a { color: #fff; }
footer.site-footer .footer-meta {
    color: #aab4c4;
    font-size: 0.85rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    h1.page-title { font-size: 2rem; }
    nav.primary a { padding: 0.75rem 1rem; }
}