.elementor-57254 .elementor-element.elementor-element-31118bc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-57254 .elementor-element.elementor-element-af3ee55{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -20px) 0px;}.elementor-57254 .elementor-element.elementor-element-af3ee55.elementor-element{--align-self:center;}.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-57254 .elementor-element.elementor-element-31118bc{--content-width:100vw;}}/* Start custom CSS for html, class: .elementor-element-19ea7bb *//* --- Color Palette & Font Variables --- */
:root {
  --bg-ivory: #fcf9f4;
  --maroon-primary: #5c0f1e;
  --maroon-dark: #450914;
  --gold-primary: #c8963e;
  --gold-light: #f4d078;
  --text-navy: #1a1b2f;
  --text-brown: #7a5c2f;
  --font-serif: 'Cinzel', 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', 'Helvetica Neue', sans-serif;
}

/* --- General Header Reset --- */
/* --- Updated General Header Reset (Forces 100% Screen Width) --- */
/* --- Updated General Header Reset (Forces 100% Screen Width) --- */
.parish-header {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  z-index: 9999;
  box-sizing: border-box;
  font-family: var(--font-sans);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- Top Branding Bar --- */
.top-brand-bar {
  background-color: var(--bg-ivory);
  /* Optional: Add subtle texture background image here */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
  border-bottom: 2px solid rgba(200, 150, 62, 0.3);
  flex-wrap: wrap;
  gap: 20px;
}

.brand-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.church-logo {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-primary);
  padding: 2px;
  background: #fff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.church-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-navy);
  margin: 0;
  letter-spacing: 1px;
}

.church-tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}

.tagline-text {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 3px;
  color: var(--text-brown);
  font-weight: 600;
}

.line-decorator {
  height: 1px;
  background-color: var(--gold-primary);
  flex-grow: 1;
}

.tagline-cross {
  color: var(--gold-primary);
  font-size: 1.1rem;
  align-self: center;
  margin-top: 2px;
}

/* --- Right Quote Section --- */
.brand-right {
  max-width: 380px;
}

.header-quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-brown);
}

.quote-mark {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  line-height: 0.8;
  color: var(--gold-light);
  font-weight: bold;
}

.quote-text p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0 0 4px 0;
  line-height: 1.4;
  color: var(--text-navy);
}

.quote-text cite {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-brown);
  display: block;
  text-align: right;
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-af3ee55 *//* --- Apply Maroon Background & Gold Border to the Menu Bar --- */
.elementor-57254 .elementor-element.elementor-element-af3ee55 {
  /* Brightened the left side of the gradient slightly so it doesn't look flat on dark screens */
  background: linear-gradient(to right, #6b1223, #450914);
  border-bottom: 3px solid #c8963e;
  width: 100%;
}

/* --- Style the Menu Items (Desktop) --- */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--main .elementor-item {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem; /* Increased from 0.85rem for better desktop legibility */
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 16px 14px !important;
  transition: all 0.3s ease;
}

/* --- Hover & Active States --- */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--main .elementor-item:hover,
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #f4d078 !important;
  background-color: transparent !important;
}

/* --- Remove Elementor's Default Underline Pointer --- */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-item:before,
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-item:after {
  display: none !important;
}

/* --- Yellow Pill Button for Highlighted Items (e.g., Associations) --- */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--main li.highlighted .elementor-item {
  background-color: #f4d078 !important;
  color: #1a1b2f !important;
  border-radius: 20px;
  padding: 8px 20px !important;
  margin: 6px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Added shadow to make it pop */
  font-weight: 700;
}

.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--main li.highlighted .elementor-item:hover {
  background-color: #ffffff !important;
  color: #5c0f1e !important;
}


/* ==========================================
   MOBILE VISIBILITY & TOUCH FIXES
   ========================================== */

/* 1. Make the Hamburger Toggle Button Visible */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-menu-toggle {
  color: #ffffff !important; 
  background-color: rgba(200, 150, 62, 0.2) !important; /* Faint gold background */
  border: 1px solid #c8963e !important; /* Gold border to frame the button */
  border-radius: 6px;
  padding: 10px !important;
}

.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-menu-toggle:hover,
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-menu-toggle.elementor-active {
  background-color: #c8963e !important;
  color: #1a1b2f !important;
}

/* 2. Mobile Dropdown Menu Container */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--dropdown {
  background-color: #380710 !important; /* Slightly darker maroon for high contrast */
  border-top: 3px solid #c8963e !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Mobile Dropdown Items (Increased Touch Targets & Dividers) */
.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--dropdown a {
  color: #ffffff !important;
  font-size: 0.95rem !important;
  padding: 15px 20px !important; /* Taller padding for easier finger tapping */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Faint line between links */
}

.elementor-57254 .elementor-element.elementor-element-af3ee55 .elementor-nav-menu--dropdown a:hover {
  color: #f4d078 !important;
  background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle highlight when tapped */
}/* End custom CSS */