/*
  Custom Styles for Musholla Al Muttaqin
  UI/UX refresh (modern-minimal, jamaah-friendly):
  - Base color: blue (override Bootstrap "success" tokens for compatibility)
  - Subtle Islamic geometric pattern
  - Better mobile spacing & readability
  - Lighter shadows + consistent radius
*/

:root{
  /* Brand (Blue) */
  --brand-50:#f3f8ff;
  --brand-100:#e6f0ff;
  --brand-200:#cfe2ff;
  --brand-300:#a7c7ff;
  --brand-400:#6fa0ff;
  --brand-500:#1d6eff;
  --brand-600:#0b5ed7;
  --brand-700:#0a4fb5;
  --brand-800:#0a3f8f;
  --brand-900:#072e66;

  --ink-900:#0b1220;
  --ink-700:#2b3447;
  --ink-500:#5b667d;
  --surface:#ffffff;
  --surface-2:#f7faff;
  --border:#e6eefc;

  --radius-lg:16px;
  --radius-md:12px;
  --shadow-sm:0 6px 18px rgba(12, 29, 66, .08);
  --shadow-md:0 14px 36px rgba(12, 29, 66, .14);

  /* Subtle Islamic geometric pattern (SVG data URI) */
  --islamic-pattern: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22%3E%3Cg fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%220.14%22 stroke-width=%221%22%3E%3Cpath d=%22M30 2l10 10-10 10-10-10z%22/%3E%3Cpath d=%22M30 38l10 10-10 10-10-10z%22/%3E%3Cpath d=%22M2 30l10-10 10 10-10 10z%22/%3E%3Cpath d=%22M38 30l10-10 10 10-10 10z%22/%3E%3Cpath d=%22M30 12l18 18-18 18-18-18z%22 stroke-opacity=%220.10%22/%3E%3C/g%3E%3C/svg%3E');

  /* Bootstrap token overrides (keeps existing HTML like bg-success / btn-success working) */
  --bs-success: var(--brand-600);
  --bs-success-rgb: 11,94,215;
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);
}

html{scroll-behavior:smooth;}
body{
  color:var(--ink-700);
  background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 45%, var(--surface-2) 100%);
}

/* Better default typography on small screens */
@media (max-width: 576px){
  body{font-size: 0.98rem;}
  .display-4{font-size: 2.05rem;}
}

/* Consistent cards */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }
.shadow-lg{ box-shadow: var(--shadow-md) !important; }

/* Buttons feel more modern */
.btn{ border-radius: 999px; }
.btn-lg{ padding: .85rem 1.25rem; }

/* Navbar: subtle pattern + glassy depth */
.navbar.bg-success{
  background-image: linear-gradient(135deg, rgba(7,46,102,.92) 0%, rgba(11,94,215,.92) 55%, rgba(29,110,255,.90) 100%), var(--islamic-pattern);
  background-size: cover, 60px 60px;
  backdrop-filter: saturate(130%) blur(6px);
}
.navbar .navbar-brand{ font-weight: 700; letter-spacing: .2px; }

/* Section titles */
h2{
  color: var(--ink-900);
  letter-spacing: .2px;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 45%, var(--brand-500) 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--islamic-pattern);
  background-size: 60px 60px;
  opacity: .9;
}

.hero-section::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 140px;
  background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 320%22%3E%3Cpath fill=%22%23ffffff%22 fill-opacity=%220.13%22 d=%22M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,101.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L0,320Z%22/%3E%3C/svg%3E');
  background-repeat:no-repeat;
  background-size:cover;
  pointer-events:none;
}

/* Hover Card Effect */
.hover-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md) !important;
}

/* Post Content Styling */
.post-content {
  font-size: 1.1rem;
  line-height: 1.8;
}

.post-content p { margin-bottom: 1rem; }

.post-content h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--brand-700);
}

.post-content h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 1.75rem;
  margin-bottom: 0.875rem;
  color: var(--brand-700);
}

.post-content h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--brand-800);
}

.post-content h4 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
  color: var(--brand-800);
}

.post-content ul,
.post-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.post-content li { margin-bottom: 0.5rem; }

.post-content blockquote {
  border-left: 4px solid var(--brand-600);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: #666;
  background: var(--surface-2);
  padding: 1rem 1.5rem;
  border-radius: 10px;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0;
  box-shadow: 0 8px 18px rgba(12, 29, 66, .12);
}

.post-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
}

.post-content table th,
.post-content table td {
  border: 1px solid #dee2e6;
  padding: 0.75rem;
}

.post-content table th {
  background-color: var(--brand-700);
  color: white;
  font-weight: bold;
}

.post-content table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.post-content a {
  color: var(--brand-600);
  text-decoration: underline;
}

.post-content a:hover {
  color: var(--brand-800);
}

.post-content strong { font-weight: bold; }
.post-content em { font-style: italic; }
.post-content u { text-decoration: underline; }
.post-content s { text-decoration: line-through; }

/* Image Alignment Styles */
.post-content .image-style-align-left {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  max-width: 50%;
}

.post-content .image-style-align-right {
  float: right;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  max-width: 50%;
}

.post-content .image-style-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.post-content .image-style-side {
  float: right;
  margin-left: 1.5rem;
  max-width: 40%;
}

.post-content figure { margin: 1.5rem 0; }
.post-content figure.image img { display: block; }

.post-content figcaption {
  text-align: center;
  font-style: italic;
  color: #666;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Responsive Navigation */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(7, 46, 102, 0.92);
    padding: 15px;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.12);
  }
}

/* Gallery carousel sizing (moved from inline styles) */
.gallery-carousel .carousel-item img {
  height: 400px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .gallery-carousel .carousel-item img { height: 250px; }
}

/* Sponsor & testimonial effects (moved from inline styles) */
.testimonial-card{ transition: transform .25s ease; }
.testimonial-card:hover{ transform: translateY(-4px); }
.sponsor-logo{ filter: grayscale(100%); opacity: .75; transition: all .25s ease; }
.sponsor-logo:hover{ filter: grayscale(0%); opacity: 1; }

/* Mobile-friendly section paddings */
section{ scroll-margin-top: 86px; }
@media (max-width: 576px){
  .py-5{ padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
}


/* ===== Islamic Elegant Divider ===== */
.islamic-divider {
    height: 60px;
    background: radial-gradient(circle at 50% 0%, #1E3A8A 40%, transparent 41%);
    background-size: 100% 60px;
    background-repeat: no-repeat;
}

/* ===== Dark Mode ===== */
body.dark-mode {
    background-color: #0F172A;
    color: #F8FAFC;
}

body.dark-mode .card {
    background-color: #1E293B;
    color: #F8FAFC;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

.dark-toggle {
    cursor: pointer;
}
/* ===== Feature Cards ===== */
.feature-card {
  border-radius: 16px;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 58, 138, 0.10);
  color: #1E3A8A;
  font-size: 18px;
}

.qr-wrap {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.qr-wrap img {
  max-width: 220px;
}

.agenda-item {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* ===== Floating Dark Mode Button (aman di mobile) ===== */
.dark-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Biar tombol gak nutup konten di mobile */
#fitur-jamaah { padding-bottom: 90px; }

/* =========================
   DARK MODE (FIX PACK)
   taruh PALING BAWAH CSS
   ========================= */
:root{
  --dm-bg: #0B1220;
  --dm-surface: #0F172A;
  --dm-surface-2: #111C33;
  --dm-border: rgba(248,250,252,.12);
  --dm-text: #F8FAFC;
  --dm-muted: rgba(248,250,252,.72);
  --dm-muted-2: rgba(248,250,252,.55);
}

body.dark-mode{
  /* override gradient light theme */
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

/* general text helpers */
body.dark-mode .text-muted,
body.dark-mode small.text-muted{
  color: var(--dm-muted) !important;
}
body.dark-mode .text-white-50{
  color: var(--dm-muted) !important;
}

/* sections that use bootstrap bg */
body.dark-mode .bg-light,
body.dark-mode section.bg-light{
  background: var(--dm-surface) !important;
}
body.dark-mode .bg-white,
body.dark-mode section.bg-white{
  background: var(--dm-surface) !important;
}

/* cards */
body.dark-mode .card{
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .card .card-footer,
body.dark-mode .card-footer.bg-transparent{
  border-color: var(--dm-border) !important;
  color: var(--dm-muted) !important;
}

/* borders & hr */
body.dark-mode hr,
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom{
  border-color: var(--dm-border) !important;
}

/* links */
body.dark-mode a{
  color: rgba(147,197,253,.95) !important;
}
body.dark-mode a:hover{
  color: rgba(191,219,254,.98) !important;
}

/* navbar collapse background (mobile) */
@media (max-width: 991px){
  body.dark-mode .navbar-collapse{
    background: rgba(2, 6, 23, .92) !important;
    border: 1px solid var(--dm-border) !important;
  }
}

/* hero stays nice on dark mode (optional: slightly reduce brightness) */
body.dark-mode .hero-section{
  filter: saturate(1.05) brightness(.95);
}

/* agenda + QR wrap you already have, make sure consistent */
body.dark-mode .qr-wrap{
  background: rgba(248,250,252,.03) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .agenda-item{
  background: rgba(248,250,252,.04) !important;
  border-color: var(--dm-border) !important;
}

/* inputs (kalau nanti ada form) */
body.dark-mode .form-control,
body.dark-mode .form-select{
  background: rgba(248,250,252,.03) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
body.dark-mode .form-control::placeholder{
  color: var(--dm-muted-2) !important;
}

/* footer: keep dark but ensure text readable */
body.dark-mode footer.bg-dark{
  background: #060B16 !important;
}