/* 3) Right column: your maple-module-section (obits) takes remaining ~25% */
.maple-fhm-module-section {
    flex: 0 0 35%;
    box-sizing: border-box;
    min-width: 200px; /* prevents it from getting too narrow */
}

/* Outer link resets */
.mini-obit-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

/* Grid container: 2 cols (120px image + flexible text) */
.mini-obit-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-bottom: 4px;
    text-decoration: none;
    color: inherit;
}

/* Hover state */
.mini-obit-grid:hover {
    background-color: #efefef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
}

/* Donation Pledge mini view styles (single-column) */
.mini-pledge-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

.mini-pledge-card {
    display: block; /* single column */
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-bottom: 4px;
    background: #fff;
}

.mini-pledge-card:hover {
    background-color: #efefef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mini-pledge-text {
    display: block;
}

.mini-pledge-text h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.2;
}

.mini-pledge-text p {
    margin: 0.25rem 0;
}

/* Ensure the image fills its grid cell */
.mini-obit-photo {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 ratio */
    overflow: hidden;
    background: #f0f0f0;
}

.mini-obit-photo img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* facebook logo styling */
.homepage-content-inner.maple-fb-container {
    padding: 0;
    text-decoration: none;
}

.maple-fhm-fb-logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.maple-fhm-fb-logo-container a {
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */
    gap: 0.5rem;              /* space between icon and text */
    text-decoration: none;
    color: inherit;
}

.maple-fhm-fb-logo-container img {
    display: inline-flex;
    width: 100px;
    height: 100px;
}

.maple-fhm-fb-logo-container div {
    display: inline-flex;
    margin-left: 1px;
    color: #333;
}


/* Stack text items vertically and stretch to match photo height */
.mini-obit-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* Use space-between if you want even spacing */
    height: 100%;                  /* Stretch to match .mini-obit-grid’s row height */
}

/* Title styling */
.mini-obit-text h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.2;
}

/* Date fields styling */
.mini-obit-text p {
    margin: 0.25rem 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.4;
}

/* 1. Import elegant fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap');

/* 2. CSS variables for easy theming */
:root {
    --color-bg: #faf9f6;
    --color-panel: #ffffff;
    --color-text: #333333;
    --color-muted: #666666;
    --color-accent: #8c7259; /* gentle taupe accent */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --max-width: 1000px;
    --frame-color: #8c6751;    /* rich wood */
    --mat-color:   #f7f3ee;    /* creamy off-white */
    --shadow-color: rgba(0,0,0,0.3);
    --frame-width: 12px;
    --mat-width:   16px;
}

/* 3. Global reset & base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* 4. Layout containers */
main.obituary-main {
}

article.obituary-entry {
    background: var(--color-panel);
    margin: var(--space-md) auto;
    padding: var(--space-sm);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    max-width: var(--max-width);
}

/* 5. Typography */


/* 6. Obituary meta & text */
.obituary-body {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
}

.obituary-text {
    flex: 0 1 67%;
    text-align: justify;
    margin: 5px;
}

.obituary-info {
    display: flex;
    flex: 0 1 33%;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-sm);
    padding-top: var(--space-md);
}

.obituary-info-item {
    flex: 0 0 auto;
}

.obituary-info-item.border {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: var(--space-sm);
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.obituary-info-item h3 {
    margin: 0;
    font-family: 'Times New Roman', serif;
    font-size: 1.2rem;
}

.obituary-info-item p {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-style: italic;
}

/* 7. Photo gallery */
/* ——— Gallery Thumbnails ——— */
.gallery-thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.gallery-thumbnails::-webkit-scrollbar {
    display: none;
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .2s ease;
}

.gallery-thumb:hover {
    transform: scale(1.05);
}

/* ——— Lightbox Overlay ——— */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;               /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lightbox-overlay.open {
    display: flex;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80%;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* ——— Close & Nav Buttons ——— */
.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0 12px;
    line-height: 1;
    user-select: none;
}

.lightbox-close {
    top: 24px;
    right: 24px;
}

.lightbox-nav.prev {
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-nav.next {
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* 8. Utility classes */
.text-center {
    text-align: center;
}

.bold {
    font-weight: 600;
}

/* 1. Theme variables */
:root {

}

/* 2. Base reset */
.frame,
.frame * {
    box-sizing: border-box;
}

/* 3. Frame wrapper */
.frame {
    display: inline-block;
    padding: var(--frame-width);
    background: var(--frame-color);
    box-shadow:
        /* inner bevel */
            inset 0 0 0 2px rgba(255,255,255,0.2),
                /* outer drop shadow */
            0 8px 16px var(--shadow-color);
}

/* 4. Mat wrapper */
.mat {
    background: var(--mat-color);
    padding: var(--mat-width);
}

/* 5. Image */
.mat img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 1) Container & Background */
.obituary-header {
    position: relative;
    width: 100%;
    height: 500px;
}

/* 2) Frosted-glass black overlay */
.obituary-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    padding: 30px 60px;                            /* vertical/horizontal padding */
    box-sizing: border-box;
}

/* 3) Inner flex wrapper (photo + text) */


/* 4) Framed photo on left */
.obituary-bar .photo {
    flex-shrink: 0;
    margin-right: 40px;
}
.obituary-bar .photo img {
    display: block;
    width: 180px;                                   /* frame width */
    height: auto;
    border: 6px solid #fff;                        /* white frame */
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 4. Text block, centered vertically to the right of photo */
.obituary-bar .text {
    color: #fff;
    flex: 1;
    position: relative; /* allow absolute positioning of inner elements like the back link */
}

/* Position the back-to-obituary link at the bottom-right of its parent text container
   and ensure it uses the same color as the text block */
.obituary-header .back-to-obituary-link,
.obituary-header .back-to-obituary-link a {
    position: absolute;
    left: 0.3rem;
    bottom: 0.3rem;
    padding: 0.3rem 0.6rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    z-index: 10;
}
.obituary-header .back-to-obituary-link:hover,
.obituary-header .back-to-obituary-link a:hover {
    text-decoration: underline;
    background: rgba(0, 0, 0, 0.8);
}
.obituary-header .edit-obituary-button {
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    padding: 0.3rem 0.6rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    font-size: 0.9rem;
    z-index: 10;
}
.obituary-header .edit-obituary-button:hover {
    text-decoration: underline;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}
.obituary-bar .text p {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.9;
}
.obituary-bar .text h1 {
    margin: 8px 0 0;
    font-family: 'Times New Roman', serif;
    font-size: 2.5rem;
    line-height: 1.2;
}

.maple-text-transform-upper {
    text-transform: uppercase;
}

/* frame + mat + padding ensures the photo never overflows */
.obituary-image .frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;                 /* inner “breathing” room */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
}
.obituary-image .mat {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mat-width);
    background: var(--mat-color);
}
.obituary-image .mat img {
    max-height: 100%;             /* never taller than header area */
    width: auto;
    display: block;
}

/* ————————————————————————————————————————
   5. Text bar: slim frosted glass just behind text
———————————————————————————————————————— */
.obituary-header-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* vertical centering of bar */
    text-align: center;
    background: rgba(0,0,0,0.4);   /* translucent black */
    backdrop-filter: blur(8px);
    padding: 1rem 2rem;            /* sized to content + gutter */
    border-radius: 4px;
}

/* typography */
.obituary-subtitle {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}
.obituary-main-title {
    font-family: 'Times New Roman', serif;
    font-size: 2.5rem;
    line-height: 1.2;
    text-transform: uppercase;
}

/* --- Charity Contact Page Styles --- */
/* The main container for the charity content.
   We use flexbox to easily center the content vertically and horizontally. */
.charity-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-top-menu-button-border);
    background-color: #f9f9f9;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns items to the top */
    min-height: 100vh;
    padding: 2rem 1rem; /* 2rem top/bottom, 1rem left/right */
}

/* The main article card holding all the charity info.
   This creates the white "card" effect with a subtle shadow. */
.charity-entry {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 800px;
    overflow: hidden; /* Ensures content respects the rounded corners */
    border: 1px solid #e9e9e9;
}


/* --- Header Section --- */
/* Styles the top part of the card containing the charity's name. */
.charity-header {
    color: var(--color-top-menu-button-border);
    border-bottom: 1px solid var(--color-top-menu-button-border);
    padding: 2rem 2.5rem;
    text-align: center;
}

.charity-header h1 {
    margin: 0;
    font-size: 1.5rem; /* Large, prominent title */
    font-weight: 400;
    letter-spacing: -1px;
}


/* --- Body / Content Section --- */
/* The main content area. We use a CSS Grid for a flexible, responsive layout. */
.charity-body {
    padding: 2.5rem;
    display: grid;
    gap: 2.5rem; /* Space between grid items */
}

/* On larger screens, we can create a two-column layout for some sections. */
.charity-electronic-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 2.5rem; /* Space between the columns */
}


/* --- Information Blocks & Typography --- */
/* Styles for the individual sections like Address, Phone, etc. */
.charity-address,
.charity-phone-info,
.charity-email-info,
.charity-website-info,
.charity-donation-info {
    position: relative;
}

/* Section headings (h3) like "Address", "Phone", etc. */
.charity-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-top-menu-button-border);
    margin-top: 0;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #f0f0f0; /* Subtle underline */
    padding-bottom: 0.5rem;
}

/* Standard paragraph text. */
.charity-body p {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 1rem;
}

/* Styling for all links. */
.charity-body a {
    color: var(--color-top-menu-button-border); /* Matches the header color */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.charity-body a:hover,
.charity-body a:focus {
    color: #357ABD; /* A darker shade on hover */
    text-decoration: underline;
}

/* Specific styling for the main "Donate" link to make it stand out. */
.charity-donation-info a {
    display: inline-block;
    background-color: var(--color-top-menu-button-border); /* A friendly green */
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

.charity-donation-info a:hover,
.charity-donation-info a:focus {
    background-color: #45B36B; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    color: #ffffff; /* Keep text color white */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* --- Charity Archive Page Styles --- */

/* Main layout container using Flexbox for the content and sidebar */
.charity-archive-container {
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    gap: 2rem;
}

.charity-archive-main {
    flex-grow: 1; /* Main content area takes up available space */
    width: 100%;
}

/* Header for the archive page */
.archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.archive-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #2c3e50; /* A deep, professional blue */
}

.archive-header p {
    font-size: 1.1rem;
    color: #7f8c8d; /* A softer grey for the subtitle */
}

/* Heading for each letter group (e.g., "A", "B") */
.letter-heading {
    font-size: 2rem;
    color: #3498db; /* A bright, friendly blue */
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ecf0f1;
}

/* Responsive Grid for the charity cards */
.charity-grid {
    display: grid;
    /* This creates a responsive grid that adjusts columns automatically */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Styling for each charity card */
.charity-card-link {
    text-decoration: none; /* Remove underline from the link wrapping the card */
    color: inherit;
    display: block; /* Make the link fill the grid cell */
}

.charity-card {
    background-color: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 8px; /* Rounded edges */
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Simple, flat shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%; /* Ensure cards in the same row have the same height */
}

.charity-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.charity-card-title {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #34495e;
}

.charity-card-location {
    font-size: 0.9rem;
    color: #95a5a6;
    margin: 0;
}

/* Right Sidebar: Quick Jump Navigation */
.charity-archive-sidebar {
    width: 40px; /* Fixed width for the alphabet list */
    flex-shrink: 0; /* Prevents the sidebar from shrinking */
}

.quick-jump-nav {
    position: sticky; /* Makes the nav stick as you scroll */
    top: 100px; /* Adjust this value based on your header's height */
}

.quick-jump-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.quick-jump-nav li a {
    display: block;
    padding: 4px 0;
    font-weight: bold;
    color: var(--color-top-menu-button-border);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.quick-jump-nav li a:hover {
    color: #2980b9;
    transform: scale(1.2);
}

/* --- Obituary Archive Page Styles --- */

.obituary-archive-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header style from the charity archive for consistency */
.archive-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.archive-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-family: 'Georgia', serif;
}

.archive-header p {
    font-size: 1.1rem;
    color: #7f8c8d;
}

/* Responsive Grid for the obituary cards */
.obituary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* Styling for each obituary card */
.obituary-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9e9e9;
}

.obituary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* make the photo container positioning context */
.obituary-card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* keep existing img/placeholder rules */
.obituary-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-style: italic;
}

/* the overlay bar at the bottom of the photo */
.obituary-card-overlay {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.75rem 1rem;
    box-sizing: border-box;
}

/* white text for name + years inside overlay */
.obituary-card-overlay .obituary-card-name,
.obituary-card-overlay .obituary-card-years {
    margin: 0;
    color: #ffffff;
}

/* tweak sizes/margins inside overlay */
.obituary-card-overlay .obituary-card-name {
    font-size: 1.2rem;
    line-height: 1.2;
}
.obituary-card-overlay .obituary-card-years {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

/* excerpt stays in white content area below */
.obituary-card-content {
    background: #ffffff;
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
}
.obituary-card-excerpt {
    margin: 0;
    color: #333333;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-style: italic;
}

/* Photo Gallery styles */
.photo-gallery-title {
    display: block;
    width: 100%;
    background: black; /* solid black background */
    color: white;      /* white text */
    padding: 12px 16px; /* some breathing room */
    margin: 0 0 12px;   /* space below the title */
}

.photo-gallery-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-start;
    justify-content:center;
}

.obituary-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.obituary-card-name {
    font-size: 1.4rem;
    color: #34495e;
    margin: 0 0 0.25rem 0;
}

.obituary-card-years {
    font-size: 1rem;
    color: #7f8c8d;
    margin: 0 0 1rem 0;
}

.obituary-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    flex-grow: 1;
}

/* Loading Indicator Styles */
.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    width: 100%;
    color: #7f8c8d;
}

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Donation Pledge Form */
/* Modern Donation Pledge Form */
.maple-form {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem;
}

.maple-form .form-field {
    margin-bottom: 1.25rem;
}

.maple-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #333;
}

.maple-form .required {
    color: #d63638;
}

.maple-form input[type="text"],
.maple-form input[type="email"],
.maple-form input[type="tel"],
.maple-form textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.maple-form input:focus,
.maple-form textarea:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.15);
    outline: none;
}

.maple-form textarea {
    resize: vertical;
}

.maple-form .helper-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: #666;
}

.maple-form fieldset.form-section {
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.maple-form fieldset.form-section legend {
    font-weight: 600;
    padding: 0 0.5rem;
    color: #444;
}

.maple-form .checkbox-field input {
    margin-right: 0.5rem;
}

.maple-form .button-primary {
    background-color: #0073aa;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background-color 0.2s ease;
}

.maple-form .button-primary:hover {
    background-color: #005f8d;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .maple-form {
        padding: 1rem;
    }
}

/* Compact form spacing adjustments */
.maple-form .form-field {
    margin-bottom: 0.85rem; /* was 1.25rem */
}

.maple-form label {
    margin-bottom: 0.25rem; /* was 0.4rem */
}

.maple-form input[type="text"],
.maple-form input[type="email"],
.maple-form input[type="tel"],
.maple-form textarea {
    padding: 0.55rem 0.65rem; /* slightly reduced vertical padding */
}

.maple-form .helper-text {
    margin-top: 0.25rem; /* was 0.35rem */
}

.maple-form fieldset.form-section {
    padding: 0.85rem; /* slightly reduced */
    margin-bottom: 1.2rem; /* was 1.5rem */
}


/* --- Responsive Adjustments --- */

/* For screens smaller than 992px (tablets) */
@media (max-width: 992px) {
    /* Hide the quick-jump sidebar as there isn't enough space */
    .charity-archive-sidebar {
        display: none;
    }

    .charity-archive-container {
        padding: 1.5rem;
    }
}

/* --- Responsive Design --- */
/* This media query adjusts the layout for screens smaller than 768px (like tablets and phones). */
@media (max-width: 768px) {

    .maple-fhm-module-section {
        flex: 1 100%;
        padding: 5px;
    }

    .charity-main {
        padding: 1rem; /* Reduce padding on smaller screens */
    }

    .charity-header {
        padding: 1.5rem;
    }

    .charity-header h1 {
        font-size: 1.2rem; /* Slightly smaller title */
    }

    .charity-body,
    .charity-electronic-info {
        padding: 1.5rem;
        gap: 2rem;
        display: block; /* Stack all sections vertically */
    }

    /* Add space between the stacked items that were previously in a grid. */
    .charity-email-info,
    .charity-website-info,
    .charity-donation-info {
        margin-top: 2rem;
    }

    .archive-header h1 {
        font-size: 2rem;
    }

    .charity-grid {
        /* Ensure single column on small screens */
        grid-template-columns: 1fr;
    }

    .obituary-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 1.5rem;
    }



}

/* Donation Pledge page headings */
.dp-title,
.dp-subtitle {
    text-align: center;
}

/* Ensure charity suggestion lists are left-aligned, not fully-justified */
.charity-suggestions { text-align: left; }
.charity-suggestions ul { text-align: left; }
.charity-suggestions li { text-align: left; }


/* Charity mini view styles (single-column) */
.mini-charity-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

.mini-charity-card {
    display: block; /* single column */
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s, box-shadow 0.2s;
    margin-bottom: 4px;
    background: #fff;
}

.mini-charity-card:hover {
    background-color: #efefef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mini-charity-text {
    display: block;
}

.mini-charity-text h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.2;
}

.mini-charity-text p {
    margin: 0.25rem 0;
}


/* Responsive adjustments for obituary layouts on small screens */
@media (max-width: 768px) {
  /* Stack obituary text and info vertically */
  .obituary-body {
    flex-direction: column;
    gap: 8px; /* reduce vertical space between stacked sections */
  }
  .obituary-text,
  .obituary-info {
    flex: 1 1 auto;
    margin: 0; /* remove extra margins to tighten spacing */
  }
  .obituary-info {
    padding-top: 6px; /* override larger desktop padding on mobile */
  }

  /* Header: stack photo and text */
  .obituary-header {
    height: auto; /* let content define height on small screens */
  }
  .obituary-bar {
    position: relative;          /* no absolute centering */
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    padding: 20px;               /* tighter padding */
    flex-direction: column;      /* stack photo and text */
    text-align: center;          /* center text when stacked */
  }
  .obituary-bar .photo {
    margin: 0 0 16px 0;          /* space below the photo */
    display: flex;
    justify-content: center;
  }
  .obituary-bar .photo img {
    width: 160px;                /* slightly smaller on phones */
  }
  .obituary-bar .text {
    width: 100%;
  }
  .obituary-bar .text h1 {
    font-size: 2rem;             /* scale down large title */
  }
}