/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
    line-height: 1.6;
    color: #1c1e21;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    display: flex; /* Apply the two-column flex layout here */
    flex: 1; /* This is crucial: it makes the main content fill all available space */
}


.column {
    flex: 1 1 50%;
    min-width: 0;
    padding: 2rem; /* Adds some nice spacing inside each column */
    text-align: center; /* Example: centers the text in the columns */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #D3BFB6;
}

.column:nth-child(2) {
    background-color: #C0D8E0;
}

h1 {
    display: hidden;
}

.column h2.fire, .column h2.water {
    /* Sets a minimum height to ensure both titles take up the same space,
       even if one wraps to a second line. Adjust the value as needed. */
    min-height: 3.5em;
}

footer {
  background-color: #fbf9f3;
  color: #2c2a2e;
  padding: 2rem;
  
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

footer img {
	max-width: 15%;
}

footer .footer_column {
  width: auto !important;
  flex: none !important;
  min-width: 0;
  text-align: left;
}

footer .footer_column:nth-child(2) {
  text-align: right;
}

/* Right-align bullets + text in the 2nd footer column */
footer .footer_column:nth-child(2) ul {
  text-align: right;           /* right-align the text */
  list-style-position: inside; /* pull the bullet into the text block */
  padding-inline-start: 0;     /* remove the default left padding */
  margin: 0;                   /* optional: tidy spacing */
}

/* Ensure nested lists match the same alignment */
footer .footer_column:nth-child(2) ul ul {
  text-align: right;
  list-style-position: inside;
  padding-inline-start: 0;
  margin-inline-start: 0;
}


h2 {
    color: #333;
}

img {
	width: 40%;
}

.logo-container {
	min-height: 145px;
	display: flex;
	align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .column img {
        width: 70%;
    }
    h2 {
    	font-size: 1.33rem;
    }
    h3 {
    	font-size: 1.125rem;
    }
}

a {
    /* Standard property to break long words/URLs */
    overflow-wrap: break-word;

    /* Alternative property for broader compatibility */
    word-break: break-word;
}

/* General CTA Button Styling */
.cta-button {
    display: inline-block;
    padding: 10px 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Shin-colored Button (Deep Red) */
.church-button {
    background-color: #8B0000;
    color: white;
    border: 2px solid #A52A2A;
}

.church-button:hover {
    background-color: #A52A2A; /* Slightly Lighter Red */
    border-color: #C04040;
    transform: scale(1.05); /* Slight Pop Effect */
}

/* Mem-colored Button (Soft Blue) */
.school-button {
    background-color: #4682B4;
    color: white;
    border: 2px solid #5A9BD4;
}

.school-button:hover {
    background-color: #5A9BD4; /* Slightly Brighter Blue */
    border-color: #7BB3E3;
    transform: scale(1.05); /* Slight Pop Effect */
}

.divine {
	font-weight: bold;
  	font-variant: small-caps;
}

.fire {
	color: #A30000;
}

.water {
	color: #00509E;
}

@keyframes breath {
  0% {
    color: #A30000; /* deep red */
  }
  50% {
    color: #00509E; /* soft blue */
  }
  100% {
    color: #A30000; /* deep red */
  }
}

.logoscript {
  font-weight: bold;
  font-variant: small-caps;
  animation: breath 6s infinite ease-in-out;
  transition: color 1s ease;
  /*text-shadow: 0 0 2px #1e6091, 0 0 4px #8b0000;*/
}

@media (prefers-color-scheme: dark) {
    /* --- Main Backgrounds --- */
    body {
        background: linear-gradient(to right, #2a2725 50%, #262a33 50%);
        color: #d4d4d4; /* Update default text color */
    }
    
    .column {
   		background-color: #2a2725;
	}
    
    .column:nth-child(2) {
   		background-color: #262a33;
	}
	
	 footer {
    /* rich, low-glare background + clear separation from main content */
    background: linear-gradient(180deg, #0f1014 0%, #111319 100%);
    color: #e8eaf0;
    border-top: 1px solid #2a2d34;
  }

  /* Headings inside the footer */
  footer h4 {
    color: #f2f3f7;
    letter-spacing: 0.02em;
  }

  /* Body copy and lists inherit the footer color */
  footer .footer_column,
  footer .footer_column ul,
  footer .footer_column li {
    color: inherit;
  }

  /* Links: clear default + hover/focus states */
  footer a {
    color: #cfd6ff;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
  }
  footer a:hover {
    color: #e7eaff;
  }
  footer a:focus-visible {
    outline: 2px solid #7f8cff;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Keep your theme colors but brighten slightly for contrast */
  footer a.fire { color: #ff7a7a; }
  footer a.fire:hover { color: #ff9a9a; }
  footer a.water { color: #9ccaff; }
  footer a.water:hover { color: #b8d7ff; }

    /* --- Thematic Text Colors --- */
    .fire {
        color: #ff5757;
    }

    .water {
        color: #5dadec;
    }

    /* --- Buttons --- */
    .church-button {
        background-color: #A30000;
        border-color: #C04040;
    }

    .school-button {
        background-color: #5A9BD4;
        border-color: #7BB3E3;
    }
    
    /* --- Animated Text --- */
    @keyframes breath-dark {
      0% { color: #ff5757; }
      50% { color: #5dadec; }
      100% { color: #ff5757; }
    }

    .logoscript {
      animation-name: breath-dark;
    }
}