/* ============================================================
   Tirumala Theme — Hero background & sacred decorative styles
   Override file: does not modify style.css
   ============================================================ */

/* Hero — Tirumala Temple Staircase 1 */
.hero-home {
  position: relative;
  background: url('../assets/Tirumala_Venkateswara_temple_staircase_1.webp') center center / cover no-repeat;
  padding: 100px 0 0;
}

/* Om watermark */
.hero-om {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  font-size: 22rem;
  color: var(--accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

/* Hero content above the Om watermark */
.hero-home .container { position: relative; z-index: 1; }

/* ── Single unified background panel ── */
.hero-panel {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(245, 166, 35, 0.5);
  border-radius: 18px;
  padding: 32px 28px;
}

/* Hero card (right side) — transparent inside the panel */
.hero-card {
  background: transparent;
  backdrop-filter: none;
  border: none;
  padding: 0;
}

/* Card badges */
.card-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 20, 40, 0.65);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}
.card-badge i { color: var(--accent); }
.card-badge span { color: #fff; }

/* Divider between left and right column on desktop */
@media (min-width: 992px) {
  .hero-panel .col-lg-7 {
    border-right: 1px solid rgba(245, 166, 35, 0.25);
    padding-right: 32px;
  }
  .hero-panel .col-lg-5 {
    padding-left: 32px;
  }
}

/* Temple arch wave divider */
.hero-wave {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  line-height: 0;
}
.hero-wave svg { display: block; width: 100%; }

/* Hero text */
.hero-home h1 {
  color: var(--accent);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.hero-home h1 span { color: #fff; }
.hero-home p.lead {
  color: #fff8e7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Badge-pill: shrink to text width (parent is flex-column) */
.hero-home .badge-pill {
  align-self: flex-start;
  font-size: 0.75rem;
}

/* Quick info pills */
.hero-quick-info {
  margin-top: 12px;
  margin-bottom: 24px;
  gap: 8px;
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .hero-quick-info { flex-wrap: nowrap; }
}
.hero-quick-info .info-item {
  background: rgba(10, 20, 40, 0.65);
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 20px;
  padding: 5px 10px;
  color: var(--accent);
  text-shadow: none;
  font-size: 0.78rem;
  gap: 6px;
  white-space: nowrap;
}
.hero-quick-info .info-item span { color: #fff; }
.hero-quick-info .info-item i { font-size: 0.85rem; }

/* Phone number in hero card */
.hero-card .phone-number { margin-bottom: 2px; }

/* ============================================================
   NAVBAR — mobile fix (prevent logo truncation)
   ============================================================ */
@media (max-width: 991px) {
  .main-nav .navbar-brand img,
  .main-nav.scrolled .navbar-brand img {
    height: 48px !important;
    width: auto !important;
    transition: none !important;
  }
  .main-nav .navbar-brand picture {
    display: inline-flex;
    align-items: center;
    height: 48px;
    overflow: hidden;
  }
  .main-nav .navbar-brand {
    padding: 6px 0;
  }
}

@media (max-width: 575px) {
  .main-nav .navbar-brand img,
  .main-nav.scrolled .navbar-brand img {
    height: 40px !important;
    width: auto !important;
    transition: none !important;
  }
  .main-nav .navbar-brand picture {
    height: 40px;
  }
  .brand-name {
    font-size: 0.82rem;
  }
  .brand-name span {
    font-size: 0.65rem;
  }
}

/* ============================================================
   HERO — mobile responsive
   ============================================================ */
@media (max-width: 991px) {
  .hero-home { padding: 72px 0 0; }
  .hero-om { font-size: 14rem; }
  .hero-panel { padding: 22px 18px; }
}

@media (max-width: 767px) {
  .hero-home { padding: 58px 0 0; }
  .hero-om { font-size: 10rem; opacity: 0.05; }
  .hero-panel { padding: 18px 14px; border-radius: 14px; }
  .hero-home h1 { font-size: 1.65rem; }
  .hero-quick-info { gap: 6px; }
  .hero-quick-info .info-item { padding: 4px 8px; font-size: 0.75rem; }
  .card-badge { font-size: 0.82rem; padding: 5px 10px; }
  .hero-wave { margin-top: 28px; }
}

@media (max-width: 575px) {
  .hero-home { padding: 54px 0 0; }
  .hero-om { display: none; }
  .hero-panel { padding: 16px 12px; border-radius: 12px; }
  .hero-home h1 { font-size: 1.45rem; }
}