/* AM Davis Inc. — amdavislift.com
   All design tokens live here; a site-wide restyle should only need this file
   (and occasionally the partials in src/_includes/partials/). Values are taken
   verbatim from the legacy BizStudio stylesheet (sx.css). */

:root {
  --brand: #005c99;            /* primary blue: nav active, dropdowns, buttons */
  --bar-bg: #333333;           /* top quick bar */
  --text: #333333;
  --nav-link: #2e2e2e;
  --nav-hover-bg: #999999;
  --nav-border: #c0c0c0;
  --border-light: #dfdfdf;
  --h1-color: #222222;
  --h2-color: #333333;
  --h3-color: #444444;
  --link: #0000ff;
  --form-field-bg: #fafafa;
  --form-field-border: #cfcfcf;
  --font: 'Raleway', sans-serif;
  --body-size: 11pt;
  --mobile-menu-bg: #a3d4f5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: 1.5;
  color: var(--text);
}

@media (min-width: 700px) {
  body { background: #ffffff url('/assets/images/menu/bkgrnd.jpg'); }
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- Headings (legacy .esbH1–.esbH6 scale) ---------- */
h1, .esbH1 { font-size: 20pt; color: var(--h1-color); font-weight: bold; margin: 0 0 8px; font-family: var(--font); }
h2, .esbH2 { font-size: 18pt; color: var(--h2-color); font-weight: bold; margin: 0 0 8px; font-family: var(--font); }
h3, .esbH3 { font-size: 16pt; color: var(--h3-color); font-weight: bold; margin: 0 0 8px; font-family: var(--font); }
h4, .esbH4 { font-size: 14pt; color: var(--h3-color); font-weight: bold; margin: 0 0 8px; font-family: var(--font); }
h5, .esbH5 { font-size: 15pt; color: #555555; font-weight: bold; margin: 0 0 8px; font-family: var(--font); }
h6, .esbH6 { font-size: 13pt; color: #555555; font-weight: bold; margin: 0 0 8px; font-family: var(--font); }

/* ---------- Top quick bar ---------- */
#quickbar {
  background: var(--bar-bg);
  padding: 10px 15px 10px 10px;
}
.qb-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  max-width: 1170px;
  margin: 0 auto;
}
.qb-link { color: #ffffff; font-size: 10pt; }
.qb-link:hover { color: #ffffff; text-decoration: underline; }
.qb-div { border-left: 1px solid #666; height: 18px; }
.qb-social { display: flex; gap: 4px; }
.qb-social img { width: 26px; height: 26px; display: block; }

/* ---------- Sticky navbar ---------- */
#mainnav {
  background: #f8f8f8;
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 5000;
}
.nav-inner {
  padding: 8px 15px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.nav-logo img { max-height: 73px; width: auto; display: block; }

#nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#nav-menu > li { position: relative; }
#nav-menu > li > a {
  display: block;
  padding: 10px 15px;
  margin-left: 3px;
  border-radius: 5px;
  color: var(--nav-link);
  font-family: var(--font);
  font-size: 14pt;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
#nav-menu > li > a:hover {
  color: #ffffff;
  background-color: var(--nav-hover-bg);
  box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px 0px;
}
#nav-menu > li > a.sel {
  color: #ffffff;
  background-color: var(--brand);
  box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px 0px;
}
.caret {
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 4px;
  margin-bottom: 2px;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Dropdown panel: blue, rounded, white uppercase items (legacy div#mu2) */
#nav-menu .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 6000;
  min-width: 100%;
  margin-top: 5px;
  padding: 5px;
  list-style: none;
  background-color: var(--brand);
  border-radius: 5px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  animation: fadeInUp .3s;
}
#nav-menu .has-dropdown:hover .dropdown,
#nav-menu .has-dropdown.open .dropdown { display: block; }
/* Invisible bridge over the 5px margin-top gap so hover isn't lost while the
   mouse travels from the nav item down into the panel. 14px tall so it still
   covers the gap while the fadeInUp animation (translateY(8px)) is playing. */
#nav-menu .dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
#nav-menu .dropdown a {
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 11pt;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s;
}
#nav-menu .dropdown a:hover { background-color: rgba(255, 255, 255, .2); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hamburger (mobile) */
#nav-toggle {
  display: none;
  background: var(--brand);
  border: 0;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
}
#nav-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  transition: all .2s;
}
#nav-toggle .icon-bar + .icon-bar { margin-top: 4px; }
#nav-toggle.open .icon-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#nav-toggle.open .icon-bar:nth-child(2) { opacity: 0; }
#nav-toggle.open .icon-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero slider ---------- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1905 / 320; /* measured from the live slider */
  min-height: 150px;
  overflow: hidden;
  background: #ffffff;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #ffffff;
  font-size: 26px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .25);
  border-radius: 4px;
  text-decoration: none;
  opacity: 0;
  transition: opacity .2s;
}
.hero:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { text-decoration: none; color: #fff; background: rgba(0, 0, 0, .5); }
.hero-prev { left: 10px; }
.hero-next { right: 10px; }
.hero-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 6px;
}
.hero-dot {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: var(--text);
  font-family: var(--font);
  font-size: 10pt;
  cursor: pointer;
}
.hero-dot.active { background: var(--brand); color: #ffffff; }

/* ---------- Page layout ---------- */
#page { background: #ffffff; }
#content { padding: 20px 12px; }
#content.has-sidebar {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
#content-main { flex: 1 1 auto; min-width: 0; }
#content-right {
  flex: 0 0 200px;
  text-align: center;
}
.sbar-item { margin-bottom: 15px; }

/* Content building blocks used by converted pages */
.esbSec { margin-bottom: 15px; }
.cols { display: flex; gap: 20px; flex-wrap: wrap; }
.cols > div { flex: 1 1 0; min-width: 220px; }
.text-center { text-align: center; }

/* Legacy outline button (a.esbB1) */
a.esbB1 {
  display: inline-block;
  border: 4px solid var(--brand);
  border-radius: 8px;
  color: var(--brand);
  font-family: var(--font);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
a.esbB1 span { display: block; padding: 10px 24px; border-radius: 4px; }
a.esbB1 span:hover { background-color: var(--brand); color: #ffffff; }

/* Image hover overlay (legacy hovImgZoom flavor) */
.hovimg { position: relative; display: inline-block; }
.hovimg img { display: block; }

/* Responsive video embeds */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 15px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tables of specs on model pages */
.spec-table { border-collapse: collapse; width: 100%; margin-bottom: 15px; }
.spec-table td, .spec-table th { border: 1px solid var(--border-light); padding: 6px 10px; text-align: left; }
.spec-table th { background: #efefef; color: var(--h3-color); }

/* ---------- Forms (legacy esbForm* styling) ---------- */
.lead-form-wrap { max-width: 720px; }
.form-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 14px;
  align-items: center;
}
.form-grid label { text-align: right; font-weight: normal; }
.form-grid textarea + label,
.form-grid label[for$="-message"] { align-self: start; }
.esbFormField {
  font-size: 14pt;
  font-family: var(--font);
  border-radius: 3px;
  padding: 10px;
  border: 1px solid var(--form-field-border);
  background-color: var(--form-field-bg);
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.req { color: #cc0000; }
.form-req-note { font-size: 9pt; color: #666; }
.esbFormBtn {
  padding: 10px 22px;
  background: var(--brand);
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  font-size: 14pt;
  font-family: var(--font);
  cursor: pointer;
}
.esbFormBtn:disabled { opacity: .65; cursor: not-allowed; }
.form-status { min-height: 1em; font-weight: bold; }
.form-status.ok { color: #1a7a1a; }
.form-status.err { color: #cc0000; }
.hp-field { display: none !important; }

/* ---------- Footer ---------- */
#sitefooter {
  border-top: 2px solid var(--border-light);
  background: #ffffff;
  text-align: center;
  padding: 20px 0 30px;
}
#sitefooter a { color: var(--link); }

/* ---------- Blog / article lists ---------- */
.post-meta { color: #777; font-size: 10pt; margin-bottom: 10px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-bottom: 1px solid var(--border-light); padding: 12px 0; }
.post-list a { color: var(--brand); font-weight: bold; font-size: 13pt; }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  #nav-menu > li > a { font-size: 11pt; padding: 10px 8px; }
  .nav-logo img { max-height: 55px; }
}

@media (max-width: 900px) {
  #nav-toggle { display: block; }
  .nav-inner { flex-wrap: nowrap; }
  #nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--mobile-menu-bg);
    border-top: 3px solid var(--brand);
    padding: 8px;
  }
  #nav-menu.open { display: flex; }
  #nav-menu > li > a { font-size: 12pt; white-space: normal; }
  #nav-menu .dropdown {
    position: static;
    min-width: 0;
    margin-top: 0;
    animation: none;
  }
  #content.has-sidebar { flex-direction: column; }
  #content-right { flex-basis: auto; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label { text-align: left; }
}