/* --- Warning Banner Specific Styling (for stylesheet connection test) --- */

/* Page container styles (from previous global styles, assuming these are still here) */
.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

/* All of My Background Colors */

/* --- Celestial Page Background Styling Option --- */
.celestial-gradient { /* a body background color option */
  height: 100%;
  margin: 0;
  padding: 0;
  background: radial-gradient(#A7C7E7, #FFFFFF, #D6C3E8); /* Celestial gradient */
}

/* --- Sunset Page Background Styling Option --- */

.sunset-gradient {
  height:100%;
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top,  #FFB347, #FF7E5F, #6A0572);
  /* Sunset gradient: golden peach to twilight plum */
}

/* --- Spring Light Page Background Styling Option --- */

.springlight-gradient {
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, /* Starts the sweep from the center*/
    #00FA9A, /* Spring Green */
    #FFFFFF, /* Flat White */
    #7FFFDA  /* Aquamarine Green */
  );
  
}

/* --- Party Zone Page Background Styling Option --- */

.party-zone {
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
}

/* --- Website Structures and Styling Options --- */

/* Universal arrow styles */
.arrow {
  position: fixed;
  transform: translate(-50%, -50%);
  color: blue;
  text-decoration: underline;
  font-size: 1.2em;
  z-index: 1000;
}

/* Left-middle */
.arrow-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

/* Right-middle */
.arrow-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* Top-middle */
.arrow-up {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom-middle */
.arrow-down {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.warning-banner .page-container {
    background-color: #FFFFFF;
}

.warning-banner h1.warning-text {
    font-family: 'Courier New', monospace; /* Added monospace fallback */
}

.warning-banner p.warning-text {
    font-family: 'Courier New', monospace;
}


#splash {
    background-color: #FFFFFF;
    /* Added min-height and flexbox for centering as discussed previously for proper border coverage */
    min-height: 220px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* church heading */
h1.splash {
    font-size: 3em;
    font-family: 'Courier New', monospace; /* Added monospace fallback */
}

/* --- About Section --- */
#about { /* Section container styles */
    background-color: #FFFFFF;
}

h1.about {
    font-family: 'Verdana', sans-serif;
    font-size: 2em;
}

#directory {
    background-color: #FFFFFF;
}

h1.directory {
    font-family: 'Verdana', sans-serif;
    font-size: 2em;
}

#history {
    background-color: #FFFFFF;
}

h1.history {
    font-family: 'Verdana', sans-serif;
    font-size: 2em;
}

/* --- Schedule Section --- */

#schedule {
  background-color: #FFFFFF;
  max-width: 900px;
  margin: 40px auto;
  padding: 20px 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

h1.schedule {
  font-size: 3em;
  font-family: 'Verdana', sans-serif;
}

/* --- Affiliated Ministries 🌸 Section --- */

#ministries {
    background-color: #FFFFFF;
}

h1.affiliated {
    font-size: 3em;
    font-family: 'Courier New', monospace;
}

#outreach {
    background-color: #FFFFFF;
}

h1.outreach {
    font-size: 2em;
    font-family: 'Verdana', sans-serif;
}

#media {
    background-color: #FFFFFF;
}

h1.media {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#music {
    background-color: #FFFFFF;
}

h1.music {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#health {
    background-color: #FFFFFF;
}

h1.health {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#intervention {
    background-color: #FFFFFF;
}

h1.intervention {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

/* --- Departments 🌅 Section --- */

#departments {
    background-color: #FFFFFF;
}

h1.departments {
    font-size: 3em;
    font-family: 'Courier New', monospace;
}

#mens {
    background-color: #FFFFFF;
}

h1.mens {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#womens {
    background-color: #FFFFFF;
}

h1.womens {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#teens {
    background-color: #FFFFFF;
}

h1.teens {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#youths {
    background-color: #FFFFFF;
}

h1.youths {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

/* --- Community Zones 🌿 Section --- */
#community-zone {
  background-color: #FFFFFF;
}

.community-zone {
  font-size: 1em;
  font-family: 'Verdana', monospace;
}

h1.community-zone {
  font-size: 3em;
  font-family: 'Courier New', monospace;
}

/* --- Interactive Zones 🏞 Section --- */
#interactive-zone {
    background-color: #FFFFFF;
}

h1.interactive-zone {
    font-size: 3em;
    font-family: 'Courier New', monospace; /* Added monospace fallback */
    /* Add your text-shadow here, e.g., text-shadow: 0 0 3px #FFFFFF; */
}


#newsletters {
    background-color: #FFFFFF;
}

h1.newsletters {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#gallery {
    background-color: #FFFFFF;
}

h1.gallery {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#broadcast {
    background-color: #FFFFFF;
}

h1.broadcast {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#investments {
    background-color: #FFFFFF;
}

h1.investments {
    font-size: 2em;
    font-family: 'Verdana', monospace;
}

#the-lab {
  background-color: #FFFFFF;
}

/* --- Feedback Zone 📣 Section --- */

#feedback { /* Section container styles */
    background-color: #F9F8F9;
    padding: 20px; /* Add some padding inside the section */
    margin-bottom: 30px; /* Space below the section */
    margin-top: 20px; /* Space from the text above it */
    border-radius: 8px; /* Match the rounded theme from the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.01); /* Subtle shadow for depth */
    /* display: block; is default for div, so it's not strictly necessary here unless overridden elsewhere */
}

form.feedback {
    background: #FFFFFF; /* Explicitly set background for the form itself */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow for form */
    border-radius: 8px; /* Match the rounded theme for the form */
    padding: 20px; /* Add padding inside the form container, crucial for internal spacing */
    /* display: block; is default for form, so it's not strictly necessary here unless overridden elsewhere */
    width: auto; /* Ensure it expands to available width, not fixed 100px */
}

form.feedback textarea {
    background: #FFFFFF; /* Explicitly set to white to prevent gray */
    border: 1px solid #ddd; /* CORRECTED: proper border syntax */
    border-radius: 8px; /* Match the rounded theme from the form */
    box-sizing: border-box; /* Crucial for width: 100% with padding/border */
    width: 100%; /* ADDED: This was missing for proper sizing */
    padding: 12px 15px; /* Added back padding for text area */
    margin-bottom: 15px; /* Space below text area */
    color: #222; /* Textarea color */
    font-family: inherit; /* Inherit font from body for consistency */
    font-size: 1em; /* Standard font size */
    line-height: 1.6; /* Good readability for text */
    resize: vertical; /* Allow vertical resizing only */
    min-height: 120px; /* Set a minimum height */
}

form.feedback textarea::placeholder {
    color: #999; /* Changed to a slightly darker gray for better visibility than #ddd */
    opacity: 1;
}

/* --- Interactive Zone 🏞 Section --- */

/* --- Gallery 🖼️ Section --- */

/* --- Broadcast 📡 Section --- */ 

/* --- Media Section --- */

/* --- Newsletters  📰 Section --- */

/* --- Investments 🌱  Section --- */

/* --- Feedback 📣 Section --- */

/* --- Navigation 🧭 Section --- */

/* --- Tech Team Zone ⚙️ Section--- */

#tech-team {
    background: #FFFFFF;
    border: 1px solid #ddd; /* CORRECTED: proper border syntax */
    border-radius: 8px; /* Match the rounded theme from the form */
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* ADDED: a subtle shadow */
    /* font-family and font-size below are for the h1, not the section div itself */
    /* font-family: 'Courier New'; */ /* Removed from here */
    /* font-size: 3em; */ /* Removed from here */
}

/* Styles for the h1 within the #tech-team section */
h1.tech-team {
    /* No background-color needed unless for a specific visual effect. */
    font-size: 3em;
    font-family: 'Courier New', monospace; /* Added monospace fallback */
    /* You may want to add 'color: #333;' or similar for the text color */
}

/* Hoverable church logo style */

.church-logo {
  width: 250px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba (0,0,0,0.1);
  transition: transform 0.3s ease;
}

.church-logo:hover {
  transform: scale(1.05); /* Slight lift on hover */
}

/* CREATE AN HOVERABLE IMAGE TO ACCESS THE TECH TEAM'S LOGIN PAGE! */

/* NAVIGATION MENU CSS SECTION */
/* Styles for website images */

/* --- Control Room Section --- */




/* --- ??? --- */

/* End of CSS Styling */