/*
Theme Name: TrafficONE
Theme URI: https://trafficone.pro/
Author: Music 1, Inc.
Description: Site theme for TrafficONE. It only carries the header, the menu, the footer and the styles. All page text lives in the editor, so nothing here has to be edited to change a word on the site.
Version: 1.2
Requires at least: 5.0
License: Proprietary
Text Domain: trafficone
*/

/* ==========================================================================
   TrafficONE - site stylesheet
   Taken from the proposal the client approved on 4 September 2026
   (website new design proposals / TrafficONE-01-SaaS.html).
   It serves as a WordPress theme or as plain pages: nothing here is tied to a
   content manager.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  --font:        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --ink:       #1b2430;   /* body text */
  --ink-soft: #4a5562;   /* nav */
  --ink-body: #54606e;   /* paragraphs */
  --ink-faint: #7a8696;   /* footnotes */
  --brand:        #2f6bff;   /* brand colour */
  --brand-light:  #7e9bff;   /* the blue on a dark ground */
  --brand-tint:  #eef3ff;   /* tag background */
  --navy:      #0f1b3d;   /* dark block */
  --rule:       #eaeef3;
  --rule-strong: #d9e1ea;
  --paper:       #ffffff;

  --max:       1180px;
  --gutter:      44px;
  --r-sm:    11px;
  --r:       16px;
  --r-lg:    24px;
  --shadow:      0 1px 2px rgba(27,36,48,.04), 0 8px 24px rgba(27,36,48,.06);
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -.03em; font-weight: 800; margin: 0 0 16px; line-height: 1.1; }
h1 { font-size: 54px; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: 36px; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
p  { margin: 0 0 16px; color: var(--ink-body); }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; height: auto; }

.container { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* --- 3. Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px var(--gutter);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand { gap: 11px; }
.brand__mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: -.03em;
}
.brand__name { font-weight: 800; font-size: 17px; letter-spacing: -.025em; line-height: 1; }
.brand__sub {
  display: block; font-size: 11px; font-weight: 400; color: var(--ink-faint);
  letter-spacing: 0; margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--ink-soft); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.nav__toggle { display: none; }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
}
.btn--primary  { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #2559da; text-decoration: none; }
.btn--outline  { background: #fff; color: var(--ink); border-color: var(--rule-strong); }
.btn--outline:hover { border-color: #b9c6d4; text-decoration: none; }
.btn--light  { background: #fff; color: var(--navy); }
.btn--lg { padding: 15px 26px; font-size: 15px; }
.btn--primary.btn--lg { padding: 15px 28px; box-shadow: 0 10px 24px rgba(47,107,255,.25); }

/* The nav button only exists on narrow screens. It comes AFTER .btn, or the
   display of .btn would bring it back. */
.nav__toggle { display: none; }

/* --- 5. Hero ------------------------------------------------------------- */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 84px var(--gutter) 70px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px; padding: 7px 14px;
  border-radius: 999px; background: var(--brand-tint); color: var(--brand);
  font-size: 13px; font-weight: 600;
}
/* The small blue dot the proposal shows before the label. */
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.hero__text { font-size: 18px; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__note { margin-top: 22px; font-size: 14px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }

/* --- 6. Cards ------------------------------------------------------------ */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  padding: 30px; border: 1px solid #e9eef4; border-radius: var(--r);
  background: #fff;
}
.card p { font-size: 14.5px; color: #54606e; }
.card__num {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  margin: 0 0 20px;
}
.card p:last-child { margin-bottom: 0; }

/* --- 7. Dark panel ------------------------------------------------------- */
.panel-dark {
  max-width: var(--max); margin: 0 auto; padding: 60px 56px;
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
}
.panel-dark h2 { font-size: 38px; }
.panel-dark p { color: #c7d0de; }
.panel-dark a { color: var(--brand-light); }

/* --- 8. Blocks and prose ------------------------------------------------- */
.block { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter); }
.block--tight { padding-top: 18px; }

.prose { max-width: 760px; }
.prose h2 { font-size: 30px; margin-top: 44px; }
.prose h3 { font-size: 20px; margin-top: 30px; }
.prose ul, .prose ol { color: var(--ink-soft); padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 700; }

/* YouTube video: our own frame, with no plugin behind it */
.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule);
  background: #000; margin: 22px 0;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-grid { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
.media-grid h3 { margin: 0 0 10px; }

/* --- 9. Footer ----------------------------------------------------------- */
.site-footer {
  max-width: var(--max); margin: 60px auto 0; padding: 28px var(--gutter) 96px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 14px; color: var(--ink-faint);
}
.site-footer a { color: var(--ink-soft); }

/* --- 10. Narrow screens -------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  h1 { font-size: 38px; }
  h2 { font-size: 28px; }
  .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 52px; }
  .grid--3, .grid--2, .media-grid { grid-template-columns: 1fr; }
  .panel-dark { padding: 40px 28px; border-radius: var(--r); }
  .nav { display: none; }
  .nav--open { display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 18px var(--gutter); background: #fff; border-bottom: 1px solid var(--rule); }
  .nav__toggle { display: inline-flex; }
  /* On narrow screens the header keeps the brand and the nav button: the
     "Try it free" did not fit beside them and pushed the page wider. */
  .site-header { position: relative; gap: 12px; }
  .site-header .btn--primary { display: none; }
  .brand__sub { display: none; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* --- 12. Product shots and the hero backdrop ----------------------------- */
/* Straight from the approved proposal: the soft blue wash behind the top of
   the front page, the browser-style window that frames a screen of the
   program, and the small card that floats over its corner. Without these the
   page is a wall of text on white. */

.hero-wrap {
  background: radial-gradient(1100px 520px at 72% -8%, #e8f0ff 0%, rgba(232,240,255,0) 62%), #fff;
}

.hero__visual { position: relative; }

.appwin {
  display: block; overflow: hidden; background: #fff;
  border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: 0 30px 60px rgba(27, 36, 48, .14);
}
.appwin:hover { text-decoration: none; }
/* The proposal drew this bar with the three round dots of a Mac window. What
   goes inside is a Windows program, so the dots are replaced by the buttons a
   Windows title bar really has, on the right where they belong. */
.appwin__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px; border-bottom: 1px solid #eef2f6;
}
.appwin__name {
  font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono);
}
.appwin__controls {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  color: #b9c6d4; font-size: 11px; line-height: 1;
}
.appwin__shot { position: relative; display: block; }
.appwin__shot img {
  display: block; width: 100%; height: 300px;
  object-fit: cover; object-position: top left;
}
.appwin--tall .appwin__shot img { height: 440px; }
.appwin--plain .appwin__shot img { height: auto; object-fit: contain; }

.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play span {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(47, 107, 255, .95); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 10px 30px rgba(47, 107, 255, .45);
}

/* It floats up and down, exactly as in the proposal
   (`animation:floaty 5s ease-in-out infinite`). It holds still for anyone who
   asked the system for less movement. */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.floatcard {
  position: absolute; bottom: -22px; left: -26px; background: #fff;
  border: 1px solid var(--rule); border-radius: 13px; padding: 14px 18px;
  box-shadow: 0 16px 30px rgba(27, 36, 48, .12);
  animation: floaty 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .floatcard { animation: none; } }
.floatcard__label { font-size: 12px; color: var(--ink-faint); margin: 0 0 3px; }
.floatcard__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.floatcard__value small { color: #28a745; font-size: 13px; font-weight: 600; margin-left: 6px; }

/* The four "works with whatever you run" slots under the hero. */
/* The automation systems the program writes a native log for. This replaced a
   strip of four DASHED EMPTY BOXES holding generic words ("your playout",
   "automation", ...), which was the place the proposal reserved for logos we
   have no licence to use. Empty dashed boxes read as an unfinished page, which
   is exactly how it looked on the client's screen. */
.systems {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.systems li {
  padding: 9px 18px; border-radius: 999px;
  background: var(--brand-tint); border: 1px solid #dde6ff;
  color: #35507f; font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.systems-note {
  text-align: center; margin: 20px auto 0; max-width: 620px;
  font-size: 14.5px; color: var(--ink-faint);
}
.slots-title {
  text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa6b3; margin: 0 0 26px;
}

/* A screen of the program used as a plain figure, inside a guide. */
.figure { margin: 26px 0; }
.figure img {
  /* Never stretched past its own size. These are screens of the program, and
     several came off the old site as 300px WordPress thumbnails; blown up to
     the width of the column they were unreadable. Small ones now draw small
     and sharp, centred, instead of big and blurred. */
  display: block; max-width: 100%; width: auto; height: auto;
  margin-left: auto; margin-right: auto;
  border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.figure figcaption { font-size: 13.5px; color: var(--ink-faint); margin-top: 10px; }

@media (max-width: 860px) {
  .appwin__shot img, .appwin--tall .appwin__shot img { height: 220px; }
  .floatcard { position: static; margin-top: 18px; }
}

/* --- 13. Video cards ----------------------------------------------------- */
/* The videos page was one embedded player on an empty page. These are the
   station's own videos, each with its picture, so the page shows what there
   is to watch instead of describing it. */

.videocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.videocard {
  display: block; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  color: inherit;
}
.videocard:hover { text-decoration: none; box-shadow: 0 18px 34px rgba(27, 36, 48, .14); }
.videocard__shot { position: relative; display: block; }
.videocard__shot img { display: block; width: 100%; height: 150px; object-fit: cover; }
.videocard__shot .play span { width: 46px; height: 46px; font-size: 15px; }
.videocard__title {
  display: block; padding: 14px 16px 16px; font-weight: 600; font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .videocards { grid-template-columns: 1fr; }
}

/* --- 14. The dark block, as the proposal draws it ------------------------ */
.panel-dark { border-radius: var(--r-lg); padding: 60px 56px; }
.panel-dark .eyebrow {
  background: none; color: var(--brand-light); padding: 0; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.panel-dark p { color: #b6c2e0; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 18px 20px;
}
.step--result { background: var(--brand); border-color: transparent; }
.step__tag {
  font-family: var(--font-mono); font-size: 13px; color: var(--brand-light);
  margin: 0; flex: none;
}
.step--result .step__tag { color: #cfe0ff; }
.step__text { font-size: 15.5px; font-weight: 600; color: #fff; margin: 0; }

/* The big video panel of the proposal: one picture, a play button over it and
   a line telling you where it opens. */
.bigvideo {
  display: block; position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--rule-strong);
}
.bigvideo img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center; }
.bigvideo__over {
  position: absolute; inset: 0; background: rgba(15, 27, 61, .28);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.bigvideo__play {
  width: 74px; height: 74px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.bigvideo__label {
  font-family: var(--font-mono); font-size: 13px; color: #fff;
  background: rgba(0, 0, 0, .4); padding: 6px 12px; border-radius: 8px;
}

@media (max-width: 860px) {
  .panel-dark { padding: 40px 28px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .bigvideo img { height: 220px; }
}

/* --- 15. Closing call to action ----------------------------------------- */
/* The proposal closes on a pale blue panel with dark text, not on a dark one. */
.cta {
  background: var(--brand-tint); border-radius: var(--r-lg);
  padding: 56px; text-align: center;
}
.cta h2 { font-size: 36px; margin: 0 0 14px; }
.cta p { font-size: 17px; color: var(--ink-body); margin: 0 0 28px; }
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* The two marks the proposal puts in the hero: the play circle inside the
   secondary button, and the blue tick before the line under it. */
.btn__play {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex: none;
}
.hero__note { font-size: 13.5px; }
.hero__note::before { content: "✓"; color: var(--brand); font-weight: 700; }

@media (max-width: 860px) { .cta { padding: 36px 24px; } }

/* --- 16. Forms ----------------------------------------------------------- */
/* A form sitting straight on the page looked like loose fields dropped on
   white. It gets the same panel the rest of the page uses. */
/* Same width and same dark ground as the other blocks of the page, so the
   form is one more area and not a white card floating on white. */
.formpanel {
  background: var(--navy); color: #fff; border-radius: var(--r-lg);
  padding: 44px 48px;
}
.formpanel h2, .formpanel h3 { color: #fff; }
.formpanel p { color: #b6c2e0; }
.formpanel a { color: var(--brand-light); }
.formpanel .field label { color: #fff; }
.field { margin: 0 0 16px; }
.field label {
  display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%; padding: 12px 13px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 107, 255, .35);
}
.formpanel .field input, .formpanel .field textarea {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.formpanel .field input::placeholder, .formpanel .field textarea::placeholder { color: #8fa2c4; }
/* Two columns for the short fields, so the form fills the width it now has. */
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field textarea { resize: vertical; min-height: 120px; }
.formpanel .btn { margin-top: 4px; }
.formnote { font-size: 13.5px; color: var(--ink-faint); margin: 16px 0 0; }

@media (max-width: 860px) {
  .formpanel { padding: 26px 22px; }
  .fieldrow { grid-template-columns: 1fr; }
}

/* --- 17. Back-to-top button ---------------------------------------------- */
/* Appears once the reader has gone down a screen, and takes the page back to
   the top. Hidden when there is no scripting, since it would do nothing. */
.totop {
  position: fixed; right: 26px; bottom: 26px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1;
  box-shadow: 0 10px 24px rgba(27, 36, 48, .22);
}
.totop:hover { background: #2559da; }
.totop:focus-visible { outline: 3px solid rgba(47, 107, 255, .4); outline-offset: 2px; }
.totop svg { display: block; }

@media (max-width: 860px) {
  .totop { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* The star that marks a required field, and the line under the new-version
   promise on the front page. */
.req { color: var(--brand); font-weight: 700; }
.soon {
  margin-top: 18px; font-family: var(--font-mono); font-size: 13px;
  color: var(--brand); font-weight: 600;
}

/* --- 18. Blog ------------------------------------------------------------ */
.postlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.postcard {
  display: flex; flex-direction: column; gap: 8px; padding: 26px;
  background: #fff; border: 1px solid #e9eef4; border-radius: var(--r);
  color: inherit;
}
.postcard:hover { text-decoration: none; border-color: var(--rule-strong); }
.postcard__date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.postcard__title { font-weight: 700; font-size: 17px; letter-spacing: -.02em; line-height: 1.25; }
.postcard__text { font-size: 14.5px; color: var(--ink-body); }
.postdate { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); margin: -6px 0 26px; }

@media (max-width: 860px) { .postlist { grid-template-columns: 1fr; } }

/* --- Header: the block on the right of the menu ------------------------- */
.site-header__side {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The line the contact form shows after a message is sent, or is not. */
.formpanel .formsent {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-weight: 600;
}

/* Landing on the form after sending: leave room for the fixed header. */
#contact-form { scroll-margin-top: 110px; }