/*
 * Global Fusion RVA — shared site styles.
 * Loaded on every page alongside the Tailwind CDN build.
 */

/* Base styles */
html {
    overflow-x: hidden;
}

body {
    background-color: #FFFBF5;
    color: #1C1917;
    overflow-x: hidden;
}

/* Visible focus outline for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #EA580C;
    outline-offset: 2px;
}

/* Skip-to-content link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #FFFBF5;
    color: #1C1917;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #FFFBF5;
}
::-webkit-scrollbar-thumb {
    background: #991B1B;
    border-radius: 5px;
}

/* Animation Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-active {
    opacity: 1;
    transform: translate(0);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-left, .reveal-right {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Staggered delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Image hover zoom */
.img-zoom-container {
    overflow: hidden;
}
.img-zoom-container img {
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.img-zoom-container:hover img {
    transform: scale(1.05);
}

/* Nav scroll effect */
.nav-scrolled {
    background-color: rgba(255, 251, 245, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    color: #1C1917 !important;
}
.nav-scrolled .nav-link {
    color: #1C1917;
}
.nav-scrolled .nav-link:hover,
.nav-scrolled .nav-link.active {
    color: #991B1B;
}
.nav-scrolled .logo-text {
    color: #991B1B;
}
.nav-scrolled .menu-btn {
    color: #1C1917;
}

/* Non-transparent header pages (interior pages without a full-bleed hero) */
.nav-solid {
    background-color: rgba(255, 251, 245, 0.98);
    color: #1C1917;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.nav-solid .nav-link { color: #1C1917; }
.nav-solid .nav-link:hover,
.nav-solid .nav-link.active { color: #991B1B; }
.nav-solid .logo-text { color: #991B1B; }
.nav-solid .menu-btn { color: #1C1917; }

/* Announcement bar: fixed above the header, only ever present in the DOM
 * when js/main.js finds a real ANNOUNCEMENT value. */
#announcement-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
}
body.has-announcement #navbar {
    top: 2.5rem;
}

/* Mobile menu */
#mobile-menu {
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* Hand-painted accent font: short accents / scripture line only. Never body copy or nav. */
.font-accent {
    font-family: 'Permanent Marker', cursive;
    line-height: 1.4;
}

/* ============================================================
 * Merchant background test (branch: merchant-background-test)
 * Site-wide stationary tropical/BBQ artwork behind a centered
 * content shell, per merchant request. Applied via the
 * `site-background` body class added consistently across all
 * eight public pages. Uses the merchant-supplied logo-free
 * variant only (images/brand/tropical-bbq-background.webp) --
 * see DNA.md section 12 for the source branding direction.
 * ============================================================ */
:root {
    /* 1280px (was 1200px): a slightly wider shell shrinks the loud
       artwork down to a narrow decorative frame at common desktop
       widths, while still leaving enough visible at very wide
       viewports (1920px+) to read as the merchant's requested
       background. Keep the media query below in sync with this. */
    --shell-max-width: 1280px;
}

/* Stationary artwork layer: a fixed pseudo-element pinned to the
 * viewport behind everything else, instead of
 * background-attachment: fixed (unreliable on mobile browsers).
 * z-index is 0, never negative, so it can't slip behind body's
 * own background; pointer-events: none keeps it fully inert.
 * `inset: -10px` oversizes the layer slightly beyond the viewport
 * so the blur below never exposes a soft/transparent edge at the
 * screen boundary. */
body.site-background {
    position: relative;
}

body.site-background::before {
    content: '';
    position: fixed;
    inset: -10px;
    z-index: 0;
    pointer-events: none;
    background-image: url('../images/brand/tropical-bbq-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Subdued, uniform treatment only -- no overlay div, no gradient --
       so the very saturated tropical/BBQ artwork reads as quiet
       atmosphere behind the shell instead of competing wallpaper.
       Brightness and saturation are pulled well down and a light
       blur softens the flame lettering and flowers, while staying
       mild enough that the artwork is still recognizable in the
       shell's side gutters. */
    filter: brightness(0.52) saturate(0.72) blur(2px);
}

/* Continuous side shadow + hairline border for the centered shell.
 * One full-height pseudo-element (rather than separate shadows on
 * #navbar / #main-content / footer individually) keeps the shadow
 * a single unbroken strip down the page, so there is no seam or
 * horizontal band where the header meets main or main meets the
 * footer. Shadow offsets are horizontal-only so nothing appears
 * above or below any individual section. Sits above the artwork
 * (same z-index, later in paint order) and below all real content. */
body.site-background::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--shell-max-width));
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    box-shadow:
        -28px 0 48px -18px rgba(28, 15, 8, 0.35),
        28px 0 48px -18px rgba(28, 15, 8, 0.35),
        inset 1px 0 0 rgba(255, 214, 170, 0.18),
        inset -1px 0 0 rgba(255, 214, 170, 0.18);
}

/* Below the shell width the site becomes full-width (no side
 * gutters), so the shadow/border would just sit at the raw
 * viewport edge -- neutralize it there. Keep this breakpoint in
 * sync with --shell-max-width above. */
@media (max-width: 1280px) {
    body.site-background::after {
        display: none;
    }
}

/* Centered site shell: header, main content, and footer share one
 * max-width so the fixed artwork above stays visible in the side
 * gutters at wide viewports. Below --shell-max-width the shell
 * naturally becomes full-width (no separate breakpoint needed).
 * #main-content and footer get an explicit stacking context so
 * they always paint above the fixed artwork pseudo-element. */
body.site-background #navbar {
    left: 0;
    right: 0;
    max-width: var(--shell-max-width);
    margin-left: auto;
    margin-right: auto;
}

body.site-background #main-content,
body.site-background footer {
    position: relative;
    z-index: 1;
    max-width: var(--shell-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
 * Light-surface palette (homepage color refinement test)
 * Replaces pure-white section backgrounds with a restrained,
 * warm-neutral palette so light sections read as part of the
 * same warm, tropical-adjacent site instead of a cold cutout.
 * Reusable so later pages can adopt the same four surfaces.
 * ============================================================ */
.surface-ivory { background-color: #F7F2E9; } /* warm ivory */
.surface-sand  { background-color: #EFE5D7; } /* pale sand */
.surface-sage  { background-color: #E9EFEA; } /* very pale sage */
.surface-card  { background-color: #FFFDFC; } /* card surface */

/* The shared press-card markup (js/main.js renderPressList) still
 * ships `bg-white` -- scope the card-surface override to the two
 * known press containers (home summary + full news page) by id
 * instead of editing the shared JS. */
#press-list-home .bg-white,
#press-list-full .bg-white {
    background-color: #FFFDFC;
}