/* ─────────────────────────────────────────────────────────────
   main-fix.css — Missing Tailwind utilities for main site pages
   (index.html, features.html, machine.html, terms.html, etc.)
   ───────────────────────────────────────────────────────────── */

/* 1 ── Padding Y */
.py-1   { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-2   { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-16  { padding-top: 4rem;     padding-bottom: 4rem; }

/* 2 ── Padding X */
.px-2   { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-7   { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-9   { padding-left: 2.25rem; padding-right: 2.25rem; }
.px-10  { padding-left: 2.5rem;  padding-right: 2.5rem; }
.px-12  { padding-left: 3rem;    padding-right: 3rem; }

/* 3 ── Padding Top */
.pt-2   { padding-top: 0.5rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-10  { padding-top: 2.5rem; }
.pt-12  { padding-top: 3rem; }
.pt-16  { padding-top: 4rem; }
.pt-24  { padding-top: 6rem; }
.pt-32  { padding-top: 8rem; }

/* 4 ── Padding Bottom */
.pb-0   { padding-bottom: 0; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-8   { padding-bottom: 2rem; }
.pb-16  { padding-bottom: 4rem; }
.pb-20  { padding-bottom: 5rem; }
.pb-24  { padding-bottom: 6rem; }

/* 5 ── Margin */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-10  { margin-top: 2.5rem; }
.mb-0   { margin-bottom: 0; }
.mb-5   { margin-bottom: 1.25rem; }
.mb-10  { margin-bottom: 2.5rem; }
.ml-1   { margin-left: 0.25rem; }
.ml-2   { margin-left: 0.5rem; }
.-ml-2  { margin-left: -0.5rem; }
.-ml-8  { margin-left: -2rem; }

/* 6 ── Space between */
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

/* 7 ── Gap */
.gap-1   { gap: 0.25rem; }
.gap-2   { gap: 0.5rem; }
.gap-5   { gap: 1.25rem; }
.gap-7   { gap: 1.75rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }

/* 8 ── Heights */
.h-2   { height: 0.5rem; }
.h-7   { height: 1.75rem; }
.h-9   { height: 2.25rem; }
.h-11  { height: 2.75rem; }
.h-14  { height: 3.5rem; }
.h-24  { height: 6rem; }
.h-28  { height: 7rem; }
.h-3\.5 { height: 0.875rem; }

/* 9 ── Widths */
.w-2   { width: 0.5rem; }
.w-7   { width: 1.75rem; }
.w-9   { width: 2.25rem; }
.w-11  { width: 2.75rem; }
.w-14  { width: 3.5rem; }
.w-52  { width: 13rem; }
.w-64  { width: 16rem; }
.w-3\.5 { width: 0.875rem; }
.w-fit  { width: fit-content; }
.w-max  { width: max-content; }

/* 10 ── Arbitrary text sizes */
.text-\[7px\]   { font-size: 7px; }
.text-\[8px\]   { font-size: 8px; }
.text-\[8\.5px\]{ font-size: 8.5px; }
.text-\[9px\]   { font-size: 9px; }
.text-\[9\.5px\]{ font-size: 9.5px; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[12px\]  { font-size: 12px; }
.text-\[13px\]  { font-size: 13px; }

/* 11 ── Arbitrary letter-spacing */
.tracking-\[0\.05em\] { letter-spacing: 0.05em; }
.tracking-\[0\.1em\]  { letter-spacing: 0.1em; }
.tracking-\[0\.12em\] { letter-spacing: 0.12em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.3em\]  { letter-spacing: 0.3em; }
.tracking-\[0\.4em\]  { letter-spacing: 0.4em; }
.tracking-\[\.1em\]   { letter-spacing: 0.1em; }
.tracking-\[\.15em\]  { letter-spacing: 0.15em; }
.tracking-\[\.2em\]   { letter-spacing: 0.2em; }
.tracking-\[\.25em\]  { letter-spacing: 0.25em; }
.tracking-\[\.3em\]   { letter-spacing: 0.3em; }

/* 12 ── Z-index */
.z-\[60\]  { z-index: 60; }
.z-\[80\]  { z-index: 80; }
.z-\[90\]  { z-index: 90; }
.z-\[110\] { z-index: 110; }
.z-\[200\] { z-index: 200; }
.z-\[9999\]{ z-index: 9999; }

/* 13 ── Min/Max */
.min-h-screen { min-height: 100vh; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }

/* 14 ── Backdrop blur */
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* 15 ── White/Black opacity backgrounds */
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/20 { background-color: rgba(255,255,255,0.20); }
.bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.bg-black\/50 { background-color: rgba(0,0,0,0.50); }
.bg-black\/98 { background-color: rgba(0,0,0,0.98); }

/* 16 ── White/Black opacity borders */
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-white\/40 { border-color: rgba(255,255,255,0.40); }

/* 17 ── Pixel dimensions */
.h-\[1px\] { height: 1px; }
.w-\[1px\] { width: 1px; }

/* 18 ── Selection */
::selection { background: #fff; color: #000; }

/* ── RESPONSIVE ── */

@media (min-width: 640px) {
    .sm\:inline  { display: inline; }
    .sm\:hidden  { display: none; }
    .sm\:px-8    { padding-left: 2rem; padding-right: 2rem; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-\[10px\] { font-size: 10px; }
    .sm\:space-x-3 > * + * { margin-left: 0.75rem; }
}

@media (min-width: 768px) {
    /* Padding */
    .md\:py-2    { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
    .md\:py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .md\:py-5    { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
    .md\:px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
    .md\:px-10   { padding-left: 2.5rem;  padding-right: 2.5rem; }
    .md\:px-16   { padding-left: 4rem;    padding-right: 4rem; }
    .md\:pb-0    { padding-bottom: 0; }
    .md\:pb-20   { padding-bottom: 5rem; }
    .md\:pt-0    { padding-top: 0; }
    .md\:mb-10   { margin-bottom: 2.5rem; }
    /* Text */
    .md\:text-\[5rem\]  { font-size: 5rem; }
    .md\:text-\[7px\]   { font-size: 7px; }
    .md\:text-\[8px\]   { font-size: 8px; }
    .md\:text-\[9px\]   { font-size: 9px; }
    .md\:text-\[10px\]  { font-size: 10px; }
    .md\:text-\[11px\]  { font-size: 11px; }
    /* Gap & space */
    .md\:gap-5   { gap: 1.25rem; }
    .md\:space-x-3 > * + * { margin-left: 0.75rem; }
    .md\:space-x-5 > * + * { margin-left: 1.25rem; }
    /* Dimensions */
    .md\:h-7     { height: 1.75rem; }
    .md\:w-7     { width: 1.75rem; }
    .md\:w-9     { width: 2.25rem; }
    .md\:h-9     { height: 2.25rem; }
    .md\:w-52    { width: 13rem; }
    .md\:w-fit   { width: fit-content; }
    .md\:justify-end { justify-content: flex-end; }
}

/* Footer contact row hover */
.footer-contact-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.05);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25,1,0.5,1);
    z-index: 0;
}
.footer-contact-row:hover::before { transform: scaleX(1); }
.footer-contact-row:hover span { color: white !important; }

/* WhatsApp green hover */
.footer-wa::before { background: rgba(37,211,102,0.15) !important; }
.footer-wa:hover span { color: #25D366 !important; }
.footer-wa:hover svg { fill: #25D366 !important; }

@media (min-width: 1024px) {
    .lg\:text-\[6\.5rem\] { font-size: 6.5rem; }
    .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
    .lg\:px-16  { padding-left: 4rem; padding-right: 4rem; }
    .lg\:py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .lg\:hidden { display: none; }
    .lg\:block  { display: block; }
    .lg\:inline { display: inline; }
    .lg\:w-full { width: 100%; }
    .lg\:ml-auto { margin-left: auto; }
    .lg\:gap-8   { gap: 2rem; }
    .lg\:gap-16  { gap: 4rem; }
}

/* ═══════════════════════════════════════════
   MOBILE UX — max-width: 767px
   ═══════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Nav: tighter padding + smaller logo ── */
    nav.fixed { padding: 14px 20px !important; }
    #nav-logo-desktop img { height: 46px !important; }

    /* ── Floating dropdown menu: bump up to match smaller nav ── */
    #overlay-menu { top: 62px !important; right: 16px !important; width: calc(100vw - 32px) !important; max-width: 320px !important; }

    /* ── Hero: center content vertically, push below nav ── */
    #slide-hero header > .relative.z-10 {
        justify-content: flex-start !important;
        padding-bottom: 0 !important;
        padding-top: 5rem !important;
    }
    #slide-hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem) !important; line-height: 0.9 !important; }
    #slide-hero p[style*="clamp(1rem"] { font-size: 0.85rem !important; }

    /* ── Machine section: scale down headings ── */
    #slide-machine h2 { font-size: 2.2rem !important; line-height: 1 !important; }
    #slide-machine h2 span { font-size: 1.5rem !important; }
    #slide-machine .max-w-3xl { max-width: 100% !important; }

    /* ── Gallery section: less bottom padding ── */
    #slide-gallery .relative.z-20 { padding-bottom: 4rem !important; }
    #slide-gallery h2 { font-size: 2rem !important; }

    /* ── Features section: remove top padding (already has nav) ── */
    #slide-features section > .max-w-7xl { padding-top: 5rem !important; }

    /* ── Terms/Rates: tighter layout ── */
    #slide-terms .grid { gap: 0.5rem !important; }

    /* ── Machine cards: disable hover effects on mobile ── */
    #slide-machine .group:hover { transform: none !important; border-color: rgba(255,255,255,0.05) !important; box-shadow: none !important; }
    #slide-machine .group:active { transform: none !important; }
    #slide-machine .group-hover\:-translate-y-1 { transform: none !important; }

    /* ── Footer: allow scrolling on mobile ── */
    #slide-footer { height: auto !important; min-height: 100vh; }
    #slide-footer footer { position: relative !important; min-height: 100vh; }

    /* ── Footer grid: single column on mobile ── */
    footer div[style*="grid-template-columns:1fr 1fr"],
    footer div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    /* Footer right column: left-align on mobile */
    footer div[style*="text-align:right"] { text-align: left !important; }
    footer div[style*="text-align:right"] a,
    footer div[style*="text-align:right"] h4 { text-align: left !important; }
    footer .footer-contact-row { justify-content: flex-start !important; }
}