/* =========================================================
   TAILWIND FALLBACK — tw-fallback.css
   Static CSS definitions for all Tailwind utility classes
   used in the Duromech website.
   
   PURPOSE: Ensures layout works on mobile devices even when
   the Tailwind CDN JavaScript fails to load/execute.
   
   LOAD ORDER: Include BEFORE the Tailwind CDN script.
   If Tailwind loads, its JIT output overrides these.
   If Tailwind fails, these keep the site functional.
========================================================= */

/* ── Box Sizing Reset ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Button Reset (Tailwind preflight fallback) ── */
button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* ── Display ── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }

/* ── Flex Direction ── */
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Flex Alignment ── */
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-end { align-self: flex-end; }

/* ── Gap ── */
.gap-1   { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.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; }

/* ── Grid ── */
.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)); }

/* ── Width ── */
.w-auto  { width: auto; }
.w-full  { width: 100%; }
.w-fit   { width: fit-content; }
.w-8     { width: 2rem; }
.w-9     { width: 2.25rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-24    { width: 6rem; }
.w-40    { width: 10rem; }
.w-\[1\.5px\] { width: 1.5px; }

/* ── Height ── */
.h-8     { height: 2rem; }
.h-9     { height: 2.25rem; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-24    { height: 6rem; }
.h-40    { height: 10rem; }
.h-\[2px\] { height: 2px; }
.min-h-\[360px\] { min-height: 360px; }

/* ── Max Width ── */
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-4xl  { max-width: 56rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-7xl  { max-width: 80rem; }

/* ── Margin ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-12   { margin-top: 3rem; }
.mt-14   { margin-top: 3.5rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-14   { margin-bottom: 3.5rem; }
.ml-1    { margin-left: 0.25rem; }
.mr-1    { margin-right: 0.25rem; }

/* ── Padding ── */
.p-5     { padding: 1.25rem; }
.p-6     { padding: 1.5rem; }
.p-8     { padding: 2rem; }
.px-4    { padding-left: 1rem; padding-right: 1rem; }
.px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-8    { padding-left: 2rem; padding-right: 2rem; }
.py-3    { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-14   { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-20   { padding-top: 5rem; padding-bottom: 5rem; }
.py-24   { padding-top: 6rem; padding-bottom: 6rem; }
.pb-8    { padding-bottom: 2rem; }
.pb-12   { padding-bottom: 3rem; }

/* ── Space Between ── */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.top-0    { top: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.-top-8   { top: -2rem; }
.-right-8 { right: -2rem; }

/* ── Z-Index ── */
.z-10  { z-index: 10; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }

/* ── Border Radius ── */
.rounded-full { border-radius: 9999px; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }

/* ── Border ── */
.border   { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-brand-200  { border-color: #FED7AA; }
.border-brand-500\/30 { border-color: rgba(249,115,22,.3); }
.border-green-200  { border-color: #bbf7d0; }
.border-ink-200    { border-color: #E7E5E4; }
.border-white\/10  { border-color: rgba(255,255,255,.1); }

/* ── Typography — Size ── */
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl  { font-size: 3rem; line-height: 1; }

/* ── Typography — Weight ── */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Typography — Line Height ── */
.leading-snug    { line-height: 1.375; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.1\] { line-height: 1.1; }

/* ── Typography — Letter Spacing ── */
.tracking-widest { letter-spacing: 0.1em; }

/* ── Typography — Alignment ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.uppercase   { text-transform: uppercase; }

/* ── Typography — Font Family ── */
.font-syne    { font-family: 'Poppins', 'Syne', system-ui, sans-serif; }
.font-jakarta { font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ── Text Colors ── */
.text-white       { color: #fff; }
.text-white\/35   { color: rgba(255,255,255,.35); }
.text-white\/40   { color: rgba(255,255,255,.4); }
.text-white\/50   { color: rgba(255,255,255,.5); }
.text-white\/55   { color: rgba(255,255,255,.55); }
.text-white\/70   { color: rgba(255,255,255,.7); }
.text-white\/75   { color: rgba(255,255,255,.75); }
.text-white\/80   { color: rgba(255,255,255,.8); }
.text-brand-400   { color: #FB923C; }
.text-brand-500   { color: #F97316; }
.text-brand-600   { color: #EA580C; }
.text-ink-400     { color: #A8A29E; }
.text-ink-500     { color: #78716C; }
.text-ink-700     { color: #44403C; }
.text-ink-900     { color: #1C1917; }
.text-green-600   { color: #16a34a; }
.text-\[\#25D366\] { color: #25D366; }

/* ── Background Colors ── */
.bg-white          { background-color: #fff; }
.bg-brand-50       { background-color: #FFFBF5; }
.bg-brand-100      { background-color: #FFF7ED; }
.bg-brand-500      { background-color: #F97316; }
.bg-brand-500\/10  { background-color: rgba(249,115,22,.1); }
.bg-brand-500\/20  { background-color: rgba(249,115,22,.2); }
.bg-brand-600\/20  { background-color: rgba(234,88,12,.2); }
.bg-green-50       { background-color: #f0fdf4; }
.bg-\[\#25D366\]\/15 { background-color: rgba(37,211,102,.15); }

/* ── Gradients ── */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-brand-500    { --tw-gradient-from: #F97316; --tw-gradient-stops: #F97316, var(--tw-gradient-to, transparent); }
.from-ink-900      { --tw-gradient-from: #1C1917; --tw-gradient-stops: #1C1917, var(--tw-gradient-to, transparent); }
.from-white\/40    { --tw-gradient-from: rgba(255,255,255,.4); --tw-gradient-stops: rgba(255,255,255,.4), var(--tw-gradient-to, transparent); }
.to-brand-600      { --tw-gradient-to: #EA580C; }
.to-transparent    { --tw-gradient-to: transparent; }
.to-\[\#2a1610\]   { --tw-gradient-to: #2a1610; }

/* ── Shadows ── */
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.shadow-ink-900\/5 { --tw-shadow-color: rgba(28,25,23,.05); }
.shadow-brand-600\/40 { --tw-shadow-color: rgba(234,88,12,.4); }

/* ── Filter ── */
.brightness-0 { filter: brightness(0); }
.invert       { filter: invert(1); }

/* ── Transition ── */
.transition-colors    { transition-property: color, background-color, border-color, fill, stroke; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-all       { transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.duration-300         { transition-duration: 300ms; }

/* ── Interactive ── */
.cursor-pointer { cursor: pointer; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-white { color: #fff; }
.hover\:text-brand-400:hover  { color: #FB923C; }
.hover\:text-brand-600:hover  { color: #EA580C; }
.hover\:text-brand-700:hover  { color: #C2410C; }
.hover\:text-\[\#25D366\]:hover { color: #25D366; }
.hover\:bg-brand-50:hover     { background-color: #FFFBF5; }
.hover\:border-brand-400:hover  { border-color: #FB923C; }
.hover\:border-brand-500:hover  { border-color: #F97316; }

/* ── Scroll ── */
.scroll-smooth { scroll-behavior: smooth; }

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═════════════════════════════════════════════════════════════ */

/* ── sm: 640px+ ── */
@media (min-width: 640px) {
    .sm\:text-5xl  { font-size: 3rem; line-height: 1; }
    .sm\:text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
    .sm\:py-16     { padding-top: 4rem; padding-bottom: 4rem; }
    .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\:flex-row   { flex-direction: row; }
}

/* ── md: 768px+ ── */
@media (min-width: 768px) {
    .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\:flex-row    { flex-direction: row; }
    .md\:items-end   { align-items: flex-end; }
    .md\:justify-between { justify-content: space-between; }
}

/* ── lg: 1024px+ ── */
@media (min-width: 1024px) {
    .lg\:flex    { display: flex; }
    .lg\:block   { display: block; }
    .lg\:hidden  { display: none; }
    .lg\:px-8    { padding-left: 2rem; padding-right: 2rem; }
    .lg\:py-28   { padding-top: 7rem; padding-bottom: 7rem; }
    .lg\:py-32   { padding-top: 8rem; padding-bottom: 8rem; }
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .lg\:gap-0    { gap: 0; }
    .lg\:gap-24   { gap: 6rem; }
    .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\:col-span-1  { grid-column: span 1 / span 1; }
    .lg\:col-span-2  { grid-column: span 2 / span 2; }
    .lg\:col-span-3  { grid-column: span 3 / span 3; }
    .lg\:divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; border-left-style: solid; }
    .lg\:divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-left-color: rgba(255,255,255,.1); }
    /* Arbitrary value: lg:grid-cols-[280px_1fr] — product page sidebar + content */
    .lg\:grid-cols-\[280px_1fr\] { grid-template-columns: 280px 1fr; }
    /* Arbitrary value: lg:grid-cols-[1fr_400px] — about/contact two column */
    .lg\:grid-cols-\[1fr_400px\] { grid-template-columns: 1fr 400px; }
}



/* ── Additional missing fallbacks ── */

/* ── Missing spacing fallbacks ── */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.mb-8 { margin-bottom: 2rem; }

.text-yellow-300 { color: #FDE047; }
.bg-ink-50 { background-color: #FAFAF9; }
.text-ink-600 { color: #57534E; }
.text-ink-800 { color: #292524; }
.bg-brand-200 { background-color: #FED7AA; }

/* ── xl: 1280px+ ── */
@media (min-width: 1280px) {
    .xl\:text-6xl { font-size: 3.75rem; line-height: 1; }
}