/* Formula X — Base Styles */
/* Reset + root variables */

<link rel="stylesheet" href="/assets/css/fx-style.css">
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; line-height: 1.6; }

:root{
  --fx-primary: #E10600;        /* Formula red */
  --fx-primary-600:#b80500;
  --fx-bg: #ffffff;
  --fx-surface: #f7f8fa;
  --fx-elev: #ffffff;
  --fx-text: #1e2329;
  --fx-text-muted:#5b6573;
  --fx-border:#e5e7eb;
  --fx-ring: rgba(225,6,0,.25);
  --fx-radius: 14px;
  --fx-shadow: 0 6px 24px rgba(15,23,42,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --fx-bg:#0b0f14;
    --fx-surface:#0f141b;
    --fx-elev:#121a23;
    --fx-text:#e7ecf4;
    --fx-text-muted:#a7b0be;
    --fx-border:#1f2a36;
    --fx-shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}

body{ background: var(--fx-bg); color: var(--fx-text); }
img{ max-width:100%; height:auto; }
a{ color: var(--fx-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Layout */
.container{ width: min(1100px, 92%); margin: 0 auto; }
.section{ padding: 48px 0; }
.grid{ display:grid; gap: 20px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 920px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 680px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

/* Header / Nav */
.header{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--fx-border);
}
@media (prefers-color-scheme: dark){
  .header{ background: rgba(11,15,20,.6); }
}
.header.scrolled{ box-shadow: var(--fx-shadow); }

.nav{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; }
.brand .logo{ width:34px; height:34px; border-radius:50%; background: var(--fx-primary); display:inline-block; }
.navlinks{ display:flex; gap:18px; align-items:center; }
.navlinks a{ padding:10px 12px; border-radius:10px; color: var(--fx-text); }
.navlinks a.active, .navlinks a:hover{ background: var(--fx-surface); text-decoration:none; }
.nav-cta{ margin-left:10px; }

.burger{ display:none; background:none; border:0; width:42px; height:42px; border-radius:10px; }
@media (max-width: 820px){
  .burger{ display:inline-grid; place-items:center; }
  .navlinks{ position: absolute; left:0; right:0; top:64px; display:none; flex-direction:column; padding:12px; background:var(--fx-elev); border-bottom:1px solid var(--fx-border); }
  .navlinks.open{ display:flex; }
}

/* Hero */
.hero{
  padding: 64px 0 36px;
  background: linear-gradient(135deg, var(--fx-elev), var(--fx-surface));
  border-bottom: 1px solid var(--fx-border);
}
.hero h1{ font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; letter-spacing:.3px; }
.hero p{ color: var(--fx-text-muted); margin: 0; }

/* Cards / Surfaces */
.card{
  background: var(--fx-elev);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-radius);
  box-shadow: var(--fx-shadow);
  padding: 18px 18px;
}
.card h3{ margin-top:0; }

/* Table */
.table{
  width:100%; border-collapse: collapse; background: var(--fx-elev);
  border:1px solid var(--fx-border); border-radius: var(--fx-radius); overflow: hidden;
}
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--fx-border); text-align:left; }
.table thead th{ background: var(--fx-surface); font-weight:600; }
.table tr:last-child td{ border-bottom:0; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background:var(--fx-primary); color:#fff; font-weight:600; cursor:pointer;
  transition: transform .02s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(225,6,0,.28);
}
.btn:hover{ text-decoration:none; background: var(--fx-primary-600); }
.btn:active{ transform: translateY(1px); }
.btn.outline{ background:transparent; color: var(--fx-primary); border-color: var(--fx-primary); box-shadow:none; }
.btn.ghost{ background:var(--fx-surface); color:var(--fx-text); border-color:var(--fx-border); }

/* Badges / Pills */
.badge{
  display:inline-block; padding:4px 8px; font-size:12px;
  border-radius:999px; background: var(--fx-surface); border:1px solid var(--fx-border); color: var(--fx-text-muted);
}
.badge.primary{ background: rgba(225,6,0,.1); border-color: rgba(225,6,0,.2); color: var(--fx-primary); }

/* Forms */
.input, textarea, select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--fx-border);
  background: var(--fx-elev); color: var(--fx-text);
  outline: none;
}
.input:focus, textarea:focus, select:focus{ border-color: var(--fx-primary); box-shadow: 0 0 0 4px var(--fx-ring); }
label{ display:block; font-weight:600; margin-bottom:6px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width:680px){ .form-row{ grid-template-columns:1fr; } }

/* Alerts */
.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:12px; border:1px solid var(--fx-border);
  background: var(--fx-surface);
}
.alert.success{ background: #10b9811a; border-color:#10b98133; }
.alert.warn{ background: #f59e0b1a; border-color:#f59e0b33; }
.alert.error{ background: #ef44441a; border-color:#ef444433; }
.alert .close{ margin-left:auto; background:transparent; border:0; cursor:pointer; font-size:18px; }

/* Footer */
.footer{
  border-top:1px solid var(--fx-border); margin-top:32px; padding:22px 0; color: var(--fx-text-muted);
}
.footer .links{ display:flex; flex-wrap:wrap; gap:12px; }

/* Utilities */
.m0{ margin:0!important; } .mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.mb8{ margin-bottom:8px; } .mb16{ margin-bottom:16px; } .mb24{ margin-bottom:24px; }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* DSR list styling (Driving Standards Regulations) */
.dsr-list{ list-style: none; padding:0; margin:0; display:grid; gap:12px; }
.dsr-list li{
  background: var(--fx-elev); border:1px solid var(--fx-border); border-radius:12px; padding:12px 14px;
}
.dsr-list li strong{ color: var(--fx-primary); }

/* Steward Updates feed (no backend; uses localStorage) */
.updates{
  display:grid; gap:12px; margin-top:16px;
}
.update{
  padding:12px 14px; border:1px solid var(--fx-border); border-radius: 12px; background: var(--fx-elev);
}
.update time{ display:block; font-size:12px; color:var(--fx-text-muted); }

/* Center the submission notice */
#formNotice.alert{
  position: relative;
  text-align: center;     /* center the text */
  max-width: 720px;       /* optional: keep it neat */
  margin: 0 auto 16px;    /* center the box itself */
  padding: 12px 44px;     /* add room for the close button */
}
#formNotice.alert .close{
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  color: #9aa3af;
  cursor: pointer;
}