/*
 * SCM Brand Overrides
 * Loads after main.css — remaps Bexon teal to SCM color system
 * SCM Green  #008047  — primary actions, CTAs, borders, buttons
 * Bexon Teal #1E8A8A  — secondary accent, hovers, sub-title icons, highlights
 * Dark       #0C1E21  — nav, dark sections (keep Bexon default)
 */

:root {
  --tj-color-theme-primary:  #008047;
  --tj-color-theme-bg:       #e6f4ed;
  --tj-color-theme-bg-2:     #d0eadb;
  --tj-color-border-5:       rgba(0, 128, 71, 0.15);
}

/* ── Buttons ──────────────────────────────────────────────── */
.tj-primary-btn {
  background-color: #008047;
}
.tj-primary-btn:hover,
.tj-primary-btn:focus {
  background-color: #1E8A8A;
}
.tj-primary-btn .btn-icon {
  background-color: #006638;
}
.tj-primary-btn:hover .btn-icon,
.tj-primary-btn:focus .btn-icon {
  background-color: #156d6d;
}

/* ── Sub-title tag ────────────────────────────────────────── */
.sub-title {
  color: #008047;
  border-color: rgba(0,128,71,.35);
}
.sub-title i {
  color: #1E8A8A;
}

/* ── Section titles — span highlight ─────────────────────── */
.sec-title span,
.hero-title span,
.banner-title span,
.cta-title span {
  color: #1E8A8A;
}

/* ── Nav active / hover ───────────────────────────────────── */
.mainmenu ul li a:hover,
.mainmenu ul li.active > a,
.mainmenu ul li.current-menu-item > a {
  color: #008047;
}
.mainmenu ul li ul li a:hover {
  color: #008047;
  background-color: #e6f4ed;
}

/* ── Links ────────────────────────────────────────────────── */
a:hover { color: #008047; }

/* ── Service / feature boxes — border accents ────────────── */
.service-box:hover,
.service-box:hover .title {
  color: #008047;
}
.service-box::after {
  background-color: #008047;
}

/* ── Breadcrumb active ────────────────────────────────────── */
.breadcrumb-item.active,
.breadcrumb-item a:hover {
  color: #1E8A8A;
}

/* ── Accordion open state ─────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color: #008047;
  border-left: 3px solid #008047;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(0,128,71,.15);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: #008047; }
scrollbar-color: #008047 #e6f4ed;

/* ── Inner banner background tint ────────────────────────── */
.tj-inner-banner {
  background-color: #0c1e21;
}

/* ── Footer links hover ───────────────────────────────────── */
footer a:hover { color: #1E8A8A; }

/* ── Stats / funfact numbers ──────────────────────────────── */
.funfact-number,
.odometer {
  color: #008047;
}

/* ── Remove all Bexon award / demo badge elements ─────── */
.tj-award-wrapper,
.award-logo-area,
.tj-demo-thumb,
.tj-demo-badge,
.mega-menu-badge,
.mega-menu-badge-hot,
[class*="award"] {
  display: none !important;
}
.footer-widget::before,
.footer-widget::after {
  display: none !important;
  content: none !important;
}

/* ── Hero height override ─────────────────────────────────── */
.banner-area {
  min-height: 580px !important;
}
@media (max-width: 991px) {
  .banner-area {
    min-height: 480px !important;
  }
}
@media (max-width: 767px) {
  .banner-area {
    min-height: auto !important;
    padding: 60px 0 40px;
  }
}

/* ── Hero banner sizing fix ───────────────────────────────── */
.banner-area {
  min-height: 580px !important;
  max-height: 650px;
  align-items: stretch;
}

.banner-left-box {
  padding: 50px 50px 50px 60px;
}

.banner-right-box {
  min-height: 340px;
  max-height: 650px;
}

.banner-img {
  max-height: 650px;
}

.banner-img img {
  object-fit: cover;
  object-position: center center;
  max-height: 650px;
}

/* H1 size tightened */
.banner-title {
  font-size: clamp(32px, 3.5vw, 52px) !important;
  line-height: 1.15 !important;
}

/* Banner description text */
.banner-desc {
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
}

/* Scroll down indicator — push up from bottom */
.banner-scroll {
  margin-top: 24px;
}

/* ── Logo: single SVG, dark text on light contexts ───────── */
/* Nav (dark bg) — white text already in SVG, no override needed */

/* Footer + mobile nav — darken the white "SUN CITY" text to dark */
.tj-footer-section .site_logo img,
.tj-footer-section .logo img,
footer .logo img,
.hamburger_logo img,
.mobile_logo img {
  /* Shift white→dark for "SUN CITY" text — cube colors stay green */
  filter: brightness(0) saturate(100%)
          invert(8%) sepia(15%) saturate(800%) hue-rotate(140deg) brightness(95%);
}

/* Keep nav logo as-is (white on dark) */
.header-wrapper .site_logo img,
.tj-header-area .site_logo img {
  filter: none;
}

/* ── Hero height reduction ─────────────────────────────── */
.banner-area {
  min-height: 600px !important;
}
@media (max-width: 991px) {
  .banner-area {
    min-height: 480px !important;
  }
}
@media (max-width: 575px) {
  .banner-area {
    min-height: auto !important;
    padding: 80px 0 40px;
  }
}

/* ── Inner page banners — taller ──────────────────────────── */
.tj-inner-banner {
  min-height: 320px;
  display: flex;
  align-items: center;
  padding-top: 140px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 768px) {
  .tj-inner-banner {
    min-height: 220px;
    padding-top: 110px !important;
    padding-bottom: 50px !important;
  }
}

/* Hide the top-bar logo — let sticky nav carry the brand */
.header-absolute:not(.tj-sticky-header) .site_logo {
  display: none !important;
}

/* ── Logo sizing (all contexts) ──────────────────────────── */
/* The header is one element — both "logos" are the same img  */
/* Top bar (header-absolute, transparent over hero):          */
.header-area .site_logo img {
  max-width: 150px !important;
  width: 150px !important;
  height: auto !important;
}

/* Preloader */
.loading-inner img {
  max-width: 140px;
  width: 140px;
  height: auto;
}

/* Footer */
.footer-logo img {
  max-width: 180px;
  width: 180px;
  height: auto;
}

/* Offcanvas / mobile drawer */
.hamburger_logo img,
.mobile_logo img {
  max-width: 140px;
  width: 140px;
  height: auto;
}