/*
Theme Name: Ekspor Vanilla Theme
Theme URI: https://suppliervanilla.com/
Author: Rizal Maulana Hasbi
Description: Enterprise B2B Indonesian Vanilla Bean Export Theme.
Version: 1.1.0
Text Domain: ekspor-vanilla
*/

/* =========================================================
   WANA VANILLA — RESPONSIVE SAFETY LAYER
   Tailwind remains the primary UI system. This stylesheet
   handles global mobile safeguards and accessibility.
   ========================================================= */

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, iframe {
    max-width: 100%;
}

img {
    height: auto;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    touch-action: manipulation;
}

/* Prevent long B2B values such as HS codes, emails and URLs
   from creating horizontal overflow on narrow screens. */
.prose,
.break-long,
td, th,
[class*="whitespace-nowrap"] {
    overflow-wrap: anywhere;
}

/* Tables remain readable without breaking the page width. */
.table-scroll,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Better keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #B89060;
    outline-offset: 3px;
}

/* Mobile typography and spacing */
@media (max-width: 767px) {
    html {
        font-size: 16px;
    }

    body {
        line-height: 1.6;
    }

    h1, h2, h3, h4 {
        overflow-wrap: anywhere;
    }

    /* Make generic CTA buttons comfortable for touch. */
    a, button {
        min-height: 44px;
    }

    /* Avoid accidental oversized desktop padding on sections. */
    section {
        scroll-margin-top: 100px;
    }

    /* Google Translate should never create a visible top offset. */
    body {
        top: 0 !important;
    }
}

@media (max-width: 479px) {
    /* Small phones: keep cards and controls inside the viewport. */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl {
        max-width: 100%;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}