/**
 * Nex Directory shared frontend experience layer.
 *
 * This file intentionally sits after the legacy frontend bundle. It provides a
 * compact, consistent finish while older templates are progressively retired.
 */

body.nexdirectory-plugin-page {
    /* Legacy names, now aliases of the one token source (nexdirectory-design-system.css). */
    --nexdirectory-canvas: var(--nd-canvas);
    --nexdirectory-ink: var(--nd-ink);
    --nexdirectory-muted: var(--nd-muted);
    --nexdirectory-line: var(--nd-line);
    /* --nexdirectory-shadow-sm intentionally not redefined here: Settings › Design controls it. */
    --nexdirectory-shadow-md: 0 18px 50px -24px rgba(15, 23, 42, 0.28);
    background: var(--nexdirectory-canvas);
    color: var(--nexdirectory-ink);
}

body.nexdirectory-filter-dialog-open {
    overflow: hidden;
}

.nxd-ui :where(
    a,
    button,
    summary,
    [role="button"],
    [role="tab"]
):focus-visible {
    --tw-ring-offset-shadow: 0 0 transparent !important;
    --tw-ring-shadow: 0 0 transparent !important;
    outline: 2px solid var(--nd-accent) !important;
    outline-offset: 2px !important;
}

/*
 * Edge-to-edge controls sit inside intentional overflow containers. Keep their
 * keyboard focus treatment visible by drawing it inward rather than clipping
 * the outer edge.
 */
.nxd-ui :where(
    .nexdirectory-platform-nav-mobile-trigger,
    .nexdirectory-account-subtabs button,
    .nexdirectory-account-mobile-nav button
):focus-visible {
    outline-offset: -3px !important;
}

.nxd-ui .nexdirectory-account-mobile-add:focus-visible {
    outline-color: var(--nd-on-accent) !important;
    outline-offset: -7px !important;
}

@media (forced-colors: active) {
    .nxd-ui :where(
        a,
        button,
        input,
        select,
        textarea,
        summary,
        [role="button"],
        [role="tab"]
    ):focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }

    .nxd-ui :where(
        .nexdirectory-platform-nav-mobile-trigger,
        .nexdirectory-account-subtabs button,
        .nexdirectory-account-mobile-nav button
    ):focus-visible {
        outline-offset: -3px !important;
    }
}

body.nexdirectory-plugin-page :where(button, [role="button"], input[type="button"], input[type="submit"]) {
    touch-action: manipulation;
}

/* Platform navigation + footer styles live in assets/css/nexdirectory-nav.css. */

.nexdirectory-breadcrumb-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 2.4vw, 2rem) 0;
}

.nexdirectory-breadcrumb-shell .nexdirectory-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    max-width: none;
    margin: 0 0 1.5rem;
    padding: 0;
    color: var(--nd-muted);
    font-size: var(--nd-fs-14);
    line-height: 1.45;
}

.nexdirectory-breadcrumb-shell .nexdirectory-breadcrumbs a {
    color: var(--nd-ink-2);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--nd-dur-2) var(--nd-ease);
}

.nexdirectory-breadcrumb-shell .nexdirectory-breadcrumbs a:is(:hover, :focus) {
    color: var(--nd-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nexdirectory-breadcrumb-shell .nexdirectory-breadcrumbs .is-current {
    color: var(--nd-ink);
    font-weight: 600;
}

.nexdirectory-breadcrumb-shell .nexdirectory-breadcrumbs .nexdirectory-breadcrumb-sep {
    margin-inline: 0.2rem;
    color: var(--nd-subtle);
}

@media (min-width: 640px) {
    .nexdirectory-breadcrumb-shell {
        padding-top: 2rem;
    }
}

body.nexdirectory-plugin-page :where(
    .nexdirectory-card,
    .nexdirectory-archive-event-card,
    .nexdirectory-map-item-card,
    .map-card,
    .nexdirectory-account-card,
    .nexdirectory-account-panel,
    .nexdirectory-form-section
) {
    border-color: var(--nexdirectory-line);
    border-radius: var(--nexdirectory-radius-lg, 16px);
    box-shadow: var(--nexdirectory-shadow-sm);
}

body.nexdirectory-plugin-page :where(
    .nexdirectory-archive-event-card,
    .nexdirectory-map-item-card,
    .map-card
) {
    transform: translateZ(0);
    transition:
        transform var(--nd-dur-3) var(--nd-ease),
        box-shadow var(--nd-dur-3) var(--nd-ease),
        border-color var(--nd-dur-2) var(--nd-ease);
}

/* Hover lift only where hover exists; the accent is not used for decoration. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.nexdirectory-plugin-page :where(
        .nexdirectory-archive-event-card,
        .nexdirectory-map-item-card,
        .map-card
    ):hover {
        border-color: var(--nd-line-strong);
        box-shadow: var(--nexdirectory-shadow-md);
        transform: translateY(-2px);
    }
}

body.nexdirectory-plugin-page :where(
    .nexdirectory-archive-event-card,
    .nexdirectory-map-item-card,
    .map-card
):focus-within {
    border-color: var(--nd-accent-line);
    box-shadow: var(--nexdirectory-shadow-md);
}

body.nexdirectory-plugin-page img[data-nexdirectory-hero-parallax="1"] {
    will-change: transform;
    transition: transform var(--nd-dur-3) var(--nd-ease), filter var(--nd-dur-3) var(--nd-ease);
}

body.nexdirectory-plugin-page :where(
    .nexdirectory-form,
    .nexdirectory-auth-shell,
    .nexdirectory-account-dashboard,
    .nexdirectory-global-auth-form
) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 44px;
    border-color: var(--nd-line-strong);
    background-color: var(--nd-surface);
    transition: border-color var(--nd-dur-2) var(--nd-ease), background-color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-2) var(--nd-ease);
}

body.nexdirectory-plugin-page :where(
    .nexdirectory-form,
    .nexdirectory-auth-shell,
    .nexdirectory-account-dashboard,
    .nexdirectory-global-auth-form
) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--nd-accent);
    background-color: var(--nd-surface);
    box-shadow: var(--nd-ring);
}

/* Kickers are sentence-case eyebrows (13/600 muted), never tracked capitals. */
body.nexdirectory-plugin-page .nexdirectory-page-kicker {
    color: var(--nd-muted);
    font-size: var(--nd-fs-13);
    font-weight: var(--nd-fw-semibold);
    letter-spacing: 0;
    text-transform: none;
}

body.nexdirectory-plugin-page .nexdirectory-pagination {
    gap: 0.5rem;
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

body.nexdirectory-plugin-page .nexdirectory-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--nexdirectory-line);
    border-radius: 12px;
    background: var(--nexdirectory-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.nexdirectory-plugin-page .nexdirectory-pagination .page-numbers.current {
    /* Accent discipline: the current page is an ink fill, not a brand-coloured button. */
    border-color: var(--nd-ink);
    background: var(--nd-ink);
    color: var(--nd-surface);
    box-shadow: none;
}

body.nexdirectory-plugin-page .nexdirectory-archive-page aside,
body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper .nexdirectory-map-sidebar {
    border-color: var(--nexdirectory-line);
    box-shadow: var(--nexdirectory-shadow-sm);
}

body.nexdirectory-plugin-page #nexdirectory-events-map {
    background: var(--nd-surface-2);
}

body.nexdirectory-plugin-page .nexdirectory-calendar-page .nexdirectory-calendar-cell {
    border-color: var(--nexdirectory-line);
    transition: background-color var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-2) var(--nd-ease);
}

body.nexdirectory-plugin-page .nexdirectory-calendar-page .nexdirectory-calendar-cell:hover {
    border-color: var(--nd-line-strong);
    background: var(--nd-surface-2);
}

body.nexdirectory-plugin-page [role="dialog"] > .nexdirectory-calendar-day-modal,
body.nexdirectory-plugin-page .nexdirectory-global-auth-modal__dialog {
    border: 1px solid var(--nd-line);
    box-shadow: 0 32px 80px -20px rgba(15, 23, 42, 0.42);
}

@media (min-width: 1024px) {
    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-layout="three-column"] .nexdirectory-map-results-shell {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
        align-items: start;
    }

    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-layout="three-column"] .nexdirectory-map-results-section #nexdirectory-map-list {
        grid-template-columns: minmax(0, 1fr);
    }

    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-layout="below-list"] .nexdirectory-map-results-section #nexdirectory-map-list {
        grid-template-columns: minmax(0, 1fr);
    }

    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-layout="below-grid-large"] .nexdirectory-map-results-section #nexdirectory-map-list,
    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-layout="grid-no-map-large"] .nexdirectory-map-results-section #nexdirectory-map-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-density="compact"] .nexdirectory-map-results-section .nexdirectory-card-img-wrap {
    height: 9rem;
}

body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-map-density="compact"] .nexdirectory-map-results-section :is(.nexdirectory-card-body, .nexdirectory-event-content) {
    padding: 1rem;
}

@media (max-width: 1023px) {
    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-mobile-filter-mode="inline"] .nexdirectory-map-sticky-shell {
        position: relative;
        inset: auto;
        z-index: 30;
    }

    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-mobile-filter-mode="inline"] .nexdirectory-map-sidebar {
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    body.nexdirectory-plugin-page #nexdirectory-map-default-wrapper[data-nexdirectory-mobile-filter-mode="inline"] .nexdirectory-map-sidebar-scroll {
        padding-bottom: 1.5rem;
    }
}

body.nexdirectory-plugin-page .nexdirectory-account-dashboard > aside {
    border-color: var(--nexdirectory-line);
    box-shadow: 8px 0 30px -28px rgba(15, 23, 42, 0.45);
}

body.nexdirectory-plugin-page .nexdirectory-account-mobile-nav {
    inset-inline: 0;
    width: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

body.nexdirectory-plugin-page .nexdirectory-account-mobile-nav button {
    min-height: 50px;
}

body.nexdirectory-plugin-page .nexdirectory-account-mobile-nav .nexdirectory-account-mobile-add {
    border-radius: 999px !important;
}

@media (max-width: 639px) {
    body.nexdirectory-plugin-page .nexdirectory-listings-subtabs {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
    }

    body.nexdirectory-plugin-page .nexdirectory-listings-subtabs > button {
        flex: 1 0 8rem;
        width: auto;
        min-width: 8rem;
        scroll-snap-align: start;
    }
}

body.nexdirectory-plugin-page form[aria-busy="true"] :where(button[type="submit"], input[type="submit"]) {
    cursor: progress;
    opacity: 0.72;
    pointer-events: none;
}

body.nexdirectory-plugin-page [x-cloak] {
    display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
    body.nexdirectory-plugin-page .nexdirectory-reveal {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        transition:
            opacity var(--nd-dur-3) var(--nd-ease) var(--nexdirectory-reveal-delay, 0ms),
            transform var(--nd-dur-3) var(--nd-ease) var(--nexdirectory-reveal-delay, 0ms);
    }

    body.nexdirectory-plugin-page .nexdirectory-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    body.nexdirectory-plugin-page .nexdirectory-platform-nav {
        transition: background-color var(--nd-dur-2) var(--nd-ease), box-shadow var(--nd-dur-2) var(--nd-ease), border-color var(--nd-dur-2) var(--nd-ease);
    }
}

@media (max-width: 782px) {
    body.nexdirectory-plugin-page :where(
        .nexdirectory-archive-page,
        .nexdirectory-calendar-page,
        #nexdirectory-map-default-wrapper,
        .nexdirectory-account-dashboard
    ) {
        --nexdirectory-mobile-gutter: clamp(1rem, 4vw, 1.25rem);
    }

    body.nexdirectory-plugin-page :where(
        .nexdirectory-form,
        .nexdirectory-auth-shell,
        .nexdirectory-account-dashboard,
        .nexdirectory-global-auth-form
    ) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        font-size: 16px;
    }

    body.nexdirectory-plugin-page :where(
        .nexdirectory-archive-event-card,
        .nexdirectory-map-item-card,
        .map-card
    ):hover {
        transform: none;
    }

    body.nexdirectory-plugin-page .nexdirectory-pagination {
        flex-wrap: wrap;
        padding-inline: var(--nexdirectory-mobile-gutter);
    }
}

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

    body.nexdirectory-plugin-page .nexdirectory-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}