/* Minimal utility stylesheet to replace the subset of Tailwind utilities
   used by the project's Blade templates. This provides basic layout,
   spacing, color and typography utilities. It's intentionally compact
   and only covers the classes currently used in templates. You can
   extend or replace it later with your own organization.
*/

:root{
	--slate-50: #f8fafc;
	--slate-100: #f1f5f9;
	--slate-200: #e2e8f0;
	--slate-300: #cbd5e1;
	--slate-400: #94a3b8;
	--slate-500: #64748b;
	--slate-600: #475569;
	--slate-700: #334155;
	--slate-800: #1f2937;
	--sky-400: #38bdf8;
	--sky-600: #0284c7;
	--sky-700: #0369a1;
	--gray-100: #f3f4f6;
}

/* Base */
html,body{margin:0;padding:0;height:100%;}
body{font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--gray-100); color:var(--slate-800);}

/* Containers */
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* Display & Flex */
.flex{display:flex}
.grid{display:grid}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.hidden{display:none}
.block{display:block}

/* Spacing (common used values) */
.p-0{padding:0}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.lg\:px-8{padding-left:2rem;padding-right:2rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mt-1{margin-top:.25rem}
.my-12{margin-top:3rem;margin-bottom:3rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}

/* Text sizes */
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-5xl{font-size:3rem}
.text-6xl{font-size:3.75rem}

/* Typography & utilities */
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.rounded-lg{border-radius:.5rem}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.08)}
.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,0.08)}
.list-disc{list-style-type:disc}
.list-inside{padding-left:0}
.text-center{text-align:center}

/* Colors */
.bg-gray-100{background-color:var(--gray-100)}
.bg-white{background-color:#fff}
.bg-slate-50{background-color:var(--slate-50)}
.bg-slate-800{background-color:var(--slate-800)}
.text-white{color:#fff}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-slate-600{color:var(--slate-600)}
.text-slate-500{color:var(--slate-500)}
.text-sky-600{color:var(--sky-600)}
.text-sky-700{color:var(--sky-700)}
.text-sky-400{color:var(--sky-400)}
.text-sky-600:hover,.hover\:text-sky-600:hover{color:var(--sky-600)}
.hover\:text-sky-400:hover{color:var(--sky-400)}

/* Helpers used for nav/menu */
.navbar-active{border-bottom:2px solid var(--sky-600);color:var(--sky-700);padding-bottom:.25rem}
.mobile-navbar-active{background-color:#eff6ff;border-left:4px solid var(--sky-600);color:var(--sky-700)}

/* Image utilities */
.object-cover{object-fit:cover}
.w-full{width:100%}
.h-full{height:100%}
.w-24{width:6rem}
.h-24{height:6rem}

/* Grid columns (responsive) */
@media (min-width:768px){
	.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
	.md\:grid-cols-3{grid-template-columns:repeat(3,1fr)}
	.md\:flex{display:flex}
	.md\:hidden{display:none}
}

@media (min-width:640px){
	.sm\:flex-row{flex-direction:row}
	.sm\:text-sm{font-size:.875rem}
	.sm\:text-lg{font-size:1.125rem}
	.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
}

@media (min-width:1024px){
	.lg\:space-x-8> :not([hidden]) ~ :not([hidden]){margin-left:2rem}
}

/* Small utilities for hover/transition */
.transition-colors{transition:color .2s ease}
.transition-shadow{transition:box-shadow .2s ease}
.hover\:bg-slate-100:hover{background-color:var(--slate-100)}

/* Simple accessibility helpers */
.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}

/* custom slide animation helpers referenced by inline script */
.slide{transition:opacity 1s ease-in-out}
.opacity-0{opacity:0}
.opacity-100{opacity:1}

/* small helpers for rounded avatars */
.rounded-full{border-radius:9999px}

/* Keep other existing about.css rules able to override these */