/*
Theme Name: MTQ Aceh Pidie Jaya
Theme URI: https://mtq.pidiejayakab.go.id/
Description: Tema resmi untuk website MTQ Aceh Pidie Jaya. Tema ini dirancang khusus untuk memenuhi kebutuhan informasi dan publikasi kegiatan MTQ di Kabupaten Pidie Jaya.
Author: Dinas Komunikasi dan Informatika, Statistik dan Persandian Kabupaten Pidie Jaya
Author URI: https://pidiejayakab.go.id/
 * Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mtq-aceh-pidie-jaya
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

MTQ Aceh Pidie Jaya Theme, Copyright 2025 Pemerintah Kabupaten Pidie Jaya
MTQ Aceh Pidie Jaya is distributed under the terms of the GNU GPL
*/

/* Admin bar handled in assets/css/sticky-header.css (top offset) */

/* Line clamp utilities */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card hover effects */
.group:hover .group-hover\:scale-105 {
	transform: scale(1.05);
}

.group:hover .group-hover\:gap-3 {
	gap: 0.75rem;
}

/* Backdrop blur support */
.backdrop-blur-sm {
	backdrop-filter: blur(4px);
}

/* Smooth transitions */
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
	transition-duration: 300ms;
}

.duration-200 {
	transition-duration: 200ms;
}

/* Transform utilities */
.-translate-y-1 {
	transform: translateY(-0.25rem);
}

/* Enhanced card styling for berita page */
.berita-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.berita-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading animation */
@keyframes shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

.shimmer {
	animation: shimmer 2s linear infinite;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200px 100%;
}

/* Custom pagination utilities untuk Tailwind - hanya yang tidak ada di Tailwind */
/* Semua styling pagination sekarang menggunakan Tailwind utility classes */

/* Smooth scroll for pagination navigation */
html {
	scroll-behavior: smooth;
}

/* Pagination sekarang menggunakan Tailwind CSS sepenuhnya */

/* Prose styling for single post content */
.prose {
	color: #374151;
	line-height: 1.75;
}

.prose p {
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
	color: #111827;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 2em;
	margin-bottom: 1em;
}

.prose h1 {
	font-size: 2.25rem;
}

.prose h2 {
	font-size: 1.875rem;
}

.prose h3 {
	font-size: 1.5rem;
}

.prose h4 {
	font-size: 1.25rem;
}

.prose a {
	color: #3b82f6;
	text-decoration: underline;
	font-weight: 500;
}

.prose a:hover {
	color: #1d4ed8;
}

.prose blockquote {
	font-weight: 500;
	font-style: italic;
	color: #374151;
	border-left: 0.25rem solid #d1d5db;
	quotes: "\201C""\201D""\2018""\2019";
	margin-top: 1.6em;
	margin-bottom: 1.6em;
	padding-left: 1em;
}

.prose ul, .prose ol {
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	padding-left: 1.625em;
}

.prose li {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.prose img {
	margin-top: 2em;
	margin-bottom: 2em;
	border-radius: 0.5rem;
}

.prose figure {
	margin-top: 2em;
	margin-bottom: 2em;
}

.prose figcaption {
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.25rem;
	margin-top: 0.857em;
}

.prose code {
	color: #374151;
	font-weight: 600;
	font-size: 0.875em;
	background-color: #f3f4f6;
	padding: 0.2em 0.4em;
	border-radius: 0.25rem;
}

.prose pre {
	color: #e5e7eb;
	background-color: #374151;
	overflow-x: auto;
	font-size: 0.875em;
	line-height: 1.7142857;
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
	border-radius: 0.375rem;
	padding: 1.1428571em 1.1428571em;
}

.prose table {
	width: 100%;
	table-layout: auto;
	text-align: left;
	margin-top: 2em;
	margin-bottom: 2em;
	font-size: 0.875em;
	line-height: 1.7142857;
}

.prose thead {
	color: #111827;
	font-weight: 600;
	border-bottom: 1px solid #d1d5db;
}

.prose th {
	vertical-align: bottom;
	padding-right: 0.5714286em;
	padding-bottom: 0.5714286em;
	padding-left: 0.5714286em;
}

.prose td {
	vertical-align: baseline;
	padding-top: 0.5714286em;
	padding-right: 0.5714286em;
	padding-bottom: 0.5714286em;
	padding-left: 0.5714286em;
}

/* Large prose variant */
.prose-lg {
	font-size: 1.125rem;
	line-height: 1.7777778;
}

.prose-lg p {
	margin-top: 1.3333333em;
	margin-bottom: 1.3333333em;
}

.prose-lg h1 {
	font-size: 2.6666667rem;
	margin-top: 0;
	margin-bottom: 0.8333333em;
	line-height: 1;
}

.prose-lg h2 {
	font-size: 2rem;
	margin-top: 1.5555556em;
	margin-bottom: 0.8888889em;
	line-height: 1.1111111;
}

.prose-lg h3 {
	font-size: 1.5rem;
	margin-top: 1.5555556em;
	margin-bottom: 0.6666667em;
	line-height: 1.2222222;
}

/* Max width none utility */
.max-w-none {
	max-width: none;
}

/* Text shadow utilities for better readability over images */
.text-shadow-lg {
	text-shadow: 0 4px 6px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.text-shadow-xl {
	text-shadow: 0 8px 16px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* Backdrop blur support for older browsers */
@supports not (backdrop-filter: blur(4px)) {
	.backdrop-blur-sm {
		background-color: rgba(255, 255, 255, 0.1);
	}
}

/* Screen reader utilities */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mobile optimizations for berita cards */
@media (max-width: 768px) {
	.berita-card {
		margin-bottom: 1rem;
	}
	
	.berita-card h3 {
		font-size: 1.125rem;
		line-height: 1.4;
	}
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
	.berita-card h3 {
		font-size: 1.25rem;
	}
}

/* Category page pagination styling */
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
	background-color: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	min-width: 44px;
	height: 44px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
	background-color: #f9fafb;
	color: #2563eb;
}

.pagination .page-numbers.current {
	background-color: #2563eb;
	color: #ffffff;
	border-color: #2563eb;
}

.pagination .page-numbers.current:hover {
	background-color: #1d4ed8;
}

.pagination .page-numbers.dots {
	background: none;
	border: none;
	color: #9ca3af;
	padding: 0.5rem;
}