/* baca-logo.css — New logo styles for Baca (v4)
 *
 * CHANGES FROM v3:
 * - Logo: book leaves = PURE WHITE, calligraphy = BRIGHT EMERALD GREEN (no blue)
 * - Logo background: TRANSPARENT (uses the app's bg color)
 * - "Baca" wordmark: white text (clean, readable)
 * - Hamburger button: hidden in standalone mode via CSS (not JS) — more reliable
 */

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@400;500;600;700&display=swap');

/* ============================================
   NAVBAR LOGO IMAGE
   ============================================ */
.logo .baca-logo-icon,
.topbar-logo .baca-logo-icon,
.ask-navbar .baca-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  /* Subtle emerald glow — enhances the green calligraphy on dark bg */
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.3));
  transition: filter 0.3s ease, transform 0.2s ease;
}

.logo:hover .baca-logo-icon,
.topbar-logo:hover .baca-logo-icon {
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.45));
  transform: scale(1.05);
}

/* === "Baca" wordmark — clean white === */
.logo .logo-text,
.footer-logo-text,
.topbar-logo-text,
.ask-navbar .logo-text,
.baca-nav-drawer-logo-text {
  font-family: 'Reem Kufi', 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.logo .logo-text { font-size: 1.6rem !important; }
.footer-logo-text { font-size: 1.6rem !important; }
.topbar-logo-text { font-size: 1.5rem !important; }
.ask-navbar .logo-text { font-size: inherit !important; }
.baca-nav-drawer-logo-text { font-size: 1.35rem !important; }

/* Light mode */
body.light-mode .logo .baca-logo-icon,
body.light-mode .topbar-logo .baca-logo-icon,
body.light-mode .ask-navbar .baca-logo-icon {
  filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.15));
}

body.light-mode .logo .logo-text,
body.light-mode .footer-logo-text,
body.light-mode .topbar-logo-text,
body.light-mode .ask-navbar .logo-text,
body.light-mode .baca-nav-drawer-logo-text {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.1);
}

[data-mushaf-theme="light"] .topbar-logo .baca-logo-icon {
  filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.15));
}
[data-mushaf-theme="light"] .topbar-logo-text {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* Drawer logo image */
.baca-nav-drawer-logo img.baca-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.3));
}

/* ============================================
   HIDE HAMBURGER IN STANDALONE (INSTALLED APP) MODE
   ============================================
   This is in CSS (not JS) so it's applied IMMEDIATELY when the page loads
   — before any JavaScript runs. This prevents the hamburger button from
   flashing on screen in the installed app.
   The bottom tab bar replaces the hamburger in standalone mode.
*/
@media (display-mode: standalone) {
  .baca-nav-toggle {
    display: none !important;
  }
}

/* iOS Safari standalone mode */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .baca-nav-toggle {
    display: none !important;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
  .logo .baca-logo-icon, .topbar-logo .baca-logo-icon { width: 32px; height: 32px; }
  .logo .logo-text { font-size: 1.4rem !important; }
  .footer-logo .baca-logo-icon { width: 36px; height: 36px; }
  .footer-logo-text { font-size: 1.4rem !important; }
  .topbar-logo-text { font-size: 1.3rem !important; }
}