/* TLV chrome for the static Lavatory city sites (phone v2 phase 2, 2026-10-01).
 * Same banner + bottom nav as thelavatory.com: values copied from the live mu-plugins
 * (tlv-topbar-desktop.php / tlv-topbar-mobile.php) and the computed styles of the WordPress
 * bottom nav (mobile-bottom-menu-for-wp + ShiftNav toggle button) captured at 1280px and 390px.
 * Bars are position:fixed like thelavatory.com, but the page gets a body padding-top equal to the bar's
 * height (the spacer), so a fixed bar can never cover the page title (the thelavatory.com mobile bug).
 * (These static sites' html/body overflow rules break position:sticky, so sticky is not an option.)
 * dv is replaced by the site's class prefix (dv / tx) by the installer.
 */
:root { --tlv-bar-h: 56px; --tlv-bnav-h: 97px; }
@media (min-width: 1180px) { :root { --tlv-bar-h: 76px; } }

/* ---------- desktop bar (>= 1180px) : .tlv-dtopbar ---------- */
.tlv-dtopbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: linear-gradient(180deg, #990000 0%, #7D0000 100%);
  color: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  display: none;
}
.tlv-dtopbar__inner { max-width: 1400px; margin: 0 auto; padding: 18px; display: flex; align-items: center; justify-content: center; height: 76px; box-sizing: border-box; }
.tlv-dtopbar__line { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 28px; line-height: 1.2; white-space: nowrap; }
.tlv-dicon { font-size: 40px !important; width: 40px !important; height: 40px !important; line-height: 1 !important; vertical-align: middle; }
.tlv-dhl { position: relative; display: inline-block; }
.tlv-dhl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 6px; border-radius: 6px; background: rgba(255,215,0,.9);
  transform: scaleX(0); transform-origin: left center; animation: tlv-dsweep 1.2s ease-out .2s forwards; }
@keyframes tlv-dsweep { 0% { transform: scaleX(0); opacity: .6; } 60% { transform: scaleX(1.05); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
.tlv-ddot { width: 14px; height: 14px; border-radius: 50%; background: #00d12b; box-shadow: 0 0 10px rgba(0,255,80,.9); animation: tlv-dblink 1s infinite; }
@keyframes tlv-dblink { 0%, 45%, 100% { opacity: 1; } 25%, 70% { opacity: .25; } }
.tlv-dtopbar__cta { color: #fff !important; text-decoration: none !important; font-weight: 900; font-size: 30px; }
.tlv-dtopbar__cta:hover { text-decoration: underline !important; }
@media (min-width: 1180px) { .tlv-dtopbar { display: block; } }

/* ---------- mobile / tablet bar (<= 1179px) : .tlv-mtopbar ---------- */
.tlv-mtopbar { display: none; }
@media (max-width: 1179px) {
  .tlv-mtopbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 56px;
    background: #b30000; color: #fff; display: block; overflow: hidden;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  }
  .tlv-mtopbar__link { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 1; }
  .tlv-mtopbar__inner { height: 100%; padding: 0 10px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
  .tlv-mtopbar__line { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; line-height: 1; white-space: nowrap; color: #fff; }
  .tlv-mtopbar__line * { color: #fff !important; text-decoration: none !important; }
  .tlv-mtopbar__num { font-weight: 900; }
  .tlv-micon { font-size: 16px !important; width: 16px !important; height: 16px !important; line-height: 1 !important; vertical-align: middle; }
  .tlv-mhl { position: relative; display: inline-block; }
  .tlv-mhl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border-radius: 4px; background: rgba(255,215,0,.95);
    transform: scaleX(0); transform-origin: left center; animation: tlv-msweep 1s ease-out .1s forwards; }
  @keyframes tlv-msweep { 0% { transform: scaleX(0); opacity: .6; } 100% { transform: scaleX(1); opacity: 1; } }
  .tlv-mdot { width: 9px; height: 9px; border-radius: 50%; background: #00d12b; box-shadow: 0 0 6px rgba(0,255,80,.85); animation: tlv-mblink 1s infinite; }
  @keyframes tlv-mblink { 0%, 45%, 100% { opacity: 1; } 25%, 70% { opacity: .25; } }
}

/* ---------- spacer: content starts below the fixed bar; anchors land below it ---------- */
body { padding-top: var(--tlv-bar-h) !important; }
.dv-header { position: relative !important; top: 0 !important; z-index: auto !important; }  /* no stacking context: the burger can sit in the bar */
html { scroll-padding-top: calc(var(--tlv-bar-h) + 12px); }

/* ---------- burger lives in the red bar, like the ShiftNav toggle on thelavatory.com (<= 768px) ---------- */
@media (max-width: 768px) {
  .tlv-mtopbar__inner { padding: 0 10px 0 62px; }
  .dv-nav-toggle:not([aria-expanded="true"]) {
    position: fixed !important; top: 0; left: 0; width: 60.57px; height: 56px; z-index: 1002;
    background: #990000 !important; border-radius: 0 !important; padding: 0 !important;
    align-items: center; justify-content: center;
  }
  .dv-nav-toggle:not([aria-expanded="true"]) span { background: #fff !important; width: 26px; }
  .dv-nav-toggle[aria-expanded="true"] { top: calc(var(--tlv-bar-h) + 12px) !important; }
  .dv-header-inner { justify-content: center !important; }
}
/* the in-menu "Call Now: <number>" line (the ShiftNav number on thelavatory.com) shows only in the mobile menu */
.tlv-navcall { display: none !important; }
@media (max-width: 768px) {
  .dv-nav[data-open="true"] .tlv-navcall { display: block !important; }
  .tlv-navcall a { font-weight: 800 !important; }
}

/* ---------- bottom nav (<= 1180px) : same as thelavatory.com bnav ---------- */
.tlv-bnav { display: none; }
@media (max-width: 1180px) {
  body { padding-bottom: var(--tlv-bnav-h) !important; }
  .tlv-bnav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #826636; box-shadow: 0 10px 34px rgba(0,0,0,.12);
    -webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tlv-bnav ul { list-style: none; margin: 0; padding: 15px 2px; display: flex; align-items: center; justify-content: flex-start; min-height: 97px; box-sizing: border-box; }
  .tlv-bnav li { flex: 1 1 0; display: flex; justify-content: center; align-items: center; }
  .tlv-bnav a { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff !important; text-decoration: none !important; }
  .tlv-bnav i { font-size: 24px; line-height: 24px; color: #fff; }
  .tlv-bnav span { font-size: 14px; line-height: 17px; font-weight: 500; letter-spacing: .48px; color: #fff; }
  .tlv-bnav .tlv-bnav__call a { background: #365282; color: #eee !important; padding: 10px 15px; border-radius: 6px; min-height: 66.8px; box-sizing: border-box; justify-content: center; gap: 6px; }
  .tlv-bnav .tlv-bnav__call span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: #eee; }
  /* the site's own mobile sticky call bar and bottom CTAs are replaced by this bar */
  .dv-stickycall { display: none !important; }
}