@import url(https://fonts.googleapis.com/css?family=Lato);

/* ================================================================= */
/* MODERN WIDE-CANVAS LAYOUT FRAMEWORK                               */
/* ================================================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background-color: #f6f5f1;
  font-family: Arial, Arial, sans-serif;
  font-size: 0.83em;
  color: #333333;
}

h1 { font-family: Arial; font-size: 1.5em; color: #333333; }
h2 { font-family: Arial; font-size: 1.17em; color: #333333; }
h3 { font-family: Arial; font-size: 1em; color: #333333; }

a { color: #729622; text-decoration: none; }
a:hover { color: #729622; }

/* BREAKS THE BOX CONSTRAINTS TO GO BEAUTIFULLY WIDE */
.theme-wrapper, 
.theme-viewport-wide, 
.theme-viewport-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: 0 !important;
}

/* WIDE PAGE CONTAINER FOR MODERN LAYOUT */
.theme-page {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* ================================================================= */
/* PROMISE LAND HEADER ENGINE - PERFECT RATIO & SLOW REVEAL          */
/* ================================================================= */
@keyframes headerSlowReveal {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

.theme-header {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
}

/* FIXED: Keeps your image proportioned perfectly without any stretching */
.theme-header-outer {
  background-image: url(/f/design/header-merged.png?_=1786448084) !important;
  background-size: contain !important; /* Preserves exact proportions of the banner graphics */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 26.66% !important; /* Mathematically matches your 1500x400 aspect ratio */
  display: block !important;
  
  /* Smooth 2-second slow fade reveal on entry */
  animation: headerSlowReveal 2s ease-out forwards !important;
}

.theme-header-inner {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: 100% !important;
}

/* ================================================================= */
/* HIGH-CLARITY MODERN NAVIGATION MENU INTERACTION RULES             */
/* ================================================================= */
ul.theme-menu-list { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  display: flex; 
  justify-content: center; 
  background: #8a743a; 
}

li.theme-menu-item { 
  list-style-type: none; 
}

a.theme-menu-link {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #ffffff !important;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background 0.3s ease;
}

a.theme-menu-link:hover,
li.theme-menu-item-on a.theme-menu-link {
  background: #735f2f !important;
  color: #ffffff !important;
}

span.theme-menu-content, span.theme-menu-after { background: none !important; padding: 0 !important; display: inline !important; }

/* ================================================================= */
/* INTERACTIVE 4-COLUMN MINISTRY BLOCKS SYSTEM                       */
/* ================================================================= */
.ministry-grid { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 20px; 
  width: 100%; 
  margin: 40px 0 10px 0; 
  box-sizing: border-box; 
}

.ministry-card { 
  flex: 1; 
  min-width: 250px; 
  background: #ffffff; 
  border: 1px solid #4a0e17; /* UPDATED: Changed card bracket border to BURGUNDY */
  border-radius: 6px; 
  text-decoration: none !important; 
  color: #333333 !important; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* FIXED FOR CHROME & FIREFOX VISUAL UNITY */
.card-image-wrapper { 
  width: 100%; 
  height: auto !important; 
  overflow: hidden; 
  background-color: #4a0e17; /* UPDATED: Changed image placeholder background to BURGUNDY */
}

/* FIXED FOR CHROME: Max-width forces Chrome to restrain the graphic to the box width */
.interactive-img { 
  width: 100% !important; 
  max-width: 100% !important; 
  height: auto !important; 
  display: block;
  filter: grayscale(100%); 
  transition: filter 0.4s ease, transform 0.4s ease; 
}

.card-info { 
  padding: 16px; 
  text-align: center; 
  flex-grow: 1; 
}

.card-info h3 { 
  margin: 0 0 8px 0; 
  font-size: 16px; 
  font-weight: bold; 
  color: #8a7322; 
}

.card-info p { 
  margin: 0; 
  font-size: 13px; 
  line-height: 1.5; 
  color: #666666; 
}

.ministry-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 12px 24px rgba(74, 14, 23, 0.15); /* UPDATED: Changed hover shadow hue to Burgundy tint */
}

.ministry-card:hover .interactive-img { 
  filter: grayscale(0%); 
  transform: scale(1.05); 
}

@media screen and (max-width: 992px) { .ministry-grid { display: grid; grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 568px) { .ministry-grid { grid-template-columns: 1fr; } }