/* nb-dark-nav.css
 * Novlan Trucks: dark nav bar, site-wide.
 * Purely additive. Remove the <link> from content.header.html to back it out;
 * nothing in the existing CSS is edited.
 *
 * The blue utility strip above the nav is left as it is.
 */

:root {
  --nbnav-bg: #0d0d0d;
  --nbnav-fg: #ffffff;
  --nbnav-hover: #ff5a1f;   /* the orange from the Manus design */
}

/* the nav row itself, and the sticky wrapper that carries it */
header .headerOptions,
header .nav-container,
header > .row:nth-child(2) {
  background-color: var(--nbnav-bg) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* top level links */
.topNavigation > li > a,
.topNavigation li a {
  color: var(--nbnav-fg) !important;
}
.topNavigation > li > a:hover,
.topNavigation > li:hover > a {
  color: var(--nbnav-hover) !important;
}

/* the dropdown caret is a dark SVG; invert it so it reads on black */
@media screen and (min-width: 992px) {
  .topNavigation li.hasSub {
    filter: none;
  }
  .topNavigation > li.hasSub {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath fill='%23ffffff' d='M8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z'/%3E%3C/svg%3E") !important;
  }
}

/* the logo lockup sits on the same dark row */
header .logo {
  background-color: transparent;
}

/* submenus are already dark; keep them a shade off the bar so they read as separate */
.topNavigation > li ul {
  background: #1c1c1c !important;
}

/* mobile: the collapsed menu and its toggle */
@media screen and (max-width: 992px) {
  .mobile-toggle span {
    color: var(--nbnav-fg) !important;
  }
  .topNavigation a {
    border-top-color: rgba(255, 255, 255, .12) !important;
  }
  i.showSub::before {
    color: rgba(255, 255, 255, .7) !important;
    border-left-color: rgba(255, 255, 255, .2) !important;
  }
  nav > ul {
    border-color: rgba(255, 255, 255, .15) !important;
  }
}

/* the CMS admin sortable list must stay light, it is edited on a white panel */
.cms_plugin_menu.ui-sortable li,
.cms_plugin_menu.ui-sortable li a {
  color: #1a1a1a !important;
}

/* Talk to a truck expert, appended to the end of the nav row by nb-dark-nav.js */
.nbnav-cta {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 10px 18px;
  background: var(--nbnav-hover);
  color: #fff !important;
  font-family: var(--font-headings), inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease;
}
.nbnav-cta:hover {
  background: #e04a12;
  color: #fff !important;
  text-decoration: none;
}
@media screen and (max-width: 992px) {
  .nbnav-cta {
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   Matching the Manus design language: the nav type is smaller, tighter
   and heavier, and the footer is black rather than blue.
   ------------------------------------------------------------------ */

/* top level nav: 10px, wide tracking, very bold */
@media screen and (min-width: 992px) {
  .topNavigation > li > a {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .14em !important;
    font-weight: 800 !important;
    text-align: center;
  }
  .topNavigation > li {
    padding-left: 6px;
    padding-right: 24px;
  }
}

/* dropdown panel: darker, squared off, roomier */
.topNavigation > li ul {
  border-radius: 0 !important;
  padding: 8px 0 !important;
  min-width: 232px !important;
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.topNavigation > li > ul li a {
  padding: .55rem 1.1rem !important;
  color: #d9d9d9 !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
.topNavigation > li > ul > li:hover {
  background: rgba(255, 90, 31, .14) !important;
}
.topNavigation > li > ul li a:hover {
  color: #fff !important;
}

/* footer: black, to match the nav and the homepage */
footer,
footer .row,
.site-footer,
footer [class*="footer"] {
  background-color: #0b0b0b !important;
}
footer a { color: #dce2e4; }
footer a:hover { color: var(--nbnav-hover); }
/* the footer's own panels sit slightly off black so they still read */
footer .container > .row > .col { background-color: transparent !important; }

/* the NB logo is dark grey, built for a white header; invert it for the dark nav */
header .logo img { filter: brightness(0) invert(1); }
/* nb-nav-fit.css
 * Nav spacing and overflow behaviour.
 * Append to nb-dark-nav.css, or link separately after it.
 */

/* ── 1. breathing room between the logo and the first item ────────── */
@media screen and (min-width: 992px) {
  header .logo { padding-right: 28px; }
  .topNavigation { padding-left: 8px; }
  .topNavigation > li:first-child { margin-left: 0; }
}

/* ── 2. let the nav shrink before it breaks ───────────────────────────
   Full size above 1500, progressively tighter down to 1150, hamburger
   below that. This is the pattern most commercial sites use: shrink a
   little, then switch, rather than wrap to a second line.
   ------------------------------------------------------------------- */

@media screen and (min-width: 1300px) and (max-width: 1499px) {
  .topNavigation > li { padding-left: 4px; padding-right: 20px; }
  .topNavigation > li > a { font-size: 9.5px !important; letter-spacing: .11em !important; }
  header .logo { padding-right: 20px; }
  header .logo img { max-width: 150px; }
}

@media screen and (min-width: 1151px) and (max-width: 1299px) {
  .topNavigation > li { padding-left: 3px; padding-right: 15px; }
  .topNavigation > li > a { font-size: 9px !important; letter-spacing: .08em !important; }
  header .logo { padding-right: 14px; }
  header .logo img { max-width: 128px; }
  .nbnav-cta { padding: 8px 12px; font-size: .66rem; }
}

/* below 1150 the row cannot hold nine items at a readable size, so the
   CMS mobile menu takes over. The template's own breakpoint is 992, which
   leaves 992-1150 overflowing, so it is raised here. */
/* 993 to 1150 wide: nine nav items do not fit, so the hamburger is used here too.
   Below 993 the template's own mobile menu runs with no overrides. 4 Oct 2026. */
@media screen and (min-width: 993px) and (max-width: 1150px) {
  .nbnav-cta { display: none !important; }
  header .mobile-toggle,
  header #button-menu { display: flex !important; }
  header .d-lg-none { display: flex !important; }
  header .hide-on-mobile { display: none !important; }
  header:has(.mobile-toggle.to-close) .hide-on-mobile { display: block !important; flex: 0 0 100%; width: 100%; max-width: 100%; }
  .topNavigation { display: block !important; height: auto; max-height: 60vh; overflow-y: auto; padding: 0; }
  .topNavigation li { display: block; width: 100%; max-width: 100%; padding: 0; line-height: 24px; }
  .topNavigation a { display: flex; align-items: center; height: 48px; line-height: 40px; padding: 0 1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
  .topNavigation > li > a { font-size: 12px !important; text-align: left; }
  .topNavigation > li ul { position: relative; top: auto; left: 0; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .topNavigation > li > ul { display: none; }
}

/* nothing in the header should ever push the page sideways */
header, header .row { max-width: 100%; overflow-x: clip; }

/* ------------------------------------------------------------------
   Utility strip above the nav: black and slim. 3 Oct 2026.
   Desktop only. The mobile contact popup keeps its own light card.
   ------------------------------------------------------------------ */
header .contactHeader { background-color: #000 !important; border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media screen and (min-width: 992px) {
  header .contactHeader .contact-cards { padding-top: 3px !important; padding-bottom: 3px !important; }
  header .contactHeader .contact-cards > div { padding: .15rem .8rem .15rem .35rem; }
  header .contactHeader .contact-cards > div:hover { background-color: rgba(255, 255, 255, .1); }
  header .contactHeader .contact-cards > div:hover span:first-of-type { color: var(--color-font-ford-white); }
  header .contactHeader .contact-cards > div:hover .icon { background-color: transparent; color: var(--color-font-ford-white); }
  header .contactHeader .contact-cards .icon { font-size: 1.05rem; padding: .15em; margin-right: .35rem; }
  header .contactHeader .contact-cards .info { display: flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
  header .contactHeader .contact-cards .info span { display: inline; font-size: .78rem; }
  header .contactHeader a { color: #d9d9d9; }
  header .contactHeader a:hover { color: #ff5a1f; }
  header .contactHeader .social-icons { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* full colour header logo, taken from home2: do not force it to white */
header .logo img[src^="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9"] { filter: none; }

/* ------------------------------------------------------------------
   Utility strip: right-hand icons removed everywhere. 3 Oct 2026.
   ------------------------------------------------------------------ */
header .contactHeader .social-icons { display: none !important; }

/* The strip is hidden on the Manus homepage, desktop only.
   Phones keep it because it carries the tap-to-call button. */
@media screen and (min-width: 992px) {
  body:has(.nb-home) header .contactHeader { display: none !important; }
}

/* ------------------------------------------------------------------
   VDP enhanced view on phones. 4 Oct 2026.
   The view was wider than the screen because the thumbnail strip set
   a minimum width for everything. These rules stop that and tighten
   the spacing on small screens. Desktop is unchanged.
   ------------------------------------------------------------------ */
html #nbtk-root { min-width: 0; }
html #nbtk-root .nbtk-ribbon { width: 0; min-width: 100%; }
html #nbtk-root .nbtk-gal > *,
html #nbtk-root .nbtk-grid > *,
html #nbtk-root .nbtk-stack > *,
html #nbtk-root .nbtk-simgrid > *,
html #nbtk-root .nbtk-specs > *,
html #nbtk-root .nbtk-feats > * { min-width: 0; }
html #nbtk-root .nbtk-desc,
html #nbtk-root .nbtk-feat,
html #nbtk-root .nbtk-specrow span,
html #nbtk-root h1.nbtk-title { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  html #nbtk-root .nbtk-gal,
  html #nbtk-root .nbtk-grid { grid-template-columns: minmax(0, 1fr); }
  html #nbtk-root .nbtk-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  html #nbtk-root .nbtk-wrap { padding: 0 14px; }
  html #nbtk-root .nbtk-sec { padding: 20px 0; }
  html #nbtk-root h1.nbtk-title { font-size: 26px; }
  html #nbtk-root .nbtk-head { gap: 12px; }
  html #nbtk-root .nbtk-prices { text-align: left; gap: 6px 20px; }
  html #nbtk-root .nbtk-hero { min-height: 230px; border-radius: 14px; }
  html #nbtk-root .nbtk-tile { min-height: 120px; border-radius: 14px; }
  html #nbtk-root .nbtk-thumb { width: 92px; height: 62px; }
  html #nbtk-root .nbtk-grid { gap: 24px; padding: 24px 0; }
  html #nbtk-root .nbtk-block { margin-top: 26px; }
  html #nbtk-root .nbtk-card.pad { padding: 18px; }
  html #nbtk-root .nbtk-specs,
  html #nbtk-root .nbtk-feats,
  html #nbtk-root .nbtk-simgrid { grid-template-columns: minmax(0, 1fr); }
  html #nbtk-root .nbtk-specrow { padding: 11px 14px; }
  html #nbtk-root h3.nbtk-h3 { font-size: 20px; }
}

/* Hamburger menu: one arrow per row. 4 Oct 2026.
   The arrow cell holds an inline SVG as well as the template icon.
   The template icon is the one that flips, so the SVG is hidden here. */
@media screen and (max-width: 1150px) {
  header i.showSub svg,
  .topNavigation i.showSub svg { display: none !important; }
}

/* nb-cms-edit-nav: CMS edit mode only (body.cms_OBB). Keeps the admin menu on one row and tightens spacing so every item fits. */
html body.cms_OBB header, html body.cms_OBB header .row { overflow: visible; }
html body.cms_OBB header .topNavigation { flex-wrap: nowrap; }
html body.cms_OBB header .topNavigation > li { padding-left: 2px; padding-right: 2px; margin: 0; }
html body.cms_OBB header .topNavigation > li > a { letter-spacing: .03em; padding-left: 6px; padding-right: 6px; }