/* ================================================
   VILLAGE ON COLLEGE HILL — CUSTOM CSS
   Paste this entire file into:
   Website > Design > Custom CSS in ClubExpress
   ================================================ */


/* ── COLOR VARIABLES ── */
:root {
  --blue-dark:   #1E3F5C;
  --blue-mid:    #2E5F8A;
  --blue-light:  #5A8FBB;
  --green:       #8DB83A;
  --green-dark:  #6A8E25;
  --green-light: #BDD876;
  --cream:       #F4F7F2;
  --white:       #F9FBF6;
  --charcoal:    #1C2E3D;
  --gray:        #4A5E6A;
  --border:      #D6E4EE;
}


/* ── FONTS ── */
body, p, li, td, input, select, textarea {
  font-family: 'Lato', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .page-title {
  font-family: 'Playfair Display', Georgia, serif !important;
}


/* ── OVERALL BACKGROUND ── */
body {
  background: var(--cream) !important;
}


/* ── TOP UTILITY BAR ── */
#utility_bar, .utility-bar, #header_utility {
  background: var(--blue-dark) !important;
  border-bottom: none !important;
}
#utility_bar a, .utility-bar a {
  color: white !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}


/* ── MAIN NAV BAR ── */
#nav_bar, #header_nav, .nav-wrapper, #navigation {
  background: white !important;
  border-bottom: 3px solid var(--green) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}
#nav_bar a, #navigation a, .nav-item a {
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--charcoal) !important;
  transition: color 0.2s, background 0.2s !important;
}
#nav_bar a:hover, #navigation a:hover {
  color: var(--blue-mid) !important;
  background: #EEF4FA !important;
}
#nav_bar .current a, #navigation .active a {
  color: var(--blue-mid) !important;
  border-bottom: 2px solid var(--green) !important;
}


/* ── MEMBER LOGIN BUTTON ── */
a[href*="action=login"], .member-login-btn {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
  color: white !important;
  padding: 0.35rem 1rem !important;
  border-radius: 3px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
a[href*="action=login"]:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: white !important;
  color: white !important;
}


/* ── DONATE BUTTON ── */
a[href*="Donations"], a[href*="donations"], .donate-btn {
  background: var(--green) !important;
  color: white !important;
  padding: 0.35rem 1rem !important;
  border-radius: 3px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  border: 1.5px solid var(--green) !important;
}
a[href*="Donations"]:hover, a[href*="donations"]:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: white !important;
}


/* ── PAGE CONTENT AREA ── */
#page_content, .page-content, #content_area {
  background: var(--white) !important;
}


/* ── HEADINGS ── */
h1.page_title, h1, h2 {
  color: var(--blue-mid) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}


/* ── LINKS ── */
#page_content a, .page-content a {
  color: var(--blue-mid) !important;
}
#page_content a:hover, .page-content a:hover {
  color: var(--green-dark) !important;
}


/* ── BUTTONS ── */
input[type="submit"], .btn, .button, a.button {
  background: var(--green) !important;
  color: white !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0.6rem 1.5rem !important;
  transition: background 0.2s, color 0.2s !important;
}
input[type="submit"]:hover, .btn:hover, a.button:hover {
  background: var(--green-dark) !important;
  color: white !important;
}
#page_content a.button,
#page_content input[type="submit"],
#page_content .btn {
  color: white !important;
}
#page_content a.button:hover,
#page_content input[type="submit"]:hover,
#page_content .btn:hover {
  color: white !important;
  background: var(--green-dark) !important;
}


/* ── CE-BUTTON (inline page buttons) ── */
a.ce-button {
  background: var(--green) !important;
  color: white !important;
  border-radius: 3px !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 0.5rem 1.2rem !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
a.ce-button:hover {
  background: var(--green-dark) !important;
  color: white !important;
}
#page_content a.ce-button,
.page-content a.ce-button {
  color: white !important;
}
#page_content a.ce-button:hover,
.page-content a.ce-button:hover {
  color: white !important;
  background: var(--green-dark) !important;
}


/* ── FOOTER ── */
section.bottom-container {
  background-color: #1C2E3D !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 3px solid #8DB83A !important;
  padding: 2rem 5% !important;
}
section.bottom-container footer {
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  border: none !important;
}
section.bottom-container a {
  color: rgba(255,255,255,0.6) !important;
}
section.bottom-container a:hover {
  color: white !important;
}
section.bottom-container h4 {
  color: white !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.75rem !important;
}
section.bottom-container li,
section.bottom-container p {
  color: rgba(255,255,255,0.6) !important;
}
div.footer-bottom {
  background-color: #111a22 !important;
  color: rgba(255,255,255,0.35) !important;
  text-align: center !important;
  padding: 1rem !important;
  font-size: 0.8rem !important;
}


/* ── LOGO ── */
#logo img, .site-logo img {
  max-height: 60px !important;
  width: auto !important;
}


/* ── TABLES ── */
table.data_table th, table th {
  background: var(--blue-mid) !important;
  color: white !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.82rem !important;
}
table.data_table tr:nth-child(even) {
  background: var(--cream) !important;
}


/* ── HERO BANNER PHOTO ── */
.slideshow_container, #banner, .banner-wrapper, .homepage-banner {
  width: 100% !important;
  max-width: 100% !important;
  height: 420px !important;
  overflow: hidden !important;
  position: relative !important;
}
.slideshow_container img, #banner img, .banner-wrapper img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center 60% !important;
}


/* ── EVENT CALENDAR WIDGET ── */
.ue-event {
  background: rgba(46,95,138,0.15) !important;
  border: 1px solid rgba(46,95,138,0.3) !important;
  border-radius: 10px !important;
  padding: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  overflow: hidden !important;
}
.ue-event:hover {
  background: rgba(46,95,138,0.25) !important;
}
.ue-datetime {
  display: block !important;
  float: left !important;
  background: #8DB83A !important;
  border-radius: 6px !important;
  padding: 0.4rem 0.8rem !important;
  min-width: 56px !important;
  text-align: center !important;
  margin-right: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}
.ue-month {
  display: block !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: white !important;
}
.ue-day {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: white !important;
}
.ue-details {
  display: block !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}
.ue-link {
  display: block !important;
  margin-bottom: 0.4rem !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.ue-link a {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--blue-mid) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  display: block !important;
  transition: color 0.2s !important;
}
.ue-link a:hover {
  color: var(--green-dark) !important;
}
div.ue-desc,
div.ue-details div.ue-desc {
  display: block !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  color: var(--gray) !important;
  line-height: 1.6 !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  margin-top: 0.4rem !important;
}
/* ── FOOTER LAYOUT FIX ── */
section.bottom-container footer {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
section.bottom-container ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
section.bottom-container a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
}
section.bottom-container a:hover {
  color: white !important;
}
section.bottom-container p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.6) !important;
}
section.bottom-container li {
  font-size: 0.9rem !important;
  margin-bottom: 0.4rem !important;
  color: rgba(255,255,255,0.6) !important;
}

/* Stack on mobile */
@media (max-width: 768px) {
  section.bottom-container footer {
    grid-template-columns: 1fr !important;
  }
}
/* ── FOOTER FONT & COLOR FIX ── */
section.bottom-container,
section.bottom-container div,
section.bottom-container p,
section.bottom-container li,
section.bottom-container span,
section.bottom-container a {
  font-family: 'Lato', sans-serif !important;
  color: rgba(255,255,255,0.6) !important;
}
section.bottom-container h4 {
  font-family: 'Lato', sans-serif !important;
  color: white !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
section.bottom-container .footer-brand a,
section.bottom-container .footer-brand div {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #BDD876 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
section.bottom-container a:hover {
  color: white !important;
}