/* css/theme.css
   Theme variables and a few focused overrides to adopt logo colours site-wide.
   Place this file AFTER bootstrap.min.css and BEFORE style.css in your head.
*/

/* --- palette (change these 5 values to tweak theme) --- */
:root{
  --site-primary: #2FAF6E;   /* light green */
  --site-secondary: #D7263D; /* maple red */
  --site-accent: #D7263D;    /* use maple red instead of orange */
  --site-dark: #0F1724;
  --site-light: #FFFFFF;
  --site-muted: #6B7280;

  --bs-primary: var(--site-primary);
  --bs-secondary: var(--site-secondary);
  --bs-light: var(--site-light);
  --bs-dark: var(--site-dark);
  --bs-white: var(--site-light);
  --bs-body-color: var(--site-dark);
  --bs-body-bg: var(--site-light);
}


/* --- Core component overrides --- */

/* Primary button: gradient using primary → accent */
.btn-primary {
  background: linear-gradient(90deg, var(--site-primary) 0%, var(--site-accent) 100%) !important;
  border: none !important;
  color: var(--site-light) !important;
  box-shadow: 0 6px 18px rgba(15,23,36,0.12);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--site-light) !important;
  color: var(--site-primary) !important;
  box-shadow: inset 300px 0 0 0 var(--site-light) !important;
}

/* Secondary button (solid maple red) */
.btn-secondary {
  background: var(--site-secondary) !important;
  border: none !important;
  color: var(--site-light) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--site-light) !important;
  color: var(--site-secondary) !important;
}

/* Navbar link active/hover */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--bs-primary) !important;
}

/* Carousel round arrow buttons */
.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
  background: var(--bs-primary);
  color: var(--bs-white);
  box-shadow: none;
}
.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
  box-shadow: inset 100px 0 0 0 var(--bs-light) !important;
  color: var(--bs-primary) !important;
}

/* Subtitle accent and decorative line */
.sub-title {
  color: var(--bs-primary);
}
.sub-title::before {
  border-color: var(--site-accent) !important;
}

/* Counter top stripe */
.counter-facts .counter:before {
  background-color: var(--bs-primary);
}

/* Footer theming */
.footer {
  background: var(--site-dark) !important;
  color: var(--site-light) !important;
}
.footer .footer-item .footer-link { color: var(--site-light); }
.footer .footer-item .footer-link:hover { color: var(--bs-primary) !important; }

/* Muted text */
.text-muted, .footer p, .small { color: var(--site-muted) !important; }

/* Keep existing inline overrides (if any) visible: increase specificity */
.navbar-light .navbar-brand h1 { color: var(--bs-primary) !important; }

/* small responsive tweak for carousel caption overlay if images are bright */
.header-carousel .header-carousel-item .carousel-caption {
  background: rgba(0,0,0,0.45); /* keep caption readable on bright images */
}

/* Optional: quick dark-mode class if you toggle later */
body.dark {
  --site-primary: #D7263D;
  --site-secondary: #1F7A5F;
  --site-accent: #88D6A3;
  --site-dark: #0f1724;
  --site-light: #ffffff;
}
/* Install-card visuals using theme variables from :root */

/* Card container */
.install-card {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  box-shadow: 0 10px 30px rgba(15,23,36,0.06);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.install-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15,23,36,0.12);
}

/* Icon circle uses your site primary → accent gradient */
.install-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--site-light);
  background: linear-gradient(135deg, var(--bs-primary), var(--site-accent));
  box-shadow: 0 10px 22px rgba(15,23,36,0.08);
}

/* Icon size inside */
.install-icon i {
  font-size: 1.3rem;
}

/* Card heading & copy */
.install-card .card-title {
  color: var(--site-dark);
  font-weight: 600;
}
.install-card .card-text {
  color: var(--site-muted);
  margin-bottom: 0.75rem;
}

/* Outline button that uses theme color */
.btn-outline-theme {
  border: 1px solid rgba(31,122,95,0.12);
  color: var(--bs-primary);
  background: transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.btn-outline-theme:hover,
.btn-outline-theme:focus {
  background: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
  box-shadow: none;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .install-icon { width: 72px; height: 72px; font-size: 1.2rem; }
  .install-card { padding: 1.5rem; }
  .display-2 { font-size: 2.2rem; } /* optional: keep headings readable */
}