/* ---------------------------------------------------------------------------
   G522 unified navigation and footer.

   One link set, one order, on every page, so a visitor never has to relearn
   where anything is. Class names are prefixed so they cannot collide with the
   styles a page already carries.

   Three skins:
     .gnav            light pages (Mission, Books, Churches, Give, legal)
     .gnav.over       transparent over the homepage hero, solidifies on scroll
     .gnav.dark       the night pages (Emmaus road, Lumina, lmnx, My Field)

   On narrow screens the links scroll sideways instead of disappearing. The old
   behaviour hid every link on a phone except Join, which left mobile visitors
   with no way through the site at all.
--------------------------------------------------------------------------- */

.gnav, .gfoot {
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.gnav *, .gfoot * { box-sizing: border-box; }

/* ------------------------------- NAV ------------------------------------ */

.gnav {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: rgba(247, 243, 234, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid #E0D7C4;
  color: #211E18;
}

.gnav-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit; flex: 0 0 auto;
}
.gnav-brand img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.gnav-brand span {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: 21px; letter-spacing: 0.5px;
}

.gnav-links {
  display: flex; align-items: center; gap: 20px;
  margin-left: auto;
  font-size: 14px; font-weight: 500;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  max-width: 100%;
}
.gnav-links::-webkit-scrollbar { display: none; }
.gnav-links a {
  color: inherit; text-decoration: none; white-space: nowrap;
  opacity: 0.78; transition: opacity 0.2s ease, color 0.2s ease;
  padding: 3px 0;
}
.gnav-links a:hover { opacity: 1; }
.gnav-links a.on { opacity: 1; font-weight: 600; border-bottom: 2px solid #E8A41E; }

.gnav-cta {
  border: 1px solid currentColor; border-radius: 999px;
  padding: 7px 15px; font-weight: 600; opacity: 1 !important;
  flex: 0 0 auto;
}
.gnav-cta:hover { background: #1F5C3A; border-color: #1F5C3A; color: #F7F3EA; }

/* Homepage: transparent over the hero, solid once you scroll. */
.gnav.over {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.gnav.over.solid {
  background: rgba(247, 243, 234, 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: #E0D7C4;
}

/* The night pages. */
.gnav.dark {
  background: rgba(14, 9, 28, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #F1E9DA;
}
.gnav.dark .gnav-cta:hover { background: #E8A41E; border-color: #E8A41E; color: #2A1B04; }
.gnav.dark .gnav-links a.on { border-bottom-color: #E8A41E; }

/* Sits under a page's own bar rather than competing with it for the top. */
.gnav.sub { position: static; }

@media (max-width: 760px) {
  .gnav { gap: 10px; padding: 9px 13px; }
  .gnav-brand span { font-size: 19px; }
  .gnav-links { gap: 16px; font-size: 13.5px; }
}

/* ------------------------------ FOOTER ---------------------------------- */

.gfoot {
  background: #16221C; color: #C9BFAD;
  padding: 46px 22px 30px; margin-top: 0;
  font-size: 14.5px; line-height: 1.6;
}
.gfoot-in { max-width: 1080px; margin: 0 auto; }

.gfoot-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.gfoot-brand img { width: 38px; height: 38px; border-radius: 10px; display: block; }
.gfoot-brand b {
  display: block; color: #F7F3EA;
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: 22px; letter-spacing: 0.5px;
}
.gfoot-brand span { font-size: 13.5px; opacity: 0.82; }

.gfoot-links {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.gfoot-links a {
  color: #E6DDC9; text-decoration: none; font-size: 14.5px;
  opacity: 0.85; transition: color 0.2s ease, opacity 0.2s ease;
}
.gfoot-links a:hover { color: #E8A41E; opacity: 1; }

.gfoot-strip { display: flex; height: 4px; border-radius: 3px; overflow: hidden; margin: 24px 0 18px; }
.gfoot-strip span { flex: 1; }

.gfoot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 13px; opacity: 0.8;
}
.gfoot-legal a { color: #C9BFAD; text-decoration: none; }
.gfoot-legal a:hover { color: #E8A41E; }

/* The night pages keep the same shape in their own colour. */
.gfoot.dark { background: #0B0716; color: #A99CC4; }
.gfoot.dark .gfoot-brand b { color: #F5EEDF; }
.gfoot.dark .gfoot-links { border-bottom-color: rgba(255, 255, 255, 0.1); }
.gfoot.dark .gfoot-links a { color: #D9CFE8; }
.gfoot.dark .gfoot-legal a { color: #A99CC4; }

@media (max-width: 760px) {
  .gfoot { padding: 34px 16px 26px; }
  .gfoot-links { gap: 11px 20px; }
}

/* The sub nav sits under a page's own bar, which already shows the mark, so it
   carries links only and starts them at the left edge. */
.gnav.sub { position: static; }
.gnav.sub .gnav-links { margin-left: 0; }