/* Rukn Starter - Custom styles (Tailwind via CDN handles utilities) */

/* ── Alpine.js cloak ──────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Custom Logo ───────────────────────────────────── */
.custom-logo-link img { max-height: 48px; width: auto; }
@media (min-width: 1024px) { .custom-logo-link img { max-height: 56px; } }

/* ── Prose (article content) ───────────────────────── */
.prose h2 { font-size: 1.4rem; font-weight: 700; color: #1f2937; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.4; }
.prose h3 { font-size: 1.2rem; font-weight: 700; color: #1f2937; margin-top: 1.2em; margin-bottom: 0.4em; }
.prose p { margin-bottom: 1em; color: #4b5563; line-height: 1.9; }
.prose a { color: #2563eb; }
.prose a:hover { text-decoration: underline; }
.prose ul, .prose ol { padding-right: 1.5em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.3em; color: #374151; line-height: 1.8; }
.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }
.prose img { border-radius: 0.75rem; margin: 1.5em 0; }
.prose blockquote { border-right: 4px solid #1e3a5f; padding: 0.75em 1.25em; margin: 1.5em 0; background: rgba(30,58,95,0.05); border-radius: 0.5rem; }
.prose strong { color: #1f2937; font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { padding: 0.5em 1em; border: 1px solid #e5e7eb; text-align: right; }
.prose th { background: #f8fafc; font-weight: 700; }

/* ── Pagination ────────────────────────────────────── */
.page-numbers { display: flex; list-style: none; gap: 0.25rem; justify-content: center; padding: 0; flex-wrap: wrap; }
.page-numbers li { list-style: none; }
.page-numbers a, .page-numbers span { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; }
.page-numbers a { color: #374151; background: #fff; border: 1px solid #e5e7eb; }
.page-numbers a:hover { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.page-numbers .current { background: #1e3a5f; color: #fff; border: 1px solid #1e3a5f; }

/* ── Swiper ────────────────────────────────────────── */
.swiper-pagination-bullet { background: #1e3a5f !important; }
.swiper-pagination-bullet-active { background: #2563eb !important; }

/* ── Animations ────────────────────────────────────── */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }

/* ── Service card hover glow ───────────────────────── */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(to bottom, #1e3a5f, #2563eb);
    transition: height 0.3s ease;
    border-radius: 0 0 0 4px;
}
.service-card:hover::before { height: 100%; }

/* ── Gradient text ─────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Glass card ────────────────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── Section divider wave ──────────────────────────── */
.wave-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.wave-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; }

/* ── Counter number ────────────────────────────────── */
.counter-number { font-variant-numeric: tabular-nums; }

/* ── Print ─────────────────────────────────────────── */
@media print {
    .fixed, .sticky { position: static !important; }
    nav, footer, .floating-buttons { display: none !important; }
}