/* Demo Armor Epoxy overrides on top of the Lakebound template (theme.css + base.css + home.css). */
:root {
  --brand:         #15171b;   /* charcoal: quote forms, banners, mobile form block */
  --brand-deep:    #0e1013;
  --on-brand:      #ffffff;
  --aqua:          #d1f5ea;   /* buttons + highlights: the light aqua on their live site  */
  --aqua-hi:       #b3e5d6;   /* their deeper aqua */
  --accent:        #5c7d73;   /* their dark sage; dark enough for icons/text on light backgrounds (4.5:1 on white) */
  --accent-dark:   #4a665e;
  --accent-strong: #384e48;
  --accent-soft:   #d1f5ea;
  --ink:           #15171b;
  --ink-card:      #0e1013;
}
/* ---- shorter header: the logo is a 1.5:1 badge, not Lakebound's wide wordmark; no top contact bar (make.py) ---- */
.navrow { padding: 2px 0 !important; }
/* phone: no quote icon top right (Kaleb 2026-10-21); "Get a Quote" stays from 768px up */
@media (max-width: 767px) { .navrow__cta .btn-quote { display: none; } }
.navrow__logo .logo, .is-home .navrow__logo .logo { padding-bottom: 0 !important; }
.navrow__logo .logo img { padding: 4px 0; }
.navrow__logo .logo img.logo__d { width: 84px; height: auto; }
.navrow__logo .logo img.logo__m { width: 62px; height: auto; }
.drawer__head .logo img { width: 62px; height: auto; padding: 4px 0; }
.main-nav__list { flex-wrap: nowrap; column-gap: 26px; }
.main-nav__link { white-space: nowrap; }

/* ---- aqua buttons (their live-site color) ---- */
.btn--primary, .btn--secondary, .qf__button, .btn--white.qf__button, .btn-quote {
  background: var(--aqua) !important; color: #111 !important; border-color: var(--aqua) !important; background-image: none !important;
}
.btn--primary:hover, .btn--secondary:hover, .qf__button:hover, .btn-quote:hover {
  background: var(--aqua-hi) !important; color: #111 !important; border-color: var(--aqua-hi) !important;
}
.qf__call a, .quote-card a { color: #fff; }

/* ---- menu links: hover + click highlight that stays (preview links never navigate) ---- */
.main-nav__link:hover, .dd__link:hover, .drawer__link:hover, .drawer__sublink:hover, .demo-footer__link:hover { color: var(--aqua) !important; }
.main-nav__link.is-current, .drawer__link.is-current, .dd__link.is-selected, .drawer__sublink.is-selected,
.main-nav__link.is-selected, .drawer__link.is-selected, .demo-footer__link.is-selected { color: var(--aqua) !important; }
.dd__link.is-selected, .drawer__sublink.is-selected, .demo-footer__link.is-selected { text-decoration: underline; text-underline-offset: 4px; }
.dd__link:active, .drawer__sublink:active, .main-nav__link:active { opacity: .7; }

/* ---- compact footer ---- */
.demo-footer { background: #15171b; color: #b9bdc6; font-size: 14px; line-height: 1.6; }
.demo-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; padding-top: 36px; padding-bottom: 28px; }
.demo-footer__brand p { margin: 10px 0 0; max-width: 300px; }
.demo-footer__logo img { display: block; width: 72px; height: auto; }
.demo-footer__h { margin: 0 0 8px; color: #fff; font: 600 13px/1.4 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; }
.demo-footer ul { list-style: none; margin: 0; padding: 0; }
.demo-footer li { margin: 0 0 4px; }
.demo-footer__link { color: #d7dae0; text-decoration: none; }
.demo-footer__bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 14px; border-top: 1px solid #2a2d33; font-size: 12px; color: #8b909a; }
@media (max-width: 991px) { .demo-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 28px; } .demo-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .demo-footer__grid { gap: 20px 16px; } .demo-footer__bottom { flex-direction: column; gap: 2px; } }

/* ---- hero, look copied from their live site : untinted video (their site uses a 30% scrim),
   header see-through over it (solid again once it sticks), white outline pill buttons. Type stays the template's
   Syne + Inter (Kaleb: their Cinzel / Old Standard TT fonts look bad). ---- */
.is-home .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.is-home .site-header:not(.is-stuck) .site-header__bar { background: rgba(22, 22, 22, .25); }
video.booking__img { background: #15171b; }
/* no tint on the video at all (Kaleb 2026-10-21); a soft shadow keeps the white text readable over the pale floor */
.booking--overlay .booking__media::after { content: none; }
.booking--overlay .booking__text { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .25); }
/* --demo-hdr = header height, set by a script in make.py; the hero runs under the header */
.booking--overlay .booking__media { min-height: calc(var(--bb-min-m, 560px) + var(--demo-hdr, 88px)); }
.booking--overlay .booking__content { top: var(--demo-hdr, 88px); }
.demo-hero-proof { margin-top: 14px; font-size: 16px; font-weight: 500; opacity: .95; }
.demo-hero-proof__line { display: block; }
.demo-stars { color: #f5b301; letter-spacing: 2px; }
.demo-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 26px; }
.demo-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 40px;
  border: 1px solid #fff; border-radius: 48px; background: transparent; color: #fff; cursor: pointer;
  font: 700 15px/1.2 var(--font-body); letter-spacing: .3px; text-decoration: none; transition: background .2s, color .2s;
}
.demo-hero-btn:hover { background: #fff; color: #161616; }
@media (min-width: 992px) { .booking--overlay .booking__media { min-height: calc(760px + var(--demo-hdr, 103px)); } }
@media (max-width: 991px) {
  .booking--overlay .booking__desc { font-size: 17px; line-height: 1.5; }
  .booking--overlay .booking__desc strong { font-weight: 600; }
  .demo-hero-ctas { flex-direction: column; gap: 12px; margin-top: 20px; }
  .demo-hero-btn { width: 100%; }
}

/* warranty cards: center the text vertically, so the shorter 15-year card doesn't sit high in its row */
#warranty .card { justify-content: center; }

/* reviews */
.demo-review .card__content { display: flex; flex-direction: column; gap: 12px; }
.demo-review .demo-stars { font-size: 20px; }
.demo-review .card__desc p { font-style: italic; }
.demo-review .card__heading { margin-top: auto; font-size: 15px; }

/* single before/after photo (their own side-by-side shot) */
.demo-ba { position: relative; border-radius: 20px; overflow: hidden; max-width: 960px; margin: 0 auto; }
.demo-ba img { display: block; width: 100%; height: auto; }
.demo-ba__labels { position: absolute; inset: 16px 16px auto; display: flex; justify-content: space-between; pointer-events: none; }
.demo-ba__labels span { background: rgba(0, 0, 0, .65); color: #fff; font-weight: 700; font-size: 15px; padding: 6px 14px; border-radius: 40px; }

/* flake color swatches */
.demo-swatches { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.demo-swatches img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
@media (max-width: 991px) { .demo-swatches { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 480px) { .demo-swatches { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

/* buttons used where the template had links */
button.btn { font: inherit; cursor: pointer; }

/* ---- compact dropdowns (template's are sized for 3-word boat menus) ---- */
.dd { padding: 14px 20px !important; min-width: 0 !important; width: max-content !important; border-radius: 14px; }
.dd__list li + li { padding-top: 4px !important; }
.dd__link { font-size: 15px !important; line-height: 1.5 !important; padding: 6px 0 !important; white-space: nowrap; display: block; }

/* ---- footer, tighter (Kaleb: footer too tall) ---- */
.demo-footer__grid { grid-template-columns: 1.1fr 1.4fr 1.2fr 1.1fr; gap: 28px; padding-top: 26px; padding-bottom: 18px; }
.demo-footer__grid ul.demo-footer__cols { display: grid; grid-template-columns: auto auto; column-gap: 22px; justify-content: start; }
.demo-footer li { margin: 0 0 2px; }
.demo-footer__brand p { font-size: 13px; }
.demo-footer__bottom { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 991px) {
  .demo-footer__grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; padding-top: 22px; padding-bottom: 14px; }
  .demo-footer__grid ul.demo-footer__cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .demo-footer { font-size: 13px; }
  .demo-footer__brand { display: flex; align-items: center; gap: 12px; }
  .demo-footer__brand p { display: none; }
  .demo-footer__logo img { width: 54px; }
  .demo-footer__contact { grid-column: 1 / -1; }
  .demo-footer__contact ul { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .demo-footer__bottom { flex-direction: row; }
}