/*
Theme Name: Hemingway Modern
Author: Star Heir
Description: A modern, standalone refresh of the classic Hemingway theme — clean editorial design, responsive, and block-editor ready. Site-specific contact info is configured per install in the Customizer (Site Identity / Contact Info).
Version: 3.9.16
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hemingway-modern
Tags: blog, editorial, modern, responsive, two-columns, custom-header
*/

:root {
    --bg: #faf8f5;
    --surface: #ffffff;
    --text: #2b2b2b;
    --text-muted: #5a544e;
    --text-dim: #8a847c;
    --accent: #3a4a5c;
    --accent-dark: #2c3a4a;
    --accent-soft: #eef1f4;
    --line: #e0dbd3;
    --line-soft: #ece7df;
    --header-bg: rgba(250, 248, 245, 0.86);       /* sticky bar — frosted glass */
    --header-bg-solid: rgba(250, 248, 245, 0.97); /* attached dropdown panels */
    --shadow: 0 1px 2px rgba(43,43,43,0.04), 0 8px 24px rgba(43,43,43,0.06);
    --shadow-hover: 0 2px 4px rgba(43,43,43,0.05), 0 16px 40px rgba(43,43,43,0.12);
    --radius: 8px;
    --radius-sm: 6px;
    --container: 1100px;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.7;
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(ellipse at top, rgba(58,74,92,0.04) 0%, transparent 60%);
    font-size: 18px;
}

/* Older-user / zoom safety: large tap targets */
a, button, input, select, textarea {
    min-height: 44px;
}
.btn, .action-btn, .read-more, .filter-chip, .slider-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-dark); }
p { margin: 0 0 18px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

/* ============ Header ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.3s var(--ease);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header.scrolled { box-shadow: 0 8px 28px rgba(43, 43, 43, 0.1); }
.site-header .header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* open mobile menu wraps to its own row */
    gap: 10px 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 0; /* flex item: never let children force it past the header */
    width: 100%;
}
.site-header .header-inner > * { max-width: 100%; }

/* Screen-reader-only labels */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}
.site-branding > * { max-width: 100%; }
.site-branding img.custom-logo {
    max-height: 40px;
    max-width: min(260px, 60vw);
    width: auto; height: auto;
    display: block;
}
.site-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}
.site-title a { color: inherit; }
.site-description {
    color: rgba(255,255,255,0.85);
    font-style: italic;
    font-size: 0.95rem;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
body.home .site-description { font-size: 1.12rem; }
.header-phone {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;
}
.phone-link {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.phone-link:hover { color: var(--accent-dark); }
.phone-prefix { color: var(--text-muted); font-weight: 500; margin-right: 2px; }

/* Mobile nav toggle — desktop hidden */
.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto; /* pins to the right edge when nav/phone are hidden */
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.7);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: var(--accent-dark);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.25s;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Primary nav — quiet text links on the light bar */
.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}
.nav-list {
    list-style: none;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.nav-list a {
    display: inline-flex;
    align-items: center;
    color: rgba(43, 43, 43, 0.78);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}
.nav-list a:hover {
    color: var(--accent-dark);
    background: var(--accent-soft);
}
.nav-list li.current-menu-item > a,
.nav-list li.current_page_item > a {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 600;
}

/* Hero banner — the photo section; scrolls away like normal content */
.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(120px, 18vh, 170px); /* slim brand strip on every page */
    background: url('/wp-content/themes/hemingway-modern/assets/images/header.jpg') center center / cover no-repeat #2c3a4a;
    color: #fff;
    overflow: hidden;
}
.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.72) 100%);
    z-index: 0;
    pointer-events: none;
}
.hero-banner-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
}
.hero-inner {
    padding: 26px 0 32px;
    text-align: center;
}

/* Header search — compact pill inside the bar (desktop),
   magnifier toggle + dropdown panel (smaller screens) */
.header-search {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}
.search-toggle {
    display: none; /* shown on smaller screens instead of the input */
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--accent-dark);
    cursor: pointer;
    transition: background 0.2s;
}
.search-toggle:hover { background: var(--accent-soft); }
.header-search-form {
    display: flex;
    align-items: center;
}
.header-search-form input[type="search"] {
    width: clamp(150px, 15vw, 220px);
    min-width: 0;
    padding: 9px 14px;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    border-right: none;
    border-radius: 999px 0 0 999px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(58, 74, 92, 0.12);
}
.header-search-form button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border: 1px solid var(--accent);
    border-radius: 0 999px 999px 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.header-search-form button:hover { background: var(--accent-dark); }
.header-search-form button svg { flex: none; }

/* Focus ring readable over the hero photo */
.hero-banner :focus-visible { outline-color: #fff; }

@media (max-width: 992px) {
    /* Magnifier in the bar opens a search panel attached below it */
    .search-toggle { display: inline-flex; }
    .header-search-form {
        position: absolute;
        top: 100%; left: 0; right: 0;
        z-index: 190;
        padding: 10px 16px 12px;
        background: var(--header-bg-solid);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 30px rgba(43, 43, 43, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    }
    .site-header.search-open .header-search-form {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
    }
    .header-search-form input[type="search"] { flex: 1; width: auto; font-size: 1rem; padding: 11px 14px; }
    .header-search-form button { padding: 11px 18px; min-height: 48px; }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .main-nav { display: none; }
    .site-header.nav-open .main-nav { display: flex; }
    .site-header.nav-open .nav-list {
        flex-direction: column;
        width: min(320px, 92vw, 100%);
    }
    .site-header.nav-open .nav-list a { justify-content: center; }
}

/* Main */
.site-main { padding: 48px 0 64px; }

/* Layout */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

/* Obituaries header */
.obituaries-header { margin-bottom: 32px; text-align: center; }
.page-title {
    font-size: 2.4rem; margin: 0 0 8px;
    position: relative; display: inline-block;
}
.page-title::after {
    content: ''; display: block; width: 60px; height: 3px;
    background: var(--accent); margin: 12px auto 0; border-radius: 2px;
}

/* Obituary grid */
.obituary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}
.obituary-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
    display: flex; flex-direction: column;
    position: relative;
}
.obituary-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), #6d8299);
    opacity: 0; transition: opacity 0.4s;
    z-index: 2;
}
.obituary-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}
.obituary-card:hover::before { opacity: 1; }
.obituary-thumb {
    display: block; aspect-ratio: 3/4; overflow: hidden;
    background: var(--line-soft); position: relative;
}
.obituary-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}
.obituary-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.obituary-card:hover .obituary-thumb img { transform: scale(1.06); }
.obituary-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--line-soft), var(--accent-soft)); }
.obituary-title {
    font-family: var(--font-display); font-size: 1.15rem;
    margin: 16px 18px 6px; line-height: 1.3; font-weight: 600;
}
.obituary-title a { color: var(--text); }
.obituary-title a:hover { color: var(--accent); }
.obituary-dates {
    font-size: 0.85rem; color: var(--text-dim); margin: 0 18px 6px;
    font-style: italic;
}
.obituary-excerpt {
    font-size: 0.88rem; color: var(--text-muted); margin: 0 18px 12px;
    line-height: 1.5;
}
.obituary-card .read-more {
    margin: auto 18px 18px; font-size: 0.85rem;
    color: var(--accent); font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
    transition: gap 0.2s;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.obituary-card .read-more:hover { gap: 8px; }

/* Pagination */
.pagination { margin: 48px 0; text-align: center; }
.pagination .nav-links a, .pagination a {
    display: inline-block; padding: 10px 20px; margin: 0 4px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text-muted); background: var(--surface);
    transition: all 0.2s;
}
.pagination .nav-links a:hover, .pagination a:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

/* Single obituary */
.single-obituary { max-width: 820px; margin: 0 auto; }
.single-obituary .obituary-photo {
    margin: 0 0 32px; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
}
.single-obituary .obituary-photo img { width: 100%; height: auto; display: block; }
.single-obituary .entry-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0 0 12px;
}
.single-obituary .post-meta {
    font-size: 0.9rem; color: var(--text-dim);
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 28px; padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.post-meta-bottom {
    margin-top: 28px; padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--text-dim); font-size: 0.9rem;
}
.post-meta-bottom p { margin: 0 0 6px; }

/* Memorial actions */
.memorial-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.action-btn {
    display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface);
    color: var(--accent); font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s;
}
.action-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Post nav */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.post-nav a {
    display: block; padding: 16px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface);
    transition: all 0.2s;
}
.post-nav a:hover { border-color: var(--accent); background: var(--accent-soft); }
.post-nav h5 { font-size: 0.8rem; color: var(--text-dim); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.1em; }
.post-nav-older { text-align: left; }
.post-nav-newer { text-align: right; }

/* Single page */
.single-page { max-width: 820px; margin: 0 auto; }
.single-page .entry-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 20px; }
.entry-content { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
.entry-content p { margin: 0 0 18px; }
.entry-content h2, .entry-content h3 { margin: 28px 0 12px; }
.entry-content img { border-radius: var(--radius-sm); margin: 20px 0; }
.entry-content a { color: var(--accent); border-bottom: 1px solid rgba(58,74,92,0.3); }
.entry-content a:hover { border-color: var(--accent); }

/* Sidebar */
.sidebar { position: sticky; top: 24px; }
.widget {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 24px;
    margin-bottom: 24px; box-shadow: var(--shadow);
}
.widget-title {
    font-family: var(--font-display); font-size: 1.2rem;
    margin: 0 0 14px; color: var(--text);
    padding-bottom: 10px; border-bottom: 2px solid var(--accent);
    display: inline-block;
}
.widget ul { list-style: none; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.widget ul li:last-child { border-bottom: none; }
.widget a { color: var(--text-muted); transition: color 0.2s; }
.widget a:hover { color: var(--accent); }
.search-widget input[type="search"] {
    width: 100%; padding: 12px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-widget input[type="search"]:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px rgba(58,74,92,0.12);
}
.search-widget button, .search-widget input[type="submit"] {
    margin-top: 10px; padding: 12px 18px;
    border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff;
    cursor: pointer; font-weight: 600; width: 100%;
    transition: background 0.2s;
}
.search-widget button:hover, .search-widget input[type="submit"]:hover { background: var(--accent-dark); }
.recent-list { list-style: none; }
.recent-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.recent-list li:last-child { border-bottom: none; }
.recent-list a { color: var(--text-muted); font-size: 0.92rem; }
.recent-list a:hover { color: var(--accent); }

/* Footer */
.site-footer {
    background: var(--footer-bg, #1a2423) !important;
    color: #fff; padding: 48px 0 24px;
    margin-top: 64px;
}
.footer-contact {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px; padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-contact h3 {
    color: #fff; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 0.15em;
    margin: 0 0 12px;
}
.footer-contact p { color: rgba(255,255,255,0.7); margin: 0 0 4px; font-size: 0.95rem; }
.footer-contact a { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.footer-contact a:hover { color: #fff; }
.footer-bottom { padding-top: 20px; text-align: center; }
.footer-bottom p { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin: 0; }

/* AFSRB footer link */
.footer-extra { padding: 24px 0; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-extra .container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.afsrb-link {
    display: inline-flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 500;
    transition: color 0.2s;
}
.afsrb-link:hover { color: #fff; }
.afsrb-link img { max-width: 120px; height: auto; border-radius: 4px; }
.afsrb-info {
    color: rgba(255,255,255,0.6); font-size: 0.8rem; line-height: 1.6; margin: 0;
    max-width: 600px;
}
.afsrb-info a { color: rgba(255,255,255,0.75); text-decoration: underline; }
.afsrb-info a:hover { color: #fff; }

/* Comments */
.comments-area { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.comments-title { font-size: 1.4rem; margin: 0 0 24px; }
.comment-list { list-style: none; }
.comment-item { margin-bottom: 24px; }
.comment-body { display: flex; gap: 14px; }
.comment-avatar img { border-radius: 50%; }
.comment-content-wrap { flex: 1; min-width: 0; }
.comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.comment-author { font-weight: 600; color: var(--text); }
.comment-date { font-size: 0.82rem; color: var(--text-dim); }
.comment-text { color: var(--text-muted); }
.comment-text p { margin: 0 0 8px; }
.comment-actions { margin-top: 6px; font-size: 0.85rem; }
.comment-actions a { color: var(--accent); }
.comment-reply-title { font-size: 1.3rem; margin: 28px 0 14px; }
.comment-form p { margin: 0 0 14px; }
.comment-form label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.9rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
    width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body);
}
.comment-form textarea { min-height: 130px; }
.comment-form input[type="submit"] {
    padding: 12px 28px; border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--accent-dark); }

/* Empty */
.empty-state { text-align: center; color: var(--text-muted); padding: 48px 20px; font-style: italic; }

/* Contact page */
.contact-page { max-width: 1000px; margin: 0 auto; }
.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
    margin: 32px 0;
}
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.contact-card h3 {
    font-family: var(--font-display); font-size: 1.1rem;
    margin: 0 0 8px; color: var(--accent);
}
.contact-card p { color: var(--text-muted); margin: 0 0 4px; font-size: 0.95rem; }
.contact-card a { color: var(--accent); }
.contact-note { font-style: italic; font-size: 0.85rem; color: var(--text-dim); }
.contact-content { margin-top: 24px; }
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* Back to top */
#backToTop {
    position: fixed; bottom: 24px; right: 24px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 1.4rem;
    cursor: pointer; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 200;
}
#backToTop.visible { opacity: 1; pointer-events: auto; }
#backToTop:hover { transform: translateY(-2px); background: var(--accent-dark); }

/* Services page cards */
.services-page { max-width: 1100px; margin: 0 auto; }
.services-header { text-align: center; margin-bottom: 40px; }
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.service-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
    display: flex; flex-direction: column;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.service-card-header {
    background: var(--accent);
    color: #fff;
    padding: 20px 24px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}
.service-card-header h2, .service-card-header h3 {
    color: #fff; margin: 0; font-size: 1.15rem; font-family: var(--font-display);
}
.service-card-body {
    padding: 20px 24px 24px;
    flex: 1;
}
.service-card-body p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 12px; }
.service-card-body ul { padding-left: 18px; margin: 0; }
.service-card-body li { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 6px; line-height: 1.5; }
.service-card-body strong { color: var(--text); }
.info-card .service-card-header {
    background: var(--accent-soft);
    color: var(--accent);
}
.info-card .service-card-header h2, .info-card .service-card-header h3 {
    color: var(--accent);
}
.info-sections {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px;
}
.services-extra { margin-top: 32px; text-align: center; }
.services-extra img { max-width: 400px; margin: 0 auto; border-radius: var(--radius); }
.services-extra .afsrb-link { margin-top: 12px; }
@media (max-width: 768px) {
    .info-sections { grid-template-columns: 1fr; }
}

/* Package cards — compact price list. Expanding a card makes it span the
   full grid row, so the cells below are pushed down (in-flow, never an
   overlay) and the layout stays predictable */
.services-grid-head { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 12px; }
.services-expand-all, .services-collapse-all {
    display: none; /* JS shows them when relevant via .on */
    background: none; border: none; cursor: pointer;
    color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600;
    padding: 6px 10px; border-radius: var(--radius-sm);
    text-decoration: underline; text-underline-offset: 3px;
}
.js .services-expand-all.on, .js .services-collapse-all.on { display: inline-block; }
.services-expand-all:hover, .services-collapse-all:hover { color: var(--accent-dark); background: var(--accent-soft); }
.services-grid { gap: 14px; align-items: start; }
.package-card { transition: box-shadow 0.3s var(--ease); }
.package-card:hover { transform: none; box-shadow: var(--shadow); }
.package-card.expanded { grid-column: 1 / -1; box-shadow: var(--shadow-hover); }
.service-card-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(1.2em, auto); /* row 2 stays even with no price */
    column-gap: 14px;
    align-items: center;
    width: 100%; padding: 11px 18px;
    background: var(--accent-soft); border: 0; cursor: pointer;
    border-radius: var(--radius);
    font-family: var(--font-display); font-size: 1rem; line-height: 1.3;
    color: var(--accent-dark); text-align: left;
    transition: background 0.2s ease, border-radius 0.2s;
}
.service-card-toggle:hover { background: #e3e8ee; }
/* Two fixed lines keep every collapsed row identical: full-width title
   on line one, price below on line two */
.service-card-name {
    grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.service-card-price {
    grid-column: 1; grid-row: 2;
    font-family: var(--font-body); font-weight: 700;
    font-size: 0.88rem; color: var(--accent); white-space: nowrap;
}
.service-card-chevron { grid-column: 2; grid-row: 1 / span 2; }
.service-card-chevron {
    display: none; /* shown only when JS can toggle the card */
    flex: none; width: 10px; height: 10px; margin-left: 2px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s var(--ease);
}
.js .service-card-chevron { display: block; }
.package-card.expanded .service-card-chevron { transform: rotate(225deg) translateY(-2px); }

/* Details live in normal flow inside the card: collapsed via the 0fr row
   trick when JS is on; fully visible without JS */
.service-card-details { display: grid; grid-template-rows: 1fr; }
.js .service-card-details {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--ease);
}
.js .package-card.expanded .service-card-details { grid-template-rows: 1fr; }
.service-card-details-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 32px;
    align-items: start;
}
.service-card-details-inner .req-add { margin: 20px 24px 24px 0; }
.package-card.expanded .service-card-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
}
@media (max-width: 640px) {
    .service-card-details-inner { grid-template-columns: 1fr; }
    .service-card-details-inner .req-add { margin: 0 24px 24px; }
}
/* Compare mode — expanded cards share the top row with equal heights
   (the reorder puts expanded cards first). Exactly 2 open: 50/50.
   Exactly 3 open: 3-across on wide viewports, else the pair compares
   and the third card sits in a wide row beneath. 4+ full-width stacked */
@media (min-width: 641px) {
    .services-grid.compare,
    .services-grid.compare3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
    .services-grid.compare .package-card.expanded,
    .services-grid.compare3 .package-card.expanded { grid-column: auto; }
    /* Fill the stretched card: details area grows, body absorbs the
       difference, the CTA sits at a shared bottom line */
    .services-grid.compare .service-card-details,
    .services-grid.compare3 .service-card-details { flex: 1; }
    .services-grid.compare .service-card-details-inner,
    .services-grid.compare3 .service-card-details-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        height: 100%;
    }
    .services-grid.compare .service-card-details-inner .req-add,
    .services-grid.compare3 .service-card-details-inner .req-add {
        margin: 0 24px 24px;
        justify-self: start;
    }
}
/* 3 open at medium width: pair compares, third spans a full row beneath
   and keeps the two-column details layout */
@media (min-width: 641px) and (max-width: 999px) {
    .services-grid.compare3 .package-card.expanded.cmp-wide { grid-column: 1 / -1; }
    .services-grid.compare3 .cmp-wide .service-card-details-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: none;
        height: auto;
    }
    .services-grid.compare3 .cmp-wide .service-card-details-inner .req-add {
        margin: 20px 24px 24px 0;
        justify-self: auto;
    }
}
/* 3 open on a wide viewport: all three compare side-by-side */
@media (min-width: 1000px) {
    .services-grid.compare3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
    .service-card-details { grid-template-rows: 1fr !important; }
    .services-grid.compare, .services-grid.compare3 { grid-template-columns: 1fr; }
    .package-card { box-shadow: none !important; }
    .services-expand-all, .services-collapse-all, .service-card-chevron { display: none !important; }
}
@media (prefers-contrast: more) {
    .service-card-toggle { border: 1px solid var(--accent); }
    .package-card.expanded { border-color: var(--accent); }
}
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* Quick Contact Form */
.service-request {
    margin-top: 56px; padding: 32px;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.service-request-title {
    font-family: var(--font-display); color: var(--accent);
    margin: 0 0 8px; text-align: center; font-size: 1.5rem;
}
.service-request-lead {
    text-align: center; color: var(--text-muted); font-size: 0.95rem;
    max-width: 560px; margin: 0 auto 24px;
}
.service-request-notice {
    padding: 14px 18px; border-radius: var(--radius); margin: 0 0 20px;
    font-size: 0.95rem; text-align: center;
}
.service-request-notice.success { background: #e8f4ea; color: #24613a; border: 1px solid #b7dcc0; }
.service-request-notice.error { background: #fbeaea; color: #8a2f2f; border: 1px solid #e5b8b8; }
.req-add {
    display: block; margin: 0 24px 20px; padding: 10px; border: none; border-radius: var(--radius);
    background: var(--accent); color: #fff !important; font: inherit; font-size: 0.9rem;
    text-align: center; text-decoration: none; line-height: 24px; min-height: 44px;
    cursor: pointer; transition: background 0.2s;
}
.req-add:hover { background: var(--accent-dark); }
.req-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: 0 auto;
}
.req-grid label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 1rem; font-weight: 600; color: var(--text);
}
.req-note {
    color: var(--text-dim); font-size: 0.85rem; margin: -8px 0 0;
}
.req-afterword { margin: 12px 0 0; text-align: center; }
.req-full { grid-column: 1 / -1; }
.req-grid input[type="text"],
.req-grid input[type="tel"],
.req-grid input[type="email"],
.req-grid select,
.req-grid textarea {
    font: inherit; font-size: 1rem; font-weight: 400;
    padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: #fff; color: var(--text); width: 100%; box-sizing: border-box;
    min-height: 48px;
}
.req-grid textarea { min-height: 0; }
.req-grid input:focus, .req-grid select:focus, .req-grid textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(58, 74, 92, 0.15);
}
.req-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; }
.req-consent input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; }
.req-submit {
    margin-top: 20px; width: 100%; padding: 14px; border: none;
    border-radius: var(--radius); background: var(--accent); color: #fff;
    font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer;
    min-height: 48px; transition: background 0.2s;
}
.req-submit:hover { background: var(--accent-dark); }
.req-hp {
    position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.req-confirm {
    max-width: 520px; margin: 0 auto; padding: 24px; text-align: center;
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--bg);
}
.req-confirm[hidden] { display: none; }
.req-confirm-title {
    font-family: var(--font-display); font-size: 1.2rem; color: var(--accent);
    margin: 0 0 16px;
}
.req-confirm-line { font-size: 1.05rem; color: var(--text-muted); margin: 0 0 8px; }
.req-confirm-line strong { color: var(--text); font-size: 1.15rem; }
.req-confirm-hint { color: var(--text-dim); font-size: 0.9rem; margin: 16px 0 20px; }
.req-confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.req-confirm-back {
    padding: 12px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: #fff; color: var(--text-muted); font: inherit; font-size: 0.95rem;
    cursor: pointer; min-height: 48px;
}
.req-confirm-back:hover { border-color: var(--accent); color: var(--accent); }
.req-confirm-send {
    padding: 12px 28px; border: none; border-radius: var(--radius);
    background: var(--accent); color: #fff; font: inherit; font-size: 1.05rem;
    font-weight: 600; cursor: pointer; min-height: 48px;
}
.req-confirm-send:hover { background: var(--accent-dark); }
@media (max-width: 640px) {
    .service-request { padding: 20px 16px; }
    .req-grid { grid-template-columns: 1fr; }
}
.request-cta {
    margin-top: 48px; padding: 32px; text-align: center;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.request-cta-title {
    font-family: var(--font-display); color: var(--accent);
    margin: 0 0 8px; font-size: 1.4rem;
}
.request-cta p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 20px; }
.request-cta-btn {
    display: inline-block; padding: 14px 32px; border-radius: var(--radius);
    background: var(--accent); color: #fff !important; font-weight: 600;
    font-size: 1.05rem; text-decoration: none; min-height: 48px;
    transition: background 0.2s, transform 0.2s;
}
.request-cta-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
@media print {
    .service-request, .req-add, .request-cta, .condolence-bar { display: none !important; }
}

/* Featured obituary */
.featured-obituary { margin-bottom: 56px; }
.featured-card {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-hover);
}
.featured-thumb {
    display: block; overflow: hidden; background: var(--line-soft);
    aspect-ratio: 3/4; align-self: start; max-height: min(480px, 70vh);
}
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.featured-card:hover .featured-thumb img { transform: scale(1.04); }
.featured-thumb-placeholder { width: 100%; height: 100%; min-height: 320px; background: linear-gradient(135deg, var(--line-soft), var(--accent-soft)); }
.featured-info { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow {
    display: inline-block; font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
}
.featured-title { font-size: 1.8rem; margin: 0 0 14px; line-height: 1.2; }
.featured-title a { color: var(--text); }
.featured-title a:hover { color: var(--accent); }
.featured-excerpt { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 24px; }
@media (max-width: 768px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-thumb { max-height: 320px; }
    .featured-thumb img { max-height: 320px; }
}

/* Archive grid (larger cards) */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
}
.archive-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
    display: flex; flex-direction: column;
}
.archive-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-soft);
}
.archive-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--line-soft); }
.archive-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.archive-card:hover .archive-thumb img { transform: scale(1.05); }
.archive-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--line-soft), var(--accent-soft)); }
.archive-info { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.archive-title-card { font-size: 1.25rem; margin: 0 0 4px; line-height: 1.3; }
.archive-title-card a { color: var(--text); }
.archive-title-card a:hover { color: var(--accent); }
.archive-date { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 4px; font-style: italic; }
.archive-dates { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 10px; }
.archive-filter { margin-bottom: 32px; }
.archive-excerpt { font-size: 0.95rem; color: var(--text-muted); margin: 0 0 14px; line-height: 1.6; flex: 1; }
.archive-card .read-more { color: var(--accent); font-weight: 600; font-size: 0.9rem; }

/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; justify-content: center; }
.filter-label { font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.filter-list { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.filter-list li a {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
    transition: all 0.2s;
}
.filter-list li a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.filter-list li a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-list li a.active:hover { background: var(--accent-dark); color: #fff; }
.month-filter { margin-top: -12px; margin-bottom: 24px; }
.month-filter .filter-list li a { font-size: 0.8rem; padding: 4px 10px; }

/* Search hero */
.search-hero { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.search-form-wrap { max-width: 520px; margin: 20px auto 0; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; }
.search-form label { flex: 1 1 auto; min-width: 0; }
.search-form .search-field {
    width: 100%; padding: 12px 16px; font-size: 1rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form .search-field:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px rgba(58,74,92,0.12);
}
.search-form .search-submit {
    flex: 0 0 auto; padding: 12px 24px; border: none; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.search-form .search-submit:hover { background: var(--accent-dark); }
.search-widget .search-form { flex-direction: column; }
.search-results-count { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; }
.search-excerpt { font-size: 0.88rem; color: var(--text-muted); margin: 4px 16px 8px; line-height: 1.5; }
.no-results { text-align: center; padding: 40px 20px; }
.empty-hint { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 20px; }
.btn-primary {
    display: inline-block; padding: 12px 28px; border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; font-weight: 600;
    transition: background 0.2s; border: none; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

/* Services page styling */
.entry-content h2 {
    font-size: 1.6rem; margin: 40px 0 12px;
    padding-bottom: 8px; border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* Services page: style raw content as cards (fallback when template not applied) */
.services-page-body .entry-content strong {
    display: block;
    background: var(--accent);
    color: #fff;
    padding: 14px 20px;
    margin: 24px 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
}
.services-page-body .entry-content ul {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 16px 20px 20px 36px;
    margin: 0 0 24px;
    box-shadow: var(--shadow);
}
.services-page-body .entry-content ul li { margin: 0 0 6px; }
.services-page-body .entry-content p:has(strong) { margin: 0; }
.entry-content h3 { font-size: 1.25rem; margin: 24px 0 8px; color: var(--accent); }
.entry-content ul { padding-left: 20px; margin: 0 0 20px; }
.entry-content li { margin: 0 0 6px; color: var(--text-muted); }
.entry-content strong { color: var(--text); }
.entry-content p { color: var(--text-muted); }

/* Contact page */
.contact-info-block { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); margin: 24px 0; }
.contact-info-block h3 { margin: 0 0 8px; }

/* Hide the generic page title on contact page (contact-page has its own header) */
.contact-page-body .entry-header { display: none !important; }

/* Premium card hover */
.obituary-card, .slide-card { transition: transform 0.35s var(--ease), box-shadow 0.35s; }

/* Smooth image loading */
.obituary-thumb img, .slide-thumb img { transition: transform 0.5s var(--ease); }

/* Slider */
.obituary-slider-section { margin-bottom: 56px; }
.section-head { text-align: center; margin-bottom: 28px; }
.section-subtitle { color: var(--text-muted); font-size: 1.05rem; margin: 0; }
.section-title { font-size: 1.8rem; margin: 0 0 8px; }
.slider-wrap { position: relative; display: flex; align-items: center; gap: 12px; }
.obituary-slider {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; flex: 1; padding: 8px 4px 16px;
    scrollbar-width: none;
}
.obituary-slider::-webkit-scrollbar { display: none; }
.slide-card {
    flex: 0 0 260px; scroll-snap-align: start;
    background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); transition: transform 0.3s var(--ease), box-shadow 0.3s;
    display: flex; flex-direction: column;
}
.slide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.slide-thumb { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--line-soft); }
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.slide-card:hover .slide-thumb img { transform: scale(1.05); }
.slide-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--line-soft), var(--accent-soft)); }
.slide-title { font-size: 1rem; margin: 12px 14px 4px; line-height: 1.3; }
.slide-title a { color: var(--text); }
.slide-title a:hover { color: var(--accent); }
.slide-dates { font-size: 0.8rem; color: var(--text-dim); margin: 0 14px 8px; font-style: italic; }
.slide-card .read-more { margin: auto 14px 14px; font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.slider-btn {
    flex: 0 0 44px; height: 44px; border: none; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow);
    color: var(--accent); font-size: 1.6rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.slider-btn:hover { background: var(--accent); color: #fff; transform: scale(1.05); }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.slider-dots button {
    width: 8px; height: 8px; border-radius: 50%; border: none;
    background: var(--line); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s;
}
.slider-dots button.active { background: var(--accent); transform: scale(1.3); }

/* 404 */
.error-404 { text-align: center; padding: 60px 20px; }
.error-404 h1 { font-size: 4rem; color: var(--accent); }
.error-404 p { color: var(--text-muted); margin: 12px 0 24px; }

/* Zoom & small-viewport hardening — reflow down to ~270px viewports (500% zoom) */
body { overflow-x: hidden; overflow-x: clip; /* clip keeps position:sticky working */ }
iframe, select, input, textarea { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
.entry-content, .comment-text, .comment-author, .contact-card { overflow-wrap: anywhere; }
.entry-content table, .entry-content pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 480px) {
    #backToTop { display: none; }
    .post-nav { gap: 10px; }
    .obituary-thumb { aspect-ratio: 1/1; }
}

/* Responsive */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr !important; }
    .sidebar { position: static; }
    .post-nav { grid-template-columns: 1fr; }
    .featured-card { grid-template-columns: 1fr; }
    .featured-thumb img { max-height: 320px; }
}

@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .page-title { font-size: 1.8rem; }
    .section-title { font-size: 1.5rem; }
    .obituary-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .obituary-title { font-size: 0.95rem; margin: 10px 12px 4px; }
    .obituary-dates { font-size: 0.78rem; margin: 0 12px 4px; }
    .obituary-excerpt { font-size: 0.8rem; margin: 0 12px 8px; }
    .obituary-card .read-more { margin: 0 12px 12px; font-size: 0.78rem; }
    .slide-card { flex: 0 0 min(200px, 80vw); }
    .filter-bar { gap: 8px; }
    .filter-list li a { font-size: 0.78rem; padding: 4px 10px; }
    .footer-contact { grid-template-columns: 1fr; gap: 20px; }
    .single-obituary .entry-title { font-size: 1.6rem; }
    .entry-content { font-size: 1rem; }
    .memorial-actions { flex-direction: column; }
    .action-btn { text-align: center; }
    .archive-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .featured-info { padding: 24px 20px; }
    .featured-title { font-size: 1.4rem; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .obituary-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .obituary-title { font-size: 0.85rem; }
    .header-search-form { flex-direction: column; align-items: stretch; gap: 8px; }
    .header-search-form input[type="search"] { border-radius: var(--radius-sm); border: 1px solid var(--line); }
    .header-search-form button { border-radius: var(--radius-sm); justify-content: center; width: 100%; }
    .slider-btn { display: none; }
    .page-title { font-size: 1.5rem; }
    .obituary-dates { display: none; }
    .obituary-excerpt { display: none; }
}

@media (max-width: 400px) {
    .obituary-grid { grid-template-columns: 1fr; }
    .featured-info { padding: 20px 16px; }
    .comment-body { flex-wrap: wrap; }
}

/* Touch-friendly */
@media (hover: none) {
    .obituary-card:hover { transform: none; }
    .obituary-card:hover .obituary-thumb img { transform: none; }
    .slide-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Skip link */
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--accent); color: #fff; padding: 12px 20px;
    z-index: 9999; font-weight: 600; text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Print */
@page { margin: 1.5cm; }
@media print {
    .site-header, .site-footer, .sidebar, .slider-wrap, .slider-dots,
    .pagination, .post-nav, .comment-form, .memorial-actions,
    .post-meta, .post-meta-bottom, .comment-list, .comments-area,
    .filter-bar, .home-search, .featured-obituary, .obituary-slider-section,
    #backToTop, .nav-toggle, .condolence-bar { display: none !important; }
    .container { max-width: 100%; padding: 0; }
    .single-obituary { max-width: 100%; }
    .single-obituary .entry-content { font-size: 11pt; line-height: 1.6; color: #000; }
    .single-obituary .entry-title { font-size: 18pt; margin-bottom: 12pt; }
    .obituary-photo { text-align: center; margin-bottom: 16pt; }
    .obituary-photo img { max-width: 200px; margin: 0 auto; }
    body { background: #fff; color: #000; font-family: Georgia, serif; }
    a { color: #000; text-decoration: none; }
    .entry-content a { border-bottom: none; }
}


/* Condolence reactions */
.condolence-bar { margin: 32px 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.condolence-lead { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 16px; color: var(--text); }
.condolence-form { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.condolence-select { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: 1rem; min-width: min(220px, 100%); }
.condolence-submit { padding: 10px 20px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; transition: background 0.2s ease; }
.condolence-submit:hover { background: var(--accent-dark); }
.condolence-submit:disabled { opacity: 0.6; cursor: default; }
.condolence-summary { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 16px; }
.condolence-summary-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 0.95rem; white-space: nowrap; }
.condolence-summary-icon { font-size: 1.2rem; line-height: 1; }
.condolence-summary-count { font-weight: 600; color: var(--text-muted); }

/* Condolence counts on cards */
.slide-condolences, .obituary-condolences { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 18px 10px; font-size: 0.8rem; }
.slide-condolence, .card-condolence {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 3px 10px; background: var(--accent-soft); border-radius: 999px;
    color: var(--text-muted); font-weight: 500;
}

.featured-condolences { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.featured-condolence {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 4px 12px; background: var(--accent-soft); border-radius: 999px;
    color: var(--text-muted); font-size: 0.88rem; font-weight: 500;
}

/* ============ Modern polish ============ */

/* Prevent OS dark-mode from restyling form controls */
html { color-scheme: light; }

::selection { background: var(--accent); color: #fff; }

/* Centered page headers (front page + archives) */
.home-search { text-align: center; margin-bottom: 36px; }
.archive-header { text-align: center; margin-bottom: 32px; }
.archive-description { color: var(--text-muted); max-width: 640px; margin: 8px auto 0; }

/* Featured media + captions (content.php / image.php) */
.featured-media { margin: 0 0 28px; }
.featured-media img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.featured-media video { width: 100%; border-radius: var(--radius); }
.media-caption-container { text-align: center; }
.media-caption {
    display: inline-block; margin-top: 10px;
    font-size: 0.88rem; color: var(--text-dim); font-style: italic;
}
.sticky-post {
    display: inline-block; margin-bottom: 10px; padding: 4px 12px;
    background: var(--accent); color: #fff; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}

/* Pagination — paginate_links emits spans as well as links */
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 16px; margin: 0 4px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--text-muted); background: var(--surface);
    transition: all 0.2s;
}
.pagination a.page-numbers:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.pagination .page-numbers.current {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.pagination .page-numbers.dots {
    border-color: transparent; background: transparent; color: var(--text-dim);
}
.post-nav-links { margin: 24px 0; font-size: 0.95rem; }
.post-nav-links .label { color: var(--text-dim); margin-right: 6px; }
.post-nav-links a {
    display: inline-block; padding: 4px 12px; margin: 0 2px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.post-nav-links a:hover { border-color: var(--accent); color: var(--accent); }

/* Comments extras */
.no-comments { font-style: italic; color: var(--text-dim); }
.comment-awaiting-moderation {
    font-style: italic; color: var(--text-dim); font-size: 0.85rem; margin: 0 0 6px;
}

/* Contact map */
.contact-map {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.contact-map iframe { display: block; }

/* Editorial content extras */
.entry-content::after { content: ''; display: table; clear: both; }
.entry-content blockquote {
    margin: 24px 0; padding: 4px 0 4px 22px;
    border-left: 3px solid var(--accent);
    font-family: var(--font-display); font-style: italic;
    font-size: 1.15rem; line-height: 1.6; color: var(--text-muted);
}
.entry-content blockquote p { margin: 0 0 10px; color: inherit; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { font-size: 0.85rem; font-style: normal; color: var(--text-dim); }
.entry-content hr { border: none; border-top: 1px solid var(--line); margin: 32px auto; width: 60%; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.entry-content th { background: var(--accent-soft); font-family: var(--font-body); }
.entry-content code { background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.entry-content pre code { background: none; padding: 0; }
.entry-content figure { margin: 20px 0; }
.entry-content figcaption, .wp-caption-text {
    font-size: 0.85rem; color: var(--text-dim); font-style: italic;
    text-align: center; margin-top: 8px;
}
.alignleft { float: left; margin: 6px 24px 18px 0; max-width: 50%; }
.alignright { float: right; margin: 6px 0 18px 24px; max-width: 50%; }
.aligncenter { display: block; margin: 20px auto; }
.alignnone { margin: 20px 0; }
@media (max-width: 640px) {
    .alignleft, .alignright { float: none; max-width: 100%; margin: 16px 0; display: block; }
}

/* ============ Mobile & high-zoom hardening ============ */
/* Px breakpoints collapse correctly under browser zoom (200% on a 1920px
   desktop ≈ 960px effective → wraps; 400% ≈ 480px → mobile menu). These rules
   guarantee text/tap sizes stay senior-readable once there. */

.phone-link { overflow-wrap: break-word; }

@media (max-width: 768px) {
    /* Open menu reads as one clear panel; links get larger text + tap area */
    .site-header.nav-open .main-nav {
        flex-basis: 100%;
        background: rgba(18, 25, 32, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--radius);
        padding: 10px;
        margin-top: 4px;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    /* Links sit on the dark panel — light text; the light-bar link color
       is nearly invisible here and only the current page read before */
    .site-header.nav-open .nav-list a { color: rgba(255, 255, 255, 0.92); }
    .site-header.nav-open .nav-list a:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
    .site-header.nav-open .nav-list li.current-menu-item > a,
    .site-header.nav-open .nav-list li.current_page_item > a {
        background: #fff;
        color: var(--accent-dark);
    }
    .nav-list a { font-size: 1rem; padding: 12px 20px; }
    .header-search-form input[type="search"] { font-size: 1.05rem; }
}

@media (max-width: 480px) {
    /* Extreme zoom / small phones — biggest comfortable targets */
    .nav-list a { font-size: 1.05rem; }
    .site-title { font-size: 1.02rem; }
    .header-search-form input[type="search"],
    .header-search-form button { min-height: 52px; }
}

/* Low-vision: OS contrast requests get opaque surfaces + strong borders */
@media (prefers-contrast: more) {
    .nav-list a { border: 1px solid var(--accent); }
    .nav-list li.current-menu-item > a,
    .nav-list li.current_page_item > a { background: var(--accent); color: #fff; }
    .nav-toggle { background: #fff; border-color: var(--accent-dark); }
    .search-toggle { border-color: var(--accent-dark); }
    .header-search-form input[type="search"] { background: #fff; border-color: #000; }
    .header-search-form button { background: #000; color: #fff; }
}

/* Windows High Contrast / forced-colors — let the system map real borders */
@media (forced-colors: active) {
    .nav-list a, .nav-toggle, .search-toggle,
    .header-search-form input[type="search"],
    .header-search-form button { border: 1px solid ButtonText; }
    .hero-banner::before { background: none; }
}

/* ============ Feature additions (v3.7.7) ============ */

/* Phone link prefix ("Call or Text: ") */
.phone-prefix {
    font-family: var(--font-body);
    font-size: 0.62em;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
    margin-right: 6px;
}

/* Dropdown sub-menus — desktop hover/focus */
.nav-list li { position: relative; }
.menu-item-has-children > a::after {
    content: '\25BE';
    font-size: 0.72em;
    margin-left: 6px;
    opacity: 0.7;
}
.nav-list .sub-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    list-style: none;
    background: rgba(18, 25, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
    z-index: 50;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-list .sub-menu li a {
    display: block;
    padding: 11px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    white-space: normal;
}
.nav-list .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
@media (prefers-contrast: more) {
    .nav-list .sub-menu { background: #000; border-color: #fff; }
    .nav-list .sub-menu li a { border-bottom: 1px solid #555; }
}
@media (forced-colors: active) {
    .nav-list .sub-menu { border: 1px solid ButtonText; }
}

/* Open mobile menu: sub-menus become an indented static list */
@media (max-width: 768px) {
    .nav-list .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 16px;
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        margin-left: 20px;
        width: auto;
    }
    .nav-list .sub-menu li a { text-align: center; }
}

/* Footer sitemap menu */
.footer-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 0;
}
.footer-menu-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
}
.footer-menu-list li a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
}
.footer-menu-list li a:hover { color: #fff; text-decoration: underline; }

/* Get-notified link under the front-page heading */
.notify-line { margin: 10px 0 0; }
.notify-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Mobile quick-action bar — persistent Call + Obituaries for phone users */
.mobile-cta { display: none; }
@media (max-width: 768px) {
    .mobile-cta {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 900;
        background: var(--accent);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-cta a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        color: #fff;
        font-weight: 600;
    }
    .mobile-cta-call { flex: 2; }
    .mobile-cta-label { font-size: 0.72rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; }
    .mobile-cta-number { font-family: var(--font-display); font-size: 1.15rem; }
    .mobile-cta-obits {
        flex: 1;
        background: var(--accent-dark);
        border-left: 1px solid rgba(255, 255, 255, 0.18);
        font-size: 0.95rem;
    }
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    #backToTop { bottom: 72px; }
}
@media print {
    .mobile-cta { display: none !important; }
}
@media (forced-colors: active) {
    .mobile-cta a { border: 1px solid ButtonText; }
}

/* ============ Slim sticky bar + hero banner ============ */
/* The bar is constant — it never morphs, shrinks, or hides. Scrolling only
   deepens its hairline shadow; the photo hero scrolls away like content. */

@media (prefers-contrast: more) {
    .site-header { background: #fff; border-bottom-color: #000; }
    .nav-list a { border: 1px solid var(--accent); }
}
@media (forced-colors: active) {
    .site-header { border-bottom: 1px solid ButtonText; }
}

@media (max-width: 768px) {
    /* Mobile bar: brand left, hamburger right — calling lives in the
       mobile-cta bar, so the phone link yields the space */
    .site-header .header-phone { display: none; }
    .site-header .main-nav { order: 10; }
}

/* Extreme zoom / very short viewports — a sticky bar plus the fixed call
   bar would sandwich most of a tiny screen. Below ~450px of viewport
   height everything scrolls with the page: the header unpins (kept
   relative so the abs-positioned search panel still anchors to it), the
   call bar becomes normal content at the foot of the page, and the phone
   link moves back into the header so calling stays one tap away. */
@media (max-height: 450px) {
    .site-header, .admin-bar .site-header { position: relative; top: 0; }
    .mobile-cta { position: static; }
    body { padding-bottom: 0; }
    html { scroll-padding-top: 0; }
    #backToTop { bottom: 12px; right: 12px; }
}
@media (max-width: 768px) and (max-height: 450px) {
    .site-header .header-phone { display: flex; }
    .site-header .phone-prefix { display: none; }
    .site-header .phone-link { font-size: 0.82rem; }
}

/* ============ Premium finish ============ */
/* Scroll reveal — activates the .reveal/.is-visible pair wired in JS.
   :not() scoping keeps hover transforms intact after reveal. */
.reveal {
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
/* Hidden only when JS is running — no-JS degrades to fully visible */
.js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
}
/* Staggered cascade inside grids (delay lives on the base rule so it
   applies during the reveal transition) */
.obituary-grid .reveal:nth-child(3n+2), .archive-grid .reveal:nth-child(3n+2), .services-grid .reveal:nth-child(3n+2) { transition-delay: 0.07s; }
.obituary-grid .reveal:nth-child(3n), .archive-grid .reveal:nth-child(3n), .services-grid .reveal:nth-child(3n) { transition-delay: 0.14s; }
/* Print never scrolls — everything must render */
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* Anchor jumps clear the sticky glass bar */
html { scroll-padding-top: 96px; }
@media (max-width: 768px) { html { scroll-padding-top: 72px; } }

/* Typography rhythm */
h1, h2, h3, .section-title, .entry-title { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Section titles get a quiet accent flourish */
.section-title { position: relative; padding-bottom: 14px; }
.section-title::after {
    content: '';
    position: absolute; left: 50%; bottom: 0;
    width: 44px; height: 2px; border-radius: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Dates read as refined eyebrow labels, not body italic */
.obituary-dates, .slide-dates {
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-size: 0.68rem;
    color: var(--text-dim);
}
.slide-dates { margin-bottom: 4px; }

/* Animated underline — faint rule at rest, accent sweeps in on hover */
.entry-content a {
    border-bottom: none;
    padding-bottom: 1px;
    background-image:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(rgba(58, 74, 92, 0.28), rgba(58, 74, 92, 0.28));
    background-size: 0 1px, 100% 1px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.35s var(--ease);
}
.entry-content a:hover { background-size: 100% 1px, 100% 1px; }
@media print { .entry-content a { background: none; } }

/* Buttons — depth at rest, lift on hover, press on active */
.btn-primary {
    box-shadow: 0 2px 8px rgba(44, 58, 74, 0.22);
    transition: all 0.25s var(--ease);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(44, 58, 74, 0.3);
}
.btn-primary:active, .condolence-submit:active,
.comment-form input[type="submit"]:active,
.request-cta-btn:active, .slider-btn:active { transform: scale(0.97); }

/* Unified form controls — every input site-wide shares the design */
input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="number"], input[type="search"],
textarea, select {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(58, 74, 92, 0.12);
    outline: none;
}
/* Keyboard focus keeps a real outline (accent ring alone is subtle) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Editorial blockquote — hanging display-serif quote mark */
.entry-content blockquote { position: relative; }
.entry-content blockquote::before {
    content: '\201C';
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.35;
    margin-bottom: 2px;
}

/* Footer — hairline accent separating it from the page */
.site-footer { position: relative; }
.site-footer::before {
    content: '';
    position: absolute; top: -1px; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

/* Single memorial portrait gets a touch more presence */
.single-obituary .obituary-photo { box-shadow: var(--shadow-hover); }

/* Service details (v3.7.8) */
.service-details {
    margin: 0 0 28px;
    padding: 20px 24px;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}
.service-details-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--accent-dark);
}
.service-when { font-weight: 600; font-size: 1.05rem; margin: 0 0 4px; }
.service-where { color: var(--text-muted); margin: 0 0 4px; }
.service-note { color: var(--text-dim); font-size: 0.92rem; font-style: italic; margin: 0; }

.card-service {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 18px 8px;
}
.card-service-label { color: var(--text-dim); font-weight: 500; }
.slide-card .card-service { margin: 0 14px 8px; }
.archive-info .card-service { margin: 4px 0 10px; }
.featured-card .card-service { margin: 0 0 14px; font-size: 0.95rem; }
@media print {
    .service-details { border: 1px solid #000; border-left-width: 4px; background: none; }
}

/* Reviews badge under the front-page heading */
.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 14px 0 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.reviews-badge a { color: var(--accent); text-decoration: none; font-weight: 600; }
.reviews-badge a:hover { text-decoration: underline; }