/*
  TLC Ministry Light Theme Stylesheet

  This stylesheet defines a light, friendly look for the TLC Ministry site.
  The palette uses pale blues, whites and teals to convey openness and
  optimism.  Elements are spaced generously and cards cast soft shadows.
  The top navigation is sticky so it remains visible as visitors scroll.
*/

:root {
  /* Colour palette */
  --bg: #f7f9fc;
  --alt-bg: #ffffff;
  --primary: #2a8ecf;
  --primary-light: #3d9dd8;
  --highlight: #2db18b;
  --highlight-light: #37c9a0;
  --text: #333333;
  --heading: #111111;
  --muted: #555555;
  --card-bg: #ffffff;
  --info-bg: #f1f6fb;
  --border: #e0e6ee;
  --btn-bg: var(--primary);
  --btn-hover: var(--primary-light);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--primary);
  --btn-secondary-hover: rgba(42, 142, 207, 0.1);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
  color: var(--muted);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 0;
}

.section {
  padding: 4rem 0;
}

.section.alt {
  background: var(--alt-bg);
}

/* Header */
.site-header {
  background: var(--alt-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 80px;
  height: auto;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--primary);
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-list li a {
  color: var(--text);
  font-weight: 500;
  padding: 0.5rem;
  transition: color 0.2s ease;
}

.nav-list li a:hover,
.nav-list li a:focus {
  color: var(--primary);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-cta {
  background: var(--btn-bg);
  color: #ffffff;
}

.btn-cta:hover {
  background: var(--btn-hover);
  color: #ffffff;
}

.btn-secondary {
  border: 2px solid var(--btn-secondary-border);
  color: var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover);
}

.btn.small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Hero */
.hero {
  background: var(--secondary-bg, #e7f1fb);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 2rem;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-text .lead {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.hero-text .mission {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.hero-image {
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.card h3 {
  color: var(--primary);
  margin-bottom: 0.75rem;
}

/* Membership grid */
.membership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.member-card {
  background: var(--card-bg);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.member-card .price {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.member-card .price span {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Donate section */
.donate-section {
  background: var(--info-bg);
}

.donate-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
}

.donate-left {
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.donate-right {
  padding: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.micro {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Info boxes */
.info-box {
  background: var(--info-bg);
  border-left: 4px solid var(--primary);
  padding: 1.5rem;
  border-radius: 1rem;
  margin-top: 1rem;
}

.info-box h3 {
  margin-top: 0;
  color: var(--primary);
}

/* Two column layout */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Footer */
.site-footer {
  background: var(--alt-bg);
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  color: var(--muted);
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.foot-logo {
  width: 60px;
  height: auto;
}

.foot-nav a {
  margin-right: 1rem;
  color: var(--text);
  font-weight: 500;
}

.foot-nav a:hover {
  color: var(--primary);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .nav-list {
    gap: 1rem;
  }
}