/* JESUShaped Custom Theme Override
   Color palette derived from the stylized Jesus illustration
   Warm browns, earthy golds, soft grays
*/

/* ==========================================================================
   Typography - Merriweather Bold for headings
   ========================================================================== */

/* Main title in hero - Merriweather Bold, all white */
.masthead-heading {
  font-family: 'Merriweather', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 4rem !important;
  letter-spacing: 0.03em;
}

@media (max-width: 992px) {
  .masthead-heading {
    font-size: 3rem !important;
  }
}

/* Masthead subheading and intro paragraph */
.masthead-subheading {
  text-wrap: balance;
}

p.masthead-subheading {
  line-height: 1.6rem !important;
  text-align: justify;
  margin-left: 35px;
  margin-right: 35px;
}

/* Section headings - Merriweather Bold, all caps */
.section-heading {
  font-family: 'Merriweather', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
}

:root {
  /* Primary: Warm earthy brown-gold */
  --bs-primary: #8B6914;
  --bs-primary-rgb: 139, 105, 20;
  
  /* Warning uses same as primary in this theme */
  --bs-warning: #8B6914;
  --bs-warning-rgb: 139, 105, 20;
  
  /* Link colors */
  --bs-link-color: #8B6914;
  --bs-link-hover-color: #6B5310;
}

/* Primary button overrides */
.btn-primary {
  background-color: #8B6914 !important;
  border-color: #8B6914 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #6B5310 !important;
  border-color: #5A4510 !important;
}

/* Text primary color */
.text-primary {
  color: #8B6914 !important;
}

/* Navigation - White background with dark text */
#mainNav {
  background-color: #fff !important;
  border-bottom: 5px solid #8B6914;
}

#mainNav .navbar-brand {
  color: #212529;
}

/* Logo sizing */
#mainNav .navbar-brand img {
  height: 70px !important;
  transition: height 0.3s ease-in-out;
}

/* Scrolled/shrunk logo - don't shrink too much */
#mainNav.navbar-shrink .navbar-brand img {
  height: 50px !important;
}

/* Mobile logo size */
@media (max-width: 991.98px) {
  #mainNav .navbar-brand img {
    height: 60px !important;
  }
  #mainNav.navbar-shrink .navbar-brand img {
    height: 50px !important;
  }
}

/* Align nav items with logo text */
@media (min-width: 992px) {
  #mainNav .navbar-nav {
    margin-top: 35px;
    transition: margin-top 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink .navbar-nav {
    margin-top: 20px;
  }
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #495057 !important;
  font-weight: 700;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #8B6914 !important;
}

/* Shrunk/scrolled navbar state */
#mainNav.navbar-shrink {
  background-color: #fff !important;
}

/* Mobile menu toggle - outlined style */
#mainNav .navbar-toggler {
  color: #8B6914;
  background-color: transparent;
  border: 2px solid #8B6914;
  border-radius: 0.375rem;
}

#mainNav .navbar-toggler:hover,
#mainNav .navbar-toggler:focus {
  background-color: rgba(139, 105, 20, 0.1);
  border-color: #6B5310;
  color: #6B5310;
}

#mainNav .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='rgba%28139, 105, 20, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Desktop navbar when scrolled */
@media (min-width: 992px) {
  #mainNav {
    background-color: #fff !important;
  }
  #mainNav.navbar-shrink {
    background-color: #fff !important;
  }
}

/* Masthead adjustments for the cross image */
header.masthead {
  background-position: center center;
  position: relative;
}

/* Add a subtle overlay to ensure text readability over the cross image */
header.masthead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(33, 37, 41, 0.5) 0%,
    rgba(33, 37, 41, 0.3) 50%,
    rgba(33, 37, 41, 0.6) 100%
  );
  z-index: 1;
}

header.masthead .container {
  position: relative;
  z-index: 2;
}

/* Section heading underline color */
.section-heading::after {
  background-color: #8B6914;
}

/* Icon circles */
.fa-stack .fa-circle {
  color: #8B6914;
}

.text-primary.fa-stack-2x {
  color: #8B6914 !important;
}

/* Cards */
.card {
  border-color: #e9ecef;
}

.card-title .text-primary,
.card-title i.text-primary {
  color: #8B6914 !important;
}

/* Links in cards */
.card a {
  color: #8B6914;
}

.card a:hover {
  color: #6B5310;
}

/* Footer */
.footer {
  background-color: #212529;
  color: #fff;
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
  color: #fff;
}

/* Section text centering and spacing */
.text-center {
  text-align: center !important;
  line-height: 1.55rem;
  text-wrap: balance;
}

/* Lead paragraph styling */
.lead {
  font-size: 1.25rem;
  font-weight: 300;
  text-align: justify;
  line-height: 1.75rem;
  margin-left: 10px;
  margin-right: 10px;
}

.btn-social {
  background-color: #8B6914;
  border-color: #8B6914;
}

.btn-social:hover {
  background-color: #6B5310;
  border-color: #6B5310;
}

/* Alternate section backgrounds - warmer gray */
.bg-light {
  background-color: #f5f3f0 !important;
}

/* Mobile: keep justified text and add side margins */
@media (max-width: 768px) {
  .lead,
  p.masthead-subheading {
    text-align: justify;
  }
  p.masthead-subheading {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
}

/* Timeline (if used) */
.timeline > li .timeline-panel {
  border-color: #8B6914;
}

.timeline > li .timeline-image {
  background-color: #8B6914;
}

/* Momentum section icons */
/* Desktop: sub-icons indented under HS dove */
.momentum-sub-icon {
  margin-left: 1rem;
}

/* Mobile: remove indent, shrink HS icon, align icons to top */
@media (max-width: 768px) {
  .momentum-sub-icon {
    margin-left: 0;
  }
  .momentum-hs-icon {
    font-size: 2em !important; /* fa-2x equivalent */
  }
  /* Align icons to top on mobile when text wraps */
  #momentum .d-flex,
  #measure .d-flex {
    align-items: flex-start !important;
  }
}