/* ============================================================
   Willow Ave — shared slim navbar for pages still on the Mobirise
   theme. Extracted from willow.css (the clean-theme stylesheet) so
   those pages get the SAME header without inheriting the rest of
   the new theme. If you change the navbar there, change it here.
   ============================================================ */

:root {
  --primary:   #437d9f;
  --white:     #ffffff;
  --black:     #000000;
  --near-white:#f7f7f7;
  --font-display: 'Noto Sans Thai', sans-serif;
  --font-heading: 'Archivo', sans-serif;
  --font-body:    'Poppins', sans-serif;
}

.site-nav {
  background: rgba(255,255,255,0.9) !important;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1rem 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-nav .navbar-brand img {
  height: 48px;
  width: auto;
  border-radius: 0 !important;
}
.site-nav .nav-link {
  color: var(--primary) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.9rem !important;
  transition: box-shadow 0.5s ease-out, color 0.5s ease-out;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
  box-shadow: inset 200px 0 0 0 var(--black);
  color: #f0f0f0 !important;
}
.site-nav .dropdown-menu {
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  padding: 18px 34px 22px;
  min-width: 250px;
}
@media (min-width: 992px) {
  .site-nav .dropdown-menu {
    top: auto !important;
    left: -40px !important;
  }
}
.site-nav .dropdown-item {
  color: var(--primary) !important;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}
.site-nav .dropdown-item:hover {
  background: transparent;
  color: var(--black) !important;
}
.site-nav .navbar-toggler { border-color: rgba(67,125,159,0.4); }

/* Centered menu items (site-wide preference). */
@media (min-width: 992px) {
  .site-nav .navbar-nav {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Offcanvas info panel — black bg, 35% wide on desktop */
.offcanvas {
  background: var(--black);
  color: rgba(255,255,255,0.88);
}
@media (min-width: 992px) {
  .offcanvas { width: 35% !important; }
}
.offcanvas .offcanvas-header { padding-top: 3rem; }
.offcanvas .btn-close { filter: invert(1) opacity(0.7); }
.offcanvas h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.offcanvas p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
}
.offcanvas .offcanvas-label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
}

/* Prayer modal + the buttons the nav/offcanvas/modal use */
.modal-content { border-radius: 0; border: none; }
.modal-header { border-bottom: 1px solid #e2e8f0; }
.modal-title { font-family: var(--font-heading); }

.site-nav .btn, .offcanvas .btn, .modal .btn {
  font-family: var(--font-body);
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-width: 2px;
  border-radius: 0;
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.modal .btn-primary {
  background-image: linear-gradient(to right, #fff 50%, var(--primary) 50%);
  border-color: var(--primary);
  color: #fff;
}
.modal .btn-primary:hover, .modal .btn-primary:focus-visible {
  background-position: left center;
  border-color: var(--primary);
  color: var(--primary);
}
.offcanvas .btn-white {
  background-image: linear-gradient(to right, var(--black) 50%, #fff 50%);
  border-color: #fff;
  color: var(--black);
}
.offcanvas .btn-white:hover, .offcanvas .btn-white:focus-visible {
  background-position: left center;
  border-color: var(--black);
  color: #fff;
}

/* ---- Shared footer (canonical markup lives in index.html) ---- */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,0.75);
  padding: 3.5rem 0 1.5rem;
}
.site-footer h3 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.site-footer p, .site-footer li { font-size: 0.9rem; line-height: 1.7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: rgba(255,255,255,0.65); }
.site-footer a:hover { color: #fff; }
.footer-copy { font-size: 0.82rem; color: rgba(255,255,255,0.4); }
.footer-social { display: flex; gap: 1rem; align-items: center; }
.footer-icon-link {
  color: rgba(255,255,255,0.75);
  transition: color 0.15s;
  display: inline-flex;
}
.footer-icon-link:hover { color: #fff; }