/* Transparent header over the banner, turning navy when scrolling. */
#site-header {
  --site-header-navy: #082b43;
  --site-header-height: 170px;
}
#site-header #master-header {
  background: transparent;
  box-shadow: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
#site-header #topnav-wrapper .topnav > a.active,
#site-header #topnav-wrapper .topnav-dropdown.active > .dropbtn,
#site-header #topnav-wrapper .topnav-dropdown.active > .dropbtn > a {
  color: #fff1b5 !important;
}
#site-header #master-header .master-brand > img {
  box-shadow: none;
}
@media (max-width: 760px) {
  #site-header #topnav-wrapper .topnav.responsive {
    background: linear-gradient(to bottom, transparent 0, transparent 98px, var(--site-header-navy) 98px);
  }
}

/* Shared parish branding, matching the supplied header reference. */
/* Let clicks through the transparent navigation layer to the logo below. */
#site-header #topnav-wrapper { pointer-events: none; border: 0; box-shadow: none; }
#site-header #topnav-wrapper a,
#site-header #topnav-wrapper button,
#site-header #topnav-wrapper .topnav-dropdown { pointer-events: auto; }

#site-header #topnav-wrapper .topnav > a:not(.icon),
#site-header #topnav-wrapper .topnav-dropdown > .dropbtn {
  font-family: Cambria, "Times New Roman", serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: normal;
  line-height: 1.35;
}
#site-header #topnav-wrapper .topnav-dropdown > .dropbtn > a {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
#site-header #topnav-wrapper .dropdown-content a {
  font-family: Cambria, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  padding: 12px 18px;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: normal;
  line-height: 1.5;
}

#site-header #topnav-wrapper .nav-quick-actions { align-items: center; }
#site-header #topnav-wrapper .nav-quick-actions > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 24px;
  font: 700 15px/1.2 "Segoe UI", Arial, sans-serif;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#site-header #topnav-wrapper .nav-quick-actions > a.quick-facebook {
  width: 46px;
  height: 46px;
  padding: 0;
}
#site-header #topnav-wrapper .quick-facebook svg { width: 15px; height: 26px; }
#site-header #topnav-wrapper .nav-quick-actions > a.quick-youtube {
  width: 46px;
  height: 46px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #ff0033;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
#site-header #topnav-wrapper .quick-youtube svg { display: block; width: 28px; height: 28px; }
#site-header #topnav-wrapper .nav-quick-actions > a:hover,
#site-header #topnav-wrapper .nav-quick-actions > a:focus-visible {
  background: #082b43;
  color: #fff;
  border-color: transparent;
  text-decoration: none;
}
#site-header #topnav-wrapper .nav-quick-actions > a:focus-visible {
  outline: 2px solid #e4b51e;
  outline-offset: 3px;
}

#site-header #master-header .master-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font: 400 36px/1.2 Cambria, "Times New Roman", serif;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

#site-header #master-header .master-brand:focus-visible {
  outline: 2px solid #e4b51e;
  outline-offset: 6px;
  border-radius: 4px;
}

#site-header #master-header .brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#site-header #master-header .brand-title {
  color: #fff;
  font: 400 36px/1.2 Cambria, "Times New Roman", serif;
  letter-spacing: normal;
}

#site-header #master-header .brand-subtitle {
  color: rgba(255, 255, 255, .9);
  font: 500 13.5px/1.5 "Segoe UI", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#site-header #master-header .master-brand > img {
  --site-logo-size: 145px;
  box-sizing: border-box;
  display: block;
  width: var(--site-logo-size) !important;
  height: var(--site-logo-size) !important;
  min-width: var(--site-logo-size);
  min-height: var(--site-logo-size);
  max-width: var(--site-logo-size);
  max-height: var(--site-logo-size);
  flex: 0 0 var(--site-logo-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 1200px) {
  #site-header #master-header .master-brand { gap: 11px; }
  #site-header #master-header .brand-copy { gap: 5px; }
  #site-header #master-header .brand-title { font-size: 25px; }
  #site-header #master-header .brand-subtitle { font-size: 11px; letter-spacing: .13em; }
  #site-header #master-header .master-brand > img {
    --site-logo-size: 84px;
  }
}

@media (max-width: 760px) {
  #site-header #master-header .master-brand { gap: 10px; }
  #site-header #master-header .brand-copy { gap: 3px; }
  #site-header #master-header .brand-title { font-size: 18px; }
  #site-header #master-header .brand-subtitle { font-size: 9px; letter-spacing: .09em; }
  #site-header #master-header .master-brand > img {
    --site-logo-size: 78px;
  }
}

body.site-header-overlay { height: auto; }
body.site-header-overlay #site-header { margin-bottom: calc(-1 * var(--site-header-height)); }
body.site-header-overlay #sub-header { width: 100% !important; margin: 0 !important; height: clamp(455px, 42vw, 682.5px) !important; }
#site-header.is-scrolled #master-header {
  background: var(--site-header-navy);
  box-shadow: inset 0 -3px 0 rgba(228,181,30,.8);
}
@media (max-width: 760px) {
  #site-header { --site-header-height: 98px; }
  body.site-header-overlay #sub-header { height: clamp(367.5px, 56.875svh, 525px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #site-header #master-header { transition: none; }
}

/* Compact shared navigation above a generous image banner. */
#site-header { --site-masthead-size: 170px; }
#site-header > #master-header {
  height: var(--site-masthead-size) !important;
  min-height: var(--site-masthead-size) !important;
}
#site-header > #topnav-wrapper {
  height: var(--site-masthead-size) !important;
  margin-top: calc(-1 * var(--site-masthead-size)) !important;
}
#site-header #topnav-wrapper .topnav { height: var(--site-masthead-size); }
@media (min-width: 761px) and (max-width: 1200px) {
  #site-header #master-header .master-brand { top: 16px; }
}
@media (max-width: 760px) {
  #site-header { --site-masthead-size: 98px; }
  #site-header #master-header .master-brand { top: 12px; }
  #site-header #topnav-wrapper .topnav > a.icon,
  #site-header #topnav-wrapper .topnav.responsive > a.icon { top: 27px; }
  #site-header #topnav-wrapper .topnav.responsive {
    height: auto !important;
    min-height: 98px;
    padding: 98px 0 8px !important;
  }
}

@media (min-width: 1201px) {
  #site-header #topnav-wrapper .nav-quick-actions { top: 28px; }
}

/* Fade a navy scrim into the photo for readable transparent-header text. */
#site-header::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% + 72px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,25,39,.64), rgba(4,25,39,.43) 65%, rgba(4,25,39,0));
  transition: opacity .2s ease;
}
#site-header.is-scrolled::before { opacity: 0; }
#site-header #master-header .brand-title,
#site-header #master-header .brand-subtitle,
#site-header #topnav-wrapper .topnav > a:not(.icon),
#site-header #topnav-wrapper .topnav-dropdown > .dropbtn > a {
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
#site-header #master-header .brand-subtitle { color: #fff; font-weight: 600; }
#site-header #topnav-wrapper .nav-quick-actions > .quick-contact {
  background: rgba(8,43,67,.4);
  border-color: rgba(255,255,255,.9);
}
@media (prefers-reduced-motion: reduce) {
  #site-header::before { transition: none; }
}

/* Larger main-menu labels, with spacing adapted to the available width. */
@media (min-width: 761px) {
  #site-header #topnav-wrapper .topnav > a:not(.icon),
  #site-header #topnav-wrapper .topnav-dropdown > .dropbtn {
    padding: 14px 12px;
    white-space: nowrap;
  }
}
@media (min-width: 761px) and (max-width: 1400px) {
  #site-header #topnav-wrapper .topnav > a:not(.icon),
  #site-header #topnav-wrapper .topnav-dropdown > .dropbtn {
    font-size: 18px;
    padding: 10px 9px;
  }
}
@media (max-width: 760px) {
  #site-header #topnav-wrapper .topnav > a:not(.icon),
  #site-header #topnav-wrapper .topnav-dropdown > .dropbtn { font-size: 20px; }
}

@media (min-width: 761px) {
  #site-header #topnav-wrapper .topnav > a:not(.icon),
  #site-header #topnav-wrapper .topnav > .topnav-dropdown,
  #site-header #topnav-wrapper .topnav-dropdown > .dropbtn { display: block !important; }
  #site-header #topnav-wrapper .topnav > a.icon { display: none !important; }
}

/* Give larger submenu labels room without extending beyond the viewport. */
#site-header #topnav-wrapper .dropdown-content {
  width: max-content;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
}
@media (min-width: 761px) {
  #site-header #topnav-wrapper .topnav > .topnav-dropdown:nth-of-type(n+4) > .dropdown-content {
    right: 0;
    left: auto;
  }
}
@media (max-width: 760px) {
  #site-header #topnav-wrapper .topnav.responsive .dropdown-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Use the same serif banner title throughout the site. */
body #sub-header .sub-header-text strong {
  font-family: Cambria, Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .015em;
}

/* Shared hero buttons across homepage, banners, and featured photos. */

body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta {
  display: inline-flex;
  background: #34734a;
  color: #fff;
  text-decoration: none;
  align-items: center;
  text-shadow: none;
  gap: 12px;
  min-height: 60px;
  margin: 0;
  padding: 8px 24px 8px 8px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font: 600 16px/1.4 "Segoe UI", Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(5,24,37,.2), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-icon {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  transition: background-color .22s ease, transform .22s ease;
}
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-mass .hero-cta-icon { background: rgba(8,43,67,.09); }
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-icon svg { display: block; width: 23px; height: 23px; }
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:hover,
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:focus-visible {
  transform: translateY(-3px);
  background: #082b43 !important;
  color: #fff !important;
  text-decoration: none;
  filter: none;
  box-shadow: 0 12px 26px rgba(5,24,37,.3);
}
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:hover .hero-cta-icon,
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:focus-visible .hero-cta-icon {
  background: rgba(255,255,255,.2);
  transform: rotate(-6deg);
}
body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 760px) {
  
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta { min-height: 52px; gap: 9px; padding: 7px 18px 7px 7px; font-size: 14px; }
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-icon { flex-basis: 36px; width: 36px; height: 36px; }
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-icon svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta,
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-icon { transition: none; }
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:hover,
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:focus-visible,
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:hover .hero-cta-icon,
  body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta:focus-visible .hero-cta-icon { transform: none; }
}

body :is(#home, #sub-header, #headline-album, .welcome-section) .hero-cta-mass { background: #f5c542; color: #082b43; }
body :is(#home, #sub-header, #headline-album, .welcome-section) .welcome-button { background: #082b43; }
body :is(#home, #sub-header, #headline-album, .welcome-section) .welcome-button:focus-visible { outline-color: #a47825; }