/* =========================================================
   Catechism Department — Archeparchy of Kottayam
   Shared stylesheet for all pages
   ========================================================= */

:root{
  --maroon:#a40000;
  --maroon-deep:#910000;
  --gold:#c9a227;
  --gold-soft:#e6c866;
  --cream:#fbf7ee;
  --ink:#2a2420;
  --sage:#56624f;
  --line:#e7ddc7;
}

html{scroll-behavior:smooth;}
body{font-family:'Source Sans 3', sans-serif; color:var(--ink); background:var(--cream);}
h1,h2,h3,h4,.display-font{font-family:'Fraunces', serif;}

.eyebrow{
  font-family:'Source Sans 3', sans-serif;
  font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--maroon);font-weight:700;
}
.eyebrow.on-dark{ color:var(--gold-soft); }

a{color:var(--maroon);}
a:hover{color:var(--maroon-deep);}

/* ---------- Top info bar ---------- */
.topbar{background:var(--maroon-deep); color:#f1e6d8; font-size:.85rem;}
.topbar a{color:#f1e6d8; text-decoration:none;}
.topbar a:hover{color:var(--gold-soft);}
.topbar .divider{color:#8a4f57;}

/* ---------- Navbar (sticky) ---------- */
.navbar-cat{background:var(--cream); border-bottom:1px solid var(--line);}
.navbar-cat .navbar-brand img{height:52px;}
.navbar-cat .nav-link{color:var(--ink); font-weight:600; font-size:.98rem; margin:0 .7rem;}
.navbar-cat .nav-link:hover, .navbar-cat .nav-link.active{color:var(--maroon);}
.btn-login{
  border:1.5px solid var(--maroon); color:var(--maroon); font-weight:600;
  border-radius:999px; padding:.45rem 1.2rem; text-decoration:none; white-space:nowrap;
}
.btn-login:hover{background:var(--maroon); color:#fff;}
.btn-gold{
  background:var(--gold); border:none; color:var(--maroon-deep); font-weight:700;
  border-radius:999px; padding:.55rem 1.4rem; display:inline-block; text-decoration:none;
}
.btn-gold:hover{background:var(--gold-soft); color:var(--maroon-deep);}
.btn-outline-cream{
  border:1.5px solid #f1e6d8; color:#fff; font-weight:600; border-radius:999px; padding:.55rem 1.4rem;
  text-decoration:none; display:inline-block;
}
.btn-outline-cream:hover{background:#f1e6d8; color:var(--maroon-deep);}
.btn-maroon-outline{
  border:1.5px solid var(--maroon); color:var(--maroon); font-weight:600; border-radius:999px;
  padding:.5rem 1.3rem; text-decoration:none; display:inline-block; background:transparent;
}
.btn-maroon-outline:hover{background:var(--maroon); color:#fff;}

/* ---------- Page header banner (inner pages) ---------- */
.page-header{
  position:relative;
  background:radial-gradient(120% 160% at 15% 0%, var(--maroon) 0%, var(--maroon-deep) 55%, #300a10 100%);
  color:#fff; padding:3.6rem 0 3rem; overflow:hidden;
}
.page-header .rays{
  position:absolute; top:50%; left:85%; width:600px; height:600px; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(201,162,39,.14) 0deg 4deg, transparent 4deg 18deg);
  border-radius:50%; animation:spin 60s linear infinite; pointer-events:none;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.page-header h1{font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600; margin-bottom:.6rem;}
.breadcrumb-cat{list-style:none; display:flex; gap:.5rem; padding:0; margin:0; font-size:.9rem; color:#e9d9c4;}
.breadcrumb-cat li+li::before{content:"/"; margin-right:.5rem; color:#a9727a;}
.breadcrumb-cat a{color:#e9d9c4; text-decoration:none;}
.breadcrumb-cat a:hover{color:var(--gold-soft);}
.breadcrumb-cat li.current{color:#fff; font-weight:600;}
.page-header-arch{display:block; width:100%; height:36px; fill:var(--cream); position:relative;}

@media (prefers-reduced-motion: reduce){
  .page-header .rays{animation:none !important;}
}

/* ---------- Sections ---------- */
section{padding:5rem 0;}
.section-title{ font-size:clamp(1.7rem,2.6vw,2.3rem); font-weight:600; margin-bottom:.6rem; }
.section-head{margin-bottom:2.8rem;}
.rule-gold{ width:56px;height:3px;background:var(--gold); border-radius:3px;margin:.6rem 0 0; }
.bg-alt{background:#fff;}

/* ---------- Cards: about ---------- */
.about-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:2.2rem; height:100%; }
.about-card i{color:var(--maroon); font-size:1.6rem;}

/* ---------- Leaders slider (carousel) ---------- */
.leader-slide{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:3rem; display:flex; gap:2.5rem; align-items:center;
}
.leader-slide img{
  width:400px;height:400px;border-radius:50%;object-fit:cover;
  border:5px solid var(--cream); box-shadow:0 10px 26px rgba(110,20,35,.2); flex-shrink:0;
}
.leader-slide h3{font-size:1.5rem;margin-bottom:.2rem;}
.leader-slide .role{color:var(--sage);font-weight:700;font-size:.92rem;margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.04em;}
.leader-slide p{color:#5b5148;font-size:.96rem;margin:0;}
#leaderCarousel .carousel-control-prev, #leaderCarousel .carousel-control-next{
  width:48px;height:48px;top:50%;transform:translateY(-50%); background:var(--maroon); border-radius:50%; opacity:1;
}
#leaderCarousel .carousel-control-prev{left:-10px;}
#leaderCarousel .carousel-control-next{right:-10px;}
#leaderCarousel .carousel-control-prev-icon, #leaderCarousel .carousel-control-next-icon{width:1.1rem;height:1.1rem;}
.carousel-indicators-cat{ display:flex; justify-content:center; gap:.5rem; margin-top:1.8rem; }
.carousel-indicators-cat button{width:10px;height:10px;border-radius:50%;border:none;background:var(--line);padding:0;}
.carousel-indicators-cat button.active{background:var(--maroon);}

/* ---------- Three circle leaders ---------- */
.leader-card{text-align:center;}
.leader-photo{
  width:150px;height:150px;border-radius:50%;object-fit:cover;
  border:4px solid #fff; box-shadow:0 8px 20px rgba(110,20,35,.18); margin:0 auto 1rem;
}
.leader-card h3{font-size:1.05rem; margin-bottom:.15rem;}
.leader-role{color:var(--sage); font-size:.88rem; font-weight:600;}

/* ---------- YouTube video gallery ---------- */
.yt-section{background:var(--maroon-deep); color:#f1e6d8;}
.yt-section .section-title{color:#fff;}
.yt-player{
  position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.yt-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.yt-now-title{font-weight:700; font-size:1.15rem; margin-top:1rem; color:#fff;}
.yt-now-sub{color:#cbb3a4; font-size:.88rem;}
.yt-list{max-height:520px; overflow-y:auto; padding-right:.3rem;}
.yt-item{ display:flex; gap:.75rem; padding:.6rem; border-radius:10px; cursor:pointer; transition:background .15s ease; }
.yt-item:hover, .yt-item.active{background:rgba(255,255,255,.08);}
.yt-item .thumb{ position:relative; width:120px;min-width:120px;height:68px;border-radius:8px;overflow:hidden; }
.yt-item .thumb img{width:100%;height:100%;object-fit:cover;}
.yt-item .thumb .play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.25);color:#fff;font-size:1rem; }
.yt-item .meta h4{font-size:.9rem;margin:0 0 .2rem;color:#fff;font-weight:600;line-height:1.3;}
.yt-item .meta span{font-size:.78rem;color:#cbb3a4;}
.yt-list::-webkit-scrollbar{width:6px;}
.yt-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25); border-radius:6px;}

/* ---------- News ---------- */
.news-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;height:100%;
  transition:box-shadow .2s ease, transform .2s ease;
}
.news-card:hover{box-shadow:0 14px 28px rgba(110,20,35,.14); transform:translateY(-3px);}
.news-card img{height:190px;object-fit:cover;width:100%;}
.news-card a.stretched-link{color:inherit;}
.news-date{
  display:inline-flex;flex-direction:column;align-items:center;background:var(--maroon);color:#fff;
  border-radius:10px;padding:.4rem .7rem;line-height:1;margin-bottom:.8rem;
}
.news-date .d{font-size:1.2rem;font-weight:700;}
.news-date .m{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;}
.news-tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);}
.news-card h3{font-size:1.05rem;margin:.4rem 0 .5rem;}
.news-card p{font-size:.9rem;color:#5b5148;}
.news-card .card-body-cat{padding:1.2rem;}

.pagination-cat{display:flex; gap:.5rem; list-style:none; padding:0; justify-content:center; margin:0;}
.pagination-cat a, .pagination-cat span{
  display:flex; align-items:center; justify-content:center;
  width:42px;height:42px;border-radius:50%; text-decoration:none;
  color:var(--ink); border:1px solid var(--line); font-weight:600; font-size:.9rem;
}
.pagination-cat a:hover{border-color:var(--maroon); color:var(--maroon);}
.pagination-cat .active span{background:var(--maroon); color:#fff; border-color:var(--maroon);}

/* ---------- Sidebar (news details / general) ---------- */
.side-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem;}
.side-card h4{font-size:1.05rem; margin-bottom:1.1rem; font-family:'Fraunces',serif;}
.side-news-item{display:flex; gap:.9rem; margin-bottom:1rem; text-decoration:none; color:inherit;}
.side-news-item:last-child{margin-bottom:0;}
.side-news-item img{width:66px;height:66px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.side-news-item h5{font-size:.88rem; margin:0 0 .2rem; line-height:1.35; color:var(--ink); font-weight:600;}
.side-news-item span{font-size:.76rem; color:var(--sage);}
.tag-pill{
  display:inline-block; padding:.35rem .8rem; border:1px solid var(--line); border-radius:999px;
  font-size:.78rem; margin:0 .35rem .35rem 0; text-decoration:none; color:var(--ink);
}
.tag-pill:hover{background:var(--maroon); border-color:var(--maroon); color:#fff;}

/* ---------- Article body ---------- */
.article-body{font-size:1.02rem; line-height:1.8; color:#3a332c;}
.article-body h2,.article-body h3{margin-top:2rem;}
.article-meta{font-size:.88rem; color:var(--sage); display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.5rem;}
.article-meta span{display:inline-flex; align-items:center; gap:.4rem;}
.share-row a{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream); color:var(--maroon); margin-right:.5rem; border:1px solid var(--line);
}
.share-row a:hover{background:var(--maroon); color:#fff; border-color:var(--maroon);}

/* ---------- Photo gallery ---------- */
.gallery-item{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:1/1; display:block;}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item .cap{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem;
  background:linear-gradient(to top, rgba(20,5,8,.75), transparent);
  color:#fff;font-size:.85rem;font-weight:600;opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover .cap{opacity:1;}
.gallery-item .zoom-icon{
  position:absolute; top:.7rem; right:.7rem; width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s ease; font-size:.85rem;
}
.gallery-item:hover .zoom-icon{opacity:1;}

/* album card on gallery listing page */
.album-card{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3; display:block;
  text-decoration:none; color:#fff;
}
.album-card img{width:100%;height:100%;object-fit:cover; transition:transform .4s ease;}
.album-card:hover img{transform:scale(1.06);}
.album-card .overlay{
  position:absolute; inset:0; background:linear-gradient(to top, rgba(20,5,8,.85) 0%, rgba(20,5,8,.15) 55%, transparent 100%);
}
.album-card .info{position:absolute; left:0; right:0; bottom:0; padding:1.1rem;}
.album-card .info h3{font-size:1.15rem; margin-bottom:.2rem; color:#fff;}
.album-card .info span{font-size:.8rem; color:#e9d9c4;}
.album-count{
  position:absolute; top:.8rem; right:.8rem; background:rgba(0,0,0,.5); color:#fff;
  font-size:.75rem; padding:.25rem .6rem; border-radius:999px;
}

/* lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(20,8,10,.92); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:2rem;
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:90vw; max-height:82vh; border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.5);}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:none;
  width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:1.1rem;
  cursor:pointer;
}
.lightbox-close{top:1.5rem; right:1.5rem;}
.lightbox-prev{left:1.5rem; top:50%; transform:translateY(-50%);}
.lightbox-next{right:1.5rem; top:50%; transform:translateY(-50%);}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:var(--gold); color:var(--maroon-deep);}
.lightbox-caption{position:absolute; bottom:1.5rem; left:0; right:0; text-align:center; color:#e9d9c4; font-size:.9rem;}

/* ---------- Contact ---------- */
.contact-wrap{background:var(--maroon); border-radius:22px; color:#fff; overflow:hidden;}
.contact-info{padding:3rem;}
.contact-info .item{display:flex;gap:1rem;margin-bottom:1.6rem;align-items:flex-start;}
.contact-info .item i{color:var(--gold-soft); font-size:1.2rem; margin-top:.2rem;}
.contact-info .item h4{font-size:.95rem;margin-bottom:.15rem;}
.contact-info .item p, .contact-info .item a{font-size:.9rem;color:#e9d9c4;margin:0;}
.contact-form{background:#fff; padding:3rem; color:var(--ink);}
.contact-form .form-control{border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem;}
.contact-form .form-control:focus{border-color:var(--maroon); box-shadow:0 0 0 .2rem rgba(110,20,35,.12);}
.contact-form label{font-size:.85rem;font-weight:600;margin-bottom:.3rem;}
.map-frame{border-radius:18px; overflow:hidden; border:1px solid var(--line); height:100%; min-height:320px;}
.map-frame iframe{width:100%; height:100%; min-height:320px; border:0; display:block;}

.faq-item{border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.5rem; background:#fff; margin-bottom:1rem;}
.faq-item h4{font-size:1rem; margin-bottom:.5rem;}
.faq-item p{font-size:.9rem; color:#5b5148; margin:0;}

/* ---------- Stats strip (about page) ---------- */
.stat-box{text-align:center; padding:1.5rem 1rem;}
.stat-box .num{font-family:'Fraunces',serif; font-size:2.4rem; font-weight:600; color:var(--maroon);}
.stat-box .label{font-size:.85rem; color:var(--sage); text-transform:uppercase; letter-spacing:.05em; font-weight:600;}

.timeline{border-left:2px solid var(--line); padding-left:1.6rem; margin-left:.3rem;}
.timeline-item{position:relative; padding-bottom:2rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:""; position:absolute; left:-2.05rem; top:.25rem; width:14px;height:14px;border-radius:50%;
  background:var(--gold); border:3px solid var(--maroon);
}
.timeline-item h4{font-size:1rem; margin-bottom:.3rem;}
.timeline-item p{font-size:.9rem; color:#5b5148; margin:0;}

/* ---------- Footer ---------- */
footer{background:var(--maroon-deep); color:#d8c3b3; padding-top:3.5rem;}
footer h5{color:#fff;font-family:'Fraunces',serif;font-weight:600;margin-bottom:1rem;}
footer a{color:#d8c3b3;text-decoration:none;}
footer a:hover{color:var(--gold-soft);}
footer .fbottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem;padding:1.2rem 0;font-size:.85rem;}
.social-circle{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:#fff;margin-right:.5rem;
}
.social-circle:hover{background:var(--gold); color:var(--maroon-deep);}

:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

@media (max-width:767px){
  .leader-slide{flex-direction:column; text-align:center; padding:2rem 1.2rem;}
  .leader-slide img{width:150px;height:150px;}
}