/* ============================================================================
   App-page brand theme — blue E-Tipitaka top bar + cyan accents.
   Matches the SP8 Tailwind landing palette. Loaded by base_file.html, so it
   applies to every app page (search / read / compare / reference). The landing
   (standalone index.html) does NOT use base_file.html and is unaffected.

   Chrome-only: restyles the navbar, its controls and the page background. No
   layout change to the dense read/compare bodies — scripture stays dark-on-light
   for legibility.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap');

:root {
  --et-b900:#0f3a82; --et-b700:#15499a; --et-b600:#1e63b3;
  --et-cyanb:#37e6f7; --et-cyand:#1565c0; --et-ink:#0b2e6b;
}

body { background:#f4f8ff; }

/* ---- brand top bar -------------------------------------------------------- */
.navbar.bg-body-tertiary {
  background:linear-gradient(135deg, var(--et-b700), var(--et-b600)) !important;
  box-shadow:0 4px 18px rgba(4,22,58,.30);
}
.navbar .navbar-brand.logo {
  color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:.5rem;
}
.navbar .navbar-brand.logo:hover { color:#fff; }
/* E-Tipitaka split-circle logo (from the landing) ahead of the wordmark */
.navbar .navbar-brand.logo::before {
  content:''; width:30px; height:30px; flex:0 0 auto;
  background:url('../images/logo-etipitaka.svg') no-repeat center/contain;
}

/* breathing room between the brand bar and the page content */
.navbar.bg-body-tertiary + .container { margin-top: 1rem; }

/* ---- buttons: ghost-white outline; primary CTA = cyan -------------------- */
.navbar .btn {
  border-radius:999px; font-family:'Montserrat',sans-serif; font-weight:600;
}
.navbar .btn-outline-secondary,
.navbar .btn-outline-primary {
  color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.08);
}
.navbar .btn-outline-secondary:hover,
.navbar .btn-outline-primary:hover { color:#fff; background:rgba(255,255,255,.22); }
.navbar .btn-outline-primary {
  background:linear-gradient(135deg, var(--et-cyanb), var(--et-cyand)); border-color:transparent;
}
.navbar .btn-outline-primary:hover { background:linear-gradient(135deg, var(--et-cyanb), var(--et-cyand)); filter:brightness(1.05); }

/* dropdown toggles inside the bar follow the ghost-white treatment */
.navbar .dropdown-toggle.btn-outline-secondary::after { border-top-color:#fff; }

/* ---- inputs / selects: light pills over the blue bar ---------------------- */
.navbar .form-control,
.navbar .form-select {
  border-radius:9px; background:rgba(255,255,255,.96); border-color:transparent; color:var(--et-ink);
}
.navbar .form-control::placeholder { color:#6b7a93; }

/* ---- hamburger toggler ---------------------------------------------------- */
.navbar-toggler { color:#fff; border-color:rgba(255,255,255,.4); }
.navbar-toggler .fa { color:#fff; }

/* ---- search pagination ---------------------------------------------------- */
.pagination > li > a { color:var(--et-b600); border-color:#d7e2f4; }
.pagination > li.active > a { background:var(--et-b600); border-color:var(--et-b600); color:#fff; border-radius:8px; }