/* OLENAR Health — Burgundy & Pink theme */

/* === Theme palette === */
:root{
  --oh-primary: #7A1E3A;      /* Burgundy */
  --oh-primary-600:#641830;
  --oh-primary-700:#551329;
  --oh-accent:  #FF4D8D;      /* Vibrant pink */
  --oh-accent-600:#E43D7B;
  --oh-accent-700:#C53268;

  --oh-ink: #17212A;          /* Body text */
  --oh-muted:#6B7A86;         /* Muted text */
  --oh-soft-bg:#FFF2F7;       /* Very light pink page tint */
  --oh-card-border: rgba(122,30,58,.12);
  --oh-ring: rgba(255,77,141,.35);
}

/* Site-wide gradient background (burgundy + pink, subtle and readable) */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue","Noto Sans",sans-serif;
  color:var(--oh-ink);

  /* Layered gradients: two gentle radial glows + a vertical wash */
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,77,141,.14), transparent 60%),
    radial-gradient(900px 520px  at -10%  25%, rgba(122,30,58,.12),  transparent 60%),
    linear-gradient(180deg, #FFF8FB 0%, #FFEFF5 45%, #FCEAF1 100%); /* soft pink wash */

  /* Keeps layout stable; cards stay readable */
  background-repeat: no-repeat;
  background-size: cover, cover, 100% 100%;
  background-attachment: scroll, scroll, scroll; /* performance-friendly default */
}

/* Optional: give desktop a subtle “parallax” feel without hurting mobile perf */
@media (min-width: 992px){
  body{
    background-attachment: fixed, fixed, fixed;
  }
}

/* Navbar */
.navbar{
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  background:#fff;
}
.navbar .navbar-brand{
  letter-spacing:.2px;
}
.navbar .nav-link{
  color:#1a2733;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--oh-primary);
}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,77,141,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(122,30,58,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,77,141,.10), rgba(122,30,58,.06));
  border-bottom:1px solid rgba(122,30,58,.12);
}
.hero .display-5{letter-spacing:.3px;}

/* Cards */
.card{
  border-radius:1rem;
  border:1px solid var(--oh-card-border);
}

/* Buttons */
.btn-gradient{
  background:linear-gradient(90deg, var(--oh-primary), var(--oh-accent));
  border:0;
  color:#fff;
}
.btn-gradient:hover{ filter:brightness(.95); color:#fff; }

.btn-primary{
  background-color:var(--oh-primary);
  border-color:var(--oh-primary);
}
.btn-primary:hover{
  background-color:var(--oh-primary-600);
  border-color:var(--oh-primary-600);
}
.btn-outline-primary{
  color:var(--oh-primary);
  border-color:var(--oh-primary);
  background:transparent;
}
.btn-outline-primary:hover{
  background-color:var(--oh-primary);
  border-color:var(--oh-primary);
  color:#fff;
}

/* Bootstrap color overrides (keep Bootstrap utilities intuitive) */
.text-primary{ color:var(--oh-primary) !important; }
.bg-primary{ background-color:var(--oh-primary) !important; }
.border-primary{ border-color:var(--oh-primary) !important; }
.badge.bg-primary{ background-color:var(--oh-primary) !important; }

/* Soft badges & chips */
.badge-soft{
  background: rgba(255,77,141,.12);
  color: var(--oh-accent);
  border:1px solid rgba(255,77,141,.28);
}

/* Pricing */
.pricing .price{ font-size:3rem; font-weight:800; line-height:1; }
.strike{ text-decoration: line-through; opacity:.6; }

/* Forms */
.form-control, .form-select{ border-radius:.75rem; }
.form-control:focus, .form-select:focus, .btn:focus{
  box-shadow: 0 0 0 .25rem var(--oh-ring);
  border-color: var(--oh-accent-600);
}

/* Avatars & small text */
.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.small-muted{ color:var(--oh-muted); }

/* Footer — keep dark for contrast, but on-brand */
footer{
  margin-top:auto;
  border-top:1px solid rgba(0,0,0,.06);
  color:#fff;
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(255,77,141,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(122,30,58,.35), transparent 60%),
    linear-gradient(180deg, #300916, #14060B);
}
footer a{ color:#FFE7F1; }
footer a:hover{ opacity:.85; }

/* Sticky footer layout */
html, body { height: 100%; }
body { min-height: 100vh; display:flex; flex-direction:column; }

/* Carousel */
.carousel-item { max-height: 70vh; }
.carousel-item img { height: 70vh; width:100%; object-fit:cover; display:block; }

/* Carousel indicators to match theme */
.carousel .carousel-indicators [data-bs-target]{
  background-color: rgba(255,77,141,.7);
}
.carousel .carousel-indicators .active{
  background-color: var(--oh-primary);
}

/* Links */
a{ color: var(--oh-accent); }
a:hover{ color: var(--oh-accent-700); }

/* Subtle section dividers */
.section-divider{
  border-top:1px dashed rgba(122,30,58,.18);
}

/* Utilities */
.bg-soft-pink{ background: var(--oh-soft-bg); }
.text-burgundy{ color: var(--oh-primary); }
.text-pink{ color: var(--oh-accent); }

/* === Colorful cards (burgundy + pink family) === */

/* Base card polish */
.card{
  border-radius: 1rem;
  border: 1px solid var(--oh-card-border);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(122,30,58,.10);
}

/* Palettes (soft, readable, on-brand) */
:root{
  --t-rose-bg:   #FFF4F8;  --t-rose-bd:  rgba(255,77,141,.25); --t-rose-h:  #7A1E3A; --t-rose-t: #3a2030;
  --t-blush-bg:  #FFEAF1;  --t-blush-bd: rgba(255,77,141,.28); --t-blush-h: #7A1E3A; --t-blush-t:#35202B;
  --t-peach-bg:  #FFF1EC;  --t-peach-bd: rgba(240,143,110,.28);--t-peach-h:#7A1E3A; --t-peach-t:#3A2622;
  --t-mauve-bg:  #F9ECF4;  --t-mauve-bd: rgba(197,50,104,.25); --t-mauve-h:#6B1744; --t-mauve-t:#2D1C24;
  --t-plum-bg:   #F5EAF2;  --t-plum-bd: rgba(122,30,58,.25);  --t-plum-h: #5A1530; --t-plum-t: #24131C;
  --t-lilac-bg:  #F1ECFA;  --t-lilac-bd: rgba(116,92,242,.22); --t-lilac-h:#4B376F; --t-lilac-t:#231D30;
}

/* Utility classes (apply directly on .card) */
.card-rose  { background: var(--t-rose-bg);  border-color: var(--t-rose-bd);  }
.card-blush { background: var(--t-blush-bg); border-color: var(--t-blush-bd); }
.card-peach { background: var(--t-peach-bg); border-color: var(--t-peach-bd); }
.card-mauve { background: var(--t-mauve-bg); border-color: var(--t-mauve-bd); }
.card-plum  { background: var(--t-plum-bg);  border-color: var(--t-plum-bd);  }
.card-lilac { background: var(--t-lilac-bg); border-color: var(--t-lilac-bd); }

/* Headings & text inside tinted cards */
.card-rose  h5, .card-rose .fw-bold  { color: var(--t-rose-h); }
.card-blush h5, .card-blush .fw-bold { color: var(--t-blush-h); }
.card-peach h5, .card-peach .fw-bold { color: var(--t-peach-h); }
.card-mauve h5, .card-mauve .fw-bold { color: var(--t-mauve-h); }
.card-plum  h5, .card-plum .fw-bold  { color: var(--t-plum-h); }
.card-lilac h5, .card-lilac .fw-bold { color: var(--t-lilac-h); }

.card-rose  p, .card-rose  li { color: var(--t-rose-t); }
.card-blush p, .card-blush li { color: var(--t-blush-t); }
.card-peach p, .card-peach li { color: var(--t-peach-t); }
.card-mauve p, .card-mauve li { color: var(--t-mauve-t); }
.card-plum  p, .card-plum  li { color: var(--t-plum-t);  }
.card-lilac p, .card-lilac li { color: var(--t-lilac-t); }

/* Subtle gradient header band on hover for depth */
.card-rose:hover  { background:
  linear-gradient(180deg, rgba(255,77,141,.06), transparent 40%), var(--t-rose-bg); }
.card-blush:hover { background:
  linear-gradient(180deg, rgba(255,77,141,.07), transparent 40%), var(--t-blush-bg); }
.card-peach:hover { background:
  linear-gradient(180deg, rgba(240,143,110,.07), transparent 40%), var(--t-peach-bg); }
.card-mauve:hover { background:
  linear-gradient(180deg, rgba(197,50,104,.07), transparent 40%), var(--t-mauve-bg); }
.card-plum:hover  { background:
  linear-gradient(180deg, rgba(122,30,58,.08), transparent 40%), var(--t-plum-bg); }
.card-lilac:hover { background:
  linear-gradient(180deg, rgba(116,92,242,.07), transparent 40%), var(--t-lilac-bg); }

/* Automatic cycling for typical grids (no markup changes needed) */
.row .col-md-4 .card:nth-child(6n+1),
.row .col-md-6 .card:nth-child(6n+1) { composes: card-rose;  }
.row .col-md-4 .card:nth-child(6n+2),
.row .col-md-6 .card:nth-child(6n+2) { composes: card-blush; }
.row .col-md-4 .card:nth-child(6n+3),
.row .col-md-6 .card:nth-child(6n+3) { composes: card-peach; }
.row .col-md-4 .card:nth-child(6n+4),
.row .col-md-6 .card:nth-child(6n+4) { composes: card-mauve; }
.row .col-md-4 .card:nth-child(6n+5),
.row .col-md-6 .card:nth-child(6n+5) { composes: card-plum; }
.row .col-md-4 .card:nth-child(6n+6),
.row .col-md-6 .card:nth-child(6n+6) { composes: card-lilac; }

/* Fallback if your CSS processor doesn’t support `composes:` */
.row .col-md-4 .card:nth-child(6n+1),
.row .col-md-6 .card:nth-child(6n+1) { background: var(--t-rose-bg);  border-color: var(--t-rose-bd);  }
.row .col-md-4 .card:nth-child(6n+2),
.row .col-md-6 .card:nth-child(6n+2) { background: var(--t-blush-bg); border-color: var(--t-blush-bd); }
.row .col-md-4 .card:nth-child(6n+3),
.row .col-md-6 .card:nth-child(6n+3) { background: var(--t-peach-bg); border-color: var(--t-peach-bd); }
.row .col-md-4 .card:nth-child(6n+4),
.row .col-md-6 .card:nth-child(6n+4) { background: var(--t-mauve-bg); border-color: var(--t-mauve-bd); }
.row .col-md-4 .card:nth-child(6n+5),
.row .col-md-6 .card:nth-child(6n+5) { background: var(--t-plum-bg);  border-color: var(--t-plum-bd);  }
.row .col-md-4 .card:nth-child(6n+6),
.row .col-md-6 .card:nth-child(6n+6) { background: var(--t-lilac-bg); border-color: var(--t-lilac-bd); }

/* Ensure headings inside auto-colored cards feel on-brand */
.row .col-md-4 .card:nth-child(6n+1) h5,
.row .col-md-6 .card:nth-child(6n+1) h5,
.row .col-md-4 .card:nth-child(6n+1) .fw-bold,
.row .col-md-6 .card:nth-child(6n+1) .fw-bold { color: var(--t-rose-h); }

.row .col-md-4 .card:nth-child(6n+2) h5,
.row .col-md-6 .card:nth-child(6n+2) h5,
.row .col-md-4 .card:nth-child(6n+2) .fw-bold,
.row .col-md-6 .card:nth-child(6n+2) .fw-bold { color: var(--t-blush-h); }

.row .col-md-4 .card:nth-child(6n+3) h5,
.row .col-md-6 .card:nth-child(6n+3) h5,
.row .col-md-4 .card:nth-child(6n+3) .fw-bold,
.row .col-md-6 .card:nth-child(6n+3) .fw-bold { color: var(--t-peach-h); }

.row .col-md-4 .card:nth-child(6n+4) h5,
.row .col-md-6 .card:nth-child(6n+4) h5,
.row .col-md-4 .card:nth-child(6n+4) .fw-bold,
.row .col-md-6 .card:nth-child(6n+4) .fw-bold { color: var(--t-mauve-h); }

.row .col-md-4 .card:nth-child(6n+5) h5,
.row .col-md-6 .card:nth-child(6n+5) h5,
.row .col-md-4 .card:nth-child(6n+5) .fw-bold,
.row .col-md-6 .card:nth-child(6n+5) .fw-bold { color: var(--t-plum-h); }

.row .col-md-4 .card:nth-child(6n+6) h5,
.row .col-md-6 .card:nth-child(6n+6) h5,
.row .col-md-4 .card:nth-child(6n+6) .fw-bold,
.row .col-md-6 .card:nth-child(6n+6) .fw-bold { color: var(--t-lilac-h); }

/* ===== Site-wide pink ⇄ burgundy gradient ===== */
body{
  color: var(--oh-ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,77,141,.16), transparent 60%),
    radial-gradient(900px 520px  at -10%  25%, rgba(122,30,58,.14), transparent 60%),
    linear-gradient(135deg, #FFEEF5 0%, #FCE4EC 38%, #EBD1DD 65%, #7A1E3A 120%);
  background-repeat: no-repeat;
  background-size: cover, cover, 100% 100%;
}
@media (min-width: 992px){
  body{ background-attachment: fixed, fixed, fixed; }
}

/* ===== Navbar: dark, on-brand gradient (aligned with footer) ===== */
.navbar{
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(255,77,141,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(122,30,58,.35), transparent 60%),
    linear-gradient(180deg, #300916, #14060B) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Navbar content: make it legible on dark bg */
.navbar .navbar-brand,
.navbar .nav-link{ color:#fff !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#FFE7F1 !important; }
.navbar .dropdown-menu{
  background: #1b0a12;
  border: 1px solid rgba(255,77,141,.25);
}
.navbar .dropdown-item{ color:#FFE7F1; }
.navbar .dropdown-item:hover{ background: rgba(255,77,141,.12); color:#fff; }

/* Toggler (hamburger) on dark bg */
.navbar .navbar-toggler{ border-color: rgba(255,255,255,.35); }
.navbar .navbar-toggler:focus{ box-shadow: 0 0 0 .15rem rgba(255,77,141,.35); }
.navbar .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255,255,255,.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Optional: make hero captions pop on the colorful bg */
.carousel-caption{
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.15);
}

/* Buttons stay on-brand over dark navbar/footer */
.btn-outline-light{ border-color:#FFE7F1; color:#FFE7F1; }
.btn-outline-light:hover{ background:#FFE7F1; color:#300916; }

/* Ensure footer stays consistent with navbar */
footer{
  background:
    radial-gradient(800px 400px at 10% -10%, rgba(255,77,141,.25), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(122,30,58,.35), transparent 60%),
    linear-gradient(180deg, #300916, #14060B);
  color:#fff;
}
footer a{ color:#FFE7F1; }
footer a:hover{ opacity:.85; }

/* --- Sophisticated hero polish --- */
.hero { position: relative; overflow: hidden; }
.hero .hero-img { height: 70vh; width: 100%; object-fit: cover; display: block; }

/* On-brand gradient film over imagery */
.hero-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(255,77,141,.25), transparent 60%),
    radial-gradient(900px 500px at -10%  25%, rgba(122,30,58,.22), transparent 60%);
  mix-blend-mode: normal;
}

/* Glass caption card with subtle border + blur */
.caption-card{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.35rem;
  max-width: 760px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* Per-slide alignment for variety */
.caption-card.align-start { left: 4%; right: auto; text-align: left; }
.caption-card.align-center { left: 50%; transform: translateX(-50%); }
.caption-card.align-end   { right: 4%; left: auto; text-align: right; }

/* Smarter spacing for small screens */
@media (max-width: 767.98px){
  .caption-card{
    max-width: 90%;
    padding: 1rem 1rem 1.1rem;
  }
  .caption-card.align-start,
  .caption-card.align-end{
    left: 50%; right:auto; transform: translateX(-50%); text-align:center;
  }
}

/* Indicators with on-brand colors and larger hit-area */
.sophisticated-indicators [data-bs-target]{
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,77,141,.65);
  border: 1px solid rgba(255,255,255,.35);
  margin: 0 6px;
}
.sophisticated-indicators .active{
  background: var(--oh-primary);
  border-color: rgba(255,255,255,.8);
}

/* Boost captions’ type a bit */
.caption-card h1 { letter-spacing: .2px; }
.caption-card .lead { color: #f1f3f5; opacity: .95; }

/* Control buttons a touch more visible over color imagery */
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Ensure overlay is behind, carousel is on top */
.hero{ position: relative; z-index: 0; }
.hero-overlay{ position:absolute; inset:0; z-index: 0; pointer-events:none; }
#homeCarousel{ position: relative; z-index: 1; }

/* Guarantee visible height even if an image fails to load */
.hero,
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item { min-height: 60vh; }
.hero .hero-img{ height: 100vh; min-height: 60vh; width:100%; object-fit:cover; display:block; }

/* Keep captions readable */
.carousel-caption.caption-card{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1.25rem;
}

* --- Fix hero caption clipping & position --- */

/* Allow caption shadows and rounded corners to show */
.hero .carousel-item{ overflow: visible; }          /* was hidden via Bootstrap */
.hero .carousel-inner{ overflow: visible; }         /* extra safety */

/* Lift captions so they don't sit on the edge */
.carousel-caption{ bottom: 8vh; }                    /* was ~1.25rem */
@media (max-width: 991.98px){
  .carousel-caption{ bottom: 5vh; }                  /* a bit tighter on tablets/phones */
}
@media (max-width: 575.98px){
  .carousel-caption{ bottom: 3vh; }                  /* smallest screens */
}

/* Keep a comfortable hero height so text fits */
.hero .hero-img{ height: 74vh; min-height: 60vh; }   /* was 70vh */

/* Ensure the hero itself isn't cutting anything */
.hero{ overflow: visible; position: relative; }

/* Optional: nudge the caption card's internal padding down a touch */
.carousel-caption.caption-card{
  padding-bottom: 1.4rem;
}

/* Bright pink brand accent for "Health" */
.brand-pink{
  /* solid fallback */
  color: var(--oh-accent) !important; /* #FF4D8D from your palette */

  /* gradient text for extra pop (supported widely) */
  background: linear-gradient(90deg, #FF78A8, #FF4D8D 60%, #FF81AE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* subtle glow for dark navbar */
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.navbar .navbar-brand:hover .brand-pink{
  filter: brightness(1.05);
}