/* =========================================================
   St. Ann's Catholic Church, Pokhara — Theme Stylesheet
   Loaded AFTER bootstrap.min.css and style.css to re-skin
   the inherited CodeIgniter front-end with a completely new
   warm, faith-inspired visual identity.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  /* Palette: warm gold + ivory + deep burgundy, inspired by the
     church's Japanese/Nepali architectural blend */
  --sa-cream:        #FBF6EC;
  --sa-cream-deep:   #F3E9D4;
  --sa-ivory:        #FFFFFF;
  --sa-ink:          #2E2620;
  --sa-ink-soft:     #5B5046;
  --sa-gold:         #B5862B;
  --sa-gold-deep:    #8E6A1F;
  --sa-gold-light:   #E8C77A;
  --sa-burgundy:     #6B2737;
  --sa-burgundy-deep:#4E1B28;
  --sa-sage:         #5C6B4F;
  --sa-border:        rgba(46,38,32,.10);
  --sa-shadow:        0 10px 30px rgba(46,38,32,.08);
  --sa-radius:        14px;
  --sa-font-display:  'Cormorant Garamond', Georgia, serif;
  --sa-font-body:      'Source Sans 3', -apple-system, Segoe UI, sans-serif;
    --font-size-body:        16px;
}

body{
  font-family: var(--sa-font-body);
  color: var(--sa-ink);
  background: var(--sa-cream);
  font-size:var(--font-size-body);
}

img {max-width:100%}

h1,h2,h3,h4,h5,h6{
  font-family: var(--sa-font-display);
  font-weight: 700;
  color: var(--sa-burgundy-deep);
  letter-spacing: .2px;
}

a{ color: var(--sa-burgundy); }
a:hover{ color: var(--sa-gold-deep); }

.container{ max-width: 1180px; }

/* ---------- Buttons ---------- */
.btn-red, .btn-blue, .btn-pink, .btn-dark{
  background: var(--sa-gold) !important;
  border-color: var(--sa-gold) !important;
  color: #fff !important;
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-weight: 600;
  letter-spacing: .3px;
  transition: all .25s ease;
  box-shadow: none !important;
}
.btn-red:hover, .btn-blue:hover, .btn-pink:hover, .btn-dark:hover{
  background: var(--sa-burgundy) !important;
  border-color: var(--sa-burgundy) !important;
  transform: translateY(-1px);
}
.btn-round{ border-radius: 30px !important; }
.btn-outline-gold{
  background: transparent !important;
  border: 2px solid var(--sa-gold) !important;
  color: var(--sa-gold-deep) !important;
  border-radius: 30px !important;
  padding: 10px 26px !important;
  font-weight: 600;
}
.btn-outline-gold:hover{ background: var(--sa-gold) !important; color: #fff !important; }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--sa-burgundy-deep);
  color: #f1e6c8;
  font-size: 13px;
  padding: 7px 0;
}
.topbar a{ color: #f1e6c8; }
.topbar a:hover{ color: var(--sa-gold-light); }
.topbar ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; }
.topbar .text-right ul{ justify-content:flex-end; }
.topbar .btn-pink{
  background: var(--sa-gold) !important;
  padding: 4px 16px !important;
  font-size: 12px;
}

/* ---------- Header / nav ---------- */
.logo-menu-wrapper{
  background: var(--sa-ivory);
  border-bottom: 1px solid var(--sa-border);
  box-shadow: var(--sa-shadow);
}
.navbar-brand img{ max-height: 64px; }
.navbar-nav .nav-link{
  font-family: var(--sa-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .3px;
  color: var(--sa-ink) !important;
  padding: 26px 16px !important;
  text-transform: uppercase;
}
.navbar-nav .nav-link:hover{ color: var(--sa-burgundy) !important; }
.navbar-nav .dropdown-menu{
  border-radius: 10px;
  border: 1px solid var(--sa-border);
  box-shadow: var(--sa-shadow);
}

/* ---------- Hero / banner carousel ---------- */
.banner{ position: relative; }
.banner .carousel-item img{ height: 78vh; min-height:420px; object-fit: cover; filter: brightness(.62) saturate(1.05); }
.hero-overlay{
  position: absolute; inset:0; display:flex; align-items:center;
  background: linear-gradient(180deg, rgba(46,38,32,.10) 0%, rgba(46,38,32,.55) 100%);
}
.hero-overlay .hero-content{ color:#fff; max-width: 720px; }
.hero-overlay .hero-kicker{
  font-family: var(--sa-font-body); text-transform:uppercase; letter-spacing:3px;
  font-size:13px; color: var(--sa-gold-light); margin-bottom: 14px; display:block;
}
.hero-overlay h1{
  color:#fff; font-size: 52px; line-height:1.15; margin-bottom: 18px;
}
.hero-overlay p{ font-size: 19px; color:#f3ead9; margin-bottom: 28px; }

/* ---------- Innerpage banner ---------- */
.innerpage-banner{
  background: linear-gradient(135deg, var(--sa-burgundy-deep), var(--sa-burgundy));
  padding: 90px 0 50px;
  position: relative;
}
.innerpage-banner h1{ color:#fff; font-size:42px; margin:0; }
.page-branch{ background: var(--sa-cream-deep) !important; padding: 14px 0; }
.page-branch .breadcrumb{ background:transparent; margin:0; padding:0; font-size:13px; }
.page-branch .breadcrumb-item.active{ color: var(--sa-gold-deep); }

/* ---------- Section rhythm ---------- */
.section-wrapper{ padding: 70px 0; }
.section-title{ text-align:center; margin-bottom: 44px; }
.section-title .kicker{
  display:block; text-transform:uppercase; letter-spacing:3px; font-size:13px;
  color: var(--sa-gold-deep); font-weight:600; margin-bottom:10px;
}
.section-title h2{ font-size: 38px; margin:0; }
.bg-light{ background: var(--sa-cream-deep) !important; }
.bg-burgundy{ background: var(--sa-burgundy-deep); color:#f1e6c8; }

/* ---------- Welcome / intro block (home) ---------- */
.welcomebox{ padding: 80px 0; background: var(--sa-ivory); }
.welcomebox .cover img{ border-radius: var(--sa-radius); box-shadow: var(--sa-shadow); }
.welcomebox .info h2{ font-size: 36px; margin-bottom: 18px; }
.welcomebox .contenthold{ color: var(--sa-ink-soft); line-height:1.75; }

/* ---------- Mass schedule strip ---------- */
/* CTA banner (redesigned — warm gold gradient, clearly distinct from the dark burgundy footer) */
.cta-banner-v2{
  background: linear-gradient(135deg, var(--sa-gold-light) 0%, var(--sa-gold) 60%, var(--sa-gold-deep) 100%);
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.cta-banner-v2::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.25), transparent 45%);
  pointer-events:none;
}
.cta-banner-icon{
  font-size: 30px; color: var(--sa-burgundy-deep); opacity:.55; margin-bottom: 14px; display:block;
}
.cta-banner-kicker{
  display:block; text-transform:uppercase; letter-spacing:3px; font-size:13px;
  color: var(--sa-burgundy-deep); font-weight:700; margin-bottom: 12px;
}
.cta-banner-heading{
  color: var(--sa-burgundy-deep); font-size: 34px; margin-bottom: 28px; position:relative;
}
.cta-banner-btn{
  background: var(--sa-burgundy) !important; border-color: var(--sa-burgundy) !important; color:#fff !important;
  border-radius: 30px !important; padding: 13px 34px !important; font-weight:600; position:relative;
}
.cta-banner-btn:hover{ background: var(--sa-burgundy-deep) !important; border-color: var(--sa-burgundy-deep) !important; transform: translateY(-1px); }
@media (max-width: 600px){ .cta-banner-heading{ font-size:26px; } }

/* Mass schedule table (used on the Mass Schedule page content) */
.mass-table{ width:100%; border-collapse: collapse; margin: 20px 0 30px; }
.mass-table th, .mass-table td{ padding: 16px 18px; border-bottom: 1px solid var(--sa-border); text-align:left; }
.mass-table th{ font-family: var(--sa-font-display); font-size:18px; color: var(--sa-burgundy-deep); background: var(--sa-cream-deep); }
.mass-table tr:last-child td{ border-bottom:none; }

/* ---------- Vision / Mission ---------- */
.vm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 10px; }
.vm-card{
  background: var(--sa-ivory); border:1px solid var(--sa-border); border-radius: var(--sa-radius);
  padding: 34px; box-shadow: var(--sa-shadow);
}
.vm-card h3{ font-size:24px; margin-bottom:12px; color: var(--sa-gold-deep); }
.vm-card p, .vm-card li{ color: var(--sa-ink-soft); line-height:1.7; }
@media (max-width: 767px){ .vm-grid{ grid-template-columns: 1fr; } }

/* ---------- Priest cards ---------- */
.priests-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: 20px; }
.priest-card{
  background: var(--sa-ivory); border-radius: var(--sa-radius); overflow:hidden;
  box-shadow: var(--sa-shadow); border:1px solid var(--sa-border); text-align:center;
}
.priest-card img{ width:100%; height: 320px; object-fit:cover; object-position: top center; }
.priest-card .priest-info{ padding: 22px 18px; }
.priest-card h4{ margin:0 0 4px; font-size:21px; }
.priest-card .priest-role{ color: var(--sa-gold-deep); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; display:block; }
.priest-card p{ color: var(--sa-ink-soft); font-size:var(--font-size-body); line-height:1.6; }
@media (max-width: 991px){ .priests-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .priests-grid{ grid-template-columns: 1fr; } }

/* ---------- SBK / outreach callout ---------- */
.sbk-callout{
  background: var(--sa-burgundy-deep);
  border-radius: var(--sa-radius);
  overflow:hidden;
  display:flex; flex-wrap:wrap; align-items:stretch;
  box-shadow: var(--sa-shadow);
}
.sbk-callout .sbk-img{ flex: 1 1 380px; min-height: 320px; background-size:cover; background-position:center; }
.sbk-callout .sbk-text{ flex: 1 1 380px; padding: 46px; color:#f1e6c8; display:flex; flex-direction:column; justify-content:center; }
.sbk-callout h2{ color:#fff; font-size: 32px; margin-bottom:14px; }
.sbk-callout p{ line-height:1.75; margin-bottom: 22px; }

.sbk-services{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin: 30px 0; }
.sbk-service{ background:var(--sa-ivory); border:1px solid var(--sa-border); border-radius:12px; padding:22px; }
.sbk-service h4{ font-size:18px; margin-bottom:8px; color:var(--sa-gold-deep); }
.sbk-service p{ color:var(--sa-ink-soft); font-size:var(--font-size-body); line-height:1.6; margin:0; }
@media (max-width: 767px){ .sbk-services{ grid-template-columns: 1fr; } }

.help-ways{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin:24px 0; }
.help-way{ background: var(--sa-cream-deep); border-radius:12px; padding:20px; text-align:center; }
.help-way i{ font-size:26px; color:var(--sa-gold-deep); margin-bottom:10px; display:block; }
.help-way h4{ font-size:16px; margin-bottom:6px; }
.help-way p{ font-size:13px; color:var(--sa-ink-soft); margin:0; }
@media (max-width: 767px){ .help-ways{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .help-ways{ grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.gallery-cat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.gallery-cat-card{
  position:relative; border-radius: var(--sa-radius); overflow:hidden; height: 260px;
  box-shadow: var(--sa-shadow); display:block;
}
.gallery-cat-card img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-cat-card:hover img{ transform: scale(1.06); }
.gallery-cat-card .cat-label{
  position:absolute; left:0; right:0; bottom:0; padding: 18px 20px;
  background: linear-gradient(0deg, rgba(46,38,32,.85), transparent);
  color:#fff; font-family: var(--sa-font-display); font-size:20px; font-weight:700;
}
@media (max-width: 991px){ .gallery-cat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .gallery-cat-grid{ grid-template-columns: 1fr; } }

.gallery-photo-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.gallery-photo-grid a{ display:block; border-radius:10px; overflow:hidden; box-shadow: var(--sa-shadow); }
.gallery-photo-grid img{ width:100%; height: 220px; object-fit:cover; transition: transform .3s ease; }
.gallery-photo-grid a:hover img{ transform: scale(1.05); }
@media (max-width: 767px){ .gallery-photo-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Cards (blog / press) ---------- */
.single-article{
  background: var(--sa-ivory); border-radius: var(--sa-radius); overflow:hidden;
  box-shadow: var(--sa-shadow); border: 1px solid var(--sa-border); height:100%;
}
.single-article .cover img{ width:100%; height:200px; object-fit:cover; }
.single-article h2{ font-size:20px; padding: 18px 20px 0; }
.single-article .type-date{ display:flex; justify-content:space-between; padding: 8px 20px; font-size:12px; color: var(--sa-gold-deep); text-transform:uppercase; letter-spacing:.5px; }
.single-article .info{ padding: 0 20px; color: var(--sa-ink-soft); font-size:var(--font-size-body); }
.single-article > a{ display:inline-block; margin: 10px 20px 22px; font-weight:600; color: var(--sa-burgundy); }

/* ---------- Contact ---------- */
.contact-card{ background: var(--sa-ivory); border-radius: var(--sa-radius); padding: 34px; box-shadow: var(--sa-shadow); border: 1px solid var(--sa-border); }
.contact-card h3{ font-size:22px; margin-bottom:18px; }
.contact-card ul{ list-style:none; padding:0; margin:0; }
.contact-card ul li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; color: var(--sa-ink-soft); }
.contact-card ul li i{ color: var(--sa-gold-deep); margin-top:3px; }
.form-control{ border-radius: 8px !important; border: 1px solid var(--sa-border) !important; padding: 12px 14px !important; }

/* ---------- Footer ---------- */
.top-footer{ background: var(--sa-burgundy-deep); color: #e8dcc0; padding: 60px 0 30px; }
.top-footer h4{ color:#fff; font-size:19px; margin-bottom:18px; }
.top-footer a{ color:#e8dcc0; }
.top-footer a:hover{ color: var(--sa-gold-light); }
.top-footer .location ul li{ margin-bottom:10px; list-style:none; }
.top-footer .quick-links ul li{ list-style:none; margin-bottom:8px; }
.top-footer .quick-links ul{ padding-left:0; }
.bottom-footer{ background: #3A1420; color:#cdbfa0; padding: 16px 0; font-size:13px; }
.bottom-footer a{ color:#cdbfa0; }
.back-top a{ background: var(--sa-gold); color:#fff !important; }

/* ---------- Misc ---------- */
.sidebar.bg-gray-light{ background: var(--sa-ivory) !important; border:1px solid var(--sa-border); border-radius: var(--sa-radius); padding: 22px; box-shadow: var(--sa-shadow); }
.sidebar h2{ font-size:19px; margin-bottom:14px; }
.sidebar ul{ list-style:none; padding:0; margin:0; }
.sidebar ul li{ padding: 8px 0; border-bottom: 1px solid var(--sa-border); }
.sidebar ul li a{ color: var(--sa-ink-soft); }
.content-wrap .info{ line-height:1.8; color: var(--sa-ink-soft); }
.content-wrap .info h3{ margin-top:30px; }