/* Project theme utilities and media helpers */
:root { --primary: #10a37f; }

/* Color helpers used in templates */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.ring-primary\/30 { --tw-ring-color: rgba(16,163,127,0.30) !important; }
.bg-primary-600 { background-color:#059669 !important; }
.hover\:bg-primary-700:hover { background-color:#047857 !important; }
.text-primary-600 { color:#059669 !important; }
.focus\:ring-primary-500:focus { --tw-ring-color:#10b981 !important; }

/* Dark mode helpers referenced in markup */
html.dark .dark\:bg-gray-900 { background-color:#111827 !important; }
html.dark .dark\:text-gray-100 { color:#f3f4f6 !important; }
html.dark .dark\:border-gray-700 { border-color:#374151 !important; }

/* Media frame utilities: consistent image/video sizing */
.media-frame { position: relative; width: 100%; overflow: hidden; background: #0b0b0b; }
/* Only size direct media children; do not affect nested UI images like avatars */
.media-frame > img, .media-frame > video { display:block; width:100%; height:100%; object-fit:cover; }
.media-contain > img, .media-contain > video { object-fit:contain; background:#0b0b0b; }
/* Natural size media (keep original aspect, no cropping) */
.media-natural { position: relative; width: 100%; overflow: hidden; background: #0b0b0b; }
.media-natural > img, .media-natural > video { display:block; width:100%; height:auto; object-fit: initial; background: transparent; }

/* Image shape guard: ensure only the actual media (direct children) are not circular.
	Do NOT affect nested UI images like avatars inside overlays. */
.card .media-natural > img,
.card .media-frame > img,
.card .media-frame > video,
#feed .media-natural > img,
#feed .media-frame > img,
#feed .media-frame > video {
	border-radius: 0 !important;
	clip-path: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Aspect helpers (fallbacks for non-Tailwind aspect plugin) */
.aspect-16\/9 { aspect-ratio: 16 / 9; }
.aspect-16\/10 { aspect-ratio: 16 / 10; }
.aspect-4\/3 { aspect-ratio: 4 / 3; }
/* Fallback for Tailwind's aspect-video utility */
.aspect-video { aspect-ratio: 16 / 9; }

/* Hero sizing safety: prevent oversized media when grid misbehaves */
#hero-wrap .aspect-video { width:100%; max-width: 760px; margin-left:auto; margin-right:auto; min-height: 220px; }
#hero-wrap #hero-slider img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px){ #hero-wrap .aspect-video { min-height: 280px; } }
@media (min-width: 768px){ #hero-wrap .aspect-video { min-height: 320px; } }
@media (min-width: 1024px){ #hero-wrap .aspect-video { min-height: 380px; } }

/* Misc UX helpers */
[x-cloak] { display:none !important; }

/* Skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background-color: rgba(107,114,128,0.15); }
.skeleton::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
input[type="file"]::file-selector-button { background-color: var(--primary); color:#fff; border:none; padding:0.5rem 0.75rem; border-radius:0.5rem; }