/*
  KCS Network design system — matched to the live marketing site
  (kcs-network.com), reviewed and extracted 2026-08-15:
    - Fonts:  headings "Plus Jakarta Sans" (600), body "DM Sans" (400)
    - Brand red:    #EB1C24  (CTA buttons, accents, active states)
    - Ink/navy:     #1C1A23  (headings, primary text, nav on light bg)
    - Muted gray:   #7B7882  (body copy, secondary text)
    - Panel gray:   #EEEDEE  (card backgrounds, input fields, sections)
    - Card radius:  26px      Button radius: 30px (pill)   Input radius: 10px
  This is the real client brand, not a placeholder — matches every page.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --kcs-red: #EB1C24;
  --kcs-red-dark: #C4141B;
  --kcs-ink: #1C1A23;
  --kcs-muted: #7B7882;
  --kcs-panel: #EEEDEE;
  --kcs-border: #E2E0E2;
  --kcs-white: #FFFFFF;
  --kcs-radius-card: 26px;
  --kcs-radius-pill: 30px;
  --kcs-radius-input: 10px;
}

* { box-sizing: border-box; }

body {
  font-family: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--kcs-white);
  color: var(--kcs-muted);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  color: var(--kcs-ink);
  margin: 0 0 .5rem;
  line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; margin-top: 2.5rem; }

a { color: var(--kcs-red); text-decoration: none; font-weight: 600; }
a:hover { color: var(--kcs-red-dark); }

/* ---------- Site header (matches kcs-network.com nav) ---------- */

header.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid var(--kcs-border);
}

header.site-header .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
}
header.site-header .brand img { height: 34px; display: block; }
header.site-header .brand strong {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--kcs-ink);
}

header.site-header nav a {
  color: var(--kcs-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: .95rem;
  margin-left: 1.75rem;
  text-decoration: none;
}
header.site-header nav a:first-child { margin-left: 0; }
header.site-header nav a:hover,
header.site-header nav a.active { color: var(--kcs-red); }

/* ---------- Layout ---------- */

.container { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }
.page-wrap { padding: 2.5rem 0 4rem; }

.eyebrow {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kcs-muted);
  margin-bottom: .5rem;
}

/* ---------- Cards ---------- */

.card {
  background: var(--kcs-panel);
  border-radius: var(--kcs-radius-card);
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
}

.card.card-white {
  background: var(--kcs-white);
  border: 1px solid var(--kcs-border);
  box-shadow: 0 12px 32px rgba(28, 26, 35, 0.06);
}

.card.card-accent {
  background: var(--kcs-red);
  color: var(--kcs-white);
}
.card.card-accent h1, .card.card-accent h2, .card.card-accent p { color: var(--kcs-white); }

/* ---------- Forms ---------- */

label {
  display: block;
  margin-bottom: 1.1rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: .9rem;
  color: var(--kcs-ink);
}

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: 13px 16px;
  background: var(--kcs-white);
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-input);
  font-family: "DM Sans", sans-serif;
  font-size: .95rem;
  color: var(--kcs-ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--kcs-red);
  background: var(--kcs-white);
}
input::placeholder { color: #9d9aa4; }

.form-row { display: flex; gap: 1.25rem; }
.form-row > label { flex: 1; }

/* ---------- Buttons ---------- */

button, .btn {
  display: inline-block;
  background: var(--kcs-red);
  color: var(--kcs-white);
  border: none;
  padding: 15px 34px;
  border-radius: var(--kcs-radius-pill);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: .95rem;
  cursor: pointer;
  text-align: center;
}
button:hover, .btn:hover { background: var(--kcs-red-dark); color: var(--kcs-white); }

.btn-ghost {
  background: transparent;
  color: var(--kcs-red);
  border: 1.5px solid var(--kcs-red);
}
.btn-ghost:hover { background: var(--kcs-red); color: var(--kcs-white); }

.btn-link {
  background: none;
  color: var(--kcs-red);
  padding: 0;
  font-weight: 600;
  font-size: .95rem;
  border-radius: 0;
}
.btn-link:hover { background: none; text-decoration: underline; }

/* ---------- Tables ---------- */

.table-wrap {
  background: var(--kcs-white);
  border: 1px solid var(--kcs-border);
  border-radius: var(--kcs-radius-card);
  overflow: hidden;
  overflow-x: auto;
  margin-bottom: 1.75rem;
}
table { width: 100%; min-width: 560px; border-collapse: collapse; }
th, td {
  padding: .85rem 1.25rem;
  text-align: left;
  font-size: .9rem;
  border-bottom: 1px solid var(--kcs-border);
}
th {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kcs-muted);
  background: var(--kcs-panel);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAFA; }

/* ---------- Status badges ---------- */

.status-badge {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 20px;
  background: var(--kcs-ink);
  color: var(--kcs-white);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: .78rem;
}
.status-badge.delivered { background: #1C6B2C; }
.status-badge.blocked, .status-badge.not-found { background: var(--kcs-muted); }
.status-badge.in-transit { background: var(--kcs-red); }

/* ---------- Misc ---------- */

.muted { color: var(--kcs-muted); font-size: .9rem; }
.notice {
  background: #FFF4E5;
  border: 1px solid #F3DAA6;
  color: #8A5A00;
  padding: .9rem 1.25rem;
  border-radius: var(--kcs-radius-input);
  font-size: .88rem;
  margin-bottom: 1.75rem;
}

nav.subnav { margin-bottom: 1.75rem; font-size: .92rem; }
nav.subnav a { margin-right: 1.5rem; font-weight: 600; }

.hero {
  background: var(--kcs-ink);
  color: var(--kcs-white);
  padding: 4rem 0;
  text-align: center;
  margin-bottom: 3rem;
}
.hero h1 { color: var(--kcs-white); font-size: 2.5rem; margin-bottom: .75rem; }
.hero p { color: #C9C6D1; font-size: 1.05rem; max-width: 480px; margin: 0 auto 2rem; }
.hero label { color: var(--kcs-white); }

footer.site-footer {
  border-top: 1px solid var(--kcs-border);
  padding: 2rem 2.5rem;
  margin-top: 3rem;
  text-align: center;
}
footer.site-footer p { font-size: .85rem; margin: 0; }

@media (max-width: 720px) {
  header.site-header { flex-direction: column; gap: 1rem; padding: 1.25rem 1.5rem; }
  header.site-header nav a { margin: 0 .75rem; }
  .form-row { flex-direction: column; gap: 0; }
  .card { padding: 1.5rem; }
  .container { padding: 0 1.75rem; }
}