/* =========================================================================
   Cleanic — bottom dock, ported from the GOGO landing nav

   The look, measured off the live GOGO page so this is a copy rather than an
   interpretation:

     nav      62px tall, fully rounded, no background of its own
     item     69x51, radius 16px, padding 6px 16px
     glass    rgba(255,255,255,.55) with blur(16px) saturate(1.9)
     border   1px rgba(255,255,255,.6)
     lift     the bright top edge: a 52% height gradient, rounded 16/16/60%/60%
     active   white .78, lime border, lime glow

   Cleanic's palette is the same navy and lime GOGO uses, so nothing needed
   recolouring. The one change is the item list, and the fact that this is
   handled in plain CSS so it works on the static home page as well as inside
   the React app.
   ========================================================================= */

/* ── the dock ───────────────────────────────────────────────────────────── */
.cl-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 11px;
  z-index: 60;
  display: flex;
  align-items: center;
  height: 62px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.cl-dock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}

/* ── an item: a pane of glass ───────────────────────────────────────────── */
.cl-dock a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border-radius: 16px;
  text-decoration: none;
  /* .92 rather than .55. At 55% the page content read straight through the
     item and the nav looked like a window rather than a surface. The blur
     stays, so a hint of what is behind still comes through. */
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(141, 182, 0, .55);
  box-shadow:
    0 8px 20px -10px rgba(20, 20, 25, .38),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease,
              transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* the bright top edge that makes it read as glass catching light */
.cl-dock a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: 16px 16px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.cl-dock a:hover {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    0 12px 26px -10px rgba(20, 20, 25, .44),
    inset 0 1px 0 #fff;
  transform: translateY(-2px);
}

.cl-dock a:active { transform: translateY(0) scale(.97); }

/* the page you are on: a lime rim, glass kept underneath */
.cl-dock a.on,
.cl-dock a[aria-current="page"] {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(141, 182, 0, .9);
  box-shadow:
    0 10px 24px -10px rgba(141, 182, 0, .6),
    0 0 0 1px rgba(141, 182, 0, .45),
    inset 0 1px 0 #fff;
}

.cl-dock .ic {
  position: relative;
  z-index: 1;
  font-size: 21px;
  line-height: 1;
  transition: transform .2s ease;
}
.cl-dock a:hover .ic { transform: translateY(-2px); }

.cl-dock .lb {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #52525B;
  transition: color .2s ease;
}
.cl-dock a:hover .lb { color: #1a1a1a; }
.cl-dock a.on .lb,
.cl-dock a[aria-current="page"] .lb { color: #1a1a1a; }

/* ── mobile: the dock replaces the old bar on the static page ───────────── */
@media (max-width: 640px) {
  .cl-dock { bottom: 9px; }
  .cl-dock-row { gap: 5px; }
  .cl-dock a { padding: 6px 12px; }
  .cl-dock .ic { font-size: 19px; }
  .cl-dock .lb { font-size: 10.5px; }
}

/* hide the old plain bar wherever the dock is present, so the two never
   stack on top of each other */
body.has-cl-dock .m-bottom-nav { display: none !important; }

/* content must clear the dock: 62px tall plus its 16px offset and a margin */
body.has-cl-dock { padding-bottom: 80px; }

@media (prefers-reduced-motion: reduce) {
  .cl-dock a, .cl-dock .ic { transition: none; }
  .cl-dock a:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   React dock item. The React nav renders a <button> rather than an <a>, so it
   needs the same glass treatment under its own class. Kept in this file rather
   than in the component so both surfaces stay in step.
   ══════════════════════════════════════════════════════════════════════════ */
.cl-dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border-radius: 16px;
  /* .92 rather than .55. At 55% the page content read straight through the
     item and the nav looked like a window rather than a surface. The blur
     stays, so a hint of what is behind still comes through. */
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(141, 182, 0, .55);
  box-shadow:
    0 8px 20px -10px rgba(20, 20, 25, .38),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease,
              transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.cl-dock-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  border-radius: 16px 16px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.cl-dock-item:hover {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}
.cl-dock-item:active { transform: translateY(0) scale(.97); }

/* the current page: a lime rim, glass kept underneath */
.cl-dock-item.on,
.cl-dock-item[aria-selected="true"] {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(141, 182, 0, .9);
  box-shadow:
    0 10px 24px -10px rgba(141, 182, 0, .6),
    0 0 0 1px rgba(141, 182, 0, .45),
    inset 0 1px 0 #fff;
}

.cl-dock-item .lb,
.cl-dock-item span { position: relative; z-index: 1; }

/* the label under the icon, matching the static dock */
.cl-dock-item > span:last-child {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #52525B;
}
.cl-dock-item.on > span:last-child,
.cl-dock-item[aria-selected="true"] > span:last-child { color: #1a1a1a; }

@media (max-width: 640px) {
  .cl-dock-item { padding: 6px 12px; }
  .cl-dock-item > span:last-child { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-dock-item { transition: none; }
  .cl-dock-item:hover { transform: none; }
}

/* the dock needs clearance so page content never hides behind it */
body.has-cl-dock,
body:has(.cl-dock-row) { padding-bottom: 80px; }