/* =============================================================================
   TAILWIND COMPATIBILITY CSS (Replaces CDN)
   Covers all utility classes used in the theme's Elementor widgets.
   Includes responsive prefixes: sm: (640px), md: (768px), lg: (1024px), xl: (1280px)
============================================================================= */

/* ── Typography ───────────────────────────────────────────────────── */
.text-\[10px\]  { font-size: 10px; }
.text-sm        { font-size: 0.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-\[4\.8rem\] { font-size: 4.8rem; }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed{ line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }
.font-bold      { font-weight: 700; }
.font-semibold  { font-weight: 600; }
.font-medium    { font-weight: 500; }
.uppercase      { text-transform: uppercase; }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-white     { color: #fff; }
.text-dark      { color: #1a1a1a; }
.text-primary   { color: var(--color-primary, #8B4513); }
.text-muted     { color: #64748b; }
.opacity-80     { opacity: 0.8; }

/* ── Display & Layout ─────────────────────────────────────────────── */
.block          { display: block; }
.inline-block   { display: inline-block; }
.inline-flex    { display: inline-flex; }
.flex           { display: flex; }
.grid           { display: grid; }
.hidden         { display: none; }
.relative       { position: relative; }
.absolute       { position: absolute; }
.fixed          { position: fixed; }
.overflow-hidden{ overflow: hidden; }

/* ── Flexbox ─────────────────────────────────────────────────────── */
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-1         { flex: 1 1 0%; }

/* ── Gap ─────────────────────────────────────────────────────────── */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }

/* ── Grid — base (mobile-first, single column) ───────────────────── */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* ── Sizing ─────────────────────────────────────────────────────── */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-10   { width: 2.5rem; }
.w-12   { width: 3rem; }
.w-24   { width: 6rem; }
.w-32   { width: 8rem; }
.w-96   { width: 24rem; }
.h-full { height: 100%; }
.h-10   { width: 2.5rem; }
.h-12   { height: 3rem; }
.h-24   { height: 6rem; }
.h-32   { height: 8rem; }
.h-96   { height: 24rem; }
.min-h-screen { min-height: 100vh; }
.max-w-none   { max-width: none; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Spacing ─────────────────────────────────────────────────────── */
.p-2  { padding: 0.5rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.m-2  { margin: 0.5rem; }
.m-4  { margin: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10{ margin-bottom: 2.5rem; }
.mb-12{ margin-bottom: 3rem; }
.mt-8 { margin-top: 2rem; }
.mt-12{ margin-top: 3rem; }
.mt-6 { margin-top: 1.5rem; }

/* ── Border & Shadows ─────────────────────────────────────────────── */
.border          { border-width: 1px; border-style: solid; }
.border-solid    { border-style: solid; }
.border-transparent { border-color: transparent; }
.border-primary\/20 { border-color: rgba(139, 69, 19, 0.2); }
.rounded-md      { border-radius: 0.375rem; }
.rounded-lg      { border-radius: 0.5rem; }
.rounded-xl      { border-radius: 0.75rem; }
.rounded-2xl     { border-radius: 1rem; }
.rounded-3xl     { border-radius: 1.5rem; }
.rounded-\[48px\]{ border-radius: 48px; }
.rounded-\[32px\]{ border-radius: 32px; }
.rounded-full    { border-radius: 9999px; }
.shadow-sm       { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-md       { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.shadow-lg       { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-2xl      { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* ── Backgrounds ─────────────────────────────────────────────────── */
.bg-white        { background-color: #fff; }
.bg-primary\/10  { background-color: rgba(139,69,19,0.1); }
.bg-secondary\/20{ background-color: rgba(107,142,35,0.2); }

/* ── Misc ─────────────────────────────────────────────────────────── */
.z-10   { z-index: 10; }
.blur-xl  { filter: blur(24px); }
.blur-2xl { filter: blur(40px); }
.-z-10  { z-index: -10; }
.border-border\/50 { border-color: rgba(203,213,225, 0.5); }

/* =============================================================================
   RESPONSIVE BREAKPOINTS
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
============================================================================= */

/* ── sm: 640px ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:text-center { text-align: center; }
    .sm\:flex-row    { flex-direction: row; }
}

/* ── md: 768px ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:text-left   { text-align: left; }
    .md\:items-start { align-items: flex-start; }
    .md\:flex-row    { flex-direction: row; }
    .md\:gap-8       { gap: 2rem; }
    .md\:gap-16      { gap: 4rem; }
    .md\:col-span-2  { grid-column: span 2 / span 2; }
}

/* ── lg: 1024px ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:gap-16      { gap: 4rem; }
    .lg\:gap-20      { gap: 5rem; }
    .lg\:gap-10      { gap: 2.5rem; }
    .lg\:mt-12       { margin-top: 3rem; }
    .lg\:text-\[4\.8rem\] { font-size: 4.8rem; }
    .lg\:items-center { align-items: center; }
    .lg\:flex-row    { flex-direction: row; }
}

/* ── xl: 1280px ─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:gap-20      { gap: 5rem; }
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}