@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@300;400;500;600&family=Work+Sans:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --leaf: #3a4d39;
        --gold: #725b20;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-surface text-on-surface font-body text-body-md antialiased;
        /* Parchment tooth: two barely-there tints, no image request. */
        background-image:
            radial-gradient(circle at 18% 12%, rgba(58, 77, 57, 0.035), transparent 42%),
            radial-gradient(circle at 82% 78%, rgba(114, 91, 32, 0.03), transparent 46%);
        background-attachment: fixed;
    }

    h1, h2, h3, h4 {
        @apply font-headline text-primary;
    }

    /* Arabic needs more leading; Naskh descenders collide at Latin metrics. */
    html[dir='rtl'] body {
        @apply leading-[1.9];
    }

    html[dir='rtl'] h1,
    html[dir='rtl'] h2,
    html[dir='rtl'] h3 {
        @apply leading-[1.6] tracking-normal;
    }

    /* Arabic has no uppercase; wide tracking on Arabic breaks the joins. */
    html[dir='rtl'] .u-label,
    html[dir='rtl'] .u-label-sm {
        text-transform: none;
        letter-spacing: normal;
    }

    /* Same reasoning for buttons, which set their own uppercase. */
    html[dir='rtl'] .btn {
        text-transform: none;
        letter-spacing: normal;
    }

    :focus-visible {
        @apply outline-none ring-2 ring-secondary ring-offset-2 ring-offset-surface;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

@layer components {
    .shell {
        @apply mx-auto w-full max-w-container px-margin-mobile md:px-margin-desktop;
    }

    /* Gallery-style metadata label. Latin: uppercase + 0.1em. Arabic: neither. */
    .u-label {
        @apply font-label text-label-lg uppercase;
    }

    .u-label-sm {
        @apply font-label text-label-sm uppercase tracking-[0.08em];
    }

    /* Buttons — solid olive, gold text, 1px inset border for the debossed feel. */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded px-6 py-3
               font-label text-label-lg uppercase transition-all duration-200 ease-soft
               active:scale-[0.98] disabled:pointer-events-none disabled:opacity-40;
    }

    .btn-primary {
        @apply btn bg-primary text-secondary-fixed
               shadow-[inset_0_0_0_1px_rgba(255,223,152,0.28)]
               hover:bg-primary-container hover:shadow-ambient;
    }

    .btn-gold {
        @apply btn bg-secondary-fixed text-on-secondary-fixed
               shadow-[inset_0_0_0_1px_rgba(36,54,36,0.22)] hover:bg-secondary-fixed-dim;
    }

    .btn-ghost {
        @apply btn border border-outline-variant bg-transparent text-primary
               hover:border-secondary hover:bg-surface-container-low;
    }

    /* Product card — no fill on cream, hairline border, image is the hero.
       NOTE: the `group` marker class belongs on the element in the Blade
       template, not here — it emits no CSS and cannot be @applied. */
    .card-product {
        @apply flex h-full flex-col overflow-hidden rounded-lg border
               border-outline-variant/70 bg-transparent transition-all duration-300 ease-soft
               hover:-translate-y-1 hover:border-secondary/60 hover:shadow-ambient;
    }

    /* Category menu — CSS only, so primary navigation never depends on the JS
       bundle loading. :focus-within covers keyboard and touch (tapping the
       trigger focuses it); hover is gated behind a real pointer so a tap on a
       touch device cannot leave the menu stuck open.

       Geometry lives here rather than as utility classes on the element. The
       panel is a component with one correct size, and keeping its width in this
       file means it cannot be lost to a content-scan miss in the build. */
    [data-menu] {
        position: relative;
    }

    [data-menu-panel] {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 50;
        display: none;
        width: 34rem;
        max-width: calc(100vw - 2rem);
        /* Padding rather than margin: the gap below the trigger has to stay
           inside the hover target, or the menu shuts as the cursor crosses it. */
        padding-top: 0.75rem;
    }

    [data-menu-panel] > * {
        width: 100%;
    }

    [data-menu]:focus-within [data-menu-panel] {
        display: block;
    }

    [data-menu]:focus-within .caret {
        transform: rotate(180deg);
    }

    @media (hover: hover) and (pointer: fine) {
        [data-menu]:hover [data-menu-panel] {
            display: block;
        }

        [data-menu]:hover .caret {
            transform: rotate(180deg);
        }
    }

    /* Chip — gold outline, uppercase Work Sans. "Halal Certified", "Dry Aged". */
    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full border border-secondary/45
               px-3 py-1 font-label text-label-sm uppercase tracking-[0.08em] text-secondary;
    }

    /* Input — cream fill, bottom rule only. */
    .field {
        @apply w-full border-0 border-b border-outline-variant bg-surface-container-low/60
               px-0 py-3 font-body text-body-md text-on-surface
               placeholder:text-outline focus:border-secondary focus:ring-0;
    }

    /* Section heading rule — sits on the inline-start edge, so it flips with dir. */
    .rule-start {
        @apply border-s-4 border-primary ps-4;
    }

    /* Leaf bullets, lifted from the wordmark's laurel. */
    .list-leaf {
        @apply space-y-stack-sm;
    }

    .list-leaf > li {
        @apply relative ps-6;
    }

    .list-leaf > li::before {
        content: '';
        @apply absolute top-[0.6em] h-2 w-2 rounded-full bg-secondary/70;
        inset-inline-start: 0;
    }
}

@layer utilities {
    .uppercase-none {
        text-transform: none;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Arabic numerals stay Latin for prices — KWD figures read cleaner. */
    .num {
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: isolate;
    }
}