/* =====================================================================
   Trinity Lutheran Church — Custom Theme
   Built on Bootstrap 5
   Brand palette: maroon, white, black, gray
   ===================================================================== */

/* ----------  Design Tokens  ---------- */
:root {
  /* Brand palette */
  --tlc-maroon:       #841424;   /* primary brand color (from logo) */
  --tlc-maroon-dark:  #5a0d18;
  --tlc-maroon-light: #a83242;

  /* Neutrals (white / black / gray) */
  --tlc-ink:          #1a1a1a;   /* near-black body text */
  --tlc-heading:      #111111;   /* headings */
  --tlc-muted:        #5c5c5c;   /* secondary text */
  --tlc-line:         #e2e2e2;   /* hairlines / borders */
  --tlc-gray-50:      #f7f7f7;
  --tlc-gray-100:     #f1f1f1;
  --tlc-gray-200:     #e9e9e9;
  --tlc-gray-700:     #4a4a4a;

  /* Bootstrap variable overrides */
  --bs-primary:       var(--tlc-maroon);
  --bs-primary-rgb:   132, 20, 36;
  --bs-body-bg:       #ffffff;
  --bs-body-color:    var(--tlc-ink);
  --bs-link-color:    var(--tlc-maroon);
  --bs-link-hover-color: var(--tlc-maroon-dark);

  /* Typography */
  --tlc-font-head:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tlc-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ----------  Base  ---------- */
body {
  font-family: var(--tlc-font-body);
  color: var(--tlc-ink);
  background-color: #ffffff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--tlc-font-head);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--tlc-heading);
}

p { color: var(--tlc-ink); }

a { color: var(--tlc-maroon); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--tlc-maroon-dark); text-decoration: underline; }

.text-maroon    { color: var(--tlc-maroon) !important; }
.text-ink       { color: var(--tlc-ink) !important; }
.text-muted-d   { color: var(--tlc-muted) !important; }

.bg-maroon      { background-color: var(--tlc-maroon) !important; }
.bg-maroon-dark { background-color: var(--tlc-maroon-dark) !important; }
.bg-white       { background-color: #ffffff !important; }
.bg-gray-50     { background-color: var(--tlc-gray-50) !important; }
.bg-gray-100    { background-color: var(--tlc-gray-100) !important; }
.bg-gray-200    { background-color: var(--tlc-gray-200) !important; }
.bg-ink         { background-color: var(--tlc-ink) !important; }

/* Decorative rule under section titles */
.section-title { position: relative; margin-bottom: 1.25rem; }
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: .65rem;
  background: var(--tlc-maroon);
}
.section-title.text-center::after { margin-left: auto; margin-right: auto; }

/* Title on dark backgrounds stays white */
.section-title.on-dark,
.section-title.on-dark h2 { color: #ffffff; }
.section-title.on-dark::after { background: #ffffff; }

/* Eyebrow label */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--tlc-maroon);
  margin-bottom: .5rem;
}
.eyebrow.on-dark { color: #ffffff; }

/* ----------  Navbar (white, clean)  ---------- */
.navbar {
  background-color: #ffffff !important;
  padding-top: .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--tlc-line);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.navbar.scrolled {
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--tlc-font-head);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--tlc-heading);
  line-height: 1.1;
}
.navbar-brand img { height: 44px; width: auto; }
.navbar-brand .brand-text { display: flex; flex-direction: column; }
.navbar-brand .brand-sub {
  font-family: var(--tlc-font-body);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tlc-maroon);
  font-weight: 600;
}
.navbar-brand:hover { color: var(--tlc-heading); text-decoration: none; }

.navbar .nav-link {
  color: var(--tlc-ink) !important;
  font-weight: 500;
  font-size: .95rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--tlc-maroon) !important; }
.navbar .nav-link.active { color: var(--tlc-maroon) !important; font-weight: 600; }
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .25rem;
  height: 2px; background: var(--tlc-maroon);
}

/* Dropdown */
.navbar .dropdown-menu {
  border: 1px solid var(--tlc-line);
  border-radius: 4px;
  background-color: #fff;
  padding: .4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  min-width: 16rem;
}
.navbar .dropdown-item {
  color: var(--tlc-ink);
  font-size: .9rem;
  padding: .55rem .9rem;
  border-radius: 3px;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--tlc-gray-100);
  color: var(--tlc-maroon);
}
.navbar .dropdown-toggle::after { vertical-align: .2em; }

.navbar-toggler {
  border-color: var(--tlc-line);
  padding: .35rem .55rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231a1a1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar .btn-maroon { margin-left: 1rem; }

/* ----------  Buttons  ---------- */
.btn {
  border-radius: 3px;
  font-weight: 600;
  padding: .7rem 1.6rem;
  font-size: .95rem;
}
.btn-maroon {
  background-color: var(--tlc-maroon);
  border-color: var(--tlc-maroon);
  color: #fff;
}
.btn-maroon:hover {
  background-color: var(--tlc-maroon-dark);
  border-color: var(--tlc-maroon-dark);
  color: #fff;
}
.btn-outline-maroon {
  border-color: var(--tlc-maroon);
  color: var(--tlc-maroon);
  background-color: transparent;
}
.btn-outline-maroon:hover {
  background-color: var(--tlc-maroon);
  color: #fff;
}
.btn-dark {
  background-color: var(--tlc-ink);
  border-color: var(--tlc-ink);
  color: #fff;
}
.btn-dark:hover { background-color: #000; color: #fff; border-color: #000; }

/* ----------  Hero (image + dark gradient for readability)  ---------- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  color: #ffffff;
  background:
    linear-gradient(rgba(15,15,15,.55), rgba(15,15,15,.75)),
    url("../img/hero/hero-church.jpg") center/cover no-repeat;
}
.hero h1 {
  color: #ffffff;
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero .lead {
  color: rgba(255,255,255,.92);
  font-size: 1.2rem;
  font-weight: 300;
  max-width: 640px;
}
.hero .eyebrow { color: #ffffff; }

/* Smaller page-header for interior pages */
.page-header {
  position: relative;
  padding: 6rem 0 3.5rem;
  color: #ffffff;
  background:
    linear-gradient(rgba(15,15,15,.65), rgba(15,15,15,.80)),
    url("../img/hero/header-candles.jpg") center/cover no-repeat;
}
.page-header h1 { color: #ffffff; font-size: clamp(2.1rem, 5vw, 3.25rem); margin-bottom: .35rem; }
.page-header .lead { color: rgba(255,255,255,.9); margin-bottom: 0; }
.page-header .eyebrow { color: #ffffff; }

/* Maroon page header variant */
.page-header-maroon {
  background: var(--tlc-maroon);
  background: linear-gradient(135deg, var(--tlc-maroon) 0%, var(--tlc-maroon-dark) 100%);
}

/* ----------  Sections  ---------- */
section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }

.divider-cross {
  font-size: 1.5rem;
  color: #ffffff;
  margin: 0 auto 1rem;
  display: block;
  text-align: center;
}

/* ----------  Cards  ---------- */
.card {
  background-color: #fff;
  border: 1px solid var(--tlc-line);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.card-body, .card p { color: var(--tlc-ink); }
.card-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tlc-gray-100);
  color: var(--tlc-maroon);
  border-radius: 50%;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.card-title {
  font-family: var(--tlc-font-head);
  font-weight: 600;
  color: var(--tlc-heading);
}

/* ----------  Info strip  ---------- */
.info-strip {
  background-color: var(--tlc-ink);
  color: #ffffff;
  padding: 1.4rem 0;
}
.info-strip a { color: #ffffff; }
.info-strip a:hover { color: #fff; text-decoration: underline; }
.info-strip .icon-circle {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,.6);
  color: #ffffff;
  border-radius: 50%;
  margin-right: .85rem;
  flex-shrink: 0;
}

/* ----------  Feature / split section  ---------- */
.feature-split img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* ----------  Verse / quote band  ---------- */
.verse-band {
  background: var(--tlc-ink);
  color: #ffffff;
  padding: 5.5rem 0;
}
.verse-band .divider-cross { color: #ffffff; }
.verse-band blockquote {
  font-family: var(--tlc-font-head);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  color: #ffffff;
}
.verse-band cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--tlc-font-body);
  font-size: .95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

/* ----------  Program tiles  ---------- */
.program-tile {
  display: block;
  padding: 2rem 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--tlc-line);
  height: 100%;
  color: var(--tlc-ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.program-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  border-color: var(--tlc-maroon);
  text-decoration: none;
  color: var(--tlc-ink);
}
.program-tile .icon {
  font-size: 2rem;
  color: var(--tlc-maroon);
  margin-bottom: .85rem;
}
.program-tile h3 {
  font-size: 1.3rem;
  color: var(--tlc-heading);
  margin-bottom: .35rem;
}
.program-tile p { color: var(--tlc-muted); margin: 0; }

/* ----------  Staff cards  ---------- */
.staff-photo {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--tlc-gray-100);
  margin: 0 auto;
  background-color: var(--tlc-gray-100);
}
.staff-name { font-family: var(--tlc-font-head); font-size: 1.4rem; color: var(--tlc-heading); margin-bottom: 0; }
.staff-role { color: var(--tlc-maroon); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: .78rem; }

/* ----------  Timeline (history)  ---------- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--tlc-maroon);
}
.timeline-item { position: relative; padding-bottom: 2rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: 6px;
  width: 14px; height: 14px;
  background: var(--tlc-maroon);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tlc-maroon);
}
.timeline-item .year {
  font-family: var(--tlc-font-head);
  color: var(--tlc-maroon);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ----------  Calendar  ---------- */
.calendar-grid {
  background: #fff;
  border: 1px solid var(--tlc-line);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.calendar-grid iframe { width: 100%; height: 600px; border: 0; }

.event-card { border-left: 4px solid var(--tlc-maroon); }

/* ----------  Forms  ---------- */
.form-control, .form-select {
  border-radius: 3px;
  border-color: var(--tlc-line);
  padding: .7rem .9rem;
  color: var(--tlc-ink);
}
.form-control::placeholder { color: #999; }
.form-control:focus, .form-select:focus {
  border-color: var(--tlc-maroon);
  box-shadow: 0 0 0 .2rem rgba(132,20,36,.15);
  color: var(--tlc-ink);
}
.form-label { font-weight: 600; font-size: .9rem; color: var(--tlc-heading); }

/* ----------  Footer (dark)  ---------- */
.footer {
  background-color: #141414;
  color: rgba(255,255,255,.72);
  padding: 4rem 0 1.5rem;
}
.footer p { color: rgba(255,255,255,.72); }
.footer h4 {
  color: #ffffff;
  font-family: var(--tlc-font-head);
  font-size: 1.25rem;
  margin-bottom: 1.1rem;
}
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color: #ffffff; }
.footer ul { list-style: none; padding-left: 0; }
.footer ul li { margin-bottom: .5rem; }
.footer .footer-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.footer .footer-brand img { height: 48px; width: auto; }
.footer .footer-brand .brand-text {
  font-family: var(--tlc-font-head);
  font-size: 1.35rem;
  color: #ffffff;
  line-height: 1.1;
}
.footer .footer-brand .brand-sub {
  font-family: var(--tlc-font-body);
  font-size: .65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  font-weight: 600;
}
.footer .footer-icon { color: #ffffff; margin-right: .5rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  margin-right: .4rem;
  color: #ffffff;
}
.footer-social a:hover {
  background: var(--tlc-maroon);
  border-color: var(--tlc-maroon);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}

/* ----------  Utilities  ---------- */
.lift { transition: transform .25s ease; }
.lift:hover { transform: translateY(-3px); }
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.lead-serif {
  font-family: var(--tlc-font-head);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--tlc-maroon);
}
.rounded-img { border-radius: 4px; }

/* Decorative cross bullet for emphasis lists */
.cross-list { list-style: none; padding-left: 0; }
.cross-list li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.cross-list li::before {
  content: "\271A";
  position: absolute; left: 0; top: 1px;
  color: var(--tlc-maroon);
  font-size: .8rem;
}

/* ----------  Responsive tweaks  ---------- */
@media (max-width: 991.98px) {
  .navbar { padding-top: .6rem; padding-bottom: .6rem; }
  .navbar-brand img { height: 38px; }
  .navbar .nav-link { padding-top: .55rem; padding-bottom: .55rem; }
  .navbar .nav-link.active::after { display: none; }
  .navbar .btn-maroon { margin: .75rem 0 0; }
  .navbar .dropdown-menu {
    border: none;
    box-shadow: none;
    padding-left: 1rem;
  }
  .hero { min-height: 60vh; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
}