/* Holy Puzzle: shared layout for every page (templates/holypuzzle/fragments.html) */

:root {
  --bottom-tabs-height: 64px;
}

/* ---------- Logo (navbar brand, offcanvas title, About, admin navbar) ---------- */
.hl-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffe9a8 0%, #f5b82e 45%, #7b4fd6 100%);
  color: #fff;
  font-size: .95em;
  box-shadow: 0 0 0 2px rgba(245, 184, 46, .35), 0 2px 8px rgba(123, 79, 214, .35);
}

.hl-logo-holy {
  background: linear-gradient(90deg, #e0a21a, #7b4fd6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body {
  /* keep content clear of the fixed bottom tab bar (+ iOS home indicator) */
  padding-bottom: calc(var(--bottom-tabs-height) + env(safe-area-inset-bottom) + 1rem);
}

/* ---------- Bottom tab bar ---------- */
.bottom-tabs {
  height: calc(var(--bottom-tabs-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  z-index: 1030;
}

.bottom-tabs .nav {
  height: var(--bottom-tabs-height);
  max-width: 720px;
  margin: 0 auto;
  flex-wrap: nowrap;               /* every tab on one row, equal widths, even with seven on a small phone */
}

.bottom-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

.bottom-tabs .nav-link {
  height: 100%;
  display: flex;
  flex-direction: column;          /* mobile: icon above label */
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-left: .125rem;
  padding-right: .125rem;
  border: 0;
  border-radius: 0;
  color: var(--bs-secondary-color);
  font-size: .75rem;
  font-weight: 500;
  background: transparent;
  position: relative;
  transition: color .15s ease;
}

.bottom-tabs .nav-link i {
  font-size: 1.35rem;
  line-height: 1;
}

.bottom-tabs .nav-link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 399.98px) {
  .bottom-tabs .nav-link { font-size: .7rem; }
}

.bottom-tabs .nav-link:hover {
  color: var(--bs-primary);
}

.bottom-tabs .nav-link.active,
.bottom-tabs .nav-link.menu-current {
  color: var(--bs-primary);
  background: transparent;
}

/* "Menu" tab while its pop-up menu is open */
.bottom-tabs .nav-link.show {
  color: var(--bs-primary);
}

/* pop-up menu above the bottom tabs */
.bottom-tabs .dropdown-menu {
  min-width: 13rem;
  margin-bottom: .5rem !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
}

/* active indicator bar */
.bottom-tabs .nav-link.active::before,
.bottom-tabs .nav-link.menu-current::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--bs-primary);
}

/* desktop: icon beside label */
@media (min-width: 768px) {
  .bottom-tabs .nav-link {
    flex-direction: row;
    gap: .5rem;
    font-size: .9rem;
  }
  .bottom-tabs .nav-link i {
    font-size: 1.15rem;
  }
}

/* ---------- Page header ---------- */
.page-header {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #8b5cf6 100%);
}

/* ---------- Tabs inside a page ---------- */
.tab-pane {
  animation: fadeIn .2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Play buttons on photo cards (home, explore) ---------- */
.play .btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .3rem .25rem;
}

/* ---------- Toasts sit above the bottom tab bar ---------- */
.toast-container {
  bottom: calc(var(--bottom-tabs-height) + env(safe-area-inset-bottom) + .75rem) !important;
  z-index: 1090;
}

kbd { font-size: .8em; }