/* ===========================================================
   Hidden in H2O — Research Database
   =========================================================== */

.database-body{
  background:linear-gradient(180deg, #eaf6ff 0%, #F8F4EC 420px);
  overflow-x:hidden;
}

/* ---------- ambient floating bubbles ---------- */
.bubble-field{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.bubble{
  position:absolute;
  bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(59,167,245,0.15) 70%);
  border:1px solid rgba(255,255,255,0.5);
  animation:db-rise linear infinite;
}
@keyframes db-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.8; }
  90%{ opacity:0.5; }
  100%{ transform:translateY(-110vh) translateX(18px); opacity:0; }
}

/* ---------- hero ---------- */
.db-hero{
  position:relative;
  z-index:2;
  padding:60px 0 30px;
  text-align:center;
}
.db-hero-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.db-hero h1{
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:var(--navy);
}
.db-hero .otter-search{
  width:92px;
  height:146px;
  flex:none;
  object-fit:contain;
  object-position:center;
  padding:3px;
  background:#fff;
  border:3px solid #fff;
  border-radius:18px;
  box-shadow:var(--shadow-soft);
  animation:db-float 3.6s ease-in-out infinite;
}
@keyframes db-float{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-8px) rotate(2deg); }
}
.db-hero p.subtitle{
  max-width:640px;
  margin:14px auto 0;
  color:#3c4a63;
  font-size:1.05rem;
  line-height:1.6;
}

/* ---------- search ---------- */
.db-search-wrap{
  position:relative;
  z-index:2;
  max-width:640px;
  margin:34px auto 0;
  padding:0 20px;
}
.db-search-wrap input{
  width:100%;
  font-family:var(--font-body);
  font-size:1rem;
  padding:16px 24px 16px 52px;
  border-radius:999px;
  border:1.5px solid rgba(59,167,245,0.35);
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(30,42,68,0.1);
  color:var(--navy);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.db-search-wrap input:focus{
  outline:none;
  border-color:var(--water-blue);
  box-shadow:0 12px 34px rgba(59,167,245,0.28);
}
.db-search-wrap::before{
  content:"🔍";
  position:absolute;
  left:42px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
  z-index:1;
  opacity:0.6;
}

/* ---------- filters ---------- */
.db-filters{
  position:relative;
  z-index:2;
  max-width:1000px;
  margin:26px auto 0;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.filter-group{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.filter-group-label{
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--navy);
  min-width:96px;
}
.filter-chip{
  font-family:var(--font-body);
  font-size:0.82rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid rgba(30,42,68,0.15);
  background:rgba(255,255,255,0.6);
  color:var(--navy);
  cursor:pointer;
  transition:all .2s ease;
}
.filter-chip:hover{ border-color:var(--water-blue); transform:translateY(-1px); }
.filter-chip.active{
  background:var(--magenta);
  border-color:var(--magenta);
  color:#fff;
  box-shadow:0 6px 16px rgba(230,0,126,0.3);
}

/* ---------- toolbar (result count + sort + clear) ---------- */
.db-toolbar{
  position:relative;
  z-index:2;
  max-width:1000px;
  margin:22px auto 0;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.db-result-count{
  font-weight:700;
  color:var(--navy);
  font-size:0.92rem;
}
.db-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.db-toolbar select{
  font-family:var(--font-body);
  font-size:0.85rem;
  padding:9px 14px;
  border-radius:999px;
  border:1.5px solid rgba(30,42,68,0.15);
  background:#fff;
  color:var(--navy);
  cursor:pointer;
}
.db-clear-btn{
  font-family:var(--font-body);
  font-size:0.8rem;
  font-weight:700;
  color:var(--magenta);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
}

/* ---------- resource grid ---------- */
.db-grid{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:30px auto 0;
  padding:0 20px 40px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width:1024px){ .db-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:680px){ .db-grid{ grid-template-columns:1fr; } }

.resource-card{
  position:relative;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:22px;
  padding:22px 22px 20px;
  box-shadow:0 14px 34px rgba(30,42,68,0.12);
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.resource-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(30,42,68,0.18);
  cursor:pointer;
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.type-badge{
  display:inline-block;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  color:#fff;
}
.badge-magenta{ background:var(--magenta); }
.badge-navy{ background:var(--navy); }
.badge-blue{ background:var(--water-blue); }
.badge-green{ background:#6fae3e; }
.badge-yellow{ background:#b89b2e; }
.badge-pink{ background:#e0509e; }

.bookmark-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:2px;
  display:flex;
  transition:transform .2s ease;
}
.bookmark-btn:hover{ transform:scale(1.15); }

.card-title{
  font-size:1.15rem;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:6px;
}
.card-meta{
  font-size:0.82rem;
  color:#5c6b85;
  margin-bottom:10px;
}
.card-topics{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.topic-tag{
  font-size:0.7rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(59,167,245,0.15);
  color:#0d5f9e;
}
.card-summary{
  font-size:0.88rem;
  color:#3c4a63;
  line-height:1.6;
  margin-bottom:16px;
  flex:1;
}
.card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.btn-read-more{
  font-family:var(--font-body);
  font-size:0.8rem;
  font-weight:700;
  padding:10px 18px;
  border-radius:999px;
  border:none;
  background:var(--magenta);
  color:#fff;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-read-more:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(230,0,126,0.35); }
.btn-visit-source{
  font-family:var(--font-body);
  font-size:0.8rem;
  font-weight:700;
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid var(--water-blue);
  color:var(--water-blue);
  background:transparent;
  transition:all .2s ease;
}
.btn-visit-source:hover{ background:var(--water-blue); color:#fff; }

/* ---------- empty state ---------- */
.db-empty{
  display:none;
  position:relative;
  z-index:2;
  max-width:420px;
  margin:40px auto 60px;
  padding:0 20px;
  text-align:center;
  color:var(--navy);
}
.db-empty.show{ display:block; }
.db-empty svg{ width:120px; margin:0 auto 16px; display:block; }
.db-empty p{ font-weight:600; color:#3c4a63; }

/* ---------- modal ---------- */
.db-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.db-modal.open{ display:flex; }
.db-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,25,45,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.db-modal-panel{
  position:relative;
  z-index:1;
  max-width:560px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:25px;
  padding:36px 32px;
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  animation:db-modal-in .25s ease both;
}
@keyframes db-modal-in{
  from{ opacity:0; transform:translateY(16px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.db-modal-close{
  position:absolute;
  top:16px; right:16px;
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:rgba(30,42,68,0.08);
  color:var(--navy);
  font-size:1.1rem;
  cursor:pointer;
  transition:background .2s ease;
}
.db-modal-close:hover{ background:rgba(230,0,126,0.15); }
.modal-title{ font-size:1.5rem; color:var(--navy); margin:12px 0 6px; }
.modal-meta{ color:#5c6b85; font-size:0.9rem; margin-bottom:12px; }
.modal-topics{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.modal-section-label{
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--magenta);
  margin:16px 0 6px;
}
.modal-text{ color:#3c4a63; line-height:1.7; font-size:0.95rem; }
.modal-visit{ display:inline-block; margin-top:20px; }

/* ---------- footer note ---------- */
.db-footer-note{
  position:relative;
  z-index:2;
  max-width:700px;
  margin:10px auto 40px;
  padding:0 20px;
  text-align:center;
  font-size:0.82rem;
  color:#5c6b85;
  line-height:1.6;
}

@media (max-width:600px){
  .filter-group{ align-items:flex-start; }
  .filter-group-label{ min-width:100%; }
  .db-toolbar{ flex-direction:column; align-items:flex-start; }
}