/*
 * Fallback styles are enabled ONLY when Tailwind utilities are not available.
 * See base.html: html.no-tailwind class toggle.
 */
html.no-tailwind body {
    font-family: system-ui, -apple-system, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f7f3ed;
    color: #111827;
}

html.no-tailwind .container {
    max-width: 1000px;
    margin: auto;
    padding: 16px;
}

html.no-tailwind h1,
html.no-tailwind h2,
html.no-tailwind h3 {
    margin-top: 16px;
    margin-bottom: 8px;
}

html.no-tailwind a {
    color: #e68a4e;
    text-decoration: none;
}

html.no-tailwind button {
    padding: 8px 12px;
    border-radius: 10px;
    border: none;
    background: #e68a4e;
    color: white;
    cursor: pointer;
}

html.no-tailwind img,
html.no-tailwind svg {
    max-width: 100%;
    height: auto;
}

/* Minimal utility compatibility */
html.no-tailwind .hidden { display: none !important; }
html.no-tailwind .block { display: block !important; }
html.no-tailwind .inline-flex { display: inline-flex !important; }
html.no-tailwind .flex { display: flex !important; }
html.no-tailwind .items-center { align-items: center !important; }
html.no-tailwind .justify-between { justify-content: space-between !important; }
html.no-tailwind .justify-center { justify-content: center !important; }
html.no-tailwind .w-full { width: 100% !important; }
html.no-tailwind .min-w-0 { min-width: 0 !important; }
html.no-tailwind .max-w-7xl,
html.no-tailwind .max-w-4xl,
html.no-tailwind .max-w-2xl {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html.no-tailwind .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
html.no-tailwind .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
html.no-tailwind .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
html.no-tailwind .gap-2 { gap: 0.5rem !important; }
html.no-tailwind .gap-3 { gap: 0.75rem !important; }

/* Responsive visibility fallback to avoid duplicated desktop+mobile nav */
html.no-tailwind .md\:flex { display: none !important; }
html.no-tailwind .sm\:block { display: none !important; }

@media (min-width: 640px) {
    html.no-tailwind .sm\:block { display: block !important; }
}

@media (min-width: 768px) {
    html.no-tailwind .md\:hidden { display: none !important; }
    html.no-tailwind .md\:flex { display: flex !important; }
}

/* Keep nav clean in fallback mode */
html.no-tailwind nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e5e7eb; }
html.no-tailwind #mobileMenu { background: #fff; border-top: 1px solid #e5e7eb; }
html.no-tailwind main { width: 100%; max-width: 100%; overflow-x: hidden; }