/* trucking.com.au — barebones wireframe styles. No design, just structure. */

* { box-sizing: border-box; }

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

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ---- header / nav ---- */
header.site {
  border-bottom: 2px solid #333;
  background: #f4f4f4;
}
.brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.brand a.logo { font-size: 20px; font-weight: 700; text-decoration: none; color: #111; }
.brand .tag { font-size: 12px; color: #777; }

nav.pillars ul {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
nav.pillars a {
  display: block;
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #fff;
  text-decoration: none;
  color: #333;
  font-size: 13px;
}
nav.pillars a:hover { background: #eee; }
nav.pillars a.active { background: #333; color: #fff; border-color: #333; }

/* ---- page body ---- */
main { padding: 28px 0 60px; }
h1 { font-size: 26px; margin: 0 0 4px; }
.subtitle { color: #666; margin: 0 0 20px; font-size: 15px; }

.note {
  border-left: 4px solid #bbb;
  background: #fafafa;
  padding: 8px 14px;
  margin: 0 0 24px;
  font-size: 13px;
  color: #555;
}

h2 { font-size: 17px; margin: 28px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 4px; }

/* placeholder blocks — the "wireframe" look */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.box {
  border: 1px dashed #bbb;
  background: #f9f9f9;
  padding: 14px;
  min-height: 70px;
}
.box h3 { margin: 0 0 6px; font-size: 14px; }
.box p { margin: 0; font-size: 12px; color: #888; }
.box .lead { display: inline-block; margin-top: 8px; font-size: 11px; color: #a60; border: 1px solid #d9b38c; padding: 1px 6px; background: #fff8f0; }

.placeholder-hero {
  border: 2px dashed #ccc;
  background: #f5f5f5;
  padding: 40px 20px;
  text-align: center;
  color: #999;
  margin-bottom: 28px;
}
.placeholder-hero .box-search {
  display: inline-block;
  border: 1px solid #ccc;
  background: #fff;
  padding: 12px 60px;
  color: #bbb;
  margin-top: 12px;
}

ul.plain { padding-left: 18px; }
ul.plain li { font-size: 13px; margin: 3px 0; color: #444; }

footer.site {
  border-top: 2px solid #333;
  background: #f4f4f4;
  font-size: 12px;
  color: #777;
  padding: 20px 0;
}
footer.site .cols { display: flex; flex-wrap: wrap; gap: 40px; }
footer.site a { color: #555; text-decoration: none; display: block; margin: 2px 0; }
footer.site a:hover { text-decoration: underline; }