/* Global reset and variables */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#2E2A2A;background:#FFFFFF}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:#4E2A84;text-decoration:none}
a:hover,a:focus{color:#3B2067;text-decoration:underline}
:root{
  --brand:#4E2A84; --brand-700:#3B2067; --accent:#C99700;
  --text:#2E2A2A; --muted:#6B6B6B; --bg:#FFFFFF; --surface:#F7F6FB;
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --radius:10px; --maxw:1080px;
}

/* Typography */
h1,h2,h3{font-family:inherit;color:var(--brand);line-height:1.2;margin:0 0 var(--space-3)}
h1{font-size:clamp(1.75rem,3.2vw,2.25rem)}
h2{font-size:clamp(1.25rem,2.4vw,1.5rem)}
p{margin:0 0 var(--space-3);color:var(--text)}
.small{font-size:.875rem;color:var(--muted)}

/* Layout */
.wrap{max-width:var(--maxw);margin-inline:auto;padding:0 var(--space-3)}
.section{padding:var(--space-5) 0}
.surface{background:var(--surface)}

/* Header & Navigation */
.site-header{border-bottom:1px solid #E9E6F2;background:#fff;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:48px;height:48px;border-radius:50%}
.brand-name{font-family:inherit;font-weight:700;color:var(--brand);font-size:1.25rem}

.nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.nav a{padding:.5rem .75rem;border-radius:.5rem;color:var(--text);font-weight:600}
.nav a[aria-current="page"], .nav a:hover{background:var(--surface);color:var(--brand)}
.mobile-nav-holder{display:none}

.nav-toggle{display:none;background:#fff;border:1px solid #E0DCF0;border-radius:.5rem;padding:.4rem .6rem;font-weight:600}
@media (max-width: 768px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:.5rem}
  .brand{width:100%;justify-content:flex-start}
  .header-inner .nav{width:100%;justify-content:flex-start;gap:.5rem;padding-top:.25rem;border-top:1px solid #E9E6F2}
  .header-inner .nav a{flex:1 1 calc(50% - .5rem);text-align:center;padding:.6rem .5rem}
  .header-inner .nav a:hover,
  .header-inner .nav a[aria-current="page"]{background:var(--brand);color:#fff}
  .mobile-nav-holder{display:block;margin-top:.75rem}
  .mobile-nav-holder .nav{
    gap:.35rem;
    padding:.45rem;
    border:1px solid #E0DCF0;
    border-radius:.75rem;
    /* allow items to wrap into multiple rows instead of horizontal scrolling */
    flex-wrap:wrap;
    overflow-x:visible;
    display:flex;
    justify-content:space-between;
  }
  .mobile-nav-holder .nav::-webkit-scrollbar{display:none}
  /* make items share the row (two-per-row) and center them */
  .mobile-nav-holder .nav a{flex:1 1 calc(50% - .35rem);font-size:.85rem;padding:.45rem .65rem;text-align:center}
}
@media (max-width: 480px){
  /* Keep header nav items full-width when nav remains in the header
     but when the nav is inside the mobile-nav-holder prefer two columns
     (max two rows) by shrinking font and padding rather than stacking. */
  .header-inner .nav a{flex-basis:100%}
  .mobile-nav-holder .nav{padding:.35rem}
  .mobile-nav-holder .nav a{
    /* two-per-row, allow shrinking of text to fit */
    flex:1 1 calc(50% - .35rem);
    font-size:.78rem;
    padding:.35rem .5rem;
    white-space:normal;
    line-height:1.1;
    text-align:center;
  }
}

/* Hero */
.hero{padding:var(--space-6) 0}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-5);align-items:center}
.hero img{border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.06)}
@media (max-width: 900px){.hero-inner{grid-template-columns:1fr}}

/* Banner (full-width background image hero) */
.banner{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45))}
.banner .wrap{position:relative;z-index:1;padding:var(--space-6) var(--space-3)}
.banner h1{color:#fff}
.banner p{color:#EDEBF5;max-width:60ch}
.banner .btn{background:var(--accent);color:#2E2A2A}
.banner .btn:hover,.banner .btn:focus{background:#ad8200;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* Photo banner variant (shows full image) */
.hero-photo{padding:0}
.banner-photo{position:relative;margin:0}
.banner-photo img{width:100%;height:auto;display:block}
.banner-caption{position:absolute;left:0;right:0;bottom:0}
.banner-caption > .wrap{padding:var(--space-4) var(--space-3)}
.banner-caption .card-bg{background:rgba(0,0,0,.45);border-radius:.5rem;padding:var(--space-3)}
.banner-caption h1{color:#fff;margin:0 0 .5rem}
.banner-caption p{color:#F3F2F8;margin:0 0 .5rem}
.banner-caption .btn{background:var(--accent);color:#2E2A2A}
.banner-caption .btn:hover{background:#ad8200}
.banner-caption a{color:#fff;text-decoration:underline}
@media (max-width: 600px){
  /* Stack caption below image on mobile */
  .banner-caption{position:static}
  .banner-caption > .wrap{padding:var(--space-3) 0}
  .banner-caption .card-bg{background:transparent;padding:0}
  .banner-caption h1{color:var(--brand)}
  .banner-caption p{color:var(--text)}
  .banner-caption a{color:var(--brand)}
}

/* Spotlight hero (overlayed centered text, like the example) */
.spotlight{position:relative;height:clamp(320px,55vh,600px);color:#fff;overflow:hidden}
.spotlight img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spotlight::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.35))}
.spotlight-content{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--space-3)}
.spotlight h1{color:#fff;font-size:clamp(1.75rem,4vw,2.5rem);margin:0 0 .5rem}
.spotlight .sublead{color:#EDEBF5;max-width:65ch;margin:0 auto}
.spotlight .actions{margin-top:var(--space-3)}
.spotlight-dots{position:absolute;left:0;right:0;bottom:1rem;display:flex;justify-content:center;gap:.5rem;z-index:1}
.spotlight-dots button{width:.5rem;height:.5rem;border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.45)}
.spotlight-dots button[aria-current="true"]{background:#fff}

/* Desktop: keep photo banner compact without cropping */
@media (min-width: 1024px){
  .banner-photo{height:clamp(360px,48vh,540px);display:flex;align-items:center;justify-content:center}
  .banner-photo img{max-height:100%;width:auto}
}

/* Split hero: image left, text right */
.split-hero{padding:0}
.split-hero .wrap{padding:0}
.split-hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(320px,50vh,560px)}
.split-hero-media{background:#4E2A84;display:flex;align-items:center;justify-content:center;overflow:hidden}
.split-hero-media img{width:100%;height:100%;object-fit:contain;object-position:40% center}
.split-hero-content{display:flex;align-items:center}
.split-hero-content .content{padding:var(--space-6) var(--space-3);max-width:42rem}
.split-hero-content h1{margin-bottom:.5rem;font-size:clamp(2rem,3.5vw,2.75rem)}
.split-hero-content p{max-width:60ch}
@media (max-width: 768px){
  .split-hero-inner{grid-template-columns:1fr;min-height:auto}
  .split-hero-content .content{padding:var(--space-4) var(--space-3)}
}

/* Utilities */
.btn{display:inline-block;background:var(--brand);color:#fff;text-align:center;padding:.6rem 1rem;border-radius:.5rem;font-weight:700;transition:background .2s ease, box-shadow .2s ease, transform .06s ease}
.btn:hover,.btn:focus{background:var(--brand-700);color:#fff !important;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted)}
.card{background:#fff;border:1px solid #ECEAF3;border-radius:.75rem;padding:var(--space-4);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.grid{display:grid;gap:var(--space-4)}
.grid.auto-fit{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Fixed two-column helper */
.grid.two-col{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.grid.two-col{grid-template-columns:1fr}}
figure{margin:0}
figcaption{font-size:.875rem;color:var(--muted);margin-top:.5rem}

/* Thumbnail gallery (equal squares) */
.thumb-gallery{padding:var(--space-5) 0}
.thumb-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.thumb{position:relative;aspect-ratio:1/1;border-radius:.5rem;overflow:hidden;background:#f2f0f7;border:1px solid #eceaf3;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{box-shadow:0 4px 14px rgba(0,0,0,.08)}

/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1000;padding:2rem}
.lightbox-overlay.open{display:flex}
.lightbox-content{max-width:92vw;max-height:88vh}
.lightbox-content img{max-width:100%;max-height:88vh;border-radius:.5rem;display:block}
.lightbox-content iframe{width:92vw;max-width:1000px;height:60vh;max-height:88vh;border:none;border-radius:.5rem;display:none;background:#000}
.lightbox-caption{color:#EDEBF5;margin-top:.5rem;text-align:center}
.lightbox-close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:1px solid #ffffff33;color:#fff;border-radius:.5rem;padding:.3rem .6rem;cursor:pointer}

/* Utilities for section spacing */
.extra-gap{padding-top:var(--space-6)}

/* Accordion (collapsible sections) */
.accordion{display:grid;gap:var(--space-3)}
.accordion details{background:#fff;border:1px solid #ECEAF3;border-radius:.75rem;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.accordion summary{list-style:none;cursor:pointer;padding:var(--space-3) var(--space-4);font-weight:700;color:var(--brand);display:flex;align-items:center;gap:.75rem}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::before{content:"▸";transition:transform .2s ease;color:var(--brand)}
.accordion details[open] summary::before{transform:rotate(90deg)}
.accordion .accordion-content{padding:0 var(--space-4) var(--space-4)}
.accordion .accordion-content > .card{margin-top:var(--space-3)}
/* Embedded letter frame */
.letter-frame{width:100%;height:70vh;border:1px solid #ECEAF3;border-radius:.5rem;background:#fff}

/* Page-specific compact tweaks: Memorial Letters */
.page-memorial .section{padding:var(--space-4) 0}
.page-memorial .display{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:var(--space-2)}
.page-memorial .accordion summary{padding:var(--space-2) var(--space-3)}
.page-memorial .accordion .accordion-content{padding:0 var(--space-3) var(--space-3)}
.page-memorial .letter-frame{height:50vh}
.page-memorial .prose p{margin-bottom:.5rem}
.spacer{height:var(--space-6)}
/* Ensure clear gap before sub-headings inside accordion (e.g., Cards, Keepsakes) */
.page-memorial .accordion h3{margin:var(--space-4) 0 var(--space-2)}
.page-memorial .accordion details + h3{margin-top:var(--space-6)}

/* Footer */
.site-footer{border-top:1px solid #E9E6F2;background:#fff}
.footer-inner{padding:var(--space-4) 0;color:var(--muted);font-size:.9rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem;border-radius:.25rem}

/* Readable text section */
.prose{max-width:75ch}
.prose p{margin-bottom:1rem}
.lead{font-size:1.1rem}
@media (max-width:600px){.lead{font-size:1rem}}

/* Simple banner constrained to nav width */
.nav-banner{padding:0}
.banner-inline{width:100%;height:auto;display:block;border-radius:var(--radius)}

/* Display heading (modern sans, bold) */
.display{font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:.2px;color:var(--brand);margin:0 0 var(--space-3)}
.display{font-size:clamp(1.75rem,3.5vw,2.5rem)}

/* Split content under banner */
.split-content{padding:var(--space-5) 0}
.split-content .inner{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-5);align-items:start}
.right-column .cards{display:grid;gap:var(--space-4);grid-template-columns:1fr}
@media (max-width: 900px){
  .split-content .inner{grid-template-columns:1fr}
}

/* Donate section */
.donate-section{padding:var(--space-5) 0}
.donate-card{background:#fff;border:1px solid #ECEAF3;border-radius:.75rem;padding:var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);box-shadow:0 2px 12px rgba(0,0,0,.04)}
.donate-card h2{margin:0 0 .5rem}
.donate-card p{margin:0}
@media (max-width: 700px){
  .donate-card{flex-direction:column;align-items:flex-start}
}
@media (min-width: 900px){
  .right-column .cards{grid-template-columns:repeat(2,1fr)}
  .right-column .cards .span-2{grid-column:1 / -1}
}

/* Donate card when placed inside right column */
.right-column .donate-card{padding:var(--space-4)}

/* Compact desktop fit (keep banner image size unchanged) */
@media (min-width: 1200px){
  /* Header and footer */
  .site-header .header-inner{padding:var(--space-2) 0}
  .brand img{width:42px;height:42px}
  .site-footer .footer-inner{padding:var(--space-3) 0}

  /* Content spacing and typography */
  .split-content{padding:var(--space-4) 0 var(--space-3)}
  .split-content .inner{gap:var(--space-4)}
  .display{font-size:clamp(1.6rem,2vw,2rem);margin-bottom:var(--space-2)}
  .prose p{margin-bottom:.75rem}

  /* Right pane layout and card density */
  .right-column .cards{gap:var(--space-3)}
  .card{padding:var(--space-3)}
  .card h2{margin-bottom:.25rem}
  .donate-card{padding:var(--space-3)}
  .right-column .donate-card{padding:var(--space-3)}

  /* Buttons */
  .btn{padding:.5rem .9rem}
}

/* Tighten spacing between split and donate */
.split-content + .donate-section{padding-top:var(--space-3)}

/* Compact desktop mode removed per latest request */

/* Socials for the Memorial Page */
.social-links li {
  list-style: none;
  display: flex;          /* puts image and text in a row */
  align-items: center;    /* vertically centers them */
  margin-bottom: 8px;     /* optional spacing between items */
}

.social-links img {
  width: 20px;            /* adjust as needed */
  height: 20px;
  margin-right: 8px;      /* space between image and text */
}
/* Page-specific compact tweaks: Memorial Letters */
.page-memorial .section{padding:var(--space-4) 0}
.page-memorial .display{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:var(--space-2)}
.page-memorial .accordion summary{padding:var(--space-2) var(--space-3)}
.page-memorial .accordion .accordion-content{padding:0 var(--space-3) var(--space-3)}
.page-memorial .accordion h3{margin:var(--space-4) 0 var(--space-2)}
.page-memorial .accordion details + h3{margin-top:var(--space-6)}
.page-memorial .section.tight-top{padding-top:var(--space-2)}
.page-memorial .section.tight-bottom{padding-bottom:var(--space-2)}
.page-memorial .letter-frame{height:50vh}
.page-memorial .section-subtitle{display:block;margin-top:var(--space-6);margin-bottom:var(--space-2)}