/* Edit this file to change the look and feel of your website. */
:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182334;
  background: #f8f9fc;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.site-header { background: #fff; border-bottom: 1px solid #e7e9ef; }
.nav { max-width: 1050px; min-height: 76px; margin: auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; margin-right: 5px; background: #273e91; color: white; border-radius: 9px; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: #3654ba; }
.nav-cta { color: #fff !important; background: #273e91; border-radius: 9px; padding: 11px 16px; }
.nav-cta:hover { background: #1c2d70; }
.nav-form { margin: 0; }
.nav-button { border: 0; background: none; color: #334155; cursor: pointer; padding: 5px 0; }
main { flex: 1; }
.hero { max-width: 1050px; margin: 0 auto; padding: 85px 28px 65px; }
.hero-compact { padding-bottom: 34px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .17em; color: #465fc1; }
h1 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -.055em; line-height: 1.09; margin: 18px 0 16px; }
p { line-height: 1.7; }
.hero p { color: #617084; font-size: 17px; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.button { display: inline-block; border: 1px solid transparent; border-radius: 10px; padding: 13px 20px; font-size: 14px; font-weight: 750; text-align: center; cursor: pointer; }
.button-primary { color: #fff; background: #273e91; }
.button-primary:hover { background: #1c2d70; }
.button-outline { border-color: #cfd5e1; background: #fff; }
.button-outline:hover { background: #eef1fa; }
.blank-section { max-width: 994px; margin: 0 auto 70px; min-height: 260px; padding: 20px; border: 2px dashed #d9deeb; border-radius: 18px; background: #fff; }
.blank-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; text-align: center; color: #8590a3; font-size: 13px; }
.blank-hint strong { color: #66758f; font-size: 16px; }
.blank-plus { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #edf0fa; color: #5165ad; font-size: 28px; line-height: 1; }
code { color: #4052a0; font-size: .93em; }
.auth-page { display: flex; justify-content: center; padding: 70px 20px 90px; }
.auth-card { width: 100%; max-width: 435px; padding: 40px; border: 1px solid #e7e9f0; border-radius: 18px; box-shadow: 0 18px 45px rgba(24,35,52,.055); background: white; }
.auth-card h1 { font-size: 33px; margin: 12px 0 6px; }
.subtle { color: #738094; margin: 0 0 27px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form label { font-size: 13px; font-weight: 700; margin-top: 10px; }
.auth-form input { width: 100%; padding: 13px 14px; border: 1px solid #d6dce7; border-radius: 9px; background: #fff; outline: none; }
.auth-form input:focus { border-color: #6178d3; box-shadow: 0 0 0 3px rgba(97,120,211,.14); }
.muted { color: #8a95a6; font-weight: 400; }
.button-full { width: 100%; margin-top: 15px; }
.auth-bottom { margin: 25px 0 0; text-align: center; color: #748195; font-size: 13px; }
.auth-bottom a { color: #273e91; font-weight: 750; }
.flash-wrap { max-width: 994px; padding: 16px 0 0; margin: 0 auto; }
.flash { padding: 13px 16px; border-radius: 10px; font-size: 14px; }
.flash-error { border: 1px solid #f1c7cd; background: #fff0f2; color: #a52d41; }
.flash-success { border: 1px solid #bee3ce; background: #eefbf4; color: #226847; }
.site-footer { padding: 27px; border-top: 1px solid #e7e9ef; color: #929cad; text-align: center; font-size: 12px; }
@media (max-width: 650px) {
  .nav { padding: 14px 17px; flex-wrap: wrap; }
  .nav-links { gap: 12px; }
  .hero { padding: 55px 20px 40px; }
  .blank-section { margin: 0 16px 50px; }
  .auth-card { padding: 28px 22px; }
  .flash-wrap { padding: 12px 16px 0; }
}

.engineering-sections {
    padding: 45px 20px;
    text-align: center;
}

.engineering-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(230px, 1fr)
    );
    gap: 20px;
    margin-top: 30px;
}

.engineering-card {
    background: #ffffff;
    color: #222222;
    padding: 30px;
    border-radius: 14px;
    border: 1px solid #dddddd;
    text-decoration: none;
    transition: 0.2s;
}

.engineering-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px #00000018;
}

.engineering-card h3 {
    color: #2563eb;
}

.engineering-card span {
    color: #2563eb;
    font-weight: bold;
}

.content-section {
    padding: 40px 20px;
    margin: 25px 0;
    border: 1px solid #dddddd;
    border-radius: 14px;
}



/* Account settings add-on */
.account-settings {max-width: 690px; margin: 0 auto; padding: 28px 16px 48px;}
.account-panel {display: grid; gap: 12px; padding: 24px; border: 1px solid #8792a1;
  border-radius: 12px; margin: 20px 0;}
.account-panel input {font: inherit; border: 1px solid #64748b; border-radius: 6px;
  padding: 11px 12px; max-width: 100%; width: 100%; box-sizing: border-box;}
.account-panel label {font-weight: 600;}
.account-panel input:focus-visible, .account-settings a:focus-visible,
.account-panel button:focus-visible {outline: 3px solid #2563eb; outline-offset: 3px;}
.account-panel button {justify-self: start; cursor: pointer;}
.account-help {text-align: center;}
/* Theme toggle */
.theme-toggle {
  padding: 8px 12px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none !important;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Page background */
html[data-theme="dark"] body,
html[data-theme="dark"] #main-content,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .engineering-sections,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .portal-footer-links {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Navigation and cards */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .engineering-card {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .engineering-card:hover {
  background: #27364c !important;
  border-color: #93c5fd !important;
}

/* Headings and text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .engineering-sections p {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .engineering-card > span,
html[data-theme="dark"] .portal-footer-links a {
  color: #93c5fd !important;
}

html[data-theme="dark"] .nav-links > a,
html[data-theme="dark"] .nav-button {
  color: #e2e8f0 !important;
}

/* Buttons */
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] .nav-links > .nav-cta {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .theme-toggle {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
}

html[data-theme="dark"] .button-outline:hover,
html[data-theme="dark"] .theme-toggle:hover {
  background: #334155 !important;
}

/* Keep the navy logo readable */
html[data-theme="dark"] .site-header .brand {
  background: #ffffff !important;
  border-radius: 8px;
}

/* Keyboard focus */
.theme-toggle:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

html[data-theme="dark"] :focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}


/* DARK MODE LOGIN CONTRAST */

html[data-theme="dark"] .auth-card {
    background: #ffffff !important;
    color: #1e293b !important;
}

html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .auth-card h3,
html[data-theme="dark"] .auth-card label,
html[data-theme="dark"] .auth-card p {
    color: #1e293b !important;
}

html[data-theme="dark"] .auth-card input {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="dark"] .auth-card input::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] .auth-card a {
    color: #284fc4 !important;
}

/* DARK MODE NAVIGATION */

html[data-theme="dark"] .site-header a {
    color: #f1f5f9;
}

html[data-theme="dark"] .site-header button {
    color: #f1f5f9;
}

/* MOBILE HEADER FIX */

@media (max-width: 650px) {
    .site-header {
        padding-top: max(54px, env(safe-area-inset-top));
    }

    .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 14px;
    }

    .nav-links a,
    .nav-links button {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    #theme-toggle {
        white-space: nowrap;
    }
}