/* =========================================
   THEME & BOOTSTRAP VARIABLE OVERRIDES
========================================= */
:root {
  /* Brand palette */
  --color-primary: #F09A07; /* saffron-orange */
  --color-accent: #0C3B48;  /* deep teal contrast */
  --color-dark: #1A1A1A;
  --color-light: #F9FAFB;

  /* Header heights */
  --header-h-lg: 120px;
  --header-h-md: 100px;
  --header-h-sm: 82px;

  /* Bootstrap variables */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 237, 155, 17;
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: #C47E0D;
  --bs-focus-ring-color: rgba(237,155,17, .25);
}

/* =========================================
   GLOBAL STYLES
========================================= */
body.has-fixed-header { padding-top: var(--header-h-lg); }
@media (max-width: 991.98px){ body.has-fixed-header { padding-top: var(--header-h-md); } }
@media (max-width: 575.98px){ body.has-fixed-header { padding-top: var(--header-h-sm); } }

/* Small breathing room between header <-> content and before footer */
#main { padding-top: 1rem; padding-bottom: 1rem; }

a {
  color: var(--bs-link-color);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
a:hover { color: var(--bs-link-hover-color); text-decoration: underline; }

.bg-body { background-color: var(--color-light); }

/* Typography + section/card titles */
h1, h2, h3, h4, h5, h6,
.section-title,
.card .card-title {
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  margin-bottom: 1rem;
}
h1::after, h2::after, h3::after, h4::after, h5::after, h6::after,
.section-title::after,
.card .card-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: .4rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-light));
  border-radius: 3px;
}

/* =========================================
   HEADER / NAV
========================================= */
header {
  background: var(--color-light);
  color: var(--color-dark);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
header .navbar { background: transparent; }

/* Logo & decorative images */
.deity-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  flex-shrink: 0;
}
.logo-img {
  width: 350px;
  height: 100px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}

/* Navbar links */
.navbar-nav .nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  padding: .8rem 1rem;
  color: #222;
  text-decoration: none !important;
  transition: color .2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-primary);
  text-decoration: none !important;
}
.navbar-nav .nav-link.active {
  color: var(--color-primary);
}

/* Custom underline */
.nav-underline { position: relative; text-decoration: none; }
.nav-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--color-primary);
  transition: width .2s ease;
}
.nav-underline:hover::after,
.nav-underline:focus-visible::after { width: 100%; }

/* Toggler size */
.navbar-toggler-icon { width: 1.9em; height: 1.9em; background-size: 1.9em 1.9em; }

/* =========================================
   BUTTONS & FORMS
========================================= */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-primary:hover {
  background-color: var(--bs-link-hover-color) !important;
  border-color: var(--bs-link-hover-color) !important;
}

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

.btn-link { color: var(--bs-link-color); text-decoration: underline; }
.btn-link:hover { color: var(--bs-link-hover-color); }

.btn-light {
  color: var(--color-dark);
  border-color: rgba(0,0,0,.08);
}
.btn-light:hover {
  background: #fff;
  border-color: rgba(15,76,92,.25);
}

.btn:focus, .form-control:focus, .nav-link:focus {
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color) !important;
  outline: none;
}

/* =========================================
   CAROUSEL / HERO
========================================= */
.hero-bleed{
  margin-top:.35rem;
  background:#F9FAFB;
}
.hero-gutters{ padding-left:1rem; padding-right:1rem; }
@media (min-width:768px){ .hero-gutters{ padding-left:1.25rem; padding-right:1.25rem; } }
@media (min-width:992px){ .hero-gutters{ padding-left:1.5rem;  padding-right:1.5rem; } }

.carousel-hero {
  position: relative;
  height: 520px;
  background: #F9FAFB;
  overflow: hidden;
  width: 100%;
}
.carousel-hero .carousel-item { position: relative; height: 100%; }
.carousel-hero .carousel-image-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-hero .carousel-image-wrapper img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.carousel-hero .carousel-caption { text-shadow: 0 2px 6px rgba(0,0,0,.55); }
.carousel-caption h1::after,
.carousel-caption h2::after,
.carousel-caption h3::after,
.carousel-caption h4::after,
.carousel-caption h5::after,
.carousel-caption h6::after { content: none !important; }

/* Darker previous/next arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0.25) invert(0);
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  background-size: 60%;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Responsive heights */
@media (max-width:992px){ .carousel-hero{ height:380px; } }
@media (max-width:576px){ .carousel-hero{ height:240px; } }

/* =========================================
   CARDS
========================================= */
.feature-card,
.card.feature-card {
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, z-index .2s ease;
  z-index: 1;
  border-radius: 14px;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  border-color: var(--color-primary);
  z-index: 2;
}
.card .stretched-link::after { border-radius: 14px; }

/* Card carousels: scale down images (no crop) */
.card-carousel { position: relative; }
.card-carousel .carousel-inner,
.card-media {
  height: 220px;
  background: var(--color-light);
  overflow: hidden;
}
.card-carousel .carousel-item { height: 100%; }
.card-carousel .center-wrap,
.card-media .center-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-carousel img,
.card-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}
.card-carousel .carousel-control-prev,
.card-carousel .carousel-control-next { z-index: 3; }

/* Equal-height cards with scrollable summary */
.feature-card { display: flex; flex-direction: column; height: 100%; }
.feature-card .card-body { display: flex; flex-direction: column; height: 100%; }
.feature-card .content-scroll{
  height:150px; overflow-y:auto; margin-bottom:1rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--color-primary) rgba(0,0,0,.06);
  scrollbar-gutter:stable;
}
.feature-card .download-btn { margin-top:auto; align-self:flex-start; }
.feature-card .content-scroll::-webkit-scrollbar{ width:6px; }
.feature-card .content-scroll::-webkit-scrollbar-thumb{
  background-color:var(--color-primary); border-radius:4px;
}

/* =========================================
   CTA BAND
========================================= */
.cta-band {
  background: var(--color-light);
  color: var(--color-dark);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cta-band .btn-cta {
  background: linear-gradient(90deg, var(--color-primary), var(--color-light));
  border: none; color: #fff; font-weight: 600;
}
.cta-band .btn-cta:hover { filter: brightness(.96); box-shadow: 0 8px 22px rgba(15,76,92,.25); }

/* =========================================
   FOOTER
========================================= */
footer {
  background: var(--color-light);
  color: var(--color-dark);
  border-top: 1px solid rgba(0,0,0,.06);
}
footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: 2.25rem 1rem; }
footer .footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; align-items: start;
}
footer h3 { font-size: 1.05rem; margin-bottom: .75rem; font-weight: 700; position: relative; }
footer h3::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: .4rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-light)); border-radius: 3px;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li + li { margin-top: .35rem; }
footer a { text-decoration: none; color: #333; transition: color .2s ease; }
footer a:hover { color: var(--color-primary); }

.footer-social { display: flex; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 1rem 0; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#333;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.footer-social a:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); border-color:var(--color-primary); color:var(--color-primary); }
.footer-social svg{ width:20px; height:20px; }
.counter-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem;
  border-radius:999px; background:rgba(15,76,92,.06); border:1px solid rgba(15,76,92,.15);
  font-weight:600; color:#123;
}
footer .footer-divider{
  margin-top:1.25rem; padding-top:1rem; border-top:1px dashed rgba(0,0,0,.12);
  display:flex; justify-content:space-between; font-size:.95rem; color:#444;
}

/* =========================================
   PAGE GUTTERS
========================================= */
.page-gutters { padding-left: 1rem; padding-right: 1rem; }
@media (min-width:768px){ .page-gutters{ padding-left:1.25rem; padding-right:1.25rem; } }
@media (min-width:992px){ .page-gutters{ padding-left:1.5rem;  padding-right:1.5rem; } }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 992px) {
  .deity-img { width: 72px; height: 72px; }
  .logo-img { width: 280px; height: 80px; }
  .carousel-hero { height: 380px; }
  footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .deity-img { width: 60px; height: 60px; }
  .logo-img { width: 220px; height: 65px; }
  .navbar-nav .nav-link { font-size: 1rem; padding: .6rem .8rem; }
  .carousel-hero { height: 240px; }
  footer .footer-grid { grid-template-columns: 1fr; }
  footer .footer-divider { flex-direction: column; gap: .5rem; align-items: flex-start; }
}

/* =========================================
   MODALS (gallery/backdrop)
========================================= */
.modal-backdrop.show { backdrop-filter: blur(6px); background-color: rgba(0,0,0,.35); }
.modal-fullscreen .carousel-control-prev-icon,
.modal-fullscreen .carousel-control-next-icon{
  filter:brightness(0.2); background-color:rgba(255,255,255,0.15);
  width:3.2rem; height:3.2rem; border-radius:50%; background-size:60%;
}
.modal-fullscreen .carousel-control-prev-icon:hover,
.modal-fullscreen .carousel-control-next-icon:hover{ background-color:rgba(255,255,255,0.28); }

/* Gallery (fixed black window) */
.gallery-modal .modal-dialog{ margin:1.25rem auto; max-width:min(92vw,1100px); }
.gallery-modal .modal-content{ background:#000; border-radius:14px; }
.gallery-modal .gallery-viewport{ width:100%; height:min(78vh,800px); background:#000; margin:0 auto; overflow:hidden; }
.gallery-modal .carousel, .gallery-modal .carousel-inner, .gallery-modal .carousel-item{ height:100%; }
.gallery-modal .center-wrap{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.gallery-modal .center-wrap img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; margin:0; }
.gallery-modal .carousel-control-prev,
.gallery-modal .carousel-control-next,
.gallery-modal .carousel-indicators{ z-index:3; }
.gallery-modal .carousel-control-prev-icon,
.gallery-modal .carousel-control-next-icon{
  filter:brightness(.85); background-color:rgba(255,255,255,.18);
  border-radius:50%; width:3rem; height:3rem; background-size:60%;
}
.gallery-modal .carousel-control-prev-icon:hover,
.gallery-modal .carousel-control-next-icon:hover{ background-color:rgba(255,255,255,.28); }
.gallery-modal .carousel-indicators{ margin-bottom:.75rem; }
.gallery-modal .carousel-indicators [data-bs-target]{ background-color:rgba(255,255,255,.6); }
.gallery-modal .carousel-indicators .active{ background-color:#fff; }
.gallery-modal .modal-header .btn-close{ filter:invert(1); opacity:.85; }
.gallery-modal .modal-header .btn-close:hover{ opacity:1; }

/* =========================================
   PROFILE SHELL (sidebar + content)
========================================= */
.profile-shell{ width:90%; margin:0 auto; display:flex; gap:2rem; }
.sidebar-col{ flex:0 0 20%; max-width:20%; }
.content-col{ flex:1 1 80%; max-width:80%; }
@media (max-width: 991.98px){ .sidebar-col, .content-col{ flex:0 0 100%; max-width:100%; } }

.list-group-item.active{
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color:#fff !important; font-weight:600;
  box-shadow:0 2px 8px rgba(245,158,11,.4);
}
.list-group-item-action:hover{ background-color:rgba(245,158,11,.1); color:var(--color-primary); }
.list-group-item{ border:none; border-radius:0; padding:.8rem 1rem; font-size:1rem; }

/* =========================================
   FAMILY TREE (compact with proper connectors)
========================================= */
/* ===== Family tree: compact nodes + accurate connectors ===== */
/* ===== Family tree: compact nodes + accurate connectors ===== */
.family-tree{ display:flex; flex-direction:column; align-items:center; gap:1.35rem; }
.tree-level  { display:flex; flex-direction:column; align-items:center; }

/* person */
.person-node{ text-align:center; cursor:pointer; user-select:none; min-width:86px; }
.person-node .avatar{
  --size:84px; width:var(--size); height:var(--size); border-radius:50%;
  background-size:cover; background-position:center;
  border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.person-node .pname{ font-weight:600; margin-top:.35rem; max-width:140px; font-size:.95rem; }
.person-node:hover .avatar{ outline:3px solid var(--color-primary); }
.person-node.ghost .avatar{ background:#f1f1f1; box-shadow:none; border:2px dashed rgba(0,0,0,.12); }

/* couple row (two partners + a short line) */
.couple-row{ position:relative; display:flex; align-items:center; gap:1.25rem; }
.spouse-line{ flex:0 0 56px; height:2px; background:rgba(0,0,0,.24); margin:-2px; }

/* ===== parents above each adult ===== */
.parents-wrap{ display:flex; gap:2.25rem; justify-content:center; margin-bottom:.25rem; flex-wrap:wrap; }
.parent-stack{ display:flex; flex-direction:column; align-items:center; gap:.55rem; }

/* two parents joined by a bridge */
.parent-pair{ position:relative; display:flex; align-items:center; gap:1.25rem; }
.parent-bridge{
  position:absolute; left:calc(50% - 46px); right:calc(50% - 46px);
  top:42px; height:2px; background:rgba(0,0,0,.24);
}
/* vertical from parents’ bridge down to the adult below */
.parent-down{
  width:2px; height:68px; background:rgba(0,0,0,.24);
  margin-top:2px; align-self:center;
}

/* ===== trunk from couple to children ===== */
.trunk-down{
  width:2px; height:72px; background:rgba(0,0,0,.24);
  margin:.25rem 0 .35rem 0; align-self:center;
}

/* children row with full-width split (bus-bar) */
.children-row{
  position:relative; display:flex; gap:1.35rem; align-items:flex-start; flex-wrap:wrap;
  padding:10px 14px 0;
}
.children-row::before{
  content:""; position:absolute; top:0; left:8px; right:8px;
  height:2px; background:rgba(0,0,0,.24);
}

/* drop from the split to each child */
.child-subtree{ position:relative; display:flex; }
.child-subtree::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2px; height:18px; background:rgba(0,0,0,.24);
}

@media (max-width:600px){
  .children-row::before{ left:4px; right:4px; }
  .parent-down{ height:58px; }
  .trunk-down{ height:62px; }
}
/* --- Family tree wiring canvas --- */
.family-tree { position: relative; }            /* anchor for absolute SVG */
.tree-wires {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;                          /* lines never block clicks */
}
.tree-wires line {
  stroke: rgba(0,0,0,.24);
  stroke-width: 2;
  shape-rendering: geometricPrecision;
}

/* (Optional) slightly tighter avatars so bigger trees fit better) */
.person-node .avatar { --size: 78px; }          /* was 84px */
.person-node .pname { font-size: .9rem; max-width: 130px; }

/* Keep rows centered */
.parents-wrap, .couple-row, .children-row { justify-content: center; }