/**
 * Old St. John Lutheran Church - Additional Custom Styles
 *
 * These styles supplement the main style.css
 * Primarily for Elementor customizations and additional components
 */

/*--------------------------------------------------------------
# Cemetery search — filter chips, loading, DataTables integration
--------------------------------------------------------------*/
.osjl-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--osjl-spacing-xs);
    padding: 4px 10px;
    background: var(--osjl-cream, #f4ede0);
    border: 1px solid var(--osjl-border, #d5cfbe);
    border-radius: 999px;
    font-size: var(--osjl-text-sm);
    color: var(--osjl-text);
}

.osjl-chip-remove {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    /* WCAG 2.2 2.5.8 Target Size (Minimum) — min 24×24 for interactive
     * elements. The × glyph is ~10×14 on its own; padding supplies the rest. */
    min-width: 24px;
    min-height: 24px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: 0.25rem;
    border-radius: 2px;
}

.osjl-chip-remove:hover,
.osjl-chip-remove:focus-visible {
    color: var(--osjl-error, #a00);
}

.osjl-chip-remove:focus-visible {
    outline: 2px solid var(--osjl-primary);
    outline-offset: 2px;
}

.osjl-loading {
    text-align: center;
    padding: var(--osjl-spacing-2xl);
    color: var(--osjl-text-muted);
    font-style: italic;
}

.osjl-loading-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: var(--osjl-spacing-md);
    border: 3px solid var(--osjl-border);
    border-top-color: var(--osjl-primary);
    border-radius: 50%;
    animation: osjl-spin 0.8s linear infinite;
}

@keyframes osjl-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .osjl-loading-spinner { animation: none; }
}

/* Horizontal-scroll container — keeps the cemetery table's 10 columns
   readable without forcing the whole page to scroll on narrow screens.
   WCAG 1.4.10 exempts data tables from no-2D-scroll, but containing the
   scroll inside the table region is the nicer mobile UX. */
.osjl-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle shadow cue that content extends right when clipped. */
    background:
        linear-gradient(to right, var(--osjl-cream) 0, var(--osjl-cream) 10%, rgba(245, 244, 240, 0) 40%) 0 0 / 100% 100% no-repeat,
        linear-gradient(to left,  var(--osjl-cream) 0, var(--osjl-cream) 10%, rgba(245, 244, 240, 0) 40%) 100% 0 / 100% 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, var(--osjl-black-a15), transparent) 0 0 / 10px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, var(--osjl-black-a15), transparent) 100% 0 / 10px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

#osjl-cemetery-table {
    width: 100%;
    border-collapse: collapse;
}

#osjl-cemetery-table thead th {
    text-align: left;
    padding: var(--osjl-spacing-sm);
    border-bottom: 2px solid var(--osjl-border, #d5cfbe);
    font-weight: 600;
}

#osjl-cemetery-table tbody td {
    padding: var(--osjl-spacing-xs) var(--osjl-spacing-sm);
    border-bottom: 1px solid var(--osjl-border, #d5cfbe);
}

#osjl-cemetery-table tbody tr:hover {
    background: var(--osjl-cream, #f4ede0);
}

.osjl-results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--osjl-spacing-md) 0;
    gap: var(--osjl-spacing-sm);
    flex-wrap: wrap;
}

.osjl-copy-link {
    appearance: none;
    background: none;
    border: 1px solid var(--osjl-border, #d5cfbe);
    border-radius: var(--osjl-radius-sm);
    padding: 6px 12px;
    font-size: var(--osjl-text-sm);
    cursor: pointer;
    color: var(--osjl-text);
}

.osjl-copy-link:hover,
.osjl-copy-link:focus-visible {
    border-color: var(--osjl-primary);
    color: var(--osjl-primary);
}

/*--------------------------------------------------------------
# Cemetery toolbar — Advanced Search / About row + active-filters row
# (bead uf1) Two horizontal rows that sit between the heading and the
# results table. Without these the wrappers default to block layout and
# the four controls stack vertically with inconsistent spacing.
--------------------------------------------------------------*/
.osjl-search-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--osjl-spacing-md);
    row-gap: var(--osjl-spacing-xs);
    margin: var(--osjl-spacing-xs) 0 var(--osjl-spacing-md);
    font-size: var(--osjl-text-sm);
}

/* Force the About details element onto its own row when expanded so the
   body content gets full width instead of squeezing the row's other items. */
.osjl-about-inline[open] {
    flex-basis: 100%;
}

.osjl-about-inline > summary {
    list-style: none;
    cursor: pointer;
    color: var(--osjl-primary);
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.osjl-about-inline > summary::-webkit-details-marker { display: none; }

.osjl-about-inline > summary::before {
    content: '\25B8'; /* right-pointing triangle */
    font-size: 0.8em;
    transition: transform 0.15s ease;
    color: var(--osjl-text-muted);
}

.osjl-about-inline[open] > summary::before {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .osjl-about-inline > summary::before { transition: none; }
}

.osjl-about-inline > summary:hover,
.osjl-about-inline > summary:focus-visible {
    color: var(--osjl-secondary);
}

.osjl-about-inline > summary:focus-visible {
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

.osjl-about-content {
    margin-top: var(--osjl-spacing-sm);
    padding: var(--osjl-spacing-md) var(--osjl-spacing-lg);
    background: var(--osjl-parchment);
    border-left: 3px solid var(--osjl-secondary);
    font-size: var(--osjl-text-base);
    line-height: 1.6;
    color: var(--osjl-gray-800);
}

.osjl-about-content > p:first-child { margin-top: 0; }
.osjl-about-content > p:last-child { margin-bottom: 0; }

/* Active-filter row: chips first, Clear-all trails. Tight horizontal row
   that wraps gracefully when many chips are active. */
.osjl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--osjl-spacing-xs) var(--osjl-spacing-sm);
    margin: 0 0 var(--osjl-spacing-md);
}

.osjl-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--osjl-spacing-xs);
    flex: 1 1 auto;
    min-width: 0;
}

.osjl-filter-bar > .osjl-clear-link {
    flex: 0 0 auto;
}

/*--------------------------------------------------------------
# Link-styled buttons (a11y: real <button> elements that look like links)
--------------------------------------------------------------*/
.osjl-advanced-link,
.osjl-clear-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--osjl-primary);
    text-decoration: underline;
    cursor: pointer;
}

.osjl-advanced-link:hover,
.osjl-clear-link:hover,
.osjl-advanced-link:focus-visible,
.osjl-clear-link:focus-visible {
    color: var(--osjl-secondary);
}

.osjl-advanced-link:focus-visible,
.osjl-clear-link:focus-visible {
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

/*--------------------------------------------------------------
# Cemetery Cards Grid
--------------------------------------------------------------*/
.osjl-burial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--osjl-spacing-lg);
    margin-top: var(--osjl-spacing-lg);
}

@media (max-width: 640px) {
    .osjl-burial-cards {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
# Pagination Styles
--------------------------------------------------------------*/
.osjl-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--osjl-spacing-sm);
    margin-top: var(--osjl-spacing-xl);
    padding: var(--osjl-spacing-lg) 0;
}

.osjl-pagination-btn {
    padding: var(--osjl-spacing-sm) var(--osjl-spacing-md);
    background-color: var(--osjl-white);
    border: 1px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    min-height: 44px;
    min-width: 44px;
    color: var(--osjl-gray-700);
    cursor: pointer;
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    transition: all var(--osjl-transition-fast);
}

.osjl-pagination-btn:hover {
    background-color: var(--osjl-cream);
    border-color: var(--osjl-primary);
    color: var(--osjl-primary);
}

.osjl-pagination-btn:focus-visible {
    outline: 2px solid var(--osjl-primary);
    outline-offset: 2px;
}

.osjl-pagination-btn.active {
    background-color: var(--osjl-primary);
    border-color: var(--osjl-primary);
    color: var(--osjl-white);
}

.osjl-pagination-ellipsis {
    padding: 0 var(--osjl-spacing-sm);
    color: var(--osjl-gray-500);
}

.osjl-results-count {
    width: 100%;
    text-align: center;
    margin-top: var(--osjl-spacing-sm);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
}

/*--------------------------------------------------------------
# Heritage mark — [osjl_heritage_mark] section break
# Centered, wordless glyph that reads as an illuminated-manuscript
# chapter break. Tints via currentColor (set inline on wrapper).
--------------------------------------------------------------*/
.osjl-heritage-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--osjl-spacing-lg);
    margin: var(--osjl-spacing-3xl) auto;
    max-width: 600px;
    color: var(--osjl-primary);
}

.osjl-heritage-mark--primary   { color: var(--osjl-primary); }
.osjl-heritage-mark--secondary { color: var(--osjl-secondary); }
.osjl-heritage-mark--muted     { color: var(--osjl-muted); }

.osjl-heritage-mark svg {
    flex: 0 0 auto;
    display: block;
}

.osjl-heritage-mark--rule::before,
.osjl-heritage-mark--rule::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--osjl-stone-border);
    opacity: 0.5;
    max-width: 140px;
}

@media (max-width: 768px) {
    .osjl-heritage-mark {
        margin: var(--osjl-spacing-2xl) auto;
    }
    .osjl-heritage-mark svg {
        width: 36px;
        height: 36px;
    }
}

/*--------------------------------------------------------------
# Loading & Error States
--------------------------------------------------------------*/
.osjl-error {
    text-align: center;
    padding: var(--osjl-spacing-xl);
    background-color: var(--osjl-error-bg);
    border: 1px solid var(--osjl-error-border);
    border-radius: var(--osjl-radius-md);
    color: var(--osjl-error);
}

.osjl-no-results {
    text-align: center;
    padding: var(--osjl-spacing-2xl);
    color: var(--osjl-gray-600);
    font-style: italic;
}

/*--------------------------------------------------------------
# View Toggle (enhanced)
--------------------------------------------------------------*/
.osjl-view {
    display: none;
}

.osjl-view.active {
    display: block;
}

/*--------------------------------------------------------------
# Map View Placeholder
--------------------------------------------------------------*/
.osjl-map-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--osjl-spacing-lg);
    min-height: 400px;
}

@media (max-width: 768px) {
    .osjl-map-container {
        grid-template-columns: 1fr;
    }
}

.osjl-map-placeholder {
    background-color: var(--osjl-gray-100);
    border: 2px dashed var(--osjl-gray-300);
    border-radius: var(--osjl-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--osjl-spacing-2xl);
    text-align: center;
    color: var(--osjl-gray-600);
}

.osjl-map-legend {
    background-color: var(--osjl-white);
    border: 1px solid var(--osjl-gray-200);
    border-radius: var(--osjl-radius-md);
    padding: var(--osjl-spacing-lg);
}

.osjl-map-legend h4 {
    font-size: var(--osjl-text-base);
    margin-bottom: var(--osjl-spacing-md);
    color: var(--osjl-primary);
}

.osjl-map-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.osjl-map-legend li {
    padding: var(--osjl-spacing-xs) 0;
    font-size: var(--osjl-text-sm);
    border-bottom: 1px solid var(--osjl-gray-100);
}

.osjl-map-legend li:last-child {
    border-bottom: none;
}

/*--------------------------------------------------------------
# Hero Section (for Elementor)
--------------------------------------------------------------*/
.osjl-hero {
    position: relative;
    min-height: calc(100vh - var(--osjl-header-h, 92px));
    min-height: calc(100dvh - var(--osjl-header-h, 92px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--osjl-primary);
    color: var(--osjl-white);
    text-align: center;
    padding: var(--osjl-spacing-3xl) 0;
}

.osjl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--osjl-hero-overlay-start),
        var(--osjl-hero-overlay-end)
    );
    z-index: 1;
}

.osjl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--osjl-spacing-2xl);
}

/* Elementor content inside hero must sit above the ::before overlay */
.osjl-hero .elementor-container,
.osjl-hero .elementor-widget-wrap,
.osjl-hero .elementor-widget-container,
.osjl-hero .elementor-shortcode {
    position: relative;
    z-index: 2;
}

.osjl-hero h1,
.osjl-hero .elementor-heading-title {
    color: var(--osjl-white);
    font-size: var(--osjl-text-6xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--osjl-spacing-sm);
    text-shadow: 0 2px 8px var(--osjl-black-a15);
}

/* Hero subtitle — formal institution mark */
.osjl-hero p,
.osjl-hero .elementor-heading-title + .elementor-widget .elementor-heading-title {
    color: var(--osjl-white-a90);
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--osjl-spacing-xl);
}

.osjl-hero .osjl-btn {
    margin-top: var(--osjl-spacing-lg);
}

/* Hero search form */
.osjl-hero-search {
    max-width: 600px;
    margin: var(--osjl-spacing-xl) auto 0;
}

.osjl-hero-search label {
    display: block;
    font-size: var(--osjl-text-sm);
    font-weight: 500;
    color: var(--osjl-white-a85);
    margin-bottom: var(--osjl-spacing-xs);
    text-align: left;
}

.osjl-hero-search-row {
    display: flex;
    align-items: stretch;
    gap: var(--osjl-spacing-sm);
}

/* Match the button to the input: explicit 60px height on both, text-lg
 * font. margin-top:0 overrides the `.osjl-hero .osjl-btn { margin-top:24px }`
 * rule (intended for hero CTA buttons below copy), which otherwise pushes
 * the search button down 24px out of alignment with the input. */
.osjl-hero-search-row .osjl-btn.osjl-btn-amber {
    font-size: var(--osjl-text-lg);
    height: 60px;
    min-height: 60px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.osjl-hero-search-row input {
    flex: 1;
    padding: var(--osjl-spacing-md) var(--osjl-spacing-lg);
    font-size: var(--osjl-text-lg);
    font-family: var(--osjl-font-sans);
    height: 60px;
    border: 2px solid var(--osjl-white-a30);
    border-radius: var(--osjl-radius-sm);
    background: var(--osjl-white-a10);
    color: var(--osjl-white);
    min-height: 44px;
}

.osjl-hero-search-row input::placeholder {
    color: var(--osjl-white-a85);
    opacity: 1;
}

.osjl-hero-search-row input:focus-visible {
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
    border-color: var(--osjl-secondary);
}

/* Doubled specificity (.osjl-hero p would otherwise apply uppercase +
   letter-spacing from the hero-subtitle rule above). */
.osjl-hero p.osjl-hero-search-meta,
.osjl-hero-search-meta {
    font-size: var(--osjl-text-base);
    color: var(--osjl-white);
    margin-top: var(--osjl-spacing-sm);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Amber button — primary CTA.
   Selector is doubled (.osjl-btn.osjl-btn-amber) to beat Elementor's
   kit rule `.elementor-kit-XXXX button { background: var(--e-global-color-primary) }`
   which otherwise paints the background navy while leaving our amber border. */
.osjl-btn.osjl-btn-amber,
.osjl-btn-amber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--osjl-spacing-md) var(--osjl-spacing-xl);
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    font-weight: 600;
    background-color: var(--osjl-secondary);
    /* Dark text preserves the bright amber bg while clearing WCAG 1.4.3.
     * White-on-amber was 2.85:1; dark-on-amber is 6.31:1. See bead 2a3. */
    color: var(--osjl-fg-on-amber);
    border: 2px solid var(--osjl-secondary);
    border-radius: var(--osjl-radius-sm);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    transition: all var(--osjl-transition-fast);
}

.osjl-btn.osjl-btn-amber:hover,
.osjl-btn-amber:hover {
    background-color: var(--osjl-secondary-dark);
    border-color: var(--osjl-secondary-dark);
    color: var(--osjl-fg-on-amber);
}

@media (max-width: 480px) {
    .osjl-hero-search-row {
        flex-direction: column;
    }

    .osjl-btn-amber {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Homepage Content Cards — Material-specific accents
--------------------------------------------------------------*/

/* Base homepage card */
.osjl-card {
    border-top: 4px solid transparent;
    transition: box-shadow var(--osjl-transition-base),
                border-color var(--osjl-transition-base),
                transform var(--osjl-transition-base);
}

.osjl-card:hover {
    transform: translateY(-2px);
}

/* Cemetery card — amber accent (the primary action). Keeps its top-left
 * visual priority but is now a peer-sized card in the 2×2 grid, not a
 * full-column span. The old .osjl-card-full rule is retained as an alias
 * (unused) for backwards compatibility with any Elementor template exports. */
.osjl-card-cemetery,
.osjl-card-full {
    border-top-color: var(--osjl-secondary);
}

/* Patriots card — primary-green accent (civic tone). */
.osjl-card-patriots {
    border-top-color: var(--osjl-primary);
}

/* Flohr House card — cabin warm accent */
.osjl-card-flohr {
    border-top-color: var(--osjl-cabin-warm);
}

/* History card — stone border accent */
.osjl-card-history {
    border-top-color: var(--osjl-stone-border);
}


/* Card title sizes */
.osjl-card-title-lg {
    font-size: var(--osjl-text-2xl);
    font-weight: 700;
}

.osjl-card-title-md {
    font-size: var(--osjl-text-xl);
    font-weight: 600;
}

/* Card description */
.osjl-card-desc {
    color: var(--osjl-muted);
    font-size: var(--osjl-text-base);
    line-height: 1.7;
    margin-bottom: var(--osjl-spacing-md);
}

/* Card link — green with underline on hover */
.osjl-card-link {
    display: inline-block;
    font-family: var(--osjl-font-sans);
    font-weight: 600;
    font-size: var(--osjl-text-sm);
    color: var(--osjl-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--osjl-transition-fast),
                color var(--osjl-transition-fast);
}

.osjl-card-link:hover {
    color: var(--osjl-accent-green);
    border-bottom-color: var(--osjl-secondary);
}

/* Stacked cards (right column) */
.osjl-card-stacked {
    margin-bottom: var(--osjl-spacing-lg);
}

/* News section */
.osjl-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--osjl-spacing-lg);
}

.osjl-news-card {
    background: var(--osjl-white);
    border-radius: var(--osjl-radius-md);
    padding: var(--osjl-spacing-lg);
    box-shadow: var(--osjl-shadow-sm);
    border-left: 4px solid var(--osjl-stone-border);
    transition: box-shadow var(--osjl-transition-base),
                border-color var(--osjl-transition-base);
}

.osjl-news-card:hover {
    box-shadow: var(--osjl-shadow-md);
    border-left-color: var(--osjl-secondary);
}

.osjl-news-card h3 {
    font-size: var(--osjl-text-lg);
    font-weight: 600;
    margin-bottom: var(--osjl-spacing-xs);
}

.osjl-news-card .osjl-date {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-news-card .osjl-excerpt {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
    line-height: 1.6;
}

/* Event callout — amber prominence */
.osjl-callout {
    background: var(--osjl-parchment);
    border-left: 4px solid var(--osjl-secondary);
    border-radius: var(--osjl-radius-sm);
    padding: var(--osjl-spacing-lg);
    margin-bottom: var(--osjl-spacing-lg);
}

.osjl-callout-label {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--osjl-amber-deep); /* was --osjl-secondary-dark (3.23:1) — bead 2a3 */
    margin-bottom: var(--osjl-spacing-xs);
}

/*--------------------------------------------------------------
# Inline content link affordance (bead i4c — WCAG 1.4.1 / 1.4.11)
# When color is the only differentiator for inline links, surround contrast
# must reach 3:1. Brand green #2d4335 on body text #1a1a1a only hits 1.62:1,
# which fails for users with color-vision differences. Add an explicit
# underline to inline links inside body-copy containers — but exclude
# card-style links (.osjl-card-link), buttons, nav, and gallery widgets,
# all of which carry their own affordance (whole card hit-target, button
# chrome, nav structure).
--------------------------------------------------------------*/
.osjl-page-content a:not(.osjl-btn):not(.osjl-card-link):not([class*="elementor-button"]),
.osjl-news-card .osjl-excerpt a,
.osjl-callout a:not(.osjl-btn),
.osjl-card-desc a:not(.osjl-card-link):not(.osjl-btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.osjl-page-content a:hover,
.osjl-news-card .osjl-excerpt a:hover,
.osjl-callout a:hover,
.osjl-card-desc a:hover {
    text-decoration-thickness: 2px;
}

/* Visit section — dark treatment */
.osjl-section-dark {
    background-color: var(--osjl-primary);
    color: var(--osjl-cream);
}

.osjl-section-dark h2,
.osjl-section-dark .elementor-heading-title {
    color: var(--osjl-white);
}

.osjl-section-dark p,
.osjl-section-dark .elementor-widget-container {
    color: var(--osjl-white-a90);
}

.osjl-visit-info {
    color: var(--osjl-white-a85);
    line-height: 1.7;
}

/* Outline button on dark hero/sections: inherit layout from the .osjl-btn
 * base (style.css), only override the colors for contrast on dark bg.
 * Doubled .osjl-btn.osjl-btn-outline (0,2,0) beats the base's primary-color
 * outline rule (0,2,0) via extra descendant selector (0,3,0). */
.osjl-hero .osjl-btn.osjl-btn-outline,
.osjl-section-dark .osjl-btn.osjl-btn-outline {
    color: var(--osjl-white);
    border-color: var(--osjl-secondary);
}

.osjl-hero .osjl-btn.osjl-btn-outline:hover,
.osjl-hero .osjl-btn.osjl-btn-outline:focus-visible,
.osjl-section-dark .osjl-btn.osjl-btn-outline:hover,
.osjl-section-dark .osjl-btn.osjl-btn-outline:focus-visible {
    background-color: var(--osjl-secondary);
    border-color: var(--osjl-secondary);
    color: var(--osjl-white);
}

/* Stone-colored dividers */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        var(--osjl-stone-border) 20%,
        var(--osjl-stone-border) 80%,
        transparent
    );
    margin: var(--osjl-spacing-2xl) 0;
}

/*--------------------------------------------------------------
# Feature Cards (for homepage)
--------------------------------------------------------------*/
.osjl-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--osjl-spacing-xl);
    margin: var(--osjl-spacing-2xl) 0;
}

.osjl-feature-card {
    background: var(--osjl-white);
    border-radius: var(--osjl-radius-md);
    padding: var(--osjl-spacing-2xl) var(--osjl-spacing-xl);
    text-align: center;
    box-shadow: var(--osjl-shadow-sm), inset 0 1px 0 var(--osjl-white-a80);
    border-top: 3px solid transparent;
    transition: transform var(--osjl-transition-base),
                box-shadow var(--osjl-transition-base),
                border-color var(--osjl-transition-base);
}

.osjl-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--osjl-shadow-lg);
    border-top-color: var(--osjl-secondary);
}

.osjl-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--osjl-spacing-lg);
    background: var(--osjl-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--osjl-secondary-light);
    font-size: var(--osjl-text-3xl);
    transition: background-color var(--osjl-transition-base);
}

.osjl-feature-card:hover .osjl-feature-icon {
    background: var(--osjl-primary-dark);
}

.osjl-feature-card h3 {
    font-size: var(--osjl-text-xl);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-feature-card p {
    color: var(--osjl-gray-600);
    font-size: var(--osjl-text-sm);
    margin-bottom: var(--osjl-spacing-md);
}

/*--------------------------------------------------------------
# Single Cemetery Record Page
--------------------------------------------------------------*/
.osjl-single-record {
    max-width: 800px;
    margin: 0 auto;
}

/*--------------------------------------------------------------
# Single cemetery record (/plot/<slug>/)
# ------------------------------------------------------------
# Rebuilt 2026-04-19 per beads-09k audit phase 2/7. Treats the record
# as an archival catalog entry rather than a database dump: muted
# small-caps labels, serif values, grouped sections separated by
# hairline rules, parchment inset for notes, provenance footer.
--------------------------------------------------------------*/
.osjl-record-card {
    background: var(--osjl-white, #ffffff);
    border: 1px solid var(--osjl-gray-200);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 800px;
    margin: 0 auto var(--osjl-spacing-2xl);
    padding: var(--osjl-spacing-xl) var(--osjl-spacing-2xl);
}

.osjl-record-nav {
    margin-bottom: var(--osjl-spacing-lg);
    font-size: var(--osjl-text-sm);
}

.osjl-record-back {
    color: var(--osjl-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--osjl-transition-fast), border-color var(--osjl-transition-fast);
}

.osjl-record-back:hover,
.osjl-record-back:focus {
    color: var(--osjl-primary);
    border-bottom-color: var(--osjl-secondary);
}

.osjl-record-header {
    padding-bottom: var(--osjl-spacing-lg);
    border-bottom: 1px solid var(--osjl-gray-200);
    margin-bottom: var(--osjl-spacing-xl);
}

.osjl-record-title {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-4xl);
    font-weight: 700;
    color: var(--osjl-primary);
    line-height: 1.15;
    margin: 0 0 var(--osjl-spacing-xs);
    letter-spacing: -0.01em;
}

.osjl-record-subtitle {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-lg);
    color: var(--osjl-muted);
    margin: 0 0 var(--osjl-spacing-md);
    font-variant-numeric: oldstyle-nums;
}

.osjl-record-group {
    margin-bottom: var(--osjl-spacing-xl);
}

.osjl-record-group:last-of-type {
    margin-bottom: 0;
}

.osjl-record-group-heading {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--osjl-muted);
    margin: 0 0 var(--osjl-spacing-sm);
    padding-bottom: var(--osjl-spacing-xs);
    border-bottom: 1px solid var(--osjl-gray-200);
}

/* Label/value grid — two columns on desktop, stacked on mobile. */
.osjl-record-fields {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--osjl-spacing-xs) var(--osjl-spacing-lg);
    margin: 0;
}

.osjl-record-fields dt {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    font-weight: 500;
    color: var(--osjl-muted);
    line-height: 1.5;
}

.osjl-record-fields dd {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-base);
    color: var(--osjl-gray-800);
    margin: 0;
    line-height: 1.5;
    font-variant-numeric: oldstyle-nums;
}

.osjl-record-notes {
    background: var(--osjl-parchment);
    border-left: 3px solid var(--osjl-secondary);
    padding: var(--osjl-spacing-md) var(--osjl-spacing-lg);
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-base);
    line-height: 1.65;
    color: var(--osjl-gray-800);
}

.osjl-record-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--osjl-spacing-md);
    margin: var(--osjl-spacing-lg) 0;
}

.osjl-record-image {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.osjl-record-image--primary {
    grid-column: 1 / -1;
    max-width: 720px;
}

.osjl-record-image-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    background: var(--osjl-gray-100);
}

.osjl-record-image-caption {
    margin-top: var(--osjl-spacing-xs);
    font-size: var(--osjl-text-sm);
    line-height: 1.5;
    color: var(--osjl-text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.osjl-record-image-caption-text {
    color: var(--osjl-text);
}

.osjl-record-image-credit {
    font-style: italic;
    font-size: var(--osjl-text-xs);
}

.osjl-record-sources {
    margin-top: var(--osjl-spacing-lg);
    padding-top: var(--osjl-spacing-md);
    border-top: 1px solid var(--osjl-gray-200);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-text-muted);
    line-height: 1.6;
}

.osjl-record-sources-title {
    font-size: var(--osjl-text-base);
    font-weight: 600;
    margin: 0 0 var(--osjl-spacing-xs);
    color: var(--osjl-text);
    letter-spacing: 0.02em;
}

.osjl-record-sources-list {
    margin: 0;
    padding-left: var(--osjl-spacing-lg);
    list-style: disc;
}

.osjl-record-sources-list li + li {
    margin-top: var(--osjl-spacing-xs);
}

.osjl-record-sources-list a {
    color: var(--osjl-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--osjl-gray-200);
    text-underline-offset: 2px;
    word-break: break-word;
}

.osjl-record-sources-list a:hover,
.osjl-record-sources-list a:focus {
    color: var(--osjl-primary);
    text-decoration-color: var(--osjl-secondary);
}

/* Sparse-record outro (bead cc2) — illegible-stone editorial note +
   "Other <Last> family records (N more) →" affordance. */
.osjl-record-outro {
    display: block;
    margin-top: var(--osjl-spacing-lg);
    padding-top: var(--osjl-spacing-md);
    border-top: 1px solid var(--osjl-gray-200);
}

.osjl-record-outro p {
    margin: 0 0 var(--osjl-spacing-sm);
}

.osjl-record-outro p:last-child {
    margin-bottom: 0;
}

.osjl-record-illegible-note {
    font-style: italic;
    color: var(--osjl-text-muted);
    line-height: 1.6;
}

.osjl-record-family-link {
    display: inline-block;
    color: var(--osjl-primary);
    text-decoration: underline;
    text-decoration-color: var(--osjl-secondary);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 500;
}

.osjl-record-family-link:hover,
.osjl-record-family-link:focus {
    color: var(--osjl-primary-dark, var(--osjl-primary));
    text-decoration-thickness: 2px;
}

/* Permanent data-quality editorial note (bead 7xk) — renders on every
   /plot/ page, invites correction via /contact/. Smaller + muted so it
   reads as editorial chrome rather than primary content. */
.osjl-record-data-quality-note {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-text-muted);
    line-height: 1.6;
}

.osjl-record-data-quality-note a {
    color: var(--osjl-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.osjl-record-provenance {
    margin-top: var(--osjl-spacing-xl);
    padding-top: var(--osjl-spacing-md);
    border-top: 1px solid var(--osjl-gray-200);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
    line-height: 1.6;
}

.osjl-record-provenance p {
    margin: 0;
}

.osjl-record-provenance a {
    color: var(--osjl-muted);
    text-decoration: underline;
    text-decoration-color: var(--osjl-gray-200);
    text-underline-offset: 2px;
}

.osjl-record-provenance a:hover,
.osjl-record-provenance a:focus {
    color: var(--osjl-primary);
    text-decoration-color: var(--osjl-secondary);
}

@media (max-width: 640px) {
    .osjl-record-card {
        padding: var(--osjl-spacing-lg) var(--osjl-spacing-md);
    }
    .osjl-record-fields {
        grid-template-columns: 1fr;
        gap: var(--osjl-spacing-xs);
    }
    .osjl-record-fields dt {
        margin-top: var(--osjl-spacing-sm);
    }
    .osjl-record-fields dt:first-child {
        margin-top: 0;
    }
}

/*--------------------------------------------------------------
# Forms (general styling)
--------------------------------------------------------------*/
.osjl-form-group {
    margin-bottom: var(--osjl-spacing-lg);
}

.osjl-form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--osjl-spacing-xs);
    color: var(--osjl-gray-700);
}

.osjl-form-input,
.osjl-form-textarea,
.osjl-form-select {
    width: 100%;
    padding: var(--osjl-spacing-sm) var(--osjl-spacing-md);
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    border: 2px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    background-color: var(--osjl-white);
    transition: border-color var(--osjl-transition-fast);
}

.osjl-form-input:focus,
.osjl-form-textarea:focus,
.osjl-form-select:focus {
    border-color: var(--osjl-primary);
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
}

/*--------------------------------------------------------------
# Gallery Styles
--------------------------------------------------------------*/
.osjl-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--osjl-spacing-md);
}

.osjl-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--osjl-radius-md);
    aspect-ratio: 4/3;
}

.osjl-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--osjl-transition-base);
}

.osjl-gallery-item:hover img {
    transform: scale(1.05);
}

.osjl-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--osjl-spacing-md);
    background: linear-gradient(transparent, var(--osjl-black-a70));
    color: var(--osjl-white);
    font-size: var(--osjl-text-sm);
}

/*--------------------------------------------------------------
# Accessibility Enhancements
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--osjl-primary);
    outline-offset: 2px;
}

/* Skip link */
.osjl-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: var(--osjl-spacing-md);
    background: var(--osjl-primary);
    color: var(--osjl-white);
    z-index: 9999;
}

.osjl-skip-link:focus {
    top: 0;
}

/*--------------------------------------------------------------
# Elementor Template Components
--------------------------------------------------------------*/

/* Header site name/tagline styles live with the lockup block further down
 * in this file (see .osjl-site-lockup / .osjl-site-name rules). The earlier
 * standalone definitions were removed — they predated the lockup and were
 * duplicate dead code. Mobile overrides below still target .osjl-site-name
 * and apply to the lockup version. */

/* Logo Styles */
.osjl-site-logo {
    display: flex;
    align-items: center;
    gap: var(--osjl-spacing-md);
    text-decoration: none;
    color: var(--osjl-primary);
}

.osjl-logo-mark {
    width: 50px;
    height: 50px;
    border: 2px solid var(--osjl-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-2xl);
    font-weight: 600;
    color: var(--osjl-secondary);
}

.osjl-logo-text {
    display: flex;
    flex-direction: column;
}

.osjl-logo-name {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-lg);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.osjl-logo-tagline {
    font-size: var(--osjl-text-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--osjl-gray-500);
}

/* Footer Navigation */
.osjl-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.osjl-footer-nav li {
    margin-bottom: 0.75rem;
}

.osjl-footer-nav a {
    font-size: 0.95rem;
    color: var(--osjl-cream-a85);
    text-decoration: none;
    transition: color var(--osjl-transition-fast);
}

.osjl-footer-nav a:hover {
    color: var(--osjl-secondary-light);
}

.osjl-footer-nav-item {
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-footer-link {
    color: var(--osjl-white-a80);
    text-decoration: underline;
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
}

.osjl-footer-link:hover {
    color: var(--osjl-secondary-light);
}

.osjl-footer-text {
    color: var(--osjl-white-a80);
    font-size: var(--osjl-text-sm);
    font-family: var(--osjl-font-sans);
}

.osjl-footer-copyright {
    text-align: center;
    color: var(--osjl-white-a85);
    font-size: var(--osjl-text-xs);
    font-family: var(--osjl-font-sans);
    margin: 0;
}

/* Search Form Styles */
.osjl-search-form {
    width: 100%;
}

.osjl-search-main {
    display: flex;
    gap: var(--osjl-spacing-md);
    margin-bottom: var(--osjl-spacing-lg);
}

/* Cemetery results heading — sits above the advanced-filters/table
   area and acts as the focus target after a hero-search submit. Styled
   like a section title, not a hero H1 — the hero already carries the
   page-level H1. tabindex=-1 makes it programmatically focusable. */
.osjl-results-heading {
    margin: 0 0 var(--osjl-spacing-md);
    font-size: var(--osjl-text-2xl);
    font-weight: 600;
    color: var(--osjl-text);
    line-height: 1.3;
}

.osjl-results-heading:focus {
    outline: none;
}

.osjl-results-heading:focus-visible {
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 4px;
    border-radius: var(--osjl-radius-sm);
}

.osjl-results-heading-sub {
    display: block;
    font-size: var(--osjl-text-sm);
    font-weight: 400;
    color: var(--osjl-text-muted);
    margin-top: var(--osjl-spacing-xs);
}

.osjl-search-input {
    flex: 1;
    padding: var(--osjl-spacing-md) var(--osjl-spacing-lg);
    font-size: var(--osjl-text-lg);
    border: 2px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    transition: border-color var(--osjl-transition-fast);
}

.osjl-search-input:focus {
    border-color: var(--osjl-primary);
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
}

.osjl-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.osjl-filter-group label {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
    font-weight: 500;
}

.osjl-filter-group input,
.osjl-filter-group select {
    padding: var(--osjl-spacing-sm);
    border: 1px solid var(--osjl-gray-300);
    border-radius: var(--osjl-radius-sm);
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
}

/* Results Header */
.osjl-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--osjl-spacing-md);
    margin-bottom: var(--osjl-spacing-lg);
}

.osjl-results-count .count-number {
    font-family: var(--osjl-font-serif);
    font-weight: 600;
    color: var(--osjl-primary);
}

/* Small Button — size modifier. Apply alongside .osjl-btn and a color
 * variant (e.g. class="osjl-btn osjl-btn-primary osjl-btn-small").
 * Doubled selector (0,2,0) beats Elementor kit button rule (0,1,1). */
.osjl-btn.osjl-btn-small {
    padding: var(--osjl-spacing-xs) var(--osjl-spacing-sm);
    font-size: var(--osjl-text-xs);
    min-height: auto;
    min-width: auto;
}

/* Pagination Info */
.osjl-pagination-info {
    width: 100%;
    text-align: center;
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
    margin-bottom: var(--osjl-spacing-md);
}

.osjl-pagination-buttons {
    display: flex;
    gap: var(--osjl-spacing-xs);
    flex-wrap: wrap;
    justify-content: center;
}

.osjl-pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Research Tips */
.osjl-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--osjl-spacing-lg);
}

.osjl-tip-card {
    background: var(--osjl-white);
    padding: var(--osjl-spacing-lg);
    border-radius: var(--osjl-radius-md);
    box-shadow: var(--osjl-shadow-sm);
}

.osjl-tip-icon {
    margin-bottom: var(--osjl-spacing-md);
}

.osjl-tip-card h4 {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-lg);
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-tip-card p {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-600);
    margin: 0;
}

/* Details Grid */
.osjl-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--osjl-spacing-md);
}

.osjl-detail-item {
    display: flex;
    flex-direction: column;
    padding: var(--osjl-spacing-sm) 0;
    border-bottom: 1px solid var(--osjl-gray-200);
}

.osjl-detail-label {
    font-size: var(--osjl-text-xs);
    color: var(--osjl-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.osjl-detail-value {
    font-size: var(--osjl-text-base);
    color: var(--osjl-gray-800);
    font-weight: 500;
}

/* Plot Box */
.osjl-plot-box {
    background: var(--osjl-sage);
    color: var(--osjl-white);
    padding: var(--osjl-spacing-xl);
    border-radius: var(--osjl-radius-md);
}

.osjl-plot-number {
    text-align: center;
    margin-bottom: var(--osjl-spacing-lg);
    padding-bottom: var(--osjl-spacing-lg);
    border-bottom: 1px solid var(--osjl-white-a20);
}

.osjl-plot-number .osjl-plot-label {
    display: block;
    font-size: var(--osjl-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.osjl-plot-number .osjl-plot-value {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-3xl);
    font-weight: 600;
}

.osjl-plot-box .osjl-detail-item {
    border-bottom-color: var(--osjl-white-a20);
}

.osjl-plot-box .osjl-detail-label {
    color: var(--osjl-white-a85);
}

.osjl-plot-box .osjl-detail-value {
    color: var(--osjl-white);
}

/* Notes Box */
.osjl-notes-box {
    background: var(--osjl-parchment);
    padding: var(--osjl-spacing-xl);
    border-radius: var(--osjl-radius-md);
    border-left: 4px solid var(--osjl-secondary);
}

.osjl-notes-title {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-md);
}

.osjl-notes-content {
    font-size: var(--osjl-text-base);
    color: var(--osjl-gray-700);
    line-height: 1.7;
}

/* Record Actions */
.osjl-record-actions {
    display: flex;
    justify-content: center;
    gap: var(--osjl-spacing-md);
    flex-wrap: wrap;
}

.osjl-record-actions .osjl-btn {
    display: inline-flex;
    align-items: center;
}

/* Related Cards */
.osjl-related-cards {
    max-width: 900px;
    margin: 0 auto;
}

/* Drop Cap */
.osjl-drop-cap::first-letter {
    float: left;
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-7xl);
    line-height: 0.8;
    padding-right: var(--osjl-spacing-sm);
    color: var(--osjl-primary);
}

/* Pull Quote */
.osjl-pull-quote {
    max-width: 600px;
    margin: var(--osjl-spacing-2xl) auto;
    padding: var(--osjl-spacing-xl);
    background: var(--osjl-parchment);
    border-left: 4px solid var(--osjl-secondary);
    font-style: italic;
}

.osjl-pull-quote p {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    color: var(--osjl-gray-700);
    margin-bottom: var(--osjl-spacing-sm);
}

.osjl-pull-quote cite {
    display: block;
    font-style: normal;
    font-size: var(--osjl-text-sm);
    color: var(--osjl-gray-500);
}

/* Timeline Enhanced Styles */
.osjl-timeline-item .osjl-timeline-title {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-xs);
}

.osjl-timeline-item .osjl-timeline-text {
    font-size: var(--osjl-text-base);
    color: var(--osjl-gray-600);
    line-height: 1.7;
}

/* Responsive adjustments for templates */

/* Tablet */
@media (max-width: 1024px) {
    .osjl-feature-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--osjl-spacing-lg);
    }

    .osjl-hero-content {
        padding: var(--osjl-spacing-xl);
    }

    .osjl-site-name {
        font-size: var(--osjl-text-lg);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .osjl-search-main {
        flex-direction: column;
    }

    .osjl-details-grid {
        grid-template-columns: 1fr;
    }

    .osjl-record-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .osjl-record-actions .osjl-btn {
        justify-content: center;
    }

    .osjl-feature-grid {
        grid-template-columns: 1fr;
    }

    .osjl-tips-grid {
        grid-template-columns: 1fr;
    }

}

/* Small phone */
@media (max-width: 480px) {
    .osjl-cemetery-search {
        padding: var(--osjl-spacing-md);
    }

    .osjl-pagination-buttons {
        gap: var(--osjl-spacing-xs);
    }

    .osjl-pagination-btn {
        min-width: 40px;
        min-height: 44px;
        padding: var(--osjl-spacing-sm);
    }

    .osjl-record-header {
        padding-bottom: var(--osjl-spacing-lg);
    }

    .osjl-plot-box {
        padding: var(--osjl-spacing-md);
    }

    .osjl-site-name {
        font-size: var(--osjl-text-base);
    }

    .osjl-tagline {
        display: none;
    }
}

/*--------------------------------------------------------------
# Animations — Elegant entrance choreography
--------------------------------------------------------------*/

/* Keyframes */
@keyframes osjl-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes osjl-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hero entrance stagger */
.osjl-hero .elementor-widget {
    opacity: 0;
    animation: osjl-fade-up 700ms var(--osjl-ease-out) forwards;
}

.osjl-hero .elementor-widget:nth-child(1) {
    animation-delay: 100ms;
}

.osjl-hero .elementor-widget:nth-child(2) {
    animation-delay: 250ms;
}

.osjl-hero .elementor-widget:nth-child(3) {
    animation-delay: 400ms;
}

/* Scroll-reveal — elements start hidden, revealed by IntersectionObserver */
.osjl-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--osjl-ease-out),
                transform 600ms var(--osjl-ease-out);
}

.osjl-reveal.osjl-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children within a revealed container */
.osjl-reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms var(--osjl-ease-out),
                transform 500ms var(--osjl-ease-out);
}

.osjl-reveal-stagger.osjl-revealed > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.osjl-reveal-stagger.osjl-revealed > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.osjl-reveal-stagger.osjl-revealed > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.osjl-reveal-stagger.osjl-revealed > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }

/* Button press micro-interaction */
.osjl-btn:active,
.osjl-btn-amber:active,
.osjl-btn-outline:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}

/* Card hover lift — smooth shadow expansion */
.osjl-card,
.osjl-news-card,
.osjl-feature-card {
    transition: transform 300ms var(--osjl-ease-out),
                box-shadow 300ms var(--osjl-ease-out),
                border-color 300ms var(--osjl-ease-out);
}

/* Header scroll transition */
.osjl-header {
    transition: box-shadow 300ms var(--osjl-ease-out),
                background-color 300ms var(--osjl-ease-out);
}

.osjl-header.scrolled {
    box-shadow: 0 2px 12px var(--osjl-black-a15);
}

/* Active-nav contrast. Elementor kit paints the current page's menu
   item with --osjl-secondary (amber #b8943f); on the dark-green header
   that's 3.4:1 — below WCAG 1.4.3 AA (4.5). Swap to
   --osjl-secondary-light (#d4af5c), the palette's "amber-on-dark"
   variant, bringing the ratio to ~4.6:1. Affordance beyond color comes
   from the Elementor nav widget's "pointer: underline" ::after bar
   (see post 5835 settings) — WCAG 1.4.1 Use of Color is satisfied by
   the bar's presence, not a text-decoration. Scoped to .osjl-header
   and doubled on .elementor-item.elementor-item-active to outpace the
   kit. Also catches [aria-current="page"] for REST-rendered markup.
   Ancestor selectors cover History when a sub-page (Flohr House,
   Patriots, Civil War) is active. */
.osjl-header .elementor-nav-menu .elementor-item.elementor-item-active,
.osjl-header .elementor-nav-menu .elementor-item[aria-current="page"],
.osjl-header .elementor-nav-menu li.current-menu-ancestor > .elementor-item,
.osjl-header .elementor-nav-menu li.current-menu-parent > .elementor-item {
    color: var(--osjl-secondary-light) !important;
}

/* Dropdown panel — SmartMenus .sub-menu floats below the header.
   Dark-green bg matches the main nav so the panel reads as a
   continuation of it. Amber top accent + strong drop shadow give
   visual separation ("a panel below the nav"). */
.osjl-header .elementor-nav-menu .sub-menu {
    background-color: var(--osjl-primary);
    border-top: 2px solid var(--osjl-secondary);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    min-width: 200px;
}

.osjl-header .elementor-nav-menu .sub-menu .elementor-item,
.osjl-header .elementor-nav-menu .sub-menu .elementor-sub-item {
    color: var(--osjl-fg-on-primary) !important;
    font-family: var(--osjl-font-serif) !important;
    font-size: 1rem !important;
    font-weight: 500;
}

.osjl-header .elementor-nav-menu .sub-menu .elementor-item:hover,
.osjl-header .elementor-nav-menu .sub-menu .elementor-item:focus-visible,
.osjl-header .elementor-nav-menu .sub-menu .elementor-sub-item:hover,
.osjl-header .elementor-nav-menu .sub-menu .elementor-sub-item:focus-visible {
    background-color: var(--osjl-secondary) !important;
    color: var(--osjl-primary) !important;
}

/* Search input focus glow */
.osjl-hero-search-row input {
    transition: border-color 200ms var(--osjl-ease-out),
                box-shadow 200ms var(--osjl-ease-out);
}

.osjl-hero-search-row input:focus-visible {
    box-shadow: 0 0 0 4px var(--osjl-secondary-a20);
}

/* Accordion / details expand */
details[open] summary {
    margin-bottom: var(--osjl-spacing-md);
}

details > *:not(summary) {
    animation: osjl-fade-in 300ms var(--osjl-ease-out);
}

/* Link underline reveal on hover */
.osjl-card-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--osjl-secondary);
    transition: width 300ms var(--osjl-ease-out);
}

.osjl-card-link:hover::after {
    width: 100%;
}

/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/
@media print {
    .osjl-cemetery-search,
    .osjl-view-toggle,
    .osjl-pagination,
    .elementor-nav-menu,
    [data-elementor-type="header"],
    [data-elementor-type="footer"],
    .elementor-location-header,
    .elementor-location-footer,
    .osjl-footer {
        display: none !important;
    }

    .osjl-cemetery-table {
        font-size: 10pt;
    }

    /* Use fixed print colors; dark-mode tokens would be invisible on paper. */
    .osjl-cemetery-table th {
        background-color: #1a202c !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    .osjl-single-record {
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
# Interior page hero (.osjl-page-header)
# ------------------------------------------------------------
# Used on every interior page with a hero image (History, Cemetery,
# Flohr House, About, Visit, Laurence Krone, Patriots). Provides the
# gradient-overlay + text-shadow polish that .osjl-hero has on the
# homepage, so interior heroes don't feel flat or washed-out.
# Inline Elementor section settings still carry the solid-color
# overlay (at 0.45 opacity after beads-ayn); this layer sits on top.
--------------------------------------------------------------*/
.osjl-page-header,
.osjl-history-hero {
    position: relative;
    min-height: calc(100vh - var(--osjl-header-h, 92px));
    min-height: calc(100dvh - var(--osjl-header-h, 92px));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile hero cap — full-fold calc eats the entire above-fold on small
   viewports, hiding the "there's more" scroll cue. Shrink to 55vh on
   ≤768px so ~300–400px of page content peeks below. Desktop keeps the
   immersive full-fold. Declared AFTER the desktop rule so source order
   wins the cascade (same specificity). */
@media (max-width: 768px) {
    .osjl-hero,
    .osjl-page-header,
    .osjl-history-hero {
        min-height: 55vh;
        min-height: 55dvh;
    }

    /* Elementor's builder bakes a 60vh min-height on the inner
       .elementor-container of the history-hero section, which grows
       the section past our 55vh cap on mobile. Neutralize it here so
       the cap wins. !important because we're overriding generated
       per-post CSS (higher specificity). */
    .osjl-history-hero > .elementor-container,
    .osjl-page-header > .elementor-container,
    .osjl-hero > .elementor-container {
        min-height: 0 !important;
    }
}

.osjl-page-header::after,
.osjl-history-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Atmospheric wash — the three-stop gradient's midpoint sits around
       the H1 position (hero is flex-centered, H1 lands near vertical
       center). Previous midpoint opacity (0.20) let bright imagery —
       especially History's 1854-cornerstone shot — read as washed-out
       vs. cemetery/flohr-house; the consistent "weathered stone" mood
       broke down. Tightened stops (0.20 top → 0.40 mid → 0.65 bottom)
       level the set without over-darkening already-dark photos. */
    background: linear-gradient(
        to bottom,
        rgba(45, 67, 53, 0.20) 0%,
        rgba(45, 67, 53, 0.40) 60%,
        rgba(45, 67, 53, 0.65) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.osjl-page-header > .elementor-container,
.osjl-history-hero > .elementor-container {
    position: relative;
    z-index: 2;
}

.osjl-page-header .elementor-heading-title,
.osjl-history-hero .elementor-heading-title,
.osjl-hero .elementor-heading-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Per-page opt-in: show the hero photo in full (no cover-crop). Use for
   imagery whose composition must stay intact across viewports — e.g.
   the Patriots memorial marker, where the engraved text would clip on
   phones under cover. The hero's primary-green bg shows through as
   letterbox/pillarbox bars, which reads as an intentional "display
   case" treatment rather than awkward negative space. The ::after
   overlay still tints the whole hero, keeping the H1 legible. */
.osjl-page-header.osjl-hero-contain,
.osjl-history-hero.osjl-hero-contain,
.osjl-hero.osjl-hero-contain {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Strengthen the ::after scrim on letterboxed heroes. The shared cover
   gradient is tuned for full-bleed imagery; when the photo is contained
   the H1 sits mid-height over potentially bright stone with the
   default gradient at ~15% opacity there — measured 2.27:1 on the
   Patriots marker (WCAG 1.4.3 failure). A stronger mid-to-late stop
   brings the H1 contrast back above AA without darkening the whole
   image top-to-bottom. */
.osjl-page-header.osjl-hero-contain::after,
.osjl-history-hero.osjl-hero-contain::after,
.osjl-hero.osjl-hero-contain::after {
    /* Midpoint 0.78 (was 0.70) closes the AAA gap on the Patriots
       marker — H1 sits around 50% vertical so the mid-stop dominates.
       Measured H1 contrast now ~4.5:1 across text area at 36px bold,
       satisfying AAA large-text (4.5:1). */
    background: linear-gradient(
        to bottom,
        rgba(45, 67, 53, 0.45) 0%,
        rgba(45, 67, 53, 0.78) 50%,
        rgba(45, 67, 53, 0.85) 100%
    );
}

/* Default hero heading color — wins over Elementor kit's default heading
   color (navy) for any heading widget that ships without an explicit
   title_color (e.g. About Us H1). Inline title_color on a widget still
   wins, so per-heading overrides (eyebrow labels, gold kickers) are
   preserved. Uses --osjl-fg-on-primary so dark-mode stays #fff on the
   hex-baked hero-green bg. */
.osjl-page-header .elementor-widget-heading .elementor-heading-title,
.osjl-history-hero .elementor-widget-heading .elementor-heading-title,
.osjl-hero .elementor-widget-heading .elementor-heading-title {
    color: var(--osjl-fg-on-primary);
}

/*--------------------------------------------------------------
# Laurence Krone page — plaque transcription + named-stone list
--------------------------------------------------------------*/
.osjl-krone-plaque {
    font-size: var(--osjl-text-base);
    line-height: 1.75;
}

.osjl-krone-plaque .osjl-plaque-erected {
    display: block;
    margin-top: var(--osjl-spacing-sm);
    font-size: var(--osjl-text-sm);
    font-style: normal;
    color: var(--osjl-gray-500);
}

.osjl-krone-stone-list {
    margin: var(--osjl-spacing-md) 0 var(--osjl-spacing-lg);
    padding-left: var(--osjl-spacing-lg);
}

.osjl-krone-stone-list li {
    margin-bottom: var(--osjl-spacing-sm);
    line-height: 1.7;
}

.osjl-krone-stone-list li a {
    font-weight: 600;
}

/* Krone-stone gallery — 3 portraits side-by-side on desktop, stacked
 * on narrow viewports. Captions in the small archival voice used
 * elsewhere on the page. */
.osjl-krone-stone-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--osjl-spacing-md);
    margin: var(--osjl-spacing-xl) 0;
}

.osjl-krone-stone-gallery-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.osjl-krone-stone-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    background: var(--osjl-cream-dark, #ebe8e2);
}

.osjl-krone-stone-gallery-item figcaption {
    margin-top: var(--osjl-spacing-xs);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 768px) {
    .osjl-krone-stone-gallery {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
# Gallery page (/gallery/) — generic photo grid
# ------------------------------------------------------------
# Sections with h2 headings; each section a 3-up grid (2-up on tablet,
# 1-up on phone). Caption uses the same archival voice as other pages.
--------------------------------------------------------------*/
.osjl-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--osjl-spacing-md);
    margin: var(--osjl-spacing-md) 0 var(--osjl-spacing-2xl);
}

.osjl-photo-grid-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.osjl-photo-grid-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background: var(--osjl-cream-dark, #ebe8e2);
}

/* Portrait variant for vertical subjects (Krone stones, wooden markers, chimney). */
.osjl-photo-grid-item--portrait img {
    aspect-ratio: 3 / 4;
}

/* Wide variant for landscape-led subjects (cemetery panoramas, fence). */
.osjl-photo-grid-item--wide img {
    aspect-ratio: 16 / 9;
}

.osjl-photo-grid-item figcaption {
    margin-top: var(--osjl-spacing-xs);
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
    line-height: 1.55;
    font-style: italic;
}

@media (max-width: 1024px) {
    .osjl-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .osjl-photo-grid {
        grid-template-columns: 1fr;
    }
}

/* Section heading inside the gallery body. */
.osjl-gallery-section {
    margin-bottom: var(--osjl-spacing-2xl);
}

.osjl-gallery-section > h2 {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-2xl);
    color: var(--osjl-primary);
    margin-bottom: var(--osjl-spacing-xs);
}

.osjl-gallery-section > p {
    color: var(--osjl-muted);
    margin-bottom: var(--osjl-spacing-md);
    font-style: italic;
}

/*--------------------------------------------------------------
# Revolutionary War Patriots roster
--------------------------------------------------------------*/
.osjl-patriot-roster {
    list-style: none;
    padding-left: 0;
    margin: var(--osjl-spacing-md) 0 var(--osjl-spacing-lg);
}

.osjl-patriot-roster li {
    padding: var(--osjl-spacing-sm) 0;
    border-bottom: 1px solid var(--osjl-gray-200, #e5e5e5);
    line-height: 1.6;
}

.osjl-patriot-roster li:last-child {
    border-bottom: none;
}

.osjl-patriot-roster li a {
    font-weight: 600;
}

.osjl-patriot-vitals {
    color: var(--osjl-gray-500);
    font-variant-numeric: oldstyle-nums;
    margin-left: 0.25rem;
}

.osjl-patriot-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    font-size: var(--osjl-text-xs);
    font-family: var(--osjl-font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 0.1em;
    white-space: nowrap;
}

.osjl-patriot-tag.osjl-patriot-krone {
    background: var(--osjl-parchment, #f4ecd8);
    color: var(--osjl-cabin-warm, #5f4d3c);
    border: 1px solid rgba(95, 77, 60, 0.2);
}

.osjl-patriot-tag.osjl-patriot-pastor {
    background: var(--osjl-secondary);
    color: var(--osjl-gray-800, #1a1a1a);
}

/*--------------------------------------------------------------
# Cemetery plot chips
# ------------------------------------------------------------
# Shown on: single /plot/ pages (linked, under title),
# cemetery search results (inline with name), patriots/krone lists.
# Two variants share a base pill: patriot (secondary-green) and
# krone (parchment/brown). Mirrors the .osjl-patriot-tag styling
# so the chip vocabulary is consistent across pages.
--------------------------------------------------------------*/
.osjl-plot-chip {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    font-size: var(--osjl-text-xs);
    font-family: var(--osjl-font-sans);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 0.1em;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.4;
    border: 1px solid transparent;
}

a.osjl-plot-chip:hover,
a.osjl-plot-chip:focus {
    filter: brightness(0.95);
    text-decoration: none;
}

.osjl-plot-chip-patriot {
    background: var(--osjl-secondary);
    color: var(--osjl-gray-800, #1a1a1a);
}

.osjl-plot-chip-krone {
    background: var(--osjl-parchment, #f4ecd8);
    color: var(--osjl-cabin-warm, #5f4d3c);
    border-color: rgba(95, 77, 60, 0.2);
}

.osjl-plot-chip-civil-war {
    background: var(--osjl-chip-cw-bg);
    color: var(--osjl-chip-cw-fg);
}

.osjl-plot-chip-1812 {
    background: var(--osjl-chip-1812-bg);
    color: var(--osjl-chip-1812-fg);
}

.osjl-plot-chip-died-in-service {
    background: var(--osjl-chip-died-bg);
    color: var(--osjl-chip-died-fg);
    border-color: rgba(37, 42, 40, 0.2);
}

/* Generic veteran flag — shown when a record is on the church's Find A
 * Grave veterans roll but no specific-war chip applies. Suppressed on
 * single-record + table views when a more specific chip (Patriot, Civil
 * War, 1812, Died in Service) is also set, to avoid redundancy. */
.osjl-plot-chip-veteran {
    background: var(--osjl-primary);
    color: var(--osjl-fg-on-primary, #fff);
}

/* Low-confidence modifier (bead 3v5): per-record osjl_research_confidence
 * field set to partial, disputed, or needs-verification. Renders the chip
 * in a desaturated/dim treatment so the reader can see it's a claim that
 * hasn't fully cleared verification, while still preserving the kind-of-
 * service signal. The trailing asterisk in the chip body + the per-state
 * tooltip suffix ("(Disputed claim)" etc.) carry the meaning for screen
 * readers and color-blind viewers. Doubled-class selector beats the
 * single-class color rules above. */
.osjl-plot-chip.osjl-plot-chip--low-confidence {
    background: var(--osjl-gray-200);
    color: var(--osjl-text-muted);
    border: 1px dashed var(--osjl-gray-400, #b8b6b1);
    font-style: italic;
}

a.osjl-plot-chip.osjl-plot-chip--low-confidence:hover,
a.osjl-plot-chip.osjl-plot-chip--low-confidence:focus {
    background: var(--osjl-gray-300, #d8d6d1);
    color: var(--osjl-text);
    border-color: var(--osjl-secondary);
}

/* On a single /plot/ page: chips sit on their own row under the subtitle,
 * a bit larger, and they're links that point to the relevant feature page. */
.osjl-plot-chips {
    margin: 0 0 var(--osjl-spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.osjl-plot-chips .osjl-plot-chip {
    margin-left: 0;
    font-size: var(--osjl-text-sm);
    padding: 0.3rem 0.7rem;
}

/* Results-table "Tags" column: chips are the sole cell content, so no
 * left margin on the first chip, and a small gap between chips. */
.osjl-col-tags {
    white-space: nowrap;
}
.osjl-col-tags .osjl-plot-chip {
    margin-left: 0;
    margin-right: 0.25rem;
}
.osjl-col-tags .osjl-plot-chip:last-child {
    margin-right: 0;
}

/*--------------------------------------------------------------
# Header layout: widen the inner container
# ------------------------------------------------------------
# Section is full_width but inner .elementor-container caps at the
# Elementor default 1140px — wastes ~390px on each side at 1440+
# viewports. Override scoped to .osjl-header so the rest of the
# site's boxed sections are unaffected.
--------------------------------------------------------------*/
.osjl-header > .elementor-container {
    max-width: none !important;       /* override Elementor's 1140px cap */
    padding-inline: var(--osjl-spacing-2xl);
}

@media (max-width: 1024px) {
    .osjl-header > .elementor-container {
        padding-inline: var(--osjl-spacing-lg);
    }
}

/* Nav-item horizontal padding: tighten between 1024-1280 so 9 items
 * still fit on a single line. Above 1280 we have plenty of room and
 * use the comfortable Elementor default. Below 1024 the hamburger
 * takes over. */
@media (min-width: 1025px) and (max-width: 1280px) {
    .elementor-nav-menu--main .elementor-nav-menu > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/*--------------------------------------------------------------
# Header logo lockup
# ------------------------------------------------------------
# Mark (three-sunflower motif derived from the Flohr footstone) +
# wordmark + tagline. currentColor-inheriting SVG so the mark tints
# to the header's text color on hover/focus without asset duplication.
--------------------------------------------------------------*/
.osjl-site-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    /* --osjl-fg-on-primary is the dark-mode-stable white. The header bg
     * is hex-baked dark green in Elementor data, so we must NOT use
     * --osjl-white (which flips to near-black in dark mode). */
    color: var(--osjl-fg-on-primary);
    line-height: 1;
}

.osjl-site-mark {
    display: inline-flex;
    flex: 0 0 auto;
}

.osjl-site-mark svg {
    width: 48px;
    height: auto;
    color: var(--osjl-secondary);
    transition: color var(--osjl-transition-fast), transform var(--osjl-transition-fast);
}

.osjl-site-lockup:hover .osjl-site-mark svg,
.osjl-site-lockup:focus-visible .osjl-site-mark svg {
    color: var(--osjl-white, #fff);
    transform: scale(1.03);
}

.osjl-site-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Doubled selector (0,2,0) beats Elementor kit `.elementor-kit-XXXX a`
 * (0,1,1) that otherwise paints the wordmark in the kit text color —
 * axe-core's contrast check doesn't follow the child-span override and
 * reports the parent anchor's kit color as the foreground. */
.osjl-site-lockup .osjl-site-name,
.osjl-site-name {
    font-family: var(--osjl-font-serif);
    font-size: var(--osjl-text-xl);
    font-weight: 600;
    color: var(--osjl-fg-on-primary);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.osjl-site-lockup .osjl-tagline,
.osjl-tagline {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-xs);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

/* Tighter gap + slightly smaller mark on narrow viewports so the header
 * row doesn't wrap or crowd the nav. Paired with the 1024 breakpoint
 * where the hamburger takes over. */
@media (max-width: 1024px) {
    .osjl-site-lockup {
        gap: 0.55rem;
    }
    .osjl-site-mark svg {
        width: 40px;
    }
    .osjl-site-name {
        font-size: var(--osjl-text-lg);
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
# ------------------------------------------------------------
# Renders from [osjl_breadcrumbs] — sits directly under the hero on
# interior pages. Previously unstyled (visually inert, low contrast).
# New treatment: osjl-text-sm with better line-height, muted links with
# underline on hover, current page in primary weight 600, thin bottom
# hairline so the bar anchors visually between hero and body content.
--------------------------------------------------------------*/
.osjl-breadcrumbs {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    line-height: 1.6;
    color: var(--osjl-muted);
    padding: var(--osjl-spacing-sm) 0;
    margin-bottom: var(--osjl-spacing-md);
    border-bottom: 1px solid var(--osjl-gray-200);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    word-break: break-word;
}

.osjl-breadcrumbs a {
    color: var(--osjl-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--osjl-transition-fast), border-color var(--osjl-transition-fast);
}

.osjl-breadcrumbs a:hover,
.osjl-breadcrumbs a:focus-visible {
    color: var(--osjl-primary);
    border-bottom-color: var(--osjl-secondary);
}

.osjl-breadcrumbs [aria-current="page"] {
    color: var(--osjl-primary);
    font-weight: 600;
}

.osjl-breadcrumb-sep {
    color: var(--osjl-stone-border);
    user-select: none;
    font-size: 0.9em;
    opacity: 0.9;
    padding: 0 0.15rem;
}

/* Mobile: allow wrapping but keep each trail segment on one line. */
@media (max-width: 640px) {
    .osjl-breadcrumbs {
        font-size: var(--osjl-text-sm);
    }
}

/*--------------------------------------------------------------
# DataTables 2.x — theme to match osjl tokens
# ------------------------------------------------------------
# Stock DataTables chrome (blue pagination, cramped inputs) clashes
# with the rest of the site. These overrides inherit from the site's
# form + button styling so the table reads as "part of the system".
--------------------------------------------------------------*/
.dt-container {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-base);
    color: var(--osjl-gray-800);
}

.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging {
    font-size: var(--osjl-text-sm);
    color: var(--osjl-muted);
}

.dt-container .dt-search {
    margin-bottom: var(--osjl-spacing-sm);
}

.dt-container .dt-search label,
.dt-container .dt-length label {
    color: var(--osjl-muted);
    font-weight: 500;
}

.dt-container .dt-input {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--osjl-gray-200);
    border-radius: 2px;
    background: var(--osjl-white, #fff);
    color: var(--osjl-gray-800);
    transition: border-color var(--osjl-transition-fast);
}

/* Match .osjl-form-input focus style — outline not box-shadow — so all
 * form inputs site-wide announce focus the same way. */
.dt-container .dt-input:focus,
.dt-container .dt-input:focus-visible {
    border-color: var(--osjl-primary);
    outline: 2px solid var(--osjl-secondary);
    outline-offset: 2px;
}

.dt-container .dt-info {
    padding-top: var(--osjl-spacing-sm);
    color: var(--osjl-muted);
}

/* Pagination buttons — site-consistent pill chrome */
.dt-container .dt-paging-button {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-sm);
    min-width: 32px;
    min-height: 32px;
    padding: 0.3rem 0.6rem;
    margin: 0 0.1rem;
    border: 1px solid var(--osjl-gray-200);
    border-radius: 2px;
    background: var(--osjl-white, #fff);
    color: var(--osjl-primary);
    cursor: pointer;
    transition: background var(--osjl-transition-fast), color var(--osjl-transition-fast), border-color var(--osjl-transition-fast);
}

.dt-container .dt-paging-button:hover:not(.disabled):not(.current),
.dt-container .dt-paging-button:focus-visible:not(.disabled):not(.current) {
    background: var(--osjl-parchment, #f4ecd8);
    border-color: var(--osjl-secondary);
    color: var(--osjl-primary);
}

.dt-container .dt-paging-button:focus-visible {
    outline: 2px solid var(--osjl-primary);
    outline-offset: 2px;
}

.dt-container .dt-paging-button.current,
.dt-container .dt-paging-button.current:hover {
    background: var(--osjl-primary);
    color: var(--osjl-white, #fff);
    border-color: var(--osjl-primary);
}

.dt-container .dt-paging-button.disabled {
    color: var(--osjl-gray-400, #aaa);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Column headers — match the rest of the site's heading styling */
.dt-container thead th {
    font-family: var(--osjl-font-sans);
    font-size: var(--osjl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--osjl-primary);
    border-bottom: 2px solid var(--osjl-gray-200);
    padding: var(--osjl-spacing-sm) var(--osjl-spacing-xs);
}

.dt-container tbody td {
    font-size: var(--osjl-text-sm);
    padding: var(--osjl-spacing-xs) var(--osjl-spacing-xs);
    border-bottom: 1px solid var(--osjl-gray-200);
}

.dt-container tbody tr:hover {
    background: var(--osjl-parchment, #f4ecd8);
}

.dt-container a {
    color: var(--osjl-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--osjl-gray-200);
    padding-bottom: 1px;
}

.dt-container a:hover,
.dt-container a:focus-visible {
    border-bottom-color: var(--osjl-secondary);
}

/* Sort indicators — quieter, colour matches theme */
.dt-container .dt-orderable-asc::before,
.dt-container .dt-orderable-desc::after {
    color: var(--osjl-gray-400, #bbb);
}

.dt-container .dt-ordering-asc::before,
.dt-container .dt-ordering-desc::after {
    color: var(--osjl-secondary);
}

/*--------------------------------------------------------------
# Single post featured image
--------------------------------------------------------------*/
.osjl-post-featured-figure {
    margin: 0 0 var(--osjl-spacing-lg);
}

.osjl-post-featured-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/*--------------------------------------------------------------
# Homepage card thumbnails
# ------------------------------------------------------------
# Archival-photo framing on the three homepage osjl-card widgets.
# Sits between the card's accent-color top border and the title.
--------------------------------------------------------------*/
.osjl-card-thumb {
    margin: 0 0 var(--osjl-spacing-md);
    padding: 0;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background: var(--osjl-cream-dark, #ebe8e2);
}

.osjl-card-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 400ms ease;
}


/* Subtle warm up on hover — stays restrained, doesn't bounce. */
.osjl-card:hover .osjl-card-thumb img {
    transform: scale(1.02);
}

/* Screen-reader-only utility (WP a11y standard). Used for hidden
 * structural headings that fix hierarchy without affecting layout. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--osjl-white);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--osjl-text);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*--------------------------------------------------------------
# Elementor gallery filter — contrast fix (bead 2a3, CC-1)
# The widget's active-tab default is amber #b8943f text on cream which
# fails WCAG 1.4.3 (2.59:1). Re-route to --osjl-amber-deep. Selector is
# scoped narrowly to the gallery widget so it doesn't leak into any other
# .elementor-item-active surface.
--------------------------------------------------------------*/
.elementor-gallery__titles-container .elementor-gallery-title.elementor-item-active,
.elementor-gallery__titles-container a.elementor-gallery-title[data-gallery-index="all"],
.elementor-gallery .elementor-gallery-title.elementor-item-active {
    color: var(--osjl-amber-deep) !important;
}