@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

.font-display {
    font-family: 'Playfair Display', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #FFF7ED;
}

::-webkit-scrollbar-thumb {
    background: #F97316;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #EA580C;
}

/* Hero Pattern */
.hero-bg {
    background: radial-gradient(circle at 20% 30%, #FFEDD5 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, #FED7AA 0%, transparent 50%),
                #FFFBEB;
}

/* Card Hover */
.recipe-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recipe-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(249, 115, 22, 0.25);
}

.recipe-card img {
    transition: transform 0.5s ease;
}

.recipe-card:hover img {
    transform: scale(1.08);
}

/* Category Active */
.category-btn.active {
    background: #F97316 !important;
    color: white !important;
    border-color: #F97316 !important;
    box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.5);
}

/* Line Clamp */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Checkbox Custom */
.custom-checkbox:checked {
    background-color: #F97316;
    border-color: #F97316;
}

.custom-checkbox:checked + span {
    text-decoration: line-through;
    color: #9CA3AF;
}

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

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

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Print */
@media print {
    nav, footer, .no-print {
        display: none !important;
    }
}

/* Mobile menu transition */
#mobileMenu {
    transition: all 0.3s ease;
}

/* ===== Ultra Responsive - All Devices down to 100px ===== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
* {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}
a, p, h1, h2, h3, h4, span, div {
    overflow-wrap: anywhere;
}

/* Fluid containers */
@media (max-width: 400px) {
    .max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }
    .max-w-7xl.mx-auto { max-width: 100% !important; }
}
@media (max-width: 320px) {
    .max-w-7xl { padding-left: 8px !important; padding-right: 8px !important; }
    .rounded-\[24px\], .rounded-2xl { border-radius: 16px !important; }
    .p-6 { padding: 12px !important; }
    .p-5 { padding: 10px !important; }
    .p-8 { padding: 14px !important; }
}
@media (max-width: 240px) {
    .max-w-7xl { padding-left: 6px !important; padding-right: 6px !important; }
    .p-6, .p-5, .p-8 { padding: 8px !important; }
}

/* Fluid typography */
@media (max-width: 380px) {
    h1 { font-size: 1.5rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    .text-2xl { font-size: 1.375rem !important; }
}
@media (max-width: 280px) {
    h1 { font-size: 1.125rem !important; }
    h2 { font-size: 1rem !important; }
    .font-display { line-height: 1.2 !important; }
    .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
    .px-8 { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 180px) {
    h1 { font-size: 0.875rem !important; }
    h2, h3 { font-size: 0.8125rem !important; }
    p, span, a, li { font-size: 0.75rem !important; }
}

/* Pills & Buttons - wrap at tiny widths */
@media (max-width: 380px) {
    .flex-wrap.gap-3 { gap: 6px !important; }
    .flex-wrap.gap-3 a, .flex-wrap.gap-3 button, .category-btn { padding: 8px 12px !important; font-size: 12px !important; }
}
@media (max-width: 280px) {
    .flex-wrap.gap-3 { gap: 4px !important; }
    .flex-wrap.gap-3 a, .flex-wrap.gap-3 button { padding: 6px 10px !important; font-size: 11px !important; white-space: normal !important; text-align: center; }
    .rounded-full { border-radius: 12px !important; }
}
@media (max-width: 180px) {
    .flex-wrap { justify-content: center !important; }
    .flex-wrap.gap-3 a, .flex-wrap.gap-3 button { padding: 4px 8px !important; font-size: 10px !important; }
}

/* Grids - force single column early */
@media (max-width: 640px) {
    .grid.sm\:grid-cols-2, .grid.sm\:grid-cols-3, .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
    .grid.lg\:grid-cols-\[1fr_320px\], .grid.lg\:grid-cols-\[1\.7fr_360px\] { grid-template-columns: 1fr !important; }
    aside.lg\:sticky { position: static !important; }
}
@media (max-width: 400px) {
    .grid { gap: 12px !important; }
    .gap-8 { gap: 16px !important; }
    .gap-6 { gap: 12px !important; }
}

/* Category / Single Header */
@media (max-width: 500px) {
    .bg-gradient-to-r, .bg-gradient-to-br { border-radius: 16px !important; }
}
@media (max-width: 380px) {
    .bg-gradient-to-r { padding: 16px !important; }
    .w-8.h-8 { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .w-10.h-10 { width: 32px !important; height: 32px !important; }
}
@media (max-width: 280px) {
    .absolute.-right-10, .absolute.-left-6, .blur-2xl, .blur-xl { display: none !important; }
    .bg-gradient-to-r .absolute { opacity: 0.5 !important; }
}

/* Single Hero - stack & shrink */
@media (max-width: 768px) {
    .grid.md\:grid-cols-\[440px_1fr\], .grid.lg\:grid-cols-\[500px_1fr\] { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
    .h-\[280px\] { height: 220px !important; min-height: 220px !important; }
    .min-h-\[340px\] { min-height: 220px !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
    .grid.grid-cols-3 p { font-size: 10px !important; }
}
@media (max-width: 280px) {
    .h-\[280px\] { height: 160px !important; min-height: 160px !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
    .flex.gap-3.mt-5 { flex-direction: column !important; align-items: stretch !important; }
    .flex.gap-3.mt-5 a { justify-content: center !important; }
}
@media (max-width: 200px) {
    .h-\[280px\] { height: 140px !important; min-height: 140px !important; }
    .rounded-\[24px\] { border-radius: 12px !important; }
}

/* Cards */
@media (max-width: 380px) {
    .recipe-card .h-48 { height: 160px !important; }
    .recipe-card .p-5 { padding: 12px !important; }
    .recipe-card h3 { font-size: 15px !important; }
}
@media (max-width: 280px) {
    .recipe-card .h-48 { height: 140px !important; }
    .recipe-card .absolute.top-3 { top: 8px !important; }
    .recipe-card .absolute.top-3.left-3 { left: 8px !important; }
    .recipe-card .absolute.top-3.right-3 { right: 8px !important; width: 28px !important; height: 28px !important; }
    .recipe-card .absolute.bottom-3.left-3 { bottom: 8px !important; left: 8px !important; font-size: 10px !important; padding: 4px 8px !important; }
}

/* Sidebar & Forms at tiny */
@media (max-width: 380px) {
    .flex.gap-2 input, .flex.gap-2 button { font-size: 12px !important; padding: 8px 12px !important; }
    form.flex.gap-2 { flex-direction: column !important; }
    form.flex.gap-2 input { width: 100% !important; }
    form.flex.gap-2 button { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 280px) {
    .w-14.h-14 { width: 36px !important; height: 36px !important; }
    .w-16.h-16 { width: 40px !important; height: 40px !important; }
    .text-xs { font-size: 10px !important; }
    .px-3.py-1\.5 { padding: 4px 8px !important; }
}

/* Header nav at ultra small */
@media (max-width: 320px) {
    nav .max-w-7xl { padding-left: 8px !important; padding-right: 8px !important; }
    nav h1 { font-size: 14px !important; }
}
@media (max-width: 280px) {
    nav .hidden.sm\:block { display: none !important; }
    nav .sm\:hidden { display: block !important; }
    #mobileBtn { width: 28px !important; height: 28px !important; }
}
@media (max-width: 200px) {
    nav .flex.items-center.justify-between { gap: 4px !important; }
    nav a.flex.items-center.gap-2\.5 { gap: 6px !important; }
    nav .w-8.h-8 { width: 24px !important; height: 24px !important; font-size: 12px !important; }
}
@media (max-width: 130px) {
    nav h1 { display: none !important; }
}

/* Footer */
@media (max-width: 380px) {
    footer .grid.md\:grid-cols-4 { grid-template-columns: 1fr !important; gap: 20px !important; }
    footer .flex.flex-col.md\:flex-row { flex-direction: column !important; text-align: center !important; }
}

/* Prose at tiny */
@media (max-width: 400px) {
    .prose { font-size: 14px !important; line-height: 1.6 !important; }
    .prose h2 { font-size: 18px !important; margin-top: 20px !important; }
    .prose h3 { font-size: 16px !important; }
    .prose img { border-radius: 12px !important; }
}
@media (max-width: 240px) {
    .prose { font-size: 12px !important; }
    .prose * { word-break: break-word !important; }
}

/* Pagination */
@media (max-width: 380px) {
    .paginate_links, .page-numbers { flex-wrap: wrap !important; justify-content: center !important; }
    .page-numbers.current { padding: 4px 10px !important; font-size: 12px !important; }
}

/* Hide horizontal scroll */
@media (max-width: 100px) {
    body { font-size: 10px !important; }
    .max-w-7xl { padding-left: 4px !important; padding-right: 4px !important; }
    h1 { font-size: 12px !important; }
    * { max-width: 100vw !important; }
}

/* ===== Article H2 Beautiful Style ===== */
.prose h2 {
    position: relative;
    letter-spacing: -0.02em;
}
.prose h2::before {
    content: "✦";
    display: inline-block;
    margin-right: 8px;
    color: #F97316;
    font-size: 0.75em;
    vertical-align: middle;
    opacity: 0.9;
}
.prose h2:hover {
    border-left-color: #EA580C !important;
    box-shadow: 0 2px 8px rgba(249,115,22,0.15) !important;
    transform: translateX(2px);
    transition: all 0.3s ease;
}
.prose h3 {
    position: relative;
}
.prose h3::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #FDBA74;
    border-radius: 2px;
}