/* Floating bottom bar ("dock") + search sheet. Loaded on every page from includes/footer.php. */
:root{
  --tt-night:#07192b;
  --tt-lagoon:#1a8fe3;
  --tt-lagoon-deep:#0f6fb8;
  --tt-shallow:#e8f4fd;
  --tt-marigold:#f2a93b;
  --tt-ink-soft:#4a5e71;
  --tt-dock-h:64px;
}

/* room for the dock below the footer, in the footer's own colour */
body.tt-has-dock .tu-footer-bottom{padding-bottom:calc(var(--tt-dock-h) + 52px + env(safe-area-inset-bottom))}

/* keep the existing floating bits clear of the dock */
body.tt-has-dock .smooth-back-to-top-button{bottom:calc(var(--tt-dock-h) + 28px + env(safe-area-inset-bottom)) !important}
body.tt-has-dock .cmplz-cookiebanner{bottom:calc(var(--tt-dock-h) + 24px + env(safe-area-inset-bottom)) !important}

.tt-dock{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:9990;height:var(--tt-dock-h);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border:1px solid #dde8f2;
  border-radius:22px;
  box-shadow:0 14px 34px rgba(7,25,43,.14),0 2px 6px rgba(7,25,43,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (min-width:768px){
  .tt-dock{left:50%;right:auto;width:520px;transform:translateX(-50%);bottom:18px}
}
.tt-dock a,.tt-dock button{
  all:unset;box-sizing:border-box;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:100%;color:#5b7086;
  font-size:11px;font-weight:600;letter-spacing:.1px;line-height:1;
  position:relative;-webkit-tap-highlight-color:transparent;
}
.tt-dock a:hover,.tt-dock a:focus-visible{color:var(--tt-night)}
.tt-dock svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-dock a[aria-current="page"]{color:var(--tt-lagoon-deep)}
.tt-dock a[aria-current="page"]::after{
  content:"";position:absolute;bottom:7px;width:5px;height:5px;border-radius:50%;background:var(--tt-lagoon)
}
.tt-dock a:focus-visible,.tt-dock button:focus-visible{outline:2px solid var(--tt-lagoon);outline-offset:-4px;border-radius:14px}

/* the search button sits higher than the others */
.tt-dock .tt-dock-search{color:var(--tt-night)}
.tt-dock .tt-dock-search span.tt-dock-orb{
  width:54px;height:54px;margin-top:-30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--tt-lagoon);
  color:#fff;box-shadow:0 0 0 5px #fff,0 10px 22px rgba(26,143,227,.38);
  transition:transform .18s ease,background .18s ease;
}
.tt-dock .tt-dock-search:hover span.tt-dock-orb{background:var(--tt-lagoon-deep)}
.tt-dock .tt-dock-search:active span.tt-dock-orb{transform:scale(.94)}
.tt-dock .tt-dock-search svg{width:24px;height:24px;stroke-width:2.2}

/* ---------- search sheet ---------- */
.tt-search{position:fixed;inset:0;z-index:9995;display:none}
.tt-search.is-open{display:block}
.tt-search-backdrop{
  /* the page stays visible behind the card, blurred */
  position:absolute;inset:0;background:rgba(7,25,43,.28);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  opacity:0;transition:opacity .22s ease;
}
.tt-search.is-visible .tt-search-backdrop{opacity:1}
.tt-search-panel{
  /* phones: a card in the middle of the visible area; dock.js sets top and max-height from the
     visual viewport, so the card moves up and stays whole when the keyboard opens */
  position:absolute;left:14px;right:14px;top:50%;max-height:72vh;
  background:#fff;border-radius:24px;box-shadow:0 24px 70px rgba(7,25,43,.32);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px) scale(.97);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,top .18s ease;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tt-night);
}
.tt-search.is-visible .tt-search-panel{transform:none;opacity:1}
.tt-search-panel:focus{outline:none}
.tt-search-grip{display:none}
@media (min-width:768px){
  .tt-search-panel{
    left:50%;right:auto;top:9vh !important;bottom:auto;width:640px;max-height:78vh !important;
    transform:translate(-50%,12px) scale(.98);
    box-shadow:0 30px 80px rgba(7,25,43,.35);
  }
  .tt-search.is-visible .tt-search-panel{transform:translate(-50%,0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .tt-search-panel,.tt-search-backdrop,.tt-dock .tt-dock-search span.tt-dock-orb{transition:none}
}

.tt-search-bar{display:flex;align-items:center;gap:10px;padding:12px 16px 14px;border-bottom:1px solid #edf2f7;flex:none}
.tt-search-field{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--tt-shallow);border-radius:16px;padding:0 14px;height:52px;
}
.tt-search-field svg{width:20px;height:20px;stroke:var(--tt-lagoon-deep);fill:none;stroke-width:2.2;stroke-linecap:round;flex:none}
.tt-search-field input{
  all:unset;flex:1;min-width:0;font-size:17px;font-weight:500;color:var(--tt-night);height:100%;
}
.tt-search-field input::placeholder{color:#7d91a5}
.tt-search-close{
  all:unset;cursor:pointer;font-size:15px;font-weight:600;color:var(--tt-lagoon-deep);padding:10px 4px;
}
.tt-search-close:focus-visible,.tt-search-body a:focus-visible{outline:2px solid var(--tt-lagoon);outline-offset:2px;border-radius:10px}

.tt-search-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 16px 28px}
.tt-search-body h3{font-size:13px;font-weight:700;color:var(--tt-ink-soft);margin:0 0 10px;letter-spacing:.1px}
.tt-search-body h3:not(:first-child){margin-top:24px}

.tt-chips{display:flex;flex-wrap:wrap;gap:8px}
.tt-chips a{
  display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;
  border:1px solid #d9e6f1;background:#fff;color:var(--tt-night);font-size:14px;font-weight:600;text-decoration:none;
}
.tt-chips a:hover{border-color:var(--tt-lagoon);color:var(--tt-lagoon-deep)}

.tt-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tt-quick a{
  display:flex;flex-direction:column;gap:8px;padding:14px 12px;border-radius:16px;
  background:#f5f9fd;color:var(--tt-night);text-decoration:none;font-size:14px;font-weight:700;line-height:1.25;
}
.tt-quick a small{font-size:12px;font-weight:500;color:var(--tt-ink-soft)}
.tt-quick a svg{width:24px;height:24px;stroke:var(--tt-lagoon-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-quick a:hover{background:var(--tt-shallow)}
@media (max-width:380px){.tt-quick{grid-template-columns:repeat(2,1fr)}}

.tt-results-group{margin-bottom:18px}
.tt-results a{
  display:block;padding:12px 12px;border-radius:14px;text-decoration:none;color:var(--tt-night);
}
.tt-results a:hover,.tt-results a.is-active{background:#f2f7fc}
.tt-results a strong{display:block;font-size:15px;font-weight:700;line-height:1.35}
.tt-results a span{display:block;font-size:13px;line-height:1.45;color:var(--tt-ink-soft);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tt-results mark{background:none;color:var(--tt-lagoon-deep);font-weight:800}
.tt-empty{font-size:15px;color:var(--tt-ink-soft);line-height:1.6;margin:6px 0 0}
html.tt-lock,html.tt-lock body{overflow:hidden;overscroll-behavior:none}
.tt-search,.ttm{overscroll-behavior:contain;touch-action:pan-y}

/* the old theme gives focused inputs and buttons a burgundy border/outline; not inside the search sheet */
.tt-search .tt-search-field input,.tt-search .tt-search-field input:focus,.tt-search .tt-search-field input:focus-visible{
  border:0 !important;outline:none !important;box-shadow:none !important;background:transparent !important;border-radius:0}
.tt-search .tt-search-field{border:2px solid transparent;transition:border-color .15s ease}
.tt-search .tt-search-field:focus-within{border-color:var(--tt-lagoon);background:#fff}
.tt-dock .tt-dock-search:focus,.tt-dock .tt-dock-search:focus-visible{outline:none;background:transparent}
.tt-dock .tt-dock-search:focus-visible span.tt-dock-orb{box-shadow:0 0 0 5px #fff,0 0 0 7px var(--tt-lagoon)}

/* ---------- phones: compact search card (keep last: overrides the base rules above) ---------- */
@media (max-width:767px){
  /* compact card: chips in one swipe row, tiles show icon + name */
  .tt-search-bar{padding:12px 8px 12px 12px;gap:4px}
  .tt-search-field{height:48px;padding:0 10px 0 12px;gap:8px}
  .tt-search-field input{font-size:16px}
  .tt-search-close{width:38px;height:38px;padding:0;margin:0;align-self:center;border-radius:50%;display:block;position:relative;line-height:0;overflow:hidden;color:transparent;
    font-size:0;flex:none}
  .tt-search-close::before{content:"";position:absolute;left:11px;top:11px;width:16px;height:16px;background:var(--tt-ink-soft);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .tt-search-close:active{background:#eef3f8}
  .tt-search-body{padding:14px 0 16px}
  .tt-search-body > *{margin-left:14px;margin-right:14px}
  .tt-search-body > h3{padding:0 14px;margin-left:0;margin-right:0}
  .tt-search-body h3:not(:first-child){margin-top:18px}
  .tt-search-body .tt-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0;padding:0 14px 2px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x}
  .tt-search-body .tt-chips::-webkit-scrollbar{display:none}
  .tt-chips a{flex:none}
  .tt-quick{gap:8px}
  .tt-quick a{padding:12px 6px 11px;gap:6px;font-size:13px;align-items:center;text-align:center}
  .tt-quick a small{display:none}
  .tt-quick a svg{width:22px;height:22px}
  .tt-results{margin:0}
  .tt-results-group{margin-left:6px;margin-right:6px}
  .tt-results-group h3{padding-left:8px}
}
@media (max-width:380px){.tt-search-body .tt-quick{grid-template-columns:repeat(3,1fr)}}
