/* Liora Port Spa — custom layer on top of Tailwind CDN */

/* Numeric font-weight helpers (used throughout the markup) */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

:root {
    --cream: #FFFDF9;
    --apricot: #F5CBA7;
    --sage: #778A77;
    --ink: #33403A;
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* Smooth, accessible focus rings */
:where(a, button, textarea):focus-visible {
    outline: 2px solid var(--apricot);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

:where(input:not([data-search-input])):focus-visible {
    outline: 2px solid var(--apricot);
    outline-offset: 2px;
    border-radius: 0.75rem;
}

[data-search-input]:focus,
[data-search-input]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Header glass effect once scrolled */
#site-header.is-scrolled {
    background: rgba(255, 253, 249, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 8px 30px -16px rgba(94, 113, 93, 0.35);
}

/* Reveal-on-scroll (skip on LCP / above-the-fold hero — hidden content delays PageSpeed) */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible,
.reveal-lcp {
    opacity: 1;
    transform: none;
}

/* Decorative gradient text */
.text-gradient {
    background: linear-gradient(120deg, var(--sage), var(--apricot));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Soft custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d9cdbb; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--apricot); }

/* Lock scroll when a modal/menu is open */
body.no-scroll { overflow: hidden; }

/* About page gallery — centered 2× / 3× grid (no Tailwind arbitrary widths) */
.about-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 64rem;
    margin-inline: auto;
}
@media (min-width: 640px) {
    .about-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}
.about-gallery > button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.about-gallery picture,
.about-gallery img {
    display: block;
    width: 100%;
}

/* Hero pattern overlay */
.hero-grain {
    background-image: radial-gradient(circle at 20% 20%, rgba(245, 203, 167, 0.35), transparent 45%),
                      radial-gradient(circle at 80% 0%, rgba(119, 138, 119, 0.18), transparent 40%);
}

/* RTL niceties */
[dir="rtl"] .fa-arrow-up,
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* Animation aliases for camelCase names used in markup */
.animate-pulseRing { animation: pulseRing 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-fadeUp    { animation: fadeUp   0.7s ease forwards; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .animate-floaty, .animate-pulseRing, .animate-fadeUp { animation: none !important; }
    html { scroll-behavior: auto; }
}