@charset "UTF-8";

/* =========================================================
   Index polish (homepage only) for Colinas del Oso
   Works with cdo-theme.css variables
   ========================================================= */

/* ---------- HERO / CAROUSEL sizing & readability ---------- */

/* Ensure the carousel and its items have real height */
.header-carousel,
.header-carousel .owl-stage-outer,
.header-carousel .owl-stage,
.header-carousel .owl-item,
.header-carousel .header-carousel-item {
  height: clamp(520px, 72vh, 820px);
}

/* Make the hero content sit nicely and remain readable */
.header-carousel .carousel-caption {
  inset: 0;
  display: flex;
  align-items: center;
}

/* Improve legibility: subtle dark overlay across each slide */
.header-carousel .header-carousel-item {
  position: relative;
  overflow: hidden;
}
.header-carousel .header-carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.20) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.header-carousel .header-carousel-item .carousel-caption {
  position: relative;
  z-index: 1;
}

/* If your theme uses "hero-bg-half" shapes, avoid them covering text */
.hero-bg-half-1,
.hero-bg-half-2,
.hero-shape-1,
.hero-shape-2 {
  opacity: 0.95;
}

/* Mobile: give a bit more padding and reduce headline size */
@media (max-width: 576px) {
  .header-carousel .header-carousel-item .display-2 {
    font-size: 2.2rem;
  }
  .header-carousel .carousel-caption .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---------- Fix template colors that fight your palette ---------- */

/* Many templates set .text-primary to a bright blue. Force it to olive. */
.text-primary {
  color: var(--bs-primary) !important;
}

/* On dark sections, ensure "text-primary" still reads (gold accent looks premium) */
.bg-dark .text-primary,
.testimonial.bg-dark .text-primary {
  color: var(--cdo-gold) !important;
}

/* Icons often inherit text-primary; make them harmonize */
.fas.text-primary,
.far.text-primary,
.fab.text-primary,
.fa.text-primary {
  color: var(--cdo-gold) !important;
}

/* ---------- Buttons: keep portal look everywhere ---------- */

.btn-light {
  background-color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.btn-light:hover,
.btn-light:focus {
  background-color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
}

/* ---------- Sections polish ---------- */

/* About: the "bg-primary" block should use your olive */
.about .bg-primary {
  background-color: var(--bs-primary) !important;
}
.about .bg-primary .display-2 {
  color: #fff !important;
}
.about .text-dark .fa-check.text-primary {
  color: var(--cdo-gold) !important;
}

/* Banner: keep it bold + readable */
.banner {
  position: relative;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}
.banner > .container {
  position: relative;
  z-index: 1;
}

/* Services tab nav: your template uses plain <a> without .nav-link */
.service .nav a {
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(var(--cdo-border-rgb), 1);
  background: #fff;
  color: var(--cdo-brand-primary);
  font-weight: 750;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.service .nav a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: rgba(var(--cdo-olive-rgb), 0.35);
}
.service .nav a.active {
  /*background: rgba(var(--cdo-olive-rgb), 0.12);*/
  border-color: rgba(var(--cdo-olive-rgb), 0.35);
  color: var(--bs-primary);
}

/* Service cards: remove harsh borders, keep clean card feel */
.service-item .border {
  border-color: rgba(var(--cdo-border-rgb), 1) !important;
}
.service-item h4 {
  color: var(--cdo-brand-primary);
}
.service-item p {
  color: var(--cdo-slate);
}

/* Testimonial: stars */
.testimonial .fa-star {
  color: var(--cdo-gold) !important;
}
.testimonial .fa-star.text-body {
  color: rgba(255,255,255,0.35) !important;
}

/* FAQ accordion: emphasize active header */
.accordion-button:not(.collapsed) {
  color: var(--cdo-brand-primary);
  background-color: rgba(var(--cdo-olive-rgb), 0.10);
  box-shadow: none;
}
.accordion-button:focus {
  border-color: var(--cdo-sage);
  box-shadow: 0 0 0 0.2rem rgba(var(--cdo-sage-rgb), 0.45);
}

/* Back-to-top: ensure it’s always visible against backgrounds */
.back-to-top {
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}