/* AI Visual Prompts — theme styles.
 *
 * Tailwind handles layout and colour in the templates. This file holds only
 * what Tailwind can't express cleanly: the bottom dock + sheets, the hero
 * texture, and safe-area handling. It is plain CSS on purpose, so the dock
 * is positioned correctly even before Tailwind's CDN build has run.
 */

:root {
  --avp-violet: #7c3aed;
  --avp-fuchsia: #d946ef;
  --avp-dock-h: 4.25rem;
  --bhpb-accent: #7c3aed;           /* tints the Prompt Box app to match */
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { background: #fff; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Room for the fixed dock so the footer is never hidden behind it. */
body {
  padding-bottom: calc(var(--avp-dock-h) + 1rem + env(safe-area-inset-bottom, 0px));
}

:focus-visible { outline: 2px solid var(--avp-violet); outline-offset: 2px; }

.avp-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.avp-noscrollbar::-webkit-scrollbar { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.avp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 28rem at 85% -10%, rgba(217, 70, 239, .18), transparent 60%),
    radial-gradient(50rem 26rem at 5% 0%, rgba(124, 58, 237, .18), transparent 60%),
    linear-gradient(180deg, #faf5ff 0%, #fff 100%);
  border-bottom: 1px solid #f3e8ff;
}
.avp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(124, 58, 237, .12) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  pointer-events: none;
}
.avp-hero > * { position: relative; }
.avp-gradient-text {
  background: linear-gradient(90deg, #7c3aed, #d946ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Bottom dock ──────────────────────────────────────────────────────── */
.avp-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid rgba(124, 58, 237, .14);
}
.avp-dock__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  max-width: 30rem;
  margin: 0 auto;
  padding: .25rem .5rem;
  list-style: none;
}
.avp-dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .35rem .25rem;
  margin: 0;
  font: inherit;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.1;
  color: #64748b;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 1rem;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.avp-dock__item svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.avp-dock__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avp-dock__item:hover { color: #6d28d9; }
.avp-dock__item[aria-current="page"] { color: #6d28d9; background: #f5f3ff; }

/* The centre action — search — is the primary one, so it floats up. */
.avp-dock__item--primary {
  position: relative;
  top: -.75rem;
  min-height: 3.5rem;
  max-width: 3.5rem;
  margin: 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #d946ef);
  border-radius: 9999px;
  box-shadow: 0 8px 20px -4px rgba(124, 58, 237, .55);
}
.avp-dock__item--primary:hover { color: #fff; filter: brightness(1.08); }
.avp-dock__item--primary span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;           /* label is for screen readers */
}

/* Tablet / desktop: a floating pill instead of an edge-to-edge bar. */
@media (min-width: 768px) {
  .avp-dock {
    left: 50%;
    right: auto;
    bottom: 1rem;
    width: min(30rem, calc(100% - 2rem));
    transform: translateX(-50%);
    padding-bottom: 0;
    border: 1px solid rgba(124, 58, 237, .18);
    border-radius: 9999px;
    box-shadow: 0 10px 40px -8px rgba(76, 29, 149, .35);
  }
  .avp-dock__list { padding: .25rem .75rem; }
  body { padding-bottom: calc(var(--avp-dock-h) + 2rem); }
}

/* ── Sheets (search + menu) ───────────────────────────────────────────── */
.avp-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
.avp-sheet.is-open { display: block; }
.avp-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: avp-fade .18s ease;
}
.avp-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 36rem;
  max-height: 85vh;
  margin: 0 auto;
  overflow-y: auto;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 1.5rem 1.5rem 0 0;
  box-shadow: 0 -10px 40px -10px rgba(15, 23, 42, .25);
  animation: avp-up .22s ease;
}
@media (min-width: 768px) {
  .avp-sheet__panel { bottom: 6rem; border-radius: 1.5rem; padding-bottom: 1.25rem; }
}
.avp-sheet__grab {
  width: 2.5rem; height: .3rem; margin: -.5rem auto .9rem;
  background: #e2e8f0; border-radius: 9999px;
}
@media (min-width: 768px) { .avp-sheet__grab { display: none; } }
@keyframes avp-up   { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes avp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .avp-sheet__scrim, .avp-sheet__panel { animation: none; }
}
body.avp-locked { overflow: hidden; }

/* Menu inside the sheet: big, tappable rows. menu_assets() supplies the
   stacked-menu mechanics; this is just the look. */
.avp-sheet .bh-menu--stack .bh-menu__link {
  padding: .8rem .5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}
.avp-sheet .bh-menu--stack .bh-menu__link:hover { color: #6d28d9; }
.avp-sheet .bh-menu__icon { width: 1.25rem; height: 1.25rem; color: #8b5cf6; }

/* Header desktop menu is not used — the dock is the navigation — but a
   widget or app may still render bh-menu in the footer. */
.avp-footer .bh-menu { flex-direction: column; align-items: flex-start; gap: .5rem; }

/* Sidebar widgets (if a widget area is placed on a page) */
.widget { margin-bottom: 1.5rem; }
.widget-title {
  margin-bottom: .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0f172a;
}

/* Post content niceties */
.prose img { border-radius: 1rem; }
.prose figure { margin: 1.5rem 0; }


/* ── Top navigation ─────────────────────────────────────────────────────
   Desktop (>=1024px): inline menu in the header, Categories is a hover
   dropdown. Below that: a toggle button opens a full-width panel with the
   same menu stacked, submenus open on tap. Mechanics (dropdown, stack,
   tap-to-open) come from core's bh-menu; this is only the look. */
.avp-topnav { display: none; margin-left: auto; margin-right: .5rem; }
.avp-topnav__list { gap: .15rem; }
.avp-topnav__list > .bh-menu__item { display: flex; align-items: center; height: 4rem; }
.avp-topnav .bh-menu__link {
  padding: .5rem .85rem;
  font-size: .9rem;
  font-weight: 500;
  color: #334155;
  border-radius: 9999px;
  transition: color .15s ease, background .15s ease;
}
.avp-topnav .bh-menu__link:hover,
.avp-topnav .bh-menu__item--parent:hover > .bh-menu__link,
.avp-topnav .bh-menu__item:focus-within > .bh-menu__link,
.avp-topnav .bh-menu__link[aria-current="page"] { color: #6d28d9; background: #f5f3ff; }
.avp-topnav .bh-submenu {
  min-width: 13rem;
  padding: .4rem;
  border-color: rgba(124, 58, 237, .14);
  border-radius: 1rem;
  box-shadow: 0 12px 32px -8px rgba(76, 29, 149, .25);
}
.avp-topnav .bh-submenu .bh-menu__link { border-radius: .6rem; font-size: .875rem; }

.avp-topnav__toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #475569;
  background: none;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.avp-topnav__toggle:hover { color: #6d28d9; background: #f5f3ff; }
.avp-topnav__toggle .avp-topnav__icon-close { display: none; }
.avp-topnav__toggle[aria-expanded="true"] .avp-topnav__icon-open { display: none; }
.avp-topnav__toggle[aria-expanded="true"] .avp-topnav__icon-close { display: block; }

.avp-topnav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 3.5rem - var(--avp-dock-h) - 1.5rem);
  max-height: calc(100dvh - 3.5rem - var(--avp-dock-h) - 1.5rem);
  overflow-y: auto;
  padding: .25rem 1rem 1rem;
  background: #fff;
  border-bottom: 1px solid rgba(124, 58, 237, .14);
  box-shadow: 0 18px 30px -12px rgba(15, 23, 42, .2);
  animation: avp-up .18s ease;
}
.avp-topnav-panel[hidden] { display: none; }
.avp-topnav-panel .bh-menu--stack .bh-menu__link {
  width: 100%;
  padding: .8rem .25rem;
  font-size: 1rem;
  font-weight: 500;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}
.avp-topnav-panel .bh-menu--stack .bh-menu__link:hover,
.avp-topnav-panel .bh-menu--stack .bh-menu__link[aria-current="page"] { color: #6d28d9; }
.avp-topnav-panel .bh-menu--stack .bh-submenu { padding-left: .75rem; }
.avp-topnav-panel .bh-menu--stack .bh-submenu .bh-menu__link { font-size: .95rem; font-weight: 400; color: #475569; }
@media (prefers-reduced-motion: reduce) { .avp-topnav-panel { animation: none; } }

@media (min-width: 1024px) {
  .avp-topnav { display: block; }
  .avp-topnav__toggle, .avp-topnav-panel { display: none !important; }
}

/* Footer legal menu */
.avp-legal__list{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding:0;list-style:none}
.avp-legal__link{color:#64748b;text-decoration:none;transition:color .15s}
.avp-legal__link:hover,.avp-legal__link:focus-visible{color:#7c3aed;text-decoration:underline}