/* Public website, authentication and error pages. Inlined into the HTML (see App\Core\View\ViteAssets). */
@import 'tailwindcss' source(none);
@import './core/theme.css';
@import './core/fonts.css';
@import './core/base.css';
@import './core/components.css';

@source '../views/components';
@source not '../views/components/media-picker.blade.php';
@source '../views/layouts/base.blade.php';
@source '../views/layouts/public.blade.php';
@source '../views/layouts/public';
@source '../views/layouts/auth.blade.php';
@source '../views/layouts/error.blade.php';
@source '../views/pages';
@source '../views/errors';
@source '../views/pagination';
@source '../js/ui';
@source '../../app/Modules/Identity/Views/auth';
@source '../../app/Modules/Identity/Views/partials';
@source '../../app/Modules/Media/Views/attachment.blade.php';
@source '../../app/Modules/Styleguide/Views/previews/public.blade.php';
@source '../../app/Modules/Styleguide/Views/previews/auth.blade.php';
@source '../../app/Modules/Cms/Views/public';
@source '../js/cms/public.js';
@source '../js/cms/cookieConsent.js';
@source '../js/cms/siteNotice.js';

/* Seamless cross-document page transitions (progressive enhancement, zero JS). */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--duration-emphasis);
    animation-timing-function: var(--ease-standard);
}

@keyframes header-elevate {
    to {
        box-shadow: var(--shadow-md);
        background-color: color-mix(in oklab, var(--surface) 88%, transparent);
        border-color: transparent;
    }
}

@keyframes quote-bar-in {
    from {
        translate: 0 110%;
    }

    to {
        translate: 0 0;
    }
}

@layer components {
    .site-header {
        view-transition-name: site-header;
    }

    @supports (animation-timeline: scroll()) {
        .site-header {
            animation: header-elevate linear both;
            animation-timeline: scroll();
            animation-range: 0 6rem;
        }

        .quote-bar {
            animation: quote-bar-in linear both;
            animation-timeline: scroll();
            animation-range: 55vh 70vh;
        }
    }

    .site-nav-mega { width: min(42rem, calc(100vw - 2rem)); }
    .site-nav-mega--wide { width: min(52rem, calc(100vw - 2rem)); }
    .site-nav-mega__panel {
        overflow: hidden;
        border: 1px solid color-mix(in oklab, var(--color-navy-900) 12%, var(--color-line));
        border-radius: 1.1rem;
        background: linear-gradient(180deg, color-mix(in oklab, var(--color-sky-50) 60%, var(--color-surface-raised)), var(--color-surface-raised) 42%);
        box-shadow: var(--shadow-xl);
    }
    .site-nav-mega__head {
        padding: 1.05rem 1.25rem .75rem;
        border-bottom: 1px solid color-mix(in oklab, var(--color-navy-900) 8%, transparent);
        background: radial-gradient(90% 80% at 0% 0%, color-mix(in oklab, var(--color-sky-400) 14%, transparent), transparent 55%);
    }
    .site-nav-mega__eyebrow {
        margin: 0;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--color-ink-muted);
    }
    .site-nav-mega__title {
        margin: .1rem 0 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--color-ink);
    }
    .site-nav-mega__grid { display: grid; gap: .3rem; padding: .8rem; margin: 0; list-style: none; }
    .site-nav-mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-nav-mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-nav-mega__link {
        display: flex; gap: .8rem; align-items: flex-start; min-height: 5rem;
        padding: .85rem .95rem; border-radius: .85rem; text-decoration: none;
    }
    .site-nav-mega__link:hover,
    .site-nav-mega__link:focus-visible {
        background: var(--color-surface-sunken);
        outline: none;
    }
    .site-nav-mega__icon {
        display: flex; flex-shrink: 0; align-items: center; justify-content: center;
        width: 2.65rem; height: 2.65rem; border-radius: .75rem;
        color: var(--color-navy-900);
        background: color-mix(in oklab, var(--color-sky-200) 55%, #fff);
    }
    .site-nav-mega__link:hover .site-nav-mega__icon,
    .site-nav-mega__link:focus-visible .site-nav-mega__icon {
        color: #fff;
        background: linear-gradient(135deg, var(--color-navy-900), var(--color-sky-700));
    }
    .site-nav-mega__label { display: block; font-size: .95rem; font-weight: 700; color: var(--color-ink); line-height: 1.25; }
    .site-nav-mega__desc { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.4; color: var(--color-ink-muted); }
    .site-nav-mega__foot {
        padding: .8rem 1.2rem .95rem;
        border-top: 1px solid color-mix(in oklab, var(--color-navy-900) 8%, transparent);
    }
    .site-nav-mega__cta {
        display: inline-flex; align-items: center; gap: .35rem;
        font-size: .875rem; font-weight: 700; color: var(--color-link); text-decoration: none;
    }
    .site-nav-mega__cta:hover { color: var(--color-link-hover); }

    .whatsapp-fab {
        bottom: calc(5.25rem + env(safe-area-inset-bottom));
    }

    @media (width >= 64rem) {
        .whatsapp-fab {
            bottom: calc(1.5rem + env(safe-area-inset-bottom));
        }
    }
}

/* Gallery lightbox (resources/js/lightbox.js). */
@layer components {
    .lightbox {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgb(4 10 22 / 0.94);
        color: #fff;
    }

    .lightbox[open] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightbox::backdrop {
        background: transparent;
    }

    .lightbox__figure {
        display: flex;
        max-width: calc(100% - 2rem);
        max-height: calc(100dvh - 7rem);
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
    }

    .lightbox__image {
        max-width: 100%;
        max-height: calc(100dvh - 10rem);
        object-fit: contain;
        border-radius: var(--radius-md);
        box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.5);
    }

    .lightbox__caption {
        max-width: 48rem;
        text-align: center;
        font-size: var(--text-small);
        color: rgb(255 255 255 / 0.85);
    }

    .lightbox__counter {
        position: absolute;
        top: 1.25rem;
        inset-inline-start: 1.25rem;
        font-size: var(--text-small);
        font-variant-numeric: tabular-nums;
        color: rgb(255 255 255 / 0.75);
    }

    .lightbox__button {
        position: absolute;
        display: inline-flex;
        width: 3rem;
        height: 3rem;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: rgb(255 255 255 / 0.12);
        font-size: 1.75rem;
        line-height: 1;
        color: #fff;
        transition: background-color var(--duration-micro) ease;
    }

    .lightbox__button:hover {
        background: rgb(255 255 255 / 0.24);
    }

    .lightbox__button:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    .lightbox__button[hidden] {
        display: none;
    }

    .lightbox__close {
        top: 0.75rem;
        inset-inline-end: 0.75rem;
    }

    .lightbox__previous,
    .lightbox__next {
        top: 50%;
        translate: 0 -50%;
    }

    .lightbox__previous {
        inset-inline-start: 0.75rem;
    }

    .lightbox__next {
        inset-inline-end: 0.75rem;
    }

    @media (width < 40rem) {
        .lightbox__previous,
        .lightbox__next {
            top: auto;
            bottom: 1rem;
            translate: none;
        }
    }
}