/* ==========================================================================
   The site's shell: the top bar and the sidebar (templates/layout/base.html).

   Loaded on every page, after base.html's inline styles, so these rules win
   at equal specificity. Everything is scoped to .vh-topbar / .vh-sidebar,
   except the --vh-* colour tokens and the .vh-btn buttons, which the Home
   and search pages reuse. The page area (.content) is untouched: the top bar
   keeps Phoenix's 4rem height and the sidebar its 15.875rem width, so every
   page keeps the offsets it was laid out with.
   ========================================================================== */

:root {
  --vh-cream: #fbf6ef;
  --vh-cream-2: #f6ece0;
  --vh-surface: #ffffff;
  --vh-field: #f4ede4;
  --vh-ink: #2b1d16;
  --vh-body: #4f3f36;
  --vh-muted: #7a6559; /* 5:1 on white and on the cream */
  --vh-line: #efe3d5;
  --vh-brown: #6f3527;
  --vh-orange: #a84d1c; /* text colour: 5:1 on white; the gradient keeps the brighter orange */
  --vh-gold: #c98a2e;
  --vh-grad: linear-gradient(90deg, #6f3527 0%, #c8612d 100%);
  --vh-focus: rgba(200, 97, 45, 0.45);
  --vh-topbar-bg: #fffdfa;
  /* base.html's mobile drawer paints itself with --sidebar-bg. */
  --sidebar-bg: var(--vh-cream);
}

[data-bs-theme="dark"] {
  --vh-cream: #1c1411;
  --vh-cream-2: #261b16;
  --vh-surface: #241a15;
  --vh-field: #2c211b;
  --vh-ink: #f4eae0;
  --vh-body: #d8c9bc;
  --vh-muted: #a99487;
  --vh-line: #3a2c24;
  --vh-brown: #e2b48d;
  --vh-orange: #e48a52;
  --vh-gold: #e0b95d;
  --vh-grad: linear-gradient(90deg, #8a4630 0%, #d0703a 100%);
  --vh-topbar-bg: #1c1411;
  --sidebar-bg: var(--vh-cream);
}

/* ---------------------------------------------------------------- buttons */

.vh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.vh-btn:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 2px; }
.vh-btn--grad {
  background: var(--vh-grad);
  color: #fff !important;
  box-shadow: 0 6px 16px -4px rgba(111, 53, 39, 0.45);
}
.vh-btn--grad:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(111, 53, 39, 0.55); }
.vh-btn--ghost {
  background: transparent;
  border-color: rgba(111, 53, 39, 0.35);
  color: var(--vh-brown) !important;
}
.vh-btn--ghost:hover { background: rgba(111, 53, 39, 0.07); }
.vh-btn--sm { padding: 0.55rem 1rem; font-size: 0.8rem; }

/* ---------------------------------------------------------------- top bar */

.navbar-top.vh-topbar {
  height: var(--phoenix-navbar-top-height);
  padding: 0 1rem;
  background: var(--vh-topbar-bg);
  border-bottom: 1px solid var(--vh-line);
  box-shadow: 0 1px 2px rgba(43, 29, 22, 0.03);
  font-family: inherit;
}
.vh-topbar .navbar-collapse { align-items: center; gap: 0.75rem; min-width: 0; }
/* The brand gives way first when the bar runs out of room: the icons on the
   right must never push the page sideways on a phone. */
.vh-topbar .navbar-logo { display: flex; align-items: center; gap: 0.25rem; min-width: 0; flex: 0 1 auto; }

.vh-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  min-width: 0;
  color: var(--vh-ink);
}
.vh-brand:hover { color: var(--vh-ink); }
.vh-brand__logo {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--vh-line);
}
.vh-brand__text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.15; }
.vh-brand__name {
  overflow: hidden;
  font-size: 1.04rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vh-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vh-brand__tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--vh-muted);
  white-space: nowrap;
}

.vh-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 30rem;
  min-width: 12rem;
  margin: 0 auto 0 0.75rem;
}
.vh-search__icon {
  position: absolute;
  left: 1rem;
  display: inline-flex;
  color: var(--vh-muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.vh-search__input {
  width: 100%;
  height: 2.6rem;
  padding: 0 1rem 0 2.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--vh-field);
  color: var(--vh-ink);
  font-size: 0.86rem;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.vh-search__input::placeholder { color: var(--vh-muted); opacity: 1; }
.vh-search__input:focus {
  outline: none;
  background: var(--vh-surface);
  border-color: rgba(200, 97, 45, 0.5);
  box-shadow: 0 0 0 4px rgba(200, 97, 45, 0.12);
}

.vh-topbar .navbar-nav-icons { gap: 0.15rem; flex: none; }
.vh-topbar .navbar-nav-icons > .nav-item { position: relative; }
/* base.html gives every .nav-link a sliding shine and a nudge on hover;
   neither belongs on round icon buttons. */
.vh-topbar .navbar-nav-icons .nav-link {
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--vh-ink);
}
.vh-topbar .navbar-nav-icons .nav-link::before { content: none; }
.vh-topbar .navbar-nav-icons .nav-link:hover {
  transform: none;
  box-shadow: none;
  background: rgba(111, 53, 39, 0.07);
  color: var(--vh-brown);
}
.vh-topbar .navbar-nav-icons .nav-link:focus-visible { outline: 3px solid var(--vh-focus); outline-offset: 1px; }

.vh-iconbtn,
.vh-lang {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 12px;
  font-size: 1.15rem;
}
.vh-lang { gap: 0.4rem; padding: 0 0.55rem !important; font-size: 0.9rem; }
.vh-lang::after { display: none; } /* Bootstrap's dropdown caret: we draw our own */
.vh-caret { font-size: 0.62rem; color: var(--vh-muted); }

.vh-flag { width: 24px; height: 16px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px rgba(43, 29, 22, 0.12); }
.vh-flag--code {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 800; background: var(--vh-field);
}
.vh-topbar .language-switcher { margin-left: 0; }
.vh-topbar .language-switcher .dropdown-menu { min-width: 11rem; padding: 0.35rem; }
.vh-topbar .language-switcher .dropdown-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.75rem; border-radius: 10px; font-weight: 600;
}
.vh-topbar .language-switcher .dropdown-item:hover { transform: none; }
.vh-topbar .language-switcher .dropdown-item.active {
  background: rgba(111, 53, 39, 0.09);
  color: var(--vh-brown);
}

.vh-bell { width: 1.25rem; height: 1.25rem; display: inline-flex !important; align-items: center; justify-content: center; }
.vh-bell #notificationCounter { font-size: 0.6rem; padding: 0.28em 0.5em; border: 2px solid var(--vh-topbar-bg); }

/* Phoenix shows one of the two labels (sun or moon) by the checkbox state;
   only their size and colour change here. */
.vh-topbar .theme-control-toggle .theme-control-toggle-label {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background-color: transparent;
  color: var(--vh-ink);
}
.vh-topbar .theme-control-toggle .theme-control-toggle-label:hover {
  background-color: rgba(111, 53, 39, 0.07);
  color: var(--vh-brown);
  transform: none;
}

.vh-user {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0.35rem 0.2rem 0.2rem !important;
  border-radius: 999px !important;
}
.vh-user__avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.vh-user__avatar--initials,
.vh-user__avatar--guest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3b2a24;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.vh-user__avatar--guest { background: var(--vh-field); color: var(--vh-muted); font-size: 0.95rem; }
/* The account menu's big avatar fills Phoenix's 3rem .avatar-xl box. */
.vh-user__avatar--xl { width: 100%; height: 100%; font-size: 1.1rem; box-shadow: 0 0 0 2px var(--vh-gold); }
.vh-user__name {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--vh-ink);
}
.vh-auth { gap: 0.5rem; align-items: center; margin-right: 0.35rem; }

/* The phone search icon replaces the box below 768px. */
.navbar-top .navbar-nav-icons .nav-item.vh-search-link { display: none; }

@media (max-width: 1199.98px) {
  .vh-user__name { display: none; }
}
@media (max-width: 991.98px) {
  .navbar-top.vh-topbar { padding: 0 0.75rem; }
  .vh-brand__logo { width: 38px; height: 38px; }
}
@media (max-width: 767.98px) {
  .vh-search { display: none; }
  .navbar-top .navbar-nav-icons .nav-item.vh-search-link { display: flex; }
  .vh-brand__tag { display: none; }
}
@media (max-width: 575.98px) {
  .vh-brand__name { font-size: 0.9rem; }
  .vh-topbar .navbar-nav-icons { gap: 0; }
  .vh-topbar .vh-caret { display: none; }
  /* 44px targets; at 320px the bar still holds menu, crest, search,
     language, bell and account. */
  .vh-iconbtn, .vh-lang { min-width: 2.75rem; height: 2.75rem; }
  .vh-lang { padding: 0 0.6rem !important; }
  .vh-topbar .theme-control-toggle .theme-control-toggle-label { width: 2.75rem; height: 2.75rem; }
}
@media (max-width: 479.98px) {
  .vh-topbar .theme-control-toggle { display: none; }
}
@media (max-width: 419.98px) {
  .vh-brand__text { display: none; }
}

/* ---------------------------------------------------------------- sidebar */

.navbar-vertical.vh-sidebar {
  background: var(--vh-cream);
  border-right: 1px solid var(--vh-line);
}
@media (min-width: 992px) {
  .navbar-vertical.vh-sidebar {
    top: var(--phoenix-navbar-top-height);
    margin: 0;
    box-shadow: none;
  }
  /* Phoenix keeps 4rem free at the bottom for a footer this site does not
     have; the closing card sits there instead. */
  html:not(.navbar-vertical-collapsed) .navbar-vertical.vh-sidebar .navbar-vertical-content {
    height: calc(100vh - var(--phoenix-navbar-top-height));
  }
}
.navbar-vertical.vh-sidebar .navbar-vertical-content {
  padding: 0.85rem 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 53, 39, 0.25) transparent;
}
.vh-sidebar__inner { display: flex; flex-direction: column; min-height: 100%; }

.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav { font-size: 0.9rem; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link {
  display: flex;
  margin: 2px 0.85rem;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-radius: 12px;
  color: var(--vh-ink);
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  transform: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link::before { content: none; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link:hover {
  background: rgba(111, 53, 39, 0.07);
  color: var(--vh-brown);
  transform: none;
  box-shadow: none;
}
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--vh-focus);
  outline-offset: 1px;
}
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link > .d-flex { width: 100%; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .nav-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  min-width: 1.4rem !important;
  margin-right: 0.8rem;
  font-size: 1.05rem;
  color: var(--vh-brown);
}
.vh-sidebar .nav-link:hover .nav-link-icon { transform: none; filter: none; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .nav-link-text { padding-top: 0; }

/* The page you are on: the design's brown-to-orange pill. */
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link.active-nav-link {
  background: var(--vh-grad);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(111, 53, 39, 0.7);
}
.vh-sidebar .nav-link.active-nav-link .nav-link-icon,
.vh-sidebar .nav-link.active-nav-link .dropdown-indicator-icon-wrapper { color: #fff; }
/* A menu whose page is open inside it: a quieter tint, the sub-link says where. */
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link.dropdown-indicator.active-nav-link {
  background: rgba(111, 53, 39, 0.08);
  color: var(--vh-brown);
  box-shadow: none;
}
.vh-sidebar .nav-link.dropdown-indicator.active-nav-link .nav-link-icon,
.vh-sidebar .nav-link.dropdown-indicator.active-nav-link .dropdown-indicator-icon-wrapper { color: var(--vh-brown); }

.navbar-vertical.vh-sidebar .dropdown-indicator .dropdown-indicator-icon-wrapper {
  margin-left: auto;
  padding-left: 0.4rem;
  color: var(--vh-muted);
  font-size: 0.7rem;
}

/* Sub-menus: a thin line down the side instead of a box, so a closed menu on
   a phone (base.html shrinks it to max-height 0) leaves nothing behind. */
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .parent { margin: 0; padding: 0; background: none; }
.vh-sidebar .parent > .nav-item {
  margin-left: 2.15rem;
  margin-right: 0.85rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--vh-line);
}
.vh-sidebar .parent > .nav-item:first-of-type { padding-top: 0.2rem; }
.vh-sidebar .parent > .nav-item:last-child { padding-bottom: 0.35rem; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .parent .nav-link {
  margin: 1px 0;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  color: var(--vh-body);
  font-size: 0.84rem;
  font-weight: 600;
}
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .parent .nav-link .nav-link-text { padding-left: 0; }
.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .parent .nav-link.active-sub-link {
  background: rgba(111, 53, 39, 0.08);
  color: var(--vh-brown);
  font-weight: 700;
}

.navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-vertical-label {
  margin: 1.25rem 0 0.35rem;
  padding: 0 1.7rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vh-muted);
}
.vh-sidebar .navbar-vertical-line { display: none !important; }
.vh-sidebar .vh-nav-divider { height: 1px; margin: 0.6rem 1.7rem; background: var(--vh-line); }

/* The closing card: "A Community Growing in Faith, Service and Talent" over
   the parish's Adoration Chapel, whose photo fades into the card under the
   words. */
.vh-sidebar-card {
  position: relative;
  display: block;
  margin: auto 0.85rem 0.25rem;
  min-height: 15rem;
  padding: 1rem 1rem 0;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff4e6 0%, #fde6cf 55%, #f6cfa9 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 97, 45, 0.12);
  color: var(--vh-brown);
  isolation: isolate;
}
.vh-sidebar-card__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 66%;
  object-fit: cover;
  object-position: center 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 26%, #000 58%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 26%, #000 58%);
  transition: transform 0.6s ease;
}
.vh-sidebar-card:hover .vh-sidebar-card__photo { transform: scale(1.04); }
.vh-sidebar__inner > .navbar-nav { margin-bottom: 1.25rem; }
.vh-sidebar-card:hover { color: var(--vh-brown); }
.vh-sidebar-card__text {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 11rem;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
}
.vh-sidebar-card__go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: var(--vh-grad);
  color: #fff;
  font-size: 0.8rem;
  box-shadow: 0 6px 14px -6px rgba(111, 53, 39, 0.7);
  transition: transform 0.15s ease;
}
.vh-sidebar-card:hover .vh-sidebar-card__go { transform: translateX(3px); }
[data-bs-theme="dark"] .vh-sidebar-card {
  background: linear-gradient(160deg, #3a2a21 0%, #47301f 60%, #5a3a25 100%);
  color: #f6dcc4;
}

/* --------------------------------------------------- touch screens */

@media (max-width: 991.98px) {
  .vh-topbar .navbar-toggler { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .vh-user { min-height: 2.75rem; }
  /* Menu rows and sub-menu rows at least 44px tall. */
  .navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .nav-link {
    min-height: 2.75rem;
    align-items: center;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .navbar-vertical.vh-sidebar .navbar-vertical-content .navbar-nav .parent .nav-link {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    font-size: 0.9rem;
  }
  .vh-topbar .dropdown-menu .dropdown-item,
  .vh-topbar .dropdown-menu .nav-link { min-height: 2.75rem; display: flex; align-items: center; }
}

/* ------------------------------------------------- no sideways scrolling */

@media (max-width: 991.98px) {
  /* Anything wider than a phone (a long word, a wide table, an image) used
     to widen the whole page: the browser zoomed out and the fixed top bar
     stretched with it, pushing search, the bell and the account menu off
     the screen. The page area now clips sideways overflow instead; clip,
     unlike hidden, leaves sticky elements and vertical overflow alone. */
  main#top { overflow-x: clip; }
  /* Long addresses (emails, links, phone numbers) may break anywhere. */
  main#top a[href^="mailto:"], main#top a[href^="tel:"], main#top a[href^="http"] { overflow-wrap: anywhere; }
  /* Wide tables get their own scroller (wrapped by base.html's script). */
  .vh-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vh-table-scroll > table { margin-bottom: 0; }
}

@media (max-width: 991.98px) {
  /* The phone drawer's close button. base.html paints it with a plain white
     background, which also wiped out the theme's X; put the X back. */
  .navbar-vertical.vh-sidebar .btn-close {
    background: transparent var(--phoenix-btn-close-bg) center / 1em auto no-repeat;
    opacity: 0.6;
  }
  [data-bs-theme="dark"] .navbar-vertical.vh-sidebar .btn-close { filter: var(--phoenix-btn-close-white-filter); }
}

@media (prefers-reduced-motion: reduce) {
  .vh-sidebar-card__photo { transition: none; }
}