:root {
  --green-dark: #1a4a2e;
  --green-mid: #2d7a4f;
  --green-light: #4aad6f;
  --gold: #c9a227;
  --gold-light: #f0d060;
  --cream: #faf8f0;
  --white: #ffffff;
  --nav-h: 70px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
  background: var(--cream);
  color: var(--green-dark);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

section {
  scroll-margin-top: var(--nav-h);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(26, 74, 46, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--gold);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  gap: 1rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-width: 0;
}

.nav-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.45);
}

.nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}

.nav-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 0.95rem;
  line-height: 1.05;
  white-space: nowrap;
}

.nav-title span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.58rem;
  color: var(--gold-light);
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 0.1rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 0.48rem 0.8rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.25s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-light);
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.12);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 5px;
  padding: 7px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: all 0.35s ease;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 28, 18, 0.98);
  z-index: 999;
  padding: 1.5rem;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(201, 162, 39, 0.2);
}

.mobile-menu.open {
  display: flex;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-header {
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  margin-bottom: 0.5rem;
}

.mobile-menu a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  transition:
    color 0.2s,
    padding-left 0.2s;
}

.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu a:hover,
.mobile-menu a.active {
  color: var(--gold-light);
  padding-left: 0.8rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-tag {
  display: inline-block;
  color: var(--gold);
  font-size: 0.63rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  color: var(--green-dark);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.dark-title {
  color: var(--white);
}

.section-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.section-line::before,
.section-line::after {
  content: "";
  width: 50px;
  height: 1px;
  background: var(--gold);
}

.section-line-dot {
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: var(--green-dark);
  padding: 0.85rem 2.2rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  transition: all 0.3s;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.4);
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--white);
  padding: 0.85rem 2.2rem;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.form-group label {
  font-size: 0.67rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 162, 39, 0.3);
  color: var(--white);
  padding: 0.75rem 1rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
}

.form-group select option {
  background: var(--green-dark);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

#home {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg,
      rgba(10, 30, 18, 0.82) 0%,
      rgba(13, 42, 26, 0.75) 40%,
      rgba(22, 42, 14, 0.78) 70%,
      rgba(26, 58, 16, 0.8) 100%),
    url(assets/churchimage.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.hero-pattern {
  display: none;
}

.hero-arch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 90vw);
  height: 500px;
  border: 1px solid rgba(201, 162, 39, 0.13);
  border-radius: 0 0 300px 300px;
  pointer-events: none;
}

.hero-arch::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 0;
  border: 1px solid rgba(201, 162, 39, 0.07);
  border-radius: 0 0 280px 280px;
}

.hero-cross {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  max-width: 820px;
  width: 100%;
  animation: fadeUp 1.2s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 0.35rem 1.5rem;
  margin-bottom: 1.5rem;
  animation: fadeUp 1s 0.2s both;
}

.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.1rem, 6vw, 5rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0.5rem;
  animation: fadeUp 1s 0.4s both;
}

.hero-subtitle {
  font-family: "Cormorant Garamond", serif;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  letter-spacing: 2px;
  animation: fadeUp 1s 0.5s both;
}

.hero-location {
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  animation: fadeUp 1s 0.6s both;
}

.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.2rem auto;
  animation: fadeUp 1s 0.7s both;
}

.hero-divider::before {
  content: "";
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

.hero-divider::after {
  content: "";
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold));
}

.hero-verse {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto 2.5rem;
  animation: fadeUp 1s 0.8s both;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 1s 1s both;
}

.hero-edit-btn {
  margin: 0 auto 1.4rem;
  display: inline-flex;
}

.info-strip {
  background: var(--gold);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 10px;
}

#mass-schedule {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--green-dark) 0%, #0f3020 100%);
  position: relative;
  overflow: hidden;
}

#mass-schedule::before {
  content: "✝";
  position: absolute;
  font-size: 55vw;
  color: rgba(255, 255, 255, 0.02);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.schedule-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-top: 3px solid var(--gold);
  padding: 1.75rem 1.5rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.schedule-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(201, 162, 39, 0.05),
      transparent);
  transition: left 0.5s;
}

.schedule-card:hover::before {
  left: 100%;
}

.schedule-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.schedule-day {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.schedule-time {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
}

.schedule-time:last-child {
  border-bottom: none;
}

.time-icon {
  color: var(--gold);
  font-size: 0.75rem;
}

.schedule-lang {
  margin-left: auto;
  font-size: 0.6rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.special-note {
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 2rem auto 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  font-style: italic;
  max-width: 1100px;
}

#sacraments {
  padding: 5rem 1.5rem;
  background: var(--cream);
}

.sacrament-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto 3.5rem;
}

.sacrament-card {
  background: var(--white);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 74, 46, 0.04);
  border: 1px solid rgba(26, 74, 46, 0.05);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.sacrament-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--green-mid));
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.sacrament-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(26, 74, 46, 0.12);
  border-color: rgba(201, 162, 39, 0.2);
}

.sacrament-card:hover::before {
  transform: scaleX(1);
}

.sacrament-name {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.sacrament-desc {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.sacrament-reqs {
  font-size: 0.72rem;
  color: var(--green-mid);
  font-weight: 600;
}

.schedule-form-wrapper {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--green-dark), #0f3020);
  border-top: 4px solid var(--gold);
  padding: 2.5rem 2rem;
}

.schedule-form-wrapper h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.65rem;
  margin-bottom: 0.4rem;
}

.schedule-form-wrapper>p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  margin-bottom: 1.8rem;
}

#prayers {
  padding: 5rem 1.5rem;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

#prayers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(10, 30, 18, 0.45) 0%,
      rgba(10, 30, 18, 0.68) 55%,
      rgba(10, 30, 18, 0.82) 100%),
    url("assets/jesus.jpg");
  background-position: center 10%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  background-attachment: fixed;
}

.prayers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.prayer-card {
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--gold);
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
  position: relative;
  backdrop-filter: blur(6px);
}

.prayer-card::before {
  content: none;
  position: absolute;
  top: -0.4rem;
  left: 1rem;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.4;
  font-family: serif;
}

.prayer-card:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.prayer-title {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  color: var(--gold-light);
  margin-bottom: 0.65rem;
}

.prayer-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.95;
  font-style: normal;
  font-weight: 400;
}

.prayer-source {
  display: block;
  margin-top: 0.9rem;
  font-size: 0.67rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
  font-family: "Montserrat", sans-serif;
}

.prayer-intentions {
  max-width: 1000px;
  margin: 3rem auto 0;
  background: rgba(10, 30, 18, 0.75);
  backdrop-filter: blur(8px);
  padding: 2.5rem 2rem;
  border-left: 4px solid var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-left: 4px solid var(--gold);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

.prayer-intentions h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
  grid-column: 1/-1;
}

.prayer-intentions>p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  margin-bottom: 0.8rem;
  grid-column: 1/-1;
}

.pi-full {
  grid-column: 1/-1;
}

#donations {
  padding: 5rem 1.5rem;
  background: var(--green-dark);
  position: relative;
  overflow: hidden;
}

#donations::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
      transparent,
      transparent 30px,
      rgba(201, 162, 39, 0.03) 30px,
      rgba(201, 162, 39, 0.03) 31px);
}

.donation-intro {
  max-width: 600px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.87rem;
  line-height: 1.8;
  position: relative;
}

.gcash-section {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding: 2.2rem 2rem;
  border: 1px dashed rgba(201, 162, 39, 0.3);
  position: relative;
}

.gcash-section h4 {
  font-family: "Playfair Display", serif;
  color: var(--gold-light);
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.gcash-section>p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}

.qr-static-wrap {
  margin: 1.4rem auto 0.7rem;
}

.gcash-number {
  font-size: 1.6rem;
  color: var(--gold);
  font-family: "Playfair Display", serif;
  letter-spacing: 4px;
  display: block;
  margin: 0.9rem 0;
}

#about {
  padding: 5rem 1.5rem;
  background: var(--cream);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

.about-text .section-header {
  text-align: left;
}

.about-body {
  color: #555;
  font-size: 0.87rem;
  line-height: 1.9;
  margin-bottom: 1.3rem;
}

.contact-box {
  background: linear-gradient(135deg, var(--green-dark), #0f3020);
  border-top: 4px solid var(--gold);
  padding: 2.2rem 1.8rem;
}

.contact-box h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.35rem;
  margin-bottom: 1.7rem;
}

.contact-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-label {
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.22rem;
}

.contact-value {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  line-height: 1.55;
}

.contact-value a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s;
}

.contact-value a:hover {
  color: var(--gold-light);
}

.pastor-section {
  max-width: 1100px;
  margin: 3rem auto 0;
  background: var(--white);
  border-left: 4px solid var(--gold);
  padding: 2rem 2.2rem;
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.pastor-avatar-img {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 4px 16px rgba(201, 162, 39, 0.25);
}

.pastor-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.pastor-title-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--green-dark);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.pastor-info h4 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.pastor-info p {
  color: #777;
  font-size: 0.81rem;
  line-height: 1.65;
}

footer {
  background: #0a1f12;
  color: rgba(255, 255, 255, 0.5);
  padding: 3rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(201, 162, 39, 0.2);
}

.footer-logo {
  font-family: "Playfair Display", serif;
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

footer p {
  font-size: 0.77rem;
  line-height: 1.8;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.8rem;
  margin: 1.4rem 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.67rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--gold);
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 1rem;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--green-dark);
  border-top: 4px solid var(--gold);
  padding: 2.5rem 2rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: fadeUp 0.4s ease;
}

.modal h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.modal p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.84rem;
  margin-bottom: 1.5rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.2rem;
}

.modal-close:hover {
  color: var(--gold);
}

.inq-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.inq-overlay.active {
  display: flex;
}

.inq-modal {
  background: linear-gradient(160deg, #0e2617 0%, #1a4a2e 100%);
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 640px;
  position: relative;
  animation: fadeUp 0.35s ease;
  margin: auto;
  flex-shrink: 0;
}

.inq-header {
  background: rgba(0, 0, 0, 0.25);
  padding: 1.8rem 2rem 1.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.inq-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.inq-tag {
  font-size: 0.58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.inq-modal-title {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.45rem;
  line-height: 1.2;
}

.inq-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.05rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  cursor: pointer;
}

.inq-close:hover {
  background: rgba(201, 162, 39, 0.2);
  color: var(--gold-light);
  border-color: var(--gold);
}

.inq-subtitle {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.6rem;
  line-height: 1.6;
}

.inq-body {
  padding: 1.8rem 2rem 2rem;
}

.inq-reqs {
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
  margin-bottom: 1.8rem;
  border-radius: 2px;
}

.inq-reqs-title {
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.inq-reqs ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inq-reqs li {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.inq-reqs li::before {
  content: "✓";
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}

.inq-steps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.inq-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.inq-step.active {
  color: var(--gold-light);
}

.inq-step.done {
  color: var(--green-light);
}

.inq-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.inq-step.active .inq-step-num {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold);
}

.inq-step.done .inq-step-num {
  background: var(--green-mid);
  color: var(--white);
  border-color: var(--green-mid);
}

.inq-step-div {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  min-width: 16px;
}

.inq-section-label {
  font-size: 0.63rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin: 1.4rem 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.inq-body .form-group label {
  color: rgba(255, 255, 255, 0.6);
}

.inq-body .form-group input,
.inq-body .form-group select,
.inq-body .form-group textarea {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.inq-body .form-group input:focus,
.inq-body .form-group select:focus,
.inq-body .form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.09);
}

.inq-footer {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.inq-footer .btn-primary {
  flex: 1;
  min-width: 140px;
  text-align: center;
  clip-path: none;
  border-radius: 3px;
}

.inq-footer .btn-cancel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
  padding: 0.85rem 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  transition: all 0.25s;
}

.inq-footer .btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.radio-pill input {
  display: none;
}

.radio-pill label {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(201, 162, 39, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: none;
}

.radio-pill input:checked+label {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold);
}

.btn-inquire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  width: 100%;
  background: transparent;
  border: 1px solid var(--green-mid);
  color: var(--green-mid);
  padding: 0.65rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  transition: all 0.28s;
  cursor: pointer;
  border-radius: 3px;
}

.btn-inquire:hover {
  background: var(--green-mid);
  color: var(--white);
  border-color: var(--green-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45, 122, 79, 0.35);
}

.btn-inquire svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.inq-success {
  text-align: center;
  padding: 2rem 1rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.inq-success.show {
  display: flex;
}

.inq-success-icon {
  font-size: 3.5rem;
}

.inq-success h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.5rem;
}

.inq-success p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 380px;
}

#prayers>* {
  position: relative;
  z-index: 1;
}

.prayers-tabs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.prayers-tab {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(201, 162, 39, 0.3);
  color: rgba(255, 255, 255, 0.65);
  padding: 0.65rem 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.25s;
}

.prayers-tab:hover {
  color: var(--white);
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.12);
}

.prayers-tab.active {
  background: var(--gold);
  color: var(--green-dark);
  border-color: var(--gold);
}

.prayers-panel {
  display: none;
}

.prayers-panel.active {
  display: block;
}

.homily-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.homily-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-left: 4px solid rgba(201, 162, 39, 0.4);
  padding: 1.8rem;
  transition: all 0.3s;
  backdrop-filter: blur(4px);
}

.homily-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-left-color: var(--gold);
  transform: translateY(-3px);
}

.featured-homily {
  grid-column: 1/-1;
  border-left-color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
}

.homily-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.homily-badge {
  background: var(--gold);
  color: var(--green-dark);
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
}

.homily-date {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
}

.homily-title {
  font-family: "Playfair Display", serif;
  color: var(--gold-light);
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.featured-homily .homily-title {
  font-size: 1.45rem;
}

.homily-priest {
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 0.8rem;
}

.homily-excerpt {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  margin-bottom: 1rem;
  font-style: italic;
}

.homily-reading {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
}

.gospel-featured {
  max-width: 1000px;
  margin: 0 auto 2rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-top: 4px solid var(--gold);
  padding: 2.2rem 2.5rem;
  backdrop-filter: blur(6px);
}

.gospel-week-label {
  font-size: 0.67rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.gospel-reference {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 1.2rem;
}

.gospel-text {
  border-left: 3px solid var(--gold);
  padding-left: 1.4rem;
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.9;
}

.gospel-reflection-label {
  font-size: 0.67rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.gospel-reflection {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

.gospel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.gospel-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.15);
  padding: 1.3rem 1.4rem;
  transition: all 0.3s;
  backdrop-filter: blur(3px);
}

.gospel-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(201, 162, 39, 0.35);
}

.gospel-day {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.gospel-ref {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 0.4rem;
}

.gospel-title {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.gospel-snippet {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  font-style: italic;
}

.login-info-icon {
  font-size: 2.8rem;
  margin-bottom: 1rem;
  width: 64px;
  height: 64px;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto 3.5rem;
}

.vm-card {
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.vm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.vision-card {
  background: linear-gradient(135deg, var(--green-dark), #0d2a1a);
  border-top: 4px solid var(--gold);
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-top: 4px solid var(--gold);
}

.mission-card {
  background: linear-gradient(135deg, #0a1f12, var(--green-dark));
  border: 1px solid rgba(201, 162, 39, 0.2);
  border-top: 4px solid var(--green-light);
}

.vm-card::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.05);
  pointer-events: none;
}

.vm-label {
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

.vm-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.85;
}

.vm-mission-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
}

.vm-mission-list li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  padding-left: 1.2rem;
  position: relative;
}

.vm-mission-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--gold);
  font-size: 0.55rem;
}

#announcements {
  padding: 5rem 1.5rem;
  background: var(--cream);
}

.announcements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.announcement-card {
  background: var(--white);
  border: 1px solid rgba(26, 74, 46, 0.1);
  border-top: 4px solid var(--gold);
  padding: 1.8rem;
  transition: all 0.3s;
  position: relative;
}

.announcement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.ann-badge {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}

.ann-badge.urgent {
  background: #fee2e2;
  color: #dc2626;
}

.ann-badge.event {
  background: #d1fae5;
  color: #065f46;
}

.ann-badge.general {
  background: #fef3c7;
  color: #92400e;
}

.ann-badge.ministry {
  background: #dbeafe;
  color: #1e40af;
}

.ann-date {
  font-size: 0.67rem;
  color: #999;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ann-title {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  color: var(--green-dark);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.ann-body {
  font-size: 0.83rem;
  color: #666;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.ann-read-more {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-mid);
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
  padding: 0;
}

.ann-read-more:hover {
  color: var(--gold);
}

.ann-featured {
  max-width: 1100px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, var(--green-dark), #0f3020);
  border-left: 5px solid var(--gold);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.ann-featured-text h3 {
  font-family: "Playfair Display", serif;
  color: var(--gold-light);
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}

.ann-featured-text p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  line-height: 1.7;
}

.ann-featured-date {
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  display: block;
}

#login {
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--green-dark) 0%, #0a1f12 100%);
  position: relative;
  overflow: hidden;
}

#login::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
      transparent,
      transparent 40px,
      rgba(201, 162, 39, 0.025) 40px,
      rgba(201, 162, 39, 0.025) 41px);
}

.login-wrapper {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
}

.login-info h3 {
  font-family: "Playfair Display", serif;
  color: var(--white);
  font-size: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.login-info p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.87rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.login-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.login-benefits li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.83rem;
}

.login-benefits li::before {
  content: "✓";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: rgba(201, 162, 39, 0.2);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
}

.login-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-top: 4px solid var(--gold);
  padding: 2.5rem 2rem;
}

.login-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
}

.login-tab {
  flex: 1;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.25s;
  margin-bottom: -1px;
}

.login-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.login-tab:hover:not(.active) {
  color: rgba(255, 255, 255, 0.7);
}

.login-panel {
  display: none;
}

.login-panel.active {
  display: block;
  min-height: 420px;
}

.login-box .form-group label {
  color: rgba(255, 255, 255, 0.65);
}

.login-box .form-group input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(201, 162, 39, 0.25);
  color: var(--white);
}

.login-box .form-group input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.login-box .form-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.login-submit {
  width: 100%;
  margin-top: 0.5rem;
  background: var(--gold);
  color: var(--green-dark);
  padding: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.login-submit:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.35);
}

.login-divider {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.72rem;
  margin: 1.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.login-forgot {
  text-align: right;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--gold);
  cursor: pointer;
  background: none;
  border: none;
  letter-spacing: 0.5px;
}

.login-forgot:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

.pass-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  position: relative;
}

.pass-field label {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.pass-field input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 162, 39, 0.25);
  color: var(--white);
  padding: 0.75rem 3.5rem 0.75rem 0.9rem;
  font-size: 0.85rem;
  font-family: "Montserrat", sans-serif;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

.pass-field input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

.pass-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.pass-toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  cursor: pointer;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  padding: 0;
  transition: color 0.2s;
}

.pass-toggle:hover {
  color: var(--gold);
}

.forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -0.3rem;
  margin-bottom: 0.9rem;
}

.login-switch {
  text-align: center;
  margin-top: 1.2rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.login-switch span {
  color: var(--gold);
  cursor: pointer;
  font-weight: 600;
}

.login-switch span:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

.account-type-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.account-type-option input[type="radio"] {
  display: none;
}

.account-type-option label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(201, 162, 39, 0.25);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.25s;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.account-type-option label:hover {
  border-color: rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.08);
  color: var(--white);
}

.account-type-option input[type="radio"]:checked+label {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.15);
  color: var(--gold-light);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}

.account-type-option input[type="radio"]:checked+label .account-type-icon {
  background: rgba(201, 162, 39, 0.2);
}

.account-type-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.account-type-title {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  line-height: 1;
}

.account-type-desc {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.3;
}

.account-type-option input[type="radio"]:checked+label .account-type-desc {
  color: rgba(240, 208, 96, 0.7);
}

@media (max-width: 920px) {
  nav {
    padding: 0 1.25rem;
  }

  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu {
    padding: 1rem 1.25rem 1.35rem;
  }
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .prayer-intentions {
    grid-template-columns: 1fr;
  }

  .prayer-intentions .pi-full {
    grid-column: 1;
  }

  .login-wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ann-featured {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }

  .homily-grid {
    grid-template-columns: 1fr;
  }

  .featured-homily {
    grid-column: 1;
  }

  .gospel-featured {
    padding: 1.5rem;
  }

  .vm-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  :root {
    --nav-h: 62px;
  }

  #mass-schedule,
  #sacraments,
  #prayers,
  #donations,
  #about {
    padding: 4rem 1rem;
  }

  .schedule-form-wrapper,
  .prayer-intentions {
    padding: 2rem 1.1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .info-strip {
    flex-direction: column;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

  .pastor-section {
    flex-direction: column;
    text-align: center;
    gap: 1.2rem;
  }

  .sacrament-grid,
  .announcements-grid {
    grid-template-columns: 1fr;
  }

  .gcash-number {
    font-size: 1.25rem;
    letter-spacing: 2px;
  }

  .gcash-section {
    padding: 1.8rem 1rem;
  }

  .qr-img {
    max-width: min(230px, 82vw);
  }

  .footer-links {
    gap: 0.35rem 1rem;
  }

  .prayer-intentions {
    grid-template-columns: 1fr;
  }

  .account-type-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .nav-title span {
    display: none;
  }

  .nav-icon {
    width: 36px;
    height: 36px;
  }

  .nav-title {
    font-size: 0.8rem;
  }

  .hero-badge {
    font-size: 0.54rem;
    letter-spacing: 2px;
    padding: 0.3rem 1rem;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .inq-overlay {
    padding: 0.5rem;
    align-items: flex-start;
  }

  .inq-modal {
    margin: 0.5rem auto;
  }

  .inq-header {
    padding: 1.3rem 1.2rem 1rem;
  }

  .inq-body {
    padding: 1.3rem 1.2rem 1.5rem;
  }

  .inq-modal-title {
    font-size: 1.2rem;
  }

  .inq-big-icon {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }

  .inq-steps {
    gap: 0.25rem;
  }

  .inq-step {
    font-size: 0.56rem;
    gap: 0.3rem;
  }

  .inq-step-num {
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
  }

  .inq-footer {
    flex-direction: column;
  }

  .inq-footer .btn-primary,
  .inq-footer .btn-cancel {
    width: 100%;
    text-align: center;
  }
}

/* ─── NAV USER BADGE (logged-in state) ──────────────────────── */
.nav-user-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.nav-user-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: var(--gold-light);
  letter-spacing: 1px;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(201, 162, 39, .3);
  border-radius: 4px;
  background: rgba(201, 162, 39, .08);
  white-space: nowrap;
}

.role-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.role-dot.parishioner {
  background: var(--green-light);
}

.role-dot.staff {
  background: var(--gold);
}

.nav-logout {
  background: none;
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .55);
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  transition: all .2s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.nav-logout:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ─── VISITOR LOGIN PROMPT ON SACRAMENTS ───────────────────── */
.login-prompt-card {
  background: linear-gradient(135deg, var(--green-dark), #0f3020);
  border: 1px solid rgba(201, 162, 39, .25);
  border-top: 3px solid var(--gold);
  padding: 1.2rem 1.5rem;
  margin-top: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.login-prompt-card p {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.6;
  flex: 1;
  min-width: 150px;
}

.login-prompt-card a {
  display: inline-block;
  background: var(--gold);
  color: var(--green-dark);
  padding: 0.55rem 1.2rem;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  transition: all .25s;
}

.login-prompt-card a:hover {
  background: var(--gold-light);
}

/* ─── STAFF TOOLBAR ─────────────────────────────────────────── */
.staff-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(10, 28, 18, .97);
  border-top: 2px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.5rem;
  flex-wrap: wrap;
}

.staff-toolbar-label {
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-right: 0.5rem;
}

.staff-btn {
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .35);
  color: var(--gold-light);
  font-size: 0.65rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all .2s;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
}

.staff-btn:hover {
  background: var(--gold);
  color: var(--green-dark);
}

/* Staff toolbar removed — no bottom padding needed */

/* ─── STAFF: ADD SCHEDULE BUTTON ───────────────────────────── */
.add-schedule-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.2rem auto 0;
  background: rgba(201, 162, 39, .1);
  border: 2px dashed rgba(201, 162, 39, .4);
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: all .25s;
}

.add-schedule-btn:hover {
  background: rgba(201, 162, 39, .18);
}

/* Delete X on schedule cards */
.sched-card-del {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(239, 68, 68, .15);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s;
}

.sched-card-del:hover {
  background: rgba(239, 68, 68, .35);
}

/* ─── ANNOUNCEMENT FEATURED SECTION FLEX ───────────────────── */
.ann-featured-text {
  flex: 1;
}

/* ─── DASHBOARD ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dash-panel {
  animation: fadeUp .3s ease;
}

/* Table hover rows */
#inqTable tbody tr:hover,
#piTable tbody tr:hover,
#parTable tbody tr:hover {
  background: rgba(255, 255, 255, .04);
}

/* Responsive table wrapper */
@media(max-width:768px) {

  #inqTable,
  #piTable,
  #parTable {
    font-size: .72rem;
  }

  #inqTable th,
  #inqTable td,
  #piTable th,
  #piTable td,
  #parTable th,
  #parTable td {
    padding: .5rem .6rem;
  }
}

/* ─── SACRAMENT CARD EDIT MODE ──────────────────────────────── */
.sacrament-card .btn-inquire[style*="gold"] {
  background: rgba(201, 162, 39, .08);
}

.sacrament-card .btn-inquire[style*="gold"]:hover {
  background: rgba(201, 162, 39, .2);
  transform: translateY(-2px);
}

/* ─── SACRAMENT FORM OVERRIDES (inside inquiry modal) ───────── */
/* Ensure sf-sel option text is visible in dark modal */
.sf-sel option {
  background: #0f2819;
  color: #fff;
}

/* Conditional blocks revealed by radio selection */
.sf-cond {
  display: none;
}

/* Make sf-note work in the light-background card sections */
.sacrament-card .sf-note {
  border-radius: 0 2px 2px 0;
}

/* Checkbox grid two columns */
.sf-cb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .8rem;
  margin-bottom: .9rem;
}

/* Inquiry modal body padding */
.inq-body {
  padding: 1.2rem 1.5rem 1rem;
}

/* Required field highlight on validation */
.sf-in:invalid:not(:placeholder-shown),
.sf-in[style*="f87171"] {
  border-color: #f87171 !important;
}


/* ============================================================
   Moved inline PHP styles into reusable generated classes
   ============================================================ */

.u-st-5940dec5 {
  padding-top: calc(var(--nav-h) + 3rem);
}

.u-st-de8a675e {
  margin-top: .9rem;
}

.u-st-808fb760 {
  font-size: .83rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
  margin-bottom: .7rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(201, 162, 39, .3);
}

.u-st-4838e7ab {
  margin-top: .5rem;
}

.u-st-4cb8ceeb {
  position: relative;
}

.u-st-5677897e {
  border-bottom: none;
}

.u-st-4e0b175f {
  white-space: pre-line;
}

.u-st-d8087a82 {
  text-align: right;
  margin-top: .5rem;
}

.u-st-ef61bcf6 {
  display: flex;
  gap: .5rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}

.u-st-73459436 {
  color: rgba(255, 255, 255, .85);
}

.u-st-e02e647a {
  color: var(--gold);
}

.u-st-ba87ec47 {
  margin: 1.5rem auto 1rem;
  text-align: center;
}

.u-st-dda213a0 {
  margin-bottom: .6rem;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.u-st-bac79058 {
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
  margin-top: .5rem;
}

.u-st-ec4b6e44 {
  width: 180px;
  height: 180px;
  border: 2px dashed rgba(201, 162, 39, .4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: rgba(255, 255, 255, .03);
}

.u-st-4661b930 {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
  margin: 0;
  text-align: center;
  padding: 1rem;
}

.u-st-2c527284 {
  display: none;
  max-width: 220px;
  width: 100%;
  border: 3px solid var(--gold);
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  margin: .8rem auto 0;
  display: none;
}

.u-st-95c2a8ae {
  margin: 1rem auto;
  max-width: 300px;
  border: 2px dashed rgba(201, 162, 39, .35);
  border-radius: 6px;
  padding: 1.2rem;
  text-align: center;
  background: rgba(201, 162, 39, .05);
}

.u-st-5ee0c878 {
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .5rem;
}

.u-st-84aa9a69 {
  font-size: .72rem;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .8rem;
}

.u-st-93b8ea5b {
  display: none;
}

.u-st-73cba729 {
  display: block;
  width: 100%;
  margin-bottom: .6rem;
}

.u-st-fb8213f5 {
  font-size: .72rem;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .6rem;
  word-break: break-all;
  min-height: 1rem;
}

.u-st-945e795d {
  width: 100%;
  clip-path: none;
  border-radius: 3px;
  display: none;
}

.u-st-cf4edffb {
  display: none;
  margin-top: .6rem;
  padding: .5rem .8rem;
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 600;
}

.u-st-99558bfc {
  font-size: .73rem;
}

.u-st-4231601b {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.u-st-a911c3ea {
  max-width: 540px;
  text-align: left;
}

.u-st-cc04f6d6 {
  margin-bottom: 1.2rem;
  color: #fff;
}

.u-st-79dc9d88 {
  width: 100%;
  margin-top: .8rem;
  clip-path: none;
  border-radius: 3px;
}

.u-st-da1f71a6 {
  max-width: 560px;
  text-align: left;
  max-height: 88vh;
  overflow-y: auto;
}

.u-st-5562b4eb {
  margin-bottom: 1.5rem;
  color: #fff;
}

.u-st-09cbfd89 {
  margin-bottom: 1rem;
}

.u-st-29517f9b {
  color: rgba(255, 255, 255, .65);
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: .4rem;
}

.u-st-275786b1 {
  width: 100%;
  clip-path: none;
  border-radius: 3px;
}

.u-st-6f72e9e7 {
  max-width: 560px;
  text-align: left;
}

.u-st-4e391626 {
  margin-bottom: .5rem;
  color: #fff;
}

.u-st-507feeb0 {
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 1.2rem;
}

.u-st-693c9f23 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 220px;
  resize: vertical;
}

.u-st-3d59591f {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  resize: vertical;
}

.u-st-f4e90caa {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.u-st-233875a2 {
  padding-top: calc(var(--nav-h) + 3rem);
  min-height: 100vh;
  background: linear-gradient(135deg, var(--green-dark) 0%, #0a1f12 100%);
  position: relative;
  overflow: hidden;
}

.u-st-6ea6dc89 {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(201, 162, 39, .025) 40px, rgba(201, 162, 39, .025) 41px);
  pointer-events: none;
}

.u-st-d152a3cf {
  display: none;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 3px;
  font-size: .8rem;
  font-weight: 600;
}

.u-st-870d4522 {
  color: rgba(255, 255, 255, .4);
  font-size: .7rem;
  margin-top: .3rem;
  display: block;
}

.u-st-a5a2e689 {
  font-size: .65rem;
  color: rgba(255, 255, 255, .35);
}

.u-st-4fbd8673 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.u-st-76552ce9 {
  font-size: .68rem;
  opacity: .42;
  margin-top: .9rem;
}


/* Moved from tpl_sacraments.php <style> block */
/* Layout */
.sf-wrap {
  font-family: inherit;
}

.sf-sec {
  margin: 1.6rem 0 .7rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(201, 162, 39, .22);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.sf-sec-title {
  font-size: .6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
}

.sf-sec-sub {
  font-size: .62rem;
  color: rgba(255, 255, 255, .3);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: none;
}

.sf-field {
  margin-bottom: .9rem;
}

.sf-label {
  display: block;
  font-size: .65rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 600;
  margin-bottom: .32rem;
}

.sf-req {
  color: #f87171;
  margin-left: 1px;
}

.sf-bi {
  font-size: .63rem;
  color: rgba(255, 255, 255, .3);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: .25rem;
}

/* Inputs */
.sf-in {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  padding: .65rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .83rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
  border-radius: 2px;
}

.sf-in:focus {
  border-color: rgba(201, 162, 39, .7);
  background: rgba(255, 255, 255, .09);
}

.sf-in::placeholder {
  color: rgba(255, 255, 255, .25);
}

.sf-sel {
  background: rgba(15, 40, 25, .95);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  padding: .65rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .83rem;
  outline: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
}

.sf-sel:focus {
  border-color: rgba(201, 162, 39, .7);
}

.sf-ta {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  padding: .65rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .83rem;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
  border-radius: 2px;
  resize: vertical;
  min-height: 76px;
}

.sf-ta:focus {
  border-color: rgba(201, 162, 39, .7);
}

.sf-ta::placeholder {
  color: rgba(255, 255, 255, .25);
}

/* Grids */
.sf-r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

.sf-r3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .8rem;
}

.sf-r4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: .8rem;
}

@media(max-width:600px) {

  .sf-r2,
  .sf-r3,
  .sf-r4 {
    grid-template-columns: 1fr;
  }
}

/* Radio / Checkbox */
.sf-rg {
  display: flex;
  flex-direction: column;
  gap: .52rem;
  margin-bottom: .9rem;
}

.sf-rg.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

.sf-ri {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
}

.sf-ri input {
  margin-top: 2px;
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.sf-ri span {
  font-size: .8rem;
  color: rgba(255, 255, 255, .75);
  line-height: 1.5;
}

.sf-ri-sub {
  font-size: .68rem;
  color: rgba(255, 255, 255, .38);
  display: block;
  margin-top: .05rem;
}

.sf-cb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .8rem;
  margin-bottom: .9rem;
}

/* Cards */
.sf-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 1rem 1rem .6rem;
  margin-bottom: .8rem;
  border-radius: 2px;
  position: relative;
}

.sf-card-title {
  font-size: .62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .7rem;
}

.sf-card-remove {
  position: absolute;
  top: .55rem;
  right: .6rem;
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .28);
  color: #fca5a5;
  font-size: .6rem;
  padding: .22rem .52rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}

.sf-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: rgba(201, 162, 39, .08);
  border: 2px dashed rgba(201, 162, 39, .35);
  color: var(--gold);
  font-size: .67rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .62rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  margin-top: .2rem;
  width: 100%;
  transition: background .2s;
}

.sf-add-btn:hover {
  background: rgba(201, 162, 39, .14);
}

/* Note boxes */
.sf-note {
  background: rgba(201, 162, 39, .07);
  border-left: 3px solid var(--gold);
  padding: .65rem 1rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
  margin: .4rem 0 .9rem;
  border-radius: 0 2px 2px 0;
}

.sf-note.danger {
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .5);
  color: #fca5a5;
}

.sf-note.soft {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .55);
}

/* Conditional block */
.sf-cond {
  display: none;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: .9rem;
  margin: .4rem 0 .9rem;
  border-radius: 2px;
}

.u-st-d5bc6d88 {
  margin-top: 1.6rem;
}

.u-st-12c50ff7 {
  font-style: italic;
  color: rgba(255, 255, 255, .3);
  font-size: .62rem;
}

.u-st-e2721af0 {
  margin-top: .4rem;
}

.u-st-14a84a17 {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin-bottom: 0;
}

.u-st-a32b93b2 {
  max-width: 1100px;
  margin: .4rem auto 0;
  text-align: right;
}

.u-st-73907c6d {
  margin: .5rem 0;
}

.u-st-d9a38c78 {
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-mid);
  font-weight: 700;
  margin-bottom: .4rem;
}

.u-st-eb19fa91 {
  font-size: .75rem;
  color: #555;
  padding-left: .9rem;
  position: relative;
}

.u-st-584548dd {
  position: absolute;
  left: 0;
  color: var(--green-mid);
  font-size: .7rem;
}

.u-st-98802617 {
  max-width: 1100px;
  margin: 2rem auto 0;
  text-align: right;
}

.u-st-5684d763 {
  display: inline-block;
  background: var(--gold);
  color: var(--green-dark);
  padding: .6rem 1.4rem;
  border-radius: 3px;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  transition: background .2s;
}

.u-st-090c17b1 {
  max-width: 460px;
}

.u-st-8c960343 {
  margin-bottom: 1.2rem;
}

.u-st-244a7f30 {
  text-align: left;
}

.u-st-e972ed62 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  box-sizing: border-box;
}

.u-st-d2719e5a {
  color: rgba(255, 255, 255, .3);
  font-size: .65rem;
}

.u-st-96654218 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  box-sizing: border-box;
  min-height: 100px;
  resize: vertical;
}

.u-st-70d46d99 {
  max-width: 500px;
  text-align: left;
}

.u-st-f9b9170a {
  max-width: 580px;
  text-align: left;
  max-height: 88vh;
  overflow-y: auto;
}

.u-st-b2bd8c9a {
  font-size: .58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .3rem;
}

.u-st-ee6dacc4 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .75rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  display: block;
  box-sizing: border-box;
  min-height: 150px;
  resize: vertical;
}

.u-st-63ddb7c2 {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.u-st-90985c8f {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  gap: .8rem;
}

.u-st-8287efa1 {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .55);
  padding: .8rem 1.4rem;
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}

.u-st-b7c6f8e8 {
  flex: 1;
  clip-path: none;
  border-radius: 3px;
}

.u-st-4c1d3084 {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  gap: 1rem;
}

.u-st-e45f30cf {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(201, 162, 39, .15);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold);
}

.u-st-1f7f532d {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.5rem;
}

.u-st-c02f8fc3 {
  color: rgba(255, 255, 255, .65);
  font-size: .85rem;
  line-height: 1.7;
  max-width: 380px;
}

.u-st-03dc239b {
  clip-path: none;
  border-radius: 3px;
}

.u-st-dc60e169 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--gold);
}


/* Moved from community.php <style> block */
/* Pinned preview block */
.pinned-preview {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, rgba(10, 30, 18, .9), rgba(15, 40, 25, .9));
  border: 1px solid rgba(201, 162, 39, .3);
  border-left: 4px solid var(--gold);
  padding: 1.5rem 1.8rem;
  position: relative;
}

.pinned-preview-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .58rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 1rem;
}

.pinned-preview-empty {
  color: rgba(255, 255, 255, .35);
  font-size: .82rem;
  font-style: italic;
  text-align: center;
  padding: 1rem 0;
}

/* Active pinned state on cards */
.homily-card.pinned-active,
.gospel-card.pinned-active {
  border: 1px solid rgba(201, 162, 39, .45) !important;
  background: rgba(201, 162, 39, .07) !important;
}

/* Homily list label */
.homily-list-label {
  font-size: .6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  font-weight: 700;
  margin: 1.5rem 0 .8rem;
}

.u-st-dea494bb {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}

.u-st-962e2b23 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem auto 0;
  background: rgba(201, 162, 39, .1);
  border: 2px dashed rgba(201, 162, 39, .4);
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .9rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.u-st-074290d8 {
  margin-bottom: .4rem;
}

.u-st-c3bb0da1 {
  margin-right: .5rem;
}

.u-st-5f78f650 {
  margin-bottom: .3rem;
}

.u-st-c3794abc {
  margin-bottom: .5rem;
}

.u-st-f6eb913b {
  font-size: .6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  font-weight: 700;
  margin: 1.5rem 0 .8rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.u-st-685f57ec {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
}

.u-st-2259f554 {
  background: var(--gold);
  color: var(--green-dark);
  font-size: .58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.u-st-e34c9f6e {
  display: flex;
  gap: .4rem;
  margin-top: .7rem;
  flex-wrap: wrap;
  align-items: center;
}

.u-st-036e0614 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  margin: .4rem 0;
}

.u-st-fa851e02 {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .45rem;
}

.u-st-09c7fc9d {
  display: flex;
  gap: .4rem;
  margin-top: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.u-st-d7ab75f5 {
  max-width: 1000px;
  margin: 3rem auto 0;
  background: rgba(10, 30, 18, .75);
  backdrop-filter: blur(8px);
  padding: 2.5rem 2rem;
  border: 1px solid rgba(201, 162, 39, .25);
  border-left: 4px solid var(--gold);
}

.u-st-76760a1e {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.u-st-3dd81921 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: .3rem;
}

.u-st-cf92e994 {
  color: rgba(255, 255, 255, .5);
  font-size: .78rem;
}

.u-st-6605189d {
  background: var(--gold);
  color: var(--green-dark);
  padding: .55rem 1.2rem;
  border-radius: 3px;
  font-size: .68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.u-st-58f1a487 {
  color: rgba(255, 255, 255, .4);
  font-size: .82rem;
  font-style: italic;
}

.u-st-2e6a077c {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.u-st-ed8468ea {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(201, 162, 39, .15);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
}

.u-st-d8a92bae {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

.u-st-85d0ca49 {
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.u-st-88251a95 {
  font-size: .65rem;
  color: rgba(255, 255, 255, .5);
  margin-left: auto;
}

.u-st-d7f23b43 {
  color: rgba(255, 255, 255, .7);
}

.u-st-fc918ead {
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  line-height: 1.65;
  margin: 0;
}

.u-st-04fc4f06 {
  max-width: 1000px;
  margin: 3rem auto 0;
  background: rgba(10, 30, 18, .75);
  backdrop-filter: blur(8px);
  padding: 2.5rem 2rem;
  border: 1px solid rgba(201, 162, 39, .25);
  border-left: 4px solid var(--gold);
  text-align: center;
}

.u-st-ee87e357 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: .8rem;
}

.u-st-95255923 {
  color: rgba(255, 255, 255, .65);
  font-size: .85rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.u-st-b1fe0e97 {
  clip-path: none;
  border-radius: 3px;
  display: inline-block;
}

.u-st-accb2d51 {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
}

.u-st-6c572c16 {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}

.u-st-33cfba92 {
  font-size: .63rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}

.u-st-eb15f25b {
  flex: 1;
  height: 1px;
  background: rgba(201, 162, 39, .2);
}

.u-st-9ed3f03c {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex-shrink: 0;
}

.u-st-e5c05165 {
  max-width: 1100px;
  margin: 0 auto 2rem;
}

.u-st-ee7e8eef {
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(201, 162, 39, .25);
  padding: 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, .35);
  font-size: .82rem;
  font-style: italic;
}

.u-st-a4cd4be9 {
  font-size: .63rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-mid);
}

.u-st-c61042ad {
  flex: 1;
  height: 1px;
  background: rgba(26, 74, 46, .15);
}

.u-st-c5743e21 {
  display: flex;
  gap: .4rem;
  margin-top: .8rem;
  flex-wrap: wrap;
  align-items: center;
}

.feature-btn,
.pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  color: var(--gold-light);
  font-size: .6rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .34rem .72rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  min-height: 28px;
  transition: all .2s;
  white-space: nowrap;
}

.feature-btn:hover,
.pin-btn:hover {
  background: rgba(201, 162, 39, .18);
  border-color: rgba(201, 162, 39, .48);
}

.feature-btn.active,
.pin-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-dark);
}

.u-st-ffb53dfb {
  font-size: .6rem;
  padding: .3rem .6rem;
}

.u-st-76e79a90 {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.u-st-e6d5c647 {
  max-width: 520px;
  text-align: left;
}

.u-st-fdb1e779 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .7rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
}

.u-st-d4399143 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .7rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
  min-height: 140px;
  resize: vertical;
}

.u-st-6843f4af {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .7rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
  min-height: 100px;
  resize: vertical;
}

.u-st-58c9addc {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .7rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
  min-height: 130px;
  resize: vertical;
}

.u-st-45b13754 {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.u-st-8c94f275 {
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 4rem;
  background: linear-gradient(160deg, #0d2418 0%, #0a1f12 100%);
  min-height: 100vh;
}

.u-st-ca3d80c8 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.u-st-1403bffb {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
}

.u-st-93f53439 {
  font-size: .58rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .5rem;
}

.u-st-d1887fa1 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: .3rem;
}

.u-st-9d1ecaec {
  color: rgba(255, 255, 255, .45);
  font-size: .8rem;
}

.u-st-d96d0d7d {
  color: rgba(255, 255, 255, .75);
}

.u-st-53799b96 {
  margin: 0 .5rem;
  color: rgba(255, 255, 255, .2);
}

.u-st-db9c99e6 {
  color: var(--gold-light);
}

.u-st-e2bbdab2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.u-st-c3b0384e {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}

.u-st-e5ec086b {
  font-size: .62rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.u-st-67ab5442 {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .08);
  margin-bottom: 2rem;
}

.u-st-acd93c00 {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  padding: .1rem .5rem;
  border-radius: 2px;
  font-size: .65rem;
  margin-left: .4rem;
  font-weight: 400;
}

.u-st-694c6496 {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.2rem;
}

.u-st-42aa90d6 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 300px;
  flex: 1;
  padding: .55rem .9rem;
}

.u-st-1d554b4e {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 190px;
  padding: .55rem .9rem;
}

.u-st-b1ec9b49 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 170px;
  padding: .55rem .9rem;
}

.u-st-4d753a3c {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, .25);
  font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, .06);
}

.u-st-77c8140b {
  overflow-x: auto;
}

.u-st-0e233492 {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.u-st-625057de {
  background: rgba(201, 162, 39, .06);
}

.u-st-872b4d23 {
  padding: .7rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(201, 162, 39, .2);
  width: 36px;
}

.u-st-2ffa8c48 {
  padding: .7rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(201, 162, 39, .2);
}

.u-st-9ccb37ce {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .3);
  font-size: .72rem;
}

.u-st-daf7dbff {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
  font-size: .75rem;
}

.u-st-b9e417ec {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
}

.u-st-2f93eefe {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: #fff;
  font-weight: 600;
}

.u-st-473859f7 {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
}

.u-st-b643cc1a {
  font-size: .72rem;
  color: rgba(255, 255, 255, .35);
}

.u-st-01d451fa {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.u-st-54f6dab3 {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
}

.u-st-038784d8 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 340px;
  flex: 1;
  padding: .55rem .9rem;
}

.u-st-4fac9a71 {
  background: rgba(201, 162, 39, .1);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 3px;
  display: inline-block;
}

.u-st-fc202b6c {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .5);
  font-size: .75rem;
}

.u-st-9cbe0b38 {
  color: rgba(255, 255, 255, .3);
  font-size: .7rem;
}

.u-st-50410842 {
  color: rgba(255, 255, 255, .25);
  font-style: italic;
}

.u-st-7c5a1bf3 {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .7);
  max-width: 280px;
}

.u-st-a13f410a {
  max-height: 3.2rem;
  overflow: hidden;
  line-height: 1.6;
  font-size: .78rem;
}

.u-st-6152af79 {
  font-size: .7rem;
  color: var(--green-light);
  letter-spacing: .5px;
}

.u-st-f4cfbed0 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 380px;
  padding: .55rem .9rem;
}

.u-st-abcd1a0f {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  font-size: .75rem;
}

.u-st-7370d933 {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .6);
}

.u-st-a93508fd {
  background: rgba(201, 162, 39, .12);
  color: var(--gold-light);
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 3px;
  display: inline-block;
}

.u-st-f420c4c6 {
  color: rgba(255, 255, 255, .2);
  font-size: .72rem;
}

.u-st-a5f6366b {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  font-size: .7rem;
  padding: .2rem .6rem;
  border-radius: 3px;
  display: inline-block;
}

.u-st-8a390f15 {
  align-items: flex-start;
  padding: 1.5rem;
}

.u-st-0d445d06 {
  background: linear-gradient(160deg, #0e2617, #1a4a2e);
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 660px;
  margin: auto;
  position: relative;
  max-height: 88vh;
  overflow-y: auto;
  animation: fadeUp .3s ease;
}

.u-st-23582330 {
  background: rgba(0, 0, 0, .2);
  padding: 1.4rem 1.8rem 1.2rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.u-st-da7ae15b {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
}

.u-st-4cbda034 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .5);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 34px;
  text-align: center;
}

.u-st-9d3d4b29 {
  padding: 1.5rem 1.8rem 2rem;
}

.u-st-9d5b4774 {
  font-size: 1.4rem;
  margin-bottom: .8rem;
  color: var(--gold);
  font-family: 'Playfair Display', serif;
}

.u-st-7ffe65fd {
  color: rgba(255, 255, 255, .65);
  font-size: .85rem;
  line-height: 1.7;
}

.u-st-7b341922 {
  clip-path: none;
  border-radius: 3px;
  margin-top: .5rem;
}

.u-st-e7546fae {
  padding: .6rem .9rem;
  color: rgba(255, 255, 255, .4);
  font-size: .68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.u-st-18a3abdd {
  padding: .6rem .9rem;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.u-st-907c8dea {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-bottom: 1.5rem;
}

.u-st-19bc336b {
  background: rgba(255, 255, 255, .04);
  padding: .9rem 1rem;
  border-left: 3px solid var(--gold);
}

.u-st-07d63a65 {
  font-size: .58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}

.u-st-35b0a808 {
  color: #fff;
  font-size: .85rem;
}

.u-st-a77d3fc4 {
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .7rem;
}

.u-st-38fff641 {
  overflow-x: auto;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
}

.u-st-32d39d7a {
  width: 100%;
  border-collapse: collapse;
}

.u-st-0e0f45cc {
  color: rgba(255, 255, 255, .3);
  font-style: italic;
  font-size: .82rem;
}

.u-st-a7872a94 {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  justify-content: flex-end;
}

.u-st-1eb02e19 {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .4rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.u-st-5725c03f {
  background: '.$c[0].';
  color: '.$c[1].';
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 3px;
}

.u-st-369e344f {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.u-st-bb76b7e7 {
  margin-bottom: 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
}

.u-st-2ce05baf {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: .3rem;
}

.u-st-34d49765 {
  color: rgba(255, 255, 255, .48);
  font-size: .82rem;
}

.u-st-b5927153 {
  color: #fff;
}

.u-st-0a0e29b3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.u-st-b514bb53 {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 3px solid var(--gold);
  padding: 1.3rem;
}

.u-st-3dfd0474 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #fff;
  line-height: 1;
}

.u-st-310bc579 {
  font-size: .62rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-top: .4rem;
}

.u-st-eb4b977e {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .08);
  margin-bottom: 1.8rem;
  overflow-x: auto;
}

.u-st-a36509a5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.u-st-0ac23293 {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 1.2rem;
}

.u-st-7662e684 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  margin-bottom: .8rem;
}

.u-st-89c8b533 {
  color: rgba(255, 255, 255, .45);
  font-size: .78rem;
  margin-bottom: 1rem;
}

.u-st-463022b6 {
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .35);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .38rem .8rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.u-st-51f4b4a0 {
  display: none;
  margin-top: 1rem;
  background: rgba(201, 162, 39, .1);
  border: 1px dashed rgba(201, 162, 39, .35);
  color: var(--gold-light);
  padding: .8rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.u-st-f7899925 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.u-st-192a3fcb {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .58rem .85rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

.u-st-55d43e11 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-top: .7rem;
}

.u-st-7cffb167 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .58rem .85rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  margin-top: .7rem;
}

.u-st-edaf44a6 {
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .35);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .38rem .8rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  margin-top: .7rem;
}

.u-st-b6530f97 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .58rem .85rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 360px;
  margin-bottom: 1rem;
}

.u-st-0498ba56 {
  padding: .72rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  border-bottom: 2px solid rgba(201, 162, 39, .2);
  white-space: nowrap;
}

.u-st-f28f6f16 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  color: #fff;
  font-weight: 600;
}

.u-st-9e3bc9c4 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
}

.u-st-70abef16 {
  font-family: 'Playfair Display', serif;
  color: #fff;
  margin: 1.8rem 0 .8rem;
}

.u-st-0789b3a2 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 1px;
}

.u-st-f6c38799 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .58rem .85rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 380px;
  margin-bottom: 1rem;
}

.u-st-83052b2b {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  white-space: nowrap;
}

.u-st-05164c55 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  color: #fff;
}

.u-st-c9ba028d {
  font-size: .7rem;
  color: rgba(255, 255, 255, .35);
}

.u-st-da89a222 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  max-width: 420px;
}

.u-st-65bc52ec {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: .75rem;
}

.u-st-fc8cb565 {
  color: rgba(255, 255, 255, .35);
}

.u-st-763f0308 {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .58rem .85rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  max-width: 420px;
  margin-bottom: 1rem;
}

.u-st-3f5c975d {
  font-size: .68rem;
  color: var(--gold);
}

.u-st-c22b1170 {
  padding: .72rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  max-width: 380px;
}

.u-st-b964f25d {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-size: .72rem;
}


/* Database error page helpers. Keep scoped so they do not override the site layout. */
.db-error-page {
  font-family: Arial, sans-serif;
  background: #1a4a2e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0
}

.db-error-page .box {
  max-width: 580px;
  background: rgba(0, 0, 0, .4);
  border-top: 4px solid #c9a227;
  padding: 2.5rem 2rem;
  text-align: center
}

.db-error-page h2 {
  color: #f0d060;
  font-size: 1.5rem;
  margin-bottom: .8rem
}

.db-error-page p {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 1rem
}

.db-error-page code {
  background: rgba(255, 255, 255, .1);
  padding: .3rem .7rem;
  border-radius: 3px;
  font-size: .85rem;
  display: block;
  margin: .5rem 0;
  text-align: left
}

.db-error-page .step {
  background: rgba(201, 162, 39, .1);
  border-left: 3px solid #c9a227;
  padding: .7rem 1rem;
  margin: .5rem 0;
  font-size: .82rem;
  text-align: left
}

.u-st-278fedda {
  margin-top: 1.2rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
}


.nav-dashboard-link,
.nav-login-link {
  color: var(--gold-light);
  border: 1px solid rgba(201, 162, 39, .3);
  padding: .45rem .85rem;
  border-radius: 4px;
}

.nav-login-link {
  border-color: rgba(201, 162, 39, .4);
}

.dash-input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .6rem .9rem;
  font-family: inherit;
  font-size: .82rem;
  outline: none;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

.dash-action-btn {
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
}

.dash-delete-btn {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
}

.dash-th {
  padding: .7rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(201, 162, 39, .2);
}

.dash-td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.modal-input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(201, 162, 39, .3);
  color: #fff;
  padding: .7rem .9rem;
  width: 100%;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
}

.modal-input-lg {
  min-height: 100px;
  resize: vertical;
}

.modal-input-xl {
  min-height: 140px;
  resize: vertical;
}

.modal-input-xxl {
  min-height: 220px;
  resize: vertical;
}

.inq-status-select {
  border: 1px solid transparent;
  padding: .36rem .65rem;
  font-family: inherit;
  font-size: .65rem;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  outline: none;
  transition: all .2s;
  /* Default fallback so text is always visible */
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.7);
}

.inq-status-select.pending {
  background: rgba(147, 197, 253, .18);
  border-color: rgba(147, 197, 253, .42);
  color: #bfdbfe;
}

.inq-status-select.reviewed {
  background: rgba(59, 130, 246, .18);
  border-color: rgba(59, 130, 246, .42);
  color: #93c5fd;
}

.inq-status-select.completed {
  background: rgba(16, 185, 129, .18);
  border-color: rgba(16, 185, 129, .42);
  color: #86efac;
}

.inq-status-select option {
  background: #0f2819;
  color: #fff;
}

.priest-edit-modal {
  max-width: 640px;
  text-align: left;
  padding: 2.1rem 2rem 2rem;
}

.modal-kicker {
  font-size: .58rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .45rem;
}

.modal-form-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}

.modal-field label {
  display: block;
  color: var(--gold-light);
  font-size: .65rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: .42rem;
}

.modal-save-btn {
  width: 100%;
  margin-top: 1.15rem;
  clip-path: none;
  border-radius: 3px;
}

/* ============================================================
   Manual cleanup classes for remaining PHP inline styles
   ============================================================ */
.qr-img {
  max-width: 220px;
  width: 100%;
  border: 3px solid var(--gold);
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  display: block;
  margin: 0 auto;
}

.schedule-card-rel {
  position: relative;
}

.staff-btn-sm-full {
  width: 100%;
  margin-top: .8rem;
  font-size: .6rem;
  padding: .35rem;
}

.sac-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.sac-edit-btn {
  border-color: var(--gold);
  color: var(--gold);
  margin-top: .8rem;
}

.staff-btn-xs {
  font-size: .6rem;
  padding: .3rem .7rem;
}

.staff-btn-xs-tight {
  font-size: .6rem;
  padding: .25rem .6rem;
}

.btn-danger-xs {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.btn-danger-xs-tight {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.btn-danger-sm {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.status-badge {
  font-size: .62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .2rem .7rem;
  border-radius: 3px;
  display: inline-block;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5);
}

.status-pending {
  background: rgba(245, 158, 11, .15);
  color: #fcd34d;
}

.status-completed,
.status-prayed,
.status-active,
.status-approved {
  background: rgba(16, 185, 129, .15);
  color: #6ee7b7;
}

.status-rejected,
.status-deactivated,
.status-suspended {
  background: rgba(239, 68, 68, .15);
  color: #fca5a5;
}

.dash-stat-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 3px solid var(--gold);
  padding: 1.5rem 1.4rem;
}

.dash-tab-btn,
.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, .42);
  font-family: inherit;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .75rem 1.4rem .85rem;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: -2px;
  white-space: nowrap;
}

.admin-tab-btn {
  padding: .8rem 1.25rem;
}

.dash-tab-btn.active,
.admin-tab-btn.active {
  border-bottom-color: var(--gold);
  color: var(--gold-light);
}

.row-hover {
  transition: background .15s;
}

.row-hover-click {
  transition: background .15s;
  cursor: pointer;
}

.dash-select-mini {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
  padding: .3rem .5rem;
  font-family: inherit;
  font-size: .65rem;
  border-radius: 3px;
  cursor: pointer;
}

.admin-action-btn {
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
}

.admin-delete-btn {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .3);
  color: #fca5a5;
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .2s;
}



/* =========================================================
   FINAL MOBILE / TABLET NAVBAR FIX
   Fixes:
   - hamburger not clickable after one use
   - mobile menu overlapping navbar
   - mobile menu too tall/fullscreen
   - wrong z-index layering
   ========================================================= */

@media (max-width: 920px) {
  nav#navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--nav-h) !important;
    z-index: 10050 !important;
    pointer-events: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 1rem !important;
  }

  nav#navbar .nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
    flex: 1 !important;
    pointer-events: auto !important;
  }

  nav#navbar .nav-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  nav#navbar .nav-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    display: block !important;
  }

  nav#navbar .nav-title {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    min-width: 0 !important;
  }

  nav#navbar .nav-title span {
    margin-top: 0.15rem !important;
    font-size: 0.46rem !important;
    letter-spacing: 1.4px !important;
  }

  nav#navbar .nav-links {
    display: none !important;
  }

  nav#navbar .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    position: relative !important;
    z-index: 10060 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .mobile-menu {
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    display: none !important;
    flex-direction: column !important;

    width: 100% !important;
    height: auto !important;
    max-height: 55vh !important;

    z-index: 10040 !important;
    pointer-events: none !important;

    background: rgba(10, 28, 18, 0.98) !important;
    padding: 1rem 1.25rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    border-top: 2px solid var(--gold) !important;
    border-bottom: 2px solid var(--gold) !important;
  }

  .mobile-menu.open {
    display: flex !important;
    pointer-events: auto !important;
    animation: slideDown 0.25s ease !important;
  }

  .mobile-menu-header {
    text-align: center !important;
    font-size: 0.62rem !important;
    letter-spacing: 4px !important;
    padding-bottom: 0.8rem !important;
    margin-bottom: 0.4rem !important;
    color: var(--gold) !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.25) !important;
  }

  .mobile-menu a {
    width: 100% !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    font-size: 0.85rem !important;
    letter-spacing: 2px !important;

    color: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.16) !important;

    pointer-events: auto !important;
    cursor: pointer !important;
  }

  .mobile-menu a:hover,
  .mobile-menu a.active {
    color: var(--gold-light) !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 480px) {
  :root {
    --nav-h: 58px;
  }

  nav#navbar {
    padding: 0 0.75rem !important;
  }

  nav#navbar .nav-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  nav#navbar .nav-title {
    font-size: 0.68rem !important;
  }

  nav#navbar .nav-title span {
    font-size: 0.4rem !important;
    letter-spacing: 1.2px !important;
  }

  nav#navbar .hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .mobile-menu {
    max-height: 50vh !important;
    padding: 0.9rem 1rem !important;
  }

  .mobile-menu a {
    min-height: 44px !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   HAMBURGER NAV — DEFINITIVE CROSS-DEVICE FIX
   Overrides all previous nav rules. Works on:
   iOS Safari 12+, Chrome Android, Samsung Browser, Firefox Mobile,
   tablets (iPad, Android tablet), desktop browsers.
   All rules use !important to win over any earlier declarations.
   ============================================================ */

/* ── 1. Base hamburger: hidden on desktop ─────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  min-width: 46px;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid rgba(201, 162, 39, 0.5);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  /* Critical for touch devices */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Ensure button is always above everything */
  position: relative;
  z-index: 10100;
  pointer-events: auto;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  transition: transform 0.32s ease, opacity 0.32s ease;
  pointer-events: none;
  /* spans must not intercept taps */
}

/* Animated X state */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 2. Mobile menu: hidden by default ────────────────────── */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h);
  bottom: auto;
  width: 100%;
  max-height: 60vh;
  background: rgba(10, 28, 18, 0.99);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 0.9rem 1.2rem 1.2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 10040;
  pointer-events: none;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

.mobile-menu.open {
  display: flex !important;
  pointer-events: auto !important;
  animation: navSlideDown 0.22s ease forwards;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu header label */
.mobile-menu-header {
  font-size: 0.6rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  padding-bottom: 0.75rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
  text-align: center;
}

/* Menu links */
.mobile-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 0.7rem 0.5rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(201, 162, 39, 0.14) !important;
  text-decoration: none !important;
  /* Critical for reliable tap on all mobile browsers */
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(201, 162, 39, 0.12) !important;
  transition: color 0.2s, background 0.2s !important;
}

.mobile-menu a:last-child {
  border-bottom: none !important;
}

.mobile-menu a:hover,
.mobile-menu a:active,
.mobile-menu a.active {
  color: var(--gold-light) !important;
  background: rgba(201, 162, 39, 0.08) !important;
}

/* ── 3. Show hamburger on mobile/tablet (≤ 920px) ─────────── */
@media (max-width: 920px) {
  nav#navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--nav-h) !important;
    z-index: 10050 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 1rem !important;
    /* Prevent any child from being hidden */
    overflow: visible !important;
  }

  nav#navbar .nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  nav#navbar .nav-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-shrink: 0 !important;
  }

  nav#navbar .nav-title {
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  nav#navbar .nav-title span {
    font-size: 0.48rem !important;
    letter-spacing: 1.5px !important;
  }

  /* Hide desktop links */
  nav#navbar .nav-links {
    display: none !important;
  }

  nav#navbar .nav-user-wrap {
    display: none !important;
  }

  /* Show hamburger */
  nav#navbar .hamburger {
    display: flex !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex-shrink: 0 !important;
    /* Ensure it sits above everything including overlays */
    position: relative !important;
    z-index: 10100 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* ── 4. Small phones (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-h: 58px;
  }

  nav#navbar {
    padding: 0 0.75rem !important;
  }

  nav#navbar .nav-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  nav#navbar .nav-title {
    font-size: 0.72rem !important;
  }

  nav#navbar .nav-title span {
    font-size: 0.42rem !important;
    letter-spacing: 1.2px !important;
  }

  nav#navbar .hamburger {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .mobile-menu {
    max-height: 65vh;
    padding: 0.75rem 1rem 1rem;
  }

  .mobile-menu a {
    min-height: 48px !important;
    font-size: 0.82rem !important;
  }
}

/* ── 5. Very small phones (≤ 360px) ───────────────────────── */
@media (max-width: 360px) {
  nav#navbar .nav-title span {
    display: none !important;
  }

  nav#navbar .nav-title {
    font-size: 0.68rem !important;
  }

  nav#navbar .nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/* ── 6. Tablets (481px – 920px) ───────────────────────────── */
@media (min-width: 481px) and (max-width: 920px) {
  nav#navbar .nav-title {
    font-size: 0.85rem !important;
  }

  nav#navbar .nav-title span {
    font-size: 0.52rem !important;
  }

  .mobile-menu a {
    font-size: 0.92rem !important;
    min-height: 54px !important;
    letter-spacing: 2.5px !important;
  }
}

/* ── 7. Safe-area support (iPhone notch / Dynamic Island) ─── */
@supports (padding-top: env(safe-area-inset-top)) {
  nav#navbar {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .mobile-menu {
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
  }
}

/* ============================================================
   8. DASHBOARDS (Parishioner, Staff, Admin)
   ============================================================ */
/* Parishioner Dashboard Layout */
.par-dash-wrap {
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 4rem;
  background: linear-gradient(160deg, #0d2418 0%, #0a1f12 100%);
  min-height: 100vh;
}

.par-dash-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.par-dash-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
}

.par-dash-kicker {
  font-size: .58rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .5rem;
}

.par-dash-title {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: .3rem;
}

.par-dash-subtitle {
  color: rgba(255, 255, 255, .45);
  font-size: .8rem;
}

.par-dash-role {
  color: var(--gold-light);
}

.par-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.par-stat-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-top: 3px solid var(--gold);
  padding: 1.5rem 1.4rem;
}

.par-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
  margin-bottom: .4rem;
}

.par-stat-label {
  font-size: .62rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}

.par-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .08);
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.par-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, .42);
  font-family: inherit;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .75rem 1.4rem .85rem;
  cursor: pointer;
  transition: all .2s;
  margin-bottom: -2px;
  white-space: nowrap;
}

.par-tab.active {
  border-bottom-color: var(--gold);
  color: var(--gold-light);
}

.par-tab-count {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  padding: .1rem .5rem;
  border-radius: 2px;
  font-size: .65rem;
  margin-left: .4rem;
  font-weight: 400;
}

.par-panel {
  display: none;
  animation: fadeUp .3s ease;
}

.par-panel.active {
  display: block;
}

.par-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(255, 255, 255, .25);
  font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, .06);
}

.par-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: rgba(201, 162, 39, .3);
}

/* Legend & Status */
.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-bottom: 1.2rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 3px;
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .35rem;
  flex-shrink: 0;
}

.status-pill {
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
}

/* Modals */
.par-detail-modal {
  background: linear-gradient(160deg, #0e2617, #1a4a2e);
  border-top: 4px solid var(--gold);
  width: 100%;
  max-width: 660px;
  margin: auto;
  position: relative;
  max-height: 88vh;
  overflow-y: auto;
  animation: fadeUp .3s ease;
}

.par-detail-header {
  background: rgba(0, 0, 0, .2);
  padding: 1.4rem 1.8rem 1.2rem;
  border-bottom: 1px solid rgba(201, 162, 39, .15);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.par-detail-kicker {
  font-size: .58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .3rem;
}

.par-detail-title {
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
}

.par-detail-body {
  padding: 1.5rem 1.8rem 2rem;
}

.detail-status-banner {
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.detail-status-text {
  font-size: .8rem;
  color: rgba(255, 255, 255, .65);
  font-style: italic;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-bottom: 1.5rem;
}

.detail-meta-item {
  background: rgba(255, 255, 255, .04);
  padding: .9rem 1rem;
  border-left: 3px solid var(--gold);
}

.detail-meta-key {
  font-size: .58rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}

.detail-meta-val {
  color: #fff;
  font-size: .85rem;
}

.detail-section-label {
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: .7rem;
}

.detail-table-wrap {
  overflow-x: auto;
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 1.5rem;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-td-label {
  padding: .6rem .9rem;
  color: rgba(255, 255, 255, .4);
  font-size: .68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.detail-td-val {
  padding: .6rem .9rem;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.detail-intention-text {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 1rem 1.1rem;
  color: rgba(255, 255, 255, .84);
  font-size: .9rem;
  line-height: 1.85;
  white-space: pre-wrap;
  margin-bottom: 1.5rem;
}

.detail-note {
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 1.2rem;
}

/* Responsive Dashboards (Cards & Tables) */
.dash-table-wrap {
  overflow-x: auto;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.dash-table thead tr {
  background: rgba(201, 162, 39, .06);
}

.dash-table th {
  padding: .7rem 1rem;
  text-align: left;
  font-size: .6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  border-bottom: 2px solid rgba(201, 162, 39, .2);
  white-space: nowrap;
}

.dash-table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
}

.dash-table tr {
  transition: background .15s;
}

.dash-table tbody tr:hover {
  background: rgba(255, 255, 255, .03);
}

/* Parishioner Request Cards (Desktop hide, Mobile show) */
.par-cards {
  display: none;
  gap: 1rem;
  flex-direction: column;
}

.par-request-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-left: 3px solid var(--gold);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.par-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.par-card-type {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .2rem;
}

.par-card-date {
  color: rgba(255, 255, 255, .4);
  font-size: .75rem;
}

.par-card-meta {
  color: rgba(255, 255, 255, .6);
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.par-card-excerpt {
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  line-height: 1.5;
  font-style: italic;
}

.par-card-status-msg {
  background: rgba(0, 0, 0, .2);
  padding: .7rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .5);
  border-radius: 3px;
}

.par-view-btn {
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  color: var(--gold-light);
  font-size: .65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: all .2s;
}

.par-tbl-btn {
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
  color: var(--gold-light);
  font-size: .62rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: .32rem .75rem;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}

/* Responsive adjustments */
@media (max-width: 920px) {

  /* Switch Parishioner Desktop Tables to Mobile Cards */
  .par-table-wrap {
    display: none;
  }

  .par-cards {
    display: flex;
  }
}

@media (max-width: 768px) {

  /* Convert generic dash tables into cards on small screens */
  .dash-table thead {
    display: none;
  }

  .dash-table,
  .dash-table tbody,
  .dash-table tr,
  .dash-table td {
    display: block;
    width: 100%;
  }

  .dash-table tr {
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 4px;
    border-left: 3px solid var(--gold);
  }

  .dash-table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .03);
  }

  .dash-table td:last-child {
    border-bottom: 0;
  }

  .dash-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    width: 45%;
    text-align: left;
    font-size: .6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Make sure select boxes and buttons flow well in card view */
  .dash-table td .dash-action-btn,
  .dash-table td .dash-delete-btn,
  .dash-table td select {
    width: 100%;
    margin-top: .3rem;
    text-align: center;
  }

  .dash-table td>div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .par-dash-container,
  .u-st-369e344f {
    padding: 0 1rem;
  }

  .par-detail-modal {
    padding: 0;
  }
}

@media (max-width: 480px) {

  .par-stat-grid,
  .u-st-0a0e29b3,
  .u-st-e2bbdab2 {
    grid-template-columns: 1fr;
  }

  .par-dash-wrap {
    padding-top: calc(var(--nav-h) + 1.5rem);
  }
}

/* ============================================================
   9. PAST EVENTS & ANNOUNCEMENT IMAGES
   ============================================================ */
.past-events-section {
  max-width: 1100px;
  margin: 3rem auto;
}

.past-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.past-event-card {
  background: var(--white);
  border: 1px solid rgba(26, 74, 46, 0.1);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.past-event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 74, 46, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.past-event-img-wrap {
  position: relative;
  width: 100%;
  padding-top: 60%;
  /* 5:3 aspect ratio */
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid var(--gold);
}

.past-event-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.past-event-card:hover .past-event-img {
  transform: scale(1.05);
}

.past-event-img-count {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  font-weight: 700;
  letter-spacing: 1px;
}

.past-event-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.past-event-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.past-event-badge {
  background: rgba(201,162,39,.1);
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
}

.past-event-date {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.past-event-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: var(--green-dark);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.past-event-desc {
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.past-event-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(26, 74, 46, 0.1);
}

.past-event-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(201, 162, 39, 0.1);
  color: var(--gold-light);
  border: 1px solid rgba(201, 162, 39, 0.3);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  text-align: center;
}

.past-event-view-btn:hover {
  background: rgba(201, 162, 39, 0.2);
  border-color: rgba(201, 162, 39, 0.5);
}

.past-events-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(201, 162, 39, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
}

/* Announcement Images Layout */
.ann-body img,
.ann-featured-text img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: block;
  border: 1px solid rgba(201, 162, 39, 0.15);
}

.ann-body figure,
.ann-featured-text figure {
  margin: 1.2rem 0;
  text-align: center;
}

.ann-body figure img,
.ann-featured-text figure img {
  margin: 0 auto;
}

.ann-featured {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .ann-featured {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }

  .ann-featured-text {
    flex: 1;
  }

  .ann-featured-text img {
    max-width: 450px;
    float: right;
    margin: 0 0 1.5rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .past-events-grid {
    grid-template-columns: 1fr;
  }

  .ann-body img,
  .ann-featured-text img {
    margin: 1rem auto;
    width: 100%;
  }
}

/* ============================================================
   10. PAST EVENT MODALS (PUBLIC VIEW & STAFF EDIT)
   ============================================================ */
/* Public View Modal */
.pe-view-modal {
  background: var(--white);
  border-radius: 8px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease;
  position: relative;
  text-align: left;
}

.pe-view-header {
  padding: 1.5rem 2rem;
  background: rgba(26, 74, 46, 0.03);
  border-bottom: 1px solid rgba(26, 74, 46, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.pe-view-kicker {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.pe-view-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--green-dark);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.pe-view-date {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
}

.pe-view-body {
  padding: 0;
  overflow-y: auto;
  flex-grow: 1;
}

.pe-view-desc {
  padding: 2rem;
  background: #fff;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.7;
}

.pe-view-desc-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #9ca3af;
  margin-bottom: 1rem;
  font-weight: 700;
}

.pe-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3px;
  background: #f3f4f6;
}

.pe-gallery-item {
  position: relative;
  padding-top: 75%;
  cursor: pointer;
  overflow: hidden;
  background: #e5e7eb;
}

.pe-gallery-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.pe-gallery-item:hover img {
  transform: scale(1.05);
}

.pe-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #fff;
  padding: 1.5rem 1rem 0.5rem;
  font-size: 0.75rem;
  pointer-events: none;
  line-height: 1.3;
}

.pe-gallery-loading, .pe-gallery-empty {
  padding: 3rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Lightbox */
.pe-lightbox {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pe-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.pe-lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 45px; height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
}

.pe-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.pe-lightbox-prev, .pe-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 2;
}

.pe-lightbox-prev { left: 1rem; }
.pe-lightbox-next { right: 1rem; }

.pe-lightbox-prev:hover, .pe-lightbox-next:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-50%) scale(1.1);
}

.pe-lightbox-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#peLightboxImg {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.pe-lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  letter-spacing: 2px;
  font-weight: 600;
}

/* Staff Admin UI */
.pe-existing-grid, .pe-new-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-top: 0.8rem;
}

.pe-existing-thumb, .pe-new-thumb {
  position: relative;
  padding-top: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.pe-existing-thumb img, .pe-new-thumb img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
}

.pe-existing-del {
  position: absolute;
  top: 5px; right: 5px;
  background: rgba(220, 38, 38, 0.95);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.pe-existing-del:hover {
  background: rgb(185, 28, 28);
  transform: scale(1.1);
}

.pe-new-thumb-name {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 0.6rem;
  padding: 0.3rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
  .pe-view-header {
    padding: 1.2rem;
    flex-direction: column;
  }
  .pe-view-title {
    font-size: 1.4rem;
  }
  .pe-view-desc {
    padding: 1.5rem;
  }
  .pe-gallery {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .pe-lightbox-prev, .pe-lightbox-next {
    width: 40px; height: 40px; font-size: 1.5rem;
  }
  .pe-lightbox-close {
    top: 1rem; right: 1rem;
    width: 35px; height: 35px;
    font-size: 1.2rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   READER MODAL STYLES
   ───────────────────────────────────────────────────────────── */
.reader-modal-inner {
  background: var(--cream, #fdfbf7) !important;
  color: #333 !important;
  text-align: left !important;
  border-top: 4px solid var(--gold);
  max-width: 650px;
  padding: 3rem 2.5rem;
}

.reader-modal-inner .modal-close {
  color: #888;
}

.reader-modal-inner .modal-close:hover {
  color: #333;
}

.reader-meta {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  color: #666;
}

.reader-meta-badge {
  background: var(--gold);
  color: var(--green-dark);
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.reader-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem !important;
  color: var(--green-dark) !important;
  line-height: 1.3;
  margin-bottom: 1.5rem !important;
}

.reader-body {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

.reader-priest {
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.reader-gospel-quote {
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.8;
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: #222;
}