/* ==========================================================================
   HandyCare.ae - custom layer
   Everything Tailwind utilities cannot express. Loaded on every page, so it
   is cached once instead of being repeated in 14 inline <style> blocks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Direction is set on <html> by the bootstrap script in each page's <head>,
   before <body> exists, so the Arabic face applies on the first paint. */
html[dir="rtl"] body {
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Cairo covers both scripts, so the language toggle reads consistently
   whether it says "العربية" or "English". */
#currentLang {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

html {
    scroll-behavior: smooth;
    /* Stop #booking and other anchors from landing underneath the fixed nav. */
    scroll-padding-top: 5.5rem;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Adds depth to the flat brand gradient: a soft highlight from the top-left
   and a shadow bottom-right, so large hero panels do not read as a plain fill. */
.hero-surface {
    position: relative;
    isolation: isolate;
}

.hero-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55rem 28rem at 12% -15%, rgba(255, 255, 255, 0.20), transparent 62%),
        radial-gradient(45rem 25rem at 95% 115%, rgba(15, 23, 42, 0.22), transparent 58%);
}

/* --------------------------------------------------------------------------
   Focus
   Tailwind's default ring is easy to lose against the gradient panels, so
   every interactive element gets one explicit, high-contrast treatment.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
    border-radius: 0.375rem;
}

/* On coloured panels a purple ring disappears — switch to white. */
.gradient-bg:focus-visible,
.hero-surface a:focus-visible,
.bg-green-500:focus-visible,
footer a:focus-visible {
    outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.site-nav {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* script.js sets data-scrolled once the page moves, so the bar sits flat at
   the top of the document and lifts off the content as you scroll. */
.site-nav[data-scrolled="true"] {
    box-shadow: 0 10px 30px -18px rgba(17, 24, 39, 0.55);
}

.nav-link {
    position: relative;
}

.nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -0.45rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
}

/* --------------------------------------------------------------------------
   Mobile menu
   Animated open/close. Collapsed by CSS rather than Tailwind's `hidden`, so
   there is a height to transition; visibility keeps the links out of the tab
   order while closed.
   -------------------------------------------------------------------------- */

#mobileMenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s linear 0.25s;
}

#mobileMenu.is-open {
    max-height: 32rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.25s ease, opacity 0.2s ease, visibility 0s;
}

/* --------------------------------------------------------------------------
   Calls to action
   -------------------------------------------------------------------------- */

.whatsapp-float {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
    50%      { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6); }
}

/* Sticky call/WhatsApp bar, mobile only. Reserve room at the foot of the page
   so it never covers the footer or the submit button. */
.mobile-cta {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 767px) {
    body {
        padding-bottom: 4.75rem;
    }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

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