/* assets/app.css
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Overpass:wght@400;500;600;700&display=swap");

@font-face {
  font-family: "Overpass Title";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/overpass/v19/qFda35WCmI96Ajtm83upeyoaX6QPnlo6VfTbPpqK.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body{
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  font-style: normal;
color:#232323;
background-color:#f4f5f6;
}

a{ text-decoration:none !important;}
a:hover{ text-decoration:none !important;}

.breadcrumb{ font-size:14px;}


.navbar{height:100px; padding:0 !important; background-color:#fff !important;}
.navbar > .container{height:100%; align-items:center;}
.navbar-brand{display:flex; align-items:center; height:100%; padding:0;}
.navbar .logo{width:230px !important; height:56px !important; object-fit:contain;}

footer{ font-size:14px;}

body > footer.border-top { border-top: 0 !important; }

footer .nav-link[href^="https://www.123loadboard.com/"] { color:#000; }



/* === Brand green === */
:root{
  --bs-primary: #00b529;
  --bs-primary-rgb: 0, 181, 41;

  /* links */
  --bs-link-color: #00b529;
  --bs-link-hover-color: #078624;
}

/* Buttons */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: #00b529;
  --bs-btn-border-color: #00b529;

  --bs-btn-hover-bg: #078624;
  --bs-btn-hover-border-color: #078624;

  --bs-btn-active-bg: #078624;
  --bs-btn-active-border-color: #078624;

  --bs-btn-disabled-bg: #00b529;
  --bs-btn-disabled-border-color: #00b529;
}
.btn-outline-primary{
  --bs-btn-color: #00b529;
  --bs-btn-border-color: #00b529;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #078624;
  --bs-btn-hover-border-color: #078624;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #078624;
  --bs-btn-active-border-color: #078624;
}

/* Links (fallback for non-variable cases) */
a { color: var(--bs-link-color); }
a:hover, a:focus { color: var(--bs-link-hover-color); }

/* Badges/alerts using .bg-primary */
.bg-primary { background-color: #00b529 !important; }
.text-bg-primary { background-color: #00b529 !important; }

/* Form controls checked state */
.form-check-input:checked{
  background-color: #00b529;
  border-color: #00b529;
}

/* Pagination active */
.pagination .page-item.active .page-link{
  background-color: #00b529;
  border-color: #00b529;
}

/* Focus ring color (keeps accessibility) */
.btn-primary:focus,
.btn-outline-primary:focus,
.page-link:focus,
.form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(0,181,41,.25);
}











/* Layout helpers */
.container-narrow { max-width: 960px; }

/* Cards and thumbnails */
.card-logo,
.logo-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: .5rem;
}

.media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #eee;
  border-radius: .5rem;
  overflow: hidden;
  background: #f8f9fa;
}

.media-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges and chips */
.badge-chip { margin: 0 .25rem .25rem 0; }

/* Subtle placeholder text */
.placeholder { color: #6c757d; }

/* Sticky sidebar on wide screens */
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 1rem; }
}

/* Tables */
.table td, .table th { vertical-align: middle; }

/* Monospace utility */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Small tweaks for admin navigation */
.tab-nav .nav-link { font-weight: 500; }

/* Small logos */
.logo-sm {
  width: 40px;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .5rem;
}

.logo-sm img { max-width: 100%; max-height: 100%; }

/* Public UI: square corners for rectangular controls and surfaces. */
.btn,
.form-control,
.form-select,
.input-group-text,
.form-check-input[type="checkbox"],
.card,
.card-header,
.card-footer,
.card-img-top,
.alert,
.page-link,
.dropdown-menu,
.list-group-item,
.modal-content,
.navbar-toggler,
.cat-box,
.facet-box,
.facet-head,
.card-logo,
.card-logo-top,
.logo-box,
.logo-sm,
.hero-logo,
.media-thumb,
.badge,
.badge-link,
.yt-badge {
  border-radius: 0 !important;
}

.hero-band h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 52px;
  font-weight: 900 !important;
  text-transform: uppercase;
  transform: translateY(2px);
  white-space: nowrap;
}

.hero-band {
  padding-top: 85px !important;
  padding-bottom: 85px !important;
}

.hero-band .col-xxl-5 h1.mb-0 {
  width: 100%;
  padding-inline: 1rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 991.98px) {
  .navbar {
    height: 80px;
  }

  .navbar .logo {
    width: 184px !important;
    height: 44.8px !important;
  }

  .hero-band {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .hero-band h1 {
    font-size: 40px;
  }
}

@media (max-width: 575.98px) {
  .navbar {
    height: 64px;
  }

  .navbar .logo {
    width: 147.2px !important;
    height: 35.84px !important;
  }

  .hero-band {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .hero-band h1 {
    width: 100%;
    max-width: 100%;
    padding-inline: 1rem;
    box-sizing: border-box;
    font-size: 32px;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 1199.98px) {
  .navbar.mb-0 {
    height: 64px;
  }

  .navbar.mb-0 .logo {
    width: 184px !important;
    height: 44px !important;
  }
}

@media (max-width: 383.98px) {
  .navbar.mb-0 .navbar-brand {
    max-width: 100%;
    margin-right: 0;
  }

  .navbar.mb-0 .logo {
    max-width: 100%;
  }
}

.hero-band a[title="Clear"] {
  color: #000;
  background-color: transparent;
  border-color: #dee2e6;
  padding-top: calc(var(--bs-btn-padding-y) + 1px);
  padding-bottom: calc(var(--bs-btn-padding-y) - 1px);
}

.hero-band .search-wrap > .row {
  --bs-gutter-x: 0;
}

.hero-band .search-wrap {
  margin-top: 30px;
}

.hero-band .search-wrap > .row > .col-auto {
  column-gap: 0 !important;
}

@media (max-width: 991.98px) {
  .hero-band .search-wrap {
    margin-top: 24px;
  }
}

@media (max-width: 575.98px) {
  .hero-band .search-wrap {
    margin-top: 20px;
  }
}

.hero-band a[title="Clear"]:hover,
.hero-band a[title="Clear"]:focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.hero-band button[title="Search"],
.hero-band button[title="Search"]:hover,
.hero-band button[title="Search"]:focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.hero-band button[title="Search"]:hover {
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
}

.hero-band button[title="Search"] .bi-search {
  display: inline-block;
  transform: translateY(1px);
}

.get-listed-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.get-listed-panel {
  min-width: 0;
  padding: 2rem;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.get-listed-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.get-listed-field {
  min-width: 0;
}

.get-listed-field-wide {
  grid-column: 1 / -1;
}

.get-listed-form .form-label {
  font-weight: 600;
}

.get-listed-form .form-control {
  width: 100%;
}

.get-listed-form textarea.form-control {
  resize: vertical;
}

@media (max-width: 991.98px) {
  .get-listed-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .get-listed-panel {
    padding: 1.25rem;
  }

  .get-listed-form {
    grid-template-columns: 1fr;
  }

  .get-listed-field-wide {
    grid-column: auto;
  }
}

/* Public typography: Montserrat headings, Overpass reading and interface text. */
:root {
  --fan-font-heading: "Montserrat", sans-serif;
  --fan-font-body: "Overpass", sans-serif;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .card-header .h4, body .card-header.h4,
body .card-body .h4, body .card-body .h5 {
  font-family: var(--fan-font-heading);
  line-height: 1.3;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
body .hero-band h1 { line-height: 1.12; letter-spacing: 0; text-wrap: balance; }
body .cat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
body .cat-box { padding: 28px; }
body .cat-head { align-items: flex-start; gap: 16px; }
body .cat-title { font-size: clamp(20px, 1.65vw, 24px); font-weight: 700; }
body .cat-all { flex-shrink: 0; font-size: 16px; font-weight: 600; line-height: 1.8; }
body .cat-ul { margin-top: 20px; padding-left: 0; }
body .cat-ul li + li { margin-top: 8px; }
body .cat-ul a { display: inline-block; padding-block: 3px; line-height: 1.5; }
body .result-card { height: 100%; overflow: visible; }
body .result-card .card-body { padding: 24px; overflow: visible; }
body .result-card h2 { font-size: 20px; font-weight: 900; line-height: 1.35; margin-bottom: 12px !important; }
body .result-card h2 a { color: #171717; }
body .result-card h2 a:hover { color: var(--bs-link-hover-color); }
body .result-card .line-clamp-3 { font-size: 18px; line-height: 1.55; }
body .result-card .line-clamp-3 > :last-child { margin-bottom: 0; }
body .facet-box { padding: 20px; }
body .facet-title { font-size: 17px; font-weight: 700; line-height: 1.4; flex-wrap: wrap; }
body .facet-title .sub, body .facet-sum { font-family: var(--fan-font-body); font-size: 14px; }
body .facet-body { font-size: 16px; line-height: 1.6; padding-top: 14px; }
body .facet-body .small { font-size: 15px; }
body .facet-body .form-check { margin-bottom: 8px; }
body main > .d-flex { gap: 16px; flex-wrap: wrap; }
body main > .d-flex h1 { font-family: var(--fan-font-heading); font-size: clamp(24px, 2.3vw, 32px); font-weight: 900 !important; }
body .hero-text h1 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 900 !important; line-height: 1.25; margin-bottom: 16px !important; }
body .hero-text { min-width: 0; font-size: 20px; line-height: 1.6; }
body .partner-overview-copy { font-size: 20px; line-height: 1.6; }
body .card-header { padding: 24px 28px 0; }
body .card-header.h4, body .card-header .h4 { font-size: clamp(24px, 2vw, 30px); font-weight: 900; line-height: 1.3; }
body .card:not(.result-card) > .card-body { padding: 24px 28px 28px; line-height: 1.7; overflow-wrap: anywhere; }
body .card-body p { margin-bottom: 1em; }
body .card-body .h4, body .card-body .h5 { font-weight: 900; line-height: 1.4; }
body .card-header strong,
body .card-body .h4 strong, body .card-body .h5 strong,
body .card-body .h4 b, body .card-body .h5 b { font-weight: inherit; }
body .card-body li + li { margin-top: 8px; }
body .contact-list > li + li { margin-top: 12px; }
body .get-listed-panel h2 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; }
body .get-listed-panel p { line-height: 1.7; }
body .form-control, body .form-select, body .btn { font-family: var(--fan-font-body); font-size: 17px; line-height: 1.4; }
body .form-control, body .form-select { padding-block: 11px; }
body .btn { padding: 11px 20px; }
/* Optical centering for Overpass in the partner call-to-action. */
body .hero-text .cta-row .btn { padding-top: 13px; padding-bottom: 9px; }
body .btn-lg, body .form-control-lg { font-size: 18px; }
body .breadcrumb { font-size: 15px; line-height: 1.5; row-gap: 6px; }
body footer { font-size: 16px; line-height: 1.5; }
body footer .small { font-size: 14px; }
body a:focus-visible { outline: 3px solid #ff9d1f; outline-offset: 4px; }
@media (max-width: 767.98px) {
  body { font-size: 17px; }
  body .cat-grid { gap: 16px; }
  body .cat-box, body .result-card .card-body { padding: 22px; }
  body .cat-title, body .result-card h2 { font-size: 21px; }
  body .result-card .line-clamp-3 { font-size: 17px; }
  body .hero-text { font-size: 18px; }
  body .partner-overview-copy { font-size: 18px; }
  body .card-header { padding: 22px 22px 0; }
  body .card:not(.result-card) > .card-body { padding: 20px 22px 24px; }
  body .cat-ul a { padding-block: 6px; }
  body .facet-head { padding-block: 8px; }
  body main > .d-flex .w-25 { width: auto !important; }
}