/*
 * AOUID Website Template — "Marine" (Corporate Navy & Amber)
 * ------------------------------------------------------------
 * A trust-first, fintech/logistics-grade re-skin built around a documented
 * color strategy: deep navy as the structural anchor (header, hero,
 * footer), energetic orange reserved for action points (CTAs, live
 * badges), a clean white/cool-gray canvas for content, and a functional
 * multicolor system for service categories (grocery/food/pharmacy/shop/
 * parcel) so visitors can scan by color, not just text.
 *
 * Every rule targets AOUID's own Tailwind design tokens and existing
 * markup — nothing here requires a different page structure. Loaded after
 * the base stylesheet, so plain CSS cascade order does the overriding.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Cairo:wght@400;500;700;800&display=swap');

:root {
    /* ---- Typography ---- */
    --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-arabic: 'Cairo', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Sora', 'Manrope', ui-sans-serif, sans-serif;

    /* ---- Brand ramp: energetic orange — reserved for action points
       (CTAs, live badges, focus rings), unchanged in spirit from the
       brief's #F97316 anchor. ---- */
    --color-brand-50: #fff7ed;
    --color-brand-100: #ffedd5;
    --color-brand-200: #fed7aa;
    --color-brand-300: #fdba74;
    --color-brand-400: #fb923c;
    --color-brand-500: #f97316;
    --color-brand-600: #ea580c;
    --color-brand-700: #c2410c;
    --color-brand-800: #9a3412;
    --color-brand-900: #7c2d12;

    /* ---- Neutral ramp: cool white-to-navy — doubles as both the
       "Clean White/Cool Gray" canvas (light end) and the "Deep Navy"
       structural anchor (dark end, ink-900 == the brief's #0F2C59), since
       the footer already renders as bg-ink-900 with zero extra CSS. ---- */
    --color-ink-50: #f5f8fc;
    --color-ink-100: #e7edf8;
    --color-ink-200: #cddaf1;
    --color-ink-300: #a3bce3;
    --color-ink-400: #7093d0;
    --color-ink-500: #3d68bf;
    --color-ink-600: #1d4ed8;
    --color-ink-700: #163d9e;
    --color-ink-800: #132e78;
    --color-ink-900: #0f2c59;

    /* ---- Functional category colors — used only by the :has() rules
       below, not part of the base token system. ---- */
    --category-grocery-bg: #ecfdf5;
    --category-grocery-fg: #059669;
    --category-food-bg: #fef2f2;
    --category-food-fg: #dc2626;
    --category-pharmacy-bg: #f0fdfa;
    --category-pharmacy-fg: #0d9488;
    --category-shop-bg: #fffbeb;
    --category-shop-fg: #d97706;
    --category-parcel-bg: #fdf6ec;
    --category-parcel-fg: #78350f;
}

/* Clean whites stay clean — deliberately no override of .bg-white here
   (unlike other templates in this family): the brief calls for pure
   #FFFFFF as the canvas specifically for cognitive clarity against dense
   multi-vendor listings, not an off-white tint. */

/* ==========================================================================
   Typography — a geometric display face for headings/prominent text
   (trust through confident, modern type), a highly-legible sans for body
   copy. Targets semantic heading tags and the font-weight utilities this
   app's templates already use for prominent text.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-extrabold,
.font-black {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3, html[dir='rtl'] h4,
html[dir='rtl'] .font-extrabold, html[dir='rtl'] .font-black {
    /* Sora has no Arabic glyphs — fall through to the Arabic sans for RTL
       headings instead of silently rendering tofu/system-default. */
    font-family: var(--font-arabic);
    font-weight: 800;
    letter-spacing: 0;
}

/* ==========================================================================
   Header — the brief's "visual anchor": a solid deep-navy bar instead of
   the base template's translucent white, with light text overrides scoped
   strictly to inside the header so nothing outside it is affected.
   ========================================================================== */
header.sticky {
    background-color: var(--color-ink-900);
    border-bottom: 1px solid var(--color-ink-700);
}

header.sticky .text-ink-900,
header.sticky .text-ink-700,
header.sticky .text-ink-600 {
    color: #eef2fb;
}

header.sticky a.text-ink-600:hover,
header.sticky a:hover {
    color: var(--color-brand-400);
}

header.sticky .border-ink-200 {
    border-color: rgb(255 255 255 / 0.18);
}

header.sticky svg {
    color: currentColor;
}

/* The language-switcher's own dropdown panel is a separate floating card,
   not part of the persistent navy bar — it stays on the clean white
   canvas like every other card/menu, matching the brief's own "clean
   white" surfaces rather than inheriting the header's navy. */

/* ==========================================================================
   Hero — redirected from the base template's orange gradient to a navy
   one, so the "visual anchor" carries through the first thing a visitor
   sees, not just the header. Orange stays reserved for the CTA button
   inside it, per the brief's own framing (action points, not backgrounds).
   Only these three gradient utilities are touched — .bg-brand-600 etc.
   used elsewhere (buttons, hovers) are separate compiled rules and are
   unaffected. Deliberately no var(--tw-gradient-*-position) suffix on any
   of these — Tailwind only defines those variables when an explicit
   position utility (e.g. "to-90%") is present, which none of these
   classes have; referencing an undefined custom property with no
   fallback makes the *entire* containing declaration invalid, silently
   dropping back to a fully transparent gradient stop (confirmed
   empirically: the hero rendered with an invisible white-on-white heading
   before this fix).
   ========================================================================== */
.from-brand-600 {
    --tw-gradient-from: #0f2c59;
}

.via-brand-500 {
    --tw-gradient-via: #163d9e;
}

.to-orange-400 {
    --tw-gradient-to: #1d4ed8;
}

section.bg-gradient-to-br h1 {
    font-weight: 700;
    text-shadow: 0 2px 20px rgb(0 0 0 / 0.2);
}

/* ==========================================================================
   Primary CTA — a subtle "live" pulse ring on the Order Now button
   specifically (data-order-now-cta, set by order-now-button.blade.php),
   echoing the brief's "active tracking/real-time" energy without adding
   any actual tracking feature that doesn't exist in this app.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    [data-order-now-cta] {
        position: relative;
    }

    [data-order-now-cta]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgb(249 115 22 / 0.55);
        animation: aouid-marine-pulse 2.4s ease-out infinite;
        pointer-events: none;
    }

    @keyframes aouid-marine-pulse {
        0% { box-shadow: 0 0 0 0 rgb(249 115 22 / 0.45); }
        70% { box-shadow: 0 0 0 12px rgb(249 115 22 / 0); }
        100% { box-shadow: 0 0 0 0 rgb(249 115 22 / 0); }
    }
}

/* ==========================================================================
   Category indicators — functional multicolor system for service icons
   (card-service.blade.php's icon wrapper, always bg-brand-50/text-brand-600
   regardless of category). CSS-only, no markup changes: each category's
   SVG icon has a distinct, hardcoded path — matching on that path's own
   "d" attribute is a stable hook that survives across page renders.
   ========================================================================== */
.bg-brand-50:has(path[d^="M2.25 3h1.386"]) {
    /* grocery */
    background-color: var(--category-grocery-bg);
    color: var(--category-grocery-fg);
}

.bg-brand-50:has(path[d^="M8.25 3v4.5"]) {
    /* meal / food */
    background-color: var(--category-food-bg);
    color: var(--category-food-fg);
}

.bg-brand-50:has(path[d^="M12 6v12m6-6H6"]) {
    /* pharmacy */
    background-color: var(--category-pharmacy-bg);
    color: var(--category-pharmacy-fg);
}

.bg-brand-50:has(path[d^="M13.5 21v-7.5"]) {
    /* shop */
    background-color: var(--category-shop-bg);
    color: var(--category-shop-fg);
}

.bg-brand-50:has(path[d^="M20.25 7.5l-.625"]) {
    /* parcel / default (the generic box icon) */
    background-color: var(--category-parcel-bg);
    color: var(--category-parcel-fg);
}

/* ==========================================================================
   Cards & panels — a crisper, more structured shadow than the base
   template's, reinforcing the "operational stability" read.
   ========================================================================== */
.shadow-soft {
    box-shadow: 0 1px 2px rgb(15 44 89 / 0.06), 0 10px 28px -10px rgb(15 44 89 / 0.22);
}

a.shadow-soft, button.shadow-soft {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.shadow-soft:hover, button.shadow-soft:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgb(15 44 89 / 0.08), 0 18px 36px -14px rgb(29 78 216 / 0.3);
}

/* ==========================================================================
   Buttons — a deliberate, confident press/hover feel on every CTA
   (rounded-full + font-semibold is the button component's own signature
   pairing, so this doesn't reach unrelated rounded-full elements like
   badges or avatar frames that lack it).
   ========================================================================== */
.rounded-full.font-semibold {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rounded-full.font-semibold:hover {
    transform: translateY(-1px);
}

.rounded-full.font-semibold:active {
    transform: translateY(0);
}

/* ==========================================================================
   Links & selection — small, consistent polish.
   ========================================================================== */
::selection {
    background-color: var(--color-ink-200);
    color: var(--color-ink-900);
}

a {
    text-underline-offset: 3px;
}

/* ==========================================================================
   Scrollbar — on-brand rather than the OS default (silently no-ops on
   browsers without support).
   ========================================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-ink-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-ink-300);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-400);
}

/* ==========================================================================
   Scroll-reveal support — plain CSS transition classes toggled by
   theme.js's IntersectionObserver. Elements are fully visible by default
   so nothing depends on JS running for content to be readable, and
   prefers-reduced-motion skips the effect entirely.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}