/* ============================================================
   KAINODI — Static site custom CSS
   Mirrors src/index.css from the original React build.
   ============================================================ */

/* Base look (same as the React body rules) */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #f1e9d8;
  color: #1b2a4a;
  font-family: 'Work Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#kainodi-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.kainodi-site-header {
  position: relative;
  z-index: 50;
}

#root {
  width: 100%;
  min-height: 100%;
}

/* The admin shell is populated by admin.js. Its two direct children are
   the sidebar and the content column, so the host itself must own the
   horizontal flex layout. Without this, the content gets rendered below
   the full-height sidebar. */
#admin-chrome {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* A disabled backdrop must also be visually hidden. `pointer-events-none`
   prevents clicks but does not stop the backdrop's translucent background
   from painting over the mobile page. */
#mobile-menu[aria-hidden="true"],
#admin-mobile-menu[aria-hidden="true"] {
  visibility: hidden;
}

#mobile-menu[aria-hidden="false"],
#admin-mobile-menu[aria-hidden="false"] {
  visibility: visible;
}

/* Small-caps eyebrow label reused everywhere */
.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Subtle paper dot texture used on "Why KAINODI" */
.paper-texture {
  background-image: radial-gradient(rgba(27, 42, 74, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}

:focus-visible {
  outline: 2px solid #8a6d2f;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Fade / slide helpers that replace framer-motion entrance ease.
   The original used cubic-bezier(0.23, 1, 0.32, 1) ("editorial").
   ============================================================ */
@keyframes kainodi-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kainodi-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fade-up {
  animation: kainodi-fade-up 0.36s ease;
}

.animate-fade-in {
  animation: kainodi-fade-in 0.3s ease;
}

@keyframes kainodi-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-toast {
  animation: kainodi-toast-in 0.22s ease-out;
}

/* Announcement bar slide */
@keyframes kainodi-slide-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-announcement {
  animation: kainodi-slide-up 0.32s ease;
}

/* FAQ accordion (matches framer-motion height/opacity transition) */
.kainodi-faq-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}

.kainodi-faq-body.kainodi-faq-open {
  max-height: 400px;
  opacity: 1;
}

/* Public book-card descriptions start at three lines; the reader can expand
   an individual card without changing every card in the catalogue. */
.kainodi-book-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.kainodi-book-description.is-expanded {
  display: block;
  overflow: visible;
}

.books-search-shell {
  position: relative;
  width: min(100%, 44rem);
}

.books-filter-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.15rem 0.25rem 0.65rem;
  margin: -0.15rem -0.25rem -0.65rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.books-filter-tabs::-webkit-scrollbar { display: none; }
.books-filter-tabs > button { flex: 0 0 auto; }

.books-search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(27, 42, 74, 0.55);
  pointer-events: none;
  transform: translateY(-50%);
}

.books-search-input {
  width: 100%;
  min-height: 3.35rem;
  box-sizing: border-box;
  border: 1px solid rgba(27, 42, 74, 0.2);
  border-radius: 0.9rem;
  background: #fffdf7;
  padding: 0.8rem 1rem 0.8rem 3rem;
  color: #1b2a4a;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(27, 42, 74, 0.05);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.books-search-input::placeholder { color: rgba(27, 42, 74, 0.5); }
.books-search-input:focus { border-color: #315b4c; box-shadow: 0 0 0 3px rgba(49, 91, 76, 0.14); }

@media (prefers-reduced-motion: reduce) {

  .animate-fade-up,
  .animate-fade-in,
  .animate-announcement {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .admin-toast {
    animation: none;
  }
}